/* =========================================================================
   Burger Mega Menu — foglio unico.
   Nessun valore di gusto qui dentro: solo var(--bmm-*). I preset cambiano
   le variabili, mai questo file. Vedi TOKENS.md.
   ========================================================================= */

/* ---------- skip link ---------- */
.bmm-skip{
  position:absolute;left:-9999px;top:0;z-index:calc(var(--bmm-z-overlay) + 10);
  background:var(--bmm-bar-1-bg);color:var(--bmm-bar-1-fg);
  padding:12px 18px;border-radius:var(--bmm-radius);
  font:600 .8rem/1 var(--bmm-font-text);letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none}
.bmm-skip:focus{left:12px;top:12px}

/* ---------- guscio ---------- */
.bmm{
  font-family:var(--bmm-font-text);
  transition:transform var(--bmm-dur-slow) var(--bmm-ease)}
.bmm *{box-sizing:border-box}

/* Reset dei bottoni.
   Temi e WooCommerce ridefiniscono `button{}` con bordi, sfondi e display
   propri: sul sito di prova il burger e' comparso in pieno desktop con un
   bordo rosa perche' un reset di quel tipo vinceva sulle nostre regole.
   L'header non deve dipendere dal vincere quella gara: si azzera tutto qui,
   con specificita' 0,1,1 (classe + elemento), e le regole successive sono
   prefissate con .bmm per stare sopra a qualunque reset a un solo elemento. */
.bmm button,.bmm-overlay button{
  -webkit-appearance:none;appearance:none;
  background:transparent;border:0;border-radius:0;box-shadow:none;
  color:inherit;font:inherit;white-space:normal;
  margin:0;text-transform:none}
/* Gli STATI vanno azzerati a parte: i temi colorano button:hover e button:focus
   con regole proprie (su Don Fernandos `[type=button]:hover{background:#c36}`),
   e un bottone senza una nostra regola di hover diventa rosso al passaggio.
   Specificita' 0,2,1: le regole dei singoli comandi la superano con 0,3,0. */
.bmm button:hover,.bmm button:focus,.bmm button:active,
.bmm-overlay button:hover,.bmm-overlay button:focus,.bmm-overlay button:active{
  background:transparent;color:inherit;border-color:inherit;box-shadow:none}

/* sticky non richiede spacer e non produce CLS: e' il default.
   fixed resta per gli header che devono sovrapporsi a una hero. */
.bmm--sticky{position:sticky;top:0;z-index:var(--bmm-z-header)}
/* Quando l'header sta dentro contenitori alti quanto lui (Theme Builder),
   l'aggancio si sposta sull'antenato libero: lo marca il JS. */
.bmm-sticky-host{position:sticky;top:0;z-index:var(--bmm-z-header)}
/* relative, NON static: serve a tenere il contesto di impilamento.
   Con static l'header perde lo z-index e il velo (999) finisce SOPRA il
   pannello (5), coprendone tutti i link. Successo l'11/08/2026.
   Lo sticky vero e proprio sta sull'antenato, questo resta solo un livello. */
.bmm-sticky-host .bmm--sticky{position:relative;z-index:var(--bmm-z-header)}
.bmm--fixed{position:fixed;top:0;left:0;right:0;z-index:var(--bmm-z-header)}
.bmm.is-hidden{transform:translateY(-100%)}

.bmm-topline{height:var(--bmm-topline-h);background:var(--bmm-accent)}

.bmm-inner{max-width:var(--bmm-container);margin:0 auto;padding:0 var(--bmm-pad-x)}
.bmm-empty{padding:12px var(--bmm-pad-x);background:#FEF7E0;color:#7a5c00;font-size:.85rem}

/* DIMENSIONI DELLE IMMAGINI: qui si usa !important, e c'e' un motivo.
   Ogni sito ha il suo CSS che regola le immagini, e ognuno con una specificita'
   diversa. Casi incontrati sul campo, in ordine di scoperta:
       .elementor img                                  (0,1,1)
       .elementor-location-header img:not(.wm)         (0,2,1)  ← Don Fernandos
   Alzare la nostra specificita' ogni volta e' una corsa che non finisce: al
   sito successivo ci sara' una regola piu' forte, e il sintomo e' sempre lo
   stesso — il logo torna alla sua altezza naturale e sfonda l'header.
   Il plugin deve poter garantire la misura che il suo stesso controllo imposta,
   quindi qui afferma il controllo sulle proprie immagini. Solo su queste. */

/* ---------- fascia 1 ---------- */
.bmm-bar1{background:var(--bmm-bar-1-bg)}
.bmm-bar1 .bmm-inner{
  padding:var(--bmm-bar-1-pad-y) var(--bmm-pad-x);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}

.bmm-side{display:flex;align-items:center;gap:22px}
.bmm-side--left{grid-column:1;justify-self:start;gap:8px}
.bmm-side--right{grid-column:3;justify-self:end}

.bmm-logo{
  grid-column:2;justify-self:center;position:relative;z-index:3;
  display:flex;align-items:center;height:var(--bmm-logo-h);line-height:0}
.bmm .bmm-logo__img{height:var(--bmm-logo-h) !important;width:auto !important;display:block;max-width:none !important}
.bmm-logo__text{
  color:var(--bmm-bar-1-fg);font-family:var(--bmm-font-display);
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1.1}

/* ---------- azioni ---------- */
.bmm-act{
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--bmm-bar-1-fg);text-decoration:none;cursor:pointer;
  background:transparent;border:0;padding:6px;line-height:0;opacity:.94;
  transition:color var(--bmm-dur) var(--bmm-ease),opacity var(--bmm-dur) var(--bmm-ease)}
.bmm-act svg{width:var(--bmm-icon);height:var(--bmm-icon);display:block}
.bmm-act:hover,.bmm-act:focus-visible{opacity:1}
.bmm-act:focus-visible{outline:2px solid var(--bmm-bar-1-fg);outline-offset:3px;border-radius:4px}

.bmm-act--cart{position:relative}

/* ---------- mini-carrello ----------
   Il padding-top e' un ponte: senza, spostando il mouse dall'icona al pannello
   si attraversa un vuoto e il pannello si chiude. */
.bmm-cart{position:relative;display:inline-flex}
.bmm-cart__panel{
  position:absolute;top:100%;right:0;width:320px;max-width:88vw;padding-top:12px;
  opacity:0;visibility:hidden;transform:translateY(-6px);z-index:6;
  transition:opacity var(--bmm-dur) var(--bmm-ease),transform var(--bmm-dur) var(--bmm-ease),visibility var(--bmm-dur)}
.bmm-cart:hover .bmm-cart__panel,.bmm-cart:focus-within .bmm-cart__panel{
  opacity:1;visibility:visible;transform:none}
.bmm-cart__body{
  background:var(--bmm-panel-bg);color:var(--bmm-panel-fg);
  border-radius:var(--bmm-radius);box-shadow:var(--bmm-shadow-panel);
  padding:20px 22px;font-size:.9rem;line-height:1.55;max-height:70vh;overflow-y:auto}
.bmm-cart__body a{color:var(--bmm-bar-1-bg);text-decoration:none}
.bmm-cart__body a:hover{color:var(--bmm-accent)}
.bmm-cart__body ul{list-style:none;margin:0 0 14px;padding:0}
.bmm-cart__body .woocommerce-mini-cart__empty-message{margin:0;text-align:center;color:var(--bmm-panel-muted)}
.bmm-cart__body .woocommerce-mini-cart__buttons{display:flex;gap:9px;flex-wrap:wrap;margin:0}
.bmm-cart__body .woocommerce-mini-cart__buttons a{
  flex:1 1 auto;text-align:center;background:var(--bmm-accent);color:#fff;
  font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  padding:12px 14px;border-radius:var(--bmm-radius)}
.bmm-cart__body .woocommerce-mini-cart__buttons a:hover{background:var(--bmm-accent-hover);color:#fff}
@media(max-width:900px){.bmm-cart__panel{display:none}}
.bmm-cart-count{
  position:absolute;top:-2px;right:-4px;min-width:17px;height:17px;padding:0 4px;
  border-radius:9px;background:var(--bmm-accent);color:#fff;
  font-size:.63rem;font-weight:700;line-height:17px;text-align:center;display:none}
.bmm-cart-count.is-on{display:block}

/* ---------- chiama ora ---------- */
.bmm-call{
  display:inline-flex;align-items:center;gap:9px;
  font-size:var(--bmm-cta-size);font-weight:600;
  letter-spacing:var(--bmm-cta-tracking);text-transform:uppercase;
  color:var(--bmm-bar-1-fg);text-decoration:none;
  border:1px solid var(--bmm-line-strong);border-radius:var(--bmm-radius);
  padding:11px 18px;line-height:1;white-space:nowrap;
  transition:background var(--bmm-dur) var(--bmm-ease),color var(--bmm-dur) var(--bmm-ease),border-color var(--bmm-dur) var(--bmm-ease)}
.bmm-call svg{width:var(--bmm-icon-sm);height:var(--bmm-icon-sm);display:block;flex:0 0 var(--bmm-icon-sm)}
.bmm-call:hover,.bmm-call:focus-visible{
  background:var(--bmm-bar-1-fg);color:var(--bmm-bar-1-bg);border-color:var(--bmm-bar-1-fg)}

/* ---------- social ---------- */
.bmm-social{display:inline-flex;align-items:center;gap:6px;margin-left:2px}
.bmm-soc{
  display:inline-flex;align-items:center;justify-content:center;
  width:var(--bmm-touch);height:var(--bmm-touch);
  color:var(--bmm-bar-1-fg);text-decoration:none;
  border:1px solid var(--bmm-line-strong);border-radius:var(--bmm-radius);
  transition:background var(--bmm-dur) var(--bmm-ease),color var(--bmm-dur) var(--bmm-ease),border-color var(--bmm-dur) var(--bmm-ease)}
.bmm-soc svg{width:var(--bmm-icon-sm);height:var(--bmm-icon-sm);display:block}
.bmm-soc:hover,.bmm-soc:focus-visible{
  background:var(--bmm-bar-1-fg);color:var(--bmm-bar-1-bg);border-color:var(--bmm-bar-1-fg)}

/* ---------- burger ---------- */
.bmm .bmm-burger{display:none;cursor:pointer;padding:8px 4px}
.bmm .bmm-burger span{display:block;width:26px;height:2px;background:var(--bmm-bar-1-fg);border-radius:2px}
.bmm .bmm-burger span+span{margin-top:6px}
.bmm .bmm-burger:hover span{background:var(--bmm-soft)}
.bmm .bmm-burger:focus-visible{outline:2px solid var(--bmm-bar-1-fg);outline-offset:3px}

/* ---------- fascia 2 — la barra del menu ---------- */
.bmm-bar2{background:var(--bmm-bar-2-bg);border-bottom:1px solid var(--bmm-line-2);position:relative;z-index:1}
.bmm-bar2 .bmm-inner{display:flex;align-items:center;justify-content:center}

.bmm-nav{
  list-style:none;margin:0;padding:0;
  display:flex;align-items:center;justify-content:center;gap:var(--bmm-nav-gap)}
.bmm-item{position:relative;display:flex;align-items:center}

.bmm-link{
  position:relative;display:inline-block;
  padding:var(--bmm-nav-pad-t) 2px var(--bmm-nav-pad-b);
  font-family:var(--bmm-font-text);
  font-size:var(--bmm-nav-size);font-weight:var(--bmm-nav-weight);
  letter-spacing:var(--bmm-nav-tracking);text-transform:var(--bmm-nav-transform);
  color:var(--bmm-bar-2-fg);text-decoration:none;
  transition:color var(--bmm-dur) var(--bmm-ease)}
.bmm-link::after{
  content:"";position:absolute;left:0;right:0;bottom:var(--bmm-underline-b);
  height:var(--bmm-underline-h);background:currentColor;
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--bmm-dur-underline) var(--bmm-ease)}
/* La voce con il pannello aperto diventa piu' grassa.
   Il ::before e' una copia invisibile della stessa etichetta gia' in grassetto:
   fissa la larghezza sul valore massimo, cosi' passando da 600 a 800 il testo
   non si allarga e le voci accanto non si spostano. Altezza 0, quindi non
   occupa spazio verticale. */
.bmm-link::before{
  content:attr(data-label);
  display:block;height:0;overflow:hidden;visibility:hidden;
  font-weight:var(--bmm-nav-weight-open);pointer-events:none}
.bmm-item.is-open>.bmm-link{font-weight:var(--bmm-nav-weight-open)}

.bmm-link:hover::after,
.bmm-link:focus-visible::after,
.bmm-item.bmm-current>.bmm-link::after,
.bmm-item.is-open>.bmm-link::after{transform:scaleX(1)}

/* ---------- pannello (struttura; i blocchi arrivano in Fase 2) ---------- */
.bmm .bmm-toggle{
  cursor:pointer;padding:4px;margin-left:4px;
  color:var(--bmm-bar-2-fg);line-height:0;
  transition:transform var(--bmm-dur) var(--bmm-ease)}
.bmm-toggle svg{width:14px;height:14px;display:block;transform:rotate(90deg)}
.bmm-item.is-open .bmm-toggle{transform:rotate(180deg)}
.bmm .bmm-toggle:hover{color:var(--bmm-accent)}
.bmm .bmm-toggle:focus-visible{outline:2px solid var(--bmm-bar-2-fg);outline-offset:2px}

.bmm-panel{
  position:absolute;top:100%;z-index:5;
  /* ponte: senza questo padding il mouse "cade" fra voce e pannello e chiude */
  padding-top:2px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--bmm-dur) var(--bmm-ease),transform var(--bmm-dur) var(--bmm-ease),visibility var(--bmm-dur)}
.bmm-panel[hidden]{display:none}
.bmm-item.is-open>.bmm-panel{opacity:1;visibility:visible;transform:none}
.bmm-panel__inner{
  position:relative;isolation:isolate;
  color:var(--bmm-panel-fg);
  border-radius:var(--bmm-radius);box-shadow:var(--bmm-shadow-panel);
  padding:26px 28px}
/* Il fondo sta su uno strato dedicato: mettere l'opacita' su __inner velerebbe
   anche il testo. Cosi' si vela solo lo sfondo e i link restano pieni.
   Gradiente fra due colori uguali = colore pieno: un solo percorso di codice. */
.bmm-panel__inner::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:linear-gradient(var(--bmm-panel-angle),var(--bmm-panel-bg),var(--bmm-panel-bg-2));
  opacity:var(--bmm-panel-alpha);
  -webkit-backdrop-filter:blur(var(--bmm-panel-blur));backdrop-filter:blur(var(--bmm-panel-blur))}
/* larghezza proporzionale alle colonne contenute: 12 unita' = container pieno */
.bmm-panel--content{
  left:50%;transform:translate(-50%,-6px);
  width:calc(var(--bmm-container) * var(--bmm-span-total,6) / 12);
  min-width:260px;max-width:calc(100vw - var(--bmm-pad-x) * 2)}
.bmm-item.is-open>.bmm-panel--content{transform:translate(-50%,0)}
.bmm-panel--boxed{
  left:0;
  width:calc(var(--bmm-container) * var(--bmm-span-total,6) / 12);
  min-width:260px;max-width:calc(100vw - var(--bmm-pad-x) * 2)}

/* ---------- altezza del pannello ----------
   auto = quanto il contenuto (default) · fixed = --bmm-panel-h · full = fino
   in fondo alla finestra. In entrambi i casi non-auto il contenuto scorre
   dentro il pannello, non trascina la pagina. */
.bmm-panel--h-fixed>.bmm-panel__inner,
.bmm-panel--h-full>.bmm-panel__inner{
  overflow-y:auto;overscroll-behavior:contain}
.bmm-panel--h-fixed>.bmm-panel__inner{height:var(--bmm-panel-h,60vh)}
/* 100dvh meno l'altezza dell'header, misurata dal JS: senza, il fondo del
   pannello finisce sotto il bordo della finestra */
.bmm-panel--h-full>.bmm-panel__inner{height:calc(100dvh - var(--bmm-header-h,0px))}

/* ---------- pannello in modalita' finestra ---------- */
.bmm-scrim{
  position:fixed;inset:0;z-index:calc(var(--bmm-z-header) - 1);
  background:var(--bmm-scrim);opacity:0;
  transition:opacity var(--bmm-dur) var(--bmm-ease)}
.bmm-scrim[hidden]{display:none}
.bmm-scrim.is-on{opacity:1}

.bmm .bmm-panel__close{
  position:absolute;top:14px;right:16px;z-index:2;
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;
  border:1px solid var(--bmm-line-2);color:var(--bmm-panel-fg);
  cursor:pointer;line-height:0;padding:0;
  transition:background var(--bmm-dur) var(--bmm-ease),color var(--bmm-dur) var(--bmm-ease)}
.bmm .bmm-panel__close svg{width:15px;height:15px;display:block}
.bmm .bmm-panel__close:hover,.bmm .bmm-panel__close:focus-visible{
  background:var(--bmm-panel-fg);color:var(--bmm-panel-bg)}
.bmm-panel--dialog>.bmm-panel__inner{padding-top:34px}

/* A tutta larghezza: il riferimento e' la fascia del menu, non la voce.
   La voce diventa position:static (classe .bmm-item--full messa dal walker),
   cosi' left/right si misurano sulla barra e non sul singolo link. */
.bmm-item--full{position:static}
.bmm-panel--full{left:0;right:0}
/* fondo a tutta larghezza, contenuto incolonnato: e' cio' che "full" significa
   nei mega menu dei brand, non un riquadro piu' largo */
.bmm-panel--full .bmm-panel__inner{border-radius:0;padding:32px var(--bmm-pad-x) 36px}
.bmm-panel--full .bmm-grid{max-width:var(--bmm-container);margin:0 auto}

/* Quando il clic sulla voce apre il pannello, la freccetta non serve piu':
   sarebbe un secondo comando per la stessa azione. */
.bmm-item[data-link-action="open"] > .bmm-toggle{display:none}

/* Il link alla pagina della voce, che altrimenti diventerebbe irraggiungibile. */
.bmm .bmm-panel__all{
  display:inline-block;margin:0 0 18px;padding-bottom:2px;
  font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--bmm-accent);text-decoration:none;border-bottom:1px solid currentColor}
.bmm .bmm-panel__all:hover{color:var(--bmm-accent-hover)}

/* ---------- blocchi dentro il pannello ---------- */
.bmm-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:28px 32px;align-items:start}
.bmm-col{grid-column:span var(--bmm-span,3);min-width:0}
/* Filetto verticale fra le colonne. Non e' un bordo sulla colonna: con il
   ritorno a capo della griglia comparirebbe anche a inizio riga. Si usa
   uno pseudo-elemento posizionato nel mezzo del solco. */
.bmm-grid{position:relative}
.bmm-col + .bmm-col{position:relative}
.bmm-col + .bmm-col::before{content:"";position:absolute;top:2px;bottom:2px;
  left:-16px;width:1px;background:var(--bmm-panel-line,rgba(0,0,0,.09))}
@media(max-width:900px){.bmm-col + .bmm-col::before{display:none}}
.bmm-blk+.bmm-blk{margin-top:22px}
.bmm-blk__title{
  margin:0 0 14px;font-size:.8rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--bmm-panel-brand,var(--bmm-panel-muted))}

.bmm-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.bmm-links a{
  display:block;padding:7px 0;text-decoration:none;color:var(--bmm-panel-fg);
  transition:color var(--bmm-dur) var(--bmm-ease)}
.bmm-links a:hover,.bmm-links a:focus-visible{color:var(--bmm-panel-brand,var(--bmm-accent))}
.bmm-links__label{font-size:.92rem;font-weight:500}
.bmm-links__desc{display:block;font-size:.78rem;color:var(--bmm-panel-muted);margin-top:1px}
.bmm-badge{
  display:inline-block;margin-left:8px;padding:1px 7px;border-radius:999px;
  background:var(--bmm-accent);color:#fff;
  font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;vertical-align:middle}

.bmm-card{display:block;text-decoration:none;color:inherit}
.bmm-card__img{display:block;overflow:hidden;border-radius:var(--bmm-radius);aspect-ratio:var(--bmm-ratio,4/3)}
.bmm .bmm-card__img img{width:100% !important;height:100% !important;object-fit:cover;display:block;
  transition:transform .6s var(--bmm-ease)}
.bmm-card:hover .bmm-card__img img{transform:scale(1.04)}
.bmm-card__body{display:block;margin-top:10px}
.bmm-card__title{display:block;font-size:.95rem;font-weight:600}
.bmm-card__desc{display:block;font-size:.8rem;color:var(--bmm-panel-muted);margin-top:3px}
.bmm-card__cta{
  display:inline-block;margin-top:8px;font-size:.72rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--bmm-accent);
  border-bottom:1px solid currentColor;padding-bottom:2px}

.bmm-promo{
  position:relative;display:block;overflow:hidden;text-decoration:none;
  border-radius:var(--bmm-radius);aspect-ratio:var(--bmm-ratio,16/9)}
.bmm .bmm-promo img{width:100% !important;height:100% !important;object-fit:cover;display:block}
.bmm-promo__veil{position:absolute;inset:0;background:#000;opacity:var(--bmm-veil,.35)}
.bmm-promo__text{
  position:absolute;left:0;right:0;bottom:0;padding:20px 22px;color:#fff;
  display:flex;flex-direction:column;gap:4px}
.bmm-promo__kicker{font-size:.62rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;opacity:.9}
.bmm-promo__title{font-family:var(--bmm-font-display);font-size:1.18rem;font-weight:700;line-height:1.2}
.bmm-promo__cta{margin-top:6px;font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
/* Impaginazione a scheda: la foto in alto, sotto testo e pulsante. Il rapporto
   d'aspetto va sul contenitore della foto, non sulla scheda, altrimenti la
   scheda intera si schiaccia su quel rapporto e il pulsante ne esce fuori. */
.bmm-promo--scheda{aspect-ratio:auto;display:flex;flex-direction:column;gap:0;
  background:var(--bmm-panel-card,rgba(0,0,0,.03));border-radius:var(--bmm-radius);overflow:hidden}
.bmm-promo--scheda .bmm-promo__media{display:block;aspect-ratio:var(--bmm-ratio,16/9);overflow:hidden}
.bmm .bmm-promo--scheda .bmm-promo__media img{width:100% !important;height:100% !important;
  object-fit:cover;display:block}
.bmm-promo--scheda .bmm-promo__body{position:static;display:flex;flex-direction:column;
  gap:6px;align-items:flex-start;padding:16px 18px 18px;color:var(--bmm-panel-fg)}
.bmm-promo--scheda .bmm-promo__kicker{color:var(--bmm-panel-muted);opacity:1}
.bmm-promo--scheda .bmm-promo__title{color:var(--bmm-panel-fg);font-size:1.06rem}
.bmm-promo__btn{display:inline-flex;align-items:center;min-height:44px;
  margin-top:8px;padding:11px 22px;border-radius:8px;
  background:var(--bmm-panel-brand,var(--bmm-accent));color:#fff;text-decoration:none;
  font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  transition:background var(--bmm-dur) var(--bmm-ease)}
.bmm-promo__btn:hover,.bmm-promo__btn:focus-visible{
  background:var(--bmm-accent-hover,#000);color:#fff}

.bmm-prods,.bmm-posts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.bmm-prods a,.bmm-posts a{display:flex;gap:11px;align-items:center;text-decoration:none;color:var(--bmm-panel-fg)}
.bmm-prods__img,.bmm-posts__img{flex:0 0 52px;width:52px;height:52px;overflow:hidden;border-radius:calc(var(--bmm-radius) * .6)}
.bmm .bmm-prods__img img,.bmm .bmm-posts__img img{width:100% !important;height:100% !important;object-fit:cover;display:block}
.bmm-prods__body,.bmm-posts__body{display:flex;flex-direction:column;gap:2px;min-width:0}
.bmm-prods__name,.bmm-posts__title{font-size:.88rem;font-weight:500}
.bmm-prods__price,.bmm-posts__date{font-size:.78rem;color:var(--bmm-panel-muted)}
.bmm-prods__price del{opacity:.6;margin-right:5px}
.bmm-prods a:hover .bmm-prods__name,.bmm-posts a:hover .bmm-posts__title{color:var(--bmm-accent)}

/* ---------- video da YouTube ---------- */
.bmm-yt{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.bmm-yt a{display:flex;gap:12px;align-items:flex-start;text-decoration:none;color:var(--bmm-panel-fg)}
.bmm-yt__img{
  position:relative;flex:0 0 108px;width:108px;aspect-ratio:16/9;
  overflow:hidden;border-radius:calc(var(--bmm-radius) * .6);background:#000}
.bmm .bmm-yt__img img{width:100% !important;height:100% !important;object-fit:cover;display:block}
/* triangolo di riproduzione disegnato col bordo: nessuna immagine da caricare */
.bmm-yt__play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:0;height:0;border-style:solid;border-width:7px 0 7px 12px;
  border-color:transparent transparent transparent #fff;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
.bmm-yt__body{display:flex;flex-direction:column;gap:3px;min-width:0}
.bmm-yt__title{font-size:.88rem;font-weight:500;line-height:1.35}
.bmm-yt__date{font-size:.75rem;color:var(--bmm-panel-muted)}
.bmm-yt a:hover .bmm-yt__title{color:var(--bmm-accent)}

.bmm-contact{display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.bmm-contact__line{font-size:.9rem;text-decoration:none;color:var(--bmm-panel-fg)}
.bmm-contact__line:hover{color:var(--bmm-accent)}
.bmm-contact__note{font-size:.8rem;color:var(--bmm-panel-muted)}
.bmm-btn{
  display:inline-block;margin-top:8px;padding:11px 20px;border-radius:var(--bmm-radius);
  font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
  transition:background var(--bmm-dur) var(--bmm-ease),color var(--bmm-dur) var(--bmm-ease)}
.bmm-btn--solid{background:var(--bmm-accent);color:#fff}
.bmm-btn--solid:hover{background:var(--bmm-accent-hover);color:#fff}
.bmm-btn--outline{border:1px solid currentColor;color:var(--bmm-panel-fg)}
.bmm-btn--outline:hover{background:var(--bmm-panel-fg);color:var(--bmm-panel-bg)}
.bmm-btn--text{padding:0;border-bottom:1px solid currentColor;color:var(--bmm-accent)}

.bmm-html img{max-width:100%;height:auto}

/* ---------- overlay mobile ---------- */
.bmm-overlay{
  position:fixed;inset:0;z-index:var(--bmm-z-overlay);
  background:linear-gradient(var(--bmm-ov-angle),var(--bmm-ov-bg),var(--bmm-ov-bg-2));
  color:var(--bmm-bar-1-fg);
  display:none;flex-direction:column;align-items:center;
  /* D'Azeglio centra le voci, Don Fernandos le allinea in alto: e' un token,
     non due fogli di stile */
  justify-content:var(--bmm-ov-align);
  height:100dvh;overflow:hidden;overscroll-behavior:none;
  /* env(): sui telefoni con notch e barra gesti, senza questo il pulsante di
     chiusura finisce sotto la tacca e i contatti sotto la barra di sistema */
  padding:
    calc(20px + env(safe-area-inset-top))
    calc(var(--bmm-pad-x) + env(safe-area-inset-right))
    calc(28px + env(safe-area-inset-bottom))
    calc(var(--bmm-pad-x) + env(safe-area-inset-left))}
.bmm-overlay.is-open{display:flex}
.bmm-overlay[hidden]{display:none}
.bmm-overlay .bmm-overlay__close{
  position:absolute;top:14px;right:18px;z-index:3;
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  color:var(--bmm-bar-1-fg);line-height:0;cursor:pointer;padding:0;
  transition:background var(--bmm-dur) var(--bmm-ease),color var(--bmm-dur) var(--bmm-ease)}
.bmm-overlay .bmm-overlay__close svg{width:20px;height:20px;display:block}
.bmm-overlay .bmm-overlay__close:hover,.bmm-overlay .bmm-overlay__close:focus-visible{
  background:var(--bmm-bar-1-fg);color:var(--bmm-bar-1-bg)}
.bmm-overlay .bmm-overlay__logo{width:170px !important;max-width:48vw !important;height:auto !important;margin:6px 0 0;flex:0 0 auto}
/* lo scorrimento e' del livello, non di questo involucro: due contenitori
   scorrevoli annidati si rubano il gesto a vicenda */
.bmm-overlay__scroll{width:100%}

.bmm-ovnav{
  list-style:none;margin:26px 0 0;padding:0;
  display:flex;flex-direction:column;align-items:center;gap:4px}
.bmm-ovnav .bmm-item{display:block;text-align:center}
.bmm-ovnav .bmm-link{
  font-family:var(--bmm-font-display);font-size:var(--bmm-ov-size);font-weight:600;
  letter-spacing:.01em;text-transform:none;color:var(--bmm-bar-1-fg);padding:8px 4px}
.bmm-ovnav .bmm-link::after{display:none}
.bmm-ovnav .bmm-link:hover{color:var(--bmm-soft)}
.bmm-ovnav .bmm-toggle{color:var(--bmm-bar-1-fg)}

/* ---------- drill-down: livelli che scorrono, non accordion ---------- */
/* min-height:0 e' obbligatorio: senza, un figlio flex non scende sotto la sua
   altezza di contenuto e il livello viene ritagliato invece di scorrere.
   I livelli restano SEMPRE in position:absolute, cosi' sono limitati dal
   contenitore e possono scorrere al loro interno. */
.bmm-drill{position:relative;width:100%;flex:1 1 auto;min-height:0;overflow:hidden}
.bmm-drill__pane{
  position:absolute;inset:0;display:none;flex-direction:column;
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  transform:translateX(16px);opacity:0;
  transition:transform var(--bmm-dur) var(--bmm-ease),opacity var(--bmm-dur) var(--bmm-ease)}
.bmm-drill__pane.is-active{display:flex;transform:none;opacity:1}
.bmm-drill__pane[hidden]{display:none}

.bmm-overlay .bmm-drill__open{
  cursor:pointer;padding:8px 10px;
  color:var(--bmm-bar-1-fg);line-height:0}
.bmm-drill__open svg{width:15px;height:15px;display:block}
.bmm-overlay .bmm-drill__open:hover{color:var(--bmm-soft)}
.bmm-overlay .bmm-drill__open:focus-visible{outline:2px solid var(--bmm-bar-1-fg);outline-offset:2px;border-radius:4px}

.bmm-overlay .bmm-drill__back{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  cursor:pointer;padding:10px 4px;
  color:var(--bmm-soft);font-family:inherit;font-size:.8rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase}
.bmm-drill__back svg{width:14px;height:14px;transform:rotate(180deg)}
.bmm-drill__back:hover{color:var(--bmm-bar-1-fg)}

.bmm-drill__heading{
  margin:4px 0 2px;font-family:var(--bmm-font-display);
  font-size:1.24rem;font-weight:700;color:var(--bmm-bar-1-fg);text-align:center}
.bmm-drill__all{
  display:block;text-align:center;margin:0 0 14px;
  font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--bmm-soft);text-decoration:none;border-bottom:1px solid currentColor;
  align-self:center;padding-bottom:2px}
.bmm-drill__group{
  margin:16px 0 6px;font-size:.66rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--bmm-soft);text-align:center}
.bmm-drill__links{list-style:none;margin:0;padding:0}
.bmm-drill__links a{
  display:block;padding:11px 4px;text-align:center;text-decoration:none;
  color:var(--bmm-bar-1-fg);font-size:1.02rem}
.bmm-drill__links a:hover{color:var(--bmm-soft)}
/* --- 1.8.1: icona e descrizione anche nel livello mobile ---
   Senza icona la voce resta centrata com'era. Con l'icona la riga diventa
   pastiglia + testo: se ogni riga si centrasse per conto suo le icone
   formerebbero un bordo sinistro frastagliato, quindi quando la lista ne ha
   almeno una si stringe la lista e si allinea a sinistra dentro di essa. */
.bmm-drill__txt{display:block;min-width:0}
.bmm-drill__lab{display:block}
.bmm-drill__desc{display:block;margin-top:2px;font-size:.8rem;line-height:1.35;
  color:var(--bmm-soft)}
.bmm-drill__links .bmm-badge{margin-left:8px}
.bmm-drill__item--ico > a{display:flex;align-items:center;gap:12px;text-align:left}
.bmm-drill__item--ico .bmm-links__ico{flex:0 0 auto;width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;opacity:.9}
.bmm-drill__item--ico .bmm-links__ico svg{width:22px;height:22px;display:block}
.bmm-drill__links:has(.bmm-drill__item--ico){max-width:320px;margin-inline:auto}
.bmm-drill__links:has(.bmm-drill__item--ico) a{text-align:left}
/* le voci senza icona nella stessa lista partono dove parte il testo delle altre */
.bmm-drill__links:has(.bmm-drill__item--ico) li:not(.bmm-drill__item--ico) > a{
  padding-left:42px}
/* I blocchi "inline" nascono per il pannello desktop, che ha fondo chiaro.
   Nel drill-down il fondo e' quello della fascia scura: i colori del pannello
   qui non hanno contrasto e vanno rimappati. */
.bmm-drill__extra{margin-top:18px;padding-top:16px;border-top:1px solid var(--bmm-line);text-align:center}
.bmm-drill__extra,
.bmm-drill__extra .bmm-contact{align-items:center;color:var(--bmm-bar-1-fg)}
.bmm-drill__extra .bmm-blk__title{color:var(--bmm-soft)}
.bmm-drill__extra .bmm-contact__line{color:var(--bmm-bar-1-fg)}
.bmm-drill__extra .bmm-contact__note{color:var(--bmm-soft)}
.bmm-drill__extra .bmm-btn--outline{color:var(--bmm-bar-1-fg)}
.bmm-drill__extra .bmm-btn--outline:hover{background:var(--bmm-bar-1-fg);color:var(--bmm-bar-1-bg)}

.bmm-ovnav .bmm-item.bmm-has-panel{
  display:flex;align-items:center;justify-content:center;gap:2px}

.bmm-overlay__foot{
  margin-top:auto;padding-top:22px;width:100%;
  border-top:1px solid var(--bmm-line);text-align:center}
.bmm-overlay__info{display:flex;flex-direction:column;gap:5px;font-size:.88rem}
.bmm-overlay__info a{color:var(--bmm-bar-1-fg);text-decoration:none}
.bmm-overlay__info a:hover{color:var(--bmm-soft)}
.bmm-overlay__info span{color:var(--bmm-soft);font-size:.82rem}
.bmm-overlay__social{display:flex;justify-content:center;gap:12px;margin-top:16px}
.bmm-overlay__social a{
  width:var(--bmm-touch);height:var(--bmm-touch);border-radius:50%;
  border:1px solid var(--bmm-line);
  display:inline-flex;align-items:center;justify-content:center;color:var(--bmm-bar-1-fg)}
.bmm-overlay__social a:hover{background:var(--bmm-bar-1-fg);color:var(--bmm-bar-1-bg)}
.bmm-overlay__social svg{width:18px;height:18px}

/* ---------- soglia mobile ----------
   Le regole legate al breakpoint NON stanno qui: una @media non puo' leggere
   una var(--*), quindi il token sarebbe finto. Le genera BMM_Tokens::responsive_css()
   e vengono stampate inline subito dopo questo foglio. */

/* telefoni bassi in orizzontale: altrimenti il menu non ci sta */
@media(max-height:700px){
  .bmm-overlay__logo{width:128px}
  .bmm-ovnav .bmm-link{font-size:1.14rem}
}

/* ---------- aree di tocco ----------
   Su puntatore grossolano (dito) ogni comando deve arrivare a 44px: sotto
   quella misura si sbaglia bersaglio. Si usa un'area invisibile con ::after,
   cosi' il bersaglio cresce senza che cresca l'icona. */
@media(pointer:coarse){
  .bmm-drill__open,.bmm-toggle,.bmm-burger,.bmm-act,.bmm-overlay__close{position:relative}
  .bmm-drill__open::after,.bmm-toggle::after,.bmm-burger::after,
  .bmm-act::after,.bmm-overlay__close::after{
    content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:max(100%,44px);height:max(100%,44px)}
  .bmm-drill__links a{padding-block:13px}
  .bmm-ovnav .bmm-link{padding-block:11px}
  /* «Indietro» stava a ~39px e «Vai a...» a ~19px: entrambi sotto il minimo. */
  .bmm-overlay .bmm-drill__back{min-height:44px}
  .bmm-drill__all{display:flex;align-items:center;justify-content:center;min-height:44px}
}

/* ---------- movimento ridotto ---------- */
@media(prefers-reduced-motion:reduce){
  .bmm,.bmm *,.bmm-overlay,.bmm-overlay *{
    transition-duration:.01ms !important;animation-duration:.01ms !important}
}


/* --- icona facoltativa accanto alla voce di menu (1.8.0) ------------------
   La voce senza icona resta invariata: la griglia si attiva solo quando
   l'icona c'e', cosi' i pannelli gia' esistenti non si spostano di un pixel. */
.bmm-links__item--ico > a{display:grid;grid-template-columns:30px minmax(0,1fr);
  column-gap:13px;align-items:start}
/* --bmm-panel-brand: il colore del marchio DENTRO il pannello. Di default
   vale l'accento, quindi chi non lo imposta non vede nulla di diverso.
   Serve perche' l'accento e' anche il rosso dei badge e dei pulsanti, e
   qui volevamo il bordeaux della fascia senza toccare quelli. */
.bmm-links__ico{grid-row:1 / span 2;display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;margin-top:1px;opacity:.92;
  color:var(--bmm-panel-brand,var(--bmm-accent,currentColor));
  transition:transform var(--bmm-dur) var(--bmm-ease),opacity var(--bmm-dur) var(--bmm-ease)}
.bmm-links__ico svg{width:25px;height:25px;display:block}
.bmm-links__item--ico > a:hover .bmm-links__ico,
.bmm-links__item--ico > a:focus-visible .bmm-links__ico{opacity:1;transform:scale(1.12)}
@media(prefers-reduced-motion:reduce){
  .bmm-links__item--ico > a:hover .bmm-links__ico{transform:none}}
@media(max-width:900px){.bmm-links__ico{width:26px;height:26px}.bmm-links__ico svg{width:22px;height:22px}}