/**
 * Villa Victoria — Fiches produit (single-product)
 *
 * Le gabarit reste celui du thème Serava (woocommerce/wc-function.php) ; seule
 * la présentation est reprise, pour deux raisons :
 *
 *  1. la mise en page n'était pas responsive : bandeau à 80 px de corps qui
 *     débordait à 390 px, fil d'Ariane sur trois lignes, carte résumé avec
 *     50 px de marge interne (258 px de contenu sur un écran de 390), titre et
 *     prix côte à côte jusqu'à faire déborder le prix, vignettes des produits
 *     similaires figées à 373 px de haut quelle que soit leur largeur ;
 *  2. les couleurs de la démo restaient : filets olive rgba(88,94,72,.5),
 *     boutons bordés olive, gris bleuté --fourth-color, « capitalize » sur le
 *     fil d'Ariane et le bouton « Toute la boutique ».
 *
 * Charte : navy #0F1F34, texte #5A6676, doré #C39A6B (survol des boutons
 * principaux), ivoire #F7F4EE, filet sable #E6DFD4 ; titres Melodrama, courant
 * Jost. Points de rupture : 575 / 767 / 991 / 1024 / 1200 / 1440.
 *
 * Les sélecteurs reprennent ceux du thème avec « body » devant : même chaîne,
 * un élément de plus, donc ils l'emportent à la même position de cascade.
 */

body.single-product {
	--vv-navy: #0F1F34;
	--vv-navy-2: #162C4A;
	--vv-texte: #5A6676;
	--vv-dore: #C39A6B;
	--vv-ivoire: #F7F4EE;
	--vv-filet: #E6DFD4;
}

/* =====================================================================
   1. Bandeau de titre (« Nos prestations ») et fil d'Ariane
   ===================================================================== */

/* Le thème fixe 150 / 100 / 80 px selon la largeur, sans jamais descendre
   assez : à 390 px « PRESTATIONS » dépassait l'écran. Une taille fluide, bornée
   à 150 px sur très grand écran et 40 px sur le plus petit mobile. */
body.single-product #pxl-page-title-default .pxl-page-title {
	font-size: clamp(40px, 9.2vw, 150px);
	line-height: 0.72;
	padding: 0 12px;
	box-sizing: border-box;
	/* le thème le pose en absolu à left:50 % puis le recentre par transform :
	   un élément absolu ne dispose alors que de la moitié du conteneur et le
	   titre se repliait sur deux lignes qui se chevauchaient (interligne 0,72).
	   Étendu d'un bord à l'autre, la taille fluide suffit à le garder entier. */
	left: 0;
	right: 0;
	width: auto;
	max-width: none;
	transform: none;
	text-align: center;
	text-wrap: balance;
}

/* Sous 768 px, la photo et le H1 du bandeau ne s'affichent plus du tout : la
   règle vit dans vv-bandeaux (assets/vv-bandeaux.css), qui traite de la même
   façon les fiches prestation. Le fil d'Ariane et la phrase de présentation
   ci-dessous restent, eux, affichés. */

body.single-product #pxl-page-title-default .pxl-page-title-divider {
	background-color: var(--vv-filet);
}

body.single-product #pxl-page-title-default .pxl-breadcrumb,
body.single-product #pxl-page-title-default .pxl-breadcrumb * {
	text-transform: none;
}

body.single-product #pxl-page-title-default .pxl-breadcrumb {
	flex-wrap: wrap;
	justify-content: center;
	row-gap: 2px;
	max-width: 100%;
	color: var(--vv-navy);
}

/* les maillons peuvent passer à la ligne ; le thème les tronque à une ligne
   avec des points de suspension, ce qui coupait les titres de prestation */
body.single-product #pxl-page-title-default .pxl-breadcrumb span.breadcrumb-entry {
	display: inline;
	-webkit-line-clamp: unset;
	overflow: visible;
	white-space: normal;
	padding: 0;
}

body.single-product #pxl-page-title-default .pxl-breadcrumb li {
	text-align: center;
}

@media (max-width: 767px) {
	body.single-product #pxl-page-title-default .pxl-breadcrumb {
		font-size: 19px;
		line-height: 1.7;
	}
	body.single-product #pxl-page-title-default .pxl-page-title-description {
		font-size: 15px;
		padding: 0 4px;
	}
}

/* =====================================================================
   2. Galerie : un visuel carré, de la hauteur de la carte résumé
   ===================================================================== */

/* Les visuels sont pour la plupart carrés (1024 × 1024) ; les quatre photos de
   la villa sont en 16/9 et laissaient un vide blanc sous l'image. Toutes sont
   cadrées au carré, comme les cartes de la boutique (700 × 700). */
body.single-product #pxl-content-area div.product .woocommerce-product-gallery .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center;
}

/* en cas de galerie à plusieurs images (flexslider), le thème impose 640 px
   de haut au lien ; on laisse le carré décider */
body.single-product #pxl-content-area div.product .woocommerce-product-gallery .flex-viewport .woocommerce-product-gallery__image a {
	min-height: 0;
	max-height: none;
	padding: 0;
}

body.single-product #pxl-content-area div.product .woocommerce-product-gallery .flex-viewport {
	box-shadow: none;
	border-radius: 0;
}

@media (max-width: 767px) {
	body.single-product #pxl-content-area div.product .woocommerce-gallery {
		margin-bottom: 20px;
	}
}

/* =====================================================================
   3. Carte résumé (titre, prix, extrait, métas, partage, panier)
   ===================================================================== */

body.single-product .woocommerce-summary-inner {
	border: 1px solid var(--vv-filet);
	padding: 48px;
}

@media (max-width: 1200px) {
	body.single-product .woocommerce-summary-inner {
		padding: 36px;
	}
}

@media (max-width: 991px) {
	body.single-product .woocommerce-summary-inner {
		padding: 28px;
	}
}

@media (max-width: 767px) {
	body.single-product .woocommerce-summary-inner {
		padding: 26px 22px;
	}
}

@media (max-width: 400px) {
	body.single-product .woocommerce-summary-inner {
		padding: 22px 18px;
	}
}

/* la carte s'étire à la hauteur de l'image : l'espace libre se place entre les
   métas et le bloc panier (form.cart { margin-top: auto } du thème), il ne faut
   pas qu'il dépasse une certaine mesure sous 992 px où la colonne est étroite */
body.single-product #pxl-content-area div.product .entry-summary {
	min-width: 0;
}

/* --- titre + prix ---------------------------------------------------- */

/* Côte à côte à partir de 1200 px, empilés en dessous : dans une colonne de
   moins de 560 px, un titre de trois mots en capitales et un prix à 40 px ne
   tiennent pas sur la même ligne. */
body.single-product .woocommerce-sg-product-title-price-wrapper {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px 28px;
}

@media (min-width: 1200px) {
	body.single-product .woocommerce-sg-product-title-price-wrapper {
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
	}
}

body.single-product .woocommerce-sg-product-title {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	color: var(--vv-navy);
	font-size: clamp(27px, 1.15rem + 1.55vw, 44px);
	line-height: 1.12;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

body.single-product .woocommerce-sg-product-price {
	flex: 0 0 auto;
	margin: 0;
	text-align: left;
	white-space: nowrap;
}

@media (min-width: 1200px) {
	body.single-product .woocommerce-sg-product-price {
		margin-top: 6px;
		text-align: right;
	}
}

body.single-product .woocommerce-sg-product-price p.price,
body.single-product .woocommerce-sg-product-price p,
body.single-product .woocommerce-sg-product-price p.price .price {
	font-size: clamp(24px, 0.9rem + 1.25vw, 38px) !important;
	line-height: 1.2;
	text-align: inherit !important;
	color: var(--vv-navy) !important;
	font-weight: 500 !important;
}

/* --- extrait court (« 1 h 30 · 89 € ») ------------------------------- */

body.single-product #pxl-content-area div.product .entry-summary .woocommerce-sg-product-excerpt {
	border-top: 1px solid var(--vv-filet);
	margin-top: 22px;
	padding-top: 22px;
	margin-bottom: 22px;
	font-size: 18px;
	color: var(--vv-navy);
}

@media (max-width: 767px) {
	body.single-product #pxl-content-area div.product .entry-summary .woocommerce-sg-product-excerpt {
		margin-top: 18px;
		padding-top: 18px;
		margin-bottom: 18px;
		font-size: 17px;
	}
}

/* --- référence, catégorie, partage ----------------------------------- */

body.single-product #pxl-content-area div.product .entry-summary .woocommerce-product-info-meta {
	color: var(--vv-navy);
	gap: 6px;
	overflow-wrap: anywhere;
}

body.single-product #pxl-content-area div.product .entry-summary .woocommerce-product-info-meta .title,
body.single-product #pxl-content-area div.product .entry-summary .woocommerce-social-share .title {
	color: var(--vv-texte);
}

body.single-product #pxl-content-area div.product .entry-summary .woocommerce-product-info-meta a {
	color: var(--vv-navy);
}

body.single-product #pxl-content-area div.product .entry-summary .woocommerce-product-info-meta a:hover {
	color: var(--vv-dore);
}

body.single-product #pxl-content-area div.product .entry-summary .woocommerce-social-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin-top: 6px;
	color: var(--vv-navy);
}

body.single-product #pxl-content-area div.product .entry-summary .woocommerce-social-share a {
	color: var(--vv-navy);
}

body.single-product #pxl-content-area div.product .entry-summary .woocommerce-social-share a:hover {
	color: var(--vv-dore);
}

/* la puce entre deux réseaux était olive */
body.single-product #pxl-content-area div.product .entry-summary .woocommerce-social-share a + a:before {
	background-color: var(--vv-filet);
}

/* --- quantité ---------------------------------------------------------- */

/* Prestation vendue à l'unité : WooCommerce rend le champ en type="hidden",
   mais le thème imprime quand même « Qté : » et greffe les icônes « - / + »
   par JavaScript, d'où une ligne cassée. On retire tout le bloc. */
body.single-product #pxl-content-area div.product .wooc-product-quantity:has(input.qty[type="hidden"]) {
	display: none;
}

/* Sinon : sous 480 px le thème réduit la boîte à 100 px alors que le champ
   (45 px) et ses deux marges de 45 px en demandent 135, et le « + » se posait
   sur le nombre. Largeur fixe à tous les points de rupture. */
body.single-product #pxl-content-area div.product .wooc-product-quantity {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 8px;
}

body.single-product #pxl-content-area div.product .wooc-product-quantity .quantity-label {
	margin: 0;
	font-family: "Melodrama", serif;
	font-size: 22px;
	color: var(--vv-navy);
}

body.single-product #pxl-content-area div.product .wooc-product-quantity .quantity {
	width: 137px !important;
	max-width: 137px;
	border-color: var(--vv-filet);
}

body.single-product #pxl-content-area div.product .wooc-product-quantity .quantity .qty {
	margin: 0 45px;
	text-align: center;
	border: 0;
	background: transparent;
	color: var(--vv-navy);
}

body.single-product #pxl-content-area div.product .wooc-product-quantity .quantity .quantity-icon.quantity-down,
body.single-product #pxl-content-area div.product .wooc-product-quantity .quantity .quantity-icon.quantity-up {
	border-color: var(--vv-filet);
}

body.single-product #pxl-content-area div.product .wooc-product-quantity .quantity .quantity-icon.quantity-down {
	left: 0;
}

/* --- ajouter au panier + liste de souhaits ------------------------------ */

/* Système de boutons des pages Villa Victoria : sur fond clair, bouton navy à
   texte blanc, doré au survol ; secondaire bordé navy. */
/* trois enfants : le bloc quantité (sur sa propre ligne), le bouton et le cœur
   (sur la ligne suivante, le bouton prenant toute la place restante) */
body.single-product #pxl-content-area div.product .woocommerce-add-to-cart-wrapper {
	gap: 16px 12px;
	margin-top: 28px;
	flex-wrap: wrap;
	align-items: center;
}

body.single-product #pxl-content-area div.product .woocommerce-add-to-cart-wrapper .wooc-product-quantity {
	flex: 0 0 100%;
	margin: 0;
}

body.single-product #pxl-content-area div.product button.single_add_to_cart_button {
	flex: 1 1 calc(100% - 72px);
	min-width: 0;
	margin: 0;
	height: 60px;
	padding: 0 18px;
	background-color: var(--vv-navy);
	border: 1px solid var(--vv-navy);
	color: #fff;
	font-family: "Jost", sans-serif;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: normal;
	line-height: 1.2;
}

body.single-product #pxl-content-area div.product button.single_add_to_cart_button:hover,
body.single-product #pxl-content-area div.product button.single_add_to_cart_button:focus-visible,
body.single-product #pxl-content-area div.product button.single_add_to_cart_button.added,
body.single-product #pxl-content-area div.product button.single_add_to_cart_button.loading {
	background-color: var(--vv-dore);
	border-color: var(--vv-dore);
	color: #fff;
}

body.single-product #pxl-content-area div.product .wooc-product-meta {
	flex: 0 0 auto;
	margin: 0;
}

body.single-product #pxl-content-area div.product .wooc-product-meta .wishlist button {
	width: 60px;
	height: 60px;
	border: 1px solid var(--vv-navy) !important;
	background-color: transparent;
}

body.single-product #pxl-content-area div.product .wooc-product-meta .wishlist button svg {
	width: 24px;
	height: 24px;
}

body.single-product #pxl-content-area div.product .wooc-product-meta .wishlist button svg path {
	stroke: var(--vv-navy);
}

body.single-product #pxl-content-area div.product .wooc-product-meta .wishlist button:hover,
body.single-product #pxl-content-area div.product .wooc-product-meta .wishlist button.woosw-added {
	background-color: var(--vv-navy);
	border-color: var(--vv-navy);
}

body.single-product #pxl-content-area div.product .wooc-product-meta .wishlist button:hover svg path,
body.single-product #pxl-content-area div.product .wooc-product-meta .wishlist button.woosw-added svg path {
	stroke: #fff;
	fill: #fff;
}

/* le bouton « Ajouter à ma liste » textuel que l'extension imprime en plus
   est déjà masqué par le thème dans .entry-summary ; le même bouton se glisse
   aussi dans les cartes des produits similaires */
body.single-product section.related li.product > .woosw-btn {
	display: none !important;
}

/* --- messages en tête de fiche ------------------------------------------ */

/* « … a été ajouté à votre panier » (woocommerce-message) et, la prestation
   étant vendue à l'unité, « Vous ne pouvez pas ajouter un autre … »
   (woocommerce-error, une liste). Le thème ne met en forme que le premier ;
   le second gardait le style brut de WooCommerce (pictogramme, filet rouge,
   bouton flottant à droite qui sortait du cadre sur mobile). */
body.single-product .woocommerce-notices-wrapper .woocommerce-message,
body.single-product .woocommerce-notices-wrapper .woocommerce-info,
body.single-product .woocommerce-notices-wrapper .woocommerce-error {
	margin: 0 0 32px;
	padding: 18px 20px;
	border-top: 2px solid var(--vv-navy);
	background-color: var(--vv-ivoire);
	color: var(--vv-navy);
	list-style: none;
}

body.single-product .woocommerce-notices-wrapper .woocommerce-error {
	border-top-color: var(--vv-dore);
}

body.single-product .woocommerce-notices-wrapper .woocommerce-message:before,
body.single-product .woocommerce-notices-wrapper .woocommerce-info:before,
body.single-product .woocommerce-notices-wrapper .woocommerce-error:before {
	display: none;
}

body.single-product .woocommerce-notices-wrapper .woocommerce-message,
body.single-product .woocommerce-notices-wrapper .woocommerce-info,
body.single-product .woocommerce-notices-wrapper .woocommerce-error li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 20px;
	line-height: 1.5;
}

body.single-product .woocommerce-notices-wrapper .woocommerce-message a.button,
body.single-product .woocommerce-notices-wrapper .woocommerce-info a.button,
body.single-product .woocommerce-notices-wrapper .woocommerce-error a.button {
	order: 2;
	float: none;
	margin: 0;
	padding: 0 22px;
	line-height: 44px;
	background-color: var(--vv-navy);
	border: 1px solid var(--vv-navy);
	color: #fff;
	font-size: 14px;
	text-transform: none;
	white-space: nowrap;
}

body.single-product .woocommerce-notices-wrapper .woocommerce-message a.button:hover,
body.single-product .woocommerce-notices-wrapper .woocommerce-info a.button:hover,
body.single-product .woocommerce-notices-wrapper .woocommerce-error a.button:hover {
	background-color: var(--vv-dore);
	border-color: var(--vv-dore);
	color: #fff;
}

/* =====================================================================
   4. Onglets Description / Avis
   ===================================================================== */

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

/* WooCommerce (.woocommerce div.product .woocommerce-tabs ul.tabs) décale la
   liste de 1em vers la droite : les onglets n'étaient plus alignés sur le
   texte du panneau */
body.single-product div.product .woocommerce-tabs ul.tabs.wc-tabs {
	gap: 48px;
	padding: 0;
	margin: 0 0 28px;
	border-bottom-color: var(--vv-filet);
	flex-wrap: wrap;
	overflow: visible;
}

body.single-product .woocommerce-tabs .wc-tabs li {
	padding-bottom: 18px !important;
	margin: 0 !important;
}

body.single-product .woocommerce-tabs .wc-tabs li a {
	padding: 0 !important;
	color: var(--vv-navy) !important;
}

body.single-product .woocommerce-tabs .wc-tabs li:after {
	background-color: var(--vv-navy) !important;
}

body.single-product .woocommerce-tabs .woocommerce-Tabs-panel {
	padding: 0;
	max-width: 900px;
}

body.single-product .woocommerce-tabs .woocommerce-Tabs-panel h2 {
	color: var(--vv-navy);
}

body.single-product .woocommerce-tabs .woocommerce-Tabs-panel p {
	color: var(--vv-texte);
}

@media (max-width: 767px) {
	body.single-product .woocommerce-tabs {
		margin-top: 40px;
	}
	body.single-product .woocommerce-tabs .wc-tabs {
		gap: 28px;
	}
	body.single-product .woocommerce-tabs .wc-tabs li a {
		font-size: 18px !important;
	}
}

/* --- formulaire d'avis ------------------------------------------------ */

body.single-product #reviews .comment-reply-title {
	display: block;
	font-size: 18px;
	color: var(--vv-navy);
	margin-bottom: 16px;
}

body.single-product #reviews .comment-form input[type="text"],
body.single-product #reviews .comment-form input[type="email"],
body.single-product #reviews .comment-form textarea,
body.single-product #reviews .comment-form select {
	width: 100%;
	max-width: 100%;
	border-color: var(--vv-filet);
}

/* le thème le dessine en bouton secondaire (transparent, filet gris bleuté) ;
   c'est l'action principale du formulaire, donc navy plein */
body.single-product #reviews .comment-form .form-submit input#submit {
	width: auto;
	background-color: var(--vv-navy) !important;
	border: 1px solid var(--vv-navy) !important;
	color: #fff !important;
	text-transform: none;
}

body.single-product #reviews .comment-form .form-submit input#submit:hover {
	background-color: var(--vv-dore) !important;
	border-color: var(--vv-dore) !important;
}

/* =====================================================================
   5. Produits similaires
   ===================================================================== */

body.single-product section.related {
	margin-top: 88px;
}

body.single-product section.related .related-products-header {
	flex-wrap: wrap;
	gap: 16px 32px;
	margin-bottom: 44px;
}

body.single-product section.related h2,
body.single-product section.related .related-products-header h2 {
	margin: 0;
	color: var(--vv-navy);
	font-size: clamp(30px, 1.2rem + 3vw, 60px);
	line-height: 1.05;
	overflow-wrap: anywhere;
}

/* « Toute la boutique », bouton secondaire ajouté par le thème en JavaScript */
body.single-product section.related .related-products-header a.btn {
	text-transform: none;
	white-space: nowrap;
}

body.single-product section.related .related-products-header .btn.btn-outline .pxl--text-wrap,
body.single-product section.related .related-products-header a.btn.btn-outline {
	border-color: var(--vv-navy);
	color: var(--vv-navy);
}

body.single-product section.related .related-products-header a.btn.btn-outline:hover {
	background-color: var(--vv-navy);
	color: #fff;
}

@media (max-width: 767px) {
	body.single-product section.related {
		margin-top: 64px;
	}
	body.single-product section.related .related-products-header {
		margin-bottom: 28px;
	}
}

/* Grille : 4 colonnes dès 992 px, 2 entre 576 et 991 (le thème en mettait 3,
   soit trois cartes et une orpheline), 1 en dessous. */
body.single-product section.related ul.products {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -15px;
	padding: 0;
}

body.single-product section.related ul.products li.product {
	float: none !important;
	clear: none !important;
	width: 25% !important;
	padding: 0 15px;
	margin: 0 0 32px !important;
}

@media (max-width: 991px) {
	body.single-product section.related ul.products li.product {
		width: 50% !important;
	}
}

@media (max-width: 575px) {
	body.single-product section.related ul.products {
		margin: 0;
	}
	body.single-product section.related ul.products li.product {
		width: 100% !important;
		padding: 0;
	}
}

/* Vignette : carrée, quelle que soit la largeur de colonne (le thème forçait
   373 px de haut, d'où des visuels étirés à 215 × 373 sur tablette). */
body.single-product .woocommerce .woocommerce-product-inner.woocommerce-product-inner-related img,
body.single-product section.related .woocommerce-product-inner img {
	width: 100%;
	height: auto !important;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center;
}

body.single-product section.related .woocommerce-product-inner .woocommerce-product-featured {
	margin-bottom: 18px;
}

body.single-product section.related .woocommerce-product-inner .woocommerce-product-title {
	margin-bottom: 6px;
}

body.single-product section.related .woocommerce-product-inner .woocommerce-product-title a {
	font-size: 22px;
	line-height: 1.25;
	color: var(--vv-navy);
}

body.single-product section.related .woocommerce-product-inner .woocommerce-product-title a:hover {
	color: var(--vv-dore);
}

body.single-product .woocommerce .woocommerce-product-inner.woocommerce-product-inner-related .woocommerce-product--price bdi {
	font-size: 16px !important;
	color: var(--vv-navy) !important;
}

@media (max-width: 767px) {
	body.single-product section.related .woocommerce-product-inner .woocommerce-product-title a {
		font-size: 20px;
	}
}

/* =====================================================================
   6. Marges de page
   ===================================================================== */

/* sous 1200 px le thème retire le padding du conteneur : le contenu touchait
   les bords sur tablette et mobile */
@media (max-width: 1200px) {
	body.single-product #pxl-content-main > .container {
		padding: 0 15px;
	}
}