/**
 * Morta Product Variations — styles front.
 * Boutons (swatches) pour les petits jeux d'options + <select> natif stylé
 * pour les grands (ex. tailles). Aligné sur le rendu de l'ancien plugin vi-wpvs
 * (fond blanc / texte #212121, sélectionné = #212121 / blanc).
 */

/* ---- Anti-FOUC ----
 * Masque les <select> natifs bruts dès le premier rendu (feuille chargée en
 * <head>, bloquante). Le JS révèle ensuite le bon rendu : boutons (créés en JS)
 * ou <select> stylé (classe .morta-select ajoutée). Nécessaire car on retire le
 * JS du plugin legacy qui masquait le select natif → sinon flash.
 * Conditionné à .mpv-js (posé par un micro-script en <head>) : si le JS est
 * désactivé, la classe est absente → les selects restent visibles (sûr). */
html.mpv-js .single-product .variations td.value select[name^="attribute_"]:not(.morta-select) {
  visibility: hidden;
}

/* ---- Layout : label au-dessus, valeur en dessous pleine largeur ---- */
/* (WooCommerce rend un <table> th|td ; on l'empile comme l'ancien plugin.) */
.single-product .variations,
.single-product .variations tbody,
.single-product .variations tr,
.single-product .variations td.value {
  display: block;
  width: 100%;
}
.single-product .variations tr {
  margin-bottom: 18px;
}
.single-product .variations td.value {
  padding: 0;
}

/* ---- Libellé "valeur sélectionnée" (gras) à côté du label d'attribut ---- */
.single-product .variations th.label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  padding: 0 0 8px;
  text-align: left;
}
.morta-swatch__selected {
  font-weight: 700;
  color: #000;
  margin-left: 10px;
}
.morta-swatch__selected:empty {
  display: none;
}

/* ---- Boutons (swatches) ---- */
.morta-swatches {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 0;
}

.morta-swatch {
  box-sizing: border-box;
  cursor: pointer;
  background: #fff;
  color: #212121;
  border: 1px solid #dcdcdc;
  border-radius: 0;
  padding: 12px 16px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.2;
  text-align: center;
  -webkit-appearance: none;
  appearance: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.morta-swatch:hover {
  border-color: #212121;
}

.morta-swatch.is-active {
  background: #212121;
  color: #fff;
  border-color: #212121;
}

/* Option hors stock (désactivée par WooCommerce) : visible mais estompée. */
.morta-swatch:disabled {
  cursor: not-allowed;
  opacity: 0.4;
  text-decoration: line-through;
}
.morta-swatch:disabled:hover {
  border-color: #dcdcdc;
}

.morta-swatch:focus-visible {
  outline: 2px solid #212121;
  outline-offset: 2px;
}

/* Masque le select natif quand on affiche des boutons (garde sa valeur active).
 * !important : sur le FR, une règle du thème impose une largeur au select ; resté
 * large de ~1100px, il débordait à droite et créait un défilement horizontal. */
.morta-variation--swatches td.value {
  position: relative;
}
.morta-variation--swatches td.value > select[name^="attribute_"] {
  position: absolute !important;
  width: 1px !important;
  min-width: 0 !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0 !important;
}

/* ---- Select natif stylé (grands jeux : tailles…) ---- */
.morta-select {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
  cursor: pointer;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23212121' stroke-width='1.5' d='M1 1.5L6 6.5L11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
  color: #212121;
  border: 1px solid #dcdcdc;
  border-radius: 0;
  padding: 12px 40px 12px 16px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.2;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.morta-select:focus {
  outline: none;
  border-color: #212121;
}

/* ---- Filet de sécurité : masque l'UI de l'ancien plugin vi-wpvs si actif ---- */
.vi-wpvs-variation-wrap-wrap,
.vi-wpvs-label-selected {
  display: none !important;
}