/* ============================================================
   UNICLIMA — TARJETA DE PRODUCTO (.uc-*)
   FUENTE ÚNICA DE ESTILO de la tarjeta de archivo (tienda /
   categoría / etiqueta). La tarjeta la pinta el SERVIDOR con
   marcado .uc-* propio; este archivo es el ÚNICO que la estiliza.
   El JS solo MEJORA (galería, stock real, tooltip).

   Reglas de oro de este archivo:
   - CERO reglas de ocultar (display:none de duplicados) ni de
     dedup: el servidor ya no emite lo que sobraba.
   - CERO !important: el marcado es nuestro, la especificidad
     normal basta. Si Astra forzara algo, se sube la
     especificidad del selector ANTES que recurrir a !important.
   - Color de marca SIEMPRE desde var(--ucn-brand-500) (token).
     No se usan los #E30613 / #DC2626 sueltos del legacy.
   - Valores (tamaños, pesos, alturas, gaps) calcados del
     ground truth desktop y móvil.

   Tokens consumidos (de audit-css/tokens.css, priority 1):
     --ucn-brand-500     rojo de marca (#C8102E)
     --ucn-brand-700     rojo oscuro (hover)
     --ucn-gray-200      bordes suaves (#e5e7eb)
     --ucn-gray-300      borde share (~#d1d5db ≈ #cbd5e1)
     --ucn-neutral-200   gris fondo deshabilitado (#e5e5e5)
     --ucn-neutral-300   gris punto galería inactivo
     --ucn-neutral-400   gris punto galería hover
     --ucn-neutral-500   gris texto deshabilitado
     --ucn-font-sans     DM Sans
   Verde de stock (#059669) y tinta texto (#0f172a) sin token
   equivalente exacto -> hex directo, comentado.
   ============================================================ */

/* ============================================================
   1) REJILLA  —  ul.products
   Desktop 4 columnas / gap 16px (ground truth desktop).
   ============================================================ */
body.woocommerce-shop ul.products,
body.post-type-archive-product ul.products,
body.tax-product_cat ul.products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ============================================================
   2) TARJETA  —  li.product
   Columna flex, fondo blanco, borde fino, radio 12, sombra suave.
   ============================================================ */
body.woocommerce-shop ul.products li.product,
body.post-type-archive-product ul.products li.product,
body.tax-product_cat ul.products li.product {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding: 0;
  background: #fff;
  border: 1px solid var(--ucn-gray-200);      /* #e5e7eb */
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
body.woocommerce-shop ul.products li.product:hover,
body.post-type-archive-product ul.products li.product:hover,
body.tax-product_cat ul.products li.product:hover {
  box-shadow: 0 6px 18px rgba(15, 23, 42, .08);
  border-color: var(--ucn-gray-300);          /* #d1d5db */
  transform: translateY(-2px);
}

/* ============================================================
   3) IMAGEN  —  .astra-shop-thumbnail-wrap
   Relative (ancla badges/galería), cuadrada 1/1, radio 10,
   recorta el contenido. Fondo blanco; imagen contenida.
   ============================================================ */
body.woocommerce-shop ul.products li.product .astra-shop-thumbnail-wrap,
body.post-type-archive-product ul.products li.product .astra-shop-thumbnail-wrap,
body.tax-product_cat ul.products li.product .astra-shop-thumbnail-wrap {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0;
  padding: 0;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  border-bottom: 1px solid #f1f5f9;
}
body.woocommerce-shop ul.products li.product .astra-shop-thumbnail-wrap > a,
body.post-type-archive-product ul.products li.product .astra-shop-thumbnail-wrap > a,
body.tax-product_cat ul.products li.product .astra-shop-thumbnail-wrap > a {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
body.woocommerce-shop ul.products li.product .astra-shop-thumbnail-wrap img,
body.post-type-archive-product ul.products li.product .astra-shop-thumbnail-wrap img,
body.tax-product_cat ul.products li.product .astra-shop-thumbnail-wrap img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  padding: 16px;
  box-sizing: border-box;
  margin: 0 auto;
  background: #fff;
  display: block;
  box-sizing: border-box;
}

/* ============================================================
   4) DISTINTIVOS  —  .uc-badges / .uc-badge
   Superpuestos en la esquina de la imagen, no ocupan flujo.
   ============================================================ */
body.woocommerce-shop ul.products li.product .uc-badges,
body.post-type-archive-product ul.products li.product .uc-badges,
body.tax-product_cat ul.products li.product .uc-badges {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  pointer-events: none;
}
body.woocommerce-shop ul.products li.product .uc-badge,
body.post-type-archive-product ul.products li.product .uc-badge,
body.tax-product_cat ul.products li.product .uc-badge {
  display: inline-block;
  padding: 3px 8px;
  background: #0f172a;                 /* tinta neutra oscura */
  color: #fff;
  font-family: var(--ucn-font-sans);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-radius: 4px;
}
/* Agotado — rojo de marca */
body.woocommerce-shop ul.products li.product .uc-badge--agotado,
body.post-type-archive-product ul.products li.product .uc-badge--agotado,
body.tax-product_cat ul.products li.product .uc-badge--agotado {
  background: var(--ucn-brand-500);
}
/* Reacondicionado — azul de acento */
body.woocommerce-shop ul.products li.product .uc-badge--reacond,
body.post-type-archive-product ul.products li.product .uc-badge--reacond,
body.tax-product_cat ul.products li.product .uc-badge--reacond {
  background: var(--ucn-accent-blue);
}

/* Pildora de ESTADO (Reacondicionado / Nuevo / Seminuevo) — forma de pildora */
body.woocommerce-shop ul.products li.product .uc-badge--estado,
body.post-type-archive-product ul.products li.product .uc-badge--estado,
body.tax-product_cat ul.products li.product .uc-badge--estado {
  border-radius: 999px;
  text-transform: none;
  letter-spacing: .01em;
  padding: 4px 10px;
  font-size: 10.5px;
}
body.woocommerce-shop ul.products li.product .uc-badge--reacondicionado,
body.post-type-archive-product ul.products li.product .uc-badge--reacondicionado,
body.tax-product_cat ul.products li.product .uc-badge--reacondicionado {
  background: #059669;                  /* verde reacondicionado */
}
body.woocommerce-shop ul.products li.product .uc-badge--nuevo,
body.post-type-archive-product ul.products li.product .uc-badge--nuevo,
body.tax-product_cat ul.products li.product .uc-badge--nuevo {
  background: var(--ucn-accent-blue, #2563EB);   /* azul nuevo */
}
body.woocommerce-shop ul.products li.product .uc-badge--seminuevo,
body.post-type-archive-product ul.products li.product .uc-badge--seminuevo,
body.tax-product_cat ul.products li.product .uc-badge--seminuevo {
  background: #d97706;                  /* ambar seminuevo */
}

/* ============================================================
   5) RESUMEN  —  .astra-shop-summary-wrap
   Columna flex que ocupa el alto restante; ancla las acciones
   al fondo de la tarjeta (margin-top:auto en .uc-actions).
   ============================================================ */
body.woocommerce-shop ul.products li.product .astra-shop-summary-wrap,
body.post-type-archive-product ul.products li.product .astra-shop-summary-wrap,
body.tax-product_cat ul.products li.product .astra-shop-summary-wrap {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  margin: 0;
  padding: 12px 12px 14px;
  gap: 6px;
}

/* ============================================================
   6) CATEGORÍA  —  .uc-category
   DM Sans 11/600, mayúsculas, color de marca. Enlace.
   ============================================================ */
body.woocommerce-shop ul.products li.product .uc-category,
body.post-type-archive-product ul.products li.product .uc-category,
body.tax-product_cat ul.products li.product .uc-category {
  display: block;
  font-family: var(--ucn-font-sans);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;                    /* 13.2px del ground truth */
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ucn-brand-500);
  text-decoration: none;
  margin: 0 0 2px;
  cursor: pointer;
  transition: color .18s ease;
  /* una sola línea con elipsis: evita que la categoría se parta y se recorte */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
body.woocommerce-shop ul.products li.product a.uc-category:hover,
body.post-type-archive-product ul.products li.product a.uc-category:hover,
body.tax-product_cat ul.products li.product a.uc-category:hover {
  color: var(--ucn-brand-700);
  text-decoration: underline;
}

/* ============================================================
   7) TÍTULO  —  h2.woocommerce-loop-product__title
   DM Sans 14/600, tinta #0f172a, recortado a 2 líneas.
   ============================================================ */
body.woocommerce-shop ul.products li.product h2.woocommerce-loop-product__title,
body.post-type-archive-product ul.products li.product h2.woocommerce-loop-product__title,
body.tax-product_cat ul.products li.product h2.woocommerce-loop-product__title {
  font-family: var(--ucn-font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;                   /* 18.9px del ground truth */
  letter-spacing: -.01em;
  color: #0f172a;                      /* tinta texto (sin token exacto) */
  margin: 0;
  padding: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Enlace que envuelve el título: hereda color, sin subrayado */
body.woocommerce-shop ul.products li.product .ast-loop-product__link,
body.post-type-archive-product ul.products li.product .ast-loop-product__link,
body.tax-product_cat ul.products li.product .ast-loop-product__link {
  color: inherit;
  text-decoration: none;
}

/* ============================================================
   8) STOCK  —  .uc-stock / --ok / __dot
   DM Sans 11.5/600. En stock = verde; sin stock = rojo de marca.
   ============================================================ */
body.woocommerce-shop ul.products li.product .uc-stock,
body.post-type-archive-product ul.products li.product .uc-stock,
body.tax-product_cat ul.products li.product .uc-stock {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--ucn-font-sans);
  font-size: 11.5px;
  font-weight: 600;
  color: #059669;                      /* verde stock (sin token exacto) */
  margin: 2px 0;
  padding: 0;
}
/* Sin stock (sin modificador --ok): rojo de marca */
body.woocommerce-shop ul.products li.product .uc-stock:not(.uc-stock--ok),
body.post-type-archive-product ul.products li.product .uc-stock:not(.uc-stock--ok),
body.tax-product_cat ul.products li.product .uc-stock:not(.uc-stock--ok) {
  color: var(--ucn-brand-500);
}
/* Punto/check ~9px, hereda el color del estado */
body.woocommerce-shop ul.products li.product .uc-stock__dot,
body.post-type-archive-product ul.products li.product .uc-stock__dot,
body.tax-product_cat ul.products li.product .uc-stock__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 9px;
  height: 9px;
  color: currentColor;
}
body.woocommerce-shop ul.products li.product .uc-stock__dot svg,
body.post-type-archive-product ul.products li.product .uc-stock__dot svg,
body.tax-product_cat ul.products li.product .uc-stock__dot svg {
  width: 9px;
  height: 9px;
  stroke: currentColor;
  fill: none;
}

/* ============================================================
   9) ACCIONES  —  .uc-actions
   Fila flex: botón que crece + share fijo. Anclada al fondo.
   ============================================================ */
body.woocommerce-shop ul.products li.product .uc-actions,
body.post-type-archive-product ul.products li.product .uc-actions,
body.tax-product_cat ul.products li.product .uc-actions {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  margin-top: auto;
  box-sizing: border-box;
  /* La fila de acciones va a nivel de li (fuera del summary): le damos el mismo
     inset lateral que el summary (12px) + 14px abajo para que el botón NO quede
     pegado a los bordes de la tarjeta. */
  padding: 8px 12px 14px;
}

/* ---- 9a) Botón principal  —  .uc-btn / .uc-btn--primary ----
   DM Sans 13/600, blanco sobre rojo de marca, radio 8, alto 42. */
body.woocommerce-shop ul.products li.product .uc-actions .uc-btn,
body.post-type-archive-product ul.products li.product .uc-actions .uc-btn,
body.tax-product_cat ul.products li.product .uc-actions .uc-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1 1 0;
  min-width: 0;
  height: 42px;
  margin: 0;
  padding: 10px 14px;
  font-family: var(--ucn-font-sans);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .01em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color .15s ease, transform .15s ease;
}
body.woocommerce-shop ul.products li.product .uc-actions .uc-btn--primary,
body.post-type-archive-product ul.products li.product .uc-actions .uc-btn--primary,
body.tax-product_cat ul.products li.product .uc-actions .uc-btn--primary {
  background: var(--ucn-brand-500);
  color: #fff;
}
body.woocommerce-shop ul.products li.product .uc-actions .uc-btn--primary:hover,
body.post-type-archive-product ul.products li.product .uc-actions .uc-btn--primary:hover,
body.tax-product_cat ul.products li.product .uc-actions .uc-btn--primary:hover {
  background: var(--ucn-brand-700);
}

/* Icono del carrito ~14px */
body.woocommerce-shop ul.products li.product .uc-actions .uc-btn .uc-btn__icon,
body.post-type-archive-product ul.products li.product .uc-actions .uc-btn .uc-btn__icon,
body.tax-product_cat ul.products li.product .uc-actions .uc-btn .uc-btn__icon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}
/* Etiqueta "Añadir" */
body.woocommerce-shop ul.products li.product .uc-actions .uc-btn .uc-btn__label,
body.post-type-archive-product ul.products li.product .uc-actions .uc-btn .uc-btn__label,
body.tax-product_cat ul.products li.product .uc-actions .uc-btn .uc-btn__label {
  display: block;
  font-weight: 600;
}
/* Separador "·" entre etiqueta y precio */
body.woocommerce-shop ul.products li.product .uc-actions .uc-btn .uc-btn__sep,
body.post-type-archive-product ul.products li.product .uc-actions .uc-btn .uc-btn__sep,
body.tax-product_cat ul.products li.product .uc-actions .uc-btn .uc-btn__sep {
  margin: 0 2px;
  opacity: .7;
}
/* Precio dentro del botón (peso 700) */
body.woocommerce-shop ul.products li.product .uc-actions .uc-btn .uc-btn__price,
body.post-type-archive-product ul.products li.product .uc-actions .uc-btn .uc-btn__price,
body.tax-product_cat ul.products li.product .uc-actions .uc-btn .uc-btn__price {
  font-weight: 700;
}
/* El importe Woo dentro del precio hereda el blanco del botón */
body.woocommerce-shop ul.products li.product .uc-actions .uc-btn .uc-btn__price .woocommerce-Price-amount,
body.post-type-archive-product ul.products li.product .uc-actions .uc-btn .uc-btn__price .woocommerce-Price-amount,
body.tax-product_cat ul.products li.product .uc-actions .uc-btn .uc-btn__price .woocommerce-Price-amount {
  color: #fff;
}

/* ---- 9b) Botón deshabilitado  —  .uc-btn--disabled (Agotado) ---- */
body.woocommerce-shop ul.products li.product .uc-actions .uc-btn--disabled,
body.post-type-archive-product ul.products li.product .uc-actions .uc-btn--disabled,
body.tax-product_cat ul.products li.product .uc-actions .uc-btn--disabled,
body.woocommerce-shop ul.products li.product .uc-actions button.uc-btn[disabled],
body.post-type-archive-product ul.products li.product .uc-actions button.uc-btn[disabled],
body.tax-product_cat ul.products li.product .uc-actions button.uc-btn[disabled] {
  background: var(--ucn-neutral-200);          /* gris fondo */
  color: var(--ucn-neutral-500);               /* gris texto */
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}

/* ---- 9c) Compartir  —  .uc-share  (cuadrado 42×42, hover marca) ---- */
body.woocommerce-shop ul.products li.product .uc-actions .uc-share,
body.post-type-archive-product ul.products li.product .uc-actions .uc-share,
body.tax-product_cat ul.products li.product .uc-actions .uc-share {
  box-sizing: border-box;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #0f172a;                      /* tinta texto */
  border: 1px solid var(--ucn-gray-300);       /* ~#cbd5e1 */
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
body.woocommerce-shop ul.products li.product .uc-actions .uc-share:hover,
body.post-type-archive-product ul.products li.product .uc-actions .uc-share:hover,
body.tax-product_cat ul.products li.product .uc-actions .uc-share:hover {
  background: var(--ucn-brand-500);
  border-color: var(--ucn-brand-500);
  color: #fff;
  transform: translateY(-1px);
}
body.woocommerce-shop ul.products li.product .uc-actions .uc-share svg,
body.post-type-archive-product ul.products li.product .uc-actions .uc-share svg,
body.tax-product_cat ul.products li.product .uc-actions .uc-share svg {
  display: block;
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================================================
   10) GALERÍA (mejora JS)  —  .uc-imgstack / .uc-dots / .uc-dot
   El JS añade el stack de imágenes y los puntos cuando hay >1.
   ============================================================ */
.uc-imgstack { cursor: grab; }
.uc-imgstack:active { cursor: grabbing; }

body.woocommerce-shop ul.products li.product .astra-shop-thumbnail-wrap .uc-imgstack,
body.post-type-archive-product ul.products li.product .astra-shop-thumbnail-wrap .uc-imgstack,
body.tax-product_cat ul.products li.product .astra-shop-thumbnail-wrap .uc-imgstack {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}
body.woocommerce-shop ul.products li.product .astra-shop-thumbnail-wrap .uc-imgstack img,
body.post-type-archive-product ul.products li.product .astra-shop-thumbnail-wrap .uc-imgstack img,
body.tax-product_cat ul.products li.product .astra-shop-thumbnail-wrap .uc-imgstack img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 16px;
  box-sizing: border-box;
  opacity: 0;
  transition: opacity 200ms ease-in-out;
}
body.woocommerce-shop ul.products li.product .astra-shop-thumbnail-wrap .uc-imgstack img.is-active,
body.post-type-archive-product ul.products li.product .astra-shop-thumbnail-wrap .uc-imgstack img.is-active,
body.tax-product_cat ul.products li.product .astra-shop-thumbnail-wrap .uc-imgstack img.is-active {
  opacity: 1;
}

/* --- FIX HOVER GALERÍA (2026-06-12) ---------------------------------------
   Cuando el JS monta el stack de imágenes marca el contenedor con .uc-has-stack.
   Hay que OCULTAR la <img> ORIGINAL de WooCommerce que queda DEBAJO del stack;
   si no, la imagen 1 se transparenta a través del ciclo y el cambio de imagen al
   pasar el ratón "no se ve" (parece que no funciona). Esta regla se perdió en el
   rediseño premium del 2026-06-10 -> causa raíz del fallo reportado. Sólo aplica
   cuando hay stack (>=2 imágenes); los productos de 1 sola imagen no se tocan. */
body.woocommerce-shop ul.products li.product .astra-shop-thumbnail-wrap.uc-has-stack > a > img,
body.post-type-archive-product ul.products li.product .astra-shop-thumbnail-wrap.uc-has-stack > a > img,
body.tax-product_cat ul.products li.product .astra-shop-thumbnail-wrap.uc-has-stack > a > img,
body.woocommerce-shop ul.products li.product .astra-shop-thumbnail-wrap.uc-has-stack > img,
body.post-type-archive-product ul.products li.product .astra-shop-thumbnail-wrap.uc-has-stack > img,
body.tax-product_cat ul.products li.product .astra-shop-thumbnail-wrap.uc-has-stack > img {
  opacity: 0;
}

/* Contenedor de puntos, abajo centrado */
body.woocommerce-shop ul.products li.product .astra-shop-thumbnail-wrap .uc-dots,
body.post-type-archive-product ul.products li.product .astra-shop-thumbnail-wrap .uc-dots,
body.tax-product_cat ul.products li.product .astra-shop-thumbnail-wrap .uc-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  z-index: 4;
  pointer-events: auto;
}
body.woocommerce-shop ul.products li.product .astra-shop-thumbnail-wrap .uc-dot,
body.post-type-archive-product ul.products li.product .astra-shop-thumbnail-wrap .uc-dot,
body.tax-product_cat ul.products li.product .astra-shop-thumbnail-wrap .uc-dot {
  appearance: none;
  -webkit-appearance: none;
  display: inline-block;
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  min-width: 6px;
  min-height: 6px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--ucn-neutral-300);
  box-shadow: 0 0 0 1px rgba(15, 23, 42, .06);
  cursor: pointer;
  transition: background-color 160ms ease, transform 160ms ease;
}
body.woocommerce-shop ul.products li.product .astra-shop-thumbnail-wrap .uc-dot:hover,
body.post-type-archive-product ul.products li.product .astra-shop-thumbnail-wrap .uc-dot:hover,
body.tax-product_cat ul.products li.product .astra-shop-thumbnail-wrap .uc-dot:hover {
  background: var(--ucn-neutral-400);
  transform: scale(1.15);
}
body.woocommerce-shop ul.products li.product .astra-shop-thumbnail-wrap .uc-dot.is-active,
body.post-type-archive-product ul.products li.product .astra-shop-thumbnail-wrap .uc-dot.is-active,
body.tax-product_cat ul.products li.product .astra-shop-thumbnail-wrap .uc-dot.is-active {
  background: var(--ucn-brand-500);
  transform: scale(1.2);
}
body.woocommerce-shop ul.products li.product .astra-shop-thumbnail-wrap .uc-dot:focus-visible,
body.post-type-archive-product ul.products li.product .astra-shop-thumbnail-wrap .uc-dot:focus-visible,
body.tax-product_cat ul.products li.product .astra-shop-thumbnail-wrap .uc-dot:focus-visible {
  outline: 2px solid var(--ucn-brand-500);
  outline-offset: 2px;
}

/* ============================================================
   11) RESPONSIVE
   ============================================================ */

/* ---- Tablet: 3 columnas en el rango medio ---- */
@media (min-width: 768.02px) and (max-width: 1023.98px) {
  body.woocommerce-shop ul.products,
  body.post-type-archive-product ul.products,
  body.tax-product_cat ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }
}

/* ---- ≤768: 2 columnas / gap 10px (ground truth móvil) ---- */
@media (max-width: 768px) {
  body.woocommerce-shop ul.products,
  body.post-type-archive-product ul.products,
  body.tax-product_cat ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  /* Resumen un poco más ajustado */
  body.woocommerce-shop ul.products li.product .astra-shop-summary-wrap,
  body.post-type-archive-product ul.products li.product .astra-shop-summary-wrap,
  body.tax-product_cat ul.products li.product .astra-shop-summary-wrap {
    padding: 10px;
    gap: 4px;
  }

  /* Título 13px (ground truth móvil) */
  body.woocommerce-shop ul.products li.product h2.woocommerce-loop-product__title,
  body.post-type-archive-product ul.products li.product h2.woocommerce-loop-product__title,
  body.tax-product_cat ul.products li.product h2.woocommerce-loop-product__title {
    font-size: 13px;
    line-height: 1.35;                 /* 17.55px del ground truth */
    min-height: 33.8px;
    max-height: 50.7px;
  }

  /* Botón móvil: 14/600, padding 12px 10px, alto 44 */
  body.woocommerce-shop ul.products li.product .uc-actions .uc-btn,
  body.post-type-archive-product ul.products li.product .uc-actions .uc-btn,
  body.tax-product_cat ul.products li.product .uc-actions .uc-btn {
    height: 44px;
    padding: 12px 10px;
    font-size: 14px;
    line-height: 1.2;                  /* 16.8px del ground truth */
    letter-spacing: .01em;
  }

  /* Móvil: solo icono + precio dentro del botón */
  body.woocommerce-shop ul.products li.product .uc-actions .uc-btn .uc-btn__label,
  body.post-type-archive-product ul.products li.product .uc-actions .uc-btn .uc-btn__label,
  body.tax-product_cat ul.products li.product .uc-actions .uc-btn .uc-btn__label,
  body.woocommerce-shop ul.products li.product .uc-actions .uc-btn .uc-btn__sep,
  body.post-type-archive-product ul.products li.product .uc-actions .uc-btn .uc-btn__sep,
  body.tax-product_cat ul.products li.product .uc-actions .uc-btn .uc-btn__sep {
    display: none;
  }
  body.woocommerce-shop ul.products li.product .uc-actions .uc-btn .uc-btn__price,
  body.post-type-archive-product ul.products li.product .uc-actions .uc-btn .uc-btn__price,
  body.tax-product_cat ul.products li.product .uc-actions .uc-btn .uc-btn__price {
    display: block;
    font-size: 14px;
    font-weight: 700;
  }
}

/* ---- ≤480: título a 3 líneas para rellenar tarjeta estrecha ---- */
@media (max-width: 480px) {
  body.woocommerce-shop ul.products li.product h2.woocommerce-loop-product__title,
  body.post-type-archive-product ul.products li.product h2.woocommerce-loop-product__title,
  body.tax-product_cat ul.products li.product h2.woocommerce-loop-product__title {
    -webkit-line-clamp: 3;
    font-size: 13px;
    line-height: 1.3;
  }
}

/* ============================================================
   CABECERA DE TIENDA COMPACTA (2026-06-05)
   - Oculta el H1 "Repuestos" (redundante con breadcrumb); se CONSERVA en el
     DOM para SEO (sr-only), no se elimina.
   - Breadcrumb arriba del todo con margen minimo.
   - Reduce al maximo el hueco superior del contenido.
   ============================================================ */
body.woocommerce-shop .woocommerce-products-header__title,
body.post-type-archive-product .woocommerce-products-header__title,
body.tax-product_cat .woocommerce-products-header__title {
  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;
}
body.woocommerce-shop .woocommerce-products-header,
body.post-type-archive-product .woocommerce-products-header,
body.tax-product_cat .woocommerce-products-header {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}
body.woocommerce-shop .woocommerce-breadcrumb,
body.post-type-archive-product .woocommerce-breadcrumb,
body.tax-product_cat .woocommerce-breadcrumb {
  margin: 0 0 8px !important;
  padding: 0 !important;
  font-size: 13px;
}
body.woocommerce-shop #content.site-content,
body.post-type-archive-product #content.site-content,
body.tax-product_cat #content.site-content,
body.woocommerce-shop .ast-container,
body.post-type-archive-product .ast-container,
body.tax-product_cat .ast-container,
body.woocommerce-shop #primary,
body.post-type-archive-product #primary,
body.tax-product_cat #primary {
  padding-top: 4px !important;
  margin-top: 0 !important;
}

/* ===== SCROLL INFINITO (sustituye a la paginacion) ===== */
.woocommerce-pagination[hidden] { display: none !important; }
.uc-inf-sentinel { width: 100%; height: 1px; }
.uc-inf-loader {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 0;
  padding: 0;
  opacity: 0;
  overflow: hidden;
  transition: opacity .2s ease;
}
.uc-inf-loader.is-loading {
  opacity: 1;
  height: auto;
  padding: 28px 0 8px;
}
.uc-inf-spinner {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid var(--ucn-brand-100, #f1d6da);
  border-top-color: var(--ucn-brand-500, #C8102E);
  animation: uc-inf-spin .7s linear infinite;
}
@keyframes uc-inf-spin { to { transform: rotate(360deg); } }

/* ===== FIX RESPONSIVE MÓVIL (2026-06-06) ===== */
/* Retirar la barra de filtros LEGACY "ucnv2" (sustituida por .uc-filterbar; sin fuente
   localizable, se genera por cruft de Autoptimize) — el filtro real es .uc-filterbar. */
.ucnv2-toolbar,
.ucnv2-drawer,
.ucnv2-overlay,
.ucnv2-backdrop,
.ucnv2-btn-filter { display: none !important; }

/* Gutter lateral de la tienda más ajustado en móvil (antes ~40px desperdiciados a cada lado;
   = site-content 12 + ast-container 12 + ast-woocommerce-container 16). Lo bajamos a ~20px
   total para tarjetas más anchas, manteniendo aire (no pegado al borde). */
@media (max-width: 600px) {
  body.woocommerce-shop .ast-woocommerce-container,
  body.post-type-archive-product .ast-woocommerce-container,
  body.tax-product_cat .ast-woocommerce-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  body.woocommerce-shop .ast-container,
  body.post-type-archive-product .ast-container,
  body.tax-product_cat .ast-container {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

/* Tarjeta estrecha: que quepan botón "Añadir" + compartir sin recortarse */
@media (max-width: 768px) {
  body.woocommerce-shop ul.products li.product .astra-shop-summary-wrap,
  body.post-type-archive-product ul.products li.product .astra-shop-summary-wrap,
  body.tax-product_cat ul.products li.product .astra-shop-summary-wrap {
    padding: 10px !important;
  }
  body.woocommerce-shop ul.products li.product .uc-actions,
  body.post-type-archive-product ul.products li.product .uc-actions,
  body.tax-product_cat ul.products li.product .uc-actions {
    padding-left: 0 !important;
    padding-right: 0 !important;
    gap: 6px;
  }
  body.woocommerce-shop ul.products li.product .uc-actions .uc-btn,
  body.post-type-archive-product ul.products li.product .uc-actions .uc-btn,
  body.tax-product_cat ul.products li.product .uc-actions .uc-btn {
    min-width: 0 !important;
    flex: 1 1 0 !important; /* fuerza el encogido: Astra/Woo lo pisaba a flex:none */
  }
  body.woocommerce-shop ul.products li.product .uc-actions .uc-share,
  body.post-type-archive-product ul.products li.product .uc-actions .uc-share,
  body.tax-product_cat ul.products li.product .uc-actions .uc-share {
    flex: 0 0 38px;
    width: 38px;
  }
}

/* ====== TIENDA: ANCHO REAL + GRID FLUIDO EN ESCRITORIO (2026-06-12) ==========
   Astra capa el contenedor (.ast-container) a min(100%,1240px) con una regla de
   prioridad altísima (no se puede vencer por especificidad ni desde este archivo).
   En lugar de pelear esa regla, sacamos el bloque de catálogo (filtro + rejilla +
   loader) del contenedor con un "break-out" centrado al viewport. Así la página
   APROVECHA el ancho real al ampliar la ventana (lo pedido: "un poco más ancho" y
   "mucho más responsive al reducir/ampliar"), y la barra de filtros queda alineada
   con la rejilla porque movemos el padre común (.ast-woocommerce-container).
   La rejilla pasa a auto-fill: 4 columnas en portátiles, 5 en monitores grandes,
   3 al estrechar — transición suave, sin saltos. Idéntico en tienda y categorías. */
/* Técnica de "full-bleed" robusta (centrada al VIEWPORT en cualquier ancho):
   position:relative + left:50% + margin-left:-mitad-del-ancho. NO usar
   transform:translateX(-50%) (usa el ancho del elemento, no del viewport, y se
   descentra en tablet). Se aplica al padre común .ast-woocommerce-container para que
   filtro + rejilla + loader queden alineados. Aprovecha el MÁXIMO ancho en cada px. */

/* ESCRITORIO >=1025: full-bleed hasta 1760px. width 96vw + max-width 1760px (NO se usa
   la funcion min() en width: Autoptimize la minifica mal y descarta la regla entera).
   Centrado con margin-left 50% + translateX -50% (el contenedor padre esta centrado). */
@media (min-width:1025px){
  body.woocommerce-shop .ast-woocommerce-container,
  body.post-type-archive-product .ast-woocommerce-container,
  body.tax-product_cat .ast-woocommerce-container{
    width: 96vw !important;
    max-width: 1760px !important;
    margin-left: 50% !important;
    margin-right: 0 !important;
    transform: translateX(-50%) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }
  /* Rejilla fluida: fichas un poco más anchas; 4 col en portátil, 5 en monitor grande.
     max-width:none anula un tope (1400px) que Astra impone a ul.products en CATEGORÍA
     (no en tienda) y que dejaba la rejilla sin llenar -> así tienda y categoría iguales. */
  body.woocommerce-shop ul.products,
  body.post-type-archive-product ul.products,
  body.tax-product_cat ul.products{
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 18px !important;
    max-width: none !important;
    width: 100% !important;
  }
}

/* --- TABLET 768-1024: full-bleed 96vw, 3 columnas más anchas --- */
@media (min-width:768.02px) and (max-width:1024.98px){
  body.woocommerce-shop .ast-woocommerce-container,
  body.post-type-archive-product .ast-woocommerce-container,
  body.tax-product_cat .ast-woocommerce-container{
    width: 96vw !important;
    max-width: none !important;
    position: relative !important;
    left: 50% !important;
    right: auto !important;
    margin-left: -48vw !important;
    transform: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }
  body.woocommerce-shop ul.products,
  body.post-type-archive-product ul.products,
  body.tax-product_cat ul.products{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
}

/* --- MÓVIL <=768: full-bleed 95vw (margen seguro frente a scrollbar), 2 columnas más anchas --- */
@media (max-width:768px){
  body.woocommerce-shop .ast-woocommerce-container,
  body.post-type-archive-product .ast-woocommerce-container,
  body.tax-product_cat .ast-woocommerce-container{
    width: 95vw !important;
    max-width: none !important;
    position: relative !important;
    left: 50% !important;
    right: auto !important;
    margin-left: -47.5vw !important;
    transform: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }
  body.woocommerce-shop ul.products,
  body.post-type-archive-product ul.products,
  body.tax-product_cat ul.products{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}

/* ====== Boton compartir: cuadrado 42, relleno solido + estado copiado (2026-06-06) ====== */
body.woocommerce-shop ul.products li.product .uc-actions .uc-share,
body.post-type-archive-product ul.products li.product .uc-actions .uc-share,
body.tax-product_cat ul.products li.product .uc-actions .uc-share{ flex:0 0 42px !important; width:42px !important; height:42px !important; background:var(--ucn-gray-100) !important; color:var(--ucn-brand-500) !important; border-color:var(--ucn-gray-300) !important; }
body.woocommerce-shop ul.products li.product .uc-actions .uc-share:hover,
body.post-type-archive-product ul.products li.product .uc-actions .uc-share:hover,
body.tax-product_cat ul.products li.product .uc-actions .uc-share:hover{ background:var(--ucn-brand-500) !important; border-color:var(--ucn-brand-500) !important; color:#fff !important; }
body.woocommerce-shop ul.products li.product .uc-actions .uc-share.uc-share--copied,
body.post-type-archive-product ul.products li.product .uc-actions .uc-share.uc-share--copied,
body.tax-product_cat ul.products li.product .uc-actions .uc-share.uc-share--copied{ background:#16a34a !important; border-color:#16a34a !important; color:#fff !important; }

/* ============================================================
   12) REDISEÑO PREMIUM DE TARJETA (2026-06-10)
   Tarjeta muy redondeada + sombra suave + hover elegante;
   badge reacondicionado = SOLO el logo ♻ (más grande);
   tira "AGOTADO" diagonal en productos sin stock. Fuente única.
   ============================================================ */
:root{ --uc-card-radius:18px; }

/* --- Tarjeta premium: redondeada, borde sutil, sombra, hover --- */
body.woocommerce-shop ul.products li.product,
body.post-type-archive-product ul.products li.product,
body.tax-product_cat ul.products li.product{
  border-radius:var(--uc-card-radius);
  border:1px solid var(--ucn-gray-200,#eef0f3);
  box-shadow:0 1px 2px rgba(15,23,42,.04), 0 10px 26px -20px rgba(15,23,42,.22);
  overflow:hidden;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
body.woocommerce-shop ul.products li.product:hover,
body.post-type-archive-product ul.products li.product:hover,
body.tax-product_cat ul.products li.product:hover{
  transform:translateY(-4px);
  box-shadow:0 2px 6px rgba(15,23,42,.06), 0 28px 52px -28px rgba(200,16,46,.28);
  border-color:#f7d2d8;
}
/* Marco de imagen redondeado + zoom suave al hover --- */
body.woocommerce-shop ul.products li.product .astra-shop-thumbnail-wrap,
body.post-type-archive-product ul.products li.product .astra-shop-thumbnail-wrap,
body.tax-product_cat ul.products li.product .astra-shop-thumbnail-wrap{
  border-radius:14px;
  overflow:hidden;
  background:#f8fafc;
  position:relative;
}
body.woocommerce-shop ul.products li.product .astra-shop-thumbnail-wrap img,
body.post-type-archive-product ul.products li.product .astra-shop-thumbnail-wrap img,
body.tax-product_cat ul.products li.product .astra-shop-thumbnail-wrap img{ transition:transform .35s ease; }
body.woocommerce-shop ul.products li.product:hover .astra-shop-thumbnail-wrap img,
body.post-type-archive-product ul.products li.product:hover .astra-shop-thumbnail-wrap img,
body.tax-product_cat ul.products li.product:hover .astra-shop-thumbnail-wrap img{ transform:scale(1.04); }

/* --- Badge reacondicionado: SOLO el logo ♻, redondo y un poco más grande --- */
body.woocommerce-shop ul.products li.product .uc-badge--estado.uc-badge--icononly,
body.post-type-archive-product ul.products li.product .uc-badge--estado.uc-badge--icononly,
body.tax-product_cat ul.products li.product .uc-badge--estado.uc-badge--icononly{
  width:36px; height:36px; min-width:36px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:20px; line-height:1;
  border-radius:999px;
  background:#16a34a;            /* reciclado en VERDE para que se vea mejor */
  color:#fff;
  box-shadow:0 3px 10px -2px rgba(22,101,52,.40);
  border:1px solid rgba(22,163,74,.65);
}

/* --- TIRA "AGOTADO" diagonal (esquina sup. derecha) en productos sin stock --- */
body.woocommerce-shop ul.products li.product.outofstock .astra-shop-thumbnail-wrap::before,
body.post-type-archive-product ul.products li.product.outofstock .astra-shop-thumbnail-wrap::before,
body.tax-product_cat ul.products li.product.outofstock .astra-shop-thumbnail-wrap::before{
  content:"AGOTADO";
  position:absolute; top:18px; right:-44px;
  width:172px; padding:7px 0;
  transform:rotate(45deg);
  background:linear-gradient(135deg,#C8102E,#8f0b1f);
  color:#fff; text-align:center;
  font-weight:800; font-size:11.5px; letter-spacing:.14em;
  box-shadow:0 6px 16px -6px rgba(0,0,0,.45);
  z-index:6; pointer-events:none;
}
/* [UC-FIX 2026-06-15] (antes: imagen atenuada en agotado; retirado por peticion) */
body.woocommerce-shop ul.products li.product.outofstock .astra-shop-thumbnail-wrap img,
body.post-type-archive-product ul.products li.product.outofstock .astra-shop-thumbnail-wrap img,
body.tax-product_cat ul.products li.product.outofstock .astra-shop-thumbnail-wrap img{ filter:none; } /* [UC-FIX 2026-06-15] sin atenuado: agotado se ve igual que el resto */
/* Quitar el "AGOTADO" centrado nativo (Astra/Woo) -> solo nuestra tira diagonal */
body.woocommerce-shop ul.products li.product.outofstock .astra-shop-thumbnail-wrap::after,
body.post-type-archive-product ul.products li.product.outofstock .astra-shop-thumbnail-wrap::after,
body.tax-product_cat ul.products li.product.outofstock .astra-shop-thumbnail-wrap::after{ content:none !important; display:none !important; }
/* La píldora 'Agotado' antigua se sustituye por la tira diagonal */
body.woocommerce-shop ul.products li.product .uc-badge--agotado,
body.post-type-archive-product ul.products li.product .uc-badge--agotado,
body.tax-product_cat ul.products li.product .uc-badge--agotado{ display:none; }

/* --- FIX botón: en escritorio mostrar "Añadir · precio" (la etiqueta/precio se colapsaban a ~0) --- */
@media (min-width:768.02px){
  /* el botón crece/encoge para que el botón compartir (42px) quepa dentro de la tarjeta */
  body.woocommerce-shop ul.products li.product .uc-actions .uc-btn,
  body.post-type-archive-product ul.products li.product .uc-actions .uc-btn,
  body.tax-product_cat ul.products li.product .uc-actions .uc-btn{ overflow:visible; flex:1 1 0 !important; min-width:0 !important; }
  /* la fila de acciones no debe desbordar la tarjeta */
  body.woocommerce-shop ul.products li.product .uc-actions,
  body.post-type-archive-product ul.products li.product .uc-actions,
  body.tax-product_cat ul.products li.product .uc-actions{ flex-wrap:nowrap; gap:8px; }
  body.woocommerce-shop ul.products li.product .uc-actions .uc-btn .uc-btn__label,
  body.post-type-archive-product ul.products li.product .uc-actions .uc-btn .uc-btn__label,
  body.tax-product_cat ul.products li.product .uc-actions .uc-btn .uc-btn__label,
  body.woocommerce-shop ul.products li.product .uc-actions .uc-btn .uc-btn__sep,
  body.post-type-archive-product ul.products li.product .uc-actions .uc-btn .uc-btn__sep,
  body.tax-product_cat ul.products li.product .uc-actions .uc-btn .uc-btn__sep,
  body.woocommerce-shop ul.products li.product .uc-actions .uc-btn .uc-btn__price,
  body.post-type-archive-product ul.products li.product .uc-actions .uc-btn .uc-btn__price,
  body.tax-product_cat ul.products li.product .uc-actions .uc-btn .uc-btn__price{
    flex:0 0 auto; width:auto; min-width:max-content;
    font-size:14px; line-height:1.2;            /* el botón tenía font-size:0 -> el texto no se veía */
  }
}

/* ============================================================================

/* ============================================================================

/* ============================================================================
   UC-GALLERY-HARDEN  —  ⛔ NO BORRAR (galería hover de tarjetas de producto)
   La acción "ver TODAS las fotos al pasar el ratón sin entrar en la ficha" se
   ha roto VARIAS veces al rediseñar las tarjetas porque se perdía la regla que
   OCULTA la <img> original de WooCommerce bajo el stack de imágenes (lo monta
   product-cards.js y marca el contenedor con .uc-has-stack). Aquí se blinda esa
   regla con !important y selectores amplios para SOBREVIVIR a rediseños/overrides.
   (Sin fondo opaco: así no se tapan los badges/insignias de la tarjeta.)
   Incluye el MINI-SLIDE (.uc-prog) que sustituye a los puntos (.uc-dots).
   Mantener al final del archivo.
   ============================================================================ */
.astra-shop-thumbnail-wrap.uc-has-stack .uc-imgstack img{ opacity:0 !important; transition:opacity 200ms ease-in-out !important; }
.astra-shop-thumbnail-wrap.uc-has-stack .uc-imgstack img.is-active{ opacity:1 !important; }
/* Ocultar la imagen ORIGINAL de Woo sea cual sea el markup (la regla que se pierde) */
.astra-shop-thumbnail-wrap.uc-has-stack > img,
.astra-shop-thumbnail-wrap.uc-has-stack > a > img,
.astra-shop-thumbnail-wrap.uc-has-stack > a > picture img,
.astra-shop-thumbnail-wrap.uc-has-stack > picture img{ opacity:0 !important; }

/* Por si quedara algún .uc-dots de versiones antiguas: ocultarlo (lo sustituye .uc-prog) */
.astra-shop-thumbnail-wrap .uc-dots{ display:none !important; }

/* MINI-SLIDE: barra segmentada de posición (rojo = foto actual, más ancha) */
.astra-shop-thumbnail-wrap.uc-has-stack .uc-prog{
  position:absolute !important; left:50% !important; transform:translateX(-50%) !important;
  bottom:9px !important; z-index:4 !important;
  display:flex !important; align-items:center !important; gap:4px !important;
  padding:4px 7px !important; margin:0 !important; border-radius:999px !important;
  background:rgba(255,255,255,.82) !important;
  box-shadow:0 1px 5px rgba(15,23,42,.16) !important;
  pointer-events:none !important; max-width:80% !important; overflow:hidden !important;
}
.astra-shop-thumbnail-wrap.uc-has-stack .uc-prog__seg{
  display:block !important; flex:0 0 auto !important;
  width:12px !important; height:4px !important; border-radius:999px !important;
  background:var(--ucn-neutral-300, #cbd5e1) !important;
  transition:background-color .2s ease, width .2s ease !important;
}
.astra-shop-thumbnail-wrap.uc-has-stack .uc-prog__seg.is-active{
  width:22px !important;
  background:var(--ucn-brand-500, #C8102E) !important;
}
/* === END UC-GALLERY-HARDEN === */

/* [UC-FIX 2026-06-15] Boton de producto agotado: identico al rojo "Anadir" (uc-btn--primary) pero sin accion */
.uc-btn.uc-btn--soldout{ cursor:not-allowed !important; }