/* UI variations (mobile) */
.mhgn-varui { margin: 10px 0 10px; }
.mhgn-varui__label { font-size: 13px; opacity: .8; margin: 0 0 8px; }
.mhgn-varui__row { display: flex; flex-wrap: wrap; gap: 10px; }

/* Cache le select Woo mais le garde fonctionnel */
.mhgn-varui--hidden-select {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* Couleurs: pastilles */
.mhgn-swatch {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
}

.mhgn-swatch.is-active {
  outline: 2px solid rgba(0,0,0,.85);
  outline-offset: 2px;
}

.mhgn-swatch.is-disabled {
  opacity: .35;
  cursor: not-allowed;
}

/* Optionnel: petit point au centre pour couleurs très claires */
.mhgn-swatch::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.35);
  display: none;
}
.mhgn-swatch.is-light::after { display: block; }

/* Tailles: boutons */
.mhgn-pill {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  font-size: 14px;
  cursor: pointer;
  min-width: 46px;
  text-align: center;
}

.mhgn-pill.is-active {
  border-color: rgba(0,0,0,.85);
}

.mhgn-pill.is-disabled {
  opacity: .35;
  cursor: not-allowed;
}

/* Cache les labels Woo (Couleur/Taille) pour ne garder que l'UI custom */
form.variations_form table.variations th.label {
  display: none !important;
}

/* Optionnel: réduit l'espace du tableau natif */
form.variations_form table.variations td.value {
  padding-left: 0 !important;
}

/* Cache le lien Woo "Effacer" */
form.variations_form a.reset_variations {
  display: none !important;
}

/* Anti-flash : on masque les variations tant que l'UI custom n'est pas prête */
form.variations_form { opacity: 0; visibility: hidden; }

/* Quand l'UI est prête, on ré-affiche */
form.variations_form.mhgn-varui-ready { opacity: 1; visibility: visible; }

/* Transition douce */
form.variations_form { transition: opacity .15s ease; }

/* Transition douce prix */
.product-price { transition: opacity .15s ease; }