/* ============================================================
   Fiche produit — deux colonnes en grille sur la classe NATIVE `div.product`.

   Aucun `content-single-product.php` copié : la mise en page se pose sur le
   conteneur que WooCommerce rend déjà. C'est ce qui évite la dette `@version`.

   Colonne image bornée (`--bepc-fiche-photo`), pas une moitié de page : les
   photos des élèves sont en portrait (3:4). À 50 % de 1200 px, une photo
   faisait ~570 × 760 px et repoussait le prix et le bouton sous la ligne de
   flottaison.
   ============================================================ */

.woocommerce div.product {
	--bepc-fiche-photo: 24rem;
	display: grid;
	grid-template-columns: minmax(0, var(--bepc-fiche-photo)) minmax(0, 1fr);
	gap: var(--bepc-s-12);
	align-items: start;
}

.woocommerce div.product .woocommerce-product-gallery {
	width: auto;
	float: none;
	margin: 0;
}

.woocommerce div.product .woocommerce-product-gallery img {
	border-radius: var(--bepc-radius);
}

.woocommerce div.product .summary {
	width: auto;
	float: none;
	margin: 0;
}

.woocommerce div.product .product_title {
	margin: 0 0 var(--bepc-s-4);
}

.woocommerce div.product p.price {
	margin-bottom: var(--bepc-s-5);
	font-size: 1.6rem;
}

.woocommerce div.product .woocommerce-product-details__short-description {
	color: var(--bepc-text-2);
}

.woocommerce div.product form.cart {
	margin-block: var(--bepc-s-6);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bepc-s-3);
}

.woocommerce div.product form.cart .quantity input.qty {
	width: 5rem;
	padding: var(--bepc-s-3);
	text-align: center;
}

.woocommerce div.product .product_meta {
	padding-top: var(--bepc-s-5);
	border-top: 1px solid var(--bepc-border);
	color: var(--bepc-muted);
	font-size: 0.92rem;
}

.woocommerce div.product .stock {
	font-weight: 650;
}

.woocommerce div.product .stock.in-stock { color: var(--bepc-caramel); }
.woocommerce div.product .stock.out-of-stock { color: var(--bepc-rupture); }

/* --- Onglets ------------------------------------------------------ */

.woocommerce div.product .woocommerce-tabs {
	grid-column: 1 / -1;
	margin-top: var(--bepc-s-8);
}

/* Une ligne de texte trop longue se lit mal : description bornée en largeur. */
.woocommerce div.product .woocommerce-tabs .panel {
	max-width: 68ch;
	margin: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	margin: 0 0 var(--bepc-s-6);
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--bepc-s-2);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
	border-bottom-color: var(--bepc-border);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--bepc-radius-pill);
	background: var(--bepc-surface-soft);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	background: var(--bepc-miel);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	padding: var(--bepc-s-2) var(--bepc-s-5);
	color: var(--bepc-encre);
	font-weight: 600;
}

/* --- Produits liés ------------------------------------------------ */

.woocommerce div.product .related,
.woocommerce div.product .upsells {
	grid-column: 1 / -1;
	margin-top: var(--bepc-s-12);
}

@media (max-width: 780px) {
	.woocommerce div.product {
		grid-template-columns: 1fr;
		gap: var(--bepc-s-8);
	}

	/* En une colonne, la photo prendrait toute la largeur — jusqu'à ~1000 px
	   de haut sur tablette. Même borne qu'en deux colonnes, centrée. */
	.woocommerce div.product .woocommerce-product-gallery {
		width: 100%;
		max-width: var(--bepc-fiche-photo);
		margin-inline: auto;
	}
}