/* ==========================================================
   FICHE PRODUIT — grande photo, mise en page en 2 colonnes
   Photo + vignettes à gauche, résumé et achat à droite.
   Chargé après product.css, uniquement sur la fiche produit
   (la fiche "Annonce collectionneur" garde product.css).
   ========================================================== */

/* ===== 2 colonnes ===== */
.mille-bols-product-page .mb-product-top--wide {
	grid-template-columns: minmax(0, 860px) minmax(320px, 520px) !important;
	justify-content: space-between !important;
	gap: 48px !important;
}

/* ===== Lien vers la boutique du céramiste, sous le résumé ===== */
.mille-bols-product-page .mb-product-top--wide .mb-summary .mb-ceramist-card {
	margin-top: 22px;
	padding: 16px 20px;
}

/* ===== Vignettes en rangée sous la photo (hors mobile) ===== */
@media (min-width: 721px) {
	.mille-bols-product-page .mb-product-top--wide .mb-gallery .woocommerce-product-gallery {
		grid-template-columns: minmax(0, 1fr) !important;
		column-gap: 0 !important;
		row-gap: 12px !important;
	}

	.mille-bols-product-page .mb-product-top--wide .mb-gallery .flex-viewport {
		grid-column: 1 !important;
		grid-row: 1 !important;
	}

	.mille-bols-product-page .mb-product-top--wide .mb-gallery .flex-control-thumbs {
		grid-column: 1 !important;
		grid-row: 2 !important;
		flex-direction: row !important;
		flex-wrap: wrap !important;
		gap: 10px !important;
		width: 100% !important;
	}

	.mille-bols-product-page .mb-product-top--wide .mb-gallery .flex-control-thumbs li {
		width: 96px !important;
	}

	.mille-bols-product-page .mb-product-top--wide .mb-gallery .flex-control-thumbs img {
		width: 96px !important;
		height: 64px !important;
	}
}

/* ===== Écrans plus étroits ===== */
@media (min-width: 1051px) and (max-width: 1380px) {
	.mille-bols-product-page .mb-product-top--wide {
		grid-template-columns: minmax(0, 1fr) 380px !important;
		gap: 36px !important;
	}
}

/* Tablette et mobile : photo pleine largeur, puis le résumé dessous. */
@media (max-width: 1050px) {
	.mille-bols-product-page .mb-product-top--wide {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 28px !important;
	}
}