/* ==========================================================================
   La Médocaine — page catégorie (maquette Figma, node 72:72)
   Chargée UNIQUEMENT sur les pages catégorie (déclarée dans config/theme.yml).
   La miniature produit, l'en-tête de section et les bandes globales vivent dans
   custom.css : rien n'est redéfini ici.
   ========================================================================== */

/* ── Couverture ────────────────────────────────────────────────────────────
   Bande pleine largeur de 318 px : image de la catégorie (back-office, ou
   visuel générique du thème) assombrie d'un voile, fil d'Ariane, titre et
   nombre de produits sur la même ligne de base, description courte, et le tri
   en pastille crème calée en bas à droite.

   Elle prend la place du bloc `breadcrumb` du gabarit : c'est le seul
   emplacement pleine largeur situé AU-DESSUS des deux colonnes.             */

.category-cover {
  position: relative;
  /* ⚠️ PAS d'overflow ici : le menu de tri est ancré en bas de la bande, et
     lorsqu'il s'ouvre vers le bas il en sort — masqué, il devenait
     invisible. Le rognage descend sur le média, seul élément à en avoir
     besoin. */
  background-color: var(--md-navy);
  color: var(--md-white);
  border-block-end: 1px solid var(--md-line-soft);
  padding-block: clamp(2rem, 5vw, 3.75rem) clamp(1.5rem, 3vw, 1.8125rem);
}

.category-cover__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.category-cover__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Voile : la maquette assombrit à 60 % pour garder le texte lisible quelle que
   soit l'image chargée en back-office. */
.category-cover__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--md-overlay);
}

.category-cover__inner {
  position: relative;      /* au-dessus du voile */
  display: flex;
  flex-direction: column;
  gap: 1rem;               /* 1,75 rem dès 768 px */
}

.category-cover__breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--md-fs-2xs);
  letter-spacing: var(--md-ls-wide);
  text-transform: uppercase;
}

.category-cover__breadcrumb li + li::before {
  content: "/";
  margin-inline-end: .5rem;
  opacity: .6;
}

.category-cover__breadcrumb a { color: inherit; text-decoration: none; }
.category-cover__breadcrumb a:hover { color: var(--md-gold); }

/* Mobile : une seule ligne, à faire glisser au doigt si le chemin est long,
   sans barre de défilement (même règle que le fil d'Ariane natif). */
@media (max-width: 767.98px) {
  .category-cover__breadcrumb ol {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    white-space: nowrap;
  }

  .category-cover__breadcrumb ol::-webkit-scrollbar { display: none; }

  .category-cover__breadcrumb li { flex: 0 0 auto; }
}

/* Titre et compteur sur la même ligne de base. */
.category-cover__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .9375rem;
}

.category-cover__title {
  font-family: var(--md-font-display);
  font-size: clamp(2.5rem, 5.6vw, 4.5rem);   /* 72 px dans la maquette */
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.005em;
  color: var(--md-cream);
  margin: 0;
}

.category-cover__count {
  font-size: var(--md-fs-md);
  letter-spacing: .16em;
  color: var(--md-cream);
  margin: 0;
}

.category-cover__description {
  max-width: 38.75rem;      /* 620 px */
  font-size: var(--md-fs-md);
  line-height: 1.55;

  /* Le texte vient du back-office et n'a pas de longueur garantie : sans borne,
     une description de dix lignes fait doubler la hauteur de la bande. Quatre
     lignes, soit 4 x 1.55em. Le texte entier reste dans le DOM — lu par les
     moteurs et les lecteurs d'écran, seulement tronqué à l'oeil. */
  max-height: 3.1em;       /* 2 lignes en mobile, 4 dès 768 px */
  overflow: hidden;
}

/* Le socle donne 1,7 d'interligne aux paragraphes riches : la borne ci-dessus
   est calculée à 1,55, la 4e ligne était tranchée à mi-hauteur. */
.category-cover__description p { line-height: inherit; }

/* En mobile, la couverture prenait 421 px : sous l'en-tête collant, aucun
   produit n'était visible à l'arrivée. Elle se resserre, puis retrouve la
   respiration de la maquette dès la tablette. */
@media (min-width: 768px) {
  .category-cover__inner { gap: 1.75rem; }
  .category-cover__description { max-height: 6.2em; }
}

/* ── Dépliage, en CSS pur ──────────────────────────────────────────────────
   Une case à cocher masquée précède le texte et l'étiquette : `:checked ~`
   suffit à tout piloter. Aucun script, donc rien qui puisse ne pas s'exécuter
   — c'est ce qui nous a coûté du temps avec la version JavaScript.          */

.category-cover__toggle {
  /* Masquée à l'oeil mais focalisable au clavier : c'est elle qui porte l'état. */
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
}

.category-cover__toggle:checked ~ .category-cover__description {
  max-height: none;
}

.category-cover__more {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-block-start: .875rem;
  font-size: var(--md-fs-3xs);
  letter-spacing: var(--md-ls-wide);
  text-transform: uppercase;
  color: var(--md-gold);
  cursor: pointer;
  transition: color .18s ease;
}

/* Le filet ne souligne QUE le libellé. Étendu à toute l'étiquette, il passait
   aussi sous le chevron et donnait un trait qui flotte. */
.category-cover__more span {
  border-block-end: 1px solid currentColor;
  padding-block-end: 2px;
}

/* Chevron DESSINÉ plutôt qu'un caractère : un glyphe dépend de la police, se
   cale mal sur la ligne de base et pivote de travers. Deux bordures suffisent. */
.category-cover__more::after {
  content: "";
  width: .375rem;
  height: .375rem;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .18s ease;
}

.category-cover__more:hover { color: var(--md-white); }

/* Le focus se voit sur l'étiquette, puisque la case est invisible. */
.category-cover__toggle:focus-visible ~ .category-cover__more {
  outline: 2px solid var(--md-gold);
  outline-offset: 4px;
}

/* Déplié : le chevron se retourne et remonte d'autant. */
.category-cover__toggle:checked ~ .category-cover__more::after {
  transform: translateY(2px) rotate(-135deg);
}

/* Un seul des deux libellés à la fois. */
.category-cover__more-moins { display: none; }
.category-cover__toggle:checked ~ .category-cover__more .category-cover__more-plus { display: none; }
.category-cover__toggle:checked ~ .category-cover__more .category-cover__more-moins { display: inline; }

.category-cover__description :is(p, li, span, strong, em) { color: var(--md-white); }

.category-cover__description a { color: var(--md-gold); }

.category-cover__description p:last-child { margin-bottom: 0; }

/* Tri : pastille crème. En mobile elle suit le texte, en desktop la maquette la
   cale en bas à droite de la bande. */
.category-cover__sort {
  display: flex;
  align-items: center;
  gap: .5rem;
  align-self: flex-start;
  background-color: var(--md-cream);
  color: var(--md-navy);
  padding: .625rem .9375rem;
}

.category-cover__sort .products__sort-label,
.category-cover__sort .products__sort-dropdown-button {
  color: var(--md-navy);
  font-size: var(--md-fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Hummingbird masque le libellé sous md ; dans la pastille il porte le sens
   (« Trier par : … »), on le garde à toutes les tailles. */
.category-cover__sort .products__sort-label { display: block; }

.category-cover__sort .products__sort-dropdown-button {
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-hover-color: var(--md-gold);
  --bs-btn-active-bg: transparent;
  --bs-btn-active-border-color: transparent;
  --bs-btn-padding-x: 0;
  --bs-btn-padding-y: 0;
  --bs-btn-font-weight: 400;
}

@media (min-width: 992px) {
  .category-cover { min-height: 19.875rem; }   /* 318 px */

  .category-cover__sort {
    position: absolute;
    inset-inline-end: var(--bs-gutter-x, 1.5rem);
    inset-block-end: 0;
  }

  /* La description ne doit pas passer sous la pastille de tri. */
  .category-cover__description { padding-inline-end: 14rem; }
}

/* ── Colonne de filtres ────────────────────────────────────────────────────
   ps_facetedsearch rend un accordéon Bootstrap : on n'en change que l'habillage,
   jamais la mécanique (collapse, ajax, curseur de prix).
   La maquette donne 260 px de panneau ; la colonne Bootstrap en fait 330, on
   plafonne donc le panneau pour retrouver la respiration de la maquette.     */

@media (min-width: 992px) {
  #search_filters_wrapper { max-width: 16.25rem; }

  /* Le parent reste à 2 colonnes jusqu'à 1200 px : les cartes passaient de
     208 px à 328 px de large entre 768 et 992, puis retombaient à 256. Trois
     colonnes dès 992 px, à côté des filtres. */
  .layout-left-column .products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Les filtres passent AVANT l'arbre des catégories : sur une rubrique comme
   « Appellations viticoles », l'arbre compte une centaine d'entrées et
   repoussait les filtres hors de l'écran. L'ordre des modules dans le hook reste
   celui du back-office, on ne fait que le rendre dans l'ordre utile. */
#left-column {
  display: flex;
  flex-direction: column;
}

/* Respiration sous la couverture, relevée sur la maquette : la bande s'arrête
   à 486, les filtres reprennent à 540 et les produits à 563 — soit 54 px et
   77 px. Sans ces retraits, les deux colonnes se collent au bas de la bande,
   et le défaut saute aux yeux sur une catégorie sans filtres, où plus rien ne
   vient occuper la colonne de gauche.

   Le retrait de droite vaut 37 px et non 77 : la grille de produits arrive
   déjà 40 px sous le haut de sa colonne, marge propre au gabarit du parent. */
/* En mobile, un peu d'air sous la couverture (0 px avant). */
.center-column { padding-block-start: 1.5rem; }

@media (min-width: 992px) {
  #left-column { padding-block-start: 3.375rem; }     /* 54 px */
  .center-column { padding-block-start: 2.3125rem; }  /* 37 + 40 = 77 px */
}

#left-column .ps-facetedsearch { order: 1; }
#left-column .category-tree { order: 2; }

.left-block__title {
  color: var(--md-muted);
  font-size: var(--md-fs-2xs);
  letter-spacing: var(--md-ls-wide);
  text-transform: uppercase;
  margin-block-end: 0;
}

.search-filters .accordion-item {
  background-color: transparent;
  border: 0;
  border-block-end: 1px solid var(--md-line-soft);
}

/* Titre de bloc : Cormorant semi-gras 20 px, chevron à droite. Bootstrap pilote
   le chevron par --bs-accordion-btn-icon : on lui donne le nôtre, à l'encre du
   thème, plutôt que le bleu par défaut. */
.search-filters .accordion-button {
  --bs-accordion-btn-icon-width: .75rem;
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23211c35'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: var(--bs-accordion-btn-icon);
  background-color: transparent;
  box-shadow: none;
  color: var(--md-navy);
  font-family: var(--md-font-display);
  font-size: var(--md-fs-xl);
  font-weight: 600;
  padding: 1.375rem 0 .875rem;
}

.search-filters .accordion-button:not(.collapsed) {
  background-color: transparent;
  color: var(--md-navy);
}

/* Une facette peut compter une centaine de valeurs (les appellations) :
   Hummingbird ne rend pas de « voir plus », et plafonner la liste en
   back-office rendrait les valeurs suivantes inatteignables. On garde donc
   TOUTES les valeurs et on fait défiler à l'intérieur du bloc. */
.search-filters .accordion-body {
  list-style: none;
  margin: 0;
  padding: 0 0 1.4375rem;
  max-height: 21rem;
  overflow-y: auto;
  scrollbar-width: thin;
}

/* Une ligne d'option : case, libellé, puis le compteur poussé à droite. */
.search-filters__item {
  display: flex;
  align-items: center;
  font-size: var(--md-fs-base);
  padding-block: .4375rem;
}

.search-filters__item .form-check {
  display: flex;
  align-items: center;
  gap: .625rem;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.search-filters__item .form-check-input {
  width: .875rem;
  height: .875rem;
  margin: 0;
  border-color: var(--md-navy);
  border-radius: 0;
  flex: 0 0 auto;
}

.search-filters__item .form-check-input:checked {
  background-color: var(--md-navy);
  border-color: var(--md-navy);
}

.search-filters__item .form-check-input:focus { box-shadow: none; }

.search-filters__item .form-check-label {
  flex: 1 1 auto;
  min-width: 0;
  cursor: pointer;
}

/* Le libellé et son compteur : le lien natif porte les deux, on les écarte. */
.search-filters__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  color: var(--md-navy-soft);
  text-decoration: none;
}

.search-filters__link:hover { color: var(--md-navy); }

.search-filters__magnitude {
  flex: 0 0 auto;
  color: var(--md-muted-soft);
  font-size: var(--md-fs-2xs);
  font-variant-numeric: tabular-nums;
}

/* Curseur de prix (jQuery UI, monté par le module au chargement). */
.search-filters__slider-container { padding-block-end: 1.4375rem; }

.search-filters .ui-slider {
  background-color: var(--md-sand);
  border: 0;
  border-radius: 0;
  height: .25rem;
  margin-block: 1.25rem .75rem;
}

.search-filters .ui-slider .ui-slider-range { background-color: var(--md-navy); }

.search-filters .ui-slider .ui-slider-handle {
  width: .875rem;
  height: .875rem;
  top: -.3125rem;
  background-color: var(--md-navy);
  border: 0;
  border-radius: 0;
  cursor: grab;
}

.search-filters__slider-values {
  display: flex;
  justify-content: space-between;
  color: var(--md-muted-soft);
  font-size: var(--md-fs-2xs);
}

/* ── Tiroir des filtres en mobile ──────────────────────────────────────────
   Hummingbird déplace le panneau dans un offcanvas natif : on habille, on ne
   réimplémente rien.                                                         */

.products__selection--filters-only {
  display: flex;
  justify-content: flex-end;
  margin-block: 1.25rem;
}

.products__filter-button {
  --bs-btn-font-size: var(--md-fs-xs);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.ps-facetedsearch--mobile .offcanvas-title {
  font-family: var(--md-font-display);
  font-weight: 500;
}

.ps-facetedsearch--mobile .offcanvas-body { padding-block-start: 0; }

/* ── Arbre des catégories (ps_categorytree) ────────────────────────────────
   Module natif accroché à displayLeftColumn : il donne la navigation dans la
   rubrique, au-dessus des filtres. La maquette ne le montre pas — s'il doit
   disparaître, c'est un décrochage de hook en back-office, pas du CSS mort ici.
   -------------------------------------------------------------------------- */

.category-tree { margin-block-end: 2rem; }

.category-tree .left-block__title { margin-block-end: .75rem; }

.category-tree .left-block__title-link {
  color: var(--md-navy);
  font-family: var(--md-font-display);
  font-size: var(--md-fs-xl);
  font-weight: 600;
  letter-spacing: normal;
  text-decoration: none;
  text-transform: none;
}

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

.category-tree__list[data-depth="1"] { padding-inline-start: .875rem; }

.category-tree__item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding-block: .4375rem;
}

.category-tree__item-link {
  color: var(--md-navy-soft);
  font-size: var(--md-fs-base);
  text-decoration: none;
}

.category-tree__item-link:hover { color: var(--md-gold); }

.category-tree .accordion-item {
  background-color: transparent;
  border: 0;
}

.category-tree .accordion-button {
  --bs-accordion-btn-icon-width: .75rem;
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23211c35'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: var(--bs-accordion-btn-icon);
  width: auto;
  flex: 0 0 auto;
  background-color: transparent;
  box-shadow: none;
  padding: 0;
}

.category-tree .accordion-body { padding: 0; }

/* ── Pagination ────────────────────────────────────────────────────────────
   Maquette : boutons carrés discrets, alignés à droite.                      */

.products__pagination { margin-block-start: 2.5rem; }

.pagination__container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: .25rem;
}

.pagination__nav a,
.pagination__number a,
.pagination__number span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;               /* 44 px : cible tactile */
  min-height: 2.75rem;
  border: 1px solid transparent;
  font-size: var(--md-fs-base);
  text-decoration: none;
}

.pagination__number .current span,
.pagination__number a:hover {
  border-color: var(--md-border);
  color: var(--md-navy);
}

/* ── Texte SEO de bas de page ──────────────────────────────────────────────
   Contenu géré en back-office : « description complémentaire » de la catégorie,
   distincte de la description courte affichée dans la couverture.            */

.category__footer {
  background-color: var(--md-white);
  padding-block: var(--md-section-y);
  margin-block-start: var(--md-section-y);
}

/* Le gabarit du parent rend ce bloc même sans description complémentaire :
   vide, il laissait une bande blanche de 80 px sous la pagination. */
.category__footer:not(:has(.category__additional-description)) { display: none; }

.category__additional-description {
  max-width: 78.75rem;
  margin-inline: auto;
  padding-inline: var(--md-gutter);
}

.category__additional-description :is(h1, h2, h3) {
  font-family: var(--md-font-display);
  font-size: clamp(1.5rem, 3vw, 1.75rem);
  font-weight: 500;
  margin-block-end: 1.5rem;
}

.category__additional-description p {
  color: var(--md-navy-soft);
  font-size: var(--md-fs-base);
  line-height: 1.7;
}

@media (min-width: 992px) {
  .category__additional-description p { text-align: justify; }
}

/* ── Navigation par région, en tête de listing ─────────────────────────────
   Les facettes de PrestaShop ne descendent que d'un cran : sur « Tous nos
   vins » elles proposent « Régions viticoles » mais jamais Margaux. Ces
   pastilles ouvrent le rayon d'un clic ; l'affinage reste aux facettes.     */

.mws-nav {
  margin-block-end: 1.75rem;
  padding-block-end: 1.5rem;
  border-block-end: 1px solid var(--md-line-soft);
}

.mws-nav__label {
  font-size: var(--md-fs-3xs);
  letter-spacing: var(--md-ls-wide);
  text-transform: uppercase;
  color: var(--md-muted);
  margin-block-end: .75rem;
}

.mws-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mws-nav__pill {
  display: inline-flex;
  align-items: baseline;
  gap: .4375rem;
  padding: .625rem .875rem;         /* 40 px de haut : cible tactile */
  border: 1px solid var(--md-line);
  border-radius: 999px;
  font-size: var(--md-fs-xs);
  line-height: 1.3;
  color: var(--md-navy);
  text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease;
}

.mws-nav__pill:hover,
.mws-nav__pill:focus-visible {
  border-color: var(--md-gold);
  background-color: var(--md-cream-soft);
  color: var(--md-navy);
  text-decoration: none;
}

/* Le rayon courant : c'est le fond doré qui le dit, pas une couleur de texte
   — le contraste doit tenir sans dépendre de la teinte. */
.mws-nav__pill--current {
  border-color: var(--md-gold);
  background-color: var(--md-gold);
  color: #fff;
  font-weight: 600;
}

.mws-nav__count {
  font-size: var(--md-fs-3xs);
  color: var(--md-muted);
  font-variant-numeric: tabular-nums;
}

.mws-nav__pill--current .mws-nav__count { color: rgba(255, 255, 255, .78); }

@media (min-width: 992px) {
  .mws-nav { margin-block-end: 2.25rem; }
}

/* ── La robe du vin sur la pastille ────────────────────────────────────────
   Un disque de la couleur du vin, devant le libellé. Les robes claires se
   verraient à peine sur fond crème : un filet intérieur leur donne un bord,
   plutôt qu'une bordure qui grossirait le disque.                            */

.mws-nav__robe {
  flex: 0 0 auto;
  align-self: center;   /* la pastille aligne sur la ligne de base, un disque vide n'en a pas */
  inline-size: .7rem;
  block-size: .7rem;
  border-radius: 50%;
  background: var(--robe);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .18);
}

.mws-nav__robe--rouge     { --robe: #6b1220; }
.mws-nav__robe--rose      { --robe: #e9a0a4; }
.mws-nav__robe--blanc-sec { --robe: #ecdfa8; }
.mws-nav__robe--blanc-doux{ --robe: #d9a520; }

/* Sur la pastille active, le fond fonce : le filet passe en clair. */
.mws-nav__pill--current .mws-nav__robe { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .35); }

/* ── Tiroir des filtres, en mobile ─────────────────────────────────────────
   Il prenait toute la largeur : plus aucune zone où toucher pour le fermer.
   Titre à la charte, croix de fermeture à pleine opacité (50 % avant).       */
#offcanvas-faceted { --bs-offcanvas-width: min(85vw, 25rem); }

#offcanvas-faceted .offcanvas-title {
  font-family: var(--md-font-display);
  font-size: var(--md-fs-xl);
  color: var(--md-navy);
}

#offcanvas-faceted .btn-close { --bs-btn-close-opacity: 1; }