/* =========================================================
   MIOBUK — WooCommerce (Shop, Prodotto, Cart, Checkout, My Account)
   Caricato SOLO su queste pagine (vedi inc/miobuk-woocommerce.php,
   sezione ENQUEUE). Tipografia: usa i token di miobuk-nav.css
   (--mb-fs-*, --mb-fw-*) — nessun valore px scritto qui che non sia
   già coperto da un token altrove. Se manca un token, si aggiunge in
   miobuk-nav.css, non si scrive un numero a mano qui.
   ========================================================= */

.woocommerce-products-header { display: none !important; }
.woocommerce div.product .product_title,
h1.product_title { display: none !important; }
.mb-product-eyebrow { margin-bottom: 6px !important; text-align: left !important; }
/* Edizione Limitata: deve essere la scritta più visibile della scheda.
   Richiesta esplicita del cliente — è l'informazione che determina
   l'acquisto su un pezzo da collezione, quindi non è un occhiello
   qualunque: corpo maggiore, colore pieno, riga sottile sotto. */
.mb-product-eyebrow--limited {
	font-size: 15px !important;
	letter-spacing: .20em !important;
	color: var(--mb-taupe-deep, #7C6F59) !important;
	padding-bottom: 8px !important;
	margin-bottom: 12px !important;
	border-bottom: 1px solid var(--mb-taupe-line, #C5B9A4) !important;
	display: inline-block !important;
}
/* h1.wp-block-post-title NON va nascosto globalmente: è usato
   deliberatamente nella hero e nella colonna dettagli del prodotto. */
.woocommerce div.product .woocommerce-product-gallery,
.wp-block-woocommerce-product-gallery {
	display: grid; grid-template-columns: 1fr; gap: 1.5rem;
	max-width: 600px; margin: 0 auto;
}
.woocommerce div.product form.cart,
.wp-block-woocommerce-add-to-cart-form form.cart {
	display: flex; align-items: center; justify-content: center;
	gap: 1.5rem; flex-wrap: wrap; margin: 2rem 0;
}
/* Pulsante Add to Cart — NESSUNA regola qui: è già .wp-element-button,
   coperto interamente dal sistema pulsanti unico in miobuk-global.css
   (pill outline, --mb-fs-button, hover taupe-line). Una seconda
   definizione qui è esattamente la causa dei CTA visivamente diversi
   tra loro nel sito — non reintrodurla. */

/* ===== Shop / archive ===== */
.mb-shop-archive .page-title,
.mb-shop-archive h1.wp-block-query-title,
.mb-shop-archive .woocommerce-breadcrumb { display: none !important; }

.mb-shop-archive { max-width: 1400px; margin: 0 auto; padding: 0 24px; }
/* Il tema WordPress (theme.json) applica un vincolo di larghezza di
   default (645px) a ogni figlio diretto di un contenitore "constrained"
   — anche se il contenitore stesso (sopra) è più largo. Risultato: la
   riga sidebar+griglia prodotti restava schiacciata a 645px invece di
   usare la larghezza disponibile. Tolto qui, esplicitamente. */
.mb-shop-archive > .wp-block-columns.mb-shop-layout {
	max-width: none !important; width: 100%;
}
.mb-shop-hero { text-align: center; }
.mb-shop-hero > * { max-width: 1400px; margin-left: auto; margin-right: auto; }

.mb-shop-hero {
	margin-top: calc(var(--mb-header-h, 72px) + 70px);
	padding: 40px var(--mb-px, clamp(24px,8vw,160px)) 40px;
	background: #FAF9F6;
	text-align: center;
	min-height: 220px;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
}
@media (max-width: 600px) {
	.mb-shop-hero { min-height: 160px; padding-top: 28px; padding-bottom: 28px; }
}
.mb-shop-tabs {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 28px;
	margin-top: 32px; padding: 18px 0; border-top: 1px solid var(--mb-taupe-line, #C5B9A4);
}
.mb-shop-tabs a {
	font-family: "boreal", sans-serif !important; font-size: var(--mb-fs-body, 14px) !important; font-weight: var(--mb-fw-regular, 400) !important;
	text-transform: uppercase !important; letter-spacing: .12em !important; color: var(--mb-taupe, #9A8C74) !important;
	text-decoration: none; padding-bottom: 4px; border-bottom: 1px solid transparent;
	transition: color .3s var(--mb-ease, cubic-bezier(.22,.61,.36,1)), border-color .3s var(--mb-ease, cubic-bezier(.22,.61,.36,1));
}
.mb-shop-tabs a:hover {
	color: var(--mb-ink, #1A1814); border-bottom-color: var(--mb-taupe-deep, #7C6F59);
}
@media (max-width: 600px) {
	.mb-shop-tabs { gap: 16px 22px; margin-top: 24px; }
}

.mb-shop-layout { align-items: flex-start !important; position: relative; }

.mb-shop-sidebar {
	border-right: 1px solid var(--mb-taupe-line, #C5B9A4);
	padding-right: 1.5rem;
	position: sticky;
	top: calc(var(--mb-header-h, 72px) + 24px);
	align-self: flex-start;
	max-height: calc(100vh - var(--mb-header-h, 72px) - 48px);
	overflow-y: auto;
	padding-top: 1.5rem;
}
.mb-filter-block { margin-bottom: 2rem; }
.mb-filter-heading {
	font-family: "boreal", sans-serif !important; font-weight: var(--mb-fw-light, 200) !important; text-transform: uppercase !important;
	letter-spacing: 0.05em !important; font-size: var(--mb-fs-body, 14px) !important; color: var(--mb-taupe-deep, #7C6F59) !important;
	margin: 0 0 1rem; border-bottom: 1px solid var(--mb-line, rgba(26,24,20,.12)); padding-bottom: 10px;
}
.mb-shop-filters ul { list-style: none; margin: 0; padding: 0; }
.mb-shop-filters ul ul { margin-left: 14px; margin-top: 0; }
.mb-shop-filters ul li { margin: 0; }
.mb-shop-filters ul li a,
.mb-shop-filters .wc-layered-nav-term a,
.mb-shop-filters .tagcloud a {
	display: block;
	font-family: "boreal", sans-serif !important; font-size: var(--mb-fs-body, 14px) !important; font-weight: var(--mb-fw-regular, 400) !important;
	text-transform: uppercase !important; letter-spacing: .06em !important; color: var(--mb-taupe, #9A8C74) !important;
	text-decoration: none; padding: 10px 0;
	border-bottom: 1px solid var(--mb-taupe-line, #C5B9A4);
	transition: color .4s var(--mb-ease, cubic-bezier(.22,.61,.36,1)),
	            letter-spacing .4s var(--mb-ease, cubic-bezier(.22,.61,.36,1)),
	            border-bottom-width .4s var(--mb-ease, cubic-bezier(.22,.61,.36,1)),
	            border-bottom-color .4s var(--mb-ease, cubic-bezier(.22,.61,.36,1));
}
/* 27/08 — Al passaggio del mouse le voci del menu si comportano come i
   pulsanti: la riga sotto si ispessisce, il colore si approfondisce e le
   lettere si distanziano appena. Il padding inferiore cala di 1px mentre
   il bordo ne guadagna 1, cosi' l'altezza della voce non cambia e le
   voci sotto non "saltano". */
.mb-shop-filters ul li a:hover,
.mb-shop-filters .tagcloud a:hover {
	color: var(--mb-taupe-deep, #7C6F59) !important;
	border-bottom-width: 1.5px;
	border-bottom-color: var(--mb-taupe-deep, #7C6F59);
	padding-bottom: 9.5px;
}

/* Accordion sidebar categorie — sottocategorie chiuse di default, si
   aprono al click sul toggle. La voce padre resta sempre cliccabile
   (naviga alla categoria); il toggle è un elemento separato accanto. */
.mb-shop-nav li.cat-item { position: relative; }
.mb-shop-nav li.mb-has-children > a { padding-right: 28px; }
.mb-shop-nav .mb-cat-toggle,
.mb-shop-nav .mb-cat-toggle:hover,
.mb-shop-nav .mb-cat-toggle:focus {
	position: absolute; top: 6px; right: 0; width: 20px; height: 20px;
	display: flex; align-items: center; justify-content: center;
	-webkit-appearance: none; appearance: none;
	background: none !important; background-color: transparent !important;
	border: 0 !important; border-radius: 0 !important;
	box-shadow: none !important; outline: none;
	cursor: pointer; padding: 0; margin: 0; min-height: 0; min-width: 0;
}
/* L'anello di focus resta solo per la navigazione da tastiera. */
.mb-shop-nav .mb-cat-toggle:focus-visible { outline: 1px solid var(--mb-taupe-line, #C5B9A4); outline-offset: 2px; }
/* Freccina disegnata con due bordi ruotati: nessun glifo, nessun SVG
   (verrebbe rimosso da wp_kses_post), nessun riquadro. */
.mb-shop-nav .mb-cat-chev {
	display: block; width: 6px; height: 6px; margin-top: -3px;
	border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
	color: var(--mb-gold-accent, #B08A3E);
	transform: rotate(45deg);
	transition: transform .35s var(--mb-ease, cubic-bezier(.22,.61,.36,1)), color .35s var(--mb-ease, cubic-bezier(.22,.61,.36,1));
}
.mb-shop-nav .mb-cat-toggle:hover .mb-cat-chev { color: var(--mb-hover, #6A5F49); }
/* Aperto: la freccina punta in su. Lo stato e' letto sia dall'attributo
   (impostato dal JS al click) sia dalla classe sul <li> (impostata da PHP
   quando il ramo attivo parte gia' aperto). */
.mb-shop-nav .mb-cat-toggle[aria-expanded="true"] .mb-cat-chev,
.mb-shop-nav li.mb-cat-open > .mb-cat-toggle .mb-cat-chev { transform: rotate(225deg); margin-top: 2px; }
.mb-shop-nav li.mb-has-children > ul.children {
	max-height: 0; overflow: hidden;
	transition: max-height .4s var(--mb-ease, cubic-bezier(.22,.61,.36,1));
}
.mb-shop-nav li.mb-has-children.mb-cat-open > ul.children { max-height: 600px; }

/* Livelli annidati: rientro progressivo, corpo leggermente ridotto e
   linea di separazione piu' tenue, cosi' la gerarchia si legge a colpo
   d'occhio senza appesantire la colonna. */
.mb-shop-nav ul.children > li > a {
	font-size: 12px !important; letter-spacing: .08em !important;
	padding: 8px 0;
	border-bottom-color: rgba(197, 185, 164, .45);
}
.mb-shop-nav li.current-cat > a { color: var(--mb-taupe-deep, #7C6F59) !important; }
.mb-shop-filters .tagcloud { display: flex; flex-wrap: wrap; gap: 8px; }
.mb-shop-filters .tagcloud a {
	display: inline-block; border: 1px solid var(--mb-taupe-line, #C5B9A4); border-radius: 999px;
	padding: 4px 12px !important; font-size: var(--mb-fs-body, 14px) !important;
}

.mb-filter-toggle-input { position: absolute; opacity: 0; pointer-events: none; }
label.mb-filter-tab {
	display: none; position: fixed; top: 45%; left: 0; z-index: 40;
	/* 27/08 — Colore del logo (taupe #9A8C74) al posto dell'oro acceso
	   #B08A3E, che stonava con il resto della pagina. */
	background: var(--mb-taupe, #9A8C74) !important; color: #fff !important;
	font-family: "boreal", sans-serif !important; font-size: var(--mb-fs-body, 14px) !important;
	text-transform: uppercase !important; letter-spacing: .12em !important; padding: 12px 8px; writing-mode: vertical-rl;
	border-radius: 0 6px 6px 0; cursor: pointer;
}
/* 27/08 — Lo sfondo scuro che accompagna l'apertura del pannello e'
   figlio diretto del contenuto della pagina, e il "layout vincolato" di
   WordPress gli imponeva la larghezza di lettura (645px) con i margini
   automatici: pur essendo dichiarato a schermo intero, veniva disegnato
   come un rettangolo grigio centrato al centro della pagina. Stessa
   radice del problema della testata di carrello e checkout.
   Qui il vincolo viene annullato esplicitamente. */
.mb-filter-scrim {
	max-width: none !important;
	width: 100vw !important;
	height: 100vh !important;
	margin: 0 !important;
	display: none; position: fixed; inset: 0; z-index: 38;
	background: rgba(20,18,14,.34); opacity: 0; visibility: hidden;
	transition: opacity .4s var(--mb-ease, cubic-bezier(.22,.61,.36,1)), visibility .4s var(--mb-ease, cubic-bezier(.22,.61,.36,1));
}
@media (max-width: 781px) {
	.mb-shop-layout { flex-wrap: nowrap !important; }
	label.mb-filter-tab { display: block; }
	/* 27/08 — Il pannello partiva da top:0 con z-index 39, mentre l'header
	   e' fisso, alto var(--mb-header-h) e sta a z-index 50: la prima voce
	   ("Tutte le collezioni") finiva sotto la fascia bianca dell'header e
	   sembrava cancellata. Ora il pannello comincia SOTTO l'header e la sua
	   altezza e' ridotta della stessa quantita', cosi' non sborda in fondo. */
	.mb-shop-sidebar {
		position: fixed; top: calc(var(--mb-header-h, 72px) + 6px); left: 0;
		height: calc(100vh - var(--mb-header-h, 72px) - 6px);
		/* 100dvh tiene conto delle barre di Safari su iOS che compaiono e
		   scompaiono; i browser che non lo conoscono ignorano questa riga
		   e restano sulla precedente. */
		height: calc(100dvh - var(--mb-header-h, 72px) - 6px);
		width: 82vw; max-width: 360px;
		background: #fff; z-index: 39; overflow-y: auto; padding: 22px 24px 40px !important;
		border-right: none; box-shadow: 0 0 60px rgba(20,18,14,.16);
		transform: translateX(-100%); transition: transform .5s var(--mb-ease, cubic-bezier(.22,.61,.36,1));
		flex-basis: 82vw !important; max-height: none;
	}
	.mb-filter-toggle-input:checked ~ .mb-filter-scrim { display: block; opacity: 1; visibility: visible; }
	.mb-filter-toggle-input:checked ~ .mb-shop-layout .mb-shop-sidebar { transform: translateX(0); }
	body.mb-filters-open .mb-shop-sidebar { transform: translateX(0) !important; }
	body.mb-filters-open .mb-filter-scrim { display: block; opacity: 1; visibility: visible; }
}

/* Griglia prodotti Shop */
.mb-shop-archive .wp-block-woocommerce-product-collection [data-block-name="woocommerce/product-image"] {
	overflow: hidden; display: block; border-radius: 2px;
}
/* Richiesta cliente 26/08: la griglia si affidava al calcolo automatico
   "shrinkColumns" di WooCommerce, che su schermi stretti scendeva a 2
   colonne con card grandi — troppo scroll verticale. Forzata a 3 colonne
   fisse sempre, con card e immagini più compatte per starci bene. */
.mb-shop-archive .wc-block-product-template {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 1.25rem .75rem !important;
}
/* Precauzione dopo la scoperta del 26/08 sui prodotti correlati (un
   elemento ::before invisibile rubava un posto in griglia): stesso
   controllo qui, per sicurezza, anche se questo blocco è di tipo
   diverso (WooCommerce Blocks, non lista classica) e in teoria non
   dovrebbe averlo. */
.mb-shop-archive .wc-block-product-template::before,
.mb-shop-archive .wc-block-product-template::after {
	display: none !important; content: none !important;
}
.mb-shop-archive .wc-block-product-template > li {
	width: auto !important; min-width: 0 !important;
}
.mb-shop-archive .wp-block-woocommerce-product-collection [data-block-name="woocommerce/product-image"] img {
	border-radius: 2px; aspect-ratio: 3/4; object-fit: cover;
	transition: transform .6s var(--mb-ease, cubic-bezier(.22,.61,.36,1));
}
/* 27/08 — Richiesta cliente: su smartphone la griglia era a 2 colonne e le
   schede si sovrapponevano (il pulsante "Aggiungi al carrello" e' piu' largo
   della colonna e sbordava su quella accanto). Su telefono la griglia passa a
   UNA colonna; nella fascia intermedia (tablet stretti) resta a due, invece
   delle tre della regola base che a quelle larghezze sono troppo strette. */
@media (max-width: 600px) {
	.mb-shop-archive .wc-block-product-template {
		grid-template-columns: 1fr !important;
		gap: 2rem 0 !important;
	}
}
@media (min-width: 601px) and (max-width: 781px) {
	.mb-shop-archive .wc-block-product-template {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 1.5rem .75rem !important;
	}
}
/* Il pulsante non deve mai essere piu' largo della sua colonna: e' questa la
   causa reale delle schede che sembravano "sovrapposte". */
.mb-shop-archive .wc-block-product-template .wp-block-woocommerce-product-button,
.mb-shop-archive .wc-block-product-template .wp-block-woocommerce-product-button .wp-element-button,
.mb-shop-archive .wc-block-product-template .add_to_cart_button {
	max-width: 100% !important;
	box-sizing: border-box !important;
	white-space: normal !important;
}
/* 27/08 — Ingrandimento al passaggio ridotto da 1.08 a 1.04 e ritaglio
   forzato sul contenitore: su alcune schede l'immagine ingrandita usciva
   dal proprio riquadro e finiva sopra il nome del prodotto.
   02/09 — Il ritaglio non copriva le griglie nuove: l'immagine ingrandita
   passava sopra "LIMITED EDITION" e sopra il nome della collezione. Qui
   sotto vale su qualunque contenitore di immagine prodotto, comunque sia
   costruita la scheda. */
[data-block-name="woocommerce/product-image"],
.wc-block-components-product-image,
.mb-pc-media,
li.wc-block-product .wc-block-components-product-image {
	overflow: hidden !important;
	display: block !important;
}
.mb-shop-archive .wp-block-woocommerce-product-collection li.wc-block-product:hover [data-block-name="woocommerce/product-image"] img,
.mb-shop-archive .wp-block-woocommerce-product-collection .product:hover [data-block-name="woocommerce/product-image"] img {
	transform: scale(1.04);
}
/* 27/08 — Il ritaglio DEVE valere ovunque compaiano schede prodotto, non
   solo nelle pagine dello shop: nella vetrina della home il contenitore
   dell'immagine aveva "overflow: visible", quindi la foto ingrandita al
   passaggio del mouse usciva dal proprio riquadro e finiva sopra il nome
   della collezione. Verificato: li' l'immagine ingrandita arrivava
   esattamente sul bordo superiore dell'occhiello. */
body [data-block-name="woocommerce/product-image"],
body .wc-block-components-product-image,
body li.wc-block-product .wc-block-components-product-image,
body li.wc-block-product [data-block-name="woocommerce/product-image"],
body li.wc-block-product .wc-block-components-product-image a,
body .mb-related-products li.product a,
body .mb-cc-img-wrap,
body .mb-collection-card {
	overflow: hidden !important;
}
/* Ingrandimento contenuto anche fuori dallo shop. */
.wc-block-product:hover .wc-block-components-product-image img,
.mb-collection-card:hover .mb-cc-img-wrap img {
	transform: scale(1.04);
}
.mb-cc-img-wrap img:hover,
.mb-collection-card:hover .mb-cc-img-wrap img { transform: scale(1.04); }
.mb-shop-archive .wp-block-woocommerce-product-collection .mb-pc-title {
	display: block; margin: 12px 0 4px;
}
/* Titolo prodotto, collection-eyebrow e prezzo: NESSUNA regola qui —
   .mb-pc-name, .mb-pc-collection e .price/.wc-block-components-product-price
   sono universali in miobuk-global.css, valide ovunque senza eccezioni
   per pagina. */
.mb-shop-archive .wp-block-woocommerce-product-collection .wp-block-woocommerce-product-button .wp-element-button,
.mb-shop-archive .wp-block-woocommerce-product-collection .add_to_cart_button {
	font-family: "boreal", sans-serif !important; font-size: var(--mb-fs-button, 10px) !important; font-weight: var(--mb-fw-regular, 400);
	text-transform: uppercase; letter-spacing: .14em; padding: 9px 14px;
	border: 1px solid var(--mb-taupe, #9A8C74); border-radius: 999px;
	background-color: transparent; color: var(--mb-taupe, #9A8C74);
	display: inline-block; text-decoration: none; white-space: nowrap;
	transition: background .35s var(--mb-ease, cubic-bezier(.22,.61,.36,1)), color .35s var(--mb-ease, cubic-bezier(.22,.61,.36,1)), border-color .35s var(--mb-ease, cubic-bezier(.22,.61,.36,1)), transform .35s var(--mb-ease, cubic-bezier(.22,.61,.36,1));
}
.mb-shop-archive .wp-block-woocommerce-product-collection .wp-block-woocommerce-product-button .wp-element-button:hover,
.mb-shop-archive .wp-block-woocommerce-product-collection .add_to_cart_button:hover {
	background-color: var(--mb-taupe-line, #C5B9A4); border-color: var(--mb-taupe-line, #C5B9A4);
	color: #fff; transform: translateY(-1px);
}

/* ===== Single Product ===== */
.mb-product-main { align-items: flex-start !important; }

.mb-product-gallery-col .wp-block-woocommerce-product-image-gallery,
.mb-product-gallery-col .woocommerce-product-gallery {
	display: block;
}
.mb-product-gallery-col img { border-radius: 3px; }
.mb-product-gallery-col .wc-block-product-gallery-thumbnails,
.mb-product-gallery-col .flex-control-thumbs {
	display: flex !important; flex-direction: row !important; flex-wrap: wrap;
	gap: 10px; margin-top: 14px; list-style: none; padding: 0;
}
.mb-product-gallery-col .wc-block-product-gallery-thumbnails img,
.mb-product-gallery-col .flex-control-thumbs img {
	border-radius: 3px; aspect-ratio: 1/1; object-fit: cover; cursor: pointer;
	border: 1px solid transparent; transition: border-color .3s var(--mb-ease, cubic-bezier(.22,.61,.36,1));
}
.mb-product-gallery-col .wc-block-product-gallery-thumbnails img:hover,
.mb-product-gallery-col .flex-control-thumbs img.flex-active {
	border-color: var(--mb-taupe, #9A8C74);
}
/* Immagine principale — nessun outline/bordo, in nessuno stato. Copre sia
   il markup classico (.woocommerce-product-gallery__image, usato da
   questo tema) sia quello a blocchi, e il link <a> che avvolge l'immagine
   per la lightbox (altrimenti riceve l'outline di focus del browser). */
/* Richiesta cliente 26/08: le immagini prodotto erano troppo grandi,
   sproporzionate rispetto al testo e poco eleganti — l'immagine
   principale ora ha una larghezza massima invece di riempire tutta la
   colonna, con margine centrato per dare respiro (coerente con lo stile
   discreto richiesto nel resto del sito). */
.mb-product-gallery-col .woocommerce-product-gallery__image,
.mb-product-gallery-col .wc-block-product-gallery-large-image {
	max-width: 380px; margin-left: auto; margin-right: auto;
}
.mb-product-gallery-col .wc-block-product-gallery-thumbnails,
.mb-product-gallery-col .flex-control-thumbs {
	max-width: 380px; margin-left: auto; margin-right: auto;
}
.mb-product-gallery-col .woocommerce-product-gallery__image,
.mb-product-gallery-col .woocommerce-product-gallery__image a,
.mb-product-gallery-col .woocommerce-product-gallery__image img,
.mb-product-gallery-col .flex-viewport,
.mb-product-gallery-col .flex-viewport img,
.mb-product-gallery-col .wc-block-product-gallery-large-image img {
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}
.mb-product-gallery-col .woocommerce-product-gallery__image a:focus,
.mb-product-gallery-col .woocommerce-product-gallery__image a:focus-visible {
	outline: none !important;
}
.mb-product-gallery-col .wc-block-product-gallery__dots,
.mb-product-gallery-col .wc-block-product-gallery-pager,
.mb-product-gallery-col [class*="pagination"] { display: none !important; }

/* Richiesta cliente 26/08: l'icona lente di zoom (stile di default di
   WooCommerce, mai personalizzato finora) aveva un cerchio non richiesto
   e un colore diverso dalle altre icone del sito. Rimosso il cerchio,
   colore allineato a quello delle altre icone header (taupe).

   CAUSA REALE, verificata il 27/08 leggendo le regole CSS attive sulla
   pagina live (non supposta): la lente NON è un'icona né un font — è
   disegnata da WooCommerce stesso in woocommerce.css con due pseudo-
   elementi neri, `::before` (il cerchio della lente, un bordo 2px) e
   `::after` (il manico, un rettangolino ruotato di -45°). L'emoji 🔍
   presente nell'HTML è già nascosta da WooCommerce (span sr-only) e non
   c'entra nulla con quello che si vede.
   Il motivo per cui i tentativi precedenti non funzionavano è la
   SPECIFICITÀ: WooCommerce usa il selettore lungo
   `.woocommerce div.product div.images .woocommerce-product-gallery__trigger::before`,
   che batte qualsiasi regola scritta sulla sola classe del trigger.
   Qui i due pseudo-elementi vengono ricolorati usando lo stesso
   selettore lungo, quindi la regola vince davvero. Il cerchio bianco
   attorno all'icona (`background` + `border-radius: 100%` di WooCommerce)
   è rimosso con !important sul trigger. */
.woocommerce-product-gallery__trigger {
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	opacity: .8;
	text-decoration: none !important;
	transition: opacity .25s var(--mb-ease, cubic-bezier(.22,.61,.36,1));
}
.woocommerce-product-gallery__trigger:hover { opacity: 1; }
/* Cerchio della lente: da nero a oro-taupe. */
.woocommerce div.product div.images .woocommerce-product-gallery__trigger::before {
	border-color: var(--mb-taupe, #9A8C74) !important;
	background: transparent !important;
}
/* Manico della lente: da nero a oro-taupe. */
.woocommerce div.product div.images .woocommerce-product-gallery__trigger::after {
	background: var(--mb-taupe, #9A8C74) !important;
}

/* Richiesta cliente 26/08 (PDF punto 7 + follow-up). CONFERMATO dagli
   screenshot del cliente: il sistema è PhotoSwipe 4 (skin di default),
   non il <dialog> nativo come avevo tentato prima — riconoscibile da
   sfondo nero pieno, cluster pulsanti in alto a destra, frecce laterali
   circolari. Nomi di classe PhotoSwipe 4 standard, documentati e
   stabili. Sfondo bianco, icone/frecce/testo in oro-taupe (coerente col
   resto del sito) invece di bianco su nero. */
/* CAUSA REALE dei "cerchi outline", verificata sul DOM live il 27/08:
   i pulsanti di PhotoSwipe 4 sono <button> VUOTI (le icone sono uno
   sprite SVG bianco applicato come background-image). Due conseguenze:
   1) su sfondo bianco lo sprite bianco è invisibile;
   2) essendo <button> vuoti, ereditavano lo stile globale dei bottoni
      MIOBUK (pillola con bordo oro) — ecco i "cerchi outline".
   Richiesta cliente 27/08: nessun pulsante, solo i segni. Qui lo sprite
   viene rimosso, la cornice dei bottoni azzerata, e frecce/lente sono
   ridisegnate in CSS puro color oro. */
.pswp__bg {
	background: #fff !important; opacity: 1 !important;
}
.pswp__top-bar {
	background: transparent !important;
}
/* Azzera qualsiasi cornice di bottone ereditata dallo stile del sito. */
.pswp button,
.pswp .pswp__button {
	border: 0 !important;
	border-radius: 0 !important;
	background-color: transparent !important;
	box-shadow: none !important;
	outline: none !important;
	min-width: 0 !important;
	min-height: 0 !important;
	opacity: .85 !important;
	transition: opacity .25s var(--mb-ease, cubic-bezier(.22,.61,.36,1)) !important;
}
.pswp button:hover,
.pswp .pswp__button:hover { opacity: 1 !important; }
/* Via lo sprite bianco di PhotoSwipe da tutti i pulsanti. */
.pswp .pswp__button,
.pswp .pswp__button--arrow--left::before,
.pswp .pswp__button--arrow--right::before {
	background-image: none !important;
}
/* Contatore "1 / 2" in oro, stessa font-scale delle altre micro-scritte. */
.pswp__counter {
	color: var(--mb-taupe-deep, #7C6F59) !important;
	font-family: "boreal", sans-serif !important;
	font-size: 12px !important; letter-spacing: .1em !important;
	opacity: 1 !important;
}
/* Pulsanti non richiesti: schermo intero e condividi. */
.pswp__button--fs,
.pswp__button--share { display: none !important; }

/* Zoom: stesso segno "lente" della pagina prodotto, in oro, senza box. */
.pswp__button--zoom {
	position: relative;
	width: 44px !important; height: 44px !important;
}
.pswp__button--zoom::before {
	content: "";
	position: absolute; left: 50%; top: 50%;
	width: 12px; height: 12px; margin: -9px 0 0 -9px;
	border: 2px solid var(--mb-taupe, #9A8C74);
	border-radius: 100%;
}
.pswp__button--zoom::after {
	content: "";
	position: absolute; left: 50%; top: 50%;
	width: 2px; height: 8px; margin: 2px 0 0 3px;
	background: var(--mb-taupe, #9A8C74);
	border-radius: 2px;
	transform: rotate(-45deg);
}

/* Chiudi: solo la parola, in oro. Nessuna X, nessuna cornice. Essendo
   testo vero, TranslatePress lo traduce come il resto del sito. */
.pswp__button--close {
	width: auto !important; height: 44px !important;
	padding: 0 6px 0 20px !important;
	font-family: "boreal", sans-serif !important;
	font-size: 12px !important;
	text-transform: uppercase !important; letter-spacing: .1em !important;
	color: var(--mb-taupe-deep, #7C6F59) !important;
	line-height: 44px !important;
	white-space: nowrap;
}
.pswp__button--close::before { content: "Chiudi"; }

/* Frecce: solo i segni "<" e ">" in oro, disegnati in CSS puro. */
.pswp__button--arrow--left,
.pswp__button--arrow--right {
	background: none !important;
}
.pswp__button--arrow--left::before,
.pswp__button--arrow--right::before {
	content: "" !important;
	position: absolute;
	top: 50% !important; bottom: auto !important;
	width: 15px !important; height: 15px !important;
	margin: -8px 0 0 0 !important;
	background: none !important;
	box-shadow: none !important;
	border-style: solid;
	border-color: var(--mb-taupe, #9A8C74);
	transform: rotate(45deg);
}
.pswp__button--arrow--left::before {
	left: 26px !important; right: auto !important;
	border-width: 0 0 1.5px 1.5px;
}
.pswp__button--arrow--right::before {
	right: 26px !important; left: auto !important;
	border-width: 1.5px 1.5px 0 0;
}
.pswp__caption { display: none !important; }

/* Miniature della galleria in basso — PhotoSwipe 4 non le include di
   serie: qui il vassoio principali immagini prodotto (già presente
   sotto la foto grande) resta visibile e cliccabile anche a popup
   aperto, così l'utente può comunque passare da una foto all'altra
   senza affidarsi solo alle frecce. */
.mb-product-gallery-col .wc-block-product-gallery-thumbnails,
.mb-product-gallery-col .flex-control-thumbs {
	position: relative; z-index: 1;
}

/* (Qui c'era un secondo blocco duplicato per .woocommerce-product-gallery__trigger,
   rimosso il 27/08: ridichiarava le stesse proprietà più in basso nel file e
   rendeva impossibile capire quale regola vincesse davvero. La regola unica e
   canonica per la lente di zoom è sopra, dopo i thumbnail della galleria.) */


.mb-product-details-col { padding-left: 8px; }
/* Nome prodotto — vive SOLO in miobuk-global.css come "h1.mb-product-title"
   (specificità elemento+classe, deterministica). Non ridichiarare qui. */
.mb-product-sku {
	font-family: "boreal", sans-serif !important; font-size: var(--mb-fs-body, 14px) !important; letter-spacing: .06em !important;
	text-transform: uppercase !important; color: var(--mb-ink-soft, #6A6457) !important; margin: 0 0 14px;
}
.mb-product-price { margin-bottom: 18px; }
.mb-product-price .mb-price { font-size: var(--mb-fs-body, 14px) !important; }
.mb-product-excerpt,
.mb-product-excerpt p {
	font-family: "boreal", sans-serif !important;
	font-size: var(--mb-fs-body, 14px) !important; color: var(--mb-ink-soft, #6A6457) !important; line-height: 1.75;
	max-width: 46ch; margin-bottom: 24px;
}
/* Richiesta cliente 26/08 (PDF, punto 3): stepper orizzontale "− 1 +"
   nello stesso stile pill dei bottoni, sulla stessa riga di "Aggiungi al
   Carrello" (il form.cart è già flex — vedi riga ~21 in questo file).
   Markup dei pulsanti +/- iniettato via assets/js/miobuk-quantity.js. */
.mb-product-details-col .quantity,
form.cart .quantity {
	display: inline-flex; align-items: center; gap: 0;
	border: 1px solid var(--mb-taupe, #9A8C74); border-radius: 999px;
	overflow: hidden; height: 40px;
}
.mb-product-details-col .quantity input.qty,
form.cart .quantity input.qty {
	width: 40px; height: 100%; padding: 0; border: 0; background: transparent;
	font-family: "boreal", sans-serif !important; font-size: var(--mb-fs-body, 14px) !important; text-align: center;
	-moz-appearance: textfield;
}
.mb-product-details-col .quantity input.qty::-webkit-inner-spin-button,
.mb-product-details-col .quantity input.qty::-webkit-outer-spin-button,
form.cart .quantity input.qty::-webkit-inner-spin-button,
form.cart .quantity input.qty::-webkit-outer-spin-button {
	-webkit-appearance: none; margin: 0;
}
.mb-qty-btn {
	width: 34px; height: 100%; flex-shrink: 0; border: 0; border-radius: 0; background: transparent;
	color: var(--mb-taupe-deep, #7C6F59); font-family: "boreal", sans-serif; font-size: 16px; line-height: 1;
	cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
	transition: background .25s var(--mb-ease, cubic-bezier(.22,.61,.36,1));
}
.mb-qty-btn:hover { background: var(--mb-cream-2, #F6F5F1); }
/* Lineette verticali tra le tre sezioni, come nel riferimento del
   cliente (immagine "esempio" del PDF). */
.mb-qty-minus { border-right: 1px solid var(--mb-taupe-line, #C5B9A4) !important; }
.mb-qty-plus { border-left: 1px solid var(--mb-taupe-line, #C5B9A4) !important; }
form.cart {
	justify-content: flex-start !important;
}
.mb-shipping-note { margin: 20px 0; padding-top: 16px; border-top: 1px solid var(--mb-line, rgba(26,24,20,.12)); }
.mb-shipping-line, .mb-payment-line {
	font-family: "boreal", sans-serif !important; font-size: var(--mb-fs-body, 14px) !important; letter-spacing: .04em !important;
	color: var(--mb-ink-soft, #6A6457) !important; margin: 0 0 6px;
}
/* Express checkout — ANTEPRIMA, non funzionante */
.mb-express-row { margin-top: 16px; }
.mb-express-label {
	display: block; font-family: "boreal", sans-serif !important; font-size: var(--mb-fs-body, 14px) !important; letter-spacing: .08em !important;
	text-transform: uppercase !important; color: var(--mb-ink-soft, #6A6457) !important; opacity: .7; margin-bottom: 8px;
}
.mb-express-buttons { display: flex; gap: 10px; }
.mb-express-btn {
	flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	height: 42px; border-radius: 6px; font-family: "boreal", sans-serif !important; font-size: var(--mb-fs-body, 14px) !important;
	font-weight: var(--mb-fw-regular, 400) !important; letter-spacing: .02em; cursor: not-allowed; opacity: .92;
}
.mb-express-applepay { background: #000; color: #fff; }
.mb-express-paypal { background: #ffc439; color: #003087; }
.mb-product-meta {
	font-family: "boreal", sans-serif !important; font-size: var(--mb-fs-body, 14px) !important; color: var(--mb-ink-soft, #6A6457) !important;
	margin-top: 20px;
}
.mb-product-meta a { color: var(--mb-taupe, #9A8C74); text-decoration: none; }

.mb-product-actions-row {
	display: flex; align-items: center; flex-wrap: wrap; gap: 20px 28px; margin: 20px 0 8px;
}
.mb-wishlist-btn {
	display: inline-flex; align-items: center; gap: 8px; background: none; border: 0;
	cursor: pointer; padding: 0; font-family: "boreal", sans-serif !important; font-size: var(--mb-fs-body, 14px) !important;
	letter-spacing: .08em !important; text-transform: uppercase !important; color: var(--mb-ink-soft, #6A6457) !important;
	white-space: nowrap; flex-shrink: 0;
	transition: color .3s var(--mb-ease, cubic-bezier(.22,.61,.36,1));
}
.mb-wishlist-btn svg { width: 16px; height: 16px; flex-shrink: 0; stroke: currentColor; fill: none; transition: fill .3s, stroke .3s, transform .3s var(--mb-ease, cubic-bezier(.22,.61,.36,1)); }
.mb-wishlist-btn:hover, .mb-wishlist-btn.is-active { color: var(--mb-taupe-deep, #7C6F59) !important; }
.mb-wishlist-btn.is-active svg { fill: var(--mb-taupe, #9A8C74); stroke: var(--mb-taupe-deep, #7C6F59); }
/* Animazione "pop" al click: il cuore si ingrandisce e torna alla
   dimensione normale con un piccolo rimbalzo elastico. */
@keyframes mb-heart-pop {
	0% { transform: scale(1); }
	35% { transform: scale(1.35); }
	60% { transform: scale(0.92); }
	100% { transform: scale(1); }
}
.mb-wishlist-btn.mb-pop svg { animation: mb-heart-pop .5s cubic-bezier(.22,.61,.36,1); }

.mb-share-row { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.mb-share-row span {
	font-family: "boreal", sans-serif !important; font-size: var(--mb-fs-body, 14px) !important; letter-spacing: .08em !important;
	text-transform: uppercase !important; color: var(--mb-ink-soft, #6A6457) !important; white-space: nowrap;
}
.mb-share-row a {
	color: var(--mb-taupe, #9A8C74) !important; text-decoration: none; font-family: "boreal", sans-serif !important;
	font-size: var(--mb-fs-body, 14px) !important; letter-spacing: .04em !important; text-transform: uppercase !important; white-space: nowrap;
	transition: color .3s var(--mb-ease, cubic-bezier(.22,.61,.36,1));
}
.mb-share-row a:hover { color: var(--mb-taupe-deep, #7C6F59) !important; }
@media (max-width: 480px) {
	.mb-product-actions-row { gap: 14px 20px; }
}

/* Stelline recensioni — profilo oro */
.woocommerce div.product .star-rating,
.mb-product-tabs .star-rating,
.comment-form-rating .stars a {
	color: var(--mb-taupe, #9A8C74) !important;
}
.star-rating { overflow: hidden; position: relative; height: 1em; line-height: 1; width: 5.4em; font-family: star; }
.star-rating::before {
	content: "\53\53\53\53\53"; opacity: .35; float: left; top: 0; left: 0; position: absolute;
	color: var(--mb-taupe, #9A8C74);
}
.star-rating span { overflow: hidden; float: left; top: 0; left: 0; position: absolute; padding-top: 1.5em; }
.star-rating span::before {
	content: "\53\53\53\53\53"; top: 0; position: absolute; left: 0; color: var(--mb-taupe, #9A8C74);
}
.comment-form-rating .stars a { color: var(--mb-taupe-line, #C5B9A4) !important; }
.comment-form-rating .stars a:hover,
.comment-form-rating .stars a.active,
.comment-form-rating .stars a:hover ~ a { color: var(--mb-taupe, #9A8C74) !important; }
.woocommerce-Reviews .comment-text p { color: var(--mb-ink-soft, #6A6457) !important; }
.woocommerce-Reviews .comment_container { border-bottom: 1px solid var(--mb-line, rgba(26,24,20,.12)); padding-bottom: 20px; margin-bottom: 20px; }

/* Tabs descrizione/informazioni + Recensioni — tipografia uniforme,
   layout compatto (richiesta cliente: "troppo dispersiva"). */
.mb-product-tabs { margin-top: 40px; }
.mb-product-tabs ul.tabs { border-bottom: 1px solid var(--mb-line, rgba(26,24,20,.12)); margin-bottom: 20px; }
.mb-product-tabs ul.tabs li,
.mb-product-tabs ul.tabs li a {
	font-family: "boreal", sans-serif !important; font-weight: var(--mb-fw-light, 200) !important; text-transform: uppercase !important;
	letter-spacing: .1em !important; font-size: var(--mb-fs-body, 14px) !important; color: var(--mb-ink-soft, #6A6457) !important;
	background: none !important; border: 0 !important; box-shadow: none !important;
}
.mb-product-tabs ul.tabs li.active a { color: var(--mb-taupe-deep, #7C6F59) !important; }
.mb-product-tabs h2 {
	font-family: "boreal", sans-serif !important; font-weight: var(--mb-fw-light, 200) !important; text-transform: uppercase !important;
	letter-spacing: .06em !important; font-size: var(--mb-fs-body, 14px) !important; color: var(--mb-ink, #1A1814) !important;
	margin-bottom: 12px;
}
.mb-product-tabs .woocommerce-Tabs-panel p,
.mb-product-tabs .woocommerce-noreviews,
.mb-product-tabs .comment-text p {
	font-family: "boreal", sans-serif !important; font-size: var(--mb-fs-body, 14px) !important; line-height: 1.5;
	color: var(--mb-ink-soft, #6A6457) !important; font-weight: var(--mb-fw-regular, 400) !important; text-transform: none !important;
	margin-bottom: 10px;
}
.mb-product-tabs label,
.mb-product-tabs .comment-reply-title {
	font-family: "boreal", sans-serif !important; font-size: var(--mb-fs-body, 14px) !important; line-height: 1.4;
	color: var(--mb-ink-soft, #6A6457) !important; font-weight: var(--mb-fw-regular, 400) !important; text-transform: none !important;
}
.mb-product-tabs .comment-reply-title {
	letter-spacing: .02em; display: block; margin-bottom: 16px;
}
.mb-product-tabs .comment-form-rating label,
.mb-product-tabs .comment-form-comment label {
	text-transform: uppercase; letter-spacing: .06em;
	color: var(--mb-ink-soft, #6A6457) !important; display: block; margin-bottom: 8px;
}
.mb-product-tabs #commentform textarea {
	font-family: "boreal", sans-serif !important; font-size: var(--mb-fs-body, 14px) !important; border: 1px solid var(--mb-taupe-line, #C5B9A4);
	border-radius: 4px; padding: 12px; width: 100%;
}
.mb-product-tabs .meta strong { color: var(--mb-ink, #1A1814); font-weight: var(--mb-fw-regular, 400); }

/* Modulo commenti nativo WordPress — note privacy, Nome/Email, consenso
   cookie: elementi core non coperti dalle regole sopra, restavano col
   font di sistema di default nero/grassetto. */
.mb-product-tabs .comment-notes,
.mb-product-tabs .comment-form-cookies-consent,
.mb-product-tabs .comment-form-author,
.mb-product-tabs .comment-form-email {
	font-family: "boreal", sans-serif !important; font-size: var(--mb-fs-small, 12px) !important; font-weight: var(--mb-fw-regular, 400) !important;
	color: var(--mb-ink-soft, #6A6457) !important; text-transform: none !important;
	margin-bottom: 10px !important;
}
.mb-product-tabs .comment-notes span,
.mb-product-tabs #email-notes,
.mb-product-tabs .required-field-message,
.mb-product-tabs .required {
	font-family: "boreal", sans-serif !important; font-size: var(--mb-fs-small, 12px) !important; font-weight: var(--mb-fw-regular, 400) !important;
	color: var(--mb-ink-soft, #6A6457) !important; text-transform: none !important;
}
.mb-product-tabs .comment-form-cookies-consent label,
.mb-product-tabs .comment-form-author label,
.mb-product-tabs .comment-form-email label {
	font-family: "boreal", sans-serif !important; font-size: var(--mb-fs-small, 12px) !important; font-weight: var(--mb-fw-regular, 400) !important;
	color: var(--mb-ink-soft, #6A6457) !important; text-transform: none !important; display: inline;
}
.mb-product-tabs .comment-form-author input,
.mb-product-tabs .comment-form-email input {
	font-family: "boreal", sans-serif !important; font-size: var(--mb-fs-body, 14px) !important;
	border: 1px solid var(--mb-taupe-line, #C5B9A4); border-radius: 4px; padding: 10px 12px; width: 100%;
	color: var(--mb-ink, #1A1814) !important;
}

/* Related products — bridge classico (woocommerce_related_products(), via
   shortcode [miobuk_related_products]): markup ul.products/li.product,
   con i titoli renderizzati dal blocco dinamico miobuk/product-card-title. */
.mb-related-products h2,
.mb-related-products .wc-block-related-products__title {
	font-family: "boreal", sans-serif !important; font-weight: var(--mb-fw-light, 200) !important; text-transform: uppercase;
	letter-spacing: .04em; font-size: var(--mb-fs-body, 14px) !important; color: var(--mb-taupe-deep, #7C6F59) !important;
	text-align: center; margin: 56px 0 28px;
}
/* Richiesta cliente 26/08 (PDF, punto 5 + follow-up): prima allargate
   (troppo compresse), ora rimpicciolite di nuovo su richiesta esplicita
   — il cliente vuole card più piccole e discrete, come nel suo
   riferimento (copertine strette, molto spazio bianco attorno). */
.mb-related-products { max-width: 1180px; margin-left: auto; margin-right: auto; padding: 0 24px; }

/* ═══════════════════════════════════════════════════════════════════════
   SCHEDA PRODOTTO — impianto del 27/08, su riferimento fornito dal cliente
   (pagina prodotto Patek Philippe). Lettura dall'alto: descrizione breve
   centrata, poi la foto grande con le miniature di lato e i dati
   d'acquisto appoggiati a sinistra, come nel riferimento.
   La fascia col titolo di pagina non c'e' piu': il nome del prodotto e'
   l'H1 dentro il blocco dati, quindi resta una sola H1 in pagina.
   ═══════════════════════════════════════════════════════════════════════ */
.mb-product-page {
	padding-top: calc(var(--mb-header-h, 72px) + 64px);
}
/* Su desktop la scheda prodotto e' a tutta larghezza. Il markup della
   sidebar resta perche' sotto i 781px quella stessa sidebar e' il
   pannello a scomparsa che si apre dalla linguetta MENU. */
/* 27/08 — La colonna filtri non occupa piu' spazio nella scheda prodotto
   (la pagina resta a tutta larghezza), ma NON sparisce: diventa lo stesso
   pannello a scomparsa del mobile, richiamabile dalla linguetta MENU, che
   ora e' visibile anche su desktop. Prima era semplicemente nascosta: da
   una scheda prodotto non c'era piu' modo di tornare alle collezioni. */
@media (min-width: 782px) {
	.mb-product-page .mb-product-content-col { flex-basis: 100% !important; }
	.mb-product-page label.mb-filter-tab { display: block !important; }
	.mb-product-page .mb-shop-sidebar {
		position: fixed; top: calc(var(--mb-header-h, 72px) + 6px); left: 0;
		height: calc(100vh - var(--mb-header-h, 72px) - 6px);
		width: 340px; max-width: 86vw;
		background: #fff; z-index: 39; overflow-y: auto;
		padding: 22px 28px 40px !important;
		border-right: none; box-shadow: 0 0 60px rgba(20,18,14,.16);
		transform: translateX(-100%);
		transition: transform .5s var(--mb-ease, cubic-bezier(.22,.61,.36,1));
		flex-basis: 0 !important; flex-grow: 0 !important;
	}
	.mb-product-page .mb-filter-toggle-input:checked ~ .mb-shop-layout .mb-shop-sidebar { transform: translateX(0) !important; }
	.mb-product-page .mb-filter-toggle-input:checked ~ .mb-filter-scrim { display: block; opacity: 1; visibility: visible; }
	body.mb-filters-open .mb-product-page .mb-shop-sidebar { transform: translateX(0) !important; }
	body.mb-filters-open .mb-product-page .mb-filter-scrim { display: block; opacity: 1; visibility: visible; }
}
/* Prezzo: selettore rafforzato — il peso 400 arrivava da una regola con
   specificita' pari alla precedente, quindi non veniva mai sostituito. */
body .mb-product-page .mb-product-price .mb-price,
body .mb-product-page .mb-product-price span,
body .mb-product-page .mb-product-price bdi {
	font-weight: 200 !important;
	font-size: 20px !important;
	color: var(--mb-taupe-deep, #7C6F59) !important;
}

/* Descrizione breve: centrata, misura di lettura stretta, massimo 5 righe
   (richiesta cliente: "tagliare la descrizione breve a 4/5 righe"). */
/* Il margine sotto la descrizione breve va dichiarato !important: il
   layout a blocchi di WordPress impone il proprio "blockGap" agli
   elementi fratelli e altrimenti lo azzera. */
/* WooPayments inserisce in cima alla descrizione breve un contenitore vuoto
   (#payment-method-message) che riempie via JavaScript con la frase
   promozionale "paga a rate con Klarna". Non e' nostro e non si toglie dal
   tema: si nasconde qui, e SOLO qui, cioe' dentro l'apertura della scheda
   prodotto. Carrello e checkout non sono toccati. Per rimetterla, cancellare
   questo blocco. */
.mb-pd-intro #payment-method-message {
	display: none !important;
}
.mb-pd-intro {
	max-width: 720px;
	margin: 0 auto clamp(64px, 8vw, 112px) !important;
	text-align: center;
}
.mb-pd-excerpt,
.mb-pd-excerpt 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;
	text-align: center !important;
	margin: 0 auto !important;
}
.mb-pd-excerpt p {
	display: -webkit-box;
	-webkit-line-clamp: 5;
	line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.mb-pd-excerpt .wp-block-post-excerpt__more-text { display: none !important; }

/* Palco centrale: dati a sinistra, foto al centro, miniature a destra. */
.mb-product-page .mb-product-main {
	display: grid !important;
	grid-template-columns: minmax(190px, 1fr) minmax(0, 2.15fr);
	align-items: center !important;
	gap: clamp(24px, 4vw, 64px) !important;
	max-width: 1240px; margin: 0 auto !important;
}
.mb-product-page .mb-product-main > .wp-block-column { flex-basis: auto !important; }
.mb-product-page .mb-product-details-col { padding-left: 0 !important; text-align: left !important; }

/* ── Colonna dati e sezioni informative — revisione 27/08 ──────────────
   Richieste del cliente: un solo colore (oro) per tutti i testi, nessun
   grassetto, blocco molto piu' compatto; titoli "Descrizione" e
   "Specifiche tecniche" al doppio della dimensione; paragrafi con
   interlinea normale invece che quasi doppia. */
.mb-product-page .mb-product-details-col,
.mb-product-page .mb-product-details-col *,
.mb-product-page .mb-product-details-col a,
.mb-product-page .mb-product-details-col button {
	color: var(--mb-taupe-deep, #7C6F59) !important;
	font-weight: 200 !important;
}
.mb-product-page .mb-product-details-col .mb-pc-collection { margin: 0 0 2px !important; line-height: 1.3 !important; }
.mb-product-page .mb-product-title { margin: 0 0 6px !important; line-height: 1.04 !important; }
.mb-product-page .mb-product-price { margin: 0 0 10px !important; line-height: 1.2 !important; }
.mb-product-page .mb-product-details-col .stock { margin: 0 0 14px !important; line-height: 1.3 !important; }
.mb-product-page form.cart .quantity { margin: 0 0 14px !important; }
.mb-product-page .mb-wishlist-btn { margin-top: 14px !important; }

/* Titoli delle sezioni informative al doppio della dimensione (erano 11px). */
.mb-product-info-sections .mb-info-toggle,
.mb-product-info-sections h2,
.mb-product-info-sections h3 {
	font-size: 22px !important;
	letter-spacing: .1em !important;
	color: var(--mb-taupe-deep, #7C6F59) !important;
	font-weight: 200 !important;
	line-height: 1.2 !important;
}
/* Testo delle sezioni: interlinea normale, paragrafi ravvicinati. */
.mb-product-info-sections p,
.mb-product-info-sections li,
.mb-product-info-sections td,
.mb-product-info-sections th,
.mb-product-info-sections div {
	line-height: 1.45 !important;
}
.mb-product-info-sections p {
	margin-top: 0 !important;
	margin-bottom: 10px !important;
}

/* Colonna dati — revisione 27/08 su indicazione del cliente:
   tutto a bandiera a sinistra, stessa famiglia di caratteri, nessun
   grassetto, e nome + prezzo piu' leggibili di prima. */
.mb-product-page .mb-product-title {
	font-size: clamp(26px, 2.6vw, 38px) !important;
	line-height: 1.12 !important;
	font-weight: var(--mb-fw-light, 200) !important;
	color: var(--mb-taupe-deep, #7C6F59) !important;
	margin: 4px 0 14px !important;
	text-align: left !important;
}
.mb-product-page .mb-product-price,
.mb-product-page .mb-product-price *,
.mb-product-page .mb-product-price .mb-price,
.mb-product-page .mb-product-price .woocommerce-Price-amount,
.mb-product-page .mb-product-price bdi {
	font-family: "boreal", sans-serif !important;
	font-size: 20px !important;
	/* 27/08 — peso dichiarato con un valore esplicito e non con la
	   variabile: il prezzo risultava piu' pesante del nome del prodotto
	   pur avendo la stessa regola nominale. */
	font-weight: 200 !important;
	letter-spacing: .02em !important;
	color: var(--mb-taupe-deep, #7C6F59) !important;
	text-align: left !important;
}
.mb-product-page .mb-product-price { margin: 0 0 26px !important; }

/* Selettore quantita': via la pillola attorno a "− 1 +". Resta un segno
   essenziale, una sola linea sotto, allineato a sinistra come il resto
   della colonna. Prima il form era in fila e portava il selettore 24px
   piu' a destra del testo: da qui l'allineamento sbilenco. */
.mb-product-page form.cart { display: block !important; }

/* ============================================================
   "LIMITED EDITION" — riga di testo sopra il nome della collezione
   ============================================================
   Nata come fascia sovrapposta alla foto, è diventata una riga di testo su
   scelta del cliente: la sovrapposizione copriva il prodotto e con le
   fotografie definitive avrebbe nascosto proprio il taglio pagina, che è
   l'elemento da mostrare.

   Resta comunque l'informazione che determina l'acquisto su un pezzo da
   collezione, quindi ha un peso tipografico maggiore di tutto ciò che le
   sta attorno: corpo più grande della riga collezione, peso 500 (l'unica
   eccezione al peso 200 del sito) e spaziatura ampia.

   La dicitura è in inglese in ogni lingua, marcata data-no-translation:
   corrisponde al timbro impresso sui taccuini, "LIMITED EDITION 001/500". */

span.mb-limited-wrap {
	position: relative;
	display: block;
}

span.mb-limited-band {
	display: block !important;
	margin: 14px 0 4px !important;
	padding: 0 !important;
	background: none !important;
	color: var(--mb-taupe-deep, #7C6F59) !important;
	font-family: "boreal", sans-serif !important;
	font-weight: 700 !important;
	font-size: 16px !important;
	letter-spacing: .26em !important;
	text-transform: uppercase !important;
	text-align: center !important;
	line-height: 1.2 !important;
	text-indent: .26em !important;   /* compensa la spaziatura sull'ultima lettera */
}

@media (max-width: 600px) {
	span.mb-limited-band {
		font-size: 13px !important;
		letter-spacing: .20em !important;
		text-indent: .20em !important;
	}
}

/* 01/09 — PRODOTTI CON VARIANTI (MIOBUK Ring™).
   Nel prodotto semplice quantita' e pulsante stanno su due righe perche' il
   form e' a blocco. Nel prodotto con varianti pero' i due elementi vivono
   dentro un contenitore in piu', .woocommerce-variation-add-to-cart, che
   WooCommerce dispone in riga: il pulsante finiva accanto al selettore
   invece che sotto. La regola sopra non lo raggiungeva. */
.mb-product-page .woocommerce-variation-add-to-cart {
	display: block !important;
}
.mb-product-page .woocommerce-variation-add-to-cart .quantity {
	display: block !important;
	float: none !important;
	margin: 0 0 18px 0 !important;
}
.mb-product-page .woocommerce-variation-add-to-cart button.single_add_to_cart_button {
	display: inline-block !important;
	float: none !important;
	margin-left: 0 !important;
}
/* La riga "80 disponibili" sta fra le pastiglie e il selettore: le va dato
   respiro, altrimenti sembra un'etichetta del selettore quantita'. */
.mb-product-page .woocommerce-variation-availability p.stock {
	margin: 16px 0 18px !important;
	font-size: 12px !important;
	color: var(--mb-ink-soft, #6A6457) !important;
}
/* Quantita' e pulsante su due righe distinte, entrambi allineati al
   margine sinistro della colonna: con il form a blocco erano finiti
   sulla stessa riga, con il pulsante spinto a meta' colonna. */
/* "Aggiungi al carrello" — revisione 27/08 su indicazione del cliente:
   niente pillola, solo la scritta con una riga sotto, come il selettore
   quantita'. Al passaggio del mouse la riga si ispessisce, il colore si
   approfondisce e le lettere si distanziano appena: la scritta "cresce"
   senza scatti e senza far muovere quello che le sta intorno.
   Nota: la pillola arriva dalla regola globale dei bottoni in
   miobuk-global.css, che usa !important e una specificita' altissima —
   per questo il pulsante e' stato escluso li' con :not(), come gia' fatto
   per il menu, le frecce del lightbox e i pulsanti quantita'. */
.mb-product-page form.cart button.single_add_to_cart_button,
.mb-product-page form.cart .single_add_to_cart_button,
body .add_to_cart_button,
body .add_to_cart_button.wp-element-button,
body .add_to_cart_button.wc-block-components-product-button__button,
body .cross-sells .add_to_cart_button,
body .up-sells .add_to_cart_button,
body .wc-block-cart__submit-button.wc-block-components-button,
body .wc-block-cart__submit-button.wp-element-button,
body .wc-block-components-checkout-place-order-button.wc-block-components-button,
body .wc-block-components-checkout-place-order-button.wp-element-button,
body .wc-proceed-to-checkout a.checkout-button,
body a.checkout-button.button {
	display: inline-block !important;
	margin: 0 !important;
	width: -moz-fit-content !important; width: fit-content !important;
	background: transparent !important;
	border: 0 !important;
	border-bottom: 1px solid var(--mb-taupe-line, #C5B9A4) !important;
	border-radius: 0 !important;
	padding: 0 0 9px !important;
	font-family: "boreal", sans-serif !important;
	font-size: var(--mb-fs-button, 10px) !important;
	font-weight: var(--mb-fw-regular, 400) !important;
	text-transform: uppercase !important;
	letter-spacing: .14em !important;
	color: var(--mb-taupe, #9A8C74) !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: letter-spacing .45s var(--mb-ease, cubic-bezier(.22,.61,.36,1)),
	            color .45s var(--mb-ease, cubic-bezier(.22,.61,.36,1)),
	            border-color .45s var(--mb-ease, cubic-bezier(.22,.61,.36,1)),
	            border-bottom-width .45s var(--mb-ease, cubic-bezier(.22,.61,.36,1)) !important;
}
.mb-product-page form.cart button.single_add_to_cart_button:hover,
.mb-product-page form.cart .single_add_to_cart_button:hover,
.mb-product-page form.cart button.single_add_to_cart_button:focus-visible,
body .add_to_cart_button:hover,
body .add_to_cart_button.wp-element-button:hover,
body .add_to_cart_button.wc-block-components-product-button__button:hover,
body .cross-sells .add_to_cart_button:hover,
body .up-sells .add_to_cart_button:hover,
body .wc-block-cart__submit-button.wc-block-components-button:hover,
body .wc-block-cart__submit-button.wp-element-button:hover,
body .wc-block-components-checkout-place-order-button.wc-block-components-button:hover,
body .wc-block-components-checkout-place-order-button.wp-element-button:hover,
body .wc-proceed-to-checkout a.checkout-button:hover,
body a.checkout-button.button:hover {
	color: var(--mb-taupe-deep, #7C6F59) !important;
	border-bottom-width: 1.5px !important;
	border-bottom-color: var(--mb-taupe-deep, #7C6F59) !important;
	background: transparent !important;
	transform: none !important;
}
.mb-product-page .mb-product-details-col .quantity,
.mb-product-page form.cart .quantity {
	display: flex !important;
	/* WooCommerce fa "float: left" sul selettore quantita': senza toglierlo
	   il pulsante, pur essendo a blocco, gli si affianca invece di andare
	   a capo — era questa la causa del pulsante spostato a meta' colonna. */
	float: none !important; clear: both !important;
	width: -moz-fit-content !important; width: fit-content !important;
	border: 0 !important; border-radius: 0 !important;
	border-bottom: 1px solid var(--mb-taupe-line, #C5B9A4) !important;
	height: auto !important; overflow: visible !important;
	margin: 0 0 22px !important; padding: 0 !important;
}
.mb-product-page .mb-qty-btn {
	width: 28px !important; height: 34px !important;
	border: 0 !important; background: transparent !important;
}
.mb-product-page .mb-qty-minus,
.mb-product-page .mb-qty-plus { border: 0 !important; }
.mb-product-page .mb-product-details-col .quantity input.qty,
.mb-product-page form.cart .quantity input.qty {
	width: 42px !important; height: 34px !important; font-size: 15px !important;
}

/* Dettagli tecnici: fondo chiarissimo, cosi' la zona del prodotto qui
   sopra (bianca) si stacca e resta la protagonista della pagina. */
/* Selettore quantita' di carrello e checkout: stesso segno essenziale
   della scheda prodotto, nessun riquadro, solo la riga sotto.
   WooCommerce Blocks disegna quel rettangolo con un box-shadow interno e
   non con un bordo: spegnere solo "border" non basta, resta il riquadro. */
body .wc-block-components-quantity-selector {
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	border-bottom: 1px solid var(--mb-taupe-line, #C5B9A4) !important;
	width: auto !important; min-width: 0 !important;
}
body .wc-block-components-quantity-selector::before,
body .wc-block-components-quantity-selector::after {
	content: none !important; box-shadow: none !important; border: 0 !important;
}
body .wc-block-components-quantity-selector__button {
	border: 0 !important; background: transparent !important;
	color: var(--mb-taupe-deep, #7C6F59) !important;
	font-family: "boreal", sans-serif !important;
}
body .wc-block-components-quantity-selector__input {
	border: 0 !important; background: transparent !important;
	font-family: "boreal", sans-serif !important;
	color: var(--mb-ink-soft, #6A6457) !important;
}

/* La fascia deve attraversare TUTTA la pagina, da bordo a bordo, non
   fermarsi alla colonna del contenuto: i margini negativi la portano
   fuori dal contenitore fino ai lati della finestra, e il padding
   interno riporta il testo sulla stessa colonna di lettura di sopra. */
.mb-product-page .mb-product-info-sections,
.mb-cart-checkout-page .mb-product-info-sections {
	background: var(--mb-cream-2, #F6F5F1) !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	width: auto !important; max-width: none !important;
	padding: clamp(36px, 4.5vw, 64px) max(24px, calc(50vw - 620px)) clamp(40px, 5vw, 72px) !important;
	margin-top: clamp(48px, 6vw, 84px) !important;
}

/* La galleria WooCommerce viene divisa in due: foto grande a sinistra e
   colonna verticale delle miniature alla sua destra. */
/* !important obbligatorio: WooCommerce dichiara la galleria a colonna
   singola con un selettore piu' specifico del nostro
   (.woocommerce div.product .woocommerce-product-gallery). */
.mb-product-page .mb-product-gallery-col .woocommerce-product-gallery {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) auto !important;
	gap: 18px !important; max-width: none !important; margin: 0 !important;
	align-items: start !important;
}
.mb-product-page .mb-product-gallery-col .flex-viewport,
.mb-product-page .mb-product-gallery-col .woocommerce-product-gallery__wrapper {
	grid-column: 1; grid-row: 1;
}
/* Anche qui !important: piu' su nel file le miniature sono dichiarate
   "flex-direction: row !important" per il layout precedente.

   04/09/2026, secondo tentativo. Il primo usava un flex a colonna con
   incolonnamento vincolato da "height: 100%": non funziona, perche'
   dentro una cella di griglia dimensionata dal contenuto la percentuale
   non ha un riferimento e le miniature tornavano in colonna unica.

   Ora e' una griglia a DUE COLONNE fisse da 88px, con un tetto di otto
   miniature imposto lato PHP (inc/miobuk-set-gallery.php): quattro
   righe, circa 380px, piu' basse della fotografia. Due colonne e non
   tre perche' il blocco miniature sottrae larghezza alla foto grande:
   186px invece di 284px restituiscono un centinaio di pixel allo
   scatto principale, che e' l'elemento che vende.

   La larghezza (186px) e' calcolata: 2 x 88px + 10px di scarto.
   Cambiando il numero di colonne va aggiornata anche li'. */
.mb-product-page .mb-product-gallery-col .flex-control-thumbs {
	grid-column: 2; grid-row: 1; align-self: start !important;
	display: grid !important;
	grid-template-columns: repeat(2, 88px) !important;
	grid-auto-flow: row !important;
	gap: 10px !important;
	height: auto !important;
	margin: 0 !important; padding: 0 !important; list-style: none !important;
	width: 186px !important; max-width: 186px !important;
}
.mb-product-page .mb-product-gallery-col .flex-control-thumbs li {
	width: 88px !important; flex: 0 0 auto !important;
	margin: 0 !important; float: none !important;
}

/* 07/09/2026 — Miniature non attive.
   WooCommerce le serve a opacita' ridotta su fondo neutro, e il
   risultato era un grigio scuro fuori palette. Ora il riquadro ha un
   fondo oro chiarissimo e l'immagine vi si posa sopra in trasparenza:
   la miniatura non selezionata resta leggibile ma arretra, e quella
   attiva torna piena. Sostituisce il grigio senza toccare le immagini.
   !important obbligatorio: la regola di WooCommerce e' piu' specifica. */
.mb-product-gallery-col .flex-control-thumbs li {
	background: #F5F1E8 !important;
	border-radius: 3px !important;
	overflow: hidden !important;
}
.mb-product-gallery-col .flex-control-thumbs img {
	opacity: .55 !important;
	transition: opacity .3s var(--mb-ease, cubic-bezier(.22,.61,.36,1)),
	            border-color .3s var(--mb-ease, cubic-bezier(.22,.61,.36,1)) !important;
}
.mb-product-gallery-col .flex-control-thumbs img:hover,
.mb-product-gallery-col .flex-control-thumbs img.flex-active {
	opacity: 1 !important;
}

/* Lente di zoom: in alto a destra SOPRA la foto (scelta del cliente del
   27/08 — sotto, centrata, non convinceva). Sta nella stessa cella di
   griglia della foto e vi si sovrappone all'angolo, quindi resta dentro
   l'immagine e non sopra la colonna delle miniature.
   NB: "relative" e non "static" — i due pseudo-elementi che disegnano la
   lente sono posizionati in assoluto rispetto a questo elemento, con
   "static" andrebbero a incollarsi al primo antenato posizionato. */
.mb-product-page .mb-product-gallery-col .woocommerce-product-gallery__trigger {
	position: relative !important;
	grid-column: 1; grid-row: 1;
	justify-self: end; align-self: start; z-index: 3;
	top: auto !important; right: auto !important; left: auto !important; bottom: auto !important;
	margin: 10px 10px 0 0 !important;
	width: 36px !important; height: 36px !important;
}

/* Mobile: tutto impilato, con l'ordine chiesto dal cliente —
   descrizione breve, poi foto, poi dati e acquisto. */
@media (max-width: 781px) {
	.mb-product-page .mb-product-main { grid-template-columns: 1fr; }
	.mb-product-page .mb-product-gallery-col { order: 1; }
	.mb-product-page .mb-product-details-col { order: 2; text-align: center; }
	.mb-product-page .mb-product-details-col .mb-product-price,
	.mb-product-page .mb-product-details-col form.cart { justify-content: center; }
	.mb-product-page .mb-product-gallery-col .woocommerce-product-gallery {
		grid-template-columns: 1fr !important;
	}
	.mb-product-page .mb-product-gallery-col .flex-control-thumbs {
		grid-column: 1; grid-row: 2; width: auto !important;
		height: auto !important; align-self: auto !important;
		max-width: none !important;
		display: flex !important;
		flex-flow: row wrap !important; align-content: flex-start !important;
		justify-content: center;
	}
	.mb-product-page .mb-product-gallery-col .flex-control-thumbs li { width: 68px !important; }
	/* Su telefono la foto deve occupare tutta la colonna: flexslider le
	   assegna una larghezza propria che altrimenti la lascia piccola e
	   spostata a sinistra. */
	.mb-product-page .mb-product-gallery-col .flex-viewport,
	.mb-product-page .mb-product-gallery-col .woocommerce-product-gallery__wrapper,
	.mb-product-page .mb-product-gallery-col .woocommerce-product-gallery__image,
	.mb-product-page .mb-product-gallery-col .woocommerce-product-gallery__image img {
		width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important;
	}
	.mb-product-page .mb-product-gallery-col .woocommerce-product-gallery__trigger {
		grid-column: 1; grid-row: 3;
	}
}
/* Prima era flex + justify-content:center: con 4 elementi (non multiplo
   di 3), il 4° finiva da solo centrato sotto la riga — un effetto strano,
   diverso da come si legge normalmente una griglia. Griglia vera, come
   nello Shop: l'elemento avanzato va semplicemente a sinistra della riga
   successiva, senza essere "orfano" al centro. */
.mb-related-products ul.products,
.mb-related-products ul.products.columns-4 {
	display: grid !important; grid-template-columns: repeat(3, 200px) !important;
	justify-content: center !important;
	gap: 2.5rem 2rem !important; list-style: none !important; padding: 0 !important;
}
/* 27/08 — Stessa scala della griglia Shop: su telefono una colonna sola,
   su tablet stretto due. Il numero di colonne viene comunque riscritto a
   runtime da miobuk-quantity.js (stile inline, che vince su qualunque
   foglio di stile): queste regole restano allineate a quella logica come
   riserva, se lo script non parte. */
@media (max-width: 600px) {
	.mb-related-products ul.products,
	.mb-related-products ul.products.columns-4,
	.cross-sells ul.products,
	.up-sells ul.products {
		grid-template-columns: min(320px, 86vw) !important;
		gap: 2rem 0 !important;
	}
}
@media (min-width: 601px) and (max-width: 900px) {
	.mb-related-products ul.products,
	.mb-related-products ul.products.columns-4,
	.cross-sells ul.products,
	.up-sells ul.products {
		grid-template-columns: repeat(2, 200px) !important;
	}
}
/* CAUSA REALE trovata il 26/08 con DevTools (grazie a uno screenshot col
   Grid Inspector del browser): WooCommerce inserisce un elemento
   ::before invisibile (clearfix, content:" "; display:table;) come
   primo figlio della lista — essendo la lista una griglia, quel
   pseudo-elemento DIVENTA un vero elemento della griglia e occupa la
   prima colonna, spingendo i prodotti veri indietro di una posizione.
   Nessun !important sui prodotti poteva risolverlo: il problema non era
   sui prodotti, era su questo elemento fantasma mai notato prima. */
.mb-related-products ul.products::before,
.mb-related-products ul.products::after,
.mb-related-products ul.products.columns-4::before,
.mb-related-products ul.products.columns-4::after {
	display: none !important; content: none !important;
}
.mb-related-products ul.products li.product,
.mb-related-products ul.products.columns-4 li.product {
	display: flex !important; flex-direction: column; align-items: center;
	width: 200px !important; max-width: 200px !important; text-align: center;
	float: none !important; margin-right: 0 !important; margin-left: 0 !important;
}
.mb-related-products ul.products li.product > a.woocommerce-LoopProduct-link { display: block; width: 100%; }
.mb-related-products ul.products li.product .mb-pc-title { order: 2; margin: 12px 0 4px; }
.mb-related-products ul.products li.product .price,
.mb-related-products ul.products li.product .mb-price { order: 3; display: block; margin-top: 6px; }
.mb-related-products ul.products li.product a.button {
	order: 4; margin-top: 12px; white-space: nowrap;
}
/* Qui, a differenza della griglia Shop/Home, il nome NON va troncato con
   ellissi (richiesta cliente 26/08): con colonne più larghe (sopra) il
   testo va a capo in modo naturale invece di tagliarsi a metà parola. */
.mb-related-products ul.products li.product .mb-pc-collection,
.mb-related-products ul.products li.product .mb-pc-name {
	white-space: normal !important; overflow: visible !important; text-overflow: clip !important;
}
.mb-related-products ul.products li.product img {
	width: 100%; height: auto; display: block;
	border-radius: 2px; aspect-ratio: 3/4; object-fit: cover;
}
.mb-related-products ul.products li.product h2,
.mb-related-products ul.products li.product .woocommerce-loop-product__title {
	font-family: "boreal", sans-serif !important; font-weight: var(--mb-fw-light, 200) !important; text-transform: uppercase !important;
	font-size: var(--mb-fs-product-title, 20px) !important; letter-spacing: .04em; color: var(--mb-taupe-deep, #7C6F59) !important; margin: 10px 0 4px;
}
.mb-related-products ul.products li.product .mb-pc-name {
	/* Dimensione/colore/peso già universali (.mb-pc-name in
	   miobuk-global.css). Qui SOLO il comportamento diverso: i titoli
	   correlati vanno a capo invece di troncare con ellipsis. */
	white-space: normal !important;
	margin: 10px 0 4px;
}
.mb-related-products ul.products li.product .price,
.mb-related-products ul.products li.product .mb-price {
	font-family: "boreal", sans-serif !important; color: var(--mb-taupe-deep, #7C6F59); font-size: var(--mb-fs-body, 14px) !important;
}

/* Ghost — foto prodotto reali (aggiornate 13 Jul, sostituiscono il
   placeholder logo). Stesso trattamento immagine di ogni altro prodotto:
   nessun padding/contain speciale. */
/* Titolo sezione cross-sell — stessa dimensione di "YOU ALSO LIKE THESE"
   (correlati): un'unica identità visiva per entrambe le sezioni. */
.mb-cross-sell-block 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-body, 14px) !important; color: var(--mb-taupe-deep, #7C6F59) !important;
	text-align: center; margin: 56px 0 28px;
}
/* Card cross-sell — foto prodotto vere (aggiornate 13 Jul): stesso
   trattamento immagine delle altre card, mai più "contain" con padding
   (quello era solo per il vecchio logo placeholder). */
@media (max-width: 900px) {
	.mb-product-main { flex-wrap: wrap !important; }
	.mb-product-gallery-col, .mb-product-details-col { flex-basis: 100% !important; }
}

/* ===== Cart & Checkout (WooCommerce Blocks) =====
   Prima: .mb-cart-checkout-page era limitato a 1180px, e l'hero dentro
   cercava di "sfondare" a piena larghezza con il trucco width:100vw +
   left:50% + transform — ma quel trucco funziona solo se il calcolo del
   50% avviene rispetto alla pagina intera, non rispetto a un genitore
   già stretto: risultato, banda sbilanciata e non a piena larghezza.
   Soluzione più semplice e robusta: il contenitore esterno NON ha più
   nessun limite di larghezza (così hero e sfondo sono naturalmente a
   piena pagina, senza bisogno di alcun trucco) — il limite di 1180px si
   sposta SOLO sul blocco funzionale di carrello/checkout, che è quello
   che deve restare leggibile e centrato. */
.mb-cart-checkout-page { padding: 0; }

/* 28/08 — MISURATO nell'ispettore a 360px di larghezza: il blocco
   carrello/checkout risultava 348px di larghezza con margine sinistro 0
   e margine destro -48px. Un margine negativo su UN SOLO lato: il blocco
   partiva rientrato da sinistra e sbordava a destra, ed e' il vero
   motivo per cui su telefono tutta la colonna sembrava spostata.
   L'asimmetria non nasce da noi — nessuna regola del tema tocca quei
   margini. WordPress applica margini negativi ai blocchi marcati
   "alignwide" per fargli sfondare il padding della pagina, ma i due lati
   finiscono governati da regole diverse e non si compensano.
   Qui si impone la simmetria: margini automatici su entrambi i lati,
   quindi blocco centrato dentro la colonna di lettura. Su schermi larghi
   non cambia nulla (era gia' centrato, misurato 1388px in una finestra
   da 2037px); su telefono il blocco diventa leggermente piu' stretto ma
   finalmente equidistante dai due bordi.
   ATTENZIONE: non sostituire questi "auto" con valori calcolati. E'
   proprio il calcolo a due lati indipendenti ad aver creato il problema. */
.mb-cart-checkout-page .entry-content > .wp-block-woocommerce-cart,
.mb-cart-checkout-page .entry-content > .wp-block-woocommerce-checkout {
	margin-left: auto !important;
	margin-right: auto !important;
}
.mb-cart-checkout-page > .entry-content.wp-block-post-content {
	max-width: none !important; width: 100%;
}
/* 27/08 — CAUSA REALE della testata non a piena larghezza, misurata sulla
   pagina live: l'hero risultava largo 645px dentro un contenitore da
   988px. Non era il contenitore ad essere stretto (quello era gia' stato
   liberato), ma il "layout vincolato" di WordPress, che impone a OGNI
   figlio diretto del contenuto la larghezza di lettura standard
   (--wp--style--global--content-size) a meno che il blocco non sia
   marcato come "a tutta larghezza". Il blocco carrello sfugge al limite
   perche' e' marcato "alignwide"; l'hero no, ed e' per questo che le due
   correzioni precedenti — entrambe sul contenitore — non potevano
   funzionare: agivano sull'elemento sbagliato.
   Qui l'hero viene portato da bordo a bordo con margini negativi
   calcolati sulla finestra, e il padding interno riporta il titolo sulla
   stessa colonna di lettura del resto della pagina. */
.mb-cart-checkout-page .entry-content > .mb-shop-hero,
.mb-cart-checkout-page .mb-shop-hero {
	text-align: center;
	max-width: none !important;
	width: auto !important;
	/* I margini negativi valgono esattamente il padding laterale del sito,
	   NON "meta' finestra": con le unita' vw la barra di scorrimento non
	   viene contata e la fascia risulta spostata di qualche pixel a
	   sinistra, con il titolo fuori asse. Cosi' invece la fascia riempie
	   il contenitore di pagina al pixel, e resta simmetrica. */
	margin-left: calc(-1 * var(--wp--style--root--padding-left, 24px)) !important;
	margin-right: calc(-1 * var(--wp--style--root--padding-right, 24px)) !important;
	padding-left: max(24px, calc(50% - 590px)) !important;
	padding-right: max(24px, calc(50% - 590px)) !important;
}
/* 28/08 — Totale di riga nascosto nel carrello, su richiesta.
   WooCommerce mostra due prezzi per articolo: il totale di riga a destra
   del nome (prezzo x quantita') e il prezzo unitario sotto. Con quantita'
   1 sono lo stesso numero ripetuto due volte, e su un catalogo di pezzi
   da collezione la quantita' multipla e' l'eccezione.
   Resta il prezzo UNITARIO, che e' il dato che serve; il totale per
   articolo si legge comunque nel SUBTOTALE poco sotto, quindi non si
   perde nessuna informazione.
   Si nasconde anche l'intestazione "Totale" della colonna, altrimenti
   resterebbe un titolo senza niente sotto. */
.wc-block-cart-items__header-total,
.wc-block-cart-item__total {
	display: none !important;
}

/* 28/08 — box-sizing OBBLIGATORIO qui. Senza, i 24px di padding per lato
   si SOMMANO alla larghezza invece di starci dentro: il blocco diventa
   48px piu' largo del contenitore, e il margine automatico assorbe lo
   sfondamento diventando NEGATIVO (-48px). Misurato a 375px di larghezza:
   contenitore 300, blocco 348, margin-right -48. Su schermi larghi il
   tetto di 1180px lascia spazio in avanzo e il difetto non si vede;
   sotto una certa soglia la pagina intera sembra spostata a destra.
   E' la stessa trappola gia' incontrata sull'header: quando un elemento
   ha insieme una larghezza in percentuale e del padding, box-sizing non
   e' un dettaglio di stile ma una condizione di correttezza. */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
	box-sizing: border-box;
	max-width: 1180px; margin-left: auto; margin-right: auto; padding: 0 24px;
}

.wc-block-grid__product-title {
	font-family: "boreal", sans-serif !important; font-weight: var(--mb-fw-light, 200) !important;
	text-transform: uppercase; letter-spacing: .04em; font-size: var(--mb-fs-product-title, 20px) !important;
	color: var(--mb-ink, #1A1814) !important; text-decoration: none !important;
}
/* .wc-block-grid__product-price — nessuna regola qui: già universale
   in miobuk-global.css. */
.wc-block-grid__product-link { text-decoration: none !important; }

.wc-block-components-product-name {
	font-family: "boreal", sans-serif !important; font-weight: 500 !important; text-transform: uppercase;
	letter-spacing: .03em; font-size: var(--mb-fs-product-title, 20px) !important; color: var(--mb-taupe-deep, #7C6F59) !important;
	text-decoration: none !important;
}
.wc-block-components-product-name:hover { color: var(--mb-taupe, #9A8C74) !important; }
.wc-block-components-order-summary-item__image > *:not(img),
[class*="order-summary-item__image"] > *:not(img) {
	display: none !important;
}
.wc-block-components-product-metadata__description,
.wc-block-cart-item__product .wc-block-components-summary { display: none !important; }
/* .wc-block-components-product-price — nessuna regola qui: già
   universale in miobuk-global.css. Solo il money-amount nel totale
   riga carrello, non coperto dal selettore universale: */
.wc-block-cart-item__total .wc-block-components-formatted-money-amount {
	font-family: "boreal", sans-serif !important; color: var(--mb-taupe-deep, #7C6F59) !important;
	font-size: var(--mb-fs-body, 14px) !important;
}

.wc-block-components-quantity-selector {
	display: inline-flex; align-items: center; border: 1px solid var(--mb-taupe-line, #C5B9A4);
	border-radius: 4px; overflow: hidden; height: 34px;
}
.wc-block-components-quantity-selector__button {
	width: 30px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
	background: transparent !important; border: 0 !important; color: var(--mb-taupe-deep, #7C6F59) !important;
	font-size: var(--mb-fs-body, 14px) !important; padding: 0 !important; cursor: pointer; border-radius: 0 !important;
}
.wc-block-components-quantity-selector__button:hover { background: var(--mb-cream-2, #F6F5F1) !important; }
.wc-block-components-quantity-selector__input {
	width: 36px; height: 34px; border: 0; border-left: 1px solid var(--mb-taupe-line, #C5B9A4);
	border-right: 1px solid var(--mb-taupe-line, #C5B9A4); text-align: center;
	font-family: "boreal", sans-serif; font-size: var(--mb-fs-body, 14px); color: var(--mb-ink, #1A1814);
}

.wc-block-cart__totals-title {
	font-family: "boreal", sans-serif !important; font-weight: var(--mb-fw-light, 200) !important; text-transform: uppercase !important;
	letter-spacing: .04em !important; color: var(--mb-ink-soft, #6A6457) !important; font-size: var(--mb-fs-body, 14px) !important;
}
.wc-block-components-totals-item__label {
	font-family: "boreal", sans-serif !important; font-weight: var(--mb-fw-light, 200) !important; text-transform: uppercase !important;
	letter-spacing: .04em !important; color: var(--mb-ink-soft, #6A6457) !important; font-size: var(--mb-fs-body, 14px) !important;
}
.wc-block-components-totals-item__value,
.wc-block-components-formatted-money-amount {
	font-family: "boreal", sans-serif !important; color: var(--mb-taupe-deep, #7C6F59) !important; font-size: var(--mb-fs-body, 14px) !important;
}
.wc-block-components-panel__button {
	font-family: "boreal", sans-serif !important; font-size: var(--mb-fs-body, 14px) !important; text-transform: uppercase;
	letter-spacing: .05em; color: var(--mb-ink-soft, #6A6457) !important;
}
.wc-block-cart__submit-container { margin-top: 20px; }
.wc-block-cart__submit-button.wp-element-button,
.wc-block-components-checkout-place-order-button {
	width: 100%; text-align: center;
}
.wc-block-checkout .wc-block-components-text-input input,
.wc-block-checkout select,
.wc-block-checkout input[type="email"],
.wc-block-checkout input[type="text"],
.wc-block-checkout input[type="tel"],
.wc-block-cart input,
.wc-block-cart select {
	font-family: "boreal", sans-serif !important; font-weight: var(--mb-fw-light, 200) !important; font-size: var(--mb-fs-body, 14px) !important;
	color: var(--mb-ink-soft, #6A6457) !important;
	border: 1px solid var(--mb-taupe-line, #C5B9A4) !important;
	border-radius: 4px !important;
}
.wc-block-checkout input::placeholder,
.wc-block-checkout textarea::placeholder,
.wc-block-cart input::placeholder {
	font-family: "boreal", sans-serif !important; font-weight: var(--mb-fw-light, 200) !important; font-size: var(--mb-fs-body, 14px) !important;
	color: var(--mb-ink-soft, #6A6457) !important; opacity: 1;
}
.wc-block-checkout .wc-block-components-radio-control__label,
.wc-block-checkout .wc-block-components-radio-control__description,
.wc-block-checkout .wc-block-components-radio-control__secondary-label,
.wc-block-checkout .wc-block-components-checkbox__label,
.wc-block-checkout .wc-block-components-notice-banner,
.wc-block-checkout .wc-block-components-notice-banner__content,
.wc-block-checkout .wc-block-components-validation-error,
.wc-block-checkout .woocommerce-terms-and-conditions,
.wc-block-checkout .wc-block-checkout__terms {
	font-family: "boreal", sans-serif !important; font-weight: var(--mb-fw-light, 200) !important; font-size: var(--mb-fs-body, 14px) !important;
	color: var(--mb-ink-soft, #6A6457) !important; text-transform: none !important;
}
.wc-block-checkout h2,
.wc-block-checkout h3,
.wc-block-checkout legend,
.wc-block-components-checkout-step__title,
.wc-block-components-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-body, 14px) !important; color: var(--mb-ink-soft, #6A6457) !important;
}
.wc-block-checkout label,
.wc-block-checkout .components-base-control__label {
	font-family: "boreal", sans-serif !important; font-size: var(--mb-fs-body, 14px) !important; text-transform: uppercase !important;
	letter-spacing: .04em !important; color: var(--mb-ink-soft, #6A6457) !important;
}
.wc-block-checkout input[type="radio"],
.wc-block-checkout input[type="checkbox"] { accent-color: var(--mb-taupe, #9A8C74); }
.wc-block-checkout .wc-block-components-radio-control__option {
	border: 1px solid var(--mb-taupe-line, #C5B9A4) !important; border-radius: 4px !important;
}
.wc-block-checkout .wc-block-components-radio-control__option-checked {
	border-color: var(--mb-taupe, #9A8C74) !important;
}
.wc-block-checkout a { color: var(--mb-taupe, #9A8C74) !important; }

.mb-checkout-header {
	display: flex; align-items: center; justify-content: center; position: relative;
	height: var(--mb-header-h, 72px); background: var(--mb-white, #fff);
	border-bottom: 1px solid var(--mb-line, rgba(26,24,20,.12));
}
.mb-checkout-brand { display: inline-flex; line-height: 0; }
.mb-checkout-header .mb-logo-mask { height: 40px; width: 40px; background-color: var(--mb-ink, #1A1814); }
.mb-checkout-secure {
	position: absolute; right: clamp(18px,3.5vw,40px); top: 50%; transform: translateY(-50%);
	display: flex; align-items: center; gap: 6px; font-family: "boreal", sans-serif !important;
	font-size: var(--mb-fs-body, 14px) !important; text-transform: uppercase !important; letter-spacing: .08em !important; color: var(--mb-ink-soft, #6A6457) !important;
}
@media (max-width: 600px) { .mb-checkout-secure span { display: none; } }

.wc-block-components-button .wp-element-button,
.wc-block-components-button.wp-element-button,
.wc-block-cart__submit-button .wp-element-button,
.wc-block-components-checkout-place-order-button,
.wc-block-components-checkout-return-to-cart-button,
.woocommerce-MyAccount-content .button,
.woocommerce-MyAccount-content .woocommerce-Button,
.woocommerce form .button,
.woocommerce a.button,
.woocommerce-cart .wp-element-button,
.woocommerce-checkout .wp-element-button {
	font-family: "boreal", sans-serif !important; font-size: var(--mb-fs-button, 10px) !important; font-weight: var(--mb-fw-regular, 400) !important;
	/* 27/08 — Convertito allo stile minimale del sito. Questo blocco, che
	   stava in fondo al file e usava !important, era la ragione per cui i
	   pulsanti di correlati, cross-sell, carrello, checkout e area cliente
	   restavano a pillola nonostante la regola generale fosse gia' stata
	   cambiata: vincendo per posizione, riapplicava il vecchio stile. */
	text-transform: uppercase !important; letter-spacing: .14em !important;
	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;
	width: -moz-fit-content !important; width: fit-content !important;
	text-align: center !important; justify-content: center !important; display: inline-flex !important; align-items: center !important;
	transition: letter-spacing .45s var(--mb-ease, cubic-bezier(.22,.61,.36,1)), color .45s var(--mb-ease, cubic-bezier(.22,.61,.36,1)), border-color .45s var(--mb-ease, cubic-bezier(.22,.61,.36,1)), border-bottom-width .45s var(--mb-ease, cubic-bezier(.22,.61,.36,1));
}
/* Richiesta cliente 27/08: il pulsante "Effettua ordine" (checkout WC
   Blocks) aveva testo non centrato e sfondo pieno grigio-taupe invece
   dello stile outline del sito — il nome classe esatto non è
   verificabile da qui senza un carrello con articoli, quindi la regola
   sopra è stata resa più ampia/difensiva. Fallback aggiuntivo generico
   sul pulsante di submit dentro il blocco checkout, indipendentemente
   dalla classe esatta usata. */
.wp-block-woocommerce-checkout button[type="submit"],
.wc-block-checkout__actions button {
	font-family: "boreal", sans-serif !important; font-size: var(--mb-fs-button, 10px) !important; font-weight: var(--mb-fw-regular, 400) !important;
	text-transform: uppercase !important; letter-spacing: .14em !important;
	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;
	width: -moz-fit-content !important; width: fit-content !important;
	text-align: center !important; justify-content: center !important; display: inline-flex !important; align-items: center !important;
}
.wp-block-woocommerce-checkout button[type="submit"]:hover,
.wc-block-checkout__actions button:hover {
	background-color: transparent !important;
	color: var(--mb-taupe-deep, #7C6F59) !important;
	border-bottom-width: 1.5px !important;
	border-bottom-color: var(--mb-taupe-deep, #7C6F59) !important;
}
.wc-block-components-button .wp-element-button:hover,
.wc-block-components-button.wp-element-button:hover,
.wc-block-cart__submit-button .wp-element-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.woocommerce-MyAccount-content .button:hover,
.woocommerce form .button:hover,
.woocommerce a.button:hover {
	background-color: transparent !important;
	color: var(--mb-taupe-deep, #7C6F59) !important;
	border-bottom-width: 1.5px !important;
	border-bottom-color: var(--mb-taupe-deep, #7C6F59) !important;
	transform: none;
}
.woocommerce-cart h1.wp-block-post-title,
.woocommerce-checkout h1.wp-block-post-title,
.woocommerce-account h1.wp-block-post-title { display: none !important; }
.woocommerce-MyAccount-navigation ul { font-family: "boreal", sans-serif !important; }
.woocommerce-MyAccount-navigation li a {
	font-family: "boreal", sans-serif !important; text-transform: uppercase !important; letter-spacing: .04em !important;
	font-size: var(--mb-fs-body, 14px) !important; color: var(--mb-ink, #1A1814) !important;
}
.woocommerce-MyAccount-navigation li.is-active a { color: var(--mb-taupe-deep, #7C6F59) !important; }

/* ===== Descrizione + Specifiche Tecniche — sostituisce le icone social
   sotto la scheda prodotto. Stesso pattern accordion del footer/FAQ. ===== */
/* Il blocco vive SOTTO la galleria, a tutta la larghezza dell'area
   contenuti (colonna a destra della sidebar filtri): nella colonna
   dettagli a 48% le specifiche si incolonnavano su una riga di poche
   parole, rendendo illeggibili i testi lunghi (carta, copertina...). */
.mb-product-info-sections { width: 100%; max-width: 100%; margin: 56px 0 0; padding: 0; }
.mb-info-block { border-top: 1px solid var(--mb-line, rgba(26,24,20,.12)); }
.mb-info-block:last-child { border-bottom: 1px solid var(--mb-line, rgba(26,24,20,.12)); }
.mb-info-toggle {
	display: flex; align-items: center; justify-content: space-between; width: 100%;
	background: none; border: 0; cursor: pointer; padding: 14px 0;
	font-family: "boreal", sans-serif !important; font-weight: var(--mb-fw-light, 200) !important;
	text-transform: uppercase !important; letter-spacing: .12em !important;
	font-size: 11px !important; color: var(--mb-taupe-deep, #7C6F59) !important;
}
.mb-info-chev { font-size: 11px; color: var(--mb-taupe, #9A8C74); transition: transform .3s var(--mb-ease, cubic-bezier(.22,.61,.36,1)); }
.mb-info-toggle[aria-expanded="true"] .mb-info-chev { transform: rotate(180deg); }
.mb-info-body { max-height: 0; overflow: hidden; transition: max-height .4s var(--mb-ease, cubic-bezier(.22,.61,.36,1)); }
/* Le descrizioni del catalogo reale arrivano a ~2.500 caratteri: con un
   tetto di 800px venivano tagliate a meta' in apertura. */
.mb-info-body.mb-open { max-height: 4000px; padding-bottom: 24px; }
.mb-info-body p {
	font-family: "boreal", sans-serif !important; font-size: var(--mb-fs-body, 14px) !important;
	line-height: 1.75; color: var(--mb-ink-soft, #6A6457) !important; margin: 0 0 14px;
}
.mb-info-empty { color: var(--mb-ink-soft, #6A6457) !important; opacity: .7; }
.mb-spec-table { width: 100%; border-collapse: collapse; }
.mb-spec-table tr { border-bottom: 1px solid var(--mb-line, rgba(26,24,20,.12)); }
.mb-spec-table tr:last-child { border-bottom: 0; }
.mb-spec-table th, .mb-spec-table td {
	text-align: left; padding: 10px 0; font-family: "boreal", sans-serif !important; font-size: var(--mb-fs-body, 14px) !important;
}
.mb-spec-table th, .mb-spec-table td { vertical-align: top; }
.mb-spec-table th {
	color: var(--mb-taupe-deep, #7C6F59) !important; font-weight: 400 !important;
	width: 220px; min-width: 140px; padding-right: 32px; white-space: nowrap;
}
.mb-spec-table td { color: var(--mb-ink-soft, #6A6457) !important; line-height: 1.7; }
@media (max-width: 600px) {
	.mb-spec-table th, .mb-spec-table td { display: block; width: auto; white-space: normal; padding-right: 0; }
	.mb-spec-table th { padding-bottom: 2px; }
	.mb-spec-table td { padding-top: 0; padding-bottom: 12px; }
}

/* ==================================================================
   SET COMPLETO — elenco dei componenti senza prezzi
   ------------------------------------------------------------------
   04/09/2026. Nella scheda dei Set, WPC elenca i taccuini contenuti
   con il prezzo di ciascuno (€ 90,00 per riga). Sono numeri che non
   servono al cliente e lavorano contro il set: uno li somma, trova
   360 e legge i 330 come uno sconto del 8%, invece che come il
   prezzo di una raccolta. Resta visibile il solo totale in alto.

   Nascosto per presentazione, non rimosso: l'elenco dei componenti
   e i loro dati restano nel documento, nell'ordine e in fattura.
   Per riaccenderli basta togliere questa regola.
   ================================================================== */

.woosb-wrap .woosb-price,
.woosb-wrap .woosb-price-ori,
.woosb-wrap .woosb-price-new { display: none !important; }

/* La riga del componente occupa cosi' tutta la larghezza disponibile:
   senza questo il nome resta compresso nella colonna di sinistra. */
.woosb-wrap .woosb-title { flex: 1 1 auto !important; }