/* ============================================================
   COMBO STOCK — variación agotada
   Las clases las aplica combo-stock.js; el bloqueo real del click
   vive también ahí, así que estos estilos son sólo la señal visual
   y el theme puede sobrescribirlos.
   ============================================================ */

.woocommerce-combo__variation-choice.is-out-of-stock {
  position: relative;
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
  /* El text-decoration nativo es casi invisible en etiquetas de una sola
     letra ("S", "M", "L"), que es el caso habitual: dibujamos la línea. */
  text-decoration: none;
}

/* el subrayado de selección del plugin no debe pintarse en una agotada */
.woocommerce-combo__variation-choice.is-out-of-stock::after {
  background: transparent !important;
}

/* Tachado en diagonal de ángulo FIJO (-20°), centrado sobre el texto.
   Un gradiente "to bottom right" se aplanaría en las etiquetas anchas y
   se saldría de las angostas; rotar una línea de ancho fijo mantiene el
   mismo trazo en "L" y en "TIE-SIDE". El label tiene 10px de padding
   inferior (el subrayado de selección), de ahí el desplazamiento. */
.woocommerce-combo__variation-choice.is-out-of-stock::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  /* Ancho en ch: escala con el largo del texto pero sin desbordarse como
     haría un porcentaje de la caja, que incluye el padding lateral. */
  width: calc(100% - 14px);
  min-width: 30px;
  height: 1.3px;
  background: currentColor;
  pointer-events: none;
  /* por encima del <img> de la variación, que si no lo taparía */
  z-index: 2;
  /* -5px compensa el padding-bottom del label (el subrayado de selección),
     para que la línea cruce el texto por el medio y no por debajo. */
   transform: translate(-50%, -50%) translateY(-6px) rotate(-45deg);
}

/* Opciones con imagen: la caja es cuadrada y la diagonal debe cruzarla
   entera, así que ahí conviene un trazo más largo y más inclinado. */
.woocommerce-combo__variation-choice.is-out-of-stock:has(.woocommerce-combo__variation-term-image)::before {
  width: 46px;
  transform: translate(-50%, -50%) translateY(-5px) rotate(-40deg);
}

.woocommerce-combo__variation-choice.is-out-of-stock .woocommerce-combo__variation-term-image {
  filter: grayscale(1);
}