/* ===== Fiche produit Balancelle de Jardin — override page entière (méthode salon-resine) =====
   Reproduit mes-fiches/mockup-pdp-v1.html. Tout est scopé sous .bdj-pdp + neutralisation Kadence. */

/* --- Neutraliser le conteneur Kadence (sinon largeur bridée + typo qui fuit) --- */
.single-product #inner-wrap.wrap,
.single-product .content-container,
.single-product #primary,
.single-product #main,
.single-product .entry-content,
.single-product .content-area {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* Cacher les éléments auto du thème sur la fiche (titre/hero/breadcrumb du thème) */
.single-product .entry-hero-container,
.single-product .entry-hero,
.single-product .page-hero,
.single-product header.entry-header,
.single-product .product-title.entry-title,
.single-product > .woocommerce-breadcrumb,
.single-product .kadence-breadcrumbs { display: none !important; }

/* --- Le mockup, scopé .bdj-pdp --- */
.bdj-pdp { max-width: 1280px; margin: 0 auto; padding: 0 24px 20px; font-family: 'Helvetica Neue', Arial, sans-serif; color: #1c2420; font-size: 15px; }
.bdj-pdp *, .bdj-pdp *::before, .bdj-pdp *::after { box-sizing: border-box; }
.bdj-pdp a { color: inherit; text-decoration: none; }
.bdj-pdp img { max-width: 100%; height: auto; }
.bdj-pdp .acc { color: #2E5A4B; }
.bdj-pdp .bc { font-size: 12px; color: #8a948e; padding: 14px 0; }
.bdj-pdp .bc a { color: #8a948e; }

/* HERO 3 colonnes */
.bdj-pdp .hero { display: grid; grid-template-columns: 72px minmax(0,1fr) 340px; gap: 24px; align-items: start; }
.bdj-pdp .vt { display: flex; flex-direction: column; gap: 8px; }
.bdj-pdp .vt .vtb { padding: 0; border: 1px solid #e7e5dd; border-radius: 8px; background: #fff; cursor: pointer; overflow: hidden; line-height: 0; }
.bdj-pdp .vt .vtb img { width: 70px; height: 70px; object-fit: cover; display: block; }
.bdj-pdp .vt .vtb.active { border-color: #2E5A4B; box-shadow: 0 0 0 1px #2E5A4B; }
.bdj-pdp .stage img { width: 100%; max-height: 62vh; object-fit: contain; border: 1px solid #e7e5dd; border-radius: 12px; background: #fff; }

/* Colonne 3 : info + achat */
.bdj-pdp .col3 { margin: 0; }
.bdj-pdp .info h1 { font-size: 24px; font-weight: 400; line-height: 1.25; margin: 0 0 6px; }
.bdj-pdp .brand { color: #8a948e; font-size: 13px; margin-bottom: 8px; }
.bdj-pdp .brand a { color: #2E5A4B; }
.bdj-pdp .stars { color: #cfcfcf; font-size: 14px; margin-bottom: 14px; }
.bdj-pdp .stars span { color: #8a948e; font-size: 12px; margin-left: 6px; }
.bdj-pdp .range, .bdj-pdp .range .price, .bdj-pdp .range .amount, .bdj-pdp .range bdi { font-size: 26px; font-weight: 800; color: #2E5A4B !important; }
.bdj-pdp .range del { font-size: 16px; font-weight: 400; color: #8a948e; }
.bdj-pdp .lab { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: #8a948e; margin: 18px 0 8px; }
.bdj-pdp .lab .bdj-sel { color: #1c2420; font-weight: 600; }

/* Swatchs codés main : vignette photo + nom (comme le mockup), fallback pastille/texte */
.bdj-pdp .sw { display: flex; gap: 12px; flex-wrap: wrap; }
.bdj-pdp .sw .s { cursor: pointer; border: 0; background: none; padding: 0; text-align: center; font-size: 11px; color: #8a948e; }
.bdj-pdp .sw .s img { width: 56px; height: 56px; object-fit: cover; border: 2px solid #e7e5dd; border-radius: 50%; display: block; margin: 0 auto 5px; background: #fff; }
.bdj-pdp .sw .s .dot { width: 44px; height: 44px; border-radius: 50%; border: 2px solid #e7e5dd; display: block; margin: 0 auto 5px; }
.bdj-pdp .sw .s .nm { display: block; max-width: 64px; line-height: 1.2; }
.bdj-pdp .sw .s .txt { display: block; min-width: 44px; padding: 10px 12px; border: 2px solid #e7e5dd; border-radius: 8px; font-size: 13px; color: #1c2420; }
.bdj-pdp .sw .s.act img, .bdj-pdp .sw .s:hover img,
.bdj-pdp .sw .s.act .dot, .bdj-pdp .sw .s:hover .dot,
.bdj-pdp .sw .s.act .txt, .bdj-pdp .sw .s:hover .txt { border-color: #2E5A4B; box-shadow: 0 0 0 2px rgba(46,90,75,.3); }
.bdj-pdp .sw .s.act .nm { color: #1c2420; font-weight: 600; }

/* Puces bénéfices à coche verte */
.bdj-pdp .hl { list-style: none; padding: 0; margin: 18px 0; }
.bdj-pdp .hl li { padding: 5px 0 5px 26px; position: relative; font-size: 14px; line-height: 1.5; }
.bdj-pdp .hl li::before { content: '✓'; color: #2E5A4B; font-weight: 800; position: absolute; left: 0; }
.bdj-pdp .hl-intro { font-size: 14px; line-height: 1.7; color: #33403a; margin: 16px 0; }

/* Box achat */
.bdj-pdp .buy { border: 1px solid #e7e5dd; border-radius: 12px; padding: 20px; margin-top: 18px; }
.bdj-pdp .buy .price, .bdj-pdp .buy .single_variation .price, .bdj-pdp .buy .single_variation .amount { font-size: 26px; font-weight: 800; color: #2E5A4B !important; }
.bdj-pdp .buy .stock, .bdj-pdp .buy .single_variation .stock { color: #2E5A4B; font-weight: 600; font-size: 14px; margin: 8px 0; }
.bdj-pdp .single_variation { margin-bottom: 6px; }
.bdj-pdp .qtyrow { display: flex; gap: 10px; align-items: stretch; margin: 14px 0 4px; }
.bdj-pdp .qtyrow .quantity { margin: 0; flex: 0 0 auto; }
.bdj-pdp .qtyrow .qty { height: 50px; width: 62px; border: 1px solid #cfd4da; border-radius: 8px; text-align: center; font-size: 15px; }
/* NB: le <form> WooCommerce porte aussi la classe .cart -> on cible UNIQUEMENT button/a */
.bdj-pdp button.cart, .bdj-pdp a.cart { flex: 1; background: #1c2420 !important; color: #fff !important; border: 0 !important; border-radius: 30px !important; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: 13px !important; min-height: 50px; padding: 0 22px !important; cursor: pointer; }
.bdj-pdp button.cart:hover, .bdj-pdp a.cart:hover { background: #000 !important; }
.bdj-pdp form.cart { background: none !important; color: inherit !important; padding: 0 !important; border: 0 !important; }
.bdj-pdp .single_add_to_cart_button.disabled, .bdj-pdp .single_add_to_cart_button.wc-variation-selection-needed { opacity: .45 !important; }
.bdj-pdp .list { width: 100%; background: #fff; border: 1px solid #1c2420; border-radius: 30px; padding: 13px; font-weight: 600; cursor: pointer; margin-top: 10px; }
.bdj-pdp .reass { list-style: none; padding: 16px 0 0; margin: 14px 0 0; border-top: 1px solid #e7e5dd; font-size: 13px; color: #46514b; line-height: 2; }
.bdj-pdp .vendor { font-size: 12px; color: #8a948e; margin-top: 12px; }

/* Sections génériques */
.bdj-pdp section { padding: 34px 0; border-top: 1px solid #eee; }
.bdj-pdp h2 { font-size: 20px; font-weight: 600; margin: 0 0 18px; }
.bdj-pdp .about { max-width: 840px; line-height: 1.8; color: #33403a; }
.bdj-pdp .about ul { padding-left: 20px; } .bdj-pdp .about li { margin: 4px 0; }
.bdj-pdp .reassbar { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; background: #f6f4ee; border-radius: 12px; padding: 20px; text-align: center; font-size: 13px; }
.bdj-pdp .reassbar b { display: block; font-size: 22px; margin-bottom: 4px; }
.bdj-pdp .spec { width: 100%; border-collapse: collapse; font-size: 14px; max-width: 760px; }
.bdj-pdp .spec td { padding: 10px; border-bottom: 1px solid #eee; } .bdj-pdp .spec td:first-child { color: #8a948e; width: 40%; }
.bdj-pdp .row { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 6px; }
.bdj-pdp .pc { flex: 0 0 190px; border: 1px solid #e7e5dd; border-radius: 10px; padding: 12px; }
.bdj-pdp .pc img { width: 100%; height: 160px; object-fit: cover; border-radius: 6px; background: #fff; }
.bdj-pdp .pcn { font-size: 13px; margin: 8px 0 2px; line-height: 1.3; }
.bdj-pdp .pcp, .bdj-pdp .pcp .amount { color: #2E5A4B !important; font-weight: 700; font-size: 14px; }
.bdj-pdp .bundle { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.bdj-pdp .bundle .bi { text-align: center; width: 160px; }
.bdj-pdp .bundle .bi img { width: 100%; height: 120px; object-fit: cover; border: 1px solid #e7e5dd; border-radius: 8px; }
.bdj-pdp .bundle .plus { font-size: 24px; color: #8a948e; }
.bdj-pdp .bundle .tot { margin-left: auto; text-align: right; }
.bdj-pdp .tour-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 10px; }
.bdj-pdp .tour-grid img { width: 100%; height: 175px; object-fit: cover; border-radius: 8px; }
.bdj-pdp .qa { border-bottom: 1px solid #eee; }
.bdj-pdp .qa summary { padding: 14px 2px; cursor: pointer; font-weight: 600; list-style: none; }
.bdj-pdp .qa summary::-webkit-details-marker { display: none; }
.bdj-pdp .qa div { padding: 0 2px 16px; color: #46514b; line-height: 1.7; }
.bdj-pdp .rev { display: grid; grid-template-columns: 240px 1fr; gap: 30px; }
.bdj-pdp .rev .big { font-size: 48px; font-weight: 800; color: #2E5A4B; }
.bdj-pdp .rev .bar { height: 8px; background: #eee; border-radius: 4px; margin: 6px 0; }
.bdj-pdp .empty { color: #8a948e; }

@media (max-width: 1000px) {
  .bdj-pdp .hero { grid-template-columns: 1fr; }
  .bdj-pdp .vt { flex-direction: row; flex-wrap: wrap; order: 2; }
  .bdj-pdp .stage { order: 1; }
  .bdj-pdp .col3 { order: 3; }
}
@media (max-width: 700px) {
  .bdj-pdp .reassbar, .bdj-pdp .tour-grid { grid-template-columns: repeat(2,1fr); }
  .bdj-pdp .rev { grid-template-columns: 1fr; }
}