/* ============================================================
   WatchModCustom — Habillage "Délai de fabrication" (v3)
   ------------------------------------------------------------
   Transforme les groupes d'attributs RADIO en cartes lisibles.
   Cette version NEUTRALISE fermement les styles du thème
   intertimes sur les radios (d'où les !important ciblés), pour
   éliminer le pavé clair illisible et les chevauchements.

   - Cible uniquement les groupes contenant input.input-radio
     -> Bracelet / Caseback (select) et couleur/texture : intacts.
   - N'affiche aucun texte (tout vient des attributs, traduisibles).
   - 100 % CSS. Aucun impact sur NDK ni sur les combinaisons.

   Accent = noir (#111), comme le bouton ADD TO CART.
   ============================================================ */

/* --- Conteneur : rangée de cartes ------------------------------------ */
.product-variants .product-variants-item ul:has(input.input-radio) {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
}

/* --- Chaque option : carte de même hauteur --------------------------- */
.product-variants .product-variants-item li.input-container:has(input.input-radio) {
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
  flex: 1 1 150px;
  min-width: 0;          /* évite les débordements / chevauchements */
  display: flex;
}

/* --- Masque le rond radio natif (et tout style de thème dessus) ------ */
.product-variants .product-variants-item li.input-container:has(input.input-radio) input.input-radio {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  appearance: none;
}

/* --- La carte = le label -------------------------------------------- */
.product-variants .product-variants-item li.input-container:has(input.input-radio) label {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  margin: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 56px;
  padding: 14px 14px !important;
  border: 1.5px solid #dddddd !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #111111 !important;
  cursor: pointer;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.35;
  white-space: normal;
  box-shadow: none !important;
  transition: border-color .15s ease, box-shadow .15s ease,
              background .15s ease, color .15s ease;
}

/* --- Reset DUR du texte interne (c'était la cause du pavé clair) ----- */
.product-variants .product-variants-item li.input-container:has(input.input-radio) .radio-label {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  font: inherit !important;
  white-space: normal !important;
}

/* --- Survol --------------------------------------------------------- */
.product-variants .product-variants-item li.input-container:has(input.input-radio) label:hover {
  border-color: #999999 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06) !important;
}

/* --- Carte sélectionnée : noir, texte blanc ------------------------- */
.product-variants .product-variants-item li.input-container:has(input.input-radio) label:has(input:checked) {
  border-color: #111111 !important;
  background: #111111 !important;
  color: #ffffff !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .15) !important;
}

/* Le ✓ apparaît après le texte de la carte sélectionnée */
.product-variants .product-variants-item li.input-container:has(input.input-radio) label:has(input:checked) .radio-label::after {
  content: " ✓";
  font-weight: 700;
}

/* --- Titre du groupe (jamais Bracelet/Caseback) --------------------- */
.product-variants .product-variants-item:has(input.input-radio) .control-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
}

/* --- Responsive : empilement plein-largeur sur mobile --------------- */
@media (max-width: 575px) {
  .product-variants .product-variants-item ul:has(input.input-radio) {
    flex-direction: column;
  }
  .product-variants .product-variants-item li.input-container:has(input.input-radio) {
    flex: 1 1 auto;
  }
}