/*
 * Surcharges du catalogue.
 *
 * Ce fichier est chargé après kirana/woocommerce.css, contrairement à
 * style.css : sans cela toutes les règles ci-dessous perdraient à
 * spécificité égale. Voir docs/plugins.md.
 */

/* Kirana dimensionne le compteur de résultats pour une pleine largeur, avec
   une largeur calculée en dur, un float et une marge haute. Dans la colonne
   produits, il déborde et décroche du haut de la colonne de filtres. */
.woocommerce .woocommerce-result-count {
	float: none;
	width: auto;
	margin-top: 0;
}

.woocommerce .woocommerce-ordering {
	margin-bottom: 24px;
}

/* Kirana affiche ce tooltip en pseudo-élément CSS, avec un libellé anglais
   codé en dur. Le HTML WooCommerce est déjà traduit via aria-label. */
.woocommerce li.product .kirana-product-icon-container .add_to_cart_button.product_type_simple:hover::before,
.woocommerce li.product .kirana-product-icon-container .wp-element-button.product_type_simple:hover::before {
	content: "Ajouter au panier";
	box-sizing: border-box;
	width: max-content;
	min-width: 116px;
	padding-right: 8px;
	padding-left: 8px;
	white-space: nowrap;
	z-index: 2;
}

.woocommerce li.product .kirana-product-icon-container .add_to_cart_button.added.product_type_simple:hover::before,
.woocommerce li.product .kirana-product-icon-container .wp-element-button.added.product_type_simple:hover::before {
	content: "Ajouté au panier";
}

.woocommerce ul.products li.product:has(.kirana-product-icon-container .add_to_cart_button.product_type_simple:hover),
.woocommerce ul.products li.product:has(.kirana-product-icon-container .wp-element-button.product_type_simple:hover) {
	overflow: visible;
	z-index: 3;
}

.woocommerce li.product .kirana-product-icon-container {
	z-index: 4;
}

/* WooCommerce pose la classe « outofstock » sur la carte mais n'affiche
   aucun libellé, et Kirana n'y remédie pas : dans la grille, un produit en
   rupture est indiscernable d'un produit disponible. Le libellé est posé par
   Fhema\Core\Catalog\StockBadge — il doit être traduisible, donc il ne peut
   pas venir d'un content CSS. */
.woocommerce ul.products li.product.outofstock {
	position: relative;
}

.woocommerce ul.products li.product.outofstock .fhema-stock-badge {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 2;
	padding: 4px 12px;
	border-radius: 4px;
	background-color: var(--wp--preset--color--kirana-black, #111111);
	color: var(--wp--preset--color--kirana-white, #ffffff);
	font-size: var(--wp--preset--font-size--small, 14px);
	line-height: 1.6;
}

.woocommerce ul.products li.product.outofstock .woocommerce-loop-product__link img {
	opacity: 0.55;
}

/* Les filtres sont des blocs, posés dans une colonne que Kirana ne connaît
   pas : sans contrainte, le curseur de prix déborde sur la grille. */
.wp-block-woocommerce-product-filters {
	max-width: 100%;
}

.wp-block-woocommerce-product-filters .wc-block-product-filter-price-slider {
	box-sizing: border-box;
	max-width: 100%;
}

/* WooCommerce dispose le libellé et son compteur en inline-flex. Tant que le
   libellé tient sur une ligne le compteur le suit, mais dès qu'il passe à la
   ligne il occupe toute la largeur : le compteur, devenu second élément
   flex, part à droite et se centre verticalement. En flux normal il suit le
   texte quel que soit le nombre de lignes. */
.wc-block-product-filter-checkbox-list__text-wrapper {
	display: block;
}

.wc-block-product-filter-checkbox-list__count {
	margin-left: 4px;
}

/* WooCommerce n'affiche qu'une notice sur une liste vide, sans chemin de
   retour. Fhema\Core\Catalog\NoResultsNotice la remplace ; la notice native
   étant stylée par Kirana, celle-ci doit l'être ici. */
.woocommerce .fhema-no-results {
	margin: 0;
	padding: 32px;
	border: 1px solid var(--wp--preset--color--color-2, #e5e5e5);
	border-radius: 8px;
	text-align: center;
}

.woocommerce .fhema-no-results__message {
	margin: 0 0 8px;
	font-size: var(--wp--preset--font-size--medium, 18px);
	font-weight: 600;
}

.woocommerce .fhema-no-results__hint {
	margin: 0 0 24px;
	color: var(--wp--preset--color--kirana-grey, #6b6b6b);
}

.woocommerce .fhema-no-results__link {
	display: inline-block;
}

/* Kirana réserve une bannière grise de 120 px au titre de la page de
   résultats (.search.search-results .woocommerce-products-header). Le gabarit
   affiche le titre en pleine largeur au-dessus des colonnes et décroche celui
   du template classique : sans cette remise à zéro, la colonne produits
   démarre sous 180 px de vide. */
.woocommerce.search.search-results .woocommerce-products-header {
	margin: 0;
	padding: 0;
	background-color: transparent;
}

/* Kirana style les « spans » du bloc méta en les nommant un à un : sans ces
   règles, la ligne « Producteur » ne ressemble pas à « Catégorie », posée
   juste au-dessus. */
.single-product .product .product_meta .fhema-producer-credit {
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--kirana-black);
}

.single-product .product .product_meta .fhema-producer-credit a {
	margin-left: 1rem;
	color: var(--wp--preset--color--kirana-grey);
	font-weight: 400;
	line-height: initial;
}

.single-product .product .product_meta .fhema-producer-credit a:hover {
	text-decoration: underline;
}