/**
 * Colonne de filtres de la boutique.
 *
 * Sections déroulantes, typographie reprise des accordéons de la fiche produit
 * (neue-haas-unica en capitales espacées), filets et repères en taupe de charte.
 */

#secondary .widget.yith-woocommerce-ajax-product-filter,
#secondary .widget.yith-wcan-list-price-filter,
#secondary .widget.yith-wcan-stock-on-sale {
	--glow-taupe: #846f57;
	--glow-filet: rgba(162, 144, 123, 0.32);
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--glow-filet);
}

/* En-tête de section */
#secondary .widget .widget-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	padding: 15px 0;
	font-family: neue-haas-unica, sans-serif;
	font-size: 11.5px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: #1c1c1c;
	cursor: pointer;
	transition: color 0.2s ease;
}

#secondary .widget .widget-title:hover {
	color: var(--glow-taupe);
}

/* Chevron dessiné, l'élément fourni par YITH est vide */
#secondary .widget .widget-title .widget-dropdown {
	/* YITH rend une span : sans display en bloc, ni la taille ni la rotation ne s'appliquent. */
	display: block;
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	margin: -3px 2px 0 0;
	border-right: 1.2px solid var(--glow-taupe);
	border-bottom: 1.2px solid var(--glow-taupe);
	transform: rotate(45deg);
	transform-origin: center;
	transition: transform 0.25s ease;
}

#secondary .widget .widget-title.open .widget-dropdown {
	transform: rotate(-135deg);
	margin-top: 2px;
}

/* Listes */
#secondary .widget ul {
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
	max-height: 258px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--glow-filet) transparent;
}

#secondary .widget ul::-webkit-scrollbar {
	width: 3px;
}

#secondary .widget ul::-webkit-scrollbar-thumb {
	background: var(--glow-filet);
}

#secondary .widget ul li {
	position: relative;
	margin: 0;
	padding: 0 0 0 23px;
	list-style: none;
	font-size: 13px;
	line-height: 1.5;
}

#secondary .widget ul li::marker {
	content: none;
}

/* Repère de sélection, carré fin plutôt que puce ronde */
#secondary .widget ul li::before {
	content: "";
	position: absolute;
	top: 8px;
	left: 0;
	width: 11px;
	height: 11px;
	border: 1px solid var(--glow-filet);
	background: transparent;
	transition: border-color 0.2s ease, background 0.2s ease;
}

#secondary .widget ul li a {
	display: block;
	padding: 5px 0;
	font-family: neue-haas-unica, sans-serif;
	font-size: 13px;
	font-weight: 300;
	line-height: 1.5;
	color: rgba(0, 0, 0, 0.72);
	text-decoration: none;
	transition: color 0.2s ease;
}

#secondary .widget ul li:hover::before {
	border-color: var(--glow-taupe);
}

#secondary .widget ul li a:hover {
	color: var(--glow-taupe);
}

/* Terme actif */
#secondary .widget ul li.chosen::before,
#secondary .widget ul li.active::before,
#secondary .widget ul li.yith-wcan-current::before {
	border-color: var(--glow-taupe);
	background: var(--glow-taupe);
	box-shadow: inset 0 0 0 2px #fff;
}

#secondary .widget ul li.chosen > a,
#secondary .widget ul li.active > a,
#secondary .widget ul li.yith-wcan-current > a {
	font-weight: 400;
	color: var(--glow-taupe);
}

/* Compteurs */
#secondary .widget ul li .count,
#secondary .widget ul li small {
	margin-left: 6px;
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	color: var(--glow-taupe);
	opacity: 0.75;
}

/* Pastilles de couleur : grille compacte, pas de repère carré */
#secondary .widget ul.yith-wcan-color {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	max-height: none;
}

#secondary .widget ul.yith-wcan-color li {
	padding: 0;
	line-height: 0;
}

#secondary .widget ul.yith-wcan-color li::before {
	content: none;
}

#secondary .widget ul.yith-wcan-color li a {
	padding: 0;
}

/* Le lien porte lui-même la couleur en style en ligne : c'est lui la pastille. */
#secondary .widget ul.yith-wcan-color li a {
	display: block;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 1px solid rgba(162, 144, 123, 0.45);
	border-radius: 0;
	box-shadow: none;
	font-size: 0;
	line-height: 0;
	text-indent: -9999px;
	overflow: hidden;
}

#secondary .widget ul.yith-wcan-color li a:hover {
	border-color: var(--glow-taupe);
}

#secondary .widget ul.yith-wcan-color li.chosen a,
#secondary .widget ul.yith-wcan-color li.active a {
	outline: 1px solid var(--glow-taupe);
	outline-offset: 2px;
}

/* Tranches de prix et disponibilité : mêmes règles, sans compteur */
#secondary .widget.yith-wcan-list-price-filter ul,
#secondary .widget.yith-wcan-stock-on-sale ul {
	max-height: none;
}

@media (max-width: 992px) {

	#secondary .widget .widget-title {
		padding: 14px 0;
	}

	#secondary .widget ul {
		max-height: 220px;
	}
}

/**
 * État initial replié, rendu par le CSS et non par le script.
 *
 * Le script de YITH est différé par WP Rocket : sans cette règle, toutes les
 * sections s'affichent ouvertes au chargement puis se replient brutalement.
 * Le script pose ensuite un style en ligne qui prend le dessus.
 */
#secondary .widget .widget-title:has(.widget-dropdown[data-toggle="close"]) + ul,
#secondary .widget .widget-title:has(.widget-dropdown[data-toggle="close"]) ~ ul {
	display: none;
}

/* Sauf si la section porte un filtre actif : elle doit rester visible. */
#secondary .widget.widget:has( li.chosen, li.active, a.active, li.yith-wcan-current ) .widget-title + ul,
#secondary .widget.widget:has( li.chosen, li.active, a.active, li.yith-wcan-current ) .widget-title ~ ul {
	display: block;
}

/**
 * Section ouverte par le script.
 *
 * Chaque type de liste retrouve son mode d'affichage : les pastilles de
 * couleur et les boutons de disponibilité sont des conteneurs flex, les
 * imposer en bloc supprimerait leur gouttière.
 */
#secondary .widget.glow-filtre-ouvert.glow-filtre-ouvert.glow-filtre-ouvert .widget-title + ul,
#secondary .widget.glow-filtre-ouvert.glow-filtre-ouvert.glow-filtre-ouvert .widget-title ~ ul {
	display: block;
}

#secondary .widget.glow-filtre-ouvert.glow-filtre-ouvert.glow-filtre-ouvert .widget-title ~ ul.yith-wcan-color,
#secondary .widget.glow-filtre-ouvert.glow-filtre-ouvert.glow-filtre-ouvert .widget-title ~ ul.yith-wcan-stock-on-sale {
	display: flex;
}

/**
 * Étiquette de service (« Livraison Express »).
 *
 * Ce filtre ne porte qu'un seul terme et pas de titre de section : plutôt
 * qu'une ligne de liste perdue en bas de colonne, on en fait une étiquette
 * pleine largeur, lisible et vendeuse.
 */
#secondary .widget.glow-filtre-etiquette {
	border-bottom: none;
	padding: 18px 0 6px;
}

#secondary .widget.glow-filtre-etiquette ul {
	margin: 0;
	max-height: none;
	overflow: visible;
}

#secondary .widget.glow-filtre-etiquette li {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 0 11px;
	border: 1px solid rgba(162, 144, 123, 0.45);
	background: rgba(162, 144, 123, 0.11);
	transition: background 0.2s ease, border-color 0.2s ease;
}

#secondary .widget.glow-filtre-etiquette li::before {
	content: none;
}

#secondary .widget.glow-filtre-etiquette li .clear {
	display: none;
}

#secondary .widget.glow-filtre-etiquette li a {
	display: flex;
	align-items: center;
	gap: 9px;
	flex: 1 1 auto;
	padding: 12px 0;
	font-family: neue-haas-unica, sans-serif;
	/* Le libellé le plus long du réseau, « Spedizione express », doit tenir
	   sur une ligne dans une colonne de 177 px. */
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 0.8px;
	white-space: nowrap;
	line-height: 1.3;
	text-transform: uppercase;
	color: #6b5a45;
}

/* Éclair : promesse de rapidité, dessiné en SVG intégré */
#secondary .widget.glow-filtre-etiquette li a::before {
	content: "";
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	background-color: var(--glow-taupe);
	-webkit-mask: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13.5 2 4 13.6h6.2L9.4 22 20 9.9h-6.6z"/></svg>' ) center / contain no-repeat;
	mask: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13.5 2 4 13.6h6.2L9.4 22 20 9.9h-6.6z"/></svg>' ) center / contain no-repeat;
}

#secondary .widget.glow-filtre-etiquette li .count {
	flex: 0 0 auto;
	margin: 0;
	padding: 2px 7px;
	background: rgba(132, 111, 87, 0.14);
	font-size: 10.5px;
	font-variant-numeric: tabular-nums;
	color: #6b5a45;
	opacity: 1;
}

#secondary .widget.glow-filtre-etiquette li:hover {
	border-color: var(--glow-taupe);
	background: rgba(162, 144, 123, 0.2);
}

#secondary .widget.glow-filtre-etiquette li.chosen,
#secondary .widget.glow-filtre-etiquette li.active {
	border-color: var(--glow-taupe);
	background: var(--glow-taupe);
}

/* Le personnalisateur injecte en fin de page une règle « a { color } » qui
   reprend la main sur la couleur du lien : on la neutralise ici, uniquement
   pour l'étiquette active. */
#secondary .widget.glow-filtre-etiquette li.chosen a,
#secondary .widget.glow-filtre-etiquette li.chosen a:link,
#secondary .widget.glow-filtre-etiquette li.chosen a:visited,
#secondary .widget.glow-filtre-etiquette li.chosen a:hover,
#secondary .widget.glow-filtre-etiquette li.active a,
#secondary .widget.glow-filtre-etiquette li.active a:link,
#secondary .widget.glow-filtre-etiquette li.active a:visited,
#secondary .widget.glow-filtre-etiquette li.active a:hover,
#secondary .widget.glow-filtre-etiquette li.chosen .count,
#secondary .widget.glow-filtre-etiquette li.active .count {
	color: #fff !important;
}

#secondary .widget.glow-filtre-etiquette li.chosen a::before,
#secondary .widget.glow-filtre-etiquette li.active a::before {
	background-color: #fff;
}

#secondary .widget.glow-filtre-etiquette li.chosen .count,
#secondary .widget.glow-filtre-etiquette li.active .count {
	background: rgba(255, 255, 255, 0.22);
}

/**
 * Disponibilité : deux boutons plutôt que deux lignes de liste.
 *
 * Même vocabulaire que l'étiquette de service, en plus discret : contour seul
 * au repos, remplissage taupe une fois le filtre actif.
 */
#secondary .widget ul.yith-wcan-stock-on-sale {
	display: flex;
	flex-direction: column;
	gap: 7px;
	max-height: none;
	overflow: visible;
}

#secondary .widget ul.yith-wcan-stock-on-sale li {
	padding: 0;
}

#secondary .widget ul.yith-wcan-stock-on-sale li::before {
	content: none;
}

#secondary .widget ul.yith-wcan-stock-on-sale li a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 11px;
	border: 1px solid rgba(162, 144, 123, 0.4);
	font-family: neue-haas-unica, sans-serif;
	font-size: 10px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: #6b5a45;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

#secondary .widget ul.yith-wcan-stock-on-sale li a::before {
	content: "";
	flex: 0 0 auto;
	width: 13px;
	height: 13px;
	background-color: var(--glow-taupe);
	transition: background-color 0.2s ease;
}

/* Étiquette de prix pour la promotion */
#secondary .widget ul.yith-wcan-stock-on-sale li a.yith-wcan-onsale-button::before {
	-webkit-mask: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21 11.6 12.4 3H3v9.4l8.6 8.6zM7.2 8.7a1.6 1.6 0 1 1 0-3.2 1.6 1.6 0 0 1 0 3.2z"/></svg>' ) center / contain no-repeat;
	mask: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21 11.6 12.4 3H3v9.4l8.6 8.6zM7.2 8.7a1.6 1.6 0 1 1 0-3.2 1.6 1.6 0 0 1 0 3.2z"/></svg>' ) center / contain no-repeat;
}

/* Carton prêt à partir pour le stock */
#secondary .widget ul.yith-wcan-stock-on-sale li a.yith-wcan-instock-button::before {
	-webkit-mask: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2 3 6.4v11.2L12 22l9-4.4V6.4zm0 2.3 6.3 3.1L12 10.5 5.7 7.4zM5 9.2l6 3v7.2l-6-2.9zm8 10.2v-7.2l6-3v7.3z"/></svg>' ) center / contain no-repeat;
	mask: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2 3 6.4v11.2L12 22l9-4.4V6.4zm0 2.3 6.3 3.1L12 10.5 5.7 7.4zM5 9.2l6 3v7.2l-6-2.9zm8 10.2v-7.2l6-3v7.3z"/></svg>' ) center / contain no-repeat;
}

#secondary .widget ul.yith-wcan-stock-on-sale li a:hover {
	border-color: var(--glow-taupe);
	background: rgba(162, 144, 123, 0.11);
}

/* Filtre actif : YITH ajoute la classe « active » sur le lien */
#secondary .widget ul.yith-wcan-stock-on-sale li a.active,
#secondary .widget ul.yith-wcan-stock-on-sale li a.active:link,
#secondary .widget ul.yith-wcan-stock-on-sale li a.active:visited,
#secondary .widget ul.yith-wcan-stock-on-sale li a.active:hover {
	border-color: var(--glow-taupe);
	background: var(--glow-taupe);
	color: #fff !important;
}

#secondary .widget ul.yith-wcan-stock-on-sale li a.active::before {
	background-color: #fff;
}

/* ---------------------------------------------------------------
   Pastille « En promotion », jumelle de la livraison express
   ---------------------------------------------------------------
   Même gabarit, seule l'icône change : une étiquette de prix plutôt que
   l'éclair, pour que les deux se lisent comme une même famille de raccourcis
   sans dire la même chose. */

#secondary .widget.glow-filtre-etiquette--promo li a::before {
	-webkit-mask: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.6 12.3 12.3 4H4v8.3l8.3 8.3z"/><circle cx="8" cy="8" r="1.5" fill="white"/></svg>' ) center / contain no-repeat;
	mask: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.6 12.3 12.3 4H4v8.3l8.3 8.3z"/><circle cx="8" cy="8" r="1.5" fill="white"/></svg>' ) center / contain no-repeat;
}

/* Le widget de disponibilité rend un titre vide : on retire sa place. */
#secondary .widget.glow-filtre-etiquette--promo .widget-title {
	display: none;
}