/* ==========================================================================
   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;
}

/* --- Todas las tarjetas del mismo alto, y el botón siempre abajo ---------
   Sin esto, dos productos de la misma fila terminan con el "Añadir al
   carrito" a distinta altura en cuanto uno tiene una línea de más: un
   descuento agrega el globito y la línea de "PVP", y un nombre largo ocupa
   dos renglones en vez de uno.

   La grilla no se toca: Astra (y WooCommerce) ya la arman con grid o con
   flex, y en las dos los ítems se estiran solos a la altura de la fila. Lo
   único que falta es que la tarjeta sepa repartir ese alto.

   El estirado va por `align-self: stretch` y NO por `height: 100%`. Con
   height al 100% pasaban las dos cosas a la vez que se vieron en emtop.uy:
   hueco de más adentro de la tarjeta, y las tarjetas de una fila tocando a
   las de la fila de abajo. El motivo es que WooCommerce le pone
   `margin-bottom: 2.5em` a cada ítem, así que el alto de la fila es
   contenido + 40px; el 100% se mide contra ESO, la tarjeta crece 40px de
   más por dentro y después su propio margen la empuja 40px hacia la fila
   siguiente. Con `stretch` el alto lo decide la grilla, que ya sabe
   descontar el margen.

   En un tema viejo con floats no hay estirado y queda como estaba: no
   empeora. */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	display: flex !important;
	flex-direction: column;
	align-self: stretch;
}

/* Astra mete título, precio y botón adentro de este envoltorio, así que el
   reparto del alto tiene que seguir hacia adentro o el margin-top: auto del
   botón no tiene espacio del que agarrarse.

   El auto del botón NO está acá: va en el margin de la regla del botón, más
   abajo. Puesto acá como regla aparte no servía de nada, porque esa regla
   trae `margin: 0 !important` y, con la misma especificidad y las dos con
   !important, gana la que viene después en el archivo. Es la clase de
   empate que no da ningún error y se mira veinte veces sin verlo. */
.woocommerce ul.products li.product .astra-shop-summary-wrap,
.woocommerce-page ul.products li.product .astra-shop-summary-wrap {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.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;
}

/* --- La fuente la pone el tema --------------------------------------------
   Este plugin pinta sobre el marcado de la tienda de WooCommerce y nunca
   declara una familia propia. Se dice explícitamente porque el botón
   "Añadir al carrito" puede ser un <button>, y los controles de formulario
   no heredan la fuente: traen la del sistema operativo.

   Con !important como el resto del archivo, que existe para ganarle a los
   estilos del tema (Astra). Acá no hay controles de Elementor con los que
   competir: esto es la página de tienda, no un widget. */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price,
.woocommerce ul.products li.product .button,
.woocommerce-page ul.products li.product .button {
	font-family: inherit !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;
}

/* Un producto en oferta muestra DOS precios: el viejo tachado (<del>) y el
   nuevo (<ins>). Cada uno tiene su tamaño y su color propios, que salen de
   Happy Plus › Tienda. El PHP ya resolvió el "vacío = heredá del precio
   normal" antes de imprimir las variables, así que acá no hay var()
   encadenados que adivinar.

   El peso no es configurable y se deja en 400: el tachado tiene que pesar
   menos que el precio que sí hay que pagar, o los dos compiten. */
.woocommerce ul.products li.product .price del,
.woocommerce-page ul.products li.product .price del {
	font-size: var(--hs-price-del-size, .85em) !important;
	color: var(--hs-price-del-color, inherit) !important;
	opacity: var(--hs-price-del-opacity, .6);
	font-weight: 400 !important;
}

.woocommerce ul.products li.product .price ins,
.woocommerce-page ul.products li.product .price ins {
	font-size: var(--hs-price-ins-size, inherit) !important;
	color: var(--hs-price-ins-color, inherit) !important;
	/* WooCommerce usa <ins> para el precio nuevo y el navegador lo
	   subraya por defecto. Eso no es un enlace y confunde. */
	text-decoration: none !important;
}

/* --- El botón ------------------------------------------------------------- */
.woocommerce ul.products li.product .button,
.woocommerce-page ul.products li.product .button {
	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;
	/* El auto de arriba es lo que pega el botón al piso de la tarjeta. Como
	   todas las tarjetas de la fila miden lo mismo, los botones quedan
	   alineados aunque a una le sobre una línea de precio o de título. */
	margin: auto 0 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 {
	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" no se muestra: después de agregar, el que confirma es el
   propio botón, que dice "¡Agregado!" por dos segundos. El script vive en
   Product Carousel (assets/js/agregado.js) y lo encola happy-store.php,
   igual que la hoja de estilos de las tarjetas: una sola copia.

   Se esconde por CSS y no solo sacándolo con JS porque WooCommerce lo
   agrega desde su propio handler del evento `added_to_cart` y el orden
   entre los dos handlers no está garantizado. */
.woocommerce ul.products li.product .added_to_cart,
.woocommerce-page ul.products li.product .added_to_cart {
	display: none !important;
}