/* ==========================================================================
   Kawann Supply — pages catalogue (catégorie, recherche, promotions)
   Chargé après theme.css : ces règles surchargent le style Hummingbird.
   Palette et typographie : voir kawann-tokens.css.
   ========================================================================== */

/* --- En-tête de catégorie ---
   Titre à gauche, réassurance à droite. minmax(0, …) sur la première piste
   pour qu'un nom de catégorie long ne pousse pas le bloc de droite hors du
   cadre. */
.kawann-cat-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  margin-bottom: 22px;
}

.kawann-cat-header__kicker {
  margin: 0;
  font-size: 1.75rem;
  font-weight: var(--kawann-weight-title);
  line-height: 1.1;
  color: var(--kawann-marine);
}

.kawann-cat-header__titles {
  min-width: 0;
}

.kawann-cat-header__name {
  display: inline;
  margin: 0;
  font-size: 1rem;
  font-weight: var(--kawann-weight-bold);
  color: var(--kawann-text-muted);
}

.kawann-cat-header__count {
  margin-left: 10px;
  font-size: 0.8125rem;
  font-weight: var(--kawann-weight-bold);
  color: var(--kawann-soleil-ink);
  white-space: nowrap;
}

/* Réassurance de l'en-tête */
.kawann-cat-reassurance {
  display: flex;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--kawann-border);
  border-radius: 10px;
  background: var(--kawann-blanc);
  overflow: hidden;
}

.kawann-cat-reassurance__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
}

.kawann-cat-reassurance__item + .kawann-cat-reassurance__item {
  border-left: 1px solid var(--kawann-border);
}

.kawann-cat-reassurance__icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: var(--kawann-marine);
}

.kawann-cat-reassurance__icon svg { width: 100%; height: 100%; display: block; }

.kawann-cat-reassurance__text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.kawann-cat-reassurance__text strong {
  font-size: 0.8125rem;
  font-weight: var(--kawann-weight-bold);
  color: var(--kawann-marine);
}

.kawann-cat-reassurance__text span {
  font-size: 0.75rem;
  color: var(--kawann-text-muted);
}

/* Sous 1200px la réassurance passe sous le titre. */
@media (max-width: 1199.98px) {
  .kawann-cat-header { grid-template-columns: minmax(0, 1fr); }
  .kawann-cat-reassurance { flex-wrap: wrap; }
}

/* --- Colonne latérale resserrée ---
   Le gabarit Bootstrap du thème lui donne 25% (col-lg-3), soit 318px : autant
   de largeur en moins pour la grille. 250px suffisent à l'arbre de catégories
   et permettent de tenir 6 colonnes de produits comme sur la maquette. */
@media (min-width: 992px) {
  #left-column {
    flex: 0 0 285px;
    max-width: 285px;
  }

  #center-column {
    flex: 1 1 auto;
    max-width: none;
  }
}

/* ==========================================================================
   Colonne de gauche — panneau des catégories
   ========================================================================== */
.left-block {
  border: 1px solid var(--kawann-border);
  border-radius: 12px;
  padding: 0;
  background: var(--kawann-blanc);
  overflow: hidden;
}

.left-block__title {
  margin: 0;
  padding: 14px 16px;
  border-bottom: 1px solid var(--kawann-border);
  font-size: 0.75rem;
  font-weight: var(--kawann-weight-title);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--kawann-marine);
}

.category-tree__child { padding: 6px; }

.category-tree__list { margin: 0; padding: 0; list-style: none; }

.category-tree__item-header {
  display: flex;
  align-items: center;
}

/* Entrées allégées : corps 13, graisse de texte courant et non de titre.
   La hiérarchie passe par le fond de l'entrée courante, pas par le gras
   partout — sinon plus rien ne ressort. */
.category-tree__item-link {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: var(--kawann-weight-text);
  line-height: 1.3;
  color: var(--kawann-marine);
  text-decoration: none;
}

.category-tree__chevron {
  flex: 0 0 auto;
  color: var(--kawann-text-muted);
  font-size: 1rem;
  line-height: 1;
}

.category-tree__label { min-width: 0; }

.category-tree__item-link:hover {
  background: var(--kawann-surface);
  color: var(--kawann-marine);
}

/* Catégorie courante : fond teinté et graisse renforcée — deux signaux, pour
   ne pas reposer sur la seule couleur (WCAG 2.2 AA, 1.4.1). */
.category-tree__item-link.is-current {
  background: #eef5fb;
  font-weight: var(--kawann-weight-bold);
  color: var(--kawann-marine);
}

.category-tree__item-link.is-current .category-tree__chevron {
  color: var(--kawann-soleil);
}

/* Bouton d'accordéon ramené à un simple chevron discret. */
.accordion--category .accordion-button {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.accordion--category .accordion-button::after {
  margin: 0 auto;
  width: 14px;
  height: 14px;
  background-size: 14px;
}

.accordion--category .accordion-body {
  padding: 2px 0 2px 14px;
}

.category-tree__list[data-depth="1"] .category-tree__item-link {
  font-size: 0.78125rem;
  color: var(--kawann-text-muted);
}

.category-tree__list[data-depth="1"] .category-tree__item-link:hover {
  color: var(--kawann-marine);
}

/* --- Barre d'outils encadrée --- */
.products__selection {
  border: 1px solid var(--kawann-border);
  border-radius: 10px;
  padding: 10px 14px;
  background: var(--kawann-blanc);
  margin-bottom: 16px;
}

/* --- Grille produits ---
   Le parent tient 3 colonnes de ~290px. Sur un catalogue d'épicerie, où le
   client balaie beaucoup de références, on densifie : des colonnes de 180px
   minimum, donc 4 à 5 par ligne selon la largeur, sans jamais descendre sous
   une taille où la photo devient illisible.
   auto-fill et non auto-fit : sur une catégorie à 1 ou 2 produits, les cartes
   gardent leur largeur au lieu de s'étirer sur toute la ligne. */
/* 6 colonnes fixes au-delà de 1200px, comme la maquette : auto-fill retombait
   à 5 selon les arrondis de gouttière. En dessous, on dégrade par paliers. */
/* Grille des listes de produits — LA MÊME PARTOUT.
   Les règles visaient auparavant #js-product-list et .products.product_list,
   deux sélecteurs propres à la page catégorie. Ailleurs — accueil, promotions,
   nouveautés, recherche, produits associés — la grille du thème parent
   reprenait la main : mêmes cartes, mais rendues à 290px au lieu de 178, avec
   des gouttières de 24px au lieu de 14. Deux densités pour un même composant.

   auto-fill plutôt qu'un nombre de colonnes fixe : c'est la LARGEUR de carte
   qui est constante, et le nombre de colonnes s'adapte au conteneur. Une carte
   fait donc la même taille dans la colonne étroite du catalogue (947px, 5
   colonnes) que sur l'accueil pleine largeur (1232px, 6 colonnes).
   Vérifié : 170px + 14px de gouttière redonnent exactement les 178px et les 5
   colonnes actuelles du catalogue, ainsi que 3 colonnes dès 576px et 2 en
   mobile — la page catégorie ne bouge pas. */
.products,
#js-product-list .products,
.products.product_list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 14px;
}

/* En dessous de 360px, 170px ne tiennent plus à deux : on force deux colonnes
   plutôt que de laisser une seule carte pleine largeur. */
@media (max-width: 359.98px) {
  .products,
  #js-product-list .products,
  .products.product_list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
  #js-product-list .products,
  .products.product_list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.product-miniature {
  min-width: 0;
}

.product-miniature__inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--kawann-border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--kawann-blanc);
}

.product-miniature__inner:hover {
  border-color: var(--kawann-soleil);
}

.product-miniature__bottom {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 12px;
}

.product-miniature__infos {
  flex: 1 1 auto;
}

.product-miniature__title {
  display: block;
  font-size: 0.875rem;
  font-weight: var(--kawann-weight-bold);
  line-height: 1.3;
  color: var(--kawann-marine);
  text-decoration: none;
}

/* --- Lignes ajoutées par la surcharge de la carte --- */
.kawann-card__brand {
  margin: 3px 0 0;
  font-size: 0.75rem;
  color: var(--kawann-text-muted);
}

.product-miniature__prices {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-top: 8px;
}

.product-miniature__price {
  font-size: 1.0625rem;
  font-weight: var(--kawann-weight-title);
  color: var(--kawann-marine);
}

.kawann-card__unit {
  margin: 0;
  font-size: 0.75rem;
  color: var(--kawann-text-muted);
}

/* Pastille d'état du stock : la couleur seule ne porte pas l'information,
   le texte « En stock » / « Rupture » l'accompagne toujours (WCAG 2.2 AA,
   1.4.1 Utilisation de la couleur). */
.kawann-card__stock {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0;
  font-size: 0.75rem;
  font-weight: var(--kawann-weight-text);
  color: var(--kawann-succes-ink, #3f7a1f);
}

.kawann-card__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}

.kawann-card__stock--out {
  color: var(--kawann-text-muted);
}

/* --- Description reléguée en bas de page --- */
.kawann-cat-footer {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--kawann-border);
}

.kawann-cat-footer__text {
  color: var(--kawann-text-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.kawann-cat-footer__text :is(h2, h3) {
  color: var(--kawann-marine);
  font-size: 1.0625rem;
}

/* --- Colonne de gauche : compteurs de catégories --- */
#left-column .category-top-menu a {
  color: var(--kawann-marine);
}



/* --- Bouton panier de la carte ---
   Soleil sur marine : c'est l'action principale de la liste, elle doit se
   distinguer du reste de la carte au premier coup d'œil. */
.product-miniature__add {
  background-color: var(--kawann-soleil);
  border-color: var(--kawann-soleil);
  color: var(--kawann-marine);
}

.product-miniature__add:hover {
  background-color: var(--kawann-soleil);
  border-color: var(--kawann-soleil);
  color: var(--kawann-marine);
  filter: brightness(0.95);
}

.product-miniature__actions {
  margin-top: 10px;
}

/* Le thème parent empile le sélecteur de quantité et le bouton (flex en
   colonne). La maquette les met côte à côte : on repasse en ligne et le
   sélecteur absorbe la place restante. */
.product-miniature__form {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
}

.product-miniature__form .quantity-button {
  flex: 1 1 auto;
  min-width: 0;
}

/* Le groupe est en flex-wrap: wrap chez le parent : dans une carte de 152px il
   n'avait plus que 78px pour trois éléments qui en demandent 79, et le « + »
   tombait à la ligne. On interdit le retour et on resserre.
   26x30 et 30x30 : au-dessus du minimum de 24x24 (WCAG 2.2 AA, 2.5.8). */
.product-miniature__form .quantity-button__group {
  flex-wrap: nowrap;
}

.product-miniature__form .quantity-button__group .btn {
  width: 26px;
  min-width: 26px;
  height: 30px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-miniature__form .quantity-button__group .material-icons {
  font-size: 16px;
}

.product-miniature__form .quantity-button__group .form-control {
  width: 30px;
  min-width: 0;
  height: 30px;
  padding: 0;
  text-align: center;
  font-size: 0.8125rem;
}

.product-miniature__add {
  flex: 0 0 auto;
  width: 34px;
  height: 30px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-miniature__add .material-icons {
  font-size: 18px;
}

/* Le libellé « Ajouter au panier » ne tient pas dans une carte de 155px :
   on garde l'icône, et le texte reste lisible par les lecteurs d'écran. */
.product-miniature__add-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================================
   Fil d'Ariane — version sobre
   Le thème parent le pose sur une bande grise pleine largeur de 45px, en
   corps 14 et en bleu lien : trois signaux forts pour un élément de repérage
   secondaire, qui pesait plus que le titre de la page juste en dessous.
   On enlève la bande, on descend d'un cran en taille et on passe les liens en
   gris ; seule la page courante reste en marine.
   ========================================================================== */
.breadcrumb__wrapper {
  background-color: transparent;
}

.breadcrumb {
  padding: 10px 0 2px;
  font-size: 0.75rem;
}

.breadcrumb-link,
.breadcrumb-item a {
  color: var(--kawann-text-muted) !important;
  text-decoration: none;
}

.breadcrumb-link:hover,
.breadcrumb-item a:hover {
  color: var(--kawann-marine) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Page courante : le seul élément en marine, donc le seul qui ressort. */
.breadcrumb-item:last-child {
  color: var(--kawann-marine);
  font-weight: var(--kawann-weight-bold);
}

/* Séparateur plus discret que le texte qu'il sépare. */
.breadcrumb-item + .breadcrumb-item::before {
  color: var(--kawann-border);
}

/* Sur mobile, le parent fait défiler le fil d'Ariane latéralement : la page
   courante (« Historique de vos commandes ») était coupée au bord. On laisse
   plutôt les éléments passer à la ligne. */
@media (max-width: 767.98px) {
  .breadcrumb {
    flex-wrap: wrap;
    row-gap: 2px;
    overflow: visible;
  }

  .breadcrumb-item { white-space: normal; }
}


/* ==========================================================================
   Carte produit — hauteur resserrée
   La carte montait à 381px : visuel carré (donc d'autant plus haut que la
   carte est large) et prix unitaire renvoyé à la ligne faute de place.
   ========================================================================== */

/* Hauteur du visuel fixée : sans ça, élargir les cartes les rallongeait
   d'autant, le visuel étant carré. object-fit: contain garde les proportions
   du produit et évite tout recadrage. */
.product-miniature__top {
  height: 152px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--kawann-blanc);
}

/* Le <picture> doit figurer dans la chaîne de hauteurs. Sans lui, sa hauteur
   restait automatique — donc carrée, à la largeur de la carte — le
   « max-height: 100% » de l'image se mesurait contre cette hauteur libre, et
   le visuel débordait du cadre, rogné en haut et en bas par overflow. */
.product-miniature__image-container,
.product-miniature__image-link,
.product-miniature__image-link picture {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-miniature__image {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.product-miniature__bottom {
  padding: 10px;
}

.product-miniature__title {
  font-size: 0.8125rem;
  line-height: 1.25;
}

.kawann-card__brand {
  margin-top: 2px;
}

/* La ligne de prix ne porte plus que le prix et, s'il y a remise, le prix
   barré : deux montants, insécables, toujours sur une ligne. Le prix à
   l'unité a sa propre ligne en dessous (voir « Alignement des cartes »). */
.product-miniature__prices {
  flex-wrap: nowrap;
  align-items: baseline;
  margin-top: 6px;
}

.product-miniature__price,
.product-miniature__discount-price {
  font-size: 1rem;
  white-space: nowrap;
}

.kawann-card__unit {
  white-space: nowrap;
}

.kawann-card__stock {
  margin-top: 4px;
}

.product-miniature__actions {
  margin-top: 8px;
}


/* ==========================================================================
   Aperçu rapide — pastille en haut à droite
   Le thème parent affiche un bandeau « Aperçu rapide » qui recouvre le bas du
   visuel au survol : il masque le produit au moment précis où l'on cherche à
   le regarder. On le réduit à une pastille discrète, toujours visible.
   Toujours visible et non au survol : sur mobile et sur tablette il n'y a pas
   de survol, la commande serait inatteignable.
   ========================================================================== */
.product-miniature__quickview-button {
  position: absolute;
  top: 8px;
  right: 8px;
  bottom: auto;
  left: auto;
  width: 30px;
  height: 30px;
  min-width: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--kawann-border);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--kawann-marine);
  opacity: 1;
  transform: none;
  /* Le libellé est un nœud de texte nu, sans balise à cibler : font-size: 0
     l'escamote. Rien n'est perdu pour l'accessibilité, l'aria-label du bouton
     porte déjà « Aperçu rapide » suivi du nom du produit. */
  font-size: 0;
  line-height: 0;
}

.product-miniature__quickview-button .material-icons {
  font-size: 17px;
  line-height: 1;
}

.product-miniature__quickview-button:hover,
.product-miniature__quickview-button:focus-visible {
  background: var(--kawann-blanc);
  border-color: var(--kawann-soleil);
  color: var(--kawann-marine);
}

/* La variante tactile du parent ferait une seconde pastille : la nôtre est
   déjà accessible au doigt. */
.product-miniature__quickview-touch {
  display: none;
}


/* ==========================================================================
   Alignement des cartes entre elles
   Titre sur une ou deux lignes, marque présente ou non : chaque carte plaçait
   son prix, son stock et ses boutons à une hauteur différente. On réserve une
   hauteur fixe pour les éléments à contenu variable, si bien que toutes les
   lignes se répondent d'une carte à l'autre quel que soit le contenu.
   ========================================================================== */

/* Deux lignes réservées, ni plus ni moins : un titre court occupe quand même
   la place de deux lignes, un titre long est coupé à deux avec des points de
   suspension. Le nom complet reste dans le lien pour l'infobulle et les
   lecteurs d'écran. */
.product-miniature__title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Trois lignes : les noms du catalogue (« Champagne Moet & Chandon Brut
     Imperial 75 Cl ») ne tenaient pas sur deux et se coupaient sans points de
     suspension. Hauteur en em pour suivre le corps et l'interligne.
     Pas de « line-clamp » standard : sur Chrome récent il prend le pas sur
     -webkit-line-clamp et supprime les points de suspension. */
  line-height: 1.25;
  min-height: 3.75em;
  height: 3.75em;
}

/* Une ligne réservée, y compris quand la marque est absente. */
.kawann-card__brand {
  min-height: 1.125rem;
  height: 1.125rem;
  overflow: hidden;
}

/* …sauf qu'au catalogue Kawann, cinq produits sur 504 portent une marque et
   deux sont en promotion. Réserver ces deux lignes partout coûtait près de
   70 px de hauteur à chaque carte pour sept produits. Les lignes vides se
   referment donc ; les rares cartes qui les remplissent sont un peu plus
   hautes et leur rangée s'aligne sur elles, ce qui ne se remarque pas.
   Les pastilles contiennent des blancs quand il n'y a rien à montrer, d'où
   le test sur les enfants plutôt que :empty. */
.kawann-card__brand:empty,
.kawann-card__badges:not(:has(> *)) {
  display: none;
}

/* Le bloc d'infos du parent est une grille qui s'étire sur la hauteur libre
   de la carte et répartit le surplus entre ses lignes : dès que le bloc de
   boutons change de hauteur (« Voir détails » d'un produit en rupture est
   plus haut que quantité + panier), toutes les lignes remontent de quelques
   pixels. On cale les lignes en haut ; le surplus reste en bas, au-dessus
   des boutons, invisible. */
.product-miniature__infos {
  align-content: start;
}

/* Hauteurs figées pour que les lignes suivantes se répondent aussi. Chaque
   ligne est toujours rendue (vide au besoin, voir le gabarit) : d'une carte à
   l'autre, prix, prix à l'unité, pastille et stock tombent au même endroit. */
.product-miniature__prices {
  min-height: 1.5rem;
  height: 1.5rem;
}

.kawann-card__unit {
  min-height: 1rem;
  height: 1rem;
  line-height: 1rem;
  margin: 2px 0 0;
  white-space: nowrap;
}

/* Une pastille fait 25px ; la ligne en réserve 28 pour respirer. */
.kawann-card__badges {
  min-height: 1.75rem;
  height: 1.75rem;
  margin: 4px 0 0;
}

.kawann-card__stock {
  min-height: 1.125rem;
  height: 1.125rem;
  margin-top: 4px;
}

/* Les boutons se calent en bas de carte : les cartes d'une même ligne ayant
   la même hauteur, ils s'alignent d'eux-mêmes. */
.product-miniature__bottom {
  display: flex;
  flex-direction: column;
}

.product-miniature__infos {
  flex: 1 1 auto;
}

.product-miniature__actions {
  margin-top: auto;
  padding-top: 8px;
}


/* --- Liste repliée aux 5 premiers rayons ---
   Le masquage porte sur les entrées de PREMIER niveau uniquement
   (:scope > li) : une sous-catégorie dépliée ne doit pas compter dans les
   cinq. La liste reste toujours visible — plus besoin d'ouvrir « Catalogue »
   pour voir un rayon. */
.js-cat-tronque .category-tree__child > .category-tree__list > .category-tree__item:nth-child(n + 6) {
  display: none;
}

.js-cat-tronque.is-deplie .category-tree__child > .category-tree__list > .category-tree__item {
  display: block;
}

.category-tree__more {
  display: block;
  width: 100%;
  padding: 10px 16px;
  border: 0;
  border-top: 1px solid var(--kawann-border);
  background: transparent;
  color: var(--kawann-soleil-ink);
  font-size: 0.8125rem;
  font-weight: var(--kawann-weight-bold);
  text-align: left;
  cursor: pointer;
}

.category-tree__more:hover {
  background: var(--kawann-surface);
}

/* Un seul libellé à la fois, selon l'état du panneau. */
.category-tree__more-moins,
.js-cat-tronque.is-deplie .category-tree__more-plus {
  display: none;
}

.js-cat-tronque.is-deplie .category-tree__more-moins {
  display: inline;
}


/* ==========================================================================
   Passe minimaliste — typographie et cadres du catalogue
   Le catalogue empilait les signaux : chapeau en 28px ExtraBold, entrées de
   menu en SemiBold marine, prix en 16px ExtraBold, panneaux cernés d'un
   cadre, chevrons devant chaque ligne. Tout criait, donc plus rien ne
   ressortait.
   On resserre l'échelle typographique et on remplace les cadres par du blanc
   et des filets. Un seul élément reste appuyé par carte — le prix — et un
   seul dans la colonne — la catégorie courante.
   ========================================================================== */

/* --- Colonne de gauche --- */
.left-block {
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
}

.left-block__title {
  padding: 0 0 10px;
  border-bottom: 1px solid var(--kawann-border);
  font-size: 0.6875rem;
  font-weight: var(--kawann-weight-bold);
  letter-spacing: 0.12em;
  color: var(--kawann-text-muted);
}

.category-tree__child { padding: 6px 0 0; }

.category-tree__item-link {
  gap: 0;
  padding: 8px 8px 8px 0;
  border-radius: 6px;
  font-size: 0.8125rem;
  color: var(--kawann-text-muted);
}

/* Les chevrons devant chaque entrée n'apportaient aucune information : douze
   flèches identiques qui ne pointent nulle part. Supprimés. */
.category-tree__chevron { display: none; }

.category-tree__item-link:hover {
  background: transparent;
  color: var(--kawann-marine);
}

/* Seule la catégorie courante est appuyée, et par deux signaux : la graisse
   et un filet Soleil — jamais par la couleur seule (WCAG 2.2 AA, 1.4.1). */
.category-tree__item-link.is-current {
  background: transparent;
  padding-left: 10px;
  border-left: 2px solid var(--kawann-soleil);
  border-radius: 0;
  font-weight: var(--kawann-weight-bold);
  color: var(--kawann-marine);
}

.category-tree__more {
  padding: 10px 0 0;
  border-top: 1px solid var(--kawann-border);
  font-size: 0.75rem;
  font-weight: var(--kawann-weight-text);
  color: var(--kawann-text-muted);
}

.category-tree__more:hover {
  background: transparent;
  color: var(--kawann-marine);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- En-tête de page --- */
.kawann-cat-header__kicker {
  font-size: 1.375rem;
  letter-spacing: -0.01em;
}

.kawann-cat-header__name {
  font-size: 0.875rem;
  font-weight: var(--kawann-weight-text);
}

.kawann-cat-header__count {
  font-weight: var(--kawann-weight-text);
  color: var(--kawann-text-muted);
}

/* Réassurance : cadre léger, filets internes plus clairs que le contour pour
   que le bloc se lise comme un ensemble et non comme trois cases. */
.kawann-cat-reassurance {
  border: 1px solid var(--kawann-border);
  border-radius: 10px;
  background: var(--kawann-blanc);
}

.kawann-cat-reassurance__item { padding: 10px 18px; }

.kawann-cat-reassurance__item + .kawann-cat-reassurance__item {
  border-left: 1px solid var(--kawann-border-clair, #efeae2);
}

.kawann-cat-reassurance__text strong {
  font-size: 0.75rem;
  font-weight: var(--kawann-weight-text);
}

.kawann-cat-reassurance__text span { font-size: 0.6875rem; }
.kawann-cat-reassurance__icon { width: 18px; height: 18px; color: var(--kawann-text-muted); }

/* --- Barre d'outils --- */
.products__selection {
  border: 0;
  border-bottom: 1px solid var(--kawann-border);
  border-radius: 0;
  padding: 0 0 12px;
  background: transparent;
}

/* --- Carte produit --- */
.product-miniature__inner {
  border-color: var(--kawann-border);
  border-radius: 8px;
}

.product-miniature__title {
  font-size: 0.8125rem;
  font-weight: var(--kawann-weight-text);
  color: var(--kawann-marine);
}

.kawann-card__brand {
  font-size: 0.6875rem;
  font-weight: var(--kawann-weight-text);
}

/* Le prix est le seul élément appuyé de la carte. */
.product-miniature__price {
  font-size: 0.9375rem;
  font-weight: var(--kawann-weight-bold);
}

.kawann-card__unit { font-size: 0.6875rem; }

.kawann-card__stock {
  font-size: 0.6875rem;
  font-weight: var(--kawann-weight-text);
}

.kawann-card__dot { width: 6px; height: 6px; }


/* --- Sous-catégories ---
   Les puces étaient en 16px cerné d'un liseré, dans une pastille pleinement
   arrondie : plus grosses que le titre des produits qu'elles servent à
   filtrer, et le seul élément encore cerné de la page après l'allègement.
   On les ramène à 12px, sans bordure, sur un aplat discret. */
.subcategory__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}

.subcategory__link {
  padding: 6px 12px;
  border: 0;
  border-radius: 6px;
  background: var(--kawann-surface);
  font-size: 0.75rem;
  font-weight: var(--kawann-weight-text);
  color: var(--kawann-text-muted);
  text-decoration: none;
  line-height: 1.4;
}

.subcategory__link:hover,
.subcategory__link:focus-visible {
  background: var(--kawann-soleil-wash, #fdf0d8);
  color: var(--kawann-marine);
}

.subcategory__name { font-size: inherit; }

/* --- Bulle de comptage des catégories ---
   Le nombre est poussé contre le bord droit du panneau et reste lisible même
   à trois chiffres : les chiffres tabulaires évitent que la bulle change de
   largeur d'une ligne à l'autre. Le libellé garde la priorité sur l'espace,
   la bulle ne se comprime jamais. */
.category-tree__count {
  flex: 0 0 auto;
  margin-left: auto;
  min-width: 22px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--kawann-surface);
  font-size: 0.6875rem;
  font-weight: var(--kawann-weight-bold);
  line-height: 1.45;
  color: var(--kawann-text-muted);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.category-tree__item-link:hover .category-tree__count {
  background: var(--kawann-soleil-wash, #fdf0d8);
  color: var(--kawann-marine);
}

.category-tree__item-link.is-current .category-tree__count {
  background: var(--kawann-marine);
  color: var(--kawann-blanc);
}

/* Le libellé doit céder l'espace à la bulle plutôt que la pousser dehors. */
.category-tree__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Barre d'outils épurée ---
   « Il y a N produits » fait doublon avec le compteur du titre de catégorie et
   avec les bulles de la colonne de gauche : on le retire du flux. Le tri perd
   son cadre et son fond pour ne garder qu'un libellé discret suivi de la
   valeur courante. */
.products__count { display: none; }

.products__selection {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.products__sort {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.products__sort-label {
  font-size: 0.75rem;
  font-weight: var(--kawann-weight-text);
  color: var(--kawann-text-muted);
}

.products__sort-dropdown-button.btn {
  padding: 4px 2px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  box-shadow: none;
  font-size: 0.75rem;
  font-weight: var(--kawann-weight-bold);
  color: var(--kawann-marine);
}

.products__sort-dropdown-button.btn:hover,
.products__sort-dropdown-button.btn:focus-visible,
.products__sort-dropdown-button.btn.show {
  background: transparent;
  color: var(--kawann-marine);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Le contour de focus reste visible, il portait tout l'indice clavier
   avant que le cadre du bouton ne disparaisse (WCAG 2.2 AA, 2.4.11). */
.products__sort-dropdown-button.btn:focus-visible {
  outline: 2px solid var(--kawann-marine);
  outline-offset: 2px;
}

.products__sort-dropdown .dropdown-item {
  font-size: 0.8125rem;
  color: var(--kawann-marine);
}

/* --- Pagination épurée ---
   « Affichage 1-8 de 8 article(s) » répète le compteur déjà affiché sous le
   titre de la catégorie : on le retire et on recentre les liens de pages, qui
   sont la seule partie utile du bloc. */
.pagination__number { display: none; }

.pagination__container {
  display: flex;
  justify-content: center;
}

.pagination__nav { margin: 0; }

/* Les pages : des tuiles carrées à coins arrondis, la page courante en Soleil
   plein, précédent/suivant réduits à leur flèche dans une tuile identique.
   Le libellé « Précédent / Suivant » reste dans le DOM pour l'aria-label du
   bouton et les lecteurs d'écran, mais n'est plus affiché.
   Cible tactile : 40 px, au-dessus des 24 px de WCAG 2.5.8. */
.pagination__nav .pagination {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.pagination__nav .page-item { margin: 0; }

.pagination__nav .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  border: 1px solid var(--kawann-border);
  border-radius: 10px;
  background: var(--kawann-blanc);
  color: var(--kawann-marine);
  font-size: 0.875rem;
  font-weight: var(--kawann-weight-bold);
  line-height: 1;
  box-shadow: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.pagination__nav .page-link:hover,
.pagination__nav .page-link:focus-visible {
  border-color: var(--kawann-marine);
  background: var(--kawann-surface);
  color: var(--kawann-marine);
}

.pagination__nav .page-link:focus-visible {
  outline: 2px solid var(--kawann-focus-ring);
  outline-offset: 2px;
}

/* Page courante : Soleil plein, texte marine (7,40:1). */
.pagination__nav .page-item.active .page-link {
  border-color: var(--kawann-soleil);
  background: var(--kawann-soleil);
  color: var(--kawann-marine);
  cursor: default;
}

/* Points de suspension : pas une tuile, juste le signe. */
.pagination__nav .page-item.disabled span.page-link {
  min-width: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--kawann-text-muted);
  font-weight: var(--kawann-weight-text);
}

/* Précédent / suivant : la flèche seule. Le libellé est affiché par
   l'utilitaire Bootstrap « .d-xl-flex » (display:flex !important, couche
   « utilities ») : sur une déclaration importante la couche l'emporte sur le
   non-couché, on se place donc dans la même couche, après lui. */
@layer utilities {
  .pagination__nav .page-link.previous span,
  .pagination__nav .page-link.next span {
    display: none !important;
  }
}

.pagination__nav .page-link.previous .material-icons,
.pagination__nav .page-link.next .material-icons {
  font-size: 22px;
  margin: 0;
}

/* Aux extrémités, le bouton reste visible mais s'efface. */
.pagination__nav .page-link.previous:disabled,
.pagination__nav .page-link.next:disabled {
  border-color: var(--kawann-border-clair);
  background: var(--kawann-surface);
  color: var(--kawann-border);
  cursor: not-allowed;
}

/* Un peu d'air entre les flèches et les numéros. */
.pagination__nav .page-item:first-child { margin-right: 6px; }
.pagination__nav .page-item:last-child { margin-left: 6px; }

/* Sans liens de pages, le conteneur ne doit pas laisser d'espace vide.
   Attention : le thème rend les pages avec des <button>, pas des <a> — un
   test sur « a » masquerait la pagination alors qu'elle est nécessaire. On
   teste donc la présence de la liste elle-même. */
.products__pagination:not(:has(.pagination__nav .pagination)) {
  display: none;
}

/* --- Sélecteur de tri ---
   <select> natif : on neutralise l'apparence système et on redessine le
   chevron en fond, pour garder le registre minimaliste de la barre d'outils
   sans perdre le comportement natif du contrôle. */
.kawann-tri {
  appearance: none;
  -webkit-appearance: none;
  max-width: 100%;
  padding: 5px 26px 5px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2314263d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 14px 14px;
  font-size: 0.75rem;
  font-weight: var(--kawann-weight-bold);
  font-family: inherit;
  line-height: 1.4;
  color: var(--kawann-marine);
  cursor: pointer;
}

.kawann-tri:hover { border-color: var(--kawann-border); }

.kawann-tri:focus-visible {
  outline: 2px solid var(--kawann-marine);
  outline-offset: 2px;
}

/* Le menu natif s'affiche aux couleurs du système : on ne force que le fond
   des options, que Firefox rendrait sinon transparent sur certains thèmes. */
.kawann-tri option {
  background: var(--kawann-blanc);
  color: var(--kawann-marine);
  font-weight: var(--kawann-weight-text);
}

/* --- Filtres à facettes ---
   Même grammaire visuelle que l'arbre des catégories juste au-dessus :
   même intitulé de panneau, mêmes tailles, mêmes filets. */
.ps-facetedsearch.left-block { margin-top: 22px; }

.search-filters .accordion--small .accordion-item + .accordion-item {
  border-top: 1px solid var(--kawann-border-clair, #efeae2);
}

.search-filters .accordion--small .accordion-button {
  padding: 12px 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  font-size: 0.8125rem;
  font-weight: var(--kawann-weight-bold);
  color: var(--kawann-marine);
}

.search-filters .accordion--small .accordion-button:focus-visible {
  outline: 2px solid var(--kawann-marine);
  outline-offset: 2px;
}

.search-filters .accordion-body {
  padding: 0 0 12px;
  margin: 0;
  list-style: none;
}

.search-filters__item { padding: 3px 0; }

.search-filters__form-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  min-height: 0;
}

.search-filters__form-check .form-check-input {
  flex: 0 0 auto;
  margin: 0;
  width: 15px;
  height: 15px;
  border-color: var(--kawann-border);
}

.search-filters__form-check .form-check-input:checked {
  background-color: var(--kawann-marine);
  border-color: var(--kawann-marine);
}

.search-filters__form-label {
  min-width: 0;
  font-size: 0.78125rem;
  color: var(--kawann-text-muted);
  cursor: pointer;
}

.search-filters__link {
  color: inherit;
  text-decoration: none;
}

.search-filters__item.active .search-filters__form-label {
  color: var(--kawann-marine);
  font-weight: var(--kawann-weight-bold);
}

.search-filters__magnitude {
  color: var(--kawann-text-muted);
  font-size: 0.6875rem;
}

/* Curseur de prix aux couleurs de la marque. */
.search-filters__slider-container { padding: 4px 2px 14px; }

.search-filters__slider.noUi-target {
  height: 4px;
  border: 0;
  box-shadow: none;
  background: var(--kawann-border);
}

.search-filters__slider .noUi-connect { background: var(--kawann-marine); }

.search-filters__slider .noUi-handle {
  width: 16px;
  height: 16px;
  top: -6px;
  right: -8px;
  border: 2px solid var(--kawann-marine);
  border-radius: 50%;
  background: var(--kawann-blanc);
  box-shadow: none;
  cursor: pointer;
}

.search-filters__slider .noUi-handle::before,
.search-filters__slider .noUi-handle::after { display: none; }

.search-filters__slider-values {
  padding-top: 12px;
  font-size: 0.75rem;
  color: var(--kawann-marine);
}

/* Bouton « Tout effacer » ramené au même registre que « Voir plus ». */
.search-filters__clear { padding: 10px 0 0; }

.search-filters__clear .btn {
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 0.75rem;
  color: var(--kawann-text-muted);
}

.search-filters__clear .btn:hover {
  background: transparent;
  color: var(--kawann-marine);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Réassurance : cartes aux couleurs de la marque, avec reflet ---
   Chaque item devient sa propre carte : le cadre commun et les filets qui
   les séparaient n'ont plus d'objet. Dégradé marine du logo, icône sur le
   jaune soleil, texte en blanc. */
.kawann-cat-reassurance {
  gap: 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.kawann-cat-reassurance__item {
  position: relative;
  overflow: hidden;
  padding: 11px 16px;
  border-radius: 10px;
  background: linear-gradient(
    135deg,
    var(--kawann-marine) 0%,
    var(--kawann-marine-clair) 52%,
    var(--kawann-marine) 100%
  );
  box-shadow: 0 2px 10px rgba(20, 38, 61, 0.18);
}

.kawann-cat-reassurance__item + .kawann-cat-reassurance__item {
  border-left: 0;
}

/* Le reflet balaie la carte en diagonale. Il est purement décoratif et passe
   sous le texte, jamais devant : c'est le contenu qui doit rester lisible. */
.kawann-cat-reassurance__item::after {
  content: "";
  position: absolute;
  top: -60%;
  bottom: -60%;
  left: -45%;
  width: 32%;
  transform: skewX(-18deg);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.22) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  pointer-events: none;
  animation: kawann-reflet 5s ease-in-out infinite;
}

/* Décalage d'une carte à l'autre : le reflet parcourt le bandeau plutôt que
   de faire clignoter les trois blocs en même temps. */
.kawann-cat-reassurance__item:nth-child(2)::after { animation-delay: 0.45s; }
.kawann-cat-reassurance__item:nth-child(3)::after { animation-delay: 0.9s; }

@keyframes kawann-reflet {
  0%        { transform: translateX(0) skewX(-18deg); }
  55%, 100% { transform: translateX(460%) skewX(-18deg); }
}

/* Le reflet est un ornement : sous « mouvement réduit », il disparaît et la
   carte garde son dégradé (WCAG 2.2 AA, 2.3.3). */
@media (prefers-reduced-motion: reduce) {
  .kawann-cat-reassurance__item::after { animation: none; }
}

/* Icône et texte au-dessus du reflet. */
.kawann-cat-reassurance__icon,
.kawann-cat-reassurance__text {
  position: relative;
  z-index: 1;
}

.kawann-cat-reassurance__icon { color: var(--kawann-soleil); }

.kawann-cat-reassurance__text strong { color: var(--kawann-blanc); }

.kawann-cat-reassurance__text span { color: #c5d0dd; }

/* --- Sous-catégories défilantes, sur la ligne du tri ---
   Elles occupaient jusqu'ici deux ou trois rangs au-dessus de la grille et
   repoussaient les produits sous la ligne de flottaison. Ramenées ici, elles
   tiennent sur une seule ligne quel que soit leur nombre. */
.products__selection {
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 16px;
}

.kawann-souscats {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 260px;
  min-width: 0;
}

.kawann-souscats__piste {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-behavior: smooth;
  /* La barre native est masquée au profit des flèches ; la piste reste
     défilable au doigt, à la molette et au clavier. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.kawann-souscats__piste::-webkit-scrollbar { display: none; }

.kawann-souscats__item { flex: 0 0 auto; }

.kawann-souscats .subcategory__link { white-space: nowrap; }

/* Flèches aux couleurs du logo : disque jaune soleil, chevron marine.
   28px de côté, au-dessus du minimum de 24 (WCAG 2.2 AA, 2.5.8). */
.kawann-souscats__fleche {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--kawann-soleil);
  color: var(--kawann-marine);
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
}

/* Les flèches n'apparaissent que si la piste déborde réellement. */
.kawann-souscats.is-defilable .kawann-souscats__fleche { display: flex; }

.kawann-souscats__fleche:hover:not(:disabled) {
  background: var(--kawann-soleil-ink);
  color: var(--kawann-blanc);
}

.kawann-souscats__fleche:focus-visible {
  outline: 2px solid var(--kawann-marine);
  outline-offset: 2px;
}

/* Bout de course : la flèche s'efface sans disparaître, pour que la piste ne
   se décale pas d'un cran à chaque défilement. */
.kawann-souscats__fleche:disabled {
  opacity: 0.3;
  cursor: default;
}

/* Sous 768px le tri passe sous la piste, qui garde toute la largeur. */
@media (max-width: 767.98px) {
  .kawann-souscats { flex: 1 1 100%; }

  /* --- Barre tri + filtre : deux pilules jumelles ---
     Le tri était un <select> nu de 29px en 12px, le bouton « Filtrer » un
     bouton Bootstrap contour de 38px en 16px gras : deux commandes de même
     rang, deux dessins. Même hauteur, même bordure, même rayon (celui des
     puces de rayons juste au-dessus), même corps ; le tri prend la largeur
     disponible, le filtre sa largeur naturelle. */
  .products__sort {
    width: 100%;
    margin-left: 0;
    gap: 8px;
  }

  .products__sort-label { display: none; }

  .products__sort-dropdown { flex: 1 1 auto; min-width: 0; }

  .kawann-tri {
    width: 100%;
    min-height: 38px;
    padding: 0 34px 0 14px;
    border: 1px solid var(--kawann-border);
    border-radius: 999px;
    background-color: var(--kawann-blanc);
    background-position: right 12px center;
    font-size: 0.8125rem;
    font-weight: var(--kawann-weight-bold);
    color: var(--kawann-marine);
  }

  .products__filter-button.btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid var(--kawann-border);
    border-radius: 999px;
    background: var(--kawann-blanc);
    font-size: 0.8125rem;
    font-weight: var(--kawann-weight-bold);
    line-height: 1;
    color: var(--kawann-marine);
    box-shadow: none;
  }

  .products__filter-button.btn .material-icons {
    font-size: 18px;
    line-height: 1;
  }

  .products__filter-button.btn:hover,
  .products__filter-button.btn:focus-visible,
  .kawann-tri:focus-visible {
    border-color: var(--kawann-marine);
    background-color: var(--kawann-surface);
    color: var(--kawann-marine);
  }
}

/* --- Aperçu rapide et favoris sur la ligne « En stock » ---
   Déplacés dans cette ligne par kawann-catalogue.js. On annule ici leur
   positionnement absolu d'origine et on les réduit à deux icônes nues,
   alignées à droite. 24px de côté : le minimum tactile (WCAG 2.2 AA, 2.5.8). */
.kawann-card__stock {
  display: flex;
  align-items: center;
  gap: 6px;
}

.kawann-card__actions {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

.kawann-card__action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.kawann-card__actions .product-miniature__quickview-button,
.kawann-card__actions .wishlist-button-add {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  box-shadow: none;
  opacity: 1;
  transform: none;
  color: var(--kawann-text-muted);
}

.kawann-card__actions .material-icons {
  font-size: 16px;
  line-height: 1;
}

/* Le libellé « Aperçu rapide » du parent n'a plus sa place : l'icône seule
   suffit, le nom accessible du bouton reste porté par son aria-label. */
.kawann-card__actions .product-miniature__quickview-button {
  font-size: 0;
  gap: 0;
}

.kawann-card__actions .product-miniature__quickview-button:hover,
.kawann-card__actions .wishlist-button-add:hover {
  background: var(--kawann-surface);
  color: var(--kawann-marine);
}

.kawann-card__actions .product-miniature__quickview-button:focus-visible,
.kawann-card__actions .wishlist-button-add:focus-visible {
  outline: 2px solid var(--kawann-marine);
  outline-offset: 1px;
}

/* Le thème parent cale le bouton favoris en absolu avec un sélecteur plus
   spécifique que le nôtre (.products article .wishlist-button-add). On se
   place dans le même contexte pour reprendre la main sans recourir à
   !important. */
.products article .kawann-card__actions .wishlist-button-add {
  position: static;
  top: auto;
  right: auto;
  left: auto;
  z-index: auto;
  width: 24px;
  height: 24px;
  min-width: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  box-shadow: none;
  color: var(--kawann-text-muted);
}

.products article .kawann-card__actions .wishlist-button-add:hover {
  background: var(--kawann-surface);
  color: var(--kawann-marine);
}

/* --- Cohérence de la colonne de gauche ---
   Les deux panneaux partageaient déjà leur intitulé (11px / 700 / capitales /
   1,32px d'interlettrage) mais divergeaient sur tout le reste :

     entrée de catégorie   13px · 600 · gris ardoise · 8px 0
     titre de facette      13px · 700 · marine      · 12px 0

   On aligne le second sur le premier. Les options de facette (12,5px · 600 ·
   gris) correspondaient déjà aux sous-catégories : on ne touche qu'à leur mise
   en ligne pour aligner le compte à droite, comme les bulles des catégories. */
.search-filters .accordion--small .accordion-button {
  padding: 8px 0;
  font-size: 0.8125rem;
  font-weight: var(--kawann-weight-text);
  color: var(--kawann-text-muted);
}

.search-filters .accordion--small .accordion-button:not(.collapsed) {
  color: var(--kawann-text-muted);
}

/* Les facettes cumulaient deux filets de teintes différentes entre chaque
   groupe : le mien en haut et celui de l'accordéon Bootstrap en bas. On n'en
   garde qu'un, dans la teinte déjà utilisée sous les intitulés de panneau. */
.search-filters .accordion--small .accordion-item {
  border-bottom: 0;
}

.search-filters .accordion--small .accordion-item + .accordion-item {
  border-top: 1px solid var(--kawann-border);
}

/* Compte des options aligné à droite, à la taille des bulles de catégories. */
.search-filters__form-label {
  width: 100%;
  min-width: 0;
}

.search-filters__link {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.search-filters__magnitude {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 0.6875rem;
  color: var(--kawann-text-muted);
}

/* Même respiration entre les deux panneaux qu'entre les entrées d'une liste. */
.ps-facetedsearch.left-block { margin-top: 18px; }

/* --- Équilibre optique de la colonne de gauche ---
   Les tailles étaient déjà accordées (13px pour un rayon comme pour un titre
   de facette), mais les noms de rayons sont stockés en CAPITALES : à taille
   égale, des capitales occupent toute la hauteur de casse là où « Prix »
   n'en remplit que les deux tiers, et pèsent donc nettement plus.
   On compense d'un cran. Le vrai correctif serait de saisir les noms en
   bas-de-casse ; tant qu'ils restent en capitales, ce réglage les rapproche. */
.category-tree__list[data-depth="0"] > .category-tree__item > .category-tree__item-header > .category-tree__item-link {
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}

/* Les bornes du curseur de prix étaient le seul texte marine de la colonne,
   et d'une taille à part. On les aligne sur les autres valeurs. */
.search-filters__slider-values {
  font-size: 0.78125rem;
  color: var(--kawann-text-muted);
}

/* ==========================================================================
   Pastilles produit (« Promo ! », « Lot », rupture) — vignettes, fiche et
   aperçu rapide. Le parent les rend en marine 12 px collées au coin ; on les
   aligne sur le badge « PROMOTIONS » de l'accueil : Soleil plein, texte
   marine (7,40:1), décollées du bord.
   ========================================================================== */
.product-flags {
  top: 10px;
  left: 10px;
  gap: 4px;
}

.product-flags .badge {
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 0.6875rem;
  font-weight: var(--kawann-weight-title);
  letter-spacing: 0.06em;
  line-height: 1.2;
}

/* Les couleurs sont à part : le parent les pose via l'utilitaire Bootstrap
   « .text-bg-primary », en !important et dans la couche « bs-base ». Sur une
   déclaration importante, une couche l'emporte sur le non-couché — l'inverse
   de la règle habituelle. On entre donc dans la même couche, avec la même
   spécificité, chargé après lui : c'est l'ordre d'apparition qui tranche. */
@layer bs-base {
  /* Neutre pour les pastilles d'information (rupture, lot)… */
  .product-flags .badge:not(.on-sale) {
    background: var(--kawann-border) !important;
    color: var(--kawann-marine) !important;
  }

  /* …Soleil pour la seule pastille commerciale. */
  .product-flags .badge.on-sale {
    background: var(--kawann-soleil) !important;
    color: var(--kawann-marine) !important;
  }
}

/* Sur la carte, les pastilles sont dans le corps, sous le prix : elles ne
   sont plus positionnées sur l'image. La fiche produit et l'aperçu rapide
   gardent le placement en coin d'image du parent. */
.product-miniature__bottom .product-flags {
  position: static;
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* « Voir détails » (produit en rupture) : même hauteur que la ligne
   quantité + panier qu'il remplace (30px), pour que le bas de carte tombe
   au même endroit qu'un produit en stock. Le bouton reste un vrai bouton :
   sa zone cliquable garde la largeur de la carte. */
.product-miniature__actions .product-miniature__details {
  min-height: 30px;
  padding: 3px 12px;
  font-size: 0.875rem;
  line-height: 22px;
}

/* ==========================================================================
   Catalogue sur mobile (sous 768px)
   ========================================================================== */
@media (max-width: 767.98px) {

  /* --- Les trois cartes de réassurance : une seule ligne qui défile ---
     Chaque carte garde sa largeur naturelle ; le rail défile à crans, carte
     par carte, et kawann-carrousel.js fait avancer tout seul jusqu'au
     premier geste du visiteur. Le débord latéral rejoint le bord de
     l'écran, pour que la carte suivante se devine. */
  .kawann-cat-reassurance-rail {
    margin-inline: calc(-1 * var(--kawann-colonne-retrait-mobile));
  }

  .kawann-cat-reassurance {
    flex-wrap: nowrap;
    gap: 10px;
    padding: 4px var(--kawann-colonne-retrait-mobile) 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--kawann-colonne-retrait-mobile);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .kawann-cat-reassurance::-webkit-scrollbar { display: none; }

  .kawann-cat-reassurance__item {
    flex: 0 0 auto;
    scroll-snap-align: start;
    white-space: nowrap;
  }

  /* --- Catégories : des puces sur une ligne, plus une liste verticale ---
     Le panneau de gauche empilait douze rayons et un « Voir plus » au-dessus
     des produits, soit un écran entier avant le premier article. Sur mobile
     les rayons deviennent une rangée de puces qui défile au doigt, le rayon
     courant en marine. Les sous-rayons ont déjà leur propre rangée sur la
     ligne du tri (.kawann-souscats), on ne les répète pas ici. */
  .left-block.category-tree {
    margin: 0 calc(-1 * var(--kawann-colonne-retrait-mobile)) 4px;
  }

  .category-tree .left-block__title { display: none; }

  .category-tree__child { padding: 0; }

  .category-tree__list[data-depth="0"] {
    display: flex;
    /* Le parent pose déjà un flex… en colonne. */
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 2px var(--kawann-colonne-retrait-mobile) 10px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--kawann-colonne-retrait-mobile);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .category-tree__list[data-depth="0"]::-webkit-scrollbar { display: none; }

  .category-tree__list[data-depth="0"] > .category-tree__item {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  /* Tous les rayons dans la rangée : la troncature à cinq et le « Voir plus »
     n'ont de sens qu'en colonne. */
  .js-cat-tronque .category-tree__child > .category-tree__list > .category-tree__item:nth-child(n + 6) {
    display: block;
  }

  .category-tree__more { display: none; }

  /* Ni bouton d'accordéon ni sous-liste dépliée. */
  .category-tree__item-header .accordion-button { display: none; }
  .category-tree__list[data-depth="0"] .accordion-collapse { display: none; }

  .category-tree__item-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 6px 12px;
    border: 1px solid var(--kawann-border);
    border-radius: 999px;
    background: var(--kawann-blanc);
    font-size: 0.8125rem;
    font-weight: var(--kawann-weight-bold);
    white-space: nowrap;
    color: var(--kawann-marine);
    text-transform: none;
  }

  .category-tree__item-link.is-current {
    padding-left: 12px;
    border: 1px solid var(--kawann-marine);
    border-radius: 999px;
    background: var(--kawann-marine);
    color: var(--kawann-blanc);
  }

  .category-tree__count {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--kawann-surface);
    font-size: 0.6875rem;
    font-weight: var(--kawann-weight-text);
    color: var(--kawann-text-muted);
  }

  .category-tree__item-link.is-current .category-tree__count {
    background: rgba(255, 255, 255, 0.18);
    color: var(--kawann-blanc);
  }
}

/* ==========================================================================
   Plafond de quantité au stock (kawann-quantite.js)
   Le « + » désactivé reste lisible mais neutre ; la note tient sur une ligne
   sous le sélecteur, sans décaler la carte (elle occupe la marge basse).
   ========================================================================== */
.js-quantity-button .js-increment-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.kawann-qte__max {
  margin: 4px 0 0;
  font-size: 0.6875rem;
  line-height: 1.3;
  color: var(--kawann-text-muted);
}

/* Sur la carte, c'est la ligne « En stock » qui devient « Stock maximum : n »
   (pastille conservée, teinte neutre). */
.kawann-card__stock--max { color: var(--kawann-text-muted); }