/**
 * fxvariantstock - X sulle varianti non disponibili.
 * Flashex Web Agency
 *
 * Personalizzazione rapida: modificare le variabili qui sotto.
 */

.product-variants {
  --fx-x-color: #999;           /* colore della X sulle caselle taglia     */
  --fx-x-width: 0.4px;          /* spessore della X sulle caselle taglia   */
  --fx-x-text: #8a8a8a;         /* colore del testo della taglia barrata   */
  --fx-x-border: #e2e2e2;       /* bordo della casella barrata             */
  /* X per i cerchietti colore: tratto grigio con alone bianco, leggibile
     sia sulle tinte chiare sia su quelle scure */
  --fx-x-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5L19 19M19 5L5 19' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-opacity='0.85' stroke-linecap='round'/%3E%3Cpath d='M5 5L19 19M19 5L5 19' fill='none' stroke='%23666666' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ---------- stato generale ---------- */

.product-variants .fx-unavailable,
.product-variants .fx-unavailable label,
.product-variants .fx-unavailable input {
  cursor: not-allowed;
}

/* ---------- caselle taglia (testo) ---------- */

.product-variants .fx-unavailable .radio-label,
.product-variants .fx-unavailable > label > .attribute-name:not(.sr-only) {
  position: relative;
  color: var(--fx-x-text, #8a8a8a);
  border-color: var(--fx-x-border, #e2e2e2);
}

.product-variants .fx-unavailable .radio-label::after,
.product-variants .fx-unavailable > label > .attribute-name:not(.sr-only)::after {
  /* !important: alcuni temi usano gia' ::after sulla casella e lo tengono
     nascosto (opacity 0) finche' non e' selezionata */
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  z-index: 3;
  pointer-events: none;
  background-image:
    linear-gradient(to top right,
      transparent calc(50% - var(--fx-x-width)),
      var(--fx-x-color) calc(50% - var(--fx-x-width)),
      var(--fx-x-color) calc(50% + var(--fx-x-width)),
      transparent calc(50% + var(--fx-x-width))),
    linear-gradient(to bottom right,
      transparent calc(50% - var(--fx-x-width)),
      var(--fx-x-color) calc(50% - var(--fx-x-width)),
      var(--fx-x-color) calc(50% + var(--fx-x-width)),
      transparent calc(50% + var(--fx-x-width)));
}

/* ---------- cerchietti / pastiglie colore ---------- */
/* La X va sullo sfondo dello swatch, non su ::before/::after: molti temi
   (Optima, Warehouse e derivati) usano gia' entrambi gli pseudo-elementi
   per il bordo e per l'indicatore di selezione. Il colore resta visibile
   perche' arriva da background-color (style inline di PrestaShop). */

.product-variants .fx-unavailable .color {
  position: relative;
  background-image: var(--fx-x-image) !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 88% 88% !important;
}

/* Gli swatch a texture hanno gia' un'immagine di sfondo: li' la X va sopra */

.product-variants .fx-unavailable .texture {
  position: relative;
}

.product-variants .fx-unavailable .texture::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  z-index: 3;
  pointer-events: none;
  background: var(--fx-x-image) center center / 88% 88% no-repeat;
}

/* ---------- fallback: temi che non usano .radio-label / .color ---------- */

.product-variants .fx-unavailable > label {
  position: relative;
}

.product-variants .fx-unavailable > label:not(:has(.radio-label)):not(:has(.color)):not(:has(.texture)):not(:has(.attribute-name:not(.sr-only)))::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  pointer-events: none;
  background: var(--fx-x-image) center center / 80% 80% no-repeat;
}

/* ---------- salvagente: il testo per screen reader resta invisibile ---------- */
/* PrestaShop annida <span class="attribute-name sr-only"> dentro il cerchietto colore */

.product-variants .fx-unavailable .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.product-variants .fx-unavailable .sr-only::after {
  content: none !important;
}

/* ---------- gruppi con tendina <select> ---------- */

.product-variants select option:disabled {
  color: #b0b0b0;
}