/*
 * Fiche produit : résumé, galerie, badges de réassurance, onglets,
 * produits liés / ventes incitatives.
 *
 * Les cartes des blocs « produits liés » et « ventes incitatives » ne sont plus
 * redéfinies ici : elles sont rendues par shared.css, comme la grille du
 * catalogue. Ce fichier ne pilote plus que leurs colonnes et leur conteneur.
 */

/* ---------- Résumé produit (titre / prix / extrait) ---------- */

.single-product div.product .product_title {
	color: var(--wcdc-text);
	font-weight: 700;
	margin-bottom: 8px;
}

.single-product div.product p.price,
.single-product div.product .woocommerce-Price-amount {
	font-weight: 700;
}

.single-product div.product .woocommerce-product-details__short-description {
	color: var(--wcdc-muted);
	line-height: 1.6;
	margin: 14px 0;
}

.single-product div.product .woocommerce-product-rating {
	margin-bottom: 10px;
}

/* ---------- Bouton d'ajout au panier ---------- */

.single-product div.product form.cart .button,
.single-product div.product form.cart .single_add_to_cart_button {
	background: var(--wcdc-primary);
	border-color: var(--wcdc-primary);
	border-radius: 8px;
	padding: 10px 30px;
	color: #fff;
	font-weight: 600;
	letter-spacing: .02em;
	transition: filter .15s ease, transform .15s ease;
}

.single-product div.product form.cart .button:hover,
.single-product div.product form.cart .single_add_to_cart_button:hover {
	filter: brightness(.92);
	transform: translateY(-1px);
}

.single-product div.product form.cart div.quantity {
	margin-right: 10px;
}

.single-product div.product form.cart input.qty {
	border: 1px solid var(--wcdc-border);
	border-radius: 8px;
	height: 58px;
}

/*
 * Divi injecte une flèche en ::after sur ses boutons WooCommerce, révélée au
 * survol, et compense par un rembourrage supplémentaire. Nos boutons ont leur
 * propre rembourrage et leur propre alignement : le glyphe se pose alors sur
 * le libellé au lieu de se glisser à côté.
 *
 * On le retire partout où nous réhabillons un bouton. Les boutons que nous ne
 * touchons pas gardent le comportement de Divi.
 */
.single-product div.product form.cart .button::after,
.single-product div.product form.cart .button::before,
.single-product div.product form.cart .single_add_to_cart_button::after,
.single-product div.product form.cart .single_add_to_cart_button::before {
	content: none;
}

/* ---------- Galerie ---------- */

.single-product div.images.product-gallery,
.single-product div.woocommerce-product-gallery {
	border-radius: 14px;
	overflow: hidden;
}

.single-product .woocommerce-product-gallery__image img {
	border-radius: 14px;
	border: 1px solid var(--wcdc-border);
}

.single-product .flex-control-thumbs li img {
	border-radius: 8px;
	border: 1px solid var(--wcdc-border);
	opacity: .75;
	transition: opacity .15s ease, border-color .15s ease;
}

.single-product .flex-control-thumbs li img:hover,
.single-product .flex-control-thumbs li img.flex-active {
	opacity: 1;
	border-color: var(--wcdc-primary);
}

/* ---------- Badge promo sur la fiche ---------- */

/*
 * shared.css couvre déjà .woocommerce.woocommerce span.onsale ; on ajoute ici
 * le sélecteur .single-product, que Divi cible spécifiquement sur la fiche.
 */
body.wcdc-badge-colored .single-product span.onsale {
	background: var(--wcdc-badge-bg, var(--wcdc-primary)) !important;
	color: #fff !important;
	font-weight: 600;
	border-radius: var(--wcdc-badge-radius, 4px) !important;
	z-index: 20;
}

/* ---------- Badges de réassurance ---------- */

.wcdc-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 22px 0 6px;
	padding-top: 18px;
	border-top: 1px solid var(--wcdc-border);
}

.wcdc-badge {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--wcdc-bg);
	border: 1px solid var(--wcdc-border);
	border-radius: 999px;
	padding: 8px 14px;
	font-size: 13px;
	color: var(--wcdc-text);
}

/*
 * Les glyphes Dashicons ont été remplacés par des SVG inline : la fiche
 * produit chargeait la police entière (~90 Ko) pour trois icônes.
 */
.wcdc-badge-icon {
	color: var(--wcdc-primary);
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	display: block;
}

/* ---------- Avis clients ---------- */

/*
 * Deux colonnes au-delà de 900 px : la liste des avis à gauche, le formulaire
 * à droite, au lieu d'un formulaire relégué sous une liste parfois longue.
 *
 * C'est le seul endroit de ce fichier qui change une disposition plutôt que de
 * l'habiller. #reviews est un simple conteneur du panneau d'onglet, que Divi
 * ne met pas en page lui-même — le risque est bien moindre que sur
 * ul.products — mais ce bloc reste isolé pour pouvoir être retiré seul.
 */
@media (min-width: 900px) {
	.single-product #reviews.woocommerce-Reviews {
		display: grid;
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
		gap: 44px;
		align-items: start;
	}
}

.single-product .woocommerce-Reviews-title {
	margin: 0 0 6px;
	font-size: 20px;
	font-weight: 700;
	color: var(--wcdc-text);
}

.single-product .woocommerce-Reviews .commentlist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.single-product .woocommerce-Reviews .commentlist li.review,
.single-product .woocommerce-Reviews .commentlist li.comment {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

/*
 * Par défaut WooCommerce positionne l'avatar en absolu et compense par une
 * marge gauche sur .comment-text, qu'il encadre d'une bordure. On remplace ce
 * montage par un flex, d'où le retour de position, float et marges à leur
 * valeur neutre.
 */
.single-product .woocommerce-Reviews .comment_container {
	display: flex;
	gap: 14px;
	padding: 18px 0;
	border-bottom: 1px solid var(--wcdc-border);
	background: none;
}

.single-product .woocommerce-Reviews .comment_container .avatar {
	position: static;
	float: none;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
}

.single-product .woocommerce-Reviews .comment-text {
	flex-grow: 1;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
}

.single-product .woocommerce-Reviews .comment-text .meta {
	margin: 0 0 6px;
	font-size: 12px;
	color: var(--wcdc-muted);
}

.single-product .woocommerce-Reviews .woocommerce-review__author {
	font-size: 14px;
	font-weight: 700;
	color: var(--wcdc-text);
}

.single-product .woocommerce-Reviews .comment-text .description p {
	margin: 0 0 8px;
	font-size: 13px;
	line-height: 1.65;
	color: var(--wcdc-muted);
}

/*
 * Les étoiles de WooCommerce sont une police, pas des images : on n'en change
 * que la couleur et la taille. Un ambre plutôt que la couleur principale —
 * des étoiles violettes ou vertes ne se lisent pas comme une note.
 */
.single-product .woocommerce-Reviews .star-rating,
.single-product .woocommerce-product-rating .star-rating {
	color: #e0a32e;
	font-size: 13px;
}

.single-product .woocommerce-Reviews .comment-text .star-rating {
	float: right;
	margin: 2px 0 0 12px;
}

/* ---------- Formulaire d'avis ---------- */

.single-product #review_form_wrapper {
	background: var(--wcdc-bg);
	border: 1px solid var(--wcdc-border);
	border-radius: 14px;
	padding: 24px;
}

.single-product #review_form .comment-reply-title {
	display: block;
	margin: 0 0 4px;
	font-size: 17px;
	font-weight: 700;
	color: var(--wcdc-text);
}

.single-product #review_form .comment-notes {
	margin: 0 0 18px;
	font-size: 12px;
	line-height: 1.5;
	color: var(--wcdc-muted);
}

.single-product #review_form .comment-form-rating,
.single-product #review_form .comment-form-comment,
.single-product #review_form .comment-form-author,
.single-product #review_form .comment-form-email {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin: 0 0 14px;
}

.single-product #review_form label {
	font-size: 13px;
	font-weight: 600;
	color: var(--wcdc-text);
}

.single-product #review_form input[type="text"],
.single-product #review_form input[type="email"],
.single-product #review_form textarea {
	width: 100%;
	padding: 11px 13px;
	border: 1px solid var(--wcdc-border);
	border-radius: 8px;
	background: var(--wcdc-card-bg);
	color: var(--wcdc-text);
	font-family: inherit;
	font-size: 13px;
	line-height: 1.5;
}

.single-product #review_form input[type="text"],
.single-product #review_form input[type="email"] {
	height: 44px;
	padding-top: 0;
	padding-bottom: 0;
}

.single-product #review_form textarea {
	resize: vertical;
}

/* Le sélecteur de note est lui aussi une police : couleur et taille. */
.single-product #review_form p.stars {
	margin: 0;
	line-height: 1;
}

.single-product #review_form p.stars a {
	color: #e0a32e;
	font-size: 22px;
}

.single-product #review_form .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 0 0 18px;
}

.single-product #review_form .comment-form-cookies-consent input[type="checkbox"] {
	width: 16px;
	height: 16px;
	margin: 3px 0 0;
	accent-color: var(--wcdc-primary);
}

.single-product #review_form .comment-form-cookies-consent label {
	font-size: 12px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--wcdc-muted);
}

.single-product #review_form .form-submit {
	margin: 0;
}

.single-product #review_form input#submit {
	min-height: 46px;
	padding: 12px 24px;
	border: 1px solid var(--wcdc-primary);
	border-radius: 8px;
	background: var(--wcdc-primary);
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .02em;
	cursor: pointer;
	transition: filter .15s ease;
}

.single-product #review_form input#submit:hover {
	filter: brightness(.92);
	background: var(--wcdc-primary);
	color: #fff;
}

/* ---------- Onglets (description / avis) ---------- */

.single-product .woocommerce-tabs {
	margin-top: 40px;
}

body.woocommerce .woocommerce-tabs {
	border-radius: 15px;
}

body.woocommerce div.product .woocommerce-tabs ul.tabs,
body.woocommerce #content-area div.product .woocommerce-tabs ul.tabs {
	border-radius: 15px 15px 0 0;
}

body.woocommerce div.product .woocommerce-tabs .panel,
body.woocommerce #content-area div.product .woocommerce-tabs .panel {
	border-radius: 0 0 15px 15px;
}

.single-product .woocommerce-tabs ul.tabs {
	display: flex;
	gap: 6px;
	border-bottom: 1px solid var(--wcdc-border);
	padding-left: 0;
	margin: 0 0 24px;
	list-style: none;
}

.single-product .woocommerce-tabs ul.tabs li {
	margin: 0;
	list-style: none;
}

.single-product .woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding: 10px 18px;
	color: var(--wcdc-muted);
	text-decoration: none;
	font-weight: 600;
	border-bottom: 2px solid transparent;
}

.single-product .woocommerce-tabs ul.tabs li.active a {
	color: var(--wcdc-primary);
	border-bottom-color: var(--wcdc-primary);
}

.single-product .woocommerce-tabs .panel {
	background: var(--wcdc-card-bg);
	border: 1px solid var(--wcdc-border);
	padding: 24px;
	color: var(--wcdc-text);
}

/* ---------- Produits liés / ventes incitatives ---------- */

.single-product .related.products,
.single-product .upsells.products {
	margin-top: 50px;
}

.single-product .related.products > h2,
.single-product .upsells.products > h2 {
	color: var(--wcdc-text);
	font-size: 20px;
	margin-bottom: 20px;
}

/*
 * Largeurs codées en dur pour 3 et 4 colonnes, à l'identique de l'ancienne
 * extension : WooCommerce pose columns-3 ou columns-4 sur le <ul> des produits
 * liés selon le réglage de la boutique. Une valeur autre laisse la carte en
 * largeur automatique, comme avant.
 */
.single-product .related.products ul.products li.product,
.single-product .upsells.products ul.products li.product {
	margin: 0 !important;
}

.single-product .related.products ul.products.columns-3 li.product,
.single-product .upsells.products ul.products.columns-3 li.product {
	width: calc(33.3333% - 20px) !important;
}

/*
 * 22,5px et non 23 comme dans l'ancienne extension : avec la gouttière portée
 * par le conteneur, quatre cartes et trois gouttières de 30px tiennent
 * exactement sur 100 % quand on retire 90/4 = 22,5px à chacune.
 */
.single-product .related.products ul.products.columns-4 li.product,
.single-product .upsells.products ul.products.columns-4 li.product {
	width: calc(25% - 22.5px) !important;
}

.single-product .related.products ul.products li.product img,
.single-product .upsells.products ul.products li.product img {
	border-radius: 8px;
}

/* ---------- Barre d'achat collante (mobile) ---------- */

/*
 * Masquée par défaut, révélée par product.js quand le formulaire d'ajout au
 * panier sort du champ de vision. Sans JavaScript elle ne s'affiche jamais :
 * c'est le bon repli pour un confort d'usage, mieux qu'une barre qui
 * recouvrirait le contenu en permanence.
 */
.wcdc-sticky-cart {
	display: none;
}

@media (max-width: 768px) {
	.wcdc-sticky-cart {
		display: flex;
		align-items: center;
		gap: 12px;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9990;
		padding: 12px 16px;
		padding-bottom: calc(12px + env(safe-area-inset-bottom));
		background: var(--wcdc-card-bg);
		border-top: 1px solid var(--wcdc-border);
		box-shadow: 0 -6px 20px rgba(0, 0, 0, .09);
		transform: translateY(110%);
		transition: transform .2s ease;
	}

	.wcdc-sticky-cart.is-visible {
		transform: translateY(0);
	}

	.wcdc-sticky-cart-img {
		flex-shrink: 0;
		width: 46px;
		height: 46px;
		border-radius: 8px;
		object-fit: cover;
	}

	.wcdc-sticky-cart-info {
		flex-grow: 1;
		min-width: 0;
		display: flex;
		flex-direction: column;
		gap: 1px;
	}

	.wcdc-sticky-cart-name {
		font-size: 12px;
		color: var(--wcdc-muted);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.wcdc-sticky-cart-price {
		font-size: 17px;
		font-weight: 700;
		color: var(--wcdc-text);
		line-height: 1.2;
		white-space: nowrap;
	}

	/*
	 * L'ancien prix barré est retiré de la barre, et de là seulement : à 390px
	 * de large, entre la vignette et le bouton, il ne reste qu'une centaine de
	 * pixels, et le prix courant s'y faisait tronquer. Le prix barré reste
	 * affiché dans le résumé du produit, quelques centimètres plus haut.
	 */
	.wcdc-sticky-cart-price del {
		display: none;
	}

	.wcdc-sticky-cart-price ins {
		text-decoration: none;
		background: none;
	}

	.wcdc-sticky-cart-button {
		flex-shrink: 0;
		display: inline-flex;
		align-items: center;
		gap: 8px;
		/* 48px : au-dessus du minimum de 44px pour une cible tactile. */
		min-height: 48px;
		padding: 13px 16px;
		border-radius: 8px;
		background: var(--wcdc-primary);
		color: #fff;
		font-size: 14px;
		font-weight: 600;
		line-height: 1.2;
		text-decoration: none;
		white-space: nowrap;
	}

	.wcdc-sticky-cart-button:hover,
	.wcdc-sticky-cart-button:focus {
		background: var(--wcdc-primary);
		color: #fff;
		filter: brightness(.92);
	}

	/* Réserve la hauteur de la barre pour que le pied de page reste atteignable. */
	body.wcdc-has-sticky-cart .single-product .related.products,
	body.wcdc-has-sticky-cart .single-product .upsells.products {
		padding-bottom: 76px;
	}
}

/*
 * Sous 360px — iPhone SE et assimilés — le libellé du bouton est celui de
 * WooCommerce, qui peut être long (« Ajouter au panier », « Choisir les
 * options »). On resserre plutôt que de le tronquer.
 */
@media (max-width: 360px) {
	.wcdc-sticky-cart {
		gap: 9px;
		padding-left: 12px;
		padding-right: 12px;
	}

	.wcdc-sticky-cart-img {
		width: 40px;
		height: 40px;
	}

	.wcdc-sticky-cart-button {
		gap: 6px;
		padding: 13px 13px;
		font-size: 13px;
	}

	.wcdc-sticky-cart-price {
		font-size: 16px;
	}
}

@media (max-width: 768px) {
	.single-product .related.products ul.products.columns-3 li.product,
	.single-product .upsells.products ul.products.columns-3 li.product,
	.single-product .related.products ul.products.columns-4 li.product,
	.single-product .upsells.products ul.products.columns-4 li.product {
		width: calc(50% - 15px) !important;
	}

	.wcdc-badges {
		gap: 8px;
	}

	.single-product .woocommerce-tabs ul.tabs {
		overflow-x: auto;
		flex-wrap: nowrap;
	}
}

@media (max-width: 480px) {
	.single-product .related.products ul.products li.product,
	.single-product .upsells.products ul.products li.product {
		width: 100% !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wcdc-sticky-cart,
	.single-product #review_form input#submit,
	.single-product div.product form.cart .button,
	.single-product div.product form.cart .single_add_to_cart_button,
	.single-product .flex-control-thumbs li img {
		transition: none;
	}
	.single-product div.product form.cart .button:hover,
	.single-product div.product form.cart .single_add_to_cart_button:hover {
		transform: none;
	}
}