/* =========================================================
   MIOBUK — GLOBAL DESIGN RULES (sitewide, non solo WooCommerce)
   Regola fissa: un solo font (Boreal) per titoli e corpo testo,
   dimensioni FISSE (no clamp/fluid), un solo stile di pulsante
   ovunque nel sito. Nessuna eccezione locale.
   ========================================================= */

/* Richiesta cliente 26/08 (PDF Aggiustamenti_Layout, punto 1): il tema
   base WordPress (style.css) mette un riquadro outline 2px solid su
   *qualunque* elemento a fuoco — troppo invadente, non coerente col
   design. Lo si toglie ovunque (:focus, click/touch compresi) e lo si
   sostituisce con un feedback elegante e discreto: nessun riquadro per
   il click del mouse; per la navigazione da tastiera (:focus-visible)
   un leggero bagliore color taupe al posto del riquadro netto, per non
   perdere l'accessibilità. */
:where(.wp-site-blocks *:focus) {
	outline: none !important;
}
a, button, input, textarea, select, [tabindex],
.mb-btn-outline, .wp-element-button {
	transition: box-shadow .25s var(--mb-ease, cubic-bezier(.22,.61,.36,1)), filter .25s var(--mb-ease, cubic-bezier(.22,.61,.36,1));
}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
	outline: none !important;
	box-shadow: 0 0 0 3px rgba(154, 140, 116, .35) !important;
}

/* Blocco l'overflow orizzontale a livello di pagina — qualunque sezione
   "a piena larghezza" nel sito (hero video, banner split, Collector Club,
   hero Cart/Checkout) usa width:100vw per uscire dal contenitore, e
   basta un pixel di troppo (es. la larghezza della scrollbar verticale,
   che alcuni browser includono in "vw") per generare overflow
   orizzontale sull'intera pagina — che sposta anche l'header
   (position:fixed) mostrando un margine bianco a sinistra. Invece di
   inseguire il pixel esatto su ogni singola sezione 100vw, si blocca
   l'overflow una volta per tutte qui. */
html, body { overflow-x: hidden; max-width: 100%; }
/* display:flow-root impedisce che il margin-top delle sezioni hero
   (sotto) "collassi" con quello del body — un comportamento CSS di
   default poco intuitivo per cui il margine di un primo figlio può
   risalire e fondersi con quello del genitore, sparendo sopra l'header
   invece di restare visibile come spazio sotto di esso. Applicato sia a
   body sia al wrapper .wp-site-blocks che WordPress inserisce nei temi
   a blocchi, per coprire entrambi i casi senza dover verificare quale
   dei due sia il vero genitore diretto. */
body, .wp-site-blocks { display: flow-root; }

/* ---------- TIPOGRAFIA: scala fissa, solo Boreal ----------
   Valori presi SEMPRE dai token in :root (miobuk-nav.css) — mai un px
   scritto a mano qui o altrove. h1.mb-product-title è l'UNICA eccezione
   di dimensione all'interno della famiglia h1 (titolo prodotto, 20px
   invece di 32px): usa selettore elemento+classe apposta, così vince
   sempre per specificità e non dipende dall'ordine di caricamento dei
   fogli di stile — vedi h1.mb-product-title più sotto in questo stesso
   file, unica sede autorizzata per quell'eccezione. */
h1, .wp-block-post-title, h1.wp-block-query-title {
	font-family: "boreal", sans-serif !important;
	font-weight: var(--mb-fw-light, 200) !important;
	text-transform: uppercase !important;
	letter-spacing: .04em !important;
	font-size: var(--mb-fs-h1, 32px) !important;
	line-height: 1.15;
	color: var(--mb-ink, #1A1814) !important;
}
/* Titolo prodotto — unica eccezione di dimensione alla famiglia h1.
   Specificità elemento+classe (0,1,1) batte sia "h1" (0,0,1) sia
   ".wp-block-post-title" (0,1,0) qualunque sia l'ordine di caricamento
   dei fogli di stile: non serve più affidarsi a chi carica per ultimo. */
h1.mb-product-title {
	/* Dimensione propria, NON legata a --mb-fs-product-title (quel token è
	   condiviso con .mb-pc-name sulle card prodotto in Shop/Home/correlati
	   — cambiarlo cambierebbe anche quelle). Solo il titolo della pagina
	   prodotto singola usa questo valore. */
	font-size: 30px !important;
	text-transform: uppercase !important;
	letter-spacing: .04em !important;
	text-align: left !important;
	margin-bottom: 8px !important;
	color: var(--mb-taupe, #9A8C74) !important;
}
h2 {
	font-family: "boreal", sans-serif !important;
	font-weight: var(--mb-fw-light, 200) !important;
	text-transform: uppercase !important;
	letter-spacing: .04em !important;
	font-size: var(--mb-fs-h2, 24px) !important;
	line-height: 1.2;
	color: var(--mb-ink, #1A1814) !important;
}
h3 {
	font-family: "boreal", sans-serif !important;
	font-weight: var(--mb-fw-light, 200) !important;
	text-transform: uppercase !important;
	letter-spacing: .04em !important;
	font-size: var(--mb-fs-h3, 19px) !important;
	line-height: 1.25;
	color: var(--mb-ink, #1A1814) !important;
}
h4, h5, h6 {
	font-family: "boreal", sans-serif !important;
	font-weight: var(--mb-fw-regular, 400) !important;
	text-transform: uppercase !important;
	letter-spacing: .06em !important;
	font-size: var(--mb-fs-h4, 13px) !important;
	line-height: 1.3;
	color: var(--mb-ink, #1A1814) !important;
}
/* Eyebrow/kicker — the small uppercase gold label used above every
   section heading sitewide (hero, sections, philosophy steps...).
   Single canonical definition: pages set ONLY spacing (margin), never
   font/size/color/transform again. */
.mb-eyebrow {
	display: block; font-family: "boreal", sans-serif !important; font-weight: 200 !important;
	text-transform: uppercase !important; letter-spacing: .32em !important; font-size: var(--mb-fs-eyebrow, 12px) !important;
	color: var(--mb-taupe, #9A8C74) !important;
}
body, p, li, td, dd, dt, blockquote, span, div, label, a {
	font-family: "boreal", sans-serif !important;
	text-transform: none !important;
	font-size: var(--mb-fs-body, 14px) !important;
	line-height: 1.65;
	font-weight: var(--mb-fw-light, 200) !important;
	color: var(--mb-ink-soft, #6A6457) !important;
}
small, .mb-small { font-size: var(--mb-fs-small, 12px) !important; }

/* Titolo hero (Shop, Product, Collezioni, Cart, Checkout...) — sempre oro,
   Boreal maiuscolo, molto grande, sitewide — non solo nelle pagine WooCommerce.
   Include lo span interno esplicitamente: la regola generale "span" qui sopra
   (riga 45) altrimenti vincerebbe perché dichiarata direttamente sull'elemento,
   non ereditata dal genitore H1. */
.mb-shop-hero-title,
.mb-shop-hero-title span,
.mb-shop-hero .wp-block-query-title,
.mb-shop-hero .wp-block-query-title span {
	display: block !important; width: 100%; text-align: center !important;
	font-family: "boreal", sans-serif !important; font-weight: 200 !important; text-transform: uppercase !important;
	letter-spacing: .06em !important; font-size: clamp(28px, 4vw, 38px) !important; line-height: 1.1 !important;
	color: var(--mb-taupe, #9A8C74) !important; margin: 0;
}
@media (max-width: 600px) {
	.mb-shop-hero-title, .mb-shop-hero-title span { font-size: clamp(24px, 7vw, 32px) !important; }
}

/* Larghezza contenuto pagine statiche (About, Contact, Collector Club,
   Support, Privacy, Cookie Policy, Terms, FAQ): sempre 80% della pagina,
   con un tetto massimo per non diventare illeggibile su schermi molto
   larghi. Sovrascrive il contentSize fisso impostato nei singoli blocchi
   Gutenberg (640px/720px) con !important perché quei valori arrivano da
   uno stile inline generato dal blocco "constrained" layout. */
.mb-legal-content,
.mb-text-page-main {
	width: min(80%, 900px) !important;
	max-width: min(80%, 900px) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
/* Stesso bug ricorrente scoperto oggi su Shop e Carrello/Checkout: il
   contenitore generico .entry-content (generato da wp:post-content con
   layout "constrained") limita a 645px di default anche l'hero, che
   dovrebbe invece essere a piena larghezza — il limite di lettura va
   solo sul testo (.mb-legal-content, sopra), non sul contenitore
   esterno. Selettore scoped con :has() solo alle pagine che contengono
   davvero un .mb-legal-hero, per non toccare altri usi dello stesso
   template generico. */
.entry-content.wp-block-post-content:has(.mb-legal-hero) {
	max-width: none !important; width: 100%;
}

/* Hero sitewide per le pagine di testo statiche (Privacy, Cookie Policy,
   Terms & Conditions, Support, FAQ...) — stesso stile del titolo hero
   Shop/Cart/Checkout, ma disponibile ovunque (non solo pagine WooCommerce)
   e con supporto per un'immagine di sfondo che si aggiunge in un secondo
   momento: basta impostare style="background-image:url(...)" sul
   contenitore e aggiungere la classe "has-bg-image" — senza immagine
   resta un semplice sfondo chiaro, non c'è nulla di rotto nel frattempo. */
.mb-legal-hero {
	position: relative;
	min-height: 220px;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	margin-top: calc(var(--mb-header-h, 72px) + 70px);
	padding: 40px 24px 40px;
	background-color: #FAF9F6;
	background-size: cover; background-position: center;
	text-align: center;
	overflow: hidden;
}
.mb-legal-hero .mb-eyebrow,
.mb-legal-hero .mb-shop-hero-title {
	position: relative; z-index: 1;
}
.mb-legal-hero.has-bg-image::before {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(26,24,20,.18), rgba(26,24,20,.4));
}
.mb-legal-hero.has-bg-image .mb-eyebrow,
.mb-legal-hero.has-bg-image .mb-shop-hero-title {
	color: #fff !important;
}
@media (max-width: 600px) {
	.mb-legal-hero { min-height: 160px; padding-top: 28px; padding-bottom: 28px; }
}

/* ---------- PULSANTI: UN SOLO STILE, OVUNQUE, SEMPRE ----------
   .mb-btn-outline è un ALIAS di questa stessa regola, non più una
   definizione separata — prima esistevano due sistemi di bottoni
   leggermente diversi (padding/font-size/letter-spacing), causando
   bottoni visibilmente diversi tra loro in punti diversi del sito. */
.wp-element-button:not(.wc-block-cart-item__remove-link),
.wp-block-button__link,
button:not(.mb-menu-btn):not(.mb-nav-close):not(.mb-newsletter-submit):not(.mb-icon):not(.mb-wishlist-btn):not(.wc-block-components-quantity-selector__button):not(.wc-block-cart-item__remove-link):not(.mb-lang):not(.mb-fcol-toggle):not(.mb-faq-q):not(.mb-info-toggle):not(.mb-cat-toggle):not(.mb-qty-btn):not(.mb-swatch):not(.mb-grid-swatch):not(.mb-wa):not(.pswp__button):not(.single_add_to_cart_button):not(.add_to_cart_button):not(.wc-block-cart__submit-button):not(.wc-block-components-checkout-place-order-button):not(.checkout-button),
input[type="submit"],
.button:not(.wc-block-cart-item__remove-link):not(.add_to_cart_button):not(.checkout-button),
.woocommerce-Button,
a.button:not(.wc-block-cart-item__remove-link):not(.add_to_cart_button):not(.checkout-button),
.mb-btn-outline {
	display: inline-block;
	-webkit-appearance: none;
	appearance: none;
	font-family: "boreal", sans-serif !important;
	font-size: var(--mb-fs-button, 10px) !important;
	font-weight: 400 !important;
	text-transform: uppercase !important;
	letter-spacing: .14em !important;
	/* 27/08 — Stile pulsante MIOBUK, unico per tutto il sito: niente
	   pillola, solo la scritta con una riga sottile sotto. Al passaggio
	   del mouse la riga si ispessisce, il colore si approfondisce e le
	   lettere si distanziano appena: la scritta "cresce" senza scatti.
	   Prima era una pillola con bordo pieno e riempimento al passaggio. */
	padding: 0 0 9px !important;
	border: 0 !important;
	border-bottom: 1px solid var(--mb-taupe-line, #C5B9A4) !important;
	border-radius: 0 !important;
	background-color: transparent !important;
	color: var(--mb-taupe, #9A8C74) !important;
	box-shadow: none !important;
	text-decoration: none !important;
	cursor: pointer;
	transition: letter-spacing .45s cubic-bezier(.22,.61,.36,1), color .45s cubic-bezier(.22,.61,.36,1), border-color .45s cubic-bezier(.22,.61,.36,1), border-bottom-width .45s cubic-bezier(.22,.61,.36,1);
}
.wp-element-button:not(.wc-block-cart-item__remove-link):hover,
.wp-block-button__link:hover,
button:not(.mb-menu-btn):not(.mb-nav-close):not(.mb-newsletter-submit):not(.mb-icon):not(.mb-wishlist-btn):not(.wc-block-components-quantity-selector__button):not(.wc-block-cart-item__remove-link):not(.mb-lang):not(.mb-fcol-toggle):not(.mb-faq-q):not(.mb-info-toggle):not(.mb-cat-toggle):not(.mb-qty-btn):not(.mb-swatch):not(.mb-grid-swatch):not(.mb-wa):not(.pswp__button):not(.single_add_to_cart_button):not(.add_to_cart_button):not(.wc-block-cart__submit-button):not(.wc-block-components-checkout-place-order-button):not(.checkout-button):hover,
input[type="submit"]:hover,
.button:not(.wc-block-cart-item__remove-link):not(.add_to_cart_button):not(.checkout-button):hover,
a.button:not(.wc-block-cart-item__remove-link):not(.add_to_cart_button):not(.checkout-button):hover,
.mb-btn-outline:hover {
	background-color: transparent !important;
	color: var(--mb-taupe-deep, #7C6F59) !important;
	/* 27/08 — Nessuna spaziatura extra fra le lettere al passaggio: la
	   parola resta ferma, cambia solo la riga sotto. */
	/* 27/08 — Riga di passaggio piu' leggera su richiesta: 1,5px invece di
	   2px, per un segno meno marcato. */
	border-bottom-width: 1.5px !important;
	border-bottom-color: var(--mb-taupe-deep, #7C6F59) !important;
	transform: none;
}
/* Testo dentro i pulsanti — WooCommerce Blocks (Interactivity API) mette
   la scritta "ADD TO CART" / "N in basket" dentro uno <span> annidato nel
   <button>. La regola sitewide del corpo testo (span{color:...!important}
   più sotto in questo file) colora quello span DIRETTAMENTE, ignorando il
   colore del pulsante genitore — lo span non eredita, riceve il proprio
   colore. Causa reale del testo grigio invece di oro/bianco in hover.
   Specificità (classe+span) più alta del semplice "span" sitewide: vince
   sempre, in ogni stato. */
.wp-element-button:not(.wc-block-cart-item__remove-link) span,
.wp-block-button__link span,
button:not(.mb-menu-btn):not(.mb-nav-close):not(.mb-newsletter-submit):not(.mb-icon):not(.mb-wishlist-btn):not(.wc-block-components-quantity-selector__button):not(.wc-block-cart-item__remove-link):not(.mb-lang):not(.mb-fcol-toggle):not(.mb-faq-q):not(.mb-info-toggle):not(.mb-cat-toggle):not(.mb-qty-btn):not(.mb-swatch):not(.mb-grid-swatch):not(.mb-wa) span,
.button:not(.wc-block-cart-item__remove-link) span,
.woocommerce-Button span,
a.button:not(.wc-block-cart-item__remove-link) span,
.mb-btn-outline span {
	color: inherit !important;
	font-family: inherit !important;
	font-size: inherit !important;
	text-transform: inherit !important;
	letter-spacing: inherit !important;
}
/* Bottone elimina riga carrello — icona pulita, mai la pillola CTA */
.wc-block-cart-item__remove-link {
	display: inline-flex !important; align-items: center; justify-content: center;
	width: 34px !important; height: 34px !important; border: 0 !important; border-radius: 4px !important;
	background: transparent !important; padding: 0 !important;
	color: var(--mb-ink-soft, #6A6457) !important;
}
.wc-block-cart-item__remove-link:hover {
	background: var(--mb-cream-2, #F6F5F1) !important; color: #B3261E !important;
}

/* Rimuove l'icona "faccina triste" del carrello vuoto (WooCommerce la genera
   via ::before sulla classe with-empty-cart-icon) */
.with-empty-cart-icon::before { display: none !important; content: none !important; }
.wc-block-cart__empty-cart__title { padding-top: 0 !important; margin-top: 24px !important; }
.mb-collections-hero {
	margin-top: calc(var(--mb-header-h, 72px) + 70px);
	padding: 40px clamp(24px,8vw,160px) 56px;
	background: #FAF9F6; text-align: center;
	min-height: 220px;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
}
@media (max-width: 600px) {
	.mb-collections-hero { min-height: 160px; padding-top: 28px; padding-bottom: 28px; }
}
.mb-collections-hero-copy {
	max-width: 52ch; margin: 0 auto;
}
.mb-collections-grid {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
	background: var(--mb-line, rgba(26,24,20,.12));
	max-width: 1400px; margin: 40px auto 0;
}
.mb-collections-grid-4 { grid-template-columns: repeat(4, 1fr); }
.mb-collections-grid-4 .mb-collection-card .mb-cc-body { padding: 16px 12px 20px; }
.mb-collections-grid-4 .mb-collection-card h2 { font-size: 15px !important; line-height: 1.3; }
.mb-collection-card {
	background: #fff; text-decoration: none;
	display: flex; flex-direction: column;
	overflow: hidden;
}
.mb-collection-card .mb-cc-img-wrap {
	display: block; overflow: hidden; aspect-ratio: 1 / 1; background: #fff;
}
.mb-collection-card .mb-cc-img-wrap img {
	width: 100%; height: 100%; object-fit: contain; display: block;
	transition: transform .6s var(--mb-ease, cubic-bezier(.22,.61,.36,1));
}
.mb-collection-card:hover .mb-cc-img-wrap img { transform: scale(1.07); }
.mb-collection-card .mb-cc-body {
	padding: 20px 32px 32px; text-align: center;
}
.mb-collection-card h2 {
	font-size: 22px !important; color: var(--mb-taupe, #9A8C74) !important;
	/* 27/08 (sera) — Il titolo della scheda collezione restava spostato a
	   sinistra sul telefono. Ereditava da ".mb-sec h2" della Home un
	   "max-width:26ch" e un centraggio affidato ai margini automatici:
	   fragile, come gia' visto sul titolo di sezione. Qui il centraggio
	   arriva dal "text-align:center" di .mb-cc-body — lo stesso
	   meccanismo che centra gia' l'immagine della scheda — e non puo'
	   piu' essere spostato da nessuna regola sui margini. */
	display: inline-block;
	max-width: 100% !important;
	margin: 0 !important;
}
@media (max-width: 900px) { .mb-collections-grid { grid-template-columns: 1fr; } }

/* ===== Sezione oro chiaro (Ghost Technology, Made in Italy, New Arrival)
   — niente immagine, sfondo pieno, stessa struttura di .mb-sec. ===== */
.mb-sec-gold { background: var(--mb-gold-pale, #EDE7DB); }

/* ===== Striscia Collector Club — nera, bassa, testo oro maiuscolo ===== */
.mb-cc-strip {
	display: flex; align-items: center; justify-content: center;
	background: var(--mb-ink, #1A1814); min-height: 90px; padding: 20px 24px;
	text-decoration: none !important;
}
.mb-cc-strip span {
	font-family: "boreal", sans-serif !important; font-weight: 200 !important;
	text-transform: uppercase !important; letter-spacing: .3em; font-size: 16px !important;
	color: var(--mb-taupe, #9A8C74) !important;
}
.mb-cc-strip:hover span { color: var(--mb-taupe-line, #C5B9A4) !important; }

/* ===== Collector Club banner — sitewide, full-width, sopra il footer
   (parts/footer.html). Proporzioni fisse 1920×310 come l'artwork fornito
   — object-fit:cover mantiene l'inquadratura su qualunque larghezza di
   schermo. Un'unica istanza per tutto il sito: cambiare l'immagine da
   Customizer aggiorna ogni pagina. ===== */
.mb-club-banner {
	display: flex; align-items: center; justify-content: center;
	position: relative;
	width: var(--mb-vw, 100vw);
	margin-left: calc(50% - var(--mb-vw, 100vw) / 2);
	margin-right: calc(50% - var(--mb-vw, 100vw) / 2);
	box-sizing: border-box;
	aspect-ratio: 1920 / 310;
	min-height: 90px; max-height: 320px;
	background: var(--mb-ink, #1A1814);
	overflow: hidden;
	text-decoration: none !important;
}
.mb-club-banner-text {
	font-family: "boreal", sans-serif !important; font-weight: 200 !important;
	text-transform: uppercase !important; letter-spacing: .3em; font-size: 16px !important;
	color: var(--mb-taupe, #9A8C74) !important;
	position: relative; z-index: 1;
}
@media (max-width: 600px) {
	.mb-club-banner { min-height: 60px; }
	.mb-club-banner-text { font-size: 11px !important; letter-spacing: .16em; }
}

/* Image variant — l'artwork copre l'intero banner, object-fit via
   background-size:cover mantiene sempre l'inquadratura corretta. Il
   testo "Collector Club" vive dentro l'artwork stesso; la versione HTML
   diventa screen-reader-only per non duplicarlo a schermo. */
.mb-club-banner.mb-club-banner--image {
	background-size: cover; background-position: center;
}

/* .mb-btn-outline è ora un alias della regola pulsante unica sopra
   (vedi sezione "PULSANTI") — nessuna definizione separata qui. */

/* ===== Product card title — sitewide, shared by every product grid
   (Home showcase, Shop archive). Always exactly two lines: Collection,
   then Name — so every card reads Collection / Name / Price / Button,
   no exceptions. Long names are truncated with an ellipsis rather than
   wrapping, to keep every card in a row the same height. ===== */
.mb-pc-title { display: block; text-align: center; }
.mb-pc-collection {
	display: block; font-family: "boreal", sans-serif !important; font-weight: 200 !important;
	text-transform: uppercase !important; font-size: var(--mb-fs-label, 12px) !important; letter-spacing: .1em;
	color: var(--mb-taupe-deep, #7C6F59) !important; margin: 0 0 4px;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mb-pc-name {
	display: block; font-family: "boreal", sans-serif !important; font-weight: 500 !important;
	text-transform: uppercase !important; font-size: var(--mb-fs-product-title, 20px) !important; letter-spacing: .04em;
	color: var(--mb-taupe-deep, #7C6F59) !important; text-decoration: none !important;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
a.mb-pc-name:hover { color: var(--mb-taupe, #9A8C74) !important; }
/* Prezzo prodotto — universale, ovunque appaia (Home, Shop, correlati,
   cross-sell, carrello): un solo colore, una sola dimensione, sempre. */
.price,
.wc-block-components-product-price,
.wc-block-grid__product-price {
	font-family: "boreal", sans-serif !important; font-size: var(--mb-fs-body, 14px) !important;
	color: var(--mb-taupe-deep, #7C6F59) !important; text-decoration: none !important;
}
.price del { opacity: .5; }
.price ins { text-decoration: none; }

/* ===== Password-protected page (WordPress native) — usata per le
   anteprime private (es. Home in revisione col cliente). Di default
   WordPress mostra un form grezzo senza stile: qui lo alliniamo al resto
   del sito invece di lasciarlo "rotto" visivamente. ===== */
.post-password-form {
	max-width: 380px; margin: calc(var(--mb-header-h, 72px) + 120px) auto 120px; padding: 0 24px;
	text-align: center;
}
.post-password-form p:first-of-type {
	margin-bottom: 24px; line-height: 1.7;
}
.post-password-form label {
	display: block; font-family: "boreal", sans-serif !important; font-size: var(--mb-fs-label, 12px) !important;
	text-transform: uppercase !important; letter-spacing: .12em; color: var(--mb-ink-soft, #6A6457) !important;
	margin-bottom: 20px;
}
.post-password-form input[type="password"] {
	display: block; width: 100%; margin-top: 8px; font-family: "boreal", sans-serif !important; font-size: 14px !important;
	border: 1px solid var(--mb-taupe-line, #C5B9A4); border-radius: 4px; padding: 11px 13px;
	color: var(--mb-ink, #1A1814) !important; background: #fff; text-align: center;
}
.post-password-form input[type="submit"] {
	font-family: "boreal", sans-serif !important; font-size: var(--mb-fs-button, 12px) !important; font-weight: 400 !important;
	text-transform: uppercase !important; letter-spacing: .14em; padding: 12px 37px;
	border: 1px solid var(--mb-taupe, #9A8C74); border-radius: 999px; background: transparent;
	color: var(--mb-taupe, #9A8C74) !important; cursor: pointer;
	transition: background .35s var(--mb-ease, cubic-bezier(.22,.61,.36,1)), color .35s var(--mb-ease, cubic-bezier(.22,.61,.36,1));
}
.post-password-form input[type="submit"]:hover {
	background: var(--mb-taupe-line, #C5B9A4); color: #fff !important;
}

/* ===== Contact form — sitewide, [miobuk_contact_form] shortcode ===== */
.mb-contact-form-wrap { max-width: 560px; margin: 0 auto; }
.mb-contact-form { display: flex; flex-direction: column; gap: 20px; text-align: left; }
.mb-contact-hp { position: absolute; left: -9999px; }

/* ── Pagine interne (link del footer: spedizioni, resi, privacy, ecc.) ──
   27/08 — Stesso trattamento delle altre pagine del sito:
   1. la fascia del titolo va da bordo a bordo invece di fermarsi alla
      colonna di lettura (era il "layout vincolato" di WordPress, la
      stessa causa gia' trovata su carrello e checkout);
   2. la fascia parte SOTTO l'header fisso — prima ci finiva sotto e il
      titolo si sovrapponeva al logo;
   3. titoli in maiuscolo oro come nella scheda prodotto, testo in grigio
      con interlinea normale. */
/* Fascia titolo identica su TUTTE le pagine interne: pagine legali/info
   del footer e "Scopri MIOBUK". Larghezza piena calcolata sulla finestra
   (non sul contenitore, che da pagina a pagina ha larghezze diverse:
   e' cosi' che una fascia sbordava e un'altra restava stretta). */
.mb-legal-hero,
.mb-about-hero,
body.page-template-page-no-title .entry-content > .mb-shop-hero,
body.page:not(.woocommerce-page):not(.woocommerce-cart):not(.woocommerce-checkout) .mb-shop-hero {
	max-width: none !important;
	width: auto !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	margin-top: calc(var(--mb-header-h, 100px) + 40px) !important;
	padding: clamp(40px, 5vw, 68px) max(24px, calc(50vw - 590px)) !important;
	text-align: center;
	background: var(--mb-cream, #FAF9F6);
}
body.page-template-page-no-title h1,
body.page-template-page-no-title h2,
body.page-template-page-no-title h3,
body.page-template-page-no-title h4,
.mb-legal-page h2,
.mb-legal-page h3 {
	font-family: "boreal", sans-serif !important;
	font-weight: 200 !important;
	text-transform: uppercase !important;
	letter-spacing: .1em !important;
	color: var(--mb-taupe-deep, #7C6F59) !important;
}
body.page-template-page-no-title h2,
body.page-template-page-no-title h3,
.mb-legal-page h2,
.mb-legal-page h3 {
	font-size: 22px !important;
	line-height: 1.2 !important;
	margin: 40px 0 12px !important;
}
/* Una sola regola tipografica per tutte queste pagine: stesso carattere e
   stessa dimensione ovunque, come nel resto del sito. Prima ogni pagina
   aveva misure diverse ereditate dai blocchi di WordPress. */
body.page-template-page-no-title .entry-content *,
.mb-legal-page * {
	font-family: "boreal", sans-serif !important;
}
body.page-template-page-no-title .entry-content p,
body.page-template-page-no-title .entry-content li,
body.page-template-page-no-title .entry-content td,
body.page-template-page-no-title .entry-content th,
body.page-template-page-no-title .entry-content a,
body.page-template-page-no-title .entry-content span,
body.page-template-page-no-title .entry-content strong,
body.page-template-page-no-title .entry-content em,
.mb-legal-page p,
.mb-legal-page li {
	font-size: var(--mb-fs-body, 14px) !important;
	font-weight: 200 !important;
	color: var(--mb-ink-soft, #6A6457) !important;
	line-height: 1.5 !important;
	letter-spacing: 0 !important;
}
body.page-template-page-no-title .entry-content p,
.mb-legal-page p {
	margin-top: 0 !important;
	margin-bottom: 12px !important;
}
/* Il titolo della fascia in alto conserva la propria misura. */
.mb-legal-hero h1,
.mb-legal-hero .mb-legal-hero-title {
	font-size: clamp(26px, 3.4vw, 42px) !important;
	line-height: 1.1 !important;
	color: var(--mb-taupe-deep, #7C6F59) !important;
}

/* ── Fascia di rispetto bianca prima del footer ────────────────────────────
   Richiesta cliente 27/08: su TUTTE le pagine, tra la fine del contenuto
   (ultima riga di prodotti, ultima sezione editoriale, qualunque cosa sia)
   e il footer ci devono essere sempre almeno 100px di bianco.
   Realizzata come pseudo-elemento del footer e non come margine inferiore
   del contenuto: cosi' vale ovunque per costruzione, anche sulle pagine la
   cui ultima sezione ha uno sfondo colorato, perche' la fascia porta con se'
   il proprio bianco. Vale identica su desktop e su mobile. */
.wp-site-blocks > footer.wp-block-template-part {
	margin-top: 0 !important;
}
.wp-site-blocks > footer.wp-block-template-part::before {
	content: "";
	display: block;
	width: 100%;
	height: clamp(100px, 9vw, 140px);
	background: #fff;
}
.mb-contact-row { display: flex; gap: 20px; flex-wrap: wrap; }
.mb-contact-row label { flex: 1 1 200px; }
.mb-contact-form label {
	display: block; font-family: "boreal", sans-serif !important; font-size: var(--mb-fs-label, 12px) !important;
	text-transform: uppercase !important; letter-spacing: .1em; color: var(--mb-ink-soft, #6A6457) !important; margin-bottom: 6px;
}
.mb-contact-form input,
.mb-contact-form textarea {
	width: 100%; font-family: "boreal", sans-serif; font-size: var(--mb-fs-body, 14px);
	border: 1px solid var(--mb-taupe-line, #C5B9A4); border-radius: 4px;
	padding: 11px 13px; color: var(--mb-ink, #1A1814); background: #fff;
}
.mb-contact-form textarea { resize: vertical; }
.mb-contact-form button { align-self: flex-start; margin-top: 4px; }
.mb-contact-notice {
	padding: 14px 16px;
	border-radius: 4px; margin-bottom: 24px !important;
}
.mb-contact-notice--ok { background: var(--mb-cream-2, #F6F5F1); color: var(--mb-taupe-deep, #7C6F59) !important; }
.mb-contact-notice--error { background: #FBEAEA; color: #B3261E !important; }

/* ===== Preview password popup — semplice overlay JS, non il sistema
   nativo WordPress. Copre tutto lo schermo finché non si inserisce la
   password corretta. ===== */
.mb-preview-gate {
	position: fixed; inset: 0; z-index: 99999;
	background: rgba(20, 18, 14, .92);
	display: flex; align-items: center; justify-content: center;
	padding: 24px;
}
.mb-preview-gate-card {
	width: 100%; max-width: 340px; background: #fff; border-radius: 4px;
	padding: 40px 32px; text-align: center;
	display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.mb-preview-gate-card h2 { margin: 4px 0 10px; }
.mb-preview-gate-card p { margin: 0 0 22px; }
.mb-preview-gate-card input[type="password"] {
	width: 100%; font-family: "boreal", sans-serif !important; font-size: 14px !important;
	border: 1px solid var(--mb-taupe-line, #C5B9A4); border-radius: 4px; padding: 11px 13px;
	color: var(--mb-ink, #1A1814) !important; background: #fff; text-align: center; margin-bottom: 16px;
}
.mb-preview-gate-card .mb-btn-outline { border: none; cursor: pointer; background: var(--mb-taupe, #9A8C74); color: #fff !important; }
.mb-preview-gate-card .mb-btn-outline:hover { background: var(--mb-hover, #6A5F49); }
.mb-preview-gate-error {
	display: none; margin-top: 14px; font-size: 11px !important; color: #B3261E !important;
}

/* ===== FAQ — accordion domande/risposte ===== */
.mb-faq-cat { max-width: 780px; margin: 0 auto 56px; }
.mb-faq-cat:last-child { margin-bottom: 0; }
.mb-faq-cat h3 {
	font-family: "boreal", sans-serif !important; font-weight: 400 !important; text-transform: uppercase !important;
	letter-spacing: .1em; font-size: 13px !important; color: var(--mb-taupe-deep, #7C6F59) !important;
	margin-bottom: 6px; text-align: left;
}
.mb-faq-item { border-bottom: 1px solid var(--mb-line, rgba(26,24,20,.12)); }
.mb-faq-q {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
	padding: 18px 0; font-family: "boreal", sans-serif !important; font-weight: 400 !important;
	font-size: 15px !important; color: var(--mb-ink, #1A1814) !important;
}
.mb-faq-chev { flex-shrink: 0; font-size: 11px; color: var(--mb-taupe, #9A8C74); transition: transform .3s var(--mb-ease, cubic-bezier(.22,.61,.36,1)); }
.mb-faq-q[aria-expanded="true"] .mb-faq-chev { transform: rotate(180deg); }
.mb-faq-a {
	max-height: 0; overflow: hidden; transition: max-height .35s var(--mb-ease, cubic-bezier(.22,.61,.36,1));
}
.mb-faq-a.mb-open { max-height: 400px; }
.mb-faq-a p {
	margin: 0 0 20px; font-family: "boreal", sans-serif; font-size: 14px; line-height: 1.7;
	color: var(--mb-ink-soft, #6A6457); text-align: left; max-width: none;
}

/* ===== Pagina "Scopri MIOBUK" (/about/) — sezioni alternate bianco /
   oro chiaro, testo centrato su misura di lettura stretta. Vive qui e
   non in miobuk-home.css perche' quel foglio e' caricato solo sulla
   home: le classi .mb-sec/.mb-sec-gold della home non sarebbero
   disponibili su questa pagina. ===== */
.mb-about-page { padding-bottom: 0 !important; }
.mb-about-band { padding: clamp(56px, 8vw, 96px) clamp(24px, 5vw, 48px); }
/* Regola immagine certificazione: RIMOSSA il 04/09/2026 insieme al
   marchio e a ogni riferimento nella fascia "Design e Sostenibilita",
   che ora e' di solo testo. */
.mb-about-band .mb-eyebrow { margin-bottom: 10px; }
.mb-about-h2 {
	max-width: 22ch; margin: 0 auto 28px !important;
	color: var(--mb-taupe-deep, #7C6F59) !important;
}
.mb-about-p {
	font-family: "boreal", sans-serif !important; font-size: var(--mb-fs-body, 14px) !important;
	line-height: 1.85 !important; color: var(--mb-ink-soft, #6A6457) !important;
	margin: 0 auto 20px; max-width: 62ch;
}
.mb-about-claim {
	font-family: "boreal", sans-serif !important; font-weight: 200 !important;
	text-transform: uppercase !important; letter-spacing: .22em !important;
	font-size: 12px !important; line-height: 2 !important;
	color: var(--mb-taupe-deep, #7C6F59) !important;
	margin: 32px auto 0;
}
.mb-about-cta { text-align: center; margin-top: 36px; }
.mb-about-closing { padding: clamp(48px, 6vw, 72px) clamp(24px, 5vw, 48px); }

/* Istruzioni d'uso del MIOBUK Ring: testo a sinistra dentro un blocco
   centrato — una procedura numerata si legge male se centrata. */
.mb-ring-steps {
	max-width: 560px; margin: 44px auto 0; text-align: left;
	border-top: 1px solid var(--mb-taupe-line, #C5B9A4);
	padding-top: 28px;
}
.mb-ring-steps-title { text-align: center; margin-bottom: 24px; }
.mb-ring-list { list-style: none; counter-reset: mbring; margin: 0; padding: 0; }
.mb-ring-list li {
	position: relative; counter-increment: mbring;
	padding: 0 0 22px 44px; margin: 0;
}
.mb-ring-list li::before {
	content: counter(mbring);
	position: absolute; left: 0; top: 0;
	width: 26px; height: 26px; border-radius: 50%;
	border: 1px solid var(--mb-gold-accent, #B08A3E);
	color: var(--mb-gold-accent, #B08A3E);
	font-family: "boreal", sans-serif; font-size: 11px;
	display: flex; align-items: center; justify-content: center;
}
.mb-ring-list li strong {
	display: block; font-family: "boreal", sans-serif !important; font-weight: 400 !important;
	text-transform: uppercase; letter-spacing: .1em; font-size: 11px;
	color: var(--mb-taupe-deep, #7C6F59); margin-bottom: 6px;
}
.mb-ring-list li span {
	display: block; font-family: "boreal", sans-serif; font-size: 14px; line-height: 1.75;
	color: var(--mb-ink-soft, #6A6457);
}
.mb-ring-note {
	font-family: "boreal", sans-serif !important; font-size: 12px !important;
	line-height: 1.7 !important; color: var(--mb-ink-soft, #6A6457) !important;
	opacity: .85; margin: 8px 0 0;
}
.mb-ring-note strong { font-weight: 400; color: var(--mb-taupe-deep, #7C6F59); }
@media (max-width: 600px) {
	.mb-about-h2 { max-width: none; }
	.mb-ring-list li { padding-left: 38px; }
}

/* Sezioni immagine+testo alternate (stile "50th anniversary" del sito
   Patek Philippe indicato dal cliente): immagine da un lato, testo
   dall'altro, lati alternati sezione per sezione. Le classi tipografiche
   (.mb-about-h2/.mb-about-p/.mb-about-claim) restano condivise con le
   sezioni centrate esistenti (hero e chiusura) — qui vengono solo
   riallineate a sinistra dentro la colonna testo. */
.mb-about-split {
	display: flex; align-items: center; gap: clamp(32px, 6vw, 72px);
	max-width: 1040px; margin: 0 auto; text-align: left;
}
.mb-about-split.mb-about-split-rev { flex-direction: row-reverse; }
.mb-about-split-media { flex: 1 1 42%; min-width: 0; }
.mb-about-placeholder {
	aspect-ratio: 4 / 5; width: 100%;
	background: var(--mb-cream-light, #FAF9F6);
	border: 1px solid var(--mb-taupe-line, #C5B9A4);
	display: flex; align-items: center; justify-content: center;
	font-family: "boreal", sans-serif; font-size: 10px; letter-spacing: .16em;
	text-transform: uppercase; color: var(--mb-taupe, #9A8C74); text-align: center;
	padding: 16px;
}
.mb-about-split-text { flex: 1 1 58%; min-width: 0; }
.mb-about-split-text .mb-about-h2,
.mb-about-split-text .mb-about-p,
.mb-about-split-text .mb-about-claim,
.mb-about-split-text .mb-eyebrow {
	text-align: left !important; margin-left: 0 !important; max-width: none !important;
}
.mb-about-split-text .mb-about-cta { text-align: left; }
.mb-about-split-text .mb-ring-steps { margin-left: 0; }
@media (max-width: 780px) {
	.mb-about-split, .mb-about-split.mb-about-split-rev { flex-direction: column; text-align: center; }
	.mb-about-split-media { flex: 1 1 auto; width: 100%; max-width: 360px; }
	.mb-about-split-text { flex: 1 1 auto; }
	.mb-about-split-text .mb-about-h2,
	.mb-about-split-text .mb-about-p,
	.mb-about-split-text .mb-about-claim,
	.mb-about-split-text .mb-eyebrow { text-align: center !important; margin-left: auto !important; margin-right: auto !important; }
	.mb-about-split-text .mb-about-cta { text-align: center; }
	.mb-about-split-text .mb-ring-steps { margin-left: auto; margin-right: auto; }
}