/* =========================================================
   PRODUCT PAGE LAYOUT - stile minimal fashion (galleria sx,
   pannello prodotto sticky dx)
   File: wp-content/themes/enfold-child/css/woocommerce-product-page.css

   NOTA: gli swatch colore/taglia sono gestiti dal plugin "Smart
   Variations Images & Swatches" (attributi WooCommerce di tipo
   Color/Label). La GALLERIA invece è costruita da noi (vedi JS
   initColorGallery) leggendo i dati salvati dal plugin: il filtro
   automatico per colore in tempo reale è una funzione riservata
   alla versione PRO, quindi replichiamo il comportamento a mano.

   Verificato via ispezione DOM live: con SVI attivo, il markup
   di WooCommerce mette ".woocommerce-product-gallery" come elemento
   FRATELLO di ".single-product-main-image", non al suo interno.
   ".single-product-main-image" resta solo un contenitore Enfold
   vuoto (aside.sidebar residuo) e va nascosto del tutto.
   ========================================================= */

/* Contenitore generale prodotto: due colonne */
.single-product div.product {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 60px;
	align-items: flex-start;
	max-width: 1400px;
	margin: 0 auto;
}

/* Contenitore Enfold vuoto (conteneva solo una sidebar residua): via del tutto */
.single-product div.product > .single-product-main-image {
	display: none !important;
}

/* La vera galleria prodotto (renderizzata da SVI) prende la colonna sinistra */
.single-product div.product > .woocommerce-product-gallery {
	flex: 1 1 60% !important;
	max-width: 60% !important;
	width: auto !important;
	float: none !important;
	position: relative;
}

/* Galleria per colore, costruita da JS (initColorGallery) con i dati letti
   da "woosvi_slug" (functions.php). La galleria originale di SVI ha i dati
   ma non li filtra per colore in tempo reale nella versione free: la
   nascondiamo del tutto e mostriamo solo la nostra. */
.svi_wrapper,
.svi-vue-variationthumbs {
	display: none !important;
}

.msi-gallery-main {
	width: 100%;
	margin-bottom: 16px;
	cursor: zoom-in;
}

.msi-gallery-main-img {
	width: 100%;
	height: auto;
	display: block;
	background: #f7f7f5;
}

.msi-gallery-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.msi-gallery-thumbs li {
	flex: 0 0 96px;
	width: 96px;
	height: 96px;
	cursor: pointer;
	opacity: .6;
	border: 1px solid transparent;
}

.msi-gallery-thumbs li.selected,
.msi-gallery-thumbs li:hover {
	opacity: 1;
	border-color: #111;
}

.msi-gallery-thumbs li img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Popup galleria (immagini del colore selezionato, con zoom) */
.msi-gallery-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.msi-gallery-modal[hidden] {
	display: none;
}

.msi-gallery-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .85);
}

.msi-gallery-modal__viewport {
	position: relative;
	width: 90vw;
	height: 90vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: auto;
}

.msi-gallery-modal__img {
	max-width: 100%;
	max-height: 100%;
	cursor: zoom-in;
}

.msi-gallery-modal__img.msi-zoomed {
	cursor: zoom-out;
}

.msi-gallery-modal__close {
	position: absolute;
	top: 20px;
	right: 30px;
	background: none;
	border: none;
	color: #fff;
	font-size: 36px;
	line-height: 1;
	cursor: pointer;
	z-index: 2;
}

.msi-gallery-modal__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	color: #fff;
	font-size: 48px;
	line-height: 1;
	cursor: pointer;
	z-index: 2;
	padding: 10px 20px;
}

.msi-gallery-modal__prev {
	left: 10px;
}

.msi-gallery-modal__next {
	right: 10px;
}

/* Badge prodotto (es. "Novità") in alto a sinistra sulla foto principale */
.msi-product-badge {
	position: absolute;
	top: 20px;
	left: 20px;
	z-index: 5;
	background: #fff;
	border: 1px solid #111;
	padding: 4px 10px;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .05em;
}

/* Il riepilogo prodotto (prezzo, varianti, add to cart) è annidato
   dentro .single-product-summary, non è un figlio diretto di .product */
.single-product div.product .single-product-summary {
	flex: 1 1 32% !important;
	max-width: 380px !important;
	width: auto !important;
	float: none !important;
	position: sticky;
	top: 120px;
	align-self: flex-start;
}

/* Icona wishlist allineata al titolo prodotto (solo icona, niente testo) */
.msi-wishlist-heart {
	position: absolute;
	top: 2px;
	right: 0;
	line-height: 1;
}

.msi-wishlist-heart .yith-wcwl-add-to-wishlist-button__label {
	display: none;
}

.msi-wishlist-heart svg.yith-wcwl-icon {
	width: 15px !important;
	height: 15px !important;
}

/* ---------- COLONNA INFO PRODOTTO (destra, sticky) ---------- */
.single-product div.product .single-product-summary .summary.entry-summary {
	width: 100%;
	max-width: 380px;
}

.single-product .summary .product_title {
	font-size: 17px;
	text-transform: uppercase;
	letter-spacing: .04em;
	margin-bottom: 2px;
}

/* Descrizione lunga (sottotitolo) più vicina al titolo: vedi anche
   ".msi-long-description" più sotto per il margine superiore */
.single-product .summary p.price {
	display: block !important;
	font-size: 15px;
	color: #111;
	margin-top: 12px;
	margin-bottom: 20px;
}

/* Il distacco dal prezzo lo dà ".msi-category-path" (attaccato alla scheda) */
.single-product .variations_form.cart {
	margin-top: 0;
}

/* Percorso categorie cliccabile (es. "Uomo / Abbigliamento / Felpe"),
   attaccato sopra la scheda: stessa larghezza/margini della scheda, testo
   allineato a destra, nessuno spazio dal bordo superiore della scheda */
.msi-category-path {
	margin: 24px 0 0;
	padding: 0;
	text-align: right;
	font-size: 11px;
	letter-spacing: .02em;
	color: #999;
}

.msi-category-path a {
	color: #999;
	text-decoration: underline;
}

.msi-category-path a:hover {
	color: #111;
}

/* Tabella variazioni: etichetta (Colore/Misura/Brand) sopra i pulsanti,
   non affiancata come una normale riga di tabella */
.single-product .variations,
.single-product .variations tbody,
.single-product .variations tr {
	display: block;
	width: 100%;
}

.single-product .variations tr {
	margin-bottom: 14px;
}

.single-product .variations th.label,
.single-product .variations td.value {
	display: block;
	width: 100%;
	padding: 0;
}

.single-product .variations th.label {
	margin-bottom: 8px;
}

/* Swatch colore un po' più piccoli. Il colore vero e proprio è sempre
   quello impostato sul termine dell'attributo (inline style di SVI),
   nessuna modifica qui: solo dimensione/bordo. */
.wcsvfs-swatches-color .swatch {
	width: 22px !important;
	height: 22px !important;
	border-width: 2px !important;
}

/* SVI di default mostra gli swatch non selezionati a metà opacità
   (si "attivano" solo al click/hover): il colore invece deve essere
   sempre pieno e uguale, senza alcun effetto al passaggio del mouse. */
.wcsvfs-swatches-color .swatch,
.wcsvfs-swatches-color .swatch:hover {
	opacity: 1 !important;
}

/* Stato selezionato: solo bordo nero, niente spunta/glow (SVI disegna un
   segno di spunta con :before e un box-shadow colorato: li rimuoviamo). */
.wcsvfs-swatches-color .swatch.selected {
	border-color: #111 !important;
	box-shadow: none !important;
}

.wcsvfs-swatches-color .swatch-color.selected:before {
	display: none !important;
}

/* Riga etichetta con informazione aggiuntiva a destra (nome colore scelto,
   link guida taglie): l'etichetta resta a sinistra, il resto a destra,
   sulla stessa riga. Gli swatch/bottoni restano nella riga sotto (nella td). */
.single-product .variations th.label.msi-label-row {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	width: 100% !important;
}

.msi-color-label {
	font-weight: 400;
	text-transform: none;
	color: #555;
	font-size: 13px;
}

/* Link "Guida alle taglie" (icona forbici + testo), sulla riga dell'etichetta:
   stesso colore del titolo "Taglie" (eredita dal th, non il blu di default) */
.msi-size-guide-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	text-transform: none;
	color: inherit;
	text-decoration: underline;
}

.msi-size-guide-link__icon {
	font-size: 13px;
	transform: scaleX(-1); /* le forbici "aprono" verso il testo */
}

/* Attributi con una sola opzione (es. Brand, Vestibilità): una riga di
   testo per attributo, es. "Brand: Peuterey" poi "Vestibilità: Regular"
   sulla riga sotto, senza virgola (vedi initSingleOptionAttributes) */
.msi-combined-attributes {
	margin: 0 0 14px;
}

.msi-combined-attributes__line {
	font-size: 13px;
	color: #555;
	margin: 0 0 4px;
}

.msi-static-attribute {
	font-size: 13px;
	color: #111;
}

/* Righe originali di Brand/Vestibilità: restano nel DOM (select incluse,
   necessarie per l'invio del form) ma non visibili, sostituite dalla
   riga combinata sopra */
.single-product .variations tr.msi-row-hidden {
	display: none !important;
}

/* Nasconde select/link nativi quando sostituiti da swatch o testo statico,
   restano nel DOM (necessari per l'invio del form) ma invisibili */
.msi-native-select-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

/* Descrizione lunga (campo "Descrizione"), subito sotto il titolo (vicina,
   niente margine sopra): colore più chiaro */
.msi-long-description {
	color: #888;
	font-size: 13px;
	line-height: 1.6;
	margin-top: 0;
	margin-bottom: 4px;
}

/* Titolo "Caratteristiche" prima della descrizione breve (sua posizione originale) */
.msi-features-heading {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .05em;
	margin: 30px 0 10px;
	font-weight: 600;
	color: #111;
}

/* Descrizione breve, compressa su poche righe (il pulsante "Maggiori
   dettagli" apre il testo completo in popup) */
.woocommerce-product-details__short-description {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 13px;
	line-height: 1.6;
}

/* Pulsante trasparente "Maggiori dettagli" -> apre il popup, senza bordo */
.msi-details-toggle {
	display: inline-block;
	margin-top: 12px;
	padding: 8px 18px;
	background: transparent;
	border: none;
	color: #111;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .05em;
	text-decoration: underline;
	cursor: pointer;
}

.msi-details-toggle:hover {
	color: #555;
}

/* Popup "Maggiori dettagli" */
.msi-details-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.msi-details-modal[hidden] {
	display: none;
}

.msi-details-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .6);
}

.msi-details-modal__content {
	position: relative;
	background: #fff;
	max-width: 600px;
	width: 90%;
	max-height: 80vh;
	overflow-y: auto;
	padding: 40px 30px;
	font-size: 14px;
	line-height: 1.7;
	color: #333;
}

.msi-details-modal__close {
	position: absolute;
	top: 8px;
	right: 12px;
	background: none;
	border: none;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	color: #111;
}

/* Quantità, disponibilità e pulsante aggiungi al carrello sulla stessa riga.
   ".woocommerce-variation-availability" (disponibilità) e
   ".woocommerce-variation-add-to-cart" (quantità + pulsante) sono
   fratelli dentro ".single_variation_wrap": basta renderlo un flex
   container perché finiscano affiancati nell'ordine in cui sono nel DOM. */
.single-product .single_variation_wrap {
	display: flex !important;
	width: 100% !important;
	margin-left: 0 !important;
	float: none !important;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.single-product .woocommerce-variation.single_variation {
	width: 100%;
	float: none !important;
}

/* Disponibilità allineata a sinistra, non su tutta la larghezza:
   resta così affiancata a quantità + pulsante nella stessa riga */
.single-product .woocommerce-variation-availability {
	flex: 0 0 auto;
	width: auto;
	text-align: left;
}

.single-product .woocommerce-variation-availability .stock {
	margin: 0;
	font-size: 12px;
	white-space: nowrap;
	text-align: left;
}

.single-product .woocommerce-variation-add-to-cart {
	display: flex !important;
	width: 100% !important;
	float: none !important;
	align-items: stretch;
	justify-content: flex-start;
	gap: 8px;
}

/* Quantità più stretta (bottoni e campo numero più piccoli) per lasciare
   spazio al testo del pulsante accanto */
.single-product .woocommerce-variation-add-to-cart .quantity {
	flex: 0 0 auto;
	display: flex;
	align-items: stretch;
}

.single-product .woocommerce-variation-add-to-cart .quantity .qty,
.single-product .woocommerce-variation-add-to-cart .quantity .minus,
.single-product .woocommerce-variation-add-to-cart .quantity .plus {
	width: 32px !important;
	height: 43px;
	min-width: 0;
	padding: 0;
	text-align: center;
}

/* Pulsante aggiungi al carrello: stessa altezza della quantità (43px) e
   testo su un'unica riga (niente più "AGGIUNGI AL / CARRELLO" spezzato). */
.single-product .summary .single_add_to_cart_button {
	flex: 1 1 auto;
	min-width: 0;
	height: 43px;
	display: flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	background: #111;
	color: #fff;
	border-radius: 0;
	padding: 0 14px;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .05em;
}

.single-product .summary .single_add_to_cart_button:hover {
	background: #333;
}

.single-product .summary .single_add_to_cart_button.disabled {
	background: #999;
	color: #fff;
	cursor: not-allowed;
}

.single-product .summary .single_add_to_cart_button.disabled:hover {
	background: #999;
}

/* ---------- SCHEDA RECENSIONI (al posto delle 3 tab predefinite) ---------- */
.msi-reviews-card {
	flex: 1 1 100%;
	margin-top: 60px;
	max-width: 600px;
	background: #fff;
	border: 1px solid #e1e1e1;
	padding: 30px;
}

.msi-reviews-card__title {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .05em;
	font-weight: 600;
	margin: 0 0 20px;
	color: #111;
}

.msi-review-item {
	margin-bottom: 16px;
}

.msi-review-item__head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 4px;
}

.msi-review-item__author {
	font-size: 13px;
	color: #111;
}

.msi-review-item__stars {
	color: #d4a72c;
	font-size: 13px;
	letter-spacing: 1px;
}

.msi-review-item__text {
	font-size: 13px;
	line-height: 1.6;
	color: #555;
	margin: 0;
}

/* Popup di tutte le recensioni: elenco con separatori */
.msi-details-modal__content .msi-review-item {
	padding-bottom: 16px;
	border-bottom: 1px solid #eee;
}

/* ---------- LINK "HAI BISOGNO DI AIUTO?" / "SPEDIZIONE E RESI" ---------- */
.msi-info-links {
	margin-top: 30px;
	border-top: 1px solid #e1e1e1;
}

.msi-info-links__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 0;
	border-bottom: 1px solid #e1e1e1;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: #111;
}

.msi-info-links__icon {
	font-size: 16px;
	line-height: 1;
}

/* ---------- DRAWER LATERALE (guida taglie, aiuto, spedizione e resi) ---------- */
.msi-drawer {
	position: fixed;
	inset: 0;
	/* Sopra la barra admin di WordPress (z-index 99999) quando si è loggati */
	z-index: 100000;
}

.msi-drawer[hidden] {
	display: none;
}

.msi-drawer__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .5);
	opacity: 0;
	transition: opacity .3s ease;
}

.msi-drawer--open .msi-drawer__overlay {
	opacity: 1;
}

.msi-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: 480px;
	max-width: 90vw;
	background: #fff;
	overflow-y: auto;
	padding: 40px 30px;
	box-shadow: -4px 0 20px rgba(0, 0, 0, .15);
	transform: translateX(100%);
	transition: transform .3s ease;
}

.msi-drawer--open .msi-drawer__panel {
	transform: translateX(0);
}

.msi-drawer__close {
	position: absolute;
	top: 20px;
	right: 20px;
	background: none;
	border: none;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	color: #111;
}

.msi-drawer__title {
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: .05em;
	font-weight: 600;
	margin: 0 0 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid #eee;
}

.msi-drawer__placeholder {
	font-size: 13px;
	color: #888;
}

.msi-drawer__section {
	border-bottom: 1px solid #eee;
	margin-bottom: 20px;
	padding-bottom: 20px;
}

.msi-drawer__accordion-toggle {
	display: block;
	width: 100%;
	text-align: left;
	background: none;
	border: none;
	padding: 0 0 12px;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: #999;
	cursor: pointer;
}

.msi-drawer__section--collapsed .msi-drawer__section-body {
	display: none;
}

/* Guida taglie: metadati + tabella misure */
.msi-size-guide-meta {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .05em;
	margin: 0 0 4px;
	color: #111;
}

.msi-size-guide-meta--strong {
	font-weight: 600;
}

.msi-size-guide-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 16px;
	font-size: 13px;
}

.msi-size-guide-table th,
.msi-size-guide-table td {
	text-align: left;
	padding: 10px 8px;
	border-bottom: 1px solid #eee;
}

.msi-size-guide-table th {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: #888;
	font-weight: 600;
}

/* Guida taglie: diagramma + istruzioni "come misurare" */
.msi-size-guide-howto {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

.msi-size-guide-diagram {
	flex: 1 1 200px;
	max-width: 220px;
	height: auto;
}

.msi-size-guide-steps {
	flex: 1 1 240px;
}

.msi-size-guide-step {
	margin-bottom: 16px;
}

.msi-size-guide-step h4 {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .03em;
	margin: 0 0 4px;
	color: #111;
}

.msi-size-guide-step p {
	font-size: 12px;
	line-height: 1.6;
	color: #666;
	margin: 0;
}

/* ---------- "POTREBBE PIACERTI" (prodotti correlati / in evidenza) ---------- */
/* Sfondo bianco a tutta larghezza (esce dal contenitore centrato, che è
   su sfondo grigio-blu) per creare uno stacco grafico netto dal resto
   della pagina, con il contenuto ri-centrato dentro allo stesso max-width */
.single-product .related.products {
	flex: 1 1 100%;
	margin-top: 60px;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background: #fff;
	padding: 60px max(20px, calc((100vw - 1400px) / 2 + 20px));
	box-sizing: border-box;
}

.msi-related-products__title {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .05em;
	font-weight: 600;
	margin: 0 0 24px;
	color: #111;
}

.single-product .related.products ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 24px;
	list-style: none;
	padding: 0;
	margin: 0;
}

/* "li.product" ha di default "display: list-item" (da Enfold/WooCommerce):
   in alcuni browser questo gli impedisce di comportarsi come una vera
   cella della grid (resta larga quanto il contenuto invece di riempire
   la colonna). Forzando "block" resta comunque un elemento di grid, ma
   si allarga correttamente. */
.msi-related-product-card {
	display: block !important;
	width: 100% !important;
	margin: 0;
}

.msi-related-product-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

/* Immagine quadrata e grande (circa 450x450): riempie la colonna della
   griglia mantenendo le proporzioni 1:1, non una dimensione fissa che
   romperebbe la griglia responsive a 4 colonne */
.msi-related-product-card__image {
	position: relative;
	background: #f7f7f5;
	margin-bottom: 12px;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.msi-related-product-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.msi-related-product-card__title {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .03em;
	font-weight: 600;
	margin: 0 0 4px;
	color: #111;
}

.msi-related-product-card__desc {
	font-size: 12px;
	color: #888;
	line-height: 1.5;
	margin: 0 0 6px;
}

.msi-related-product-card__price {
	display: block;
	font-size: 13px;
	color: #111;
}

.msi-related-product-card__colors {
	display: block;
	font-size: 11px;
	color: #999;
	margin-top: 2px;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 991px) {
	.single-product div.product .woocommerce-product-gallery,
	.single-product div.product .single-product-summary {
		max-width: 100%;
		flex: 1 1 100%;
		position: static;
	}
	.single-product .related.products ul.products {
		grid-template-columns: repeat(2, 1fr);
	}
}


/* ===== Scheda Cerimonia ===== */

/* Layout a due colonne: immagine grande a sinistra, testo a destra */
#top .msi-scheda-cerimonia .msi-cerimonia-gallery {
    width: 48%;
    float: left;
    margin-bottom: 30px;
}

#top .msi-scheda-cerimonia .single-product-summary {
    width: 48%;
    float: right;
}

#top .msi-scheda-cerimonia .msi-cerimonia-gallery__main img {
    width: 100%;
    height: auto;
    display: block;
}

#top .msi-scheda-cerimonia .msi-cerimonia-gallery__thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

#top .msi-scheda-cerimonia .msi-cerimonia-gallery__thumb {
    width: calc(25% - 8px);
}

#top .msi-scheda-cerimonia .msi-cerimonia-gallery__thumb img {
    width: 100%;
    height: auto;
    display: block;
}

/* Etichetta sopra il titolo */
#top .msi-scheda-cerimonia .msi-cerimonia-label {
    color: #6786A2;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    margin-bottom: 6px;
}

/* Box showroom */
#top .msi-scheda-cerimonia .msi-showroom-box {
    margin: 24px 0;
}

#top .msi-scheda-cerimonia .msi-showroom-box__title {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 13px;
    margin-bottom: 8px;
}

/* Pulsanti: UNO SOTTO L'ALTRO */
#top .msi-scheda-cerimonia .msi-showroom-buttons {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-top: 20px;
}

#top .msi-scheda-cerimonia .msi-showroom-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 26px;
    min-width: 300px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 12px;
    line-height: 1;
    transition: opacity .2s ease;
}

#top .msi-scheda-cerimonia .msi-showroom-btn:hover {
    opacity: .85;
}

#top .msi-scheda-cerimonia .msi-showroom-btn--whatsapp {
    background: #25D366;
    color: #fff !important;
}

#top .msi-scheda-cerimonia .msi-showroom-btn--email {
    background: #333;
    color: #fff !important;
}

#top .msi-scheda-cerimonia .msi-showroom-btn svg {
    flex-shrink: 0;
    display: block;
}

/* Mobile: tutto in colonna */
@media only screen and (max-width: 767px) {
    #top .msi-scheda-cerimonia .msi-cerimonia-gallery,
    #top .msi-scheda-cerimonia .single-product-summary {
        width: 100%;
        float: none;
    }

    #top .msi-scheda-cerimonia .msi-showroom-btn {
        width: 100%;
        min-width: 0;
        justify-content: center;
    }
}