/* ==========================================================================
   Happy Store — estilo de la tarjeta de producto

   Cuelga EXCLUSIVAMENTE del marcado que imprime el tema:

     li.product
       .astra-shop-thumbnail-wrap
         a.woocommerce-loop-product__link > img
         a.ast-on-card-button                  (botón flotante del tema)
       .astra-shop-summary-wrap
         a.ast-loop-product__link > h2.woocommerce-loop-product__title
         span.price
         a.button.add_to_cart_button

   No se reemplaza ni se agrega nada: por eso un producto que llegue por
   AJAX desde otro plugin se ve igual que los demás sin hacer nada
   especial — el estilo no depende de que haya pasado por ningún hook.

   Los !important son deliberados y son el punto del plugin: su único
   trabajo es ganarle al tema. Astra genera sus reglas desde el
   Personalizador con especificidades altas y variables entre versiones;
   competir con eso selector por selector no termina nunca.
   ========================================================================== */

/* --- La tarjeta ----------------------------------------------------------- */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	background: var(--hs-card-bg, #fff) !important;
	border: var(--hs-card-border-w, 1px) solid var(--hs-card-border, #eee) !important;
	border-radius: var(--hs-card-radius, 10px) !important;
	padding: var(--hs-card-pad, 14px) !important;
	text-align: var(--hs-align, center) !important;
	overflow: hidden;
	transition: box-shadow .2s ease, transform .2s ease;
}

.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
	box-shadow: var(--hs-card-shadow, 0 6px 20px rgba(0, 0, 0, .08));
	transform: translateY(-2px);
}

/* --- La imagen ------------------------------------------------------------ */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap img,
.woocommerce-page ul.products li.product .astra-shop-thumbnail-wrap img {
	border-radius: var(--hs-img-radius, 8px) !important;
	width: 100%;
	height: auto;
}

/* El botón flotante que Astra pone sobre la imagen. Se apaga con una
   variable y no borrando la regla, para que todo lo configurable viaje
   por el mismo lugar. */
.woocommerce ul.products li.product .ast-on-card-button,
.woocommerce-page ul.products li.product .ast-on-card-button {
	display: var(--hs-card-button, none) !important;
}

/* --- El título ------------------------------------------------------------
   El largo lo resuelve PHP (ver HS_Titulo): acá no hay recorte por líneas
   ni overflow escondido, justamente para que nunca pueda quedar una línea
   cortada al medio. */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
	font-size: var(--hs-title-size, 15px) !important;
	font-weight: var(--hs-title-weight, 500) !important;
	line-height: 1.35 !important;
	color: var(--hs-title-color, #212e42) !important;
	padding: 0 !important;
	margin: 10px 0 6px !important;
}

.woocommerce ul.products li.product .ast-loop-product__link,
.woocommerce-page ul.products li.product .ast-loop-product__link {
	text-decoration: none !important;
}

/* --- El precio ------------------------------------------------------------ */
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
	font-size: var(--hs-price-size, 16px) !important;
	font-weight: var(--hs-price-weight, 600) !important;
	color: var(--hs-price-color, #212e42) !important;
	/* La separación del precio es lo que le da aire a la tarjeta: arriba
	   lo despega del título, abajo del botón. Configurable porque cambia
	   mucho según el largo de los nombres de cada catálogo. */
	margin: var(--hs-price-top, 15px) 0 var(--hs-price-bottom, 15px) !important;
	display: block;
}

/* El <del> de un producto en oferta se deja más chico y apagado, que es
   lo que se espera de un precio tachado. */
.woocommerce ul.products li.product .price del,
.woocommerce-page ul.products li.product .price del {
	font-size: .85em !important;
	opacity: .6;
	font-weight: 400 !important;
}

.woocommerce ul.products li.product .price ins,
.woocommerce-page ul.products li.product .price ins {
	text-decoration: none !important;
}

/* --- El botón ------------------------------------------------------------- */
.woocommerce ul.products li.product .button,
.woocommerce-page ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart,
.woocommerce-page ul.products li.product .added_to_cart {
	display: inline-block !important;
	width: var(--hs-btn-width, 100%) !important;
	box-sizing: border-box;
	text-align: center !important;
	background: var(--hs-btn-bg, #e8722c) !important;
	color: var(--hs-btn-color, #fff) !important;
	border: 0 !important;
	border-radius: var(--hs-btn-radius, 6px) !important;
	padding: var(--hs-btn-pad, 10px) 12px !important;
	font-size: var(--hs-btn-size, 14px) !important;
	line-height: 1.3 !important;
	margin: 0 !important;
	text-decoration: none !important;
	transition: background-color .15s ease, color .15s ease;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce-page ul.products li.product .button:hover,
.woocommerce ul.products li.product .added_to_cart:hover,
.woocommerce-page ul.products li.product .added_to_cart:hover {
	background: var(--hs-btn-bg-hover, #d3661f) !important;
	color: var(--hs-btn-color-hover, #fff) !important;
}

/* Foco visible: el botón es lo único de la tarjeta que no es un enlace
   común, y sin esto quien navega con teclado no sabe dónde está. */
.woocommerce ul.products li.product .button:focus-visible,
.woocommerce-page ul.products li.product .button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* "Ver carrito" aparece debajo del botón después de agregar: se distingue
   para que no parezca que hay dos botones iguales. */
.woocommerce ul.products li.product .added_to_cart,
.woocommerce-page ul.products li.product .added_to_cart {
	margin-top: 6px !important;
	background: #212e42 !important;
}