/* ==========================================================================
   Kawann Supply — fiche produit
   Trois colonnes : visuel, informations, encadré d'achat.
   ========================================================================== */

/* --- Charpente ---
   Le gabarit parent n'a que deux blocs, product__left (visuel) et
   product__right (tout le reste). On obtient la troisième colonne en faisant
   de product__right une grille à son tour : ses enfants tombent en colonne 1,
   sauf le bloc d'achat, envoyé en colonne 2 sur toute la hauteur.
   Cette mise en page évite de recopier le gabarit du parent, et laisse donc
   intact le rafraîchissement AJAX des déclinaisons. */
@media (min-width: 992px) {
  .product__container {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 2fr);
    gap: 28px;
    /* stretch : la colonne visuel descend jusqu'au bas de la ligne, comme dans
       la modale d'aperçu. */
    align-items: stretch;
  }

  /* --- Hauteur du visuel calée sur la ligne ---
     Même mécanique que dans l'aperçu rapide : la photo sort du flux pour ne
     plus commander la hauteur, qui est alors fixée par la colonne de droite.
     Le carrousel prend l'espace restant une fois les vignettes déduites, et
     object-fit: contain garde la photo entière. */
  .product__container > .product__left { min-height: 0; }

  .product__container .product__left .product__images {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
  }

  .product__container .product__carousel {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
  }

  .product__container .product__carousel .carousel-inner,
  .product__container .product__carousel .carousel-item {
    height: 100%;
  }

  .product__container .product__carousel .carousel-item { position: relative; }

  .product__container .product__carousel picture,
  .product__container .product__carousel img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .product__container .product__thumbnails { flex: 0 0 auto; }

  .product__right {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 330px);
    gap: 0 28px;
    align-items: start;
  }

  .product__right > * {
    grid-column: 1;
    min-width: 0;
  }

  /* Le bloc d'achat occupe la 2e colonne depuis la première ligne. Le span
     large couvre le nombre de lignes créées par la colonne d'informations,
     variable selon la fiche ; align-self le garde collé en haut. */
  .product__right > .product__actions {
    grid-column: 2;
    grid-row: 1 / span 30;
    align-self: start;
  }
}

/* --- Visuel ---
   La carte est la colonne entière (.product__left) et non plus le seul bloc
   d'images : la mention « Photo non contractuelle » vient s'y loger, en bas,
   à l'intérieur du cadre. */
.product__left {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--kawann-border);
  border-radius: 12px;
  background: var(--kawann-blanc);
  overflow: hidden;
}

.product__left .product__images {
  flex: 1 1 auto;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: var(--kawann-blanc);
  overflow: hidden;
}

.product__left img { display: block; }

/* --- Éléments absents de la maquette ---
   La marque est déjà dans la fiche technique juste en dessous, et le bloc de
   partage social n'apparaît pas sur le modèle fourni. */
.product__manufacturer { display: none; }

.product__actions .product__additional-info { display: none; }

/* --- Le bandeau de réassurance remonte sous la fiche ---
   Le gabarit parent ne propose pas de point d'accroche entre la fiche et la
   partie basse : le bloc est donc rendu en fin de page, puis replacé ici par
   l'ordre des éléments. Le :has() limite l'effet aux pages produit. */
#center-column:has(> .product__container) {
  display: flex;
  flex-direction: column;
}

#center-column:has(> .product__container) > * { order: 3; }
#center-column:has(> .product__container) > .product__container { order: 1; }
#center-column:has(> .product__container) > .kawann-fiche__reassurance { order: 2; }

/* --- Colonne d'informations --- */
.product__name {
  margin: 0 0 6px;
  font-size: 1.5rem;
  font-weight: var(--kawann-weight-title);
  line-height: 1.2;
  color: var(--kawann-marine);
}

.kawann-fiche__ref {
  margin: 0 0 8px;
  font-size: 0.8125rem;
  color: var(--kawann-text-muted);
}

.kawann-fiche__stock {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 14px;
  font-size: 0.8125rem;
  font-weight: var(--kawann-weight-bold);
  color: #1a7f45;
}

.kawann-fiche__pastille {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

/* Rupture : la couleur change, mais le libellé aussi — jamais la couleur
   seule (WCAG 2.2 AA, 1.4.1). */
.kawann-fiche__stock--rupture { color: #b3261e; }

.product__prices { margin: 0 0 14px; }

.product__price {
  font-size: 1.625rem;
  font-weight: var(--kawann-weight-title);
  color: var(--kawann-marine);
  line-height: 1.1;
}

.product__unit-price {
  font-size: 0.8125rem;
  font-weight: var(--kawann-weight-text);
  color: var(--kawann-text-muted);
}

.product__description-short {
  margin: 0 0 16px;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--kawann-text-muted);
}

/* --- Encart des atouts --- */
.kawann-fiche__atouts {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  padding: 10px 14px;
  border: 1px solid #cbe6d3;
  border-radius: 8px;
  background: #f2faf5;
}

.kawann-fiche__atouts-icone {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: #1a7f45;
}

.kawann-fiche__atouts-icone svg { width: 100%; height: 100%; display: block; }

.kawann-fiche__atouts-texte {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--kawann-text-muted);
}

.kawann-fiche__atouts-texte strong {
  font-weight: var(--kawann-weight-bold);
  color: #1a7f45;
}

/* --- Fiche technique --- */
.kawann-fiche__specs {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 5px 8px;
  margin: 0;
  font-size: 0.8125rem;
}

.kawann-fiche__specs dt {
  font-weight: var(--kawann-weight-bold);
  color: var(--kawann-marine);
}

.kawann-fiche__specs dt::after { content: " :"; }

.kawann-fiche__specs dd {
  margin: 0;
  min-width: 0;
  color: var(--kawann-text-muted);
}

/* --- Encadré d'achat --- */
.product__actions {
  padding: 16px;
  border: 1px solid var(--kawann-border);
  border-radius: 12px;
  background: var(--kawann-surface);
}

.kawann-achat__titre {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  font-size: 0.8125rem;
  font-weight: var(--kawann-weight-bold);
  color: var(--kawann-marine);
}

.kawann-achat__aide {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--kawann-border);
  font-size: 0.625rem;
  color: var(--kawann-marine);
  cursor: help;
}

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

/* Tarif du compte : les couleurs du soleil de la marque. */
.kawann-achat__groupe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 8px;
  margin: 0 0 16px;
  padding: 12px;
  border: 1px solid var(--kawann-soleil);
  border-radius: 10px;
  background: #fef8ee;
  text-align: center;
}

.kawann-achat__groupe-icone {
  width: 18px;
  height: 18px;
  color: var(--kawann-soleil-ink);
}

.kawann-achat__groupe-icone svg { width: 100%; height: 100%; display: block; }

.kawann-achat__groupe-nom {
  font-size: 0.875rem;
  font-weight: var(--kawann-weight-bold);
  color: var(--kawann-soleil-ink);
}

.kawann-achat__groupe-remise {
  margin-left: 4px;
  font-size: 0.75rem;
}

.kawann-achat__groupe-prix {
  flex: 1 1 100%;
  font-size: 1.25rem;
  font-weight: var(--kawann-weight-title);
  color: var(--kawann-soleil-ink);
}

/* Le conteneur du thème est en flex avec retour à la ligne : chaque bloc doit
   occuper sa propre rangée, sinon deux d'entre eux se retrouvent côte à côte
   puis se séparent selon la longueur du texte. */
.product__actions-qty-add {
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
}

.kawann-achat__label {
  flex: 0 0 auto;
  margin: 0;
  font-size: 0.8125rem;
  font-weight: var(--kawann-weight-bold);
  color: var(--kawann-marine);
}

/* Rangée insécable : quel que soit le montant, le total reste à droite du
   sélecteur. C'est le sélecteur qui cède de la place, jamais le prix. */
.kawann-achat__ligne {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
  margin: 0 0 10px;
  min-width: 0;
}

/* Le sélecteur ne se comprime pas : réduit, son groupe de boutons — que le
   thème laisse en « flex-wrap: wrap » — faisait passer le « + » à la ligne et
   doublait sa hauteur. C'était la vraie cause du décrochage, pas la rangée.
   On le fige à sa largeur utile et on interdit le retour à la ligne interne. */
.kawann-achat__ligne .quantity-button {
  flex: 0 0 auto;
  min-width: 0;
}

.kawann-achat__ligne .quantity-button__group {
  flex-wrap: nowrap;
}

/* Sélecteur compacté : autant de place gagnée pour les montants longs. */
.kawann-achat__ligne .quantity-button__group .btn {
  width: 28px;
  min-width: 28px;
  padding: 0;
}

.kawann-achat__ligne .quantity-button__group input {
  width: 44px;
  min-width: 0;
  padding-right: 2px;
  padding-left: 2px;
  text-align: center;
}

/* Si le montant devenait vraiment très long, il déborde plutôt que de casser
   la rangée : le prix ne se coupe jamais. */
.kawann-achat__ligne .kawann-achat__total {
  flex: 0 1 auto;
  min-width: 0;
}

.kawann-achat__total {
  flex: 0 0 auto;
  margin: 0 0 0 auto;
  text-align: right;
  line-height: 1.25;
  white-space: nowrap;
}

.kawann-achat__total-prix {
  display: block;
  font-size: 1.125rem;
  font-weight: var(--kawann-weight-title);
  color: var(--kawann-marine);
}

.kawann-achat__total-unite {
  display: block;
  font-size: 0.6875rem;
  color: var(--kawann-text-muted);
}

/* Bouton principal pleine largeur. L'écart avec le bouton suivant est donné
   par le « gap » du conteneur : une marge ici s'y ajouterait. */
.product__add-to-cart { margin: 0; }

.product__add-to-cart-button.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 8px 14px;
  min-height: 37px;
  border: 0;
  border-radius: 8px;
  background: var(--kawann-soleil);
  font-size: 0.875rem;
  font-weight: var(--kawann-weight-bold);
  color: var(--kawann-marine);
}

.product__add-to-cart-button.btn:hover:not(:disabled) {
  background: #e8960d;
  color: var(--kawann-marine);
}

.product__add-to-cart-button.btn:focus-visible {
  outline: 2px solid var(--kawann-marine);
  outline-offset: 2px;
}

/* Favoris : bouton secondaire, contour seul, sur toute la largeur comme
   l'ajout au panier.
   Le thème parent impose au bouton « width/height/min-width: inherit
   !important ». Plutôt que de surenchérir, on donne au conteneur la largeur
   voulue : le bouton en hérite. Sans cela le conteneur vaut « auto » et le
   bouton se réduit à son contenu. */
/* Le conteneur des trois blocs impose son propre écart entre les boutons :
   on le ramène à la valeur voulue. */
.product__actions-qty-add { gap: 8px; }

.kawann-achat__favoris {
  /* Conteneur en flex et hauteur imposée : le bouton, dont le parent force
     « height: inherit !important », s'étire alors exactement à la hauteur du
     bouton panier plutôt que de dépendre de son propre contenu. */
  display: flex;
  width: 100%;
  margin: 0 0 12px;
  border-radius: 8px;

  /* Le thème parent peint le bouton en blanc avec
     « background-color: var(--bs-body-bg) !important » — et sa feuille est
     dans un @layer : pour les déclarations !important l'ordre des couches
     s'inverse, si bien qu'un !important hors couche ne peut pas l'emporter.
     Plutôt que de lutter, on redéfinit ici la variable qu'il consomme : elle
     ne vaut « transparent » que dans ce conteneur.
     La bordure, que le parent peignait aussi en blanc, est portée par ce
     conteneur, hors de son atteinte. */
  --bs-body-bg: transparent;
}

/* Le contour est tracé en « outline », pas en « border » : outline ne prend
   pas de place dans la boîte, les deux boutons gardent donc exactement la
   même hauteur. Le parent force la bordure du bouton en blanc via un
   !important placé dans un @layer, hors d'atteinte — mais il ne touche pas à
   outline. */
.kawann-achat__favoris button {
  outline: 1px solid var(--kawann-border);
  outline-offset: -1px;
}

.kawann-achat__favoris button:hover {
  outline-color: var(--kawann-marine);
}

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



.kawann-achat__favoris .wishlist-button-add,
.kawann-achat__favoris button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 38px;
  border: 0;
  border-radius: 8px;
  /* Pas de fond : l'encadré d'achat transparaît, seul le contour marque le
     bouton — registre secondaire face à l'ajout au panier.
     !important assumé : le thème parent écrit
     « .wishlist-button-add { background-color: var(--bs-body-bg) !important;
     border: 1px solid var(--bs-body-bg) !important } », qui peignait le fond
     ET la bordure en blanc. Aucune spécificité ne prime sur un !important ;
     il faut donc en poser un. Il reste borné à ce bouton. */
  box-shadow: none;
  font-size: 0.8125rem;
  font-weight: var(--kawann-weight-text);
  color: var(--kawann-marine);
}





/* Promesse de livraison. */
.kawann-achat__livraison {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #cbe6d3;
  border-radius: 8px;
  background: #f2faf5;
}

.kawann-achat__livraison-icone {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: #1a7f45;
}

.kawann-achat__livraison-icone svg { width: 100%; height: 100%; display: block; }

.kawann-achat__livraison > span:last-child {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}

.kawann-achat__livraison strong {
  font-size: 0.78125rem;
  font-weight: var(--kawann-weight-bold);
  color: #1a7f45;
}

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

/* --- Bandeau de réassurance sous la fiche --- */
.kawann-fiche__reassurance {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 24px 0 8px;
  padding: 0;
  list-style: none;
}

/* Cartes aux couleurs du logo, comme le bandeau des pages catégorie :
   dégradé marine, icône sur le jaune soleil, texte en blanc. */
.kawann-fiche__reassurance-item {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 14px;
  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);
}

/* Reflet en diagonale, décalé d'une carte à l'autre pour qu'il parcoure le
   bandeau au lieu de faire clignoter les quatre ensemble. Il passe sous le
   texte : c'est le contenu qui doit rester lisible.
   L'animation kawann-reflet est définie dans kawann-catalogue.css, chargée
   sur toutes les pages. */
.kawann-fiche__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;
}

.kawann-fiche__reassurance-item:nth-child(2)::after { animation-delay: 0.35s; }
.kawann-fiche__reassurance-item:nth-child(3)::after { animation-delay: 0.7s; }
.kawann-fiche__reassurance-item:nth-child(4)::after { animation-delay: 1.05s; }

/* 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-fiche__reassurance-item::after { animation: none; }
}

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

.kawann-fiche__reassurance-icone {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: var(--kawann-soleil);
}

.kawann-fiche__reassurance-icone svg { width: 100%; height: 100%; display: block; }

.kawann-fiche__reassurance-texte {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}

.kawann-fiche__reassurance-texte strong {
  font-size: 0.8125rem;
  font-weight: var(--kawann-weight-bold);
  color: var(--kawann-blanc);
}

.kawann-fiche__reassurance-texte span {
  font-size: 0.75rem;
  color: #c5d0dd;
}

/* --- Sous 992px : une seule colonne, l'encadré d'achat sous le visuel --- */
@media (max-width: 991.98px) {
  .product__actions { margin-top: 18px; }
}

@media (max-width: 767.98px) {
  .kawann-fiche__reassurance {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 0;
  }

  .kawann-fiche__reassurance { gap: 10px; }
}

/* Le module blockwishlist ne rend qu'une icône, sans libellé ni nom
   accessible : kawann-produit.js lui ajoute un vrai texte. */
.kawann-achat__favoris-texte { font-size: 0.8125rem; }

/* --- Bloc « Customer Reassurance » de démonstration ---
   Le module blockreassurance n'a jamais été configuré : il affiche encore
   « Security policy (edit with the Customer Reassurance module) », visible par
   les clients. Il fait de toute façon doublon avec le bandeau ci-dessus et
   n'apparaît pas sur la maquette. On le masque ici seulement ; le module reste
   installé, à configurer ou à désinstaller depuis le back-office. */
.product__bottom .blockreassurance--product { display: none; }

/* --- Aperçu rapide ---
   Même charpente que la fiche : visuel, informations, encadré d'achat. La
   modale a sa propre enveloppe (.quickview__body au lieu de
   .product__container), d'où la reprise des règles de grille ici. */
@media (min-width: 992px) {
  .quickview__body.page-product--quickview {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 2fr);
    gap: 24px;
    /* stretch, et non start : la colonne visuel doit s'étirer jusqu'au bas de
       l'encadré d'achat. */
    align-items: stretch;
  }

  /* --- Hauteur du visuel calée sur celle de l'encadré d'achat ---
     Le bloc image mesurait 417px contre 365px pour l'encadré : c'est la
     hauteur propre de la photo qui commandait la ligne. On retire la photo du
     flux (absolue dans son cadre) pour qu'elle ne compte plus dans le calcul :
     la ligne est alors dimensionnée par la colonne de droite, et le carrousel
     occupe l'espace restant une fois les vignettes déduites.
     object-fit: contain garde la photo entière, sans recadrage. */
  .quickview__body .product__left { min-height: 0; }

  .quickview__body .product__left .product__images {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
  }

  .quickview__body .product__carousel {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
  }

  .quickview__body .product__carousel .carousel-inner,
  .quickview__body .product__carousel .carousel-item {
    height: 100%;
  }

  .quickview__body .product__carousel .carousel-item { position: relative; }

  .quickview__body .product__carousel picture,
  .quickview__body .product__carousel img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .quickview__body .product__thumbnails { flex: 0 0 auto; }

  .quickview__body .product__right {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
    gap: 0 24px;
    align-items: start;
  }

  .quickview__body .product__right > * {
    grid-column: 1;
    min-width: 0;
  }

  .quickview__body .product__right > .product__actions {
    grid-column: 2;
    grid-row: 1 / span 30;
    align-self: start;
  }
}

.quickview__body .product__name {
  margin: 0 0 6px;
  font-size: 1.25rem;
  font-weight: var(--kawann-weight-title);
  line-height: 1.2;
  color: var(--kawann-marine);
}

.quickview__body .kawann-fiche__specs { margin-top: 14px; }

/* Le pied de modale reprend le registre discret du reste. */
.quickview__footer {
  border-top: 1px solid var(--kawann-border);
  font-size: 0.8125rem;
}

.quickview__details-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8125rem;
  font-weight: var(--kawann-weight-bold);
  color: var(--kawann-marine);
  text-decoration: none;
}

.quickview__details-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* L'encadré d'achat portait une marge basse de 24px qui allongeait la ligne
   d'autant : le bloc image, calé sur cette ligne, dépassait donc l'encadré de
   24px. Dans la modale, la marge n'a pas d'utilité. */
.quickview__body .product__actions { margin-bottom: 0; }

/* L'encadré d'achat porte une marge basse de 32px qui allongeait la ligne :
   le visuel, calé dessus, dépassait donc d'autant. L'espace sous la fiche est
   déjà donné par le bandeau de réassurance qui suit. */
.product__container .product__actions { margin-bottom: 0; }

/* --- Loupe en haut à droite du visuel ---
   Elle était calée en bas à droite, où elle se confondait avec la bande de
   vignettes. On la remonte, à l'aplomb du coin, comme l'œil des cartes du
   catalogue. */
.product__carousel .product__zoom {
  top: 8px;
  bottom: auto;
  right: 8px;
  left: auto;
  width: 32px;
  height: 32px;
  min-width: 0;
  padding: 0;
}

.product__carousel .product__zoom .material-icons { font-size: 18px; }

/* --- Modale d'agrandissement ramenée à une taille raisonnable ---
   Le parent l'ouvre en modal-xl : sur un grand écran, la photo d'un pot de
   pesto s'étalait sur toute la largeur sans rien apporter. On la borne, et on
   plafonne la hauteur de l'image pour qu'elle tienne dans la fenêtre sans
   défilement. */
.product-images-modal .modal-dialog {
  max-width: 620px;
}

.product-images-modal .modal-content {
  border: 1px solid var(--kawann-border);
  border-radius: 12px;
}

.product-images-modal .modal-body img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: contain;
  margin: 0 auto;
}

/* --- Bas de fiche : description et commentaires ---
   Le parent y employait des tailles très au-dessus du reste de la page
   (titre d'accordéon 20px, corps 16px, « Commentaires » 24px) alors que la
   fiche technique juste au-dessus tient en 13px. On ramène l'ensemble sur la
   même échelle : intitulé de section 14px, texte courant 13px. */
#product_accordion .accordion-button,
.product-comments-wrapper .section-title,
.product-comments-wrapper h2,
.product-comments-wrapper .h2 {
  padding: 14px 0;
  font-size: 0.875rem;
  font-weight: var(--kawann-weight-bold);
  color: var(--kawann-marine);
  letter-spacing: 0;
}

.product-comments-wrapper .section-title,
.product-comments-wrapper h2,
.product-comments-wrapper .h2 {
  margin: 0 0 10px;
  padding: 0;
}

#product_accordion .accordion-button:not(.collapsed) {
  background: transparent;
  color: var(--kawann-marine);
  box-shadow: none;
}

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

#product_accordion .accordion-body { padding: 0 0 16px; }

.product__description,
.product__description p,
.product-comments-wrapper .product-comment-list-item {
  font-size: 0.8125rem;
  font-weight: var(--kawann-weight-text);
  line-height: 1.65;
  color: var(--kawann-text-muted);
}

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

/* Le bloc des commentaires reprend le filet des accordéons plutôt que de
   flotter sans repère. */
.product-comments-wrapper {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--kawann-border);
}

/* Message d'absence d'avis, à la taille du texte courant. */
.product-comments-wrapper .product-comment-list-item,
#product-comments-list-empty {
  font-size: 0.8125rem;
  font-weight: var(--kawann-weight-text);
  color: var(--kawann-text-muted);
}

/* Bouton d'avis ramené au registre secondaire, comme « Voir plus ».
   Classe et identifiant relevés dans empty-product-comment.tpl du module.
   Il n'apparaît qu'aux clients connectés : PRODUCT_COMMENTS_ALLOW_GUESTS
   vaut 0, les visiteurs ne peuvent pas publier d'avis. */
.product-comments-wrapper .post-product-comment,
.product-comments-wrapper #product-footer-review-button,
.product-comments-wrapper > .btn {
  padding: 8px 14px;
  border: 1px solid var(--kawann-border);
  border-radius: 8px;
  background: transparent;
  font-size: 0.8125rem;
  font-weight: var(--kawann-weight-text);
  color: var(--kawann-marine);
}

.product-comments-wrapper .post-product-comment:hover,
.product-comments-wrapper #product-footer-review-button:hover,
.product-comments-wrapper > .btn:hover {
  border-color: var(--kawann-marine);
  background: transparent;
  color: var(--kawann-marine);
}

/* Mention en bas de la carte visuel (fiche et aperçu rapide) : discrète,
   centrée, séparée des images par un filet. */
.kawann-fiche__non-contractuelle {
  margin: 0;
  padding: 7px 12px 8px;
  border-top: 1px solid var(--kawann-border-clair, #efeae2);
  font-size: 0.6875rem;
  font-style: italic;
  text-align: center;
  color: var(--kawann-text-muted);
}

/* « Déjà vus » (ps_viewedproduct) enveloppe sa liste dans un .container, ce
   qui la décalait de 24px par rapport à « autres produits de la même
   catégorie » juste au-dessus : même gouttière pour les deux blocs. */
.ps-viewedproduct .module-products.container,
.ps-categoryproducts .module-products.container {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}