/* Disfrais - Boutique : refonte visuelle complète (palette + mise en page) */

:root {
	--df-cream: #F8F3EA;
	--df-dark: #211D18;
	--df-dark-soft: #2C2620;
	--df-gold: #C9973E;
	--df-gold-dark: #AD7F2E;
	--df-text: #2B2925;
	--df-text-muted: #6B655A;
	--df-white: #FFFFFF;
	--df-border: rgba(0,0,0,.08);
}

/* --- Bandeaux hero (boutique + pages catégorie) : masqués pour une boutique
   sobre. Deux templates Elementor différents gèrent /shop/ et les archives
   de catégorie, chacun avec son propre ID de section pour le bandeau. --- */
.elementor-element-ada377d,
.elementor-element-fe6aec4 {
	display: none !important;
}

/* Ces templates utilisaient une astuce Elementor classique : une carte plus
   bas dans la mise en page a une marge négative (margin-top) pour venir se
   superposer visuellement à la photo du bandeau hero ci-dessus. Le hero étant
   maintenant masqué (display:none, hors flux), cette marge négative n'a plus
   rien pour "absorber" son remous : elle remonte par propagation de marges
   jusqu'à la racine du template Elementor tout entier, qui se retrouve tirée
   vers le haut sous le header du site (chevauchement visible en haut de
   toutes les pages boutique/catégorie). display:flow-root crée un nouveau
   contexte de mise en page qui bloque cette propagation vers l'extérieur,
   sans "clipper" le contenu comme le ferait overflow:hidden. */
.elementor-5880,
.elementor-5594 {
	display: flow-root !important;
}

/* La section "Retrouvez l'ensemble de nos gammes..." (boutique) et la carte
   équivalente sur les pages catégorie avaient elles-mêmes une marge négative
   (margin-top:-120px/-200px) pour venir chevaucher le bas de la photo hero.
   flow-root ci-dessus empêche cette marge de "fuir" hors du template, mais
   ces deux sections précises restent elles-mêmes tirées vers le haut en
   interne (jusque sous le header) puisque le hero qu'elles chevauchaient
   n'existe plus. On neutralise leur propre marge pour qu'elles reprennent
   une position normale, sans toucher au texte qu'elles affichent. */
.elementor-element-b0be7ad,
.elementor-element-6d37762 {
	margin-top: 0 !important;
}

/* --- Grille produits : 5 colonnes, vignettes en médaillon inséré dans la
   carte (au lieu d'une photo à bord vif collée aux 4 côtés) --- */
/* WooCommerce espace les produits en donnant à chaque <li> un pourcentage de
   largeur et une marge intérieure (padding: 0 2vw 3em 0) qui tient lieu de
   gouttière. Ce modèle suppose que le fond de la carte est porté par un
   enfant du <li> ; ici il est porté par le <li> lui-même, et cette marge
   devient donc la marge INTÉRIEURE de la carte : les cartes se retrouvent
   collées les unes aux autres. La grille prend en charge l'espacement, le
   <li> n'a plus qu'à être une carte. */
.woocommerce ul.products.columns-5 {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.woocommerce ul.products.columns-5::before,
.woocommerce ul.products.columns-5::after {
	content: none;
}
.woocommerce ul.products.columns-5 li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
}
.woocommerce ul.products li.product > a:first-child {
	display: block;
	overflow: hidden;
	border-radius: 12px;
	background: var(--df-cream);
}
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product .woocommerce-loop-product__link img {
	aspect-ratio: 1 / 1;
	width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: 12px;
	transition: transform .35s ease;
}
.woocommerce ul.products li.product:hover img {
	transform: scale(1.05);
}

/* Carte produit : coins bien arrondis, ombre douce, photo en médaillon avec
   une marge intérieure plutôt que collée aux bords de la carte. */
.woocommerce ul.products li.product {
	font-size: 13px;
	background: var(--df-white);
	border-radius: 16px;
	box-shadow: 0 2px 12px rgba(33,29,24,.07);
	padding: 12px 12px 16px;
	transition: box-shadow .2s ease, transform .2s ease;

	/* Le thème affiche le prix ET le bouton d'ajout dans un seul et même
	   callback (vamtam_woocommerce_after_shop_loop_item_title, priorité 10) :
	   aucune priorité de hook ne permet donc d'insérer la pastille de
	   disponibilité entre les deux. La carte passe en colonne flex pour que
	   l'ordre d'affichage soit fixé ici — photo, titre, référence, prix,
	   disponibilité, bouton — sans toucher aux templates du thème. */
	display: flex;
	flex-direction: column;
}
.woocommerce ul.products li.product > * {
	order: 2;
}
.woocommerce ul.products li.product .df-loop-stock {
	order: 3;
}
.woocommerce ul.products li.product .vamtam-add-to-cart-wrap,
.woocommerce ul.products li.product > a.button,
.woocommerce ul.products li.product a.added_to_cart {
	order: 4;
}
.woocommerce ul.products li.product:hover {
	box-shadow: 0 14px 28px rgba(33,29,24,.14);
	transform: translateY(-3px);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 14px;
	padding: 0 6px;
	margin-top: 12px;
}
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .disfrais-price-locked {
	padding: 0 6px;
}

/* Référence + colisage, sous le titre. */
.woocommerce ul.products li.product .df-loop-meta {
	padding: 0 6px;
	margin-top: 4px;
	font-size: 11px;
	line-height: 1.45;
	letter-spacing: .04em;
	color: var(--df-text-muted);
}

/* Prix : le montant en gros, l'unité de facturation en petit à côté. */
.woocommerce ul.products li.product .price {
	margin-top: 6px;
	font-size: 16px;
	font-weight: 700;
	color: var(--df-dark);
}
.woocommerce ul.products li.product .price .df-price-suffix {
	margin-left: 5px;
	font-size: 11px;
	font-weight: 500;
	color: var(--df-text-muted);
	white-space: nowrap;
}

/* Pastille de disponibilité. */
.woocommerce ul.products li.product .df-loop-stock {
	display: inline-block;
	margin: 6px 6px 0;
	padding: 3px 8px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.df-loop-stock--in {
	background: rgba(45,122,74,.12);
	color: #2D7A4A;
}
.df-loop-stock--pre {
	background: rgba(201,151,62,.18);
	color: var(--df-gold-dark);
}
.df-loop-stock--out {
	background: rgba(33,29,24,.08);
	color: var(--df-text-muted);
}

/* Titre sur trois lignes : hauteur fixe pour que prix, pastille et bouton
   restent alignés d'une carte à l'autre malgré des noms de longueurs très
   inégales (le catalogue va de "MAROILLES" à des intitulés de 80 caractères).

   Le titre de la boucle est un <h2> : il hérite donc de la typographie de
   titre du site (Cormorant en petites capitales, via les variables globales
   Elementor), alors que la maquette veut la police d'interface. Les valeurs
   sont forcées ici, sinon les règles globales du thème l'emportent. */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 3.9em;
	margin: 0 !important;
	padding: 0 6px !important;
	font-family: inherit !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	font-variant: normal !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	line-height: 1.3 !important;
	color: var(--df-text) !important;
}

/* Même combat pour le prix, que le thème colore en doré. */
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .vamtam-product-content .price {
	color: var(--df-dark) !important;
	font-size: 16px !important;
	font-weight: 700 !important;
}
.woocommerce ul.products li.product .price .df-price-suffix {
	color: var(--df-text-muted) !important;
	font-size: 11px !important;
	font-weight: 500 !important;
}

/* La carte étant une colonne flex, ses enfants s'étirent sur toute la largeur
   par défaut : la pastille doit être ramenée à la largeur de son texte. */
.woocommerce ul.products li.product .df-loop-stock {
	align-self: flex-start;
}

/* Vignettes : le catalogue mélange des photos détourées et des visuels de
   marque en format paysage. "contain" sur le fond crème les montre en entier
   plutôt que de les rogner, et empêche les plus larges de déborder de la
   carte. */
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product .woocommerce-loop-product__link img {
	width: 100% !important;
	max-width: 100% !important;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: var(--df-cream);
}

/* Carte : le gabarit (fond, coins, marge intérieure) est déclaré plus haut,
   mais des règles du thème le reprennent avec une spécificité supérieure et
   la vignette finit collée aux quatre bords. On le réaffirme donc ici. */
.woocommerce ul.products li.product {
	background: var(--df-white) !important;
	border-radius: 16px !important;
	padding: 12px 12px 16px !important;
}
.woocommerce ul.products li.product > a:first-child {
	margin-bottom: 2px;
}

/* --- Colonnes de la sidebar de filtres ---------------------------------
   Chaque bloc de filtre est une colonne Elementor du template de boutique
   (5880) à laquelle une couleur de fond globale est appliquée : il en
   résulte un grand aplat blanc sous les cartes de filtre, elles-mêmes
   blanches. On rend ces colonnes transparentes pour retrouver le fond crème
   du site, les cartes blanches restant portées par .woof_container_inner.

   Deux templates sont concernés, et c'est une source d'erreur classique ici :
   5880 rend /shop/, 5594 rend les pages de catégorie. Une correction faite
   sur l'un ne se voit pas sur l'autre. Pour retrouver ces identifiants après
   une modification dans Elementor, chercher "vamtam_accent" dans
   wp-content/uploads/elementor/css/post-5880.css et post-5594.css. */
.elementor-element-c6eb16e > .elementor-widget-wrap,
.elementor-element-b05e7d8 > .elementor-widget-wrap,
.elementor-element-0aefd77 > .elementor-widget-wrap,
.elementor-element-2ffbabf > .elementor-widget-wrap,
.elementor-element-eabe88b > .elementor-widget-wrap,
.elementor-element-f07141c > .elementor-widget-wrap,
.elementor-element-4b1f80f > .elementor-widget-wrap,
.elementor-element-e859aea > .elementor-widget-wrap {
	background-color: transparent !important;
}
/* Même effet, sans dépendre des identifiants, pour toute colonne qui porte
   un widget de filtre (les navigateurs sans :has() retombent sur la liste
   ci-dessus). */
.elementor-column:has(.widget-woof) > .elementor-widget-wrap,
.elementor-column:has(.woof_redraw_zone) > .elementor-widget-wrap {
	background-color: transparent !important;
}

/* Les colonnes de filtre ajoutaient 25px/30px de marge intérieure autour de
   ce fond : sans l'aplat, cette marge décale les cartes de la colonne. */
.elementor-column:has(.widget-woof) > .elementor-element-populated {
	padding: 0 !important;
}

/* --- Sidebar de filtres -------------------------------------------------
   Le script de relocalisation (shop-filters-relocate.js) sort six groupes de
   la sidebar vers la barre pleine largeur. Ce qui reste dans
   .woof_redraw_zone — recherche, disponibilité, type de lait, catégories —
   doit se lire comme dans la maquette : une carte blanche compacte par bloc,
   un intitulé en petites capitales, puis des lignes serrées alignées à
   gauche avec leur compteur à droite. Les styles du thème imposent au
   contraire des listes centrées et très aérées, d'où les !important. */
.woof_redraw_zone .woof_container_inner {
	padding: 14px 16px !important;
}
.woof_redraw_zone .woof_container h4 {
	display: block !important;
	margin: 0 0 10px !important;
	padding: 0 !important;
	font-family: inherit !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: .06em !important;
	text-align: left !important;
	color: var(--df-text-muted) !important;
}

/* Les listes de la sidebar passent en colonne : dans la barre du haut elles
   restent des pastilles côte à côte (règles plus bas, inchangées). */
.woof_redraw_zone .woof_list,
.woof_redraw_zone .woof_list_radio {
	display: flex !important;
	flex-direction: column !important;
	gap: 2px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	text-align: left !important;
}
.woof_redraw_zone .woof_list li,
.woof_redraw_zone .woof_list_radio li {
	margin: 0 !important;
	padding: 0 !important;
	text-align: left !important;
	list-style: none !important;
}

/* Une ligne de filtre : libellé à gauche, compteur à droite. */
.woof_redraw_zone .woof_radio_label,
.woof_redraw_zone .woof-sd-ie-checkbox label {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 10px !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 7px 8px !important;
	background: transparent !important;
	border: none !important;
	border-radius: 4px !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	text-align: left !important;
	color: var(--df-text) !important;
	cursor: pointer;
}
.woof_redraw_zone .woof_radio_label:hover,
.woof_redraw_zone .woof-sd-ie-checkbox label:hover {
	background: var(--df-cream) !important;
}
.woof_redraw_zone .woof_radio_label.woof_radio_label_selected,
.woof_redraw_zone .woof-sd-ie-checkbox.woof-sd-selected label {
	background: var(--df-gold) !important;
	color: var(--df-dark) !important;
	font-weight: 600 !important;
}

/* Compteur : pastille discrète, comme dans la maquette. */
.woof_redraw_zone .woof_radio_count,
.woof_redraw_zone .woof-sd-ie-count {
	flex-shrink: 0;
	padding: 2px 9px;
	border-radius: 999px;
	background: var(--df-cream);
	font-size: 12px;
	font-weight: 600;
	color: var(--df-text-muted);
}
.woof_redraw_zone .woof_radio_term:checked + .woof_radio_label .woof_radio_count,
.woof_redraw_zone .woof_radio_label.woof_radio_selected .woof_radio_count {
	background: rgba(255,255,255,.5);
	color: var(--df-dark);
}

/* Un filtre sans résultat dans la vue courante reste affiché mais en retrait,
   plutôt que de disparaître : le client voit ce qu'il pourrait demander.
   (L'input est enfermé dans le <div> iCheck, d'où :has() plutôt que "+".) */
.woof_redraw_zone li:has(.woof_radio_term[disabled]) .woof_radio_label,
.df-pill-filters-bar li:has(.woof_radio_term[disabled]) .woof_radio_label {
	opacity: .45;
	cursor: default;
}

/* Ordre des blocs dans la sidebar, comme la maquette : recherche,
   disponibilité (stock puis promo), type de lait (order 1), catégories (2). */
.woof_redraw_zone .woof_text_search_container { order: -30; }
.woof_redraw_zone .woof_container_stock       { order: -29; }
.woof_redraw_zone .woof_checkbox_sales_container { order: -28; }

/* --- Recherche : intitulé, champ crème, loupe dans le champ --------------
   WOOF sort le lien-loupe AVANT le champ et un placeholder vide (" ") ; le
   texte du placeholder est posé par shop-filters-relocate.js. */
.woof_redraw_zone .woof_text_search_container .woof_container_inner {
	position: relative;
}
.woof_redraw_zone .woof_text_search_container .woof_container_inner::before {
	content: "Recherche";
	display: block;
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--df-text-muted);
}
.woof_redraw_zone .woof_husky_txt-input {
	display: block !important;
	width: 100% !important;
	height: 42px !important;
	margin: 0 !important;
	padding: 0 12px 0 34px !important;
	background: var(--df-cream) !important;
	border: 1px solid rgba(0,0,0,.15) !important;
	border-radius: 6px !important;
	box-shadow: none !important;
	font-size: 13px !important;
	color: var(--df-text) !important;
}
.woof_redraw_zone .woof_husky_txt-input:focus {
	outline: none !important;
	border-color: var(--df-gold) !important;
}
.woof_redraw_zone .woof_text_search_go {
	position: absolute !important;
	left: 27px;
	bottom: 28px;
	width: 14px !important;
	height: 14px !important;
	margin: 0 !important;
	padding: 0 !important;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B655A' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg>") center / 14px 14px no-repeat !important;
	z-index: 2;
}

/* --- Catégories : la liste "smart designer" de WOOF -----------------------
   Dans ce mode, WOOF fait du <label> une CASE (hauteur fixe, fond, bordure,
   line-height 0) et du <span> qu'il contient le remplissage de cette case ;
   le compteur est un rond bordé. On rend à chacun son rôle de texte : une
   ligne libellé à gauche, compteur en pastille à droite. WOOF pose ses
   valeurs en !important avec .woof-sd-ie.woof-sd-ie-checkbox > label, d'où
   la spécificité ici. */
.woof_redraw_zone .woof-sd-ie.woof-sd-ie-checkbox {
	margin: 0 !important;
	padding: 0 !important;
	width: 100% !important;
}
.woof_redraw_zone .woof-sd-ie.woof-sd-ie-checkbox > label {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 10px !important;
	width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	line-height: 1.35 !important;
	margin: 0 !important;
	padding: 7px 8px !important;
	background: transparent !important;
	border: none !important;
	border-radius: 4px !important;
	scale: 1 !important;
	cursor: pointer;
}
.woof_redraw_zone .woof-sd-ie.woof-sd-ie-checkbox > label:hover {
	background: var(--df-cream) !important;
	border: none !important;
	scale: 1 !important;
}
.woof_redraw_zone .woof-sd-ie.woof-sd-ie-checkbox > label > span {
	display: block !important;
	flex: 1 1 auto !important;
	width: auto !important;
	height: auto !important;
	background: none !important;
	border-radius: 0 !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	text-align: left !important;
	color: var(--df-text) !important;
}
.woof_redraw_zone .woof-sd-ie.woof-sd-ie-checkbox .woof-sd-ie-count {
	position: static !important;
	right: auto !important;
	top: auto !important;
	display: inline-block !important;
	flex-shrink: 0;
	min-width: 0 !important;
	min-height: 0 !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 2px 9px !important;
	border: none !important;
	border-radius: 999px !important;
	box-sizing: border-box !important;
	font-family: inherit !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	background: var(--df-cream) !important;
	color: var(--df-text-muted) !important;
}
.woof_redraw_zone .woof-sd-ie.woof-sd-ie-checkbox:has(input:checked) > label {
	background: var(--df-gold) !important;
	border: none !important;
	scale: 1 !important;
}
.woof_redraw_zone .woof-sd-ie.woof-sd-ie-checkbox:has(input:checked) > label > span {
	color: var(--df-dark) !important;
	font-weight: 600 !important;
}
.woof_redraw_zone .woof-sd-ie.woof-sd-ie-checkbox:has(input:checked) .woof-sd-ie-count {
	background: rgba(255,255,255,.5) !important;
	color: var(--df-dark) !important;
}

/* --- Haut de page : rien entre le header et les filtres --------------------
   Le template garde, sous le bandeau hero déjà masqué, un espaceur, un texte
   d'introduction ("Retrouvez l'ensemble de nos gammes…") et un intitulé
   "Filtrer par :" au-dessus de la sidebar. La maquette n'en a aucun. */
.elementor-5880 .elementor-element-313cdc4,
.elementor-5880 .elementor-element-b0be7ad,
.elementor-5594 .elementor-element-6d37762,
body.woocommerce .elementor-widget-spacer {
	display: none !important;
}
.elementor-column:has(.widget-woof) .elementor-widget-heading {
	display: none !important;
}

/* --- Zone haute pleine largeur (bandeau info + pastilles) -----------------
   Créée par shop-filters-relocate.js en tête du conteneur Elementor de la
   section sidebar + produits, donc alignée sur les deux colonnes. */
.df-shop-topbar {
	flex: 0 0 100%;
	width: 100%;
	padding: 0;
	margin: 28px 0 6px;
}
/* La section porteuse a 20px de marge haute sur /shop/ et 0 sur les pages
   de catégorie : on aligne les deux sur la marge du bandeau ci-dessus. */
.elementor-5880 .elementor-element-29ed012 {
	margin-top: 0 !important;
}

/* Le "×" de désélection : après la pastille, en gris, et non flottant à
   gauche comme le positionne le plugin. */
.woof_list_radio li .woof_radio_label {
	order: 1;
}
.woof_list_radio li .woof_radio_term_reset {
	order: 2;
	float: none !important;
	position: static !important;
	margin: 0 0 0 4px !important;
	background: rgba(33,29,24,.12) !important;
	color: var(--df-dark) !important;
}

/* Panneau des filtres actifs : WOOF pose sa croix rouge en image de fond du
   lien, et le thème habille le bouton de remise à zéro comme un gros bouton
   doré en capitales. */
.woof_products_top_panel_ul li a,
.woof_products_top_panel_ul li a .woof_remove_ppi {
	background-image: none !important;
	padding-right: 10px !important;
}
.woof_products_top_panel .woof_reset_button_2 {
	padding: 7px 16px !important;
	min-height: 0 !important;
	line-height: 1.4 !important;
	border-radius: 999px !important;
	background: var(--df-dark) !important;
	color: var(--df-white) !important;
	border: none !important;
	box-shadow: none !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}
.woof_products_top_panel .woof_reset_button_2:hover {
	background: var(--df-gold-dark) !important;
}
.df-shop-topbar .df-shop-infobar {
	flex-wrap: nowrap;
	margin-bottom: 18px;
}

/* Bouton "Réinitialiser" de la sidebar : en fin de colonne, en contour. */
.woof_redraw_zone .woof_submit_search_form_container {
	order: 99;
	margin: 6px 0 0;
}
.woof_redraw_zone .woof_reset_search_form,
.woof_redraw_zone .woof_submit_search_form_container .button {
	display: block !important;
	width: 100% !important;
	padding: 11px 16px !important;
	background: transparent !important;
	color: var(--df-gold-dark) !important;
	border: 1.5px solid var(--df-gold) !important;
	border-radius: 999px !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: .04em;
	text-transform: uppercase;
	box-shadow: none !important;
}

/* --- Calage sur la maquette A, comparaison côte à côte à 1440 px ----------- */

/* Bandeau : chaque information tient sur une ligne, la troisième passe
   dessous centrée si la place manque (comme la maquette), au lieu de couper
   "mercredi 16 / septembre" au milieu. */
.df-shop-topbar .df-shop-infobar {
	flex-wrap: wrap;
	row-gap: 6px;
}
.df-shop-infobar > span {
	white-space: nowrap;
}

/* Pastilles : chaque groupe WOOF (Certification, Saison, Origine…) est un
   bloc qui saute à la ligne d'un seul tenant, d'où des rangées à trous et
   très espacées. display:contents efface ces emballages : les <li> deviennent
   les items directs de la barre et s'enchaînent librement, 8 px entre eux. */
.df-pill-filters-bar .woof_container,
.df-pill-filters-bar .woof_container_inner,
.df-pill-filters-bar .woof_block_html_items,
.df-pill-filters-bar .woof_list_radio,
.df-pill-filters-bar .woof_container_radio ul {
	display: contents !important;
}
.df-pill-filters-bar .woof_container_overlay_item,
.df-pill-filters-bar h4 {
	display: none !important;
}
.df-pill-filters-bar li {
	margin: 0 !important;
	padding: 0 !important;
}
/* Les groupes étant "display: contents", l'ordre se règle sur leurs <li> :
   certification, nouveauté, promotion, détaillable, saison, origine. */
.df-pill-filters-bar .woof_container_pa_certification li { order: 1; }
.df-pill-filters-bar .woof_container_pa_nouveaute li     { order: 2; }
.df-pill-filters-bar .woof_container_pa_promotion li     { order: 3; }
.df-pill-filters-bar .woof_container_pa_detaillable li   { order: 4; }
.df-pill-filters-bar .woof_container_pa_saison li        { order: 5; }
.df-pill-filters-bar .woof_container_pa_origine li       { order: 6; }
.woof_radio_label {
	padding: 7px 16px !important;
	font-size: 13px !important;
	font-weight: 400;
	line-height: 1.3 !important;
	color: var(--df-text) !important;
}
.woof_radio_label.woof_radio_label_selected {
	color: var(--df-dark) !important;
	font-weight: 600 !important;
}
.woof_radio_label .woof_radio_count {
	font-size: 12px !important;
	color: var(--df-text-muted) !important;
}

/* Sidebar : lignes de filtre à la hauteur de la maquette (37 px). */
.woof_redraw_zone .woof_list_radio li,
.woof_redraw_zone .woof_list li {
	line-height: 1 !important;
}
.woof_redraw_zone .woof_radio_label {
	padding: 8px 8px !important;
	font-size: 14px !important;
}

/* Bouton d'ajout : à 1440 px la carte fait ~190 px, le libellé passait sur
   deux lignes. */
.woocommerce ul.products li.product a.button {
	white-space: nowrap;
	padding: 9px 10px !important;
	font-size: 11px !important;
	letter-spacing: .02em;
}

/* --- Compteur de résultats et sélecteur de tri ----------------------------- */
.woocommerce-result-count {
	margin: 0 !important;
	font-size: 14px !important;
	color: var(--df-text-muted) !important;
}
form.woocommerce-ordering select.orderby {
	padding: 9px 34px 9px 14px !important;
	background-color: var(--df-white) !important;
	border: 1px solid rgba(0,0,0,.12) !important;
	border-radius: 6px !important;
	box-shadow: none !important;
	font-size: 13px !important;
	color: var(--df-text) !important;
}

/* Pastilles de filtre : le plugin sort un vrai <input type="radio"> devant
   chaque libellé. La pastille entière fait office de bouton, la puce native
   n'a plus lieu d'être (elle reste accessible au clavier via le label). */
.woof_container_radio .woof_radio_term,
.df-pill-filters-bar .woof_radio_term,
.woof_redraw_zone .woof_radio_term,
.woof_list_radio li > input.woof_radio_term[type="radio"],
.woof_list_radio input[type="radio"],
.woof_list input[type="radio"] {
	display: none !important;
	position: absolute !important;
	opacity: 0 !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	pointer-events: none;
}

/* Bouton "Ajouter au panier" : pastille fine et discrète (contour doré,
   remplissage au survol) plutôt que le pavé plein très épais d'origine. */
.woocommerce ul.products li.product a.button {
	display: block;
	margin: 10px 6px 0;
	padding: 9px 14px !important;
	border-radius: 999px !important;
	background: var(--df-white) !important;
	color: var(--df-gold-dark) !important;
	border: 1.5px solid var(--df-gold) !important;
	font-size: 11.5px !important;
	font-weight: 700 !important;
	letter-spacing: .03em;
	text-transform: uppercase;
	text-align: center;
	box-shadow: none !important;
	line-height: 1.3;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.woocommerce ul.products li.product a.button:hover {
	background: var(--df-gold) !important;
	color: var(--df-dark) !important;
	border-color: var(--df-gold) !important;
}
.woocommerce ul.products li.product a.added_to_cart.wc-forward {
	display: block;
	margin: 6px 6px 0;
	text-align: center;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--df-gold-dark);
}
/* La largeur des cartes est désormais portée par la grille, pas par le <li> :
   c'est le nombre de colonnes qui change selon la taille d'écran. */
@media (max-width: 1400px) {
	.woocommerce ul.products.columns-5 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}
@media (max-width: 1024px) {
	.woocommerce ul.products.columns-5 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (max-width: 600px) {
	.woocommerce ul.products.columns-5 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}
}

/* --- Pleine largeur ---
   Deux contraintes empilées à neutraliser : le wrapper du thème (--vamtam-
   site-max-width, 1260px) ET les sections Elementor "boxed" qui limitent
   chaque .elementor-container à 1140px indépendamment du wrapper. */
body.woocommerce-page .limit-wrapper,
body.archive.woocommerce .limit-wrapper {
	max-width: 100% !important;
	padding-left: 32px;
	padding-right: 32px;
}
body.woocommerce-page .elementor-section-boxed > .elementor-container,
body.archive.woocommerce .elementor-section-boxed > .elementor-container {
	max-width: 100% !important;
}
@media (max-width: 768px) {
	body.woocommerce-page .limit-wrapper,
	body.archive.woocommerce .limit-wrapper {
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* --- En-têtes de section de filtre (titres Elementor dans la sidebar) --- */
body.woocommerce-page .elementor-widget-heading .elementor-heading-title {
	color: var(--df-dark);
}

/* --- Ordre des groupes de filtre : les pastilles (Certification/Nouveauté/
   Saison/Détaillable/Origine) remontent en haut du panneau, avant les cases
   à cocher (Catégories/Type de lait). Réordonnancement visuel pur (flex
   order), sans toucher au HTML généré par le plugin. --- */
.woof_redraw_zone {
	display: flex;
	flex-direction: column;
}
.woof_container_radio {
	order: -10;
}
.woof_container_pa_certification { order: -10; }
.woof_container_pa_nouveaute     { order: -9; }
.woof_container_pa_promotion     { order: -8; }
.woof_container_pa_saison        { order: -7; }
.woof_container_pa_detaillable   { order: -6; }
.woof_container_pa_origine       { order: -5; }
.woof_container_pa_type-lait     { order: 1; }
.woof_container_product_cat      { order: 2; }

/* --- Conteneur global du formulaire de filtre --- */
.woof_container {
	margin-bottom: 22px;
}
.woof_container_inner {
	background: var(--df-white);
	border: none;
	border-radius: 8px;
	padding: 16px 18px;
	box-shadow: 0 2px 10px rgba(33,29,24,.06);
}
.woof_container h4 {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--df-text-muted);
	margin: 0 0 12px;
	font-weight: 700;
}

/* Panneau "Familles" (mobile off-canvas) */
.woof_side_panel_header,
.woof-sd-title,
[class*="woof"][class*="_title_"] {
	color: var(--df-dark);
}

/* --- Toggles En stock / En promo ---
   Anatomie WOOF (switcher.css) : l'<input> est masqué, le <label> porte la
   piste en ::before et le bouton dans un <span> positionné en absolu, le
   libellé (.switcher23-title2) est DANS le label. L'ancienne règle colorait
   le label entier, d'où un pavé gris derrière le texte. On refait la
   géométrie : libellé à gauche, piste 38x22 à droite, bouton 16px qui
   glisse de 16px. */
.woof_redraw_zone .switcher23-container {
	display: flex !important;
	width: 100% !important;
	align-items: center !important;
}
.woof_redraw_zone .switcher23-container label.switcher23-toggle {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	width: 100% !important;
	padding: 7px 0 !important;
	margin: 0 !important;
	background: transparent !important;
	position: relative;
}
.woof_redraw_zone .switcher23-toggle::before {
	order: 2;
	position: static !important;
	top: auto !important;
	left: auto !important;
	flex-shrink: 0;
	width: 38px !important;
	height: 22px !important;
	border-radius: 999px !important;
	background: #ddd6c8 !important;
}
.woof_redraw_zone .switcher23-title2 {
	order: 1;
	position: static !important;
	top: auto !important;
	left: auto !important;
	max-width: none !important;
	margin: 0 !important;
	font-size: 14px !important;
	color: var(--df-text) !important;
}
.woof_redraw_zone .switcher23-toggle > span {
	left: auto !important;
	right: 19px !important;
	top: calc(50% - 8px) !important;
	width: 16px !important;
	height: 16px !important;
	background: #FFFFFF !important;
	box-shadow: 0 1px 3px rgba(0,0,0,.25) !important;
}
.woof_redraw_zone .switcher23-toggle > span::before {
	display: none !important;
}
.woof_redraw_zone .switcher23:checked + .switcher23-toggle::before {
	background: var(--df-gold) !important;
}
.woof_redraw_zone .switcher23:checked + .switcher23-toggle > span {
	transform: translateX(16px) !important;
	background: #FFFFFF !important;
	box-shadow: 0 1px 3px rgba(0,0,0,.25) !important;
}

/* Les deux toggles arrivent chacun dans sa propre carte : on les soude en
   une seule carte "Disponibilité", comme dans la maquette. */
.woof_redraw_zone .woof_container_stock {
	margin-bottom: 0 !important;
}
.woof_redraw_zone .woof_container_stock .woof_container_inner {
	border-radius: 8px 8px 0 0 !important;
	padding-bottom: 2px !important;
}
.woof_redraw_zone .woof_container_stock .woof_container_inner::before {
	content: "Disponibilité";
	display: block;
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--df-text-muted);
}
.woof_redraw_zone .woof_checkbox_sales_container .woof_container_inner {
	border-radius: 0 0 8px 8px !important;
	padding-top: 2px !important;
}

/* --- Listes de catégories / termes à cases (checkbox) --- */
.woof-sd-ie-checkbox {
	margin-bottom: 4px;
}
.woof-sd-ie-checkbox label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 7px 8px;
	border-radius: 4px;
	color: var(--df-text);
	font-size: 14px;
	transition: background .15s ease, color .15s ease;
	cursor: pointer;
}
.woof-sd-ie-checkbox label:hover {
	background: var(--df-cream);
}
.woof-sd-ie-checkbox input:checked + label,
.woof-sd-ie-checkbox.woof-sd-selected label {
	background: var(--df-gold);
	color: var(--df-dark);
	font-weight: 600;
}
.woof-sd-ie-count {
	font-size: 12px;
	color: var(--df-text-muted);
	background: var(--df-cream);
	border-radius: 999px;
	padding: 2px 9px;
	font-weight: 600;
}
.woof-sd-ie-checkbox input:checked + label .woof-sd-ie-count,
.woof-sd-ie-checkbox.woof-sd-selected label .woof-sd-ie-count {
	background: rgba(255,255,255,.5);
	color: var(--df-dark);
}

/* "Voir plus / Voir moins" */
.woof_open_hidden_li_btn {
	display: inline-block;
	margin-top: 8px;
	color: var(--df-gold-dark);
	font-weight: 600;
	font-size: 13px;
	text-decoration: none;
}
.woof_open_hidden_li_btn:hover {
	text-decoration: underline;
}

/* --- Groupes en pastilles horizontales (Certification / Nouveauté / Saison / Origine...) --- */
.woof_container_radio .woof_container_inner {
	background: transparent;
	border: none;
	padding: 0;
}
.woof_container_radio h4 {
	display: none; /* le titre "Produit Certification" etc. est redondant avec les libellés des pastilles */
}
.woof_list_radio,
.woof_container_radio ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.woof_radio_label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 16px;
	border-radius: 999px;
	background: var(--df-white);
	border: 1px solid var(--df-border);
	color: var(--df-text);
	font-size: 13px;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.woof_radio_label:hover {
	background: var(--df-cream);
}
/* WOOF pose .woof_radio_label_selected sur le libellé du terme actif ; le
   sélecteur :checked + label ne fonctionne plus depuis que le plugin enferme
   l'input dans le <div> de son habillage iCheck (voir plus bas). */
.woof_radio_label.woof_radio_label_selected {
	background: var(--df-gold);
	border-color: var(--df-gold);
	color: var(--df-dark);
	font-weight: 600;
}
.woof_radio_count {
	color: var(--df-text-muted);
	font-size: 12px;
}
.woof_radio_label_selected .woof_radio_count {
	color: rgba(33,29,24,.7);
}

/* --- Habillage iCheck des radios/cases (skin "square-aero" de WOOF) ---
   Le plugin remplace visuellement chaque input par un <div class="iradio_…">
   (rond gris, coche au clic) : c'est lui que l'on voyait avant chaque
   pastille et au-dessus de chaque ligne de la sidebar. La pastille et la
   ligne font déjà office de bouton (label for=id), on le masque. */
.woof [class^="iradio_"],
.woof [class^="icheckbox_"],
.df-pill-filters-bar [class^="iradio_"],
.df-pill-filters-bar [class^="icheckbox_"] {
	display: none !important;
}

/* Lien de désélection d'un terme actif : WOOF y met une image rouge de
   12 px (delete.png). On garde le lien — c'est le seul moyen de décocher un
   radio — mais on le dessine en petit "×" discret collé à la pastille. */
.woof_radio_term_reset img {
	display: none !important;
}
.woof_radio_term_reset {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	margin-left: -6px;
	border-radius: 50%;
	background: var(--df-dark);
	color: var(--df-white);
	font-size: 12px;
	line-height: 1;
	text-decoration: none;
	vertical-align: middle;
}
.woof_radio_term_reset::after {
	content: "\00d7";
}
.woof_list_radio li {
	display: inline-flex;
	align-items: center;
}

/* --- Filtres actifs / "Tout effacer" --- */
.woof_products_top_panel {
	margin: 0 0 20px;
}
.woof_products_top_panel_ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}
/* Structure réelle rendue par WOOF (côté client) :
   ul.woof_products_top_panel_ul
     li > button.woof_reset_button_2            "Clear All" (renommé par JS)
     li > ul[data-container] > li "Certification:"  puis  li > a > span.woof_remove_ppi "AOP"
   La maquette : "FILTRES ACTIFS  [Certification : AOP ×]  [Tout effacer]". */
.woof_products_top_panel_ul::before {
	content: "Filtres actifs";
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--df-text-muted);
	margin-right: 4px;
}
.woof_products_top_panel_ul > li {
	display: inline-flex;
	align-items: center;
}
.woof_products_top_panel_ul > li:first-child {
	order: 99; /* le bouton "Tout effacer" passe en fin de ligne */
}
.woof_products_top_panel_ul > li > ul {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.woof_products_top_panel_ul > li > ul > li {
	display: inline-flex;
	align-items: center;
	font-size: 13px;
	color: var(--df-text-muted);
}
.woof_products_top_panel_ul li a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px 6px 14px;
	border-radius: 999px;
	background: var(--df-cream);
	border: 1px solid var(--df-border);
	color: var(--df-text);
	font-size: 13px;
	text-decoration: none;
}
.woof_products_top_panel_ul li a::after {
	content: "\00d7";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: rgba(0,0,0,.08);
	font-size: 12px;
	line-height: 1;
}
.woof_remove_ppi {
	display: inline;
	width: auto;
	height: auto;
	background: none;
	border-radius: 0;
	color: var(--df-text);
	font-size: 13px;
	font-weight: 600;
	line-height: inherit;
}
.woof_reset_button_2 {
	padding: 7px 16px;
	border-radius: 999px;
	background: var(--df-dark);
	color: var(--df-white);
	border: none;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}
.woof_reset_button_2:hover {
	background: var(--df-gold-dark);
}

/* --- Loader (chargement AJAX) : petit, centré, couleurs du site --- */
#woof_html_buffer {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 100000;
	background: var(--df-dark);
	color: var(--df-white);
	padding: 14px 22px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .02em;
	box-shadow: 0 12px 30px rgba(0,0,0,.25);
	display: none;
}
#woof_html_buffer::before {
	content: "";
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-right: 8px;
	border: 2px solid rgba(255,255,255,.35);
	border-top-color: var(--df-gold);
	border-radius: 50%;
	vertical-align: middle;
	animation: df-spin .7s linear infinite;
}
@keyframes df-spin {
	to { transform: rotate(360deg); }
}

/* Empêche l'ancien overlay plein écran (skins animés) de dépasser au cas où */
#woof_svg_load_container img {
	width: 48px !important;
	height: 48px !important;
}

/* --- Pastilles de filtre (Certification/Nouveauté/Promotion/Saison/
   Détaillable/Origine) déplacées hors de la sidebar étroite : injectées par
   shop-filters-relocate.js juste sous le bandeau d'info, en pleine largeur,
   pour qu'elles respirent au lieu d'être empilées sur plusieurs lignes dans
   la colonne de gauche. Les groupes gardent leurs classes .woof_container_*
   d'origine (mêmes cases à cocher, mêmes compteurs) : on ne fait que
   neutraliser leur habillage "carte" pour qu'ils se fondent dans la barre. */
.df-pill-filters-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
}
.df-pill-filters-bar .woof_container {
	margin-bottom: 0;
}
.df-pill-filters-bar .woof_container_inner {
	background: transparent;
	box-shadow: none;
	padding: 0;
}
.df-pill-filters-bar .woof_list_radio,
.df-pill-filters-bar .woof_container_radio ul {
	margin: 0;
}

/* =====================================================================
   Carte produit (maquette A) : référence · colisage, prix à la pièce ou au
   kilo, pastille de disponibilité, quantité + Ajouter, fiche technique.
   ===================================================================== */
.woocommerce ul.products li.product .vamtam-add-to-cart-wrap,
.woocommerce ul.products li.product a.added_to_cart,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .star-rating {
	display: none !important;
}
.woocommerce ul.products li.product .vamtam-product-content {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	-webkit-line-clamp: 2 !important;
	min-height: 38px !important;
	height: 38px;
	line-height: 1.35 !important;
}
.woocommerce ul.products li.product .df-loop-meta {
	height: 30px;
	overflow: hidden;
}
.woocommerce ul.products li.product .df-loop-price {
	padding: 0 6px;
	margin-top: 6px;
	font-size: 16px;
	font-weight: 700;
	color: var(--df-dark);
	height: 40px;
	line-height: 1.25;
	overflow: hidden;
}
.woocommerce ul.products li.product .df-loop-price span {
	font-size: 11px;
	font-weight: 500;
	color: var(--df-text-muted);
}
.woocommerce ul.products li.product .df-loop-price--locked a {
	font-size: 11.5px;
	font-weight: 600;
	color: var(--df-gold-dark);
	text-decoration: underline;
}
.woocommerce ul.products li.product .df-loop-st {
	padding: 0 6px;
	margin-top: 6px;
	height: 26px;
	display: flex;
	align-items: center;
	gap: 6px;
}
.df-tag {
	display: inline-block;
	padding: 3px 8px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
}
.df-tag--in { background: rgba(45,122,74,.12); color: #2D7A4A; }
.df-tag--pre { background: rgba(201,151,62,.18); color: var(--df-gold-dark); }
.df-tag--season { background: rgba(201,151,62,.18); color: var(--df-gold-dark); }
.df-tag--out { background: rgba(33,29,24,.08); color: var(--df-text-muted); }

.woocommerce ul.products li.product .df-loop-qr {
	display: flex;
	gap: 6px;
	margin: auto 6px 0;
	padding-top: 10px;
}
.df-qty {
	display: inline-flex;
	align-items: stretch;
	border: 1.5px solid var(--df-gold);
	border-radius: 999px;
	overflow: hidden;
	height: 32px;
	flex-shrink: 0;
}
.df-qty__btn {
	width: 26px;
	border: 0 !important;
	background: #FFFFFF !important;
	color: var(--df-gold-dark) !important;
	font-size: 14px;
	line-height: 1;
	padding: 0 !important;
	cursor: pointer;
	border-radius: 0 !important;
	box-shadow: none !important;
	min-height: 0 !important;
}
.df-qty__btn:hover {
	background: var(--df-cream) !important;
}
.df-qty__in {
	width: 30px !important;
	min-width: 0;
	border: 0 !important;
	background: var(--df-cream) !important;
	text-align: center;
	font-size: 12px !important;
	font-weight: 700 !important;
	color: var(--df-text) !important;
	padding: 0 !important;
	height: auto !important;
	-moz-appearance: textfield;
	border-radius: 0 !important;
	box-shadow: none !important;
}
.df-qty__in::-webkit-outer-spin-button,
.df-qty__in::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.woocommerce ul.products li.product a.df-loop-btn {
	display: block;
	flex: 1 1 auto;
	margin: 0;
	padding: 8px 6px;
	border-radius: 999px;
	background: #FFFFFF;
	color: var(--df-gold-dark);
	border: 1.5px solid var(--df-gold);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	text-align: center;
	line-height: 1.3;
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
	white-space: nowrap;
}
.woocommerce ul.products li.product a.df-loop-btn:hover,
.woocommerce ul.products li.product a.df-loop-btn.df-add--done {
	background: var(--df-gold);
	color: var(--df-dark);
}
.woocommerce ul.products li.product a.df-loop-btn.loading {
	opacity: .6;
}
.woocommerce ul.products li.product a.df-loop-btn--muted,
.woocommerce ul.products li.product a.df-loop-btn--ghost {
	margin: auto 6px 0;
	padding: 9px 14px;
}
.woocommerce ul.products li.product a.df-loop-btn--muted {
	border-color: rgba(0,0,0,.12);
	color: var(--df-text-muted);
	background: var(--df-cream);
}
.woocommerce ul.products li.product a.df-loop-btn--muted:hover {
	background: var(--df-cream);
	color: var(--df-text);
}
.woocommerce ul.products li.product .df-loop-fiche {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 10px 6px 0;
	font-size: 11px;
	font-weight: 600;
	color: var(--df-gold-dark);
	height: 14px;
	text-decoration: none;
}
.woocommerce ul.products li.product .df-loop-fiche:hover {
	text-decoration: underline;
}

/* Bandeau : icônes SVG, lien frais de port */
.df-shop-infobar span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.df-shop-infobar a {
	text-decoration: underline;
	color: var(--df-gold-dark);
	font-weight: 600;
}

/* Compteur de résultats : chiffres en gras */
.woocommerce-result-count strong {
	color: var(--df-text);
}

/* Pagination : ronds */
.woocommerce nav.woocommerce-pagination {
	margin-top: 32px;
}
.woocommerce nav.woocommerce-pagination ul {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	border: 0 !important;
	margin: 0 !important;
}
.woocommerce nav.woocommerce-pagination ul li {
	border: 0 !important;
	margin: 0 !important;
	float: none !important;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	width: 38px;
	height: 38px;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	border-radius: 999px !important;
	background: #FFFFFF !important;
	border: 1px solid rgba(0,0,0,.08) !important;
	font-size: 14px !important;
	color: var(--df-text) !important;
	padding: 0 !important;
	margin: 0 !important;
	line-height: 1 !important;
	text-decoration: none;
}
.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--df-gold) !important;
	color: var(--df-dark) !important;
	font-weight: 700;
	border-color: var(--df-gold) !important;
}
.woocommerce nav.woocommerce-pagination ul li a:hover {
	border-color: var(--df-gold) !important;
}
.woocommerce nav.woocommerce-pagination ul li a.next,
.woocommerce nav.woocommerce-pagination ul li a.prev {
	width: auto;
	padding: 0 14px !important;
}

/* Sélecteur de tri : flèche fine */
form.woocommerce-ordering {
	margin: 0 !important;
}
form.woocommerce-ordering select.orderby {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B655A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") !important;
	background-repeat: no-repeat !important;
	background-position: right 12px center !important;
	background-size: 12px 12px !important;
}

/* "Voir plus…" des catégories : lien texte doré, pas le bouton plein du thème. */
.woof_redraw_zone a.woof_open_hidden_li_btn,
.woof_redraw_zone .woof_open_hidden_li_btn {
	display: inline-block !important;
	width: auto !important;
	margin: 8px 0 0 8px !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
	color: var(--df-gold-dark) !important;
	font-weight: 600 !important;
	font-size: 13px !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	box-shadow: none !important;
	text-align: left !important;
	line-height: 1.4 !important;
	min-height: 0 !important;
}

/* Bandeau d'information (maquette : encadré crème, bord or, trois infos) */
.df-shop-infobar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
	align-items: center;
	justify-content: center;
	background: var(--df-cream);
	border: 1px solid rgba(201,151,62,.25);
	border-radius: 4px;
	padding: 12px 20px;
	margin: 0 0 24px;
	font-size: 13px;
	color: var(--df-text);
	line-height: 1.5;
}
.df-shop-infobar strong {
	color: var(--df-gold-dark);
}
.woof_redraw_zone .woof_open_hidden_li {
	background: transparent !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	width: auto !important;
	text-align: left !important;
}