/* =========================================================
   MIOBUK — Header / Drawer Menu / Footer
   Tokens from theme.json (taupe palette) + Punti Fermi spec
   ========================================================= */
:root{
  --mb-white:#FFFFFF;
  --mb-cream-2:#F6F5F1;
  --mb-ink:#1A1814;
  --mb-ink-soft:#6A6457;
  --mb-line:rgba(26,24,20,.12);
  --mb-taupe:#9A8C74;
  --mb-taupe-line:#C5B9A4;
  --mb-taupe-deep:#7C6F59;
  --mb-hover:#6A5F49;
  --mb-gold-accent:#B08A3E;
  --mb-footer-bg:#EDEDEB;
  --mb-px:clamp(24px,8vw,160px);
  /* 27/08 — Da 72px a 100px: la fascia dell'header e' piu' alta e logo,
     menu e icone scendono verso il basso. Il valore resta UNICO (niente
     varianti per larghezza) perche' viene riscritto a runtime con
     l'altezza reale misurata dal browser: due valori diversi entrerebbero
     in conflitto con quella misurazione. Tutto cio' che si appoggia a
     questa variabile — hero, pannello collezioni, carrello, checkout — si
     adatta da solo.
     27/08 (sera) — Da 100px a 132px. Il logo e' alto 62px e il contenuto
     e' appoggiato in basso: a 100px il bordo inferiore del logo cadeva
     esattamente sul bordo della barra, cioe' esattamente dove comincia
     la sezione successiva. Su una sezione scura sembrava tagliato.
     I 32px in piu' sono il padding inferiore aggiunto sotto: logo, MENU
     e icone restano nella POSIZIONE DI PRIMA (bordo inferiore a 100px),
     e' la fascia a scendere di 32px. Tutto il resto della pagina segue
     da solo, perche' si appoggia a questa variabile. */
  --mb-header-h:132px;
  --mb-ease:cubic-bezier(.22,.61,.36,1);
  --mb-label:.155em;

  /* ---------- TIPOGRAFIA CANONICA (unica fonte di verità) ----------
     Ogni regola di dimensione/peso testo nel tema DEVE referenziare
     questi token, mai ridichiarare un valore px. Se serve una misura
     nuova, si aggiunge qui — non si scrive un font-size a mano altrove.
     Scala fissa (Boreal): H1 32 / H2 24 / H3 19 / H4-H6 13 / eyebrow 11
     / body 14 / small 12 / titolo prodotto 20 (unica eccezione, uguale
     ovunque appaia: pagina prodotto, griglie, carrello, correlati,
     cross-sell) / label form 10. */
  --mb-fs-h1: 32px;
  --mb-fs-h2: 24px;
  --mb-fs-h3: 19px;
  --mb-fs-h4: 13px;
  --mb-fs-eyebrow: 11px;
  --mb-fs-body: 14px;
  --mb-fs-small: 12px;
  --mb-fs-product-title: 28px;
  --mb-fs-label: 10px;
  --mb-fs-button: 10px; /* "Discover the Collection" — l'UNICO valore per ogni CTA del sito */
  --mb-fs-footer: 13px; /* testo del footer, sitewide — collegato al pannello Customizer */
  --mb-fw-light: 200;
  --mb-fw-regular: 400;
  --mb-fw-medium: 500;
}

/* ---------- HEADER ---------- */
.mb-header{
  position:fixed;top:0;left:0;right:0;z-index:50;height:var(--mb-header-h);
  /* OBBLIGATORIO. Lo script misura l'altezza reale della barra e la
     riscrive dentro --mb-header-h, che questa stessa regola rilegge.
     Con box-sizing "content-box" il padding inferiore si sommerebbe
     all'altezza a ogni misurazione (132+32=164, poi 164+32=196...) e
     l'header crescerebbe a ogni ridimensionamento. Con border-box il
     padding sta DENTRO i 132px e la misura resta stabile. */
  box-sizing:border-box;
  display:grid;grid-template-columns:1fr auto 1fr;
  /* Contenuto appoggiato in basso invece che centrato: logo e icone
     scendono, e sopra resta aria.
     27/08 (sera) — ATTENZIONE: il padding va scritto TUTTO nella
     scorciatoia qui sotto. Prima c'era un "padding-bottom:16px" su
     questa riga, azzerato dalla riga successiva che riscriveva
     l'intero padding: quei 16px non sono mai esistiti e il logo
     finiva incollato al bordo inferiore della barra. */
  align-items:end;
  /* 27/08 — Richiesta cliente: menu e icone molto piu' staccati dai bordi
     della pagina. +70px per lato, simmetrici, ma solo dove c'e' spazio:
     su telefono 70px per lato mangerebbero meta' schermo. */
  padding:0 clamp(18px,3.5vw,40px) 32px;background:var(--mb-white);
  transition:background .4s var(--mb-ease), top .2s var(--mb-ease);
}
@media (min-width:900px){
  .mb-header{
    padding-left:calc(clamp(18px,3.5vw,40px) + 70px);
    padding-right:calc(clamp(18px,3.5vw,40px) + 70px);
  }
}
@media (min-width:600px) and (max-width:899px){
  .mb-header{
    padding-left:calc(clamp(18px,3.5vw,40px) + 28px);
    padding-right:calc(clamp(18px,3.5vw,40px) + 28px);
  }
}
/* Da loggati, la barra nera di amministrazione WordPress occupa i primi
   32px (46px su schermi stretti) in cima alla pagina — l'header fisso
   del sito, essendo top:0 rispetto al viewport e non al flusso normale
   della pagina, non ne teneva conto e ci finiva parzialmente sotto.
   Visibile solo a chi è loggato in wp-admin, mai ai visitatori reali. */
body.admin-bar .mb-header{ top:32px; }
@media screen and (max-width:782px){
  body.admin-bar .mb-header{ top:46px; }
}
.mb-header .mb-menu-btn,.mb-header .mb-util,.mb-header .mb-util a,.mb-header .mb-util .mb-icon{transition:color .4s var(--mb-ease)}
.mb-header .mb-menu-btn .mb-bars span{transition:background .4s var(--mb-ease)}
.mb-header .mb-logo{transition:filter .4s var(--mb-ease)}
.mb-header .mb-util .mb-cart-count{transition:background .4s var(--mb-ease),color .4s var(--mb-ease)}
.mb-header.on-dark{background:transparent}
.mb-header.on-dark .mb-menu-btn{color:#fff !important}
.mb-header.on-dark .mb-menu-btn .mb-bars span{background:#fff}
.mb-header.on-dark .mb-util,.mb-header.on-dark .mb-util a,.mb-header.on-dark .mb-util .mb-icon,.mb-header.on-dark .mb-util .mb-lang{color:#fff !important}
.mb-header.on-dark .mb-util .mb-lang svg{color:#fff !important;stroke:#fff !important}
.mb-header.on-dark .mb-logo{filter:brightness(0) invert(1)}
.mb-header.on-dark .mb-util .mb-cart-count{background:#fff;color:var(--mb-ink)}

/* 27/08 — SICUREZZA DI LEGGIBILITA'.
   L'header diventa "bianco su scuro" quando sotto di se' passa una
   sezione marcata come scura. Ma appena la pagina viene scrollata la
   barra prende sfondo bianco pieno: se in quel momento e' ancora in
   modalita' "su scuro", si ottiene bianco su bianco e logo, menu e icone
   spariscono — e' il difetto segnalato dal cliente scrollando la home.
   Quando la barra ha uno sfondo proprio, il contenuto torna sempre
   scuro, qualunque cosa ci sia dietro. */
.mb-header.scrolled.on-dark{background:var(--mb-white) !important}
.mb-header.scrolled.on-dark .mb-menu-btn{color:var(--mb-taupe) !important}
.mb-header.scrolled.on-dark .mb-menu-btn .mb-bars span{background:var(--mb-taupe) !important}
.mb-header.scrolled.on-dark .mb-util,
.mb-header.scrolled.on-dark .mb-util a,
.mb-header.scrolled.on-dark .mb-util .mb-icon,
.mb-header.scrolled.on-dark .mb-util .mb-lang{color:var(--mb-ink) !important}
.mb-header.scrolled.on-dark .mb-util .mb-lang svg{color:var(--mb-ink) !important;stroke:var(--mb-ink) !important}
.mb-header.scrolled.on-dark .mb-logo{filter:none !important}
.mb-header.scrolled.on-dark .mb-logo-mask{background-color:var(--mb-taupe) !important}
.mb-header.scrolled.on-dark .mb-util .mb-cart-count{background:var(--mb-taupe) !important;color:#fff !important}
.mb-header.scrolled.on-dark .mb-lang-panel a{color:var(--mb-ink) !important}

.mb-menu-btn{
  display:inline-flex;align-items:center;gap:10px;background:none;border:0;cursor:pointer;
  color:var(--mb-taupe) !important;justify-self:start;padding:6px 0;
  font-family:"boreal",sans-serif !important;text-transform:uppercase !important;letter-spacing:.06em !important;font-size:var(--mb-fs-small, 13px) !important;
  opacity:.8;transition:opacity .3s;
}
.mb-menu-btn:hover{opacity:1}
.mb-menu-btn .mb-mlabel{
  font-family:"boreal",sans-serif !important;text-transform:uppercase !important;letter-spacing:.06em !important;font-size:var(--mb-fs-small, 13px) !important;color:inherit !important;
}
.mb-menu-btn .mb-bars{display:inline-flex;flex-direction:column;gap:4px;width:18px}
.mb-menu-btn .mb-bars span{display:block;height:1px;width:18px;background:var(--mb-taupe)}
@media(max-width:600px){.mb-menu-btn .mb-mlabel{display:none}}

.mb-brand{justify-self:center;display:inline-flex;align-items:center;line-height:0}
/* Richiesta cliente 26/08 (PDF, punto 2 — poi corretto: più margine di
   quanto messo la prima volta): il logo era troppo a ridosso del margine
   superiore, dimensioni invariate. */
.mb-logo{display:block;height:32px;width:32px;object-fit:contain;margin-top:16px}
@media(max-width:600px){.mb-logo{height:28px;width:28px}}

/* Header brand logo: CSS-mask based so color can be driven by scroll/section state.
   62px su tutto il sito (era 32px) — il logo del drawer (.mb-logo, riga
   sopra) resta piccolo, non è toccato da questa modifica.
   Richiesta cliente 26/08: questo è IL VERO logo dell'header, visibile
   su ogni pagina — la correzione di distanza dal margine era stata
   applicata per errore solo a .mb-logo (usato solo nel drawer mobile),
   mai a questo. Stesso margine, qui dove serve davvero. */
.mb-logo-mask{
  display:block;height:62px;width:62px;
  background-color:var(--mb-taupe);
  -webkit-mask:url(https://miobuk.it/wp-content/uploads/2026/07/MIOBUK-logo-gold-300x300.png) center/contain no-repeat;
  mask:url(https://miobuk.it/wp-content/uploads/2026/07/MIOBUK-logo-gold-300x300.png) center/contain no-repeat;
  transition:background-color .4s var(--mb-ease);
  margin-top:16px;
}
@media(max-width:600px){.mb-logo-mask{height:44px;width:44px}}
/* Scrolled past the top: resta oro (già il colore base) */
.mb-header.scrolled .mb-logo-mask{background-color:var(--mb-taupe)}
/* Over a dark section: logo turns white (wins over the scrolled/gold state) */
.mb-header.on-dark .mb-logo-mask{background-color:#fff}

.mb-header .mb-util{
  justify-self:end;display:inline-flex;align-items:center;gap:16px;color:var(--mb-ink);
  font-family:"boreal",sans-serif;text-transform:uppercase;letter-spacing:var(--mb-label);font-size:var(--mb-fs-small, 13px);
}
@media(max-width:600px){.mb-header .mb-util{gap:10px}}
.mb-header .mb-util .mb-lang{cursor:pointer;opacity:.8;position:relative;text-decoration:none;color:inherit;display:inline-flex;align-items:center;gap:4px}
.mb-header .mb-util .mb-lang:hover{opacity:1}
.mb-header .mb-util .mb-lang-chev{opacity:.7;flex-shrink:0}

/* Icona di riapertura preferenze cookie (CookieAdmin) — il plugin la
   posiziona di default in una zona che si sovrappone al selettore lingua
   nell'header. Spostata in basso a sinistra, rimpicciolita. */
.cookieadmin_re_consent {
	position: fixed !important;
	top: auto !important; right: auto !important;
	bottom: 16px !important; left: 16px !important;
	width: 36px !important; height: 36px !important;
	z-index: 40 !important;
}
.cookieadmin_reconsent_img {
	width: 100% !important; height: 100% !important;
}

/* Dropdown account — stile Moleskine: al click sull'icona, un pannello
   con "Become a Member" in evidenza + Sign In. */
.mb-account-wrap{ position: relative; display: inline-flex; }
.mb-account-panel{
	position: absolute; top: calc(100% + 14px); right: 0;
	min-width: 220px; background: #fff; border: 1px solid var(--mb-taupe-line);
	box-shadow: 0 12px 32px rgba(20,18,14,.12);
	padding: 10px; display: flex; flex-direction: column; gap: 2px;
	opacity: 0; visibility: hidden; transform: translateY(-6px);
	transition: opacity .25s var(--mb-ease), transform .25s var(--mb-ease), visibility .25s;
	z-index: 70;
}
.mb-account-panel.open{ opacity: 1; visibility: visible; transform: translateY(0); }
.mb-account-panel a{
	display: block; padding: 10px 12px; text-decoration: none;
	font-family: "boreal", sans-serif !important; font-size: var(--mb-fs-small, 13px) !important;
	text-transform: uppercase !important; letter-spacing: .06em; color: var(--mb-ink) !important;
	transition: background .2s;
}
.mb-account-panel a:hover{ background: var(--mb-cream-2); }
.mb-account-panel .mb-account-highlight{
	background: var(--mb-taupe) !important; color: #fff !important; text-align: center;
	border-radius: 999px; margin-bottom: 6px;
}
.mb-account-panel .mb-account-highlight:hover{ background: var(--mb-taupe-deep) !important; }

/* Dropdown lingua — collegato a TranslatePress. Verticale, sfondo
   trasparente, solo lettere: oro su sfondo chiaro, bianco su sezioni
   scure (stesso comportamento adattivo del logo via .on-dark). */
.mb-lang-wrap{ position: relative; display: inline-flex; }
.mb-lang-wrap .mb-lang{ background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; }
.mb-lang-panel{
	position: absolute; top: calc(100% + 14px); left: 50%;
	min-width: 0; background: transparent; border: 0; box-shadow: none;
	padding: 0; display: flex; flex-direction: column; align-items: center; gap: 11px;
	opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(-6px);
	transition: opacity .25s var(--mb-ease), transform .25s var(--mb-ease), visibility .25s;
	z-index: 70;
}
.mb-lang-panel.open{ opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.mb-lang-panel a{
	display: block; text-decoration: none; line-height: 1;
	font-family: "boreal", sans-serif !important; font-size: 12px !important;
	text-transform: uppercase !important; letter-spacing: .08em;
	color: var(--mb-taupe) !important; opacity: .85;
	transition: color .2s, opacity .2s;
}
.mb-lang-panel a:hover{ opacity: 1; color: var(--mb-taupe-deep) !important; }
/* Sezione scura (stesso trigger del logo/menu che diventano bianchi) */
.mb-header.on-dark .mb-lang-panel a{ color: #fff !important; }
.mb-header.on-dark .mb-lang-panel a:hover{ opacity: .7; color: #fff !important; }
/* Il pannello account ha sempre sfondo bianco — il testo non deve MAI
   diventare bianco (invisibile) anche quando l'header sopra è "on-dark". */
.mb-header.on-dark .mb-account-panel a{ color: var(--mb-ink) !important; }
.mb-header.on-dark .mb-account-panel .mb-account-highlight{ color: #fff !important; }
.mb-header .mb-util .mb-icon{background:none;border:0;padding:0;cursor:pointer;color:var(--mb-ink);
  display:inline-flex;align-items:center;opacity:.8;transition:opacity .3s;text-decoration:none}
.mb-header .mb-util .mb-icon:hover{opacity:1}
.mb-header .mb-util .mb-bag{position:relative}
.mb-header .mb-util .mb-cart-count{position:absolute;top:-6px;right:-8px;background:var(--mb-gold-accent) !important;
  color:var(--mb-white) !important;font-size:8px;line-height:1;min-width:13px;height:13px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;padding:0 3px;
  font-family:"boreal",sans-serif}
@media(max-width:600px){.mb-header .mb-util .mb-account-label{display:none}}

/* ---------- DRAWER (left ~30vw, white, scrim) ---------- */
.mb-nav-scrim{position:fixed;inset:0;z-index:55;background:rgba(20,18,14,.34);
  opacity:0;visibility:hidden;transition:opacity .45s var(--mb-ease),visibility .45s var(--mb-ease)}
.mb-nav-scrim.open{opacity:1;visibility:visible}
.mb-nav-drawer{position:fixed;top:0;left:0;height:100%;width:30vw;min-width:320px;max-width:480px;z-index:60;
  background:#fff;transform:translateX(-100%);transition:transform .5s var(--mb-ease);
  overflow-y:auto;display:flex;flex-direction:column;box-shadow:0 0 70px rgba(20,18,14,.16)}
.mb-nav-drawer.open{transform:translateX(0)}
@media(max-width:680px){.mb-nav-drawer{width:82vw;min-width:0}}
.mb-nav-top{height:var(--mb-header-h);display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(20px,2.2vw,32px);border-bottom:1px solid var(--mb-line);flex:0 0 auto}
.mb-nav-close{background:none;border:0;cursor:pointer;color:var(--mb-taupe);
  font-family:"boreal",sans-serif;text-transform:uppercase;letter-spacing:var(--mb-label);font-size:var(--mb-fs-small, 13px);
  display:inline-flex;align-items:center;gap:9px}
.mb-nav-close .mb-x{width:13px;height:13px;position:relative;display:inline-block}
.mb-nav-close .mb-x::before,.mb-nav-close .mb-x::after{content:"";position:absolute;top:50%;left:0;width:13px;height:1.3px;background:var(--mb-taupe)}
.mb-nav-close .mb-x::before{transform:rotate(45deg)}
.mb-nav-close .mb-x::after{transform:rotate(-45deg)}
.mb-nav-list{padding:clamp(16px,2vw,28px) clamp(20px,2.2vw,32px)}
.mb-nav-list a{
  display:flex;align-items:center;justify-content:space-between;
  font-family:"boreal",sans-serif !important;font-size:var(--mb-fs-body, 14px) !important;font-weight:400 !important;text-transform:uppercase !important;letter-spacing:.06em !important;color:var(--mb-taupe) !important;
  padding:16px 0;border-bottom:1px solid var(--mb-line);text-decoration:none;
  opacity:0;transform:translateX(-12px);
  transition:opacity .5s var(--mb-ease),transform .5s var(--mb-ease),color .4s var(--mb-ease),
             letter-spacing .4s var(--mb-ease),border-bottom-width .4s var(--mb-ease),border-bottom-color .4s var(--mb-ease);
}
.mb-nav-drawer.open .mb-nav-list a{opacity:1;transform:none}
.mb-nav-drawer.open .mb-nav-list a:nth-child(1){transition-delay:.16s}
.mb-nav-drawer.open .mb-nav-list a:nth-child(2){transition-delay:.22s}
.mb-nav-drawer.open .mb-nav-list a:nth-child(3){transition-delay:.28s}
.mb-nav-drawer.open .mb-nav-list a:nth-child(4){transition-delay:.34s}
.mb-nav-drawer.open .mb-nav-list a:nth-child(5){transition-delay:.40s}
/* 27/08 — Stesso comportamento del menu Shop e dei pulsanti: la riga
   sotto si ispessisce, il colore si approfondisce, le lettere si
   distanziano. Il padding inferiore cala di 1px mentre il bordo ne
   guadagna 1, cosi' le voci sotto non si spostano. */
.mb-nav-list a:hover{
  color:var(--mb-taupe-deep) !important;
  border-bottom-width:1.5px;
  border-bottom-color:var(--mb-taupe-deep);
  padding-bottom:15.5px;
}
.mb-nav-list a .mb-chev{font-family:"boreal",sans-serif;font-size:13px;color:var(--mb-taupe);opacity:.7;
  transition:transform .35s var(--mb-ease),color .35s var(--mb-ease)}
.mb-nav-list a:hover .mb-chev{transform:translateX(5px);color:var(--mb-ink)}
.mb-nav-extra{margin-top:auto;padding:24px clamp(20px,2.2vw,32px) 36px;display:flex;flex-direction:column;gap:12px}
.mb-nav-extra span{font-family:"boreal",sans-serif !important;text-transform:uppercase !important;letter-spacing:.06em !important;font-size:var(--mb-fs-small, 12px) !important;color:var(--mb-ink-soft) !important}

/* ---------- FOOTER ----------
   Font-family, peso, dimensione (11px) e crenatura sono IDENTICI su ogni
   elemento, nessuna eccezione. Le uniche differenze rimaste tra "titolo
   di colonna" e "link" sono intenzionali: colore oro/grigio e
   maiuscolo/minuscolo — non font, non dimensione. */
.mb-footer{background:var(--mb-footer-bg);color:var(--mb-ink);
  padding:clamp(40px,5vw,64px) var(--mb-px) 72px;border-top:1px solid var(--mb-line)}
.mb-footer *{
  font-family:"boreal",sans-serif !important;font-weight:200 !important;font-size:var(--mb-fs-footer, 11px) !important;letter-spacing:0 !important}
.mb-footer .mb-ftop{display:flex;justify-content:flex-start;border-bottom:1px solid var(--mb-line);padding-bottom:32px}
.mb-footer .mb-fcols{display:flex;justify-content:flex-start;gap:clamp(40px,7vw,96px);flex-wrap:wrap;width:100%}
.mb-footer .mb-fcol h4{text-transform:uppercase !important;color:var(--mb-taupe) !important;margin-bottom:6px;font-weight:400 !important}
.mb-footer .mb-fcol-toggle{
  display:block;width:100%;text-align:left;background:none;border:0;cursor:default;padding:0;
  text-transform:uppercase !important;color:var(--mb-taupe) !important;margin-bottom:6px;font-weight:400 !important;
  font-family:"boreal",sans-serif !important;font-size:var(--mb-fs-small, 13px) !important;letter-spacing:0 !important;
}
.mb-fcol-chev{display:none}
.mb-fcol-body{max-height:none !important;overflow:visible !important}
@media(max-width:600px){
  .mb-footer .mb-fcol-toggle{
    cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;
    padding-bottom:10px;margin-bottom:0;
  }
  .mb-fcol-chev{display:inline-block;transition:transform .3s var(--mb-ease);font-size:10px;color:var(--mb-taupe);flex-shrink:0}
  .mb-fcol-toggle[aria-expanded="true"] .mb-fcol-chev{transform:rotate(180deg)}
  .mb-fcol-body{
    max-height:0 !important;overflow:hidden !important;transition:max-height .35s var(--mb-ease);text-align:center;
  }
  .mb-fcol-body.mb-open{max-height:400px !important;padding-top:2px;padding-bottom:6px}
  .mb-footer .mb-fcol{padding-bottom:10px;text-align:center}
  .mb-footer .mb-fcols{flex-direction:column;gap:2px;align-items:center;text-align:center}
  .mb-footer .mb-fcol-newsletter{text-align:center}
  .mb-footer .mb-social{justify-content:center}
  .mb-footer .mb-newsletter-form{margin:0 auto}
  .mb-footer .mb-ftop{justify-content:center}
}
.mb-footer .mb-fcol a,.mb-footer .mb-fcol span{display:block;margin-bottom:10px;text-decoration:none;transition:color .3s;
  text-transform:none !important;color:var(--mb-ink-soft) !important}
.mb-footer .mb-fcol a:hover{color:var(--mb-ink) !important}
/* "Stay Connected" messo in evidenza con un riquadro proprio — ora è la
   prima colonna (a sinistra), non l'ultima. */
.mb-footer .mb-fcol-newsletter{
  background:#fff;border:1px solid var(--mb-taupe-line);padding:24px;
  max-width:280px;box-sizing:border-box;
}
.mb-footer .mb-fcol-newsletter h4{margin-bottom:12px}
.mb-footer .mb-newsletter-copy{max-width:32ch;line-height:1.6;margin-bottom:16px;color:var(--mb-ink-soft) !important}
.mb-footer .mb-newsletter-form{display:flex;align-items:center;gap:0;max-width:280px;
  border-bottom:1px solid var(--mb-taupe-line);padding-bottom:8px}
.mb-footer .mb-newsletter-form input{flex:1;border:0;background:none;outline:none;padding:4px 0;color:var(--mb-ink) !important}
.mb-footer .mb-newsletter-form input::placeholder{color:var(--mb-ink-soft) !important}
.mb-footer .mb-newsletter-submit{background:none;border:0;cursor:pointer;color:var(--mb-taupe-deep) !important;
  line-height:1;padding:0 0 0 8px;transition:transform .3s var(--mb-ease),color .3s var(--mb-ease)}
.mb-footer .mb-newsletter-submit:hover{transform:translateX(3px);color:var(--mb-hover) !important}
.mb-footer .mb-news-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.mb-footer .mb-newsletter-consent{max-width:32ch;margin-top:10px;font-size:11px;line-height:1.5;color:var(--mb-ink-soft) !important}
.mb-footer .mb-newsletter-consent a{text-decoration:underline}
.mb-footer .mb-newsletter-notice{max-width:32ch;margin-top:10px;font-size:12px;line-height:1.5;color:var(--mb-taupe-deep) !important}
.mb-footer .mb-social{display:flex;gap:16px;flex-wrap:wrap;padding-top:16px}
.mb-footer .mb-social a{text-decoration:none;color:var(--mb-ink-soft) !important;display:inline-flex}
.mb-footer .mb-social a:hover{color:var(--mb-taupe-deep) !important}

.mb-footer .mb-fbottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;padding-top:20px}
/* margin-left:auto tiene il blocco pagamenti ancorato a destra anche
   quando va a capo su schermi stretti (altrimenti finirebbe a sinistra).
   Riserva di spazio extra a destra + il padding-bottom aumentato sopra:
   evitano che i loghi finiscano sotto la barra lingua flottante di
   TranslatePress (fixed, bottom-right). Se si disattiva la barra
   flottante, questo margine extra può essere rimosso. */
.mb-footer .mb-fpayments{display:flex;align-items:center;gap:10px;flex-shrink:0;margin-left:auto;padding-right:clamp(0px,4vw,64px)}
.mb-footer .mb-fpayments img{height:20px;width:auto;display:block;opacity:.85}
.mb-footer .mb-fbottom,
.mb-footer .mb-fbottom span,
.mb-footer .mb-fbottom a{text-transform:none !important;color:var(--mb-ink-soft) !important;text-decoration:none}
.mb-footer .mb-fbottom a:hover{color:var(--mb-ink) !important}
.mb-footer .mb-fbottom .mb-reg{vertical-align:super}
.mb-footer .mb-fbottom-left{display:flex;align-items:center;gap:14px}
.mb-footer .mb-flegal-inline{opacity:.75}
/* Piccolo logo MIOBUK in oro, stessa tecnica CSS-mask del logo in header */
.mb-footer .mb-flogo-mask{
  display:block;flex-shrink:0;height:28px;width:28px;
  background-color:var(--mb-taupe);
  -webkit-mask:url(https://miobuk.it/wp-content/uploads/2026/07/MIOBUK-logo-gold-300x300.png) center/contain no-repeat;
  mask:url(https://miobuk.it/wp-content/uploads/2026/07/MIOBUK-logo-gold-300x300.png) center/contain no-repeat;
}

@media (prefers-reduced-motion:reduce){
  .mb-nav-list a{opacity:1;transform:none;transition:none}
  .mb-nav-drawer,.mb-nav-scrim,.mb-header,.mb-logo{transition:none}
}