/* ===================================================================
   SINGLE PRODUCT — LAYOUT + GALLERIE + SUMMARY + "VOIR PLUS"
   Version unifiée et nettoyée
   =================================================================== */

/* =================== LAYOUT 2 COLONNES (DESKTOP) =================== */
@media (min-width: 992px) {
  .single-product div.product {
    display: grid;
    grid-template-columns: 1fr 1fr;   /* gauche slider / droite summary */
    gap: 32px;
    align-items: start;
  }

  /* Neutraliser d’éventuels floats/largeurs du thème parent */
  .single-product div.product .woocommerce-product-gallery,
  .single-product div.product .summary.entry-summary {
    float: none !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
  }

  /* Galerie (rendu propre) */
  .single-product div.product .woocommerce-product-gallery {
    border: 1px solid #eee;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
  }
}

/* Mobile : pile verticale */
@media (max-width: 991.98px) {
  .single-product div.product { display: block; }
}

/* =================== GALERIE / SLIDER (Woo par défaut) ============= */
/* Laisse Woo gérer sa largeur dans la colonne gauche.
   On garde juste des garanties de fluidité. */
.single-product .woocommerce-product-gallery__image,
.single-product .woocommerce-product-gallery__image a,
.single-product .woocommerce-product-gallery__image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Optionnel: thumbnails Woo plus propres */
.single-product ul.flex-control-nav.flex-control-thumbs {
  display: flex;
  gap: 10px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.single-product ul.flex-control-nav.flex-control-thumbs li {
  float: none !important;
  width: auto !important;
  margin: 0;
  flex: 0 0 auto;
}
.single-product ul.flex-control-nav.flex-control-thumbs img {
  display: block;
  width: 72px; height: 72px;
  object-fit: cover;
  border: 1px solid #e6e6e6;
  border-radius: 6px;
  opacity: .85;
  transition: opacity .2s, transform .2s, border-color .2s;
  cursor: pointer;
}
.single-product ul.flex-control-nav.flex-control-thumbs img:hover,
.single-product ul.flex-control-nav.flex-control-thumbs img.flex-active {
  opacity: 1;
  border-color: #bbb;
  transform: translateY(-1px);
}

/* =================== BUYBAR : QTY + CTA ALIGNÉS ===================== */
.single-product div.product .summary.entry-summary form.cart {
  display: flex;
  align-items: stretch;
  /*gap: 12px;*/
  flex-wrap: wrap;
  margin-top: 12px;
}
.single-product .summary.entry-summary .quantity input.qty {
  height: 48px; padding: 0 12px; line-height: 48px; font-size: 16px;
  max-width: 110px; text-align: center;
}
.single-product .summary.entry-summary .single_add_to_cart_button,
.single-product .summary.entry-summary button.single_add_to_cart_button {
  height: 48px; padding: 0 18px; line-height: 48px; font-size: 16px;
  display: inline-flex; align-items: center; justify-content: center;
}
.single-product .summary.entry-summary table.variations select { height: 44px; }
.single-product .summary.entry-summary .price {
  font-weight: 700;
  font-size: clamp(18px, 2.1vw, 24px);
  margin-bottom: 6px;
}

/* =================== DESCRIPTION COURTE — TEASER ==================== */
.summary.entry-summary .descExpander{
  position: relative;              /* repère pour le bouton centré */
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.summary.entry-summary .descBody{ position: relative; }

/* Mobile : tout visible, pas de bouton */
@media (max-width: 991.98px){
  .summary.entry-summary .descToggleBtn{ display:none !important; }
}

/* Desktop : état FERMÉ = clamp + dégradé visuel via ::after */
@media (min-width: 992px){
  .summary.entry-summary .descExpander[data-expanded="false"] .descBody{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 10;     /* ← nb de lignes visibles */
    overflow: hidden;
  }

   :root {
     --summary-bg: #720eec; /* ou la couleur réelle du fond */
   }

  /* Dégradé doux en bas qui n’intercepte PAS les clics */
  .summary.entry-summary .descExpander[data-expanded="false"] .descBody::after{
    content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 5em;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(to bottom,
  rgba(var(--summary-bg-rgb, 248,248,248), 0) 0%,
  rgba(var(--summary-bg-rgb, 248,248,248), 1) 100%
  );
  }
  /* État OUVERT: tout visible, pas de dégradé */
  .summary.entry-summary .descExpander[data-expanded="true"] .descBody{
    -webkit-line-clamp: unset;
    overflow: visible;
  }
  .summary.entry-summary .descExpander[data-expanded="true"] .descBody::after{ content:none; }

  /* Bouton flèche: FOND TRANSPARENT + BORDURE, toujours CENTRÉ */
  :root{ --desc-accent:#222; }   /* change en #4b0082 pour violet foncé */
  .summary.entry-summary .descToggleBtn{
    /* ton JS lui met déjà ces styles; on sécurise côté CSS au cas où */
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    bottom:-18px;                /* si coupé → mets 8px pour tester à l’intérieur */
    width:38px; height:38px;
    border-radius:50%;
    background:transparent;
    border:2px solid var(--desc-accent);
    display:grid; place-items:center;
    cursor:pointer;
    z-index:3;                   /* AU-DESSUS du dégradé (z:1) */
    box-shadow:none;
  }
  .summary.entry-summary .descToggleBtn:hover{
    background:rgba(0,0,0,.04);
    transform:translateX(-50%) scale(1.05);
  }

  /* Masquer les libellés texte du bouton, garder le SVG injecté par le JS */
  .summary.entry-summary .descToggleBtn .more,
  .summary.entry-summary .descToggleBtn .less{ display:none !important; }
  .summary.entry-summary .descToggleBtn::before{ content:none !important; }
  .summary.entry-summary .descToggleBtn{ font-size:0 !important; line-height:0 !important; }
  .summary.entry-summary .descToggleBtn svg{ width:14px; height:14px; display:block; }

  /* Réserve pour le bouton qui déborde */
  .summary.entry-summary{ overflow:visible !important; padding-bottom:44px; }
}


/* ======== SINGLE PRODUCT — FORCER 50/50 SLIDER / SUMMARY (DESKTOP) ======== */
@media (min-width: 992px) {
  /* Conteneur en flex (écrase floats / widths du thème) */
  .single-product div.product {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 32px !important;
    width: 100% !important;
  }

  /* Les 2 colonnes : 50/50 et rétrécissables */
  .single-product div.product > .indigo-gallery,
  .single-product div.product > .summary.entry-summary {
    flex: 0 0 55% !important;
    max-width: 55% !important;
    min-width: 0 !important;  /* crucial en flex/grid */
    float: none !important;
    clear: none !important;
    width: auto !important;
    margin: 0 !important;
  }

  /* Look propre de la galerie */
  .single-product div.product > .indigo-gallery {
    border: 1px solid #eee; border-radius: 12px; overflow: hidden; background: #fff;
  }
}


/* ===================================================================
   BARRE D'ACHAT — quantité + bouton "Acheter" alignés et égaux
   =================================================================== */

.single-product div.product .summary.entry-summary form.cart {
  display: flex !important;
  align-items: stretch !important;
  /*gap: 12px !important;*/
  flex-wrap: nowrap !important;
  margin-top: 36px !important;
}

/* Champ quantité */
.single-product .summary.entry-summary .quantity {
  display: flex;
  align-items: center;
}
.single-product .summary.entry-summary .quantity input.qty {
  height: 48px !important;
  line-height: 48px !important;
  padding: 0 12px !important;
  font-size: 16px !important;
  text-align: center !important;
  border: 1px solid #ccc !important;
  border-radius: 6px !important;
  max-width: 110px !important;
  box-sizing: border-box !important;
}

/* Bouton "Ajouter au panier" ou "Acheter" */
.single-product .summary.entry-summary .single_add_to_cart_button,
.single-product .summary.entry-summary button.single_add_to_cart_button {
  height: 48px !important;
  line-height: 48px !important;
  padding: 0 24px !important;
  font-size: 16px !important;
  border-radius: 6px !important;
  border: none !important;
  background: #dfb6b0 !important;     /*#50485b #202031 #dfb6b0*/
  color: #fff !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background 0.2s ease, transform 0.1s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

/* Effets au survol */
.single-product .summary.entry-summary .single_add_to_cart_button:hover {
  background: #50485b !important;
  transform: translateY(-1px);
}
.single-product .summary.entry-summary .single_add_to_cart_button:active {
  transform: translateY(0);
}

/* Mobile : empiler proprement */
@media (max-width: 575.98px) {
  .single-product div.product .summary.entry-summary form.cart {
    flex-wrap: wrap !important;
    display: inline-flex !important;
    justify-content: center !important;
  }
  .single-product .summary.entry-summary .quantity,
  .single-product .summary.entry-summary .single_add_to_cart_button {
    flex: 1 1 100% !important;
  }
  .single-product .summary.entry-summary .single_add_to_cart_button {
    justify-content: center !important;
  }
}


/* ===================================================================
   MOBILE — quantité + bouton "Acheter" en pleine largeur (100%)
   =================================================================== */
@media (max-width: 991px) { /*768*/
  .single-product div.product .summary.entry-summary form.cart {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  /* Bloc quantité = 100% largeur */
  .single-product .summary.entry-summary .quantity {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }

  /* Champ de quantité lui-même */
  .single-product .summary.entry-summary .quantity input.qty {
    width: 100% !important;
    max-width: none !important;
    height: 48px !important;
    line-height: 48px !important;
    border-radius: 6px !important;
    border: 1px solid #ccc !important;
    font-size: 16px !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* Bouton Acheter = 100% largeur */
  .single-product .summary.entry-summary .single_add_to_cart_button,
  .single-product .summary.entry-summary button.single_add_to_cart_button {
    width: 100% !important;
    height: 48px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    /*background: #720eec !important;
    color: #fff !important;*/
    border: none !important;
    box-sizing: border-box !important;
  }

  /* Un peu d’espace autour */
  .single-product .summary.entry-summary .single_add_to_cart_button {
    margin-top: 0 !important;
  }
}


/* ===================================================================
   VARIATIONS (sélecteur d’options) — 100% largeur, au-dessus de la buybar
   =================================================================== */

/* 1) Le formulaire peut accueillir un bloc plein-largeur au-dessus */
.single-product div.product .summary.entry-summary form.cart {
  display: flex !important;
  align-items: stretch !important;
  /*gap: 12px !important;*/
  flex-wrap: wrap !important;   /* ← IMPORTANT pour laisser le bloc variations prendre 100% */
}

/* 2) Le tableau Woo des variations devient un bloc 100% */
.single-product .summary.entry-summary form.cart table.variations {
  flex: 0 0 100% !important;    /* ← occupe toute la ligne */
  max-width: 100% !important;
  width: 100% !important;
  min-width: 0 !important;
  order: -1 !important;         /* ← positionné au-dessus de qty + bouton */
  margin: 0 0 6px 0 !important;
  border-collapse: separate;    /* évite héritages indésirables */
}

/* 3) On “dés-table” l’intérieur pour un layout propre label au-dessus du select */
.single-product .summary.entry-summary form.cart table.variations tr,
.single-product .summary.entry-summary form.cart table.variations th,
.single-product .summary.entry-summary form.cart table.variations td {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
}

/* 4) Label au-dessus, style sobre */
.single-product .summary.entry-summary form.cart table.variations th.label label {
  display: block !important;
  margin-bottom: 6px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}

/* 5) Le <select> prend toute la largeur, même hauteur que le bouton */
.single-product .summary.entry-summary form.cart table.variations td.value select {
  display: block !important;
  width: 100% !important;
  height: 48px !important;
  line-height: 48px !important;
  padding: 0 12px !important;
  font-size: 16px !important;
  border: 1px solid #ccc !important;
  border-radius: 6px !important;
  box-sizing: border-box !important;
  background: #fff !important;
}

/* 6) Lien “Effacer” discret, aligné à droite sous le select */
.single-product .summary.entry-summary form.cart table.variations td.value .reset_variations {
  display: inline-block !important;
  margin-top: 6px !important;
  font-size: 13px !important;
  color: #666 !important;
  text-decoration: underline !important;
  float: right !important;
}

/* 7) Buybar : qty + bouton restent sur la même ligne en desktop, 100% en mobile */
@media (min-width: 991px) { /*768*/
  .single-product .summary.entry-summary .quantity { flex: 0 0 auto !important; }
  .single-product .summary.entry-summary .single_add_to_cart_button { flex: 0 0 auto !important; }
}
@media (max-width: 991px) { /*768*/
  /* déjà fait plus haut, mais on renforce : tout en colonne 100% */
  .single-product div.product .summary.entry-summary form.cart {
    flex-direction: column !important;
  }
  .single-product .summary.entry-summary .quantity,
  .single-product .summary.entry-summary .single_add_to_cart_button {
    width: 100% !important;
  }
}

/* ===================================================================
   AJUSTEMENTS CIBLÉS — garder ta base, corriger 3 points
   =================================================================== */

/* 0) (Safari/Plugins) – si ton plugin met un wrapper de select avec fond/flèche */
.single-product .summary.entry-summary .select-container {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
.single-product .summary.entry-summary .select-container::before,
.single-product .summary.entry-summary .select-container::after,
.single-product .summary.entry-summary .select-container .arrow,
.single-product .summary.entry-summary .select-container .icon {
  display: none !important;
  content: none !important;
}
/* garder l’apparence native du select, sans débordements */
.single-product .summary.entry-summary .select-container select {
  -webkit-appearance: auto !important;
  appearance: auto !important;
  background-image: none !important;
}

/* 1) Rendre les enfants de .single_variation_wrap “plats” (le PRIX devient un item flex du form) */
.single-product .summary.entry-summary form.cart .single_variation_wrap {
  display: contents !important;
}

/* 2) DESKTOP — Select + Prix sur la même ligne,
      puis en-dessous: Quantité + Ajouter au panier */
@media (min-width: 992px) {
  /* Ton form.cart est déjà en flex-wrap. On utilise :has() pour
     rétrécir le select UNIQUEMENT quand le prix est présent. */
  .single-product .summary.entry-summary form.cart:has(.woocommerce-variation:not(:empty)) table.variations {
    flex: 1 1 auto !important;      /* laisse de la place au prix sur la ligne */
    margin-bottom: 0 !important;
  }
  /* Tant que le prix n’est PAS là, le select garde 100% (ta règle existante le fait déjà) */

  /* Le PRIX devient un item flex, sur la même ligne, à droite */
  .single-product .summary.entry-summary form.cart .woocommerce-variation.single_variation {
    flex: 0 0 auto !important;
    align-self: center !important;
    margin-left: auto !important;   /* pousse le prix à droite de la ligne */
    white-space: nowrap !important;
    font-weight: 700; font-size: 18px; color: #111;
  }

  /* Le bloc “qty + bouton” (variations_button) DOIT passer à la ligne suivante, 100% */
  .single-product .summary.entry-summary form.cart .woocommerce-variation-add-to-cart.variations_button {
    flex: 0 0 100% !important;      /* occupe toute la ligne suivante */
    display: flex !important;
    gap: 12px !important;
    align-items: stretch !important;
  }
}

/* 3) MOBILE — plus d’air pour le select + ordre clair */
@media (max-width: 991.98px) {
  /* Select plus haut (confort) */
  .single-product .summary.entry-summary form.cart table.variations td.value select,
  .single-product .summary.entry-summary .select-container select {
    height: 56px !important;
    line-height: 56px !important;
    padding: 0 14px !important;
  }

  /* Ordre : Select → Prix → Quantité → Bouton (chacun 100%) */
  .single-product .summary.entry-summary form.cart table.variations { order: 1 !important; }
  .single-product .summary.entry-summary form.cart .woocommerce-variation.single_variation { order: 2 !important; }
  .single-product .summary.entry-summary form.cart .quantity { order: 3 !important; width: 100% !important; }
  .single-product .summary.entry-summary form.cart .single_add_to_cart_button { order: 4 !important; width: 100% !important; }
}


/*---------------------------------*/

/* ====================== SAFARI DESKTOP – FIX .select_container ======================= */
/* Objectif : le wrapper ne doit pas dépasser la hauteur du <select> et ne doit pas
   dessiner d’arrière-plan ni de pseudo-éléments (flèche du plugin, ombre, etc.). */

@media (min-width: 992px) {
  /* 1) Normaliser le wrapper */
  .single-product .summary.entry-summary table.variations td.value .select_container {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;

    /* Empêche toute “hauteur fantôme” autour du select */
    height: auto !important;
    min-height: 0 !important;
    line-height: 0 !important;

    /* Le wrapper suit EXACTEMENT la hauteur de son contenu */
    display: inline-block !important;
    width: 100% !important;
    overflow: hidden !important;
    position: relative !important;
  }

  /* 2) Certaines skins ajoutent des pseudo-éléments (flèche/ombre) sur le wrapper */
  .single-product .summary.entry-summary table.variations td.value .select_container::before,
  .single-product .summary.entry-summary table.variations td.value .select_container::after {
    content: none !important;
    display: none !important;
  }

  /* 3) Si le plugin ajoute un élément flèche dédié (ex: .arrow / .icon), on le coupe */
  .single-product .summary.entry-summary table.variations td.value .select_container .arrow,
  .single-product .summary.entry-summary table.variations td.value .select_container .icon {
    display: none !important;
  }

  /* 4) Le <select> occupe 100%, avec dimensions stables (Safari) */
  .single-product .summary.entry-summary table.variations td.value .select_container > select {
    display: block !important;
    width: 100% !important;

    /* Hauteur réelle du contrôle + centrage vertical propre */
    height: 48px !important;
    padding: 10px 12px !important;
    line-height: normal !important;

    /* Apparence native sans image de fond (supprime la “fausse flèche” en bg) */
    -webkit-appearance: menulist !important;
    appearance: auto !important;
    background: #fff !important;
    background-image: none !important;

    border: 1px solid #ccc !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }
}


/*--------------------------------*/
/* ======================= DESKTOP : options + prix sur la même ligne ======================= */
@media (min-width: 992px) {
  /* 0) Le formulaire reste en flex avec wrap */
  .single-product .summary.entry-summary form.cart{
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    /*gap:12px !important;*/
  }

  /* 1) Le tableau des variations (select) doit pouvoir se rétrécir */
  .single-product .summary.entry-summary form.cart table.variations{
    order:1 !important;
    flex:1 1 auto !important;      /* ← clé : n'est plus figé à 100% */
    min-width:0 !important;        /* ← autorise vraiment le rétrécissement */
    margin-bottom:0 !important;
  }

  /* 2) Aplatir le wrapper du prix pour l'exposer au flex parent */
  .single-product .summary.entry-summary form.cart .single_variation_wrap{
    display:contents !important;
  }

  /* 3) Le PRIX : surtout pas 100% */
  .single-product .summary.entry-summary form.cart .woocommerce-variation.single_variation,
  .single-product .summary.entry-summary form.cart .woocommerce-variation-price,
  .single-product .summary.entry-summary form.cart .woocommerce-variation-price .price{
    order:2 !important;
    display:inline-flex !important;  /* évite width:100% hérités */
    width:auto !important;
    max-width:none !important;
    flex:0 0 auto !important;
    align-items:center !important;
    align-self:center !important;
    margin-left:12px !important;
    white-space:nowrap !important;
  }

  /* 4) Empêcher les "clear" du thème de forcer un saut de ligne */
  .single-product .summary.entry-summary form.cart .clear,
  .single-product .summary.entry-summary form.cart br{
    display:none !important;
  }

  /* 5) Buybar (qty + bouton) sur la ligne suivante, pleine largeur */
  .single-product .summary.entry-summary form.cart .woocommerce-variation-add-to-cart.variations_button{
    order:3 !important;
    flex:0 0 100% !important;
    display:flex !important;
    gap:12px !important;
    align-items:stretch !important;
    margin-top:8px !important;
  }
}


/* ========================= COSMÉTIQUE DESKTOP ========================= */
@media (min-width: 992px) {

  /* — Prix : deux traits fins de part et d’autre (resto style) — */
  .single-product .summary.entry-summary form.cart .woocommerce-variation-price .price,
  .single-product .summary.entry-summary form.cart .single_variation .price {
    /* il est déjà order:2 dans ton CSS : on ajoute juste le rendu */
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    text-align: center !important;
  }
  .single-product .summary.entry-summary form.cart .woocommerce-variation-price .price::before,
  .single-product .summary.entry-summary form.cart .single_variation .price::before,
  .single-product .summary.entry-summary form.cart .woocommerce-variation-price .price::after,
  .single-product .summary.entry-summary form.cart .single_variation .price::after {
    content: "";
    display: inline-block;
    width: 32px;                   /* longueur des traits → ajuste (24–48px) */
    height: 1px;
    background: currentColor;      /* même couleur que le texte */
    opacity: .25;                  /* discrétion élégante */
  }
  .single-product .summary.entry-summary form.cart .woocommerce-variation-price .price::before,
  .single-product .summary.entry-summary form.cart .single_variation .price::before {
    margin-right: 2px;
  }
  .single-product .summary.entry-summary form.cart .woocommerce-variation-price .price::after,
  .single-product .summary.entry-summary form.cart .single_variation .price::after {
    margin-left: 2px;
  }

  /* — Buybar centrée dans la colonne + même hauteur + alignements nickel — */
  .single-product .summary.entry-summary form.cart .woocommerce-variation-add-to-cart.variations_button {
    /* tu as déjà order:3 et 100% : on centre le contenu */
    justify-content: center !important;
    gap: 12px !important;
  }

  /* Conteneur qty : force un alignement parfait en Chrome/WebKit */
  .single-product .summary.entry-summary form.cart .quantity {
    display: inline-flex !important;
    align-items: stretch !important;
    height: 48px !important;                     /* même hauteur que le bouton */
  }

  /* Input qty : vrai centrage vertical + suppression des effets parasites */
  .single-product .summary.entry-summary form.cart .quantity input.qty {
    height: 48px !important;
    line-height: normal !important;
    padding: 0 12px !important;
    font-size: 16px !important;
    text-align: center !important;
    border: 1px solid #ccc !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;              /* Chrome : centrage interne */
  }
  /* (optionnel) supprime les flèches pour un rendu plus “propre” sur desktop */
  .single-product .summary.entry-summary form.cart .quantity input.qty::-webkit-outer-spin-button,
  .single-product .summary.entry-summary form.cart .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  .single-product .summary.entry-summary form.cart .quantity input.qty[type="number"] { -moz-appearance: textfield; }

  /* Bouton “Ajouter” : même hauteur + centrage parfait */
  .single-product .summary.entry-summary form.cart .single_add_to_cart_button {
    height: 48px !important;
    line-height: 48px !important;
    padding: 0 24px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
  }

  /* Bonus finition : léger hover subtil et cohérent */
  .single-product .summary.entry-summary form.cart .single_add_to_cart_button:hover {
    filter: brightness(0.98);
    transform: translateY(-1px);
    transition: transform .08s ease, filter .12s ease;
  }
}


.single-product .summary.entry-summary .woocommerce-variation:empty,
.single-product .summary.entry-summary .woocommerce-variation-price:empty,
.single-product .summary.entry-summary .single_variation:empty {
  display: none !important;
}


/* ================= MOBILE (≤ 991.98px) : réordonner le form.cart ================= */
@media (max-width: 991.98px) {

  /* Le formulaire devient une colonne, plein largeur */
  .single-product .summary.entry-summary form.cart{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  /* 1) OPTIONS / VARIATIONS en premier */
  .single-product .summary.entry-summary form.cart table.variations{
    order: 1 !important;
    width: 100% !important;
    margin: 0 0 4px 0 !important;
  }

  /* 2) PRIX DE LA VARIATION juste en dessous des options
     - On “aplatit” le wrap pour pouvoir ordonner ses enfants */
  .single-product .summary.entry-summary form.cart .single_variation_wrap{
    display: contents !important;
  }
  .single-product .summary.entry-summary form.cart .woocommerce-variation,
  .single-product .summary.entry-summary form.cart .woocommerce-variation-price,
  .single-product .summary.entry-summary form.cart .single_variation{
    order: 2 !important;
    width: 100% !important;
    margin: 0 0 6px 0 !important;
    text-align: left !important;
  }

  /* 3) QUANTITÉ + AJOUTER AU PANIER ensuite */
  .single-product .summary.entry-summary form.cart .woocommerce-variation-add-to-cart.variations_button,
  .single-product .summary.entry-summary form.cart .variations_button{
    order: 3 !important;
    width: 100% !important;
    display: flex !important;
    gap: 12px !important;
    align-items: stretch !important;
  }

  /* à l’intérieur : quantité avant le bouton, et 100% si tu veux les superposer verticalement
     (sinon enlève les width:100%) */
  .single-product .summary.entry-summary form.cart .quantity{
    order: 1 !important;
    width: 100% !important;
  }
  .single-product .summary.entry-summary form.cart .single_add_to_cart_button{
    order: 2 !important;
    width: 100% !important;
  }

  /* Évite les retours forcés par le thème */
  .single-product .summary.entry-summary form.cart .clear,
  .single-product .summary.entry-summary form.cart br{
    display: none !important;
  }
}

/*------------------------------------------*/

/* Wrapper parfois injecté par le thème/plugin : on le met à la bonne taille */
.single-product .summary.entry-summary form.cart table.variations td.value .select_container,
.single-product .summary.entry-summary form.cart table.variations td.value .select-container {
  /*display: flex !important;*/
  align-items: center !important;
  min-height: 60px !important;        /* ← hauteur cible */
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* Le SELECT lui-même */
.single-product .summary.entry-summary form.cart table.variations td.value select:not(.select2-hidden-accessible) {
  display: block !important;
  /*width: 100% !important;*/
  height: 60px !important;            /* ← hauteur cible */
  line-height: normal !important;
  padding: 12px 44px 12px 16px !important;
  font-size: 16px !important;
  border: 1px solid #ccc !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
  background-color: #fff !important;

  /* Laisse l’apparence native sur Safari pour éviter les bugs de hauteur */
  -webkit-appearance: menulist !important;
  appearance: auto !important;

  /* on enlève toute image de flèche en background potentielle du thème */
  background-image: none !important;
}


/*-----------------------------------------------*/

/* ================== MOBILE : bordure/fond sur le 1er .select_container ================== */
@media (max-width: 991.98px) {

  /* 1) Premier wrapper : c’est lui qui porte le fond + bordure */
  .single-product .summary.entry-summary form.cart table.variations td.value
    .select_container:not(.fill_inited),
  .single-product .summary.entry-summary form.cart table.variations td.value
    .select-container:not(.fill_inited) {
    position: relative !important;
    background: #fff !important;
    border: 1px solid #ccc !important;
    border-radius: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
    /*display: flex !important;*/
    align-items: center !important;
    min-height: 60px !important; /* hauteur confortable tactile */
    overflow: clip !important;    /* coupe tout débordement proprement */
    clip-path: inset(0 round 8px) !important;
  }

  /* 2) Wrapper interne (celui avec fill_inited) : plus de bordure/fond/ombre */
  .single-product .summary.entry-summary form.cart table.variations td.value
    .select_container.fill_inited,
  .single-product .summary.entry-summary form.cart table.variations td.value
    .select-container.fill_inited {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: 1 1 auto !important;
    min-height: 60px !important;  /* garde l’alignement vertical */
  }

  /* 2bis) Et on tue ses déco (chevrons) qui dépassent */
  .single-product .summary.entry-summary form.cart table.variations td.value
    .select_container.fill_inited::before,
  .single-product .summary.entry-summary form.cart table.variations td.value
    .select_container.fill_inited::after,
  .single-product .summary.entry-summary form.cart table.variations td.value
    .select-container.fill_inited::before,
  .single-product .summary.entry-summary form.cart table.variations td.value
    .select-container.fill_inited::after {
    content: none !important;
    display: none !important;
  }

  /* 3) Le <select> : plein largeur, SANS bordure (le cadre est sur le 1er wrapper) */
  .single-product .summary.entry-summary form.cart table.variations td.value
    .select_container:not(.fill_inited) select,
  .single-product .summary.entry-summary form.cart table.variations td.value
    .select-container:not(.fill_inited) select {
    display: block !important;
    width: 100% !important;
    height: 60px !important;
    padding: 12px 16px !important;
    font-size: 16px !important;
    line-height: normal !important;
    border: 0 !important;                 /* ← pas de double bordure */
    background: transparent !important;
    box-sizing: border-box !important;

    /* Laisse la flèche native (meilleure compat Safari) */
    -webkit-appearance: menulist !important;
    appearance: auto !important;

    /* s’il restait une image de flèche en background du thème */
    background-image: none !important;
  }
}

/* ================== SINGLE PRODUCT — CONTAINMENT 100% + 50/50 ================== */

/* 1) Le conteneur produit devient une grille robuste (pas de dépassement) */
body.single-product div.product{
  display: grid !important;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr); /* 50/50, autorise le shrink */
  gap: 32px;
  align-items: start;
  max-width: 100% !important;
  overflow: visible; /* on garde les ombres internes si besoin */
}

/* 2) Les deux colonnes ne forcent jamais la largeur */
body.single-product div.product > .indigo-gallery,
body.single-product div.product > .summary.entry-summary{
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;              /* clé pour empêcher le contenu de pousser */
  float: none !important;
  margin: 0 !important;
}

/* 3) Hygiène interne: rien ne dépasse par calculs de padding/margin */
body.single-product div.product *{ box-sizing: border-box; }
body.single-product div.product img{ max-width: 100%; height: auto; }

/* 4) La galerie Swiper ne déborde pas (flèches incluses) */
body.single-product .indigo-gallery{ overflow: hidden; border-radius: 12px; }
body.single-product .indigo-gallery .swiper{ overflow: hidden; }
body.single-product .indigo-gallery .swiper-button-prev,
body.single-product .indigo-gallery .swiper-button-next{
  /* évite que les flèches débordent en dehors du grid */
  width: 36px; height: 36px;
}
body.single-product .indigo-gallery .swiper-button-prev{ left: 8px; }
body.single-product .indigo-gallery .swiper-button-next{ right: 8px; }

/* 5) Le summary accepte le shrink + casse correctement les longs contenus */
body.single-product .summary.entry-summary{
  min-width: 0 !important;
  overflow-wrap: anywhere;    /* évite qu’une longue URL casse le layout */
  word-break: break-word;
}

/* 6) Mobile: une seule colonne pleine largeur */
@media (max-width: 991.98px){
  body.single-product div.product{
    grid-template-columns: 1fr !important;
    gap: 24px;
  }
}

/*================================*/
/*prevents overhanging for single-product page  on mobile*/
@media (max-width: 991px){ /*768*/
  body.single-product div.product{
    display: block !important;
  }
  body.single-product div.product > *{
    width: 100% !important;
  }

  p.price {
    margin-top: 2em !important;
  }

  .single-product .summary.entry-summary .single_add_to_cart_button, .single-product .summary.entry-summary button.single_add_to_cart_button{
    background-color: #dfb6b0 !important !important;
  }
}

/* === UPSSELLS / RELATED : 3 colonnes sur desktop, quoi qu'il arrive === */
@media (min-width: 1024px){

  /* Cible le UL des produits, que le bloc soit dans .fo-related-card
     (après ton JS) ou resté dans <section.up-sells…> */
  .single-product .fo-related-card ul.products,
  .single-product section.up-sells.upsells.products > ul.products,
  .single-product section.related.products > ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 24px !important;
    /* neutralise les styles "columns-4" du thème */
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Neutraliser tous les widths/float/flex hérités sur les items */
  .single-product .fo-related-card ul.products li.product,
  .single-product section.up-sells.upsells.products > ul.products li.product,
  .single-product section.related.products > ul.products li.product {
    float: none !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    flex: 0 0 auto !important;       /* si parent = flex */
    grid-column: auto !important;     /* si parent = grid */
  }

  /* Certains thèmes posent des classes colonnes: columns-4 / column-1_4, etc. */
  .single-product .fo-related-card ul.products[class*="columns-"],
  .single-product section.up-sells.upsells.products > ul.products[class*="columns-"],
  .single-product section.related.products > ul.products[class*="columns-"] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  /* Optionnel: conteneur visuel plus étroit et centré (ajuste si tu veux) */
  .single-product .fo-related-card,
  .single-product section.up-sells.upsells.products,
  .single-product section.related.products {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
  }
}

/*------------------------------------*/