/* ============================================================
   BUY-SMART — CSS surcouche fiche produit v5.2
   Sélecteurs corrigés d'après audit DOM réel (WoodMart 8.4.1)
   Mise à jour 22/04/2026 :
   - Animation point vert "ping" (::after, sans conflit !important)
   - [display_savings_text] : badge jaune BS avec icône
   - Prix mobile : del + badge sur même ligne (flex-wrap: nowrap)
   - Quantité réduite + CTA agrandi sur mobile (360px+)
   - Tous les styles @media consolidés en un seul bloc en fin de fichier
   ============================================================
   Coller dans : /wp-content/themes/woodmart-child/css/bs-fiche-produit.css
   ============================================================ */

/* ============================================================
   1. BARRE DE RECHERCHE
   ============================================================ */
.single-product .wd-search-form .s {
  height: 46px !important;
  border: 1.5px solid #e5e7eb !important;
  background: #fafbfc !important;
  border-radius: 999px !important;
  padding: 0 52px 0 20px !important;
  font-size: 14px !important;
  transition: all .22s cubic-bezier(.4,0,.2,1) !important;
}
.single-product .wd-search-form .s:focus {
  background: #fff !important;
  border-color: #F7C500 !important;
  box-shadow: 0 0 0 4px rgba(247,197,0,.18) !important;
  outline: 0 !important;
}
.single-product .wd-search-form .searchsubmit {
  width: 36px !important;
  height: 36px !important;
  border-radius: 999px !important;
  background: #242424 !important;
  color: #F7C500 !important;
  border: 0 !important;
  transition: all .22s cubic-bezier(.4,0,.2,1) !important;
}
.single-product .wd-search-form .searchsubmit:hover {
  background: #F7C500 !important;
  color: #242424 !important;
}

/* ============================================================
   2. FIL D'ARIANE
   Séparateur : <span class="wd-delimiter"></span> (vide, caractère via CSS)
   ============================================================ */
.single-product .wd-breadcrumbs {
  font-size: 12.5px !important;
  color: #767676 !important;
}
.single-product .wd-breadcrumbs .wd-delimiter {
  font-size: 0 !important;
  margin: 0 2px !important;
}
.single-product .wd-breadcrumbs .wd-delimiter::before,
.single-product .wd-breadcrumbs .wd-delimiter::after {
  content: "›" !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #d0d5dd !important;
  background: none !important;
  width: auto !important;
  height: auto !important;
  display: inline !important;
  position: static !important;
  border: 0 !important;
  transform: none !important;
}
/* WoodMart utilise ::after — on vide ::before pour éviter le doublon */
.single-product .wd-breadcrumbs .wd-delimiter::before {
  content: "" !important;
}
.single-product .wd-breadcrumbs .wd-last {
  font-weight: 700 !important;
  color: #242424 !important;
}

/* ============================================================
   3. GALERIE — ombre sur le widget Elementor
   Ne pas toucher au container interne pour ne pas casser le Swiper
   ============================================================ */
.single-product .elementor-widget-wd_single_product_gallery {
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 16px !important;
  padding: 12px !important;
  box-shadow: 0 4px 14px rgba(15,23,42,.07) !important;
}

/* ============================================================
   4. BADGE PROMO
   span.onsale.product-label.wd-shape-round-sm
   ============================================================ */
.single-product .product-label.onsale {
  background: linear-gradient(135deg, #d92d20, #b91c1c) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  padding: 8px 13px !important;
  border-radius: 10px !important;
  box-shadow: 0 6px 16px rgba(217,45,32,.30) !important;
  line-height: 1 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border: 0 !important;
  min-width: auto !important;
  min-height: auto !important;
  width: auto !important;
  height: auto !important;
}

/* ============================================================
   5. MARQUE
   .wd-product-brands (DIV) contenant un lien
   ============================================================ */
.single-product .wd-product-brands a {
  font-size: 16px !important;
  font-weight: 900 !important;
  color: #242424 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  padding: 7px 14px !important;
  background: linear-gradient(180deg, #fff, #fafbfc) !important;
  border: 1.5px solid #242424 !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
  transition: all .22s cubic-bezier(.4,0,.2,1) !important;
}
.single-product .wd-product-brands a:hover {
  background: #242424 !important;
  color: #F7C500 !important;
}
/* Cacher l'image de marque si WoodMart affiche un logo */
.single-product .wd-product-brands img {
  display: none !important;
}

/* ============================================================
   6. TITRE H1
   h1.product_title.entry-title.wd-entities-title
   ============================================================ */
.single-product h1.product_title {
  font-size: clamp(20px, 4.5vw, 27px) !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  color: #242424 !important;
  letter-spacing: -0.015em !important;
}

/* ============================================================
   7. BLOC PRIX
   .elementor-widget-wd_single_product_price
   Pas de wrapper .summary — tout est en Elementor containers
   ============================================================ */
.single-product .elementor-widget-wd_single_product_price .price {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px 14px !important;
}
.single-product .elementor-widget-wd_single_product_price .price ins {
  font-size: clamp(36px, 9vw, 50px) !important;
  font-weight: 900 !important;
  color: #000 !important;
  letter-spacing: -0.03em !important;
  line-height: 0.9 !important;
  text-decoration: none !important;
  order: 1 !important;
}
.single-product .elementor-widget-wd_single_product_price .price ins .woocommerce-Price-amount {
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
}
.single-product .elementor-widget-wd_single_product_price .price del {
  font-size: 17px !important;
  color: #767676 !important;
  font-weight: 600 !important;
  order: 2 !important;
}
/* Prix sans promo (pas de del/ins, juste un montant brut) */
.single-product .elementor-widget-wd_single_product_price .price > .woocommerce-Price-amount {
  font-size: clamp(36px, 9vw, 50px) !important;
  font-weight: 900 !important;
  color: #000 !important;
  letter-spacing: -0.03em !important;
  line-height: 0.9 !important;
}

/* Badge % de remise (injecté par PHP via filtre woocommerce_get_price_html) */
/* Masqué partout sauf dans le widget prix principal de la fiche */
.bs-price-discount { display: none !important; }
.single-product .elementor-widget-wd_single_product_price .bs-price-discount {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 6px !important;
  background: linear-gradient(135deg, #d92d20, #b91c1c) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  border-radius: 5px !important;
  line-height: 1 !important;
  order: 3 !important;
}

/* ============================================================
   7b. SHORTCODE [display_savings_text]
   HTML : <div class="_custom_savings"><strong>-X €</strong> comparé au prix moyen au JJ/MM</div>
   ============================================================ */
.single-product ._custom_savings {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 5px 7px !important;
  background: #fffdf0 !important;
  border-radius: 8px !important;
  padding: 8px 10px !important;
  margin: 4px 0 8px !important;
  font-size: 12.5px !important;
  font-family: Montserrat, Arial, sans-serif !important;
  color: #3d3d3d !important;
  line-height: 1.4 !important;
}
/* Chip jaune BS pour le montant */
.single-product ._custom_savings strong {
  display: inline-block !important;
  background: #F7C500 !important;
  color: #242424 !important;
  font-weight: 900 !important;
  font-size: 12.5px !important;
  padding: 1px 6px 2px !important;
  border-radius: 4px !important;
  line-height: 1.4 !important;
}

/* ============================================================
   8. STOCK
   p.stock.in-stock.wd-style-with-bg dans le widget Elementor stock
   IMPORTANT : cibler uniquement le widget Elementor stock,
   pas le p.stock dans form.cart ou sticky btn
   ============================================================
   ANIMATION :
   Le box-shadow !important dans la règle de base a priorité sur
   les @keyframes normaux (spec CSS Animations Level 1).
   Solution : ::before = dot statique (pas d'animation)
              ::after  = ring "ping" animé via transform+opacity
                         (aucun !important en conflit sur ces props)
   ============================================================ */
.single-product .elementor-widget-wd_single_product_stock_status p.stock {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #333435 !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Dot statique (::before) — pas d'animation, géré par ::after */
.single-product .elementor-widget-wd_single_product_stock_status p.stock.in-stock::before {
  content: "" !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: #43A047 !important;
  flex-shrink: 0 !important;
  /* Pas de box-shadow ni d'animation ici — voir ::after */
}
.single-product .elementor-widget-wd_single_product_stock_status p.stock.in-stock {
  color: #43A047 !important;
  font-weight: 800 !important;
  position: relative !important; /* nécessaire pour le ::after absolu */
}
/* Masquer le tick ✓ natif WoodMart */
.single-product .elementor-widget-wd_single_product_stock_status p.stock.in-stock span::before {
  display: none !important;
}

/* Ring "ping" via ::after — transform + opacity, sans conflit !important */
.single-product .elementor-widget-wd_single_product_stock_status p.stock.in-stock::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: #43A047 !important;
  left: 0 !important;
  top: 50% !important;
  margin-top: -5px !important;
  pointer-events: none !important;
  animation: bsStockPing 2s cubic-bezier(0, 0, .2, 1) infinite !important;
}
@keyframes bsStockPing {
  0%   { transform: scale(1);   opacity: .75; }
  100% { transform: scale(3.5); opacity: 0;   }
}

/* Rupture de stock */
.single-product .elementor-widget-wd_single_product_stock_status p.stock.out-of-stock::before {
  content: "" !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: #d92d20 !important;
  flex-shrink: 0 !important;
  box-shadow: 0 0 0 3px rgba(217,45,32,.25) !important;
}
.single-product .elementor-widget-wd_single_product_stock_status p.stock.out-of-stock {
  color: #d92d20 !important;
  font-weight: 800 !important;
  background: transparent !important;
}

/* ============================================================
   9. CTA — bouton Ajouter au panier
   button.single_add_to_cart_button dans form.cart
   NE PAS cibler .wd-sticky-btn (sticky bar WoodMart natif)
   ============================================================ */

/* Form : quantité + bouton côte à côte, TOUJOURS */
.single-product .elementor-widget-wd_single_product_add_to_cart form.cart {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  align-items: stretch !important;
}
.single-product .elementor-widget-wd_single_product_add_to_cart form.cart .quantity {
  flex-shrink: 0 !important;
}
.single-product .elementor-widget-wd_single_product_add_to_cart form.cart .single_add_to_cart_button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  min-height: 54px !important;
  padding: 0 22px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: #F7C500 !important;
  color: #242424 !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  letter-spacing: 0.025em !important;
  text-transform: uppercase !important;
  box-shadow: 0 4px 14px rgba(247,197,0,.30) !important;
  transition: all .22s cubic-bezier(.4,0,.2,1) !important;
  flex: 1 1 0% !important;
  width: auto !important;
  max-width: none !important;
  position: relative !important;
  overflow: hidden !important;
}
.single-product .elementor-widget-wd_single_product_add_to_cart form.cart .single_add_to_cart_button:hover {
  background: #242424 !important;
  color: #F7C500 !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.22) !important;
  transform: translateY(-1px) !important;
}

/* Sélecteur de quantité — les boutons sont des INPUT (pas button) dans WoodMart */
.single-product .quantity {
  display: inline-flex !important;
  align-items: center !important;
  background: #fff !important;
  border: 1.5px solid #d0d5dd !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}
.single-product .quantity input.minus,
.single-product .quantity input.plus {
  width: 44px !important;
  height: 54px !important;
  border: 0 !important;
  background: transparent !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #242424 !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.single-product .quantity input.minus:hover,
.single-product .quantity input.plus:hover {
  background: #fafbfc !important;
}
.single-product .quantity input.qty {
  width: 44px !important;
  height: 54px !important;
  border: 0 !important;
  text-align: center !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  background: transparent !important;
}

/* ============================================================
   10. PAIEMENTS SÉCURISÉS (shortcode [bs_payments])
   ============================================================ */
.bs-payments {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0;
}
.bs-payments__label {
  font-size: 11px;
  font-weight: 800;
  color: #767676;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  width: 100%;
  margin-bottom: 4px;
}
.bs-payments__label::before { content: "🔒 "; font-size: 12px; }
.bs-payments img { height: 22px; width: auto; opacity: .92; }

/* ============================================================
   11. GARANTIES (shortcode [bs_guarantees])
   ============================================================ */
.bs-guarantees {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 20px 18px 16px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15,23,42,.06);
  position: relative;
  margin-top: 8px;
}
.bs-guarantees::before {
  content: "Votre achat en toute confiance";
  position: absolute;
  top: -10px; left: 14px;
  background: #fff;
  padding: 0 8px;
  font-size: 10.5px;
  font-weight: 800;
  color: #767676;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.bs-guarantees__item {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 12px;
  align-items: center;
}
.bs-guarantees__item img { width: 40px; height: 40px; }
.bs-guarantees__item p {
  margin: 0;
  font-size: 13px;
  color: #333435;
  line-height: 1.45;
}
.bs-guarantees__item p strong {
  color: #242424;
  font-weight: 900;
  display: block;
  font-size: 13.5px;
  margin-bottom: 1px;
}
.bs-guarantees__item a {
  color: #242424;
  font-weight: 800;
  border-bottom: 2px solid #F7C500;
  text-decoration: none;
}

/* ============================================================
   12. BANDEAU PICKUP ONLY (shortcode [bs_pickup_banner])
   Caché par défaut, affiché via body.is-pickup-only (PHP filter)
   ============================================================ */
.bs-pickup-banner {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  background: #fff4dd;
  border-left: 4px solid #f59e0b;
  border-radius: 8px;
  font-size: 13.5px;
  margin-bottom: 8px;
}
body.is-pickup-only .bs-pickup-banner { display: flex; }
.bs-pickup-banner strong { color: #242424; display: block; font-size: 14px; }
.bs-pickup-banner span  { color: #767676; font-size: 12px; }

/* Grisage des dates livraison pour produits retrait uniquement */
body.is-pickup-only #chrono13-shipping,
body.is-pickup-only #mbe-shipping {
  opacity: 0.35 !important;
  filter: grayscale(1) !important;
  pointer-events: none !important;
}

/* ============================================================
   13. SECTION VÉRIFIÉ (shortcode [bs_verified])
   ============================================================ */
.bs-verified {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 26px 22px;
  margin: 24px 0;
  position: relative;
  overflow: hidden;
}
.bs-verified::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #F7C500, #e0b200);
}
.bs-verified__head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.bs-verified__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.bs-verified__step {
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 12px;
  align-items: flex-start;
  padding: 16px;
  background: #fafbfc;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  transition: all .22s cubic-bezier(.4,0,.2,1);
}
.bs-verified__step:hover {
  border-color: #F7C500;
  background: #fffdf5;
  transform: translateY(-2px);
}
.bs-verified__step-icon {
  width: 50px; height: 50px;
  background: linear-gradient(135deg, #242424, #1a1a1a);
  border-radius: 12px;
  display: grid;
  place-items: center;
}
.bs-verified__step-icon svg { width: 24px; height: 24px; }
.bs-verified__step-icon svg path { fill: #F7C500; }
.bs-verified__step h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 900;
  color: #242424;
}
.bs-verified__step p {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: #767676;
  line-height: 1.5;
}
.bs-verified__step p strong { color: #242424; font-weight: 700; }
.bs-verified__step p a {
  color: #505971;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 700;
}

/* ============================================================
   14. BARRE DU BAS MOBILE — style 2026
   .wd-toolbar.wd-toolbar-label-show
   ============================================================ */
.wd-toolbar {
  background: rgba(255,255,255,.97) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-top: 1px solid rgba(0,0,0,.06) !important;
  box-shadow: 0 -4px 20px rgba(15,23,42,.08), 0 -1px 4px rgba(15,23,42,.04) !important;
}

/* ============================================================
   15. MASQUER USP STRIP REDONDANT (déjà en footer)
   ============================================================ */
.single-product .wd-prefooter { display: none !important; }

/* ============================================================
   16. DIVERS
   ============================================================ */
/* Shipping class inline (inutilisée, cachée) */
.shipping-class-info { display: none !important; }

/* ============================================================
   17. RESPONSIVE — breakpoints desktop (600px, 1100px)
   ============================================================ */
@media (min-width: 600px) {
  .bs-guarantees {
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
  .bs-guarantees__item + .bs-guarantees__item {
    border-left: 1px solid #e5e7eb;
    padding-left: 16px;
    margin-left: 16px;
  }
}
@media (min-width: 600px)  { .bs-verified__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .bs-verified__grid { grid-template-columns: repeat(4, 1fr); } }

/* ============================================================
   18. RESPONSIVE MOBILE ≤ 767px
   Tout le CSS mobile est consolidé ici en un seul bloc.
   ============================================================ */
@media (max-width: 767px) {

  /* --- Padding bottom pour compenser la toolbar fixe --- */
  .single-product .site-content,
  .single-product .wd-page-wrapper {
    padding-bottom: 70px !important;
  }

  /* --- Prix : del + badge % sur la même ligne que le prix promo ---
     flex-wrap: nowrap force la ligne unique.
     Tailles réduites : ins 36→30px, del 17→13px, badge 11→10px.
     Vérification 360px (contenu ~328px) :
       "1 999,99 €" @30px ≈140px + "2 499,99 €" @13px ≈65px + badge ≈28px + gaps 16px = ~249px ✓ */
  .single-product .elementor-widget-wd_single_product_price .price {
    flex-wrap: nowrap !important;
    align-items: baseline !important;
    gap: 0 8px !important;
  }
  .single-product .elementor-widget-wd_single_product_price .price ins {
    font-size: 30px !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
  }
  .single-product .elementor-widget-wd_single_product_price .price del {
    font-size: 13px !important;
    flex-shrink: 0 !important;
  }
  .single-product .elementor-widget-wd_single_product_price .bs-price-discount {
    font-size: 10px !important;
    padding: 2px 5px !important;
    border-radius: 4px !important;
    flex-shrink: 0 !important;
  }

  /* --- Quantité réduite / CTA agrandi ---
     Forcer le widget + container Elementor à 100% (WoodMart fixe parfois une largeur).
     Quantité : minus 44→32px, qty 44→34px, plus 44→32px = total ~101px (vs 135px avant)
     Sur 360px (~328px contenu) : CTA récupère ~219px (vs 85px avant) ✓ */
  .single-product .elementor-widget-wd_single_product_add_to_cart,
  .single-product .elementor-widget-wd_single_product_add_to_cart .elementor-widget-container {
    width: 100% !important;
    max-width: none !important;
  }
  .single-product .elementor-widget-wd_single_product_add_to_cart form.cart {
    width: 100% !important;
    max-width: none !important;
    gap: 8px !important;
  }
  .single-product .quantity input.minus,
  .single-product .quantity input.plus {
    width: 32px !important;
    min-width: 0 !important;
    height: 50px !important;
    font-size: 20px !important;
  }
  .single-product .quantity input.qty {
    width: 34px !important;
    height: 50px !important;
    font-size: 15px !important;
  }
  .single-product .elementor-widget-wd_single_product_add_to_cart form.cart .single_add_to_cart_button {
    min-height: 50px !important;
    font-size: 13px !important;
    padding: 0 14px !important;
    letter-spacing: 0.02em !important;
  }
}