/* ==========================================================================
   Etiqueta "Agotado" para tarjetas de producto sin existencias
   ==========================================================================
   El cliente pidio un indicador visual minimalista y moderno en la tarjeta
   de producto (tienda, categorias, relacionados) cuando el producto esta
   agotado/sin stock, sin tocar el diseno ni la estructura actual de las
   tarjetas -- por eso esto es solo una etiqueta superpuesta (::before con
   contenido CSS) sobre la miniatura, apoyada en la clase "outofstock" que
   WooCommerce ya agrega de forma nativa al contenedor de cada producto sin
   existencias (post_class()), sin necesidad de tocar ninguna plantilla.

   Cubre los dos renderizados de tarjeta que existen en el sitio:
   1) Elementor Loop Grid (tienda, categorias, "Todos los productos")
   2) Bucle clasico de WooCommerce ul.products li.product (relacionados en
      la pagina de producto individual, y cualquier otro listado que use la
      plantilla estandar)
   No aplica al contenedor raiz de la pagina de producto individual (ese no
   esta dentro de un ul.products ni de un .elementor-widget-loop-grid), asi
   que no interfiere con el indicador "Sin existencias" que ya se muestra
   ahi (ver .stock.out-of-stock en product.css). */

.elementor-widget-loop-grid .e-loop-item.outofstock,
ul.products li.product.outofstock{
  position:relative;
}

.elementor-widget-loop-grid .e-loop-item.outofstock::before,
ul.products li.product.outofstock::before{
  content:'Agotado';
  position:absolute;
  top:10px;
  left:10px;
  z-index:5;
  display:inline-block;
  background:#000000;
  color:#fff;
  font-family:'Montserrat', system-ui, sans-serif;
  font-size:10px;
  font-weight:700;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.08em;
  padding:5px 10px;
  border-radius:4px;
  pointer-events:none;
}

/* ---------- Misma etiqueta, en la galeria de la pagina de producto individual ----------
   El cliente pidio que la ficha de producto tambien muestre la etiqueta
   "Agotado" (la misma que ya aparece en las tarjetas de tienda/categoria),
   para que el usuario lo note siempre, no solo en el listado. El wrapper
   raiz de la pagina de producto (div.product) tambien recibe la clase
   "outofstock" de forma nativa; se usa como bandera para mostrar la
   etiqueta sobre la galeria de imagenes, sin tocar la estructura de la
   pagina. .woocommerce-product-gallery ya es position:relative (la usa el
   propio icono de zoom), asi que sirve de ancla sin agregar nada nuevo. */
.single-product div.product.outofstock .images::before{
  content:'Agotado';
  position:absolute;
  top:10px;
  left:10px;
  z-index:5;
  display:inline-block;
  background:#000000;
  color:#fff;
  font-family:'Montserrat', system-ui, sans-serif;
  font-size:10px;
  font-weight:700;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.08em;
  padding:5px 10px;
  border-radius:4px;
  pointer-events:none;
}

/* ---------- Ocultar la "cinta" duplicada de Agotado (tema padre Astra) ----------
   El cliente reporto que en algunos listados (por ejemplo, productos
   relacionados en la pagina de producto individual, que usan el bucle
   clasico ul.products li.product) aparecia una SEGUNDA indicacion de
   "Agotado": ademas de la etiqueta ::before de arriba (la de este
   archivo), el tema padre Astra imprime su propio elemento nativo
   (span.ast-shop-product-out-of-stock), enganchado a traves de
   woocommerce_shop_loop_item_title (ver
   astra_woo_shop_out_of_stock() en
   astra/inc/compatibility/woocommerce/woocommerce-common-functions.php).
   Ese span se renderiza como una banda/cinta clara sobre la parte
   inferior de la imagen, duplicando el mensaje. El cliente pidio dejar
   unicamente la etiqueta superior, asi que aqui se oculta ese elemento
   nativo de Astra por CSS (mas seguro/portable que un remove_action
   sobre un hook del tema padre, y sobrevive a sus actualizaciones). No
   afecta al Elementor Loop Grid (tienda/categorias), que nunca genera
   este span. */
.ast-shop-product-out-of-stock{
  display:none !important;
}

/* ---------- Evitar franja blanca arriba de la imagen en la cuadricula (Loop Grid) ----------
   Elementor centra verticalmente (justify-content:center) el contenido de
   cada tarjeta dentro de .e-con-inner. Cuando una fila de la cuadricula
   estira todas las tarjetas a la misma altura (por ejemplo porque una
   tarjeta vecina tiene un titulo de dos lineas), ese centrado deja una
   franja en blanco encima de la imagen (y otra, mas chica, debajo). Se
   fuerza el contenido a pegarse arriba para que la foto del producto
   siempre ocupe desde el borde superior de la tarjeta, sin franjas. Se
   limita a la plantilla de tarjeta de tienda\/categoria (post 928) para no
   afectar otros usos de Elementor en el sitio. */
.elementor-928.e-loop-item .e-con-inner{
  justify-content:flex-start !important;
}