/* =========================================================
   FICHE PRODUIT GÉNÉRIQUE BONKAWA
   Cahier des charges : cdc/ficheproduit.md
   Chargé uniquement par templates/catalog/product.tpl.
   ========================================================= */

:root {
  --bkw-beige: #f6f1ef;
  /* Filet de délimitation des zones. --bkw-border reste réservé aux lignes
     internes des panneaux beiges, où un gris neutre ne ressortirait pas. */
  --bkw-hairline: #d8d8d8;
  /* Teinte du brun de marque pour le CTA secondaire : assez soutenue pour se
     détacher du fond blanc, assez claire pour ne pas concurrencer le CTA
     principal, qui reste seul en aplat foncé sur texte blanc. */
  --bkw-secondary: #e8ddd7;
  --bkw-secondary-hover: #dbcbc3;
  --bkw-border: #e6ded8;
  --bkw-muted: #6f6259;
  --pdp-gap: 2.5rem;
}

.pdp {
  --pdp-max: 1280px;
  max-width: var(--pdp-max);
  margin: 0 auto;
  padding: 0 1rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

/* Filet de délimitation avant la dernière zone. Le bandeau de réassurance n'en
   porte pas : son fond beige le délimite déjà. */
.pdp-similar {
  padding-top: 2.5rem;
  border-top: 1px solid var(--bkw-hairline);
}

/* =========================================================
   ZONE PRINCIPALE — galerie | achat (§3, §30)
   ========================================================= */

.pdp__main {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "gallery header"
    "gallery buy";
  column-gap: var(--pdp-gap);
  row-gap: 0;
  align-items: start;
}

.pdp__gallery { grid-area: gallery; }
.pdp__header  { grid-area: header; margin-bottom: 0.75rem; }
.pdp__buy     { grid-area: buy; }

/* ---------- Galerie ---------- */

/* Image principale au-dessus, bande de miniatures horizontale en dessous. */
.pdp-gallery {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.pdp-gallery__thumbs {
  /* Au-delà de la largeur disponible, les miniatures suivantes restent
     accessibles par défilement sans allonger le premier écran (§3). */
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

.pdp-gallery__thumbs-list {
  display: flex;
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pdp-gallery__thumb {
  flex: 0 0 84px;
  display: block;
  padding: 0;
  background: none;
  border: 2px solid var(--bkw-hairline);
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.pdp-gallery__thumb:hover {
  border-color: var(--typo-4, #a58471);
  transform: none;
}

.pdp-gallery__thumb.active,
.pdp-gallery__thumb[aria-current="true"] {
  border-color: var(--main-color, #2f1f1e);
}

.pdp-gallery__thumb-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.pdp-gallery__main,
.pdp-gallery__main--empty {
  position: relative;
  border: 1px solid var(--bkw-hairline);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.pdp-gallery__image {
  display: block;
  width: 100%;
  height: auto;
  cursor: zoom-in;
}

.pdp-gallery__zoom {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 2;
}

/* Les flèches du carrousel et les boutons +/- héritent de la règle générique
   `.btn, button` de custom.css (fond brun, padding 10/22, translation au
   survol). On la neutralise ici : ces contrôles doivent rester des icônes. */
.pdp-gallery__main .carousel-control-prev,
.pdp-gallery__main .carousel-control-next {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--main-color, #2f1f1e);
  opacity: 0.4;
  transition: opacity 0.15s ease;
}

.pdp-gallery__main .carousel-control-prev:hover,
.pdp-gallery__main .carousel-control-next:hover,
.pdp-gallery__main .carousel-control-prev:focus,
.pdp-gallery__main .carousel-control-next:focus {
  background: none;
  opacity: 1;
  transform: none;
}

/* ---------- Bloc achat ---------- */

.pdp__buy {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

/* Le thème parent espace chaque bloc du bloc d'achat avec une marge propre, qui
   s'ajoute au gap de la colonne. On neutralise ces marges : l'espacement est
   porté uniquement par les gap, sinon prix et disponibilité se retrouvent trop
   éloignés. */
.pdp__buy .product__prices,
.pdp__buy .product__variants,
.pdp__buy .product__customization,
.pdp__buy .product__pack,
.pdp__buy .product__discounts,
.pdp__buy .product__add-to-cart-container,
.pdp__buy .product__actions-qty-add,
.pdp__buy .product__minimal-quantity,
.pdp__buy .product__additional-info {
  margin-block-end: 0;
}

/* Le libellé de taxe se place à côté du prix plutôt qu'en dessous. */
.pdp__buy .product__prices-block {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.5rem;
  row-gap: 0.2rem;
}

/* Prix barré et réduction gardent leur propre ligne, au-dessus du prix. */
.pdp__buy .product__discount-price {
  flex: 0 0 100%;
}

.pdp__buy .product__tax-infos {
  margin: 0;
}

.pdp__title {
  margin: 0;
  font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem);
  line-height: 1.25;
  /* Le titre doit pouvoir tenir sur plusieurs lignes sans casser la mise en
     page : aucune troncature, aucune hauteur fixe (§5). */
}

.pdp__short {
  color: var(--bkw-muted);
  font-size: 0.95rem;
}

.pdp__short > :last-child {
  margin-bottom: 0;
}

.pdp__actions {
  margin-top: 0;
}

/* Ordre d'affichage du bloc d'achat (§4.1) : prix, disponibilité, options,
   quantité, CTA. La disponibilité doit rester dans le partial rafraîchi par
   l'AJAX ; display:contents remonte ses enfants au niveau du formulaire pour
   qu'ils puissent être ordonnés indépendamment des options. */
.pdp__form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.pdp-buy {
  display: contents;
}

.pdp-buy__availability { order: 1; }
.js-product-variants   { order: 2; }
.product__pack         { order: 3; }
.product__discounts    { order: 4; }
.pdp-buy__actions      { order: 5; }
.pdp-buy__minimal-quantity { order: 6; }
.js-product-additional-info { order: 7; }

.pdp-buy__availability[hidden] {
  display: none;
}

.pdp-buy__availability-status {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.95rem;
  font-weight: 600;
}

.pdp-buy__availability-status--in-stock { color: #2e7d32; }
.pdp-buy__availability-status--warning { color: #b26a00; }
.pdp-buy__availability-status--unavailable { color: #b3261e; }

.pdp-buy__availability-submessage,
.pdp-buy__delivery {
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--bkw-muted);
}

.pdp-buy__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.6rem;
}

/* Quantité et CTA principal sur une même ligne, à toutes les tailles d'écran :
   le sélecteur garde sa largeur intrinsèque, le bouton prend le reste (§12).
   En dernier recours le bouton passe à la ligne plutôt que de se réduire à
   une lamelle illisible. */
.pdp-buy__primary {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.75rem;
  width: 100%;
}

.pdp-buy__quantity {
  flex: 0 0 auto;
}

.pdp .quantity-button__group {
  height: 100%;
  flex-wrap: nowrap;
  width: auto;
}

/* Boutons +/- : aspect de la charte (fond plein, icône blanche, coins arrondis).
   Seule la largeur est contrainte : le padding générique de custom.css les
   élargit à ~64 px chacun, ce qui écrase le CTA sur les petits écrans. */
.pdp .quantity-button__group .btn {
  flex: 0 0 auto;
  width: 2.75rem;
  min-width: 2.75rem;
  padding: 0;
  background-color: var(--main-color, #2f1f1e);
  color: #fff;
  border: 0;
  border-radius: 6px;
}

.pdp .quantity-button__group .btn:hover {
  background-color: var(--typo-2, #754339);
  /* Pas de translation au survol : le bouton sortirait du groupe de saisie. */
  transform: none;
}

.pdp .quantity-button__group .btn .material-icons {
  color: inherit;
}

.pdp .quantity-button__group input {
  width: 3rem;
  max-width: 3rem;
  text-align: center;
}

.pdp-buy__add {
  flex: 1 1 9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 9rem;
  padding: 0.9rem 1.5rem;
  font-size: 1rem;
  font-weight: 700;
}

.pdp-buy__add[disabled],
.pdp-buy__add[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.pdp-buy__add.is-loading,
.pdp-buy__add.is-success {
  pointer-events: none;
}

.pdp-buy__add.is-success {
  background-color: #2e7d32;
}

.pdp-buy__add.is-error {
  background-color: #b3261e;
}

/* « Acheter maintenant » reste visuellement secondaire (§13) : fond intermédiaire
   et texte foncé, plus petit et moins gras que le CTA principal. */
.pdp-buy__buy-now {
  width: 100%;
  padding: 0.7rem 1.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  background: var(--bkw-secondary);
  color: var(--typo-1, #3e1f19);
  border: 1px solid var(--bkw-secondary-hover);
}

.pdp-buy__buy-now:hover {
  background: var(--bkw-secondary-hover);
  color: var(--typo-1, #3e1f19);
  transform: none;
}

/* ---------- Déclinaisons (§10) ---------- */

/* Desktop : libellé à gauche, contrôle à droite, sur une seule ligne. */
.pdp__buy .product-variant {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  align-items: center;
  column-gap: 1rem;
  row-gap: 0.35rem;
  margin: 0;
  padding: 0;
  border: none;
}

.pdp__buy .product-variant + .product-variant {
  margin-top: 0.6rem;
}

.pdp__buy .product-variant__label {
  margin: 0;
}

.pdp__buy .product-variant__legend {
  font-weight: 600;
}

/* Sur une liste déroulante la valeur choisie est déjà visible dans le contrôle :
   le rappel n'est conservé que pour les couleurs et les boutons radio. */
.pdp__buy .product-variant:has(> .form-select) .product-variant__selected {
  display: none;
}

.pdp__buy .product-variant > .form-select {
  justify-self: end;
  width: 100%;
  max-width: 260px;
}

/* Couleurs et radios occupent la cellule de droite sans être poussés au bord :
   une liste qui passe à la ligne reste lisible alignée à gauche. */
.pdp__buy .product-variant__colors,
.pdp__buy .product-variant__radios {
  justify-self: stretch;
}

.pdp-buy__minimal-quantity {
  font-size: 0.85rem;
  color: var(--bkw-muted);
}

.pdp-buy__minimal-quantity[hidden] {
  display: none;
}

/* =========================================================
   BANDEAU DE RÉASSURANCE (§14) — styles portés par le module
   ========================================================= */

.pdp__reassurance {
  width: 100%;
}

/* =========================================================
   ZONE ÉDITORIALE — description | détails (§16 à §20)
   ========================================================= */

.pdp__editorial {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--pdp-gap);
  align-items: start;
}

.pdp__editorial--single {
  grid-template-columns: minmax(0, 1fr);
}

/* Filet vertical entre la description et la colonne détails. */
.pdp__editorial:not(.pdp__editorial--single) .pdp__editorial-aside {
  padding-left: var(--pdp-gap);
  border-left: 1px solid var(--bkw-hairline);
}

/* Avis clients (module effiavisverifies) : détachés du cadre des détails qui
   les précède dans la colonne. */
.pdp__editorial-aside > * + .effi-av-reviews {
  margin-top: 1.5rem;
}

/* La description occupe toute la largeur de sa colonne, sans hauteur fixe ni
   défilement interne (§17). */
.pdp__description {
  max-width: 72ch;
}

.pdp__description img {
  max-width: 100%;
  height: auto;
}

.pdp__attachments,
.pdp__extra {
  margin-top: 2rem;
}

.pdp__attachment {
  padding: 0.75rem 0;
  border-top: 1px solid var(--bkw-border);
}

/* Lien de téléchargement : obfusqué (pas de href), il n'hérite pas du style
   des liens du navigateur, d'où un style explicite. */
.pdp__attachment-link {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  color: var(--typo-3);
  font-weight: 600;
  cursor: pointer;
}

.pdp__attachment-label {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pdp__attachment-link:hover,
.pdp__attachment-link:focus {
  color: var(--typo-2);
}

.pdp__attachment-icon {
  font-size: 1.25rem;
  color: currentColor;
}

.pdp__attachment-meta {
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--bkw-muted);
}

.pdp__attachment-description {
  margin: 0.25rem 0 0;
  font-size: 0.9rem;
  color: var(--bkw-muted);
}

/* ---------- Détails / fiche technique ---------- */

.pdp-specs {
  background: var(--bkw-beige);
  border: 1px solid var(--bkw-hairline);
  border-radius: 8px;
  padding: 1.25rem;
}

.pdp-specs:empty {
  display: none;
}

.pdp-specs__tabs {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--bkw-border);
}

.pdp-specs__tab {
  flex: 1 1 auto;
  padding: 0.6rem 0.75rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--bkw-muted);
  cursor: pointer;
}

.pdp-specs__tab:hover {
  background: none;
  color: var(--typo-1, #3e1f19);
  transform: none;
}

.pdp-specs__tab.is-active {
  color: var(--typo-1, #3e1f19);
  border-bottom-color: var(--main-color, #2f1f1e);
}

.pdp-specs__title {
  margin: 0 0 1rem;
  font-size: 1.05rem;
}

.pdp-specs__panel {
  margin: 0;
}

.pdp-specs__panel[hidden] {
  display: none;
}

.pdp-specs__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--bkw-border);
  font-size: 0.9rem;
}

.pdp-specs__row:last-child {
  border-bottom: none;
}

.pdp-specs__label {
  margin: 0;
  font-weight: 600;
  color: var(--typo-2, #754339);
}

.pdp-specs__value {
  margin: 0;
  overflow-wrap: anywhere;
}

/* =========================================================
   PRODUITS SIMILAIRES (§24 à §26, §30)
   ========================================================= */

.pdp-similar__title {
  margin-bottom: 1rem;
}

.pdp-similar__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 1fr);
  gap: 1.25rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding-bottom: 0.5rem;
}

/* Alignement des vignettes.
   Les cellules de la grille sont bien étirées à la hauteur de la plus haute,
   mais .product-miniature est un <article> en flux normal : sans ces règles il
   garde sa hauteur de contenu, et le `height: 100%` de son __inner (thème
   parent) ne s'applique sur rien. La chaîne est donc rétablie ici, ce qui
   réactive le `margin-top: auto` du bloc d'actions et aligne tous les boutons
   sur une même ligne quelle que soit la longueur des libellés. */
.pdp-similar__item {
  display: flex;
  min-width: 0;
  scroll-snap-align: start;
}

.pdp-similar__item > .product-miniature {
  flex: 1 1 auto;
  min-width: 0;
}

.pdp-similar__item .product-miniature__inner {
  height: 100%;
  border: 1px solid var(--bkw-hairline);
  border-radius: 8px;
  overflow: hidden;
}

.pdp-similar__item .product-miniature__bottom {
  padding-inline: 0.75rem;
}

.pdp-similar__item .product-miniature__bottom {
  flex-grow: 1;
}

/* La zone descriptif + prix occupe toute la hauteur restante, l'action reste
   collée au bas de la vignette. */
.pdp-similar__item .product-miniature__infos {
  flex-grow: 1;
  align-content: start;
}

.pdp-similar__item .product-miniature__actions {
  margin-top: auto;
}

/* Ligne d'action des vignettes : le bouton d'ajout prend la largeur restante et
   s'aligne en hauteur sur les boutons +/-. Sélecteurs à deux classes : les
   règles du thème parent sur .product-miniature__form l'emporteraient sinon. */
.pdp-similar__item .product-miniature__form {
  align-items: stretch;
  column-gap: 0.5rem;
}

.pdp-similar__item .product-miniature__form .quantity-button {
  flex: 0 0 auto;
}

.pdp-similar__item .product-miniature__add {
  flex: 1 1 auto;
  min-width: 0;
  padding-inline: 0.5rem;
}

.pdp-similar__item .product-miniature__details {
  width: 100%;
}

/* =========================================================
   BARRE D'ACHAT FIXE (§27, §30)
   ========================================================= */

.pdp-sticky {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 1020;
  background: #fff;
  border-top: 1px solid var(--bkw-hairline);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(100%);
  transition: transform 0.25s ease;
}

.pdp-sticky[hidden] {
  display: none;
}

.pdp-sticky.is-visible {
  transform: translateY(0);
}

.pdp-sticky__inner {
  max-width: var(--pdp-max, 1280px);
  margin: 0 auto;
  padding: 0.65rem 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.pdp-sticky__image {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 4px;
}

.pdp-sticky__infos {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.pdp-sticky__name {
  font-weight: 600;
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pdp-sticky__variant {
  font-size: 0.8rem;
  color: var(--bkw-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pdp-sticky__variant[hidden] {
  display: none;
}

.pdp-sticky__price {
  flex: 0 0 auto;
  font-weight: 700;
  white-space: nowrap;
}

.pdp-sticky__quantity {
  flex: 0 0 auto;
  font-size: 0.9rem;
  color: var(--bkw-muted);
  white-space: nowrap;
}

.pdp-sticky__add {
  flex: 0 0 auto;
  padding: 0.6rem 1.5rem;
  font-weight: 700;
}

/* =========================================================
   RESPONSIVE (§28)
   ========================================================= */

/* Tablette : colonnes réduites puis passage sur une colonne pour la zone
   éditoriale, avant le breakpoint mobile, afin de ne pas tasser le bloc d'achat. */
@media (max-width: 1199.98px) {
  .pdp {
    --pdp-gap: 2rem;
  }

  .pdp__editorial {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Une seule colonne : le filet vertical laisse place au filet horizontal. */
  .pdp__editorial:not(.pdp__editorial--single) .pdp__editorial-aside {
    padding-left: 0;
    padding-top: 2rem;
    border-left: 0;
    border-top: 1px solid var(--bkw-hairline);
  }

  .pdp__description {
    max-width: none;
  }
}

@media (max-width: 991.98px) {
  /* Le titre passe au-dessus de la galerie, puis le bloc d'achat. */
  .pdp__main {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas:
      "header"
      "gallery"
      "buy";
    row-gap: 1.25rem;
  }

  .pdp__header {
    margin-bottom: 0;
  }

}

@media (max-width: 575.98px) {
  .pdp {
    padding-inline: 0.75rem;
    gap: 2rem;
  }

  .pdp-similar {
    padding-top: 2rem;
  }

  /* Le CTA garde assez de place à côté du sélecteur de quantité. */
  .pdp-buy__add {
    padding-inline: 0.75rem;
  }

  .pdp-gallery__thumb {
    flex: 0 0 68px;
  }

  /* Déclinaisons empilées : le libellé repasse au-dessus du sélecteur. */
  .pdp__buy .product-variant {
    grid-template-columns: minmax(0, 1fr);
  }

  .pdp__buy .product-variant > .form-select {
    justify-self: stretch;
    max-width: none;
  }

  .pdp-sticky__image,
  .pdp-sticky__quantity {
    display: none;
  }

  .pdp-sticky__inner {
    gap: 0.75rem;
    padding-inline: 0.75rem;
  }

  .pdp-similar__rail {
    grid-auto-columns: minmax(200px, 78%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pdp-sticky {
    transition: none;
  }
}

/* =========================================================
   APERÇU RAPIDE
   L'aperçu réutilise le markup et les classes de la fiche produit ; seules les
   contraintes propres à la fenêtre modale sont ajustées ici. Tout le reste —
   typographies, couleurs, boutons, prix — est hérité tel quel, ce qui garantit
   que l'aperçu suit automatiquement les évolutions de la fiche.
   ========================================================= */

.pdp--quickview {
  max-width: none;
  /* Le même élément porte .modal-body et .pdp : neutraliser le padding de .pdp
     supprimait aussi celui de la modale, d'où la galerie et le bouton d'ajout
     au panier collés aux bords. On fixe donc une valeur explicite. */
  padding: 1.75rem;
  gap: 0;
}

.pdp--quickview .pdp__main {
  /* Colonnes un peu plus resserrées que sur la fiche : la modale est moins
     large et le titre y tient sur davantage de lignes. */
  column-gap: 2rem;
  align-items: start;
}

/* ---------- Galerie ---------- */

.pdp--quickview .pdp-gallery {
  gap: 0.6rem;
}

/* Sans zoom dans l'aperçu, l'image ne doit pas se donner l'air cliquable. */
.pdp--quickview .pdp-gallery__image {
  cursor: default;
}

/* La bande de miniatures porte un ascenseur horizontal : sans réserve sous
   elle, celui-ci venait au contact du pied de la modale. */
.pdp--quickview .pdp-gallery__thumbs {
  padding-bottom: 0.35rem;
}

.pdp--quickview .pdp-gallery__thumb {
  flex-basis: 68px;
}

/* ---------- Zone d'achat ---------- */

/* Le bloc d'achat ne doit pas être étiré sur la hauteur de la galerie : sans
   cela, l'espace vide sous « Acheter maintenant » suivait la hauteur de
   l'image. */
.pdp--quickview .pdp__buy {
  align-self: start;
}

.pdp--quickview .pdp__header {
  margin-bottom: 0.5rem;
}

/* Le bouton de fermeture de Bootstrap hérite de la règle générique
   `.btn, button` du thème (fond brun, padding 10/22) et se transformait en
   pavé. On lui rend son gabarit d'icône. */
/* Le bouton ne porte que la classe .btn-close : la règle générique du thème ne
   l'atteint que par le sélecteur `button`, moins spécifique que le `.btn-close`
   de Bootstrap dont le raccourci `background` remet le fond à transparent. On
   repose donc entièrement le bouton ici.

   La croix est une image de fond SVG : on la redéclare en blanc plutôt que de
   l'éclaircir par `filter`, qui s'appliquerait aussi au fond et l'annulerait. */
.quickview__header .btn-close,
.product-images-modal .btn-close {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: var(--main-color, #2f1f1e);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3e%3c/svg%3e");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 0.8rem;
  border: 0;
  border-radius: 6px;
  opacity: 1;
  filter: none;
}

.quickview__header .btn-close:hover,
.quickview__header .btn-close:focus,
.product-images-modal .btn-close:hover,
.product-images-modal .btn-close:focus {
  background-color: var(--typo-2, #4a3328);
  opacity: 1;
  transform: none;
}

.pdp--quickview .pdp__title {
  font-size: clamp(1.25rem, 1rem + 0.7vw, 1.6rem);
}

.pdp--quickview .pdp__manufacturer {
  margin-top: 0.35rem;
  color: var(--bkw-muted);
  font-size: 0.9rem;
}

.pdp--quickview .pdp__manufacturer a {
  color: inherit;
  text-decoration: none;
}

.pdp--quickview .pdp__manufacturer a:hover {
  text-decoration: underline;
}

/* La galerie ne doit pas imposer la hauteur de la modale. */
.pdp--quickview .pdp-gallery__main img,
.pdp--quickview .pdp-gallery__image {
  max-height: 60vh;
  object-fit: contain;
}

/* Sous le point de bascule de la grille, la modale repasse en une colonne :
   le titre reste en tête, la galerie ensuite, l'achat en dernier. */
@media (max-width: 991.98px) {
  .pdp--quickview .pdp__main {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "header"
      "gallery"
      "buy";
    row-gap: 1.25rem;
  }
}

/* Le pied de la modale reprend le bouton secondaire de la fiche produit. */
.quickview__footer .quickview__details-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: var(--bkw-secondary);
  border-radius: 6px;
  color: var(--main-color, #2f1f1e);
  text-decoration: none;
}

.quickview__footer .quickview__details-link:hover {
  background: var(--bkw-secondary-hover);
  color: var(--main-color, #2f1f1e);
  text-decoration: none;
  transform: none;
}

.quickview__content,
.product-images-modal .modal-content {
  border-radius: 8px;
}

/* =========================================================
   MODALE D'AGRANDISSEMENT DE L'IMAGE
   Reprend l'habillage de l'aperçu rapide : même conteneur arrondi, même bouton
   de fermeture, mêmes flèches de carrousel que la galerie de la fiche. Le
   thème parent ne stylait pas cette modale, qui héritait donc de la règle
   générique `.btn, button` et se retrouvait couverte de pavés bruns.
   ========================================================= */

.product-images-modal .modal-content {
  overflow: hidden;
}

/* L'en-tête ne contient que le bouton de fermeture : il se superpose à l'image
   plutôt que de réserver une bande vide au-dessus. */
.product-images-modal .modal-header {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  padding: 0.75rem;
  background: none;
  border: 0;
}

.product-images-modal__body {
  padding: 1rem;
}

.product-images-modal__carousel {
  position: relative;
}

/* L'image doit tenir dans la fenêtre sans imposer sa hauteur native. */
.product-images-modal .carousel-item img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 78vh;
  object-fit: contain;
}

/* Mêmes flèches que la galerie de la fiche produit : la règle générique
   `.btn, button` du thème en ferait sinon des pavés bruns. */
.product-images-modal .carousel-control-prev,
.product-images-modal .carousel-control-next {
  width: auto;
  padding: 0 0.75rem;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--main-color, #2f1f1e);
  opacity: 0.4;
  transition: opacity 0.15s ease;
}

.product-images-modal .carousel-control-prev:hover,
.product-images-modal .carousel-control-next:hover,
.product-images-modal .carousel-control-prev:focus,
.product-images-modal .carousel-control-next:focus {
  background: none;
  opacity: 1;
  transform: none;
}