/* ============================================================
   Tarjetas de producto — handoff "Tarjetas de Producto"
   Alta fidelidad: colores, tipografía, espaciados y radios del spec.
   Accent: el handoff propone #1f4fd1 y pide confirmarlo contra el azul
   de marca. Acá se usa el azul real del sitio (#145c9c). Cambiar
   --ca-accent si se prefiere el del prototipo.
   ============================================================ */

:root {
  --ca-accent: #1f4fd1;
  --ca-accent-hover: #1a41ab;
  --ca-accent-soft: #f0f4ff;
  --ca-pagina: #f4f5f7;
  --ca-promo-bg: #ffd60a;
  --ca-promo-tx: #1a1400;
  --ca-texto: #15171c;
  --ca-texto-2: #454a55;
  --ca-texto-3: #5b616e;
  --ca-tachado: #8a909c;
  --ca-borde: #e6e8ec;
  --ca-img-bg: #f6f7f9;
  --ca-descuento: #e0262f;
  --ca-exito: #0f8a4b;
  --ca-stock-bajo: #c2410c;
  --ca-estrella: #f5a400;
  --ca-estrella-base: #d9dce2;
}

/* --- Fuera lo que mostraba el tema al pasar el mouse, y sus duplicados --- */
ul.products li.product .short-description,
ul.products li.product .meta-wrapper,
ul.products li.product .product-actions,
ul.products li.product .product-featured-icons,
ul.products li.product > .product-inner > .product-summary > .price,
ul.products li.product h2.woocommerce-loop-product__title {
  display: none !important;
}

/* --- Fondo de página gris, como en el diseño (catálogo, categorías y home) --- */
body.post-type-archive-product,
body.tax-product_cat,
body.woocommerce-shop,
body.home { background: var(--ca-pagina) !important; }

/* --- Grilla del handoff.
   Va SOLO en catálogo y categorías: en la home y los carruseles de Elementor
   el listado fluye en horizontal y una grilla lo rompe. --- */
body.post-type-archive-product ul.products,
body.tax-product_cat ul.products,
body.woocommerce-shop ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  gap: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;        /* el sitio dibuja un borde gris en este <ul> */
  list-style: none;
}

body.post-type-archive-product ul.products::before,
body.post-type-archive-product ul.products::after,
body.tax-product_cat ul.products::before,
body.tax-product_cat ul.products::after { display: none !important; }

/* --- Tarjeta: misma altura en toda la fila, CTA pegado abajo --- */
ul.products li.product {
  display: flex !important;
}

/* El reset de ancho/márgenes va SOLO en la grilla de catálogo. En los
   carruseles (Swiper/Elementor) el ancho del slide lo fija el JS en línea
   y pisarlo con width:auto hacía las tarjetas gigantes. */
body.post-type-archive-product ul.products li.product,
body.tax-product_cat ul.products li.product,
body.woocommerce-shop ul.products li.product {
  width: auto !important;
  max-width: none !important;
  height: auto !important;     /* ningún alto fijo del tema: la fila la define el contenido */
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  clear: none !important;
}

ul.products li.product .product-inner,
ul.products.product-card-layout-1 li.product .product-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto !important;     /* el tema fuerza height:100%; si el <li> tiene alto fijo, recorta el botón */
  min-height: 100%;
  background: #fff;
  border: 1px solid var(--ca-borde);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: none;
  transform: none !important;
  transition: box-shadow .2s ease;
}

ul.products li.product:hover .product-inner,
ul.products li.product:focus-within .product-inner {
  box-shadow: 0 10px 28px -12px rgba(20, 30, 60, .28);
  transform: none !important;
}

/* La foto va de borde a borde: el tema mete padding:10px en .product-inner
   y la dejaba con un marco. El padding del cuerpo lo pone .ca-card. */
ul.products li.product .product-inner,
ul.products.product-card-layout-1 li.product .product-inner {
  padding: 0 !important;
}

/* Imagen cuadrada, a todo el ancho */
ul.products li.product .product-thumbnail {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  background: var(--ca-img-bg);
}

ul.products li.product .product-thumbnail a { display: block; }

ul.products li.product .product-thumbnail img {
  display: block;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0;
  /* Esquinas superiores redondeadas aunque el navegador no recorte el padre
     (la foto del hover es absolute y Safari a veces la saca del recorte). */
  border-radius: 14px 14px 0 0;
}

ul.products li.product .product-inner { isolation: isolate; }

/* Badge de descuento del tema, restilado al spec */
ul.products li.product .onsale.woocommerce-badge {
  top: 10px !important;
  left: 10px !important;
  right: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  background: var(--ca-descuento) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

/* Cinta amarilla de promo, al pie de la foto. Puede ocupar varias líneas. */
ul.products li.product .ca-promo {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 3;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--ca-promo-bg);
  color: var(--ca-promo-tx);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  text-align: left;
}

/* Píldora AGOTADO centrada, con la foto apagada */
ul.products li.product .ca-agotado {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  transform: translate(-50%, -50%);
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(21, 23, 28, .86);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
}

ul.products li.product.outofstock .product-thumbnail img {
  filter: grayscale(.6) opacity(.75);
}

/* --- Cuerpo --- */
ul.products li.product .product-summary {
  position: relative !important;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 0;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: #fff;
}

ul.products li.product .ca-card {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 8px;
  padding: 12px 14px 14px;
  text-align: left;
}

/* Rating: altura reservada para que todo quede alineado */
ul.products li.product .ca-card-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 16px;
}

ul.products li.product .ca-stars {
  position: relative;
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  color: var(--ca-estrella-base);
  white-space: nowrap;
}

ul.products li.product .ca-stars::before { content: "\2605\2605\2605\2605\2605"; }

ul.products li.product .ca-stars-fill {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  color: var(--ca-estrella);
  white-space: nowrap;
}

ul.products li.product .ca-stars-fill::before { content: "\2605\2605\2605\2605\2605"; }

ul.products li.product .ca-rating-text {
  font-size: 12px;
  line-height: 1;
  color: var(--ca-texto-3);
}

/* Título: siempre dos líneas */
ul.products li.product .ca-card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ca-texto);
  text-decoration: none;
}

ul.products li.product .ca-card-title:hover { color: var(--ca-accent); }

/* Precio */
ul.products li.product .ca-card-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

ul.products li.product .ca-price-now {
  font-size: 23px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--ca-texto);
}

ul.products li.product .ca-price-was {
  font-size: 14px;
  font-weight: 400;
  color: var(--ca-tachado);
  text-decoration: line-through;
}

ul.products li.product .ca-card-save {
  height: 17px;
  font-size: 13px;
  font-weight: 700;
  line-height: 17px;
  color: var(--ca-exito);
}

/* Cuotas */
ul.products li.product .ca-card-cuotas {
  font-size: 13px;
  line-height: 1.3;
  color: var(--ca-texto-2);
  white-space: nowrap;        /* siempre en una línea */
  overflow: hidden;
  text-overflow: ellipsis;
}

ul.products li.product .ca-card-cuotas strong {
  font-weight: 700;
  color: var(--ca-texto);
}

/* Stock bajo */
ul.products li.product .ca-card-stock {
  min-height: 16px;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  color: var(--ca-stock-bajo);
}

/* --- CTA pegado abajo --- */
ul.products li.product .ca-card-foot { margin-top: auto; }

ul.products li.product .ca-cta {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 46px;          /* altura mínima, no fija: el texto nunca queda recortado */
  margin: 0;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}

/* Motta esconde el botón de agregar al carrito en pantallas chicas:
   ul.products li.product a.button.add_to_cart_button { display:none!important }
   El nuestro necesita esas clases para el AJAX de WooCommerce, así que lo
   volvemos a mostrar con una especificidad mayor. */
ul.products li.product a.ca-cta.button.add_to_cart_button,
ul.products li.product a.ca-cta.ca-cta--add.add_to_cart_button {
  display: flex !important;
}

ul.products li.product .ca-cta-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
ul.products li.product .ca-cta-icon { flex: 0 0 auto; }

/* Textos largos en escritorio, cortos en pantallas chicas */
ul.products li.product .ca-solo-mobil { display: none; }

/* --- La tarjeta se adapta a SU ancho, no al de la pantalla.
   Así una columna angosta en escritorio (barra lateral + 4 columnas) y un
   iPhone SE reciben el mismo tratamiento que un celular grande. --- */
ul.products li.product .product-inner { container-type: inline-size; }

@container (max-width: 199px) {
  ul.products li.product .ca-solo-desktop { display: none; }
  ul.products li.product .ca-solo-mobil { display: inline; }
  ul.products li.product .ca-card { gap: 6px; padding: 10px; }
  ul.products li.product .ca-card-title { font-size: 13px; }
  ul.products li.product .ca-price-now { font-size: 19px; }
  ul.products li.product .ca-price-was { font-size: 12px; }
  ul.products li.product .ca-card-cuotas { font-size: 11px; }
  ul.products li.product .ca-rating-text { font-size: 11px; }
  ul.products li.product .ca-rating-avg { display: none; }
  ul.products li.product .ca-cta { min-height: 42px; font-size: 13px; gap: 6px; padding: 0 8px; }
  ul.products li.product .ca-cta-icon { width: 16px; height: 16px; }
  ul.products li.product .ca-promo { font-size: 11px; padding: 5px 8px; }
  /* (el radio de la tarjeta no se puede cambiar desde acá: .product-inner es el contenedor
     de la consulta y las reglas @container no se aplican a sí mismo; queda en 14 px) */
  ul.products li.product .product-thumbnail img { border-radius: 14px 14px 0 0; }
}

ul.products li.product .ca-cta:active { transform: scale(.98); }

ul.products li.product .ca-cta--add {
  background: var(--ca-accent);
  color: #fff !important;
}

ul.products li.product .ca-cta--add:hover,
ul.products li.product .ca-cta--add:focus {
  background: var(--ca-accent-hover);
  color: #fff !important;
}

ul.products li.product .ca-cta--opts {
  background: #fff;
  border: 2px solid var(--ca-accent);
  color: var(--ca-accent) !important;
}

ul.products li.product .ca-cta--opts:hover { background: var(--ca-accent-soft); }

ul.products li.product .ca-cta--out {
  background: #eceef2;
  color: #2b2f38 !important;
}

ul.products li.product .ca-cta--out:hover { background: #e1e4ea; }

/* Estado tras el alta por AJAX */
ul.products li.product .ca-cta.added {
  background: var(--ca-exito) !important;
  color: #fff !important;
}

ul.products li.product .ca-cta.loading { opacity: .75; }

/* WooCommerce agrega "Ver carrito"; no hace falta en la grilla */
ul.products li.product .added_to_cart { display: none !important; }

ul.products li.product :focus-visible,
.ca-category-intro :focus-visible {
  outline: 3px solid var(--ca-accent);
  outline-offset: 3px;
}

/* --- En celular no hay hover: siempre la foto principal --- */
@media (hover: none) {
  ul.products li.product .hover-image { display: none !important; }
  ul.products li.product .product-thumbnail img:not(.hover-image) {
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* Tarjetas angostas (celular, o grillas con barra lateral): texto corto en el botón */
@media (max-width: 900px) {
  ul.products li.product .ca-solo-desktop { display: none; }
  ul.products li.product .ca-solo-mobil { display: inline; }
}

@media (max-width: 600px) {
  body.post-type-archive-product ul.products,
  body.tax-product_cat ul.products,
  body.woocommerce-shop ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 0 12px !important;
    border: 0 !important;
  }
  ul.products li.product .product-inner { border-radius: 12px; }
  ul.products li.product .product-thumbnail img { border-radius: 12px 12px 0 0; }
  ul.products li.product .ca-card { gap: 6px; padding: 10px; }
  ul.products li.product .ca-card-title { font-size: 13px; }
  ul.products li.product .ca-price-now { font-size: 19px; }
  ul.products li.product .ca-price-was { font-size: 12px; }
  ul.products li.product .ca-card-cuotas { font-size: 11px; }
  ul.products li.product .ca-rating-text { font-size: 11px; }
  ul.products li.product .ca-rating-avg { display: none; }   /* en mobile solo "(23)" */
  ul.products li.product .ca-cta { min-height: 44px; font-size: 14px; }
  ul.products li.product .ca-promo { font-size: 11px; padding: 5px 8px; }
}

@media (prefers-reduced-motion: reduce) {
  ul.products li.product .product-inner,
  ul.products li.product .ca-cta { transition: none; }
  ul.products li.product .ca-cta:active { transform: none; }
}