/**
 * BEECOM.DIGITAL — MPP-138
 * Refonte de la fiche produit dans la DA actuelle du site.
 *
 * Maquette validée par Jordan le 30/08 :
 * https://claude.ai/code/artifact/2353eefe-ed0e-4f94-99e6-6252e7847454
 *
 * Tout est ADDITIF : aucune règle du thème n'est modifiée, cette feuille se
 * charge après lui (priorité 210) et uniquement sur le contrôleur product.
 * Palette relevée sur le site : vert sauge #9ec8a9, crème #f2ebdd,
 * brun #492916, lin #e7dcc8 — rien d'inventé.
 */

/* ── 1. Le prix respire ─────────────────────────────────────────────────── */
#product .product-prices .current-price-value {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2rem;
  color: #492916;
  font-variant-numeric: tabular-nums;
}
#product .product-prices .tax-shipping-delivery-label {
  font-size: .78rem;
  color: #8a8478;
}

/* Les paliers de quantité, en badges à côté du prix (gabarit product-prices) */
.bdf-paliers {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin: .6rem 0 .2rem;
}
.bdf-palier {
  border: 1px solid #e7dcc8;
  border-radius: 4px;
  background: #fff;
  padding: .35rem .65rem;
  font-size: .74rem;
  line-height: 1.35;
  color: #3b3b3b;
  font-variant-numeric: tabular-nums;
}
.bdf-palier b {
  display: block;
  color: #492916;
  font-size: .82rem;
}
.bdf-palier b .bdf-eco { color: #24422f; }
.bdf-palier.bdf-actif { border-color: #492916; box-shadow: inset 0 0 0 1px #492916; }

/* L'ancien tableau de remises, remplacé par les badges */
#product .product-discounts { display: none; }

/* ── 2. La description courte, contenue ─────────────────────────────────── */
#product .product-description { max-width: 64ch; }

/* ── 4. La personnalisation en cartes ───────────────────────────────────── */
/* Le groupe radio natif (après Couleur et Taille du bloc bdvariantes). */
#product .product-variants-item ul[id^="group_"] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem;
  padding: 0;
  margin: .3rem 0 0;
}
#product .product-variants-item li.input-container {
  float: none;
  width: 100%;
}
#product .product-variants-item li.input-container label {
  display: block;
  border: 1px solid #e7dcc8;
  border-radius: 5px;
  background: #fff;
  padding: .6rem .7rem;
  cursor: pointer;
  font-size: .78rem;
  line-height: 1.35;
  text-align: left;
}
#product .product-variants-item li.input-container label:has(input:checked) {
  border: 2px solid #492916;
  padding: calc(.6rem - 1px) calc(.7rem - 1px);
}
#product .product-variants-item .input-radio + .radio-label {
  background: none;
  box-shadow: none;
  padding: 0 0 0 .35rem;
  color: #492916;
  font-weight: 600;
  white-space: normal;
}
/* Les vignettes du bloc bdvariantes ne sont pas concernées : elles vivent
   dans .bdv-item, qui n'utilise pas ul[id^="group_"]. */

/* ── 5. Le CTA garde le vert du site, en plus large ─────────────────────── */
#product .product-quantity { display: flex; gap: .6rem; flex-wrap: wrap; }
#product .product-quantity .add { flex: 1; }
#product .product-quantity .add .add-to-cart {
  width: 100%;
  height: 100%;
  white-space: nowrap;
  background: #9ec8a9;
  border: none;
  border-radius: 5px;
  color: #24422f;
  font-weight: 700;
  font-size: .98rem;
  padding: .8rem 1rem;
  text-transform: none;
}
#product .product-quantity .add .add-to-cart:hover,
#product .product-quantity .add .add-to-cart:focus {
  background: #8dbf9b;
  color: #24422f;
}
#product .product-quantity .add .add-to-cart .shopping-cart { color: #24422f; }
/* Le widget quantité (touchspin) garde sa mécanique native : on ne touche
   qu'à l'alignement du conteneur — toucher à .input-group déloge ses flèches. */
#product .product-quantity { align-items: flex-start; }
#product .product-quantity .add .add-to-cart { height: auto; }

/* La réassurance sous le bouton */
.bdf-reassurance {
  border-top: 1px dashed #e7dcc8;
  margin-top: .9rem;
  padding-top: .8rem;
  display: grid;
  gap: .4rem;
  font-size: .78rem;
  color: #3b3b3b;
}
.bdf-reassurance div::before {
  content: "✓";
  color: #24422f;
  font-weight: 700;
  margin-right: .5rem;
}
.bdf-reassurance b { color: #492916; }
/* la ligne de dispo native rejoint visuellement le groupe */
#product .product-additional-info .js-product-availability { font-size: .78rem; }

/* ── 6. Les onglets deviennent des sections empilées ────────────────────── */
#product .product-info-bottom .nav-tabs,
#product .tabs .nav-tabs { display: none; }
#product .tab-content .tab-pane {
  display: block;
  opacity: 1;
  padding: 0;
  margin-bottom: 2.2rem;
}
#product .tab-content .tab-pane::before {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .13em;
  font-size: .86rem;
  color: #492916;
  border-bottom: 1px solid #e7dcc8;
  padding-bottom: .45rem;
  margin-bottom: .9rem;
}
#product .tab-content #description::before { content: "Le produit en détail"; }
#product .tab-content #product-details::before { content: "Caractéristiques"; }
#product .tab-content #attachments::before { content: "Documents"; }
#product .tab-content [id^="extra-"]::before { content: "Avis clients"; }

/* ── 2 bis. La fiche technique en bande « L'essentiel » ─────────────────── */
#product .product-features {
  background: #f2ebdd;
  border-radius: 6px;
  padding: 1.1rem 1.3rem;
}
#product .product-features > dl.data-sheet {
  display: grid;
  /* dt puis dd : deux colonnes par paire, trois paires par rangée */
  grid-template-columns: repeat(3, minmax(0, auto) minmax(0, 1fr));
  gap: .55rem 1rem;
  margin: 0;
  align-items: baseline;
}
@media (max-width: 991.98px) {
  #product .product-features > dl.data-sheet { grid-template-columns: repeat(2, minmax(0, auto) minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  #product .product-features > dl.data-sheet { grid-template-columns: minmax(0, auto) minmax(0, 1fr); }
}
#product .product-features > dl.data-sheet dt.name {
  background: none;
  padding: 0;
  margin: 0 0 .1rem;
  color: #8a8478;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 400;
  width: auto;
}
#product .product-features > dl.data-sheet dd.value {
  background: none;
  padding: 0;
  margin: 0;
  color: #492916;
  font-weight: 600;
  font-size: .84rem;
  width: auto;
}

/* ── Galerie collante sur grand écran ───────────────────────────────────── */
@media (min-width: 992px) {
  #product .product-container .col-md-6:first-child > * {
    position: sticky;
    top: 1rem;
  }
}

/* ── Barre d'achat fixe sur mobile (remplie par bdfiche.js) ─────────────── */
.bdf-barre {
  display: none;
}
@media (max-width: 767.98px) {
  .bdf-barre {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    background: #fff;
    border-top: 1px solid #e7dcc8;
    padding: .55rem .9rem;
    gap: .8rem;
    align-items: center;
    transform: translateY(110%);
    transition: transform .2s;
  }
  .bdf-barre.bdf-visible { transform: none; }
  @media (prefers-reduced-motion: reduce) { .bdf-barre { transition: none; } }
  .bdf-barre .bdf-px {
    font-family: Georgia, serif;
    font-size: 1.15rem;
    color: #492916;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .bdf-barre button {
    flex: 1;
    border: none;
    border-radius: 5px;
    background: #9ec8a9;
    color: #24422f;
    font-weight: 700;
    padding: .65rem .8rem;
    font-size: .95rem;
  }
}

/* étiquettes QUANTITÉ / libellés de groupe : la petite capitale du site */
#product .product-add-to-cart > .control-label,
#product .product-variants-item > .control-label {
  font-family: Georgia, "Times New Roman", serif;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .72rem;
  color: #492916;
}