/**
 * Villa Victoria — Panneau latéral du panier (#pxl-cart-sidebar)
 *
 * Le panneau existe en deux versions qui se remplacent l'une l'autre :
 * celle rendue avec la page (inc/theme-actions.php, croix « pxl-close-popup »)
 * et celle renvoyée après un ajout au panier en AJAX (woocommerce/wc-function.php,
 * croix « pxl-close »). La seconde écrase la première dans le DOM.
 *
 * Trois défauts corrigés ici :
 *  1. dans la version AJAX, la croix de fermeture est un « pxl-close » dont les
 *     deux barres sont peintes en blanc par le thème, sur un panneau blanc :
 *     invisible. Elle arrive en plus en tête d'une boîte flex, donc à gauche du
 *     titre. Les deux versions reçoivent désormais le même disque navy à croix
 *     blanche, rangé à droite ;
 *  2. le pied (sous-total et boutons) est en position absolue par-dessus la
 *     liste : au-delà de cinq ou six articles, les suivants passaient dessous.
 *     Le panneau devient une colonne flex dont seule la liste défile ;
 *  3. le panneau est large de 450 px fixes : sous 450 px de fenêtre, son bord
 *     gauche sortait de l'écran et les libellés étaient coupés.
 */

#pxl-cart-sidebar {
	--vv-navy: #0F1F34;
	--vv-texte: #5A6676;
	--vv-dore: #C39A6B;
	--vv-filet: #E6DFD4;
}

/* =====================================================================
   1. Croix de fermeture — disque navy, croix blanche, à droite du titre
   ===================================================================== */

#pxl-cart-sidebar .pxl-widget-cart-sidebar .widget_shopping_head .pxl-close-popup,
#pxl-cart-sidebar .pxl-widget-cart-sidebar .widget_shopping_head .pxl-close {
	/* « relative » et non « static » : les deux barres de la croix sont des
	   pseudo-éléments en position absolue, ils se caleraient sinon sur
	   l'en-tête entier (barres blanches au milieu du titre, donc invisibles) */
	position: relative;
	top: auto;
	right: auto;
	order: 2;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	margin: 0 0 0 auto;
	transform: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	/* « !important » : le thème et le CSS additionnel repeignent ces croix à
	   plusieurs endroits (popup de recherche, panneau de menu), et une barre
	   blanche sur un disque blanc est invisible — le cas signalé */
	background-color: var(--vv-navy) !important;
	border: 1px solid var(--vv-navy) !important;
	cursor: pointer;
	transition: background-color 0.25s ease, border-color 0.25s ease;
}

#pxl-cart-sidebar .pxl-widget-cart-sidebar .widget_shopping_head .pxl-close-popup:before,
#pxl-cart-sidebar .pxl-widget-cart-sidebar .widget_shopping_head .pxl-close-popup:after,
#pxl-cart-sidebar .pxl-widget-cart-sidebar .widget_shopping_head .pxl-close:before,
#pxl-cart-sidebar .pxl-widget-cart-sidebar .widget_shopping_head .pxl-close:after {
	background-color: #fff !important;
	width: 16px;
	height: 1.5px;
	top: 50%;
	left: 50%;
	margin-top: -0.75px;
	margin-left: -8px;
}

#pxl-cart-sidebar .pxl-widget-cart-sidebar .widget_shopping_head .pxl-close-popup:hover,
#pxl-cart-sidebar .pxl-widget-cart-sidebar .widget_shopping_head .pxl-close:hover {
	background-color: var(--vv-dore);
	border-color: var(--vv-dore);
}

/* la croix tourne au survol dans le thème : on garde l'intention, en gardant
   les deux barres en croix plutôt qu'à plat (plus lisible sur un disque) */
#pxl-cart-sidebar .pxl-widget-cart-sidebar .widget_shopping_head .pxl-close-popup:hover:before,
#pxl-cart-sidebar .pxl-widget-cart-sidebar .widget_shopping_head .pxl-close:hover:before {
	transform: rotate(135deg);
}

#pxl-cart-sidebar .pxl-widget-cart-sidebar .widget_shopping_head .pxl-close-popup:hover:after,
#pxl-cart-sidebar .pxl-widget-cart-sidebar .widget_shopping_head .pxl-close:hover:after {
	transform: rotate(45deg);
}

/* =====================================================================
   2. En-tête
   ===================================================================== */

#pxl-cart-sidebar .pxl-widget-cart-sidebar .widget_shopping_head {
	flex: 0 0 auto;
	gap: 16px;
	margin-bottom: 24px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--vv-filet);
}

#pxl-cart-sidebar .pxl-widget-cart-sidebar .widget_shopping_head .widget_shopping_title {
	order: 1;
	margin: 0;
	font-family: "Melodrama", serif;
	font-size: 24px;
	font-weight: 400;
	color: var(--vv-navy);
}

#pxl-cart-sidebar .pxl-widget-cart-sidebar .widget_shopping_head .widget_shopping_title .widget_cart_counter {
	font-family: "Jost", sans-serif;
	font-size: 13px;
	color: var(--vv-texte);
}

/* =====================================================================
   3. Colonne : seule la liste défile, le pied reste en bas
   ===================================================================== */

#pxl-cart-sidebar .pxl-widget-cart-sidebar .widget_shopping_cart {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	width: 100%;
	/* le thème ne laissait que ses 30 px de marge interne sous « Commander » :
	   le bouton paraissait collé au bas de l'écran */
	padding-bottom: 48px;
}

#pxl-cart-sidebar .pxl-widget-cart-sidebar .widget_shopping_cart_content {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	margin-right: -12px;
	padding-right: 12px;
}

#pxl-cart-sidebar .pxl-widget-cart-sidebar .widget_shopping_cart .widget_shopping_cart_footer {
	position: static;
	flex: 0 0 auto;
	bottom: auto;
	left: auto;
	right: auto;
	padding: 0;
	margin-top: 20px;
}

#pxl-cart-sidebar .pxl-widget-cart-sidebar .widget_shopping_cart .widget_shopping_cart_footer p.total {
	border-top: 1px solid var(--vv-filet);
	padding-top: 18px;
	margin-bottom: 18px;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	color: var(--vv-navy);
}

#pxl-cart-sidebar .pxl-widget-cart-sidebar .widget_shopping_cart .widget_shopping_cart_footer p.total strong {
	font-family: "Jost", sans-serif;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--vv-texte);
}

/* =====================================================================
   4. Articles
   ===================================================================== */

#pxl-cart-sidebar .pxl-widget-cart-sidebar .widget_shopping_cart .widget_shopping_cart_content .cart-product-image a {
	border-radius: 8px;
	overflow: hidden;
	background-color: #F7F4EE;
}

#pxl-cart-sidebar .pxl-widget-cart-sidebar .widget_shopping_cart .widget_shopping_cart_content .cart-product-meta h5,
#pxl-cart-sidebar .pxl-widget-cart-sidebar .widget_shopping_cart .widget_shopping_cart_content .cart-product-meta h6 {
	font-family: "Melodrama", serif;
	font-size: 19px;
	line-height: 1.25;
	margin-bottom: 8px;
	color: var(--vv-navy);
}

#pxl-cart-sidebar .pxl-widget-cart-sidebar .widget_shopping_cart .widget_shopping_cart_content .cart-product-meta .quantity {
	color: var(--vv-texte);
	font-size: 14px;
	border: none;
}

/* sur la page Panier (et les fiches produit), le script du thème greffe un
   sélecteur « - / + » dans tout élément « .quantity » : la ligne « 1 × 600 € »
   du panneau héritait de deux boutons inertes et de leurs filets */
#pxl-cart-sidebar .pxl-widget-cart-sidebar .widget_shopping_cart .cart-product-meta .quantity .quantity-icon {
	display: none;
}

#pxl-cart-sidebar .pxl-widget-cart-sidebar .widget_shopping_cart ul li + li {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid rgba(230, 223, 212, 0.7);
}

/* panier vide */
#pxl-cart-sidebar .pxl-widget-cart-sidebar .widget_shopping_cart ul li.empty i {
	color: rgba(15, 31, 52, 0.18);
}

#pxl-cart-sidebar .pxl-widget-cart-sidebar .widget_shopping_cart ul li.empty span {
	font-family: "Melodrama", serif;
	font-size: 20px;
	color: var(--vv-navy);
}

/* =====================================================================
   5. Boutons — « Commander » en plein navy, « Voir le panier » en secondaire
   ===================================================================== */

#pxl-cart-sidebar .pxl-widget-cart-sidebar .widget_shopping_cart a.btn {
	height: 52px;
	padding: 0 24px;
	font-family: "Jost", sans-serif;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	border: 1px solid var(--vv-navy);
	border-radius: 0;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

#pxl-cart-sidebar .pxl-widget-cart-sidebar .widget_shopping_cart a.btn.btn-shop.wc-forward {
	background-color: transparent;
	color: var(--vv-navy);
}

#pxl-cart-sidebar .pxl-widget-cart-sidebar .widget_shopping_cart a.btn.btn-shop.wc-forward:hover {
	background-color: var(--vv-navy);
	color: #fff;
}

#pxl-cart-sidebar .pxl-widget-cart-sidebar .widget_shopping_cart a.btn.checkout {
	background-color: var(--vv-navy);
	color: #fff;
}

#pxl-cart-sidebar .pxl-widget-cart-sidebar .widget_shopping_cart a.btn.checkout:hover {
	background-color: var(--vv-dore);
	border-color: var(--vv-dore);
	color: #fff;
}

/* =====================================================================
   6. Largeur du panneau
   ===================================================================== */

/* la barre de navigation mobile (vv-mobile-bottom-nav, 73 px de haut) est fixée
   au-dessus du panneau jusqu'à 1024 px : le pied lui réserve sa place, sinon
   « Commander » passait dessous */
@media screen and (max-width: 1024px) {
	#pxl-cart-sidebar .pxl-widget-cart-sidebar .widget_shopping_cart {
		/* 73 px de barre + les 40 px d'air du bas d'écran */
		padding-bottom: 113px;
	}
}

@media screen and (max-width: 480px) {
	#pxl-cart-sidebar .pxl-widget-cart-sidebar {
		width: 100%;
	}

	#pxl-cart-sidebar .pxl-widget-cart-sidebar .widget_shopping_cart {
		width: 100%;
		/* le bas garde la place de la barre de navigation mobile (73 px) */
		padding: 24px 20px 113px;
	}

	#pxl-cart-sidebar .pxl-widget-cart-sidebar .widget_shopping_head {
		margin-left: -20px;
		margin-right: -20px;
		padding-left: 20px;
		padding-right: 20px;
	}
}