/* ==========================================================================
   Fortek — Habillage Boutique (cartes produits WooCommerce + filtres WOOF)
   Basé sur la maquette Figma catalogue, adapté à la palette Fortek.
   ========================================================================== */

:root {
	--fortek-blue: #2482D9;
	--fortek-navy: #0E2A55;
	--fortek-gold: #F1D350;
	--fortek-green: #22A373;
	--fortek-line: #E4ECF7;
	--fortek-paper: #F6F9FD;
}

/* ---- Grille de produits (cartes) ---- */

/* Le conteneur reste en display:flex imposé par WOOF (impossible à faire gagner
   en display:grid, quelle que soit la spécificité utilisée — une règle encore
   plus prioritaire côté WOOF le réimpose systématiquement). On travaille donc
   AVEC flex plutôt que de se battre contre : largeur explicite en % sur chaque
   carte, qui fonctionne quel que soit le mode d'affichage gagnant. */
html body ul.products {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 20px !important;
}

html body ul.products li.product {
	/* Neutralise l'ancien système de grille par flottaison du thème */
	float: none !important;
	clear: none !important;

	/* Largeur explicite plutôt que grid-template-columns/flex-basis : une seule
	   propriété "width" simple gagne de façon fiable, peu importe si le parent
	   est en flex ou en grid. 4 cartes par ligne sur desktop, 2 sur mobile. */
	flex: 0 0 auto !important;
	width: calc(25% - 15px) !important;
	max-width: calc(25% - 15px) !important;

	position: relative !important;
	background: #fff !important;
	border: 1px solid var(--fortek-line) !important;
	border-radius: 16px !important;
	padding: 16px 16px 56px !important; /* padding-bottom réservé pour le bouton flottant */
	box-shadow: 0 4px 16px rgba(14, 42, 85, 0.05) !important;
	transition: transform 0.15s, box-shadow 0.15s;
	list-style: none !important;
	margin: 0 !important;
	box-sizing: border-box !important;
	/* Piège classique CSS Grid : sans min-width:0, un titre trop long empêche la
	   carte de rétrécir et fait exploser sa largeur (et celle de toute la ligne). */
	min-width: 0 !important;
	overflow: hidden !important;
}

/* Le lien qui enveloppe image+titre+prix doit aussi être contraint : sans ça,
   son propre contenu (le titre) continue de pousser la largeur de la carte
   même si la carte elle-même a min-width:0. */
html body ul.products li.product > a.woocommerce-loop-product__link {
	display: block !important;
	min-width: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	overflow: hidden !important;
}

ul.products::before,
ul.products::after {
	display: none !important;
	content: none !important;
}

ul.products li.product:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(14, 42, 85, 0.12) !important;
}

ul.products li.product img {
	border-radius: 10px !important;
	background: var(--fortek-paper);
	width: 100% !important;
	height: auto !important;
	margin-bottom: 12px !important;
}

ul.products li.product .woocommerce-loop-product__title {
	font-size: 15px !important;
	font-weight: 700 !important;
	color: var(--fortek-navy) !important;
	line-height: 1.35;
	margin: 0 0 8px !important;
	/* Titres produit très longs -> hauteur fixe = 2 lignes, coupées proprement.
	   (la technique -webkit-line-clamp se comportait mal ici : 3e ligne visible,
	   coupée à la serpe par le débordement du parent — hauteur fixe est plus fiable). */
	line-height: 1.35 !important;
	max-height: 41px !important;
	overflow: hidden !important;
	width: 100% !important;
	min-width: 0 !important;
	/* overflow-wrap (pas word-break) : ne casse un mot en plein milieu qu'en tout
	   dernier recours, s'il ne tient vraiment pas sur sa propre ligne — sinon la
	   coupure se fait proprement entre les mots. */
	overflow-wrap: break-word;
	word-break: normal;
}

ul.products li.product .star-rating {
	color: var(--fortek-gold) !important;
	font-size: 13px !important;
	margin-bottom: 10px !important;
}

/* Le prix reste dans le lien image/titre (structure WooCommerce), mais on lui
   laisse une marge à droite pour ne jamais passer sous le bouton flottant. */
ul.products li.product .price {
	display: block;
	margin: 0 !important;
	padding-right: 84px !important;
	font-size: 15px !important;
}

ul.products li.product .price ins {
	text-decoration: none;
	color: var(--fortek-navy) !important;
	font-weight: 800 !important;
}

ul.products li.product .price del {
	color: #9AA7BD !important;
	font-weight: 400 !important;
	font-size: 13px !important;
	opacity: 1 !important;
}

ul.products li.product .price:not(:has(del)) {
	color: var(--fortek-navy) !important;
	font-weight: 800 !important;
}

/* Bouton "Ajouter au panier" — pilule compacte flottante, alignée avec le prix
   (le bouton est un frère du lien image/titre/prix dans le HTML WooCommerce,
   pas un enfant — on l'ancre donc en position absolue plutôt qu'en flux normal). */
html body ul.products li.product a.add_to_cart_button,
html body ul.products li.product a.button {
	position: absolute !important;
	right: 16px !important;
	bottom: 16px !important;
	display: inline-block !important;
	width: auto !important;
	text-align: center !important;
	background: #fff !important;
	color: var(--fortek-blue) !important;
	font-weight: 700 !important;
	font-size: 12.5px !important;
	padding: 8px 16px !important;
	border-radius: 100px !important;
	border: 1.5px solid var(--fortek-blue) !important;
	text-transform: none !important;
	white-space: nowrap !important;
}

ul.products li.product a.add_to_cart_button:hover,
ul.products li.product a.button:hover {
	background: var(--fortek-blue) !important;
	color: #fff !important;
}

/* Badge "Promo !" natif WooCommerce -> pastille arrondie en coin, comme la maquette */
html body ul.products li.product .onsale {
	position: absolute !important;
	top: 12px !important;
	right: 12px !important;
	background: #E14F4F !important;
	color: #fff !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	padding: 5px 12px !important;
	border-radius: 100px !important;
	margin: 0 !important;
	line-height: 1.4 !important;
	min-height: 0 !important;
	min-width: 0 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.02em;
}

/* ---- Filtres WOOF (barre latérale) ---- */

html body .woof_container {
	background: #fff !important;
	border: 1px solid var(--fortek-line) !important;
	border-radius: 14px !important;
	padding: 18px 20px !important;
	margin-bottom: 16px !important;
	overflow: visible !important;
}

.woof_container_inner h4,
.woof_container_inner .woof_heading {
	font-size: 14px !important;
	font-weight: 700 !important;
	color: var(--fortek-navy) !important;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin: 0 0 12px !important;
	padding-bottom: 10px !important;
	border-bottom: 1px solid var(--fortek-line) !important;
}

.woof_container label {
	font-size: 13.5px !important;
	color: var(--fortek-navy) !important;
	display: flex !important;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px !important;
}

.woof_container input[type="checkbox"] {
	accent-color: var(--fortek-blue);
	width: 16px;
	height: 16px;
}

/* Curseur de prix WOOF (si rendu via jQuery UI slider) */
.woof_container .ui-slider,
.woof_container .price_slider {
	background: var(--fortek-line) !important;
	border: none !important;
	height: 4px !important;
	border-radius: 100px !important;
}

.woof_container .ui-slider-range {
	background: var(--fortek-blue) !important;
}

.woof_container .ui-slider-handle {
	background: #fff !important;
	border: 3px solid var(--fortek-blue) !important;
	border-radius: 50% !important;
	width: 16px !important;
	height: 16px !important;
	top: -6px !important;
}

@media (max-width: 991px) {
	html body ul.products li.product {
		width: calc(33.333% - 14px) !important;
		max-width: calc(33.333% - 14px) !important;
	}
}

@media (max-width: 767px) {
	html body ul.products li.product {
		width: calc(50% - 10px) !important;
		max-width: calc(50% - 10px) !important;
	}
}

@media (max-width: 480px) {
	html body ul.products li.product {
		width: 100% !important;
		max-width: 100% !important;
	}
}