/**
 * Habillage "boutons" du bloc natif WooCommerce "Liste des catégories de
 * produits" (réglages : "N'afficher que les catégories enfants" activé,
 * "Hiérarchique" désactivé pour un rendu à plat sur une seule ligne).
 * À appliquer en ajoutant la classe CSS additionnelle "nl-subcategory-buttons"
 * au bloc (Avancé > Classe CSS additionnelle), pas de bloc custom nécessaire.
 */
.nl-subcategory-buttons .wc-block-product-categories-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nl-subcategory-buttons .wc-block-product-categories-list-item {
	margin: 0;
}

.nl-subcategory-buttons .wc-block-product-categories-list-item a {
	display: inline-block;
	padding: 0 5px;
	border-radius: 50px;
	background-color: var(--wp--preset--color--base-1, #ede6d4);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	font-size: 0.9rem;
	transition: all 0.3s ease-in-out;
}

.nl-subcategory-buttons .wc-block-product-categories-list-item a:hover,
.nl-subcategory-buttons .wc-block-product-categories-list-item a:focus-visible {
	background-color: var(--wp--preset--color--or, #eeab00);
	color: var(--wp--preset--color--base);
}