/* ==========================================================================
   Tarjeta de producto. Este archivo no sabe nada de Swiper: solo dibuja
   una tarjeta dentro del ancho que le den, así que sirve igual si algún día
   la tarjeta se usa fuera de un carrusel.

   Los valores salen de variables CSS que LPC_Estilo imprime en :root, así
   el estilo es uno solo para todo el sitio. Los defaults de acá abajo son
   la red por si el <style> no llegó a imprimirse.
   ========================================================================== */
/* --- La fuente la pone el tema, no este plugin -------------------------
   Ningún texto de acá declara una familia propia: todos heredan la del
   sitio. Hay que decirlo explícitamente porque el navegador **no** hereda
   la fuente en los controles de formulario — <button>, <input>, <select>
   traen la del sistema operativo. Sin esto, "Añadir al carrito" sale en
   otra tipografía que el resto de la página y se nota.

   Sin !important y con un solo nivel de especificidad a propósito: los
   controles de tipografía de Elementor escriben sobre
   {{WRAPPER}} .lpc-title, que es más específico, así que si alguien elige
   una fuente ahí, gana. Esto es solo el piso.
   -------------------------------------------------------------------- */
.lpc-title,
.lpc-title a,
.lpc-price,
.lpc-price .woocommerce-Price-amount,
.lpc-rating,
.lpc-card .hl-label,
.lpc-cart .button,
.lpc-sin-stock {
	font-family: inherit;
}

/* --- Card --- */
.lpc-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	background: var(--lpc-card-bg, #fff);
	border: var(--lpc-border-width, 1px) solid var(--lpc-border-color, #eee);
	border-radius: var(--lpc-card-radius, 10px);
	overflow: hidden;
	transition: box-shadow .2s ease, transform .2s ease;
}

.lpc-card:hover {
	box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
	transform: translateY(-2px);
}

.lpc-thumb {
	position: relative;
	display: block;
	line-height: 0;
}

.lpc-thumb .lpc-img,
.lpc-thumb img {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* --- Etiquetas --- */
/* Las pinta Happy Labels; acá solo se ajustan a la card del carrusel. */
.lpc-card .hl-badges {
	position: absolute;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-width: calc(100% - (var(--lpc-badge-offset, 10px) * 2));
	pointer-events: none;
}

.lpc-card .hl-badges--tl {
	top: var(--lpc-badge-offset, 10px);
	left: var(--lpc-badge-offset, 10px);
	align-items: flex-start;
}

.lpc-card .hl-badges--tr {
	top: var(--lpc-badge-offset, 10px);
	right: var(--lpc-badge-offset, 10px);
	align-items: flex-end;
}

.lpc-card .hl-badges--bl {
	bottom: var(--lpc-badge-offset, 10px);
	left: var(--lpc-badge-offset, 10px);
	align-items: flex-start;
}

.lpc-card .hl-badges--br {
	bottom: var(--lpc-badge-offset, 10px);
	right: var(--lpc-badge-offset, 10px);
	align-items: flex-end;
}

/* Los colores llegan inline desde la regla; esto es la forma de la etiqueta.
   El padding, el radio y la tipografía se pueden pisar desde Elementor. */
.lpc-card .hl-label {
	display: inline-block;
	max-width: 100%;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	padding: 5px 9px;
	text-transform: uppercase;
	letter-spacing: .02em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lpc-body {
	display: flex;
	flex-direction: column;
	gap: var(--lpc-body-gap, 8px);
	padding: 14px 14px 16px;
	flex: 1;
	text-align: var(--lpc-align, center);
}

/* --- Título con recorte de líneas y alto reservado --- */
.lpc-title {
	font-size: var(--lpc-title-size, 15px);
	font-weight: var(--lpc-title-weight, 500);
	line-height: var(--lpc-title-lh, 1.35);
	margin: 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--lpc-title-lines, 2);
	line-clamp: var(--lpc-title-lines, 2);
	overflow: hidden;
	text-overflow: ellipsis;
	min-height: calc(var(--lpc-title-lines, 2) * var(--lpc-title-lh, 1.35) * 1em);
}

.lpc-title a {
	color: var(--lpc-title-color, #212e42);
	text-decoration: var(--lpc-title-decoration, none) !important;
}

.lpc-title a:hover {
	text-decoration: var(--lpc-title-decoration, none) !important;
}

.lpc-rating {
	font-size: 13px;
}

.lpc-rating .star-rating {
	margin: 0 auto;
	font-size: 13px;
}

/* El `margin-top: auto` NO va acá.
   Estuvo hasta la 1.7.0 y alineaba abajo el bloque entero de precio, que es
   casi lo mismo salvo cuando no lo es: un producto con descuento suma una
   globito de "-35%" y una línea de "PVP", y entonces su botón quedaba más
   abajo que el de los vecinos. El auto se mudó a .lpc-cart, así el aire que
   sobra se junta ARRIBA del botón y los botones de la fila quedan todos a la
   misma altura, tenga el precio dos líneas o cuatro. */
.lpc-price {
	font-size: var(--lpc-price-size, 16px);
	font-weight: var(--lpc-price-weight, 600);
	color: var(--lpc-price-color, #212e42);
}

/* Un producto en oferta muestra DOS precios: el viejo tachado (<del>) y el
   nuevo (<ins>). Cada uno con su tamaño y su color, que salen de Happy
   Plus › Product Carousel. 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. */
.lpc-price del {
	font-size: var(--lpc-price-del-size, inherit);
	color: var(--lpc-price-del-color, #999);
	font-weight: 400;
	margin-right: 6px;
}

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

/* El botón, pegado abajo de la tarjeta. Las tarjetas ya vienen todas del
   mismo alto (.lpc-slide se estira), así que con esto quedan alineados entre
   sí sin importar cuánto ocupe lo de arriba. */
.lpc-cart {
	margin-top: auto;
	padding-top: 6px;
}

/* Sin botón no hay a qué pegarse, y ahí vuelve a mandar el precio, como
   antes. Si el navegador no entiende :has() se ignora la regla entera y el
   precio queda arriba: se ve distinto, no roto. */
.lpc-body:not(:has(.lpc-cart)) > .lpc-price {
	margin-top: auto;
}

.lpc-cart .button {
	display: inline-block;
	width: 100%;
	text-align: center;
	background: var(--lpc-btn-bg, #e8722c);
	color: var(--lpc-btn-color, #fff);
	border: 0;
	border-radius: var(--lpc-btn-radius, 6px);
	padding: var(--lpc-btn-pad, 9px) 12px;
	font-size: var(--lpc-btn-size, 14px);
	font-weight: 500;
	line-height: 1.3;
	cursor: pointer;
	text-decoration: none !important;
	transition: background-color .15s ease, color .15s ease;
}

.lpc-cart .button:hover {
	background: var(--lpc-btn-bg-hover, #d3661f);
	color: var(--lpc-btn-color-hover, #fff);
	text-decoration: none !important;
}

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

/* Sin stock: WooCommerce no deshabilita el enlace, así que se marca por
   CSS y por aria-disabled en el template. */
.lpc-cart .button.lpc-sin-stock {
	background: var(--lpc-border-color, #eee);
	color: #6b7280;
	cursor: not-allowed;
	pointer-events: none;
}

/* "Ver carrito" no se muestra: después de agregar, el que confirma es el
   propio botón (ver assets/js/agregado.js). 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: sin esta regla puede alcanzar a dibujarse un instante. */
.lpc-cart .added_to_cart {
	display: none;
}

/* ==========================================================================
   El estilo global le gana al del widget

   Los controles de estilo de Elementor escriben la propiedad FINAL sobre
   `.elementor-element-xxx .lpc-…`. Eso es más específico que cualquier
   regla de este archivo, así que apagar el control no alcanza: el CSS que
   Elementor ya generó para esa página sigue sirviéndose hasta que alguien
   lo regenere, y mientras tanto el estilo del panel no se ve.

   Estas reglas cuelgan de `.lpc-estilo-global`, la clase que el render le
   pone a todo carrusel que NO tiene prendido "Personalizar esta
   instancia".

   Van con !important y no por especificidad. El {{WRAPPER}} de Elementor
   no es una clase sino tres —`.elementor-NNN .elementor-element
   .elementor-element-87f7150`—, así que sus reglas arrancan con dos clases
   de ventaja y competir con ellas es una carrera que se pierde. Es seguro
   porque el carrusel que SÍ se personaliza no lleva esta clase: ahí no hay
   ningún !important y manda lo suyo.

   Solo se repiten las propiedades que el panel de Estilo define. El color
   del título y del precio no están ahí, así que se dejan como estén.
   ========================================================================== */
.lpc-carousel.lpc-estilo-global .lpc-card {
	background: var(--lpc-card-bg, #fff) !important;
	border-color: var(--lpc-border-color, #eee) !important;
	border-width: var(--lpc-border-width, 1px) !important;
	border-radius: var(--lpc-card-radius, 10px) !important;
}

.lpc-carousel.lpc-estilo-global .lpc-title {
	/* El recorte solo existe mientras el contenedor siga siendo
	   -webkit-box: si el tema le cambia el display, no hay líneas que
	   contar y el título se corta de cualquier forma. */
	display: -webkit-box !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
	font-size: var(--lpc-title-size, 15px) !important;
	font-weight: var(--lpc-title-weight, 500) !important;
	line-height: var(--lpc-title-lh, 1.35) !important;
	-webkit-line-clamp: var(--lpc-title-lines, 2) !important;
	line-clamp: var(--lpc-title-lines, 2) !important;
	min-height: calc(var(--lpc-title-lines, 2) * var(--lpc-title-lh, 1.35) * 1em) !important;
}

/* El texto visible del título es el <a> de adentro del <h3>, y tanto
   Elementor como el tema le ponen su propio tamaño. Fijarle el tamaño al
   <h3> no alcanza: hay que obligar al enlace a heredarlo.

   Se fuerza `inherit` en vez de repetir las variables a propósito — así
   esto no hay que mantenerlo si mañana cambia lo que define el título. */
.lpc-carousel.lpc-estilo-global .lpc-title a {
	/* Inline a la fuerza. El recorte por líneas cuenta las LÍNEAS del
	   contenedor -webkit-box; si el tema le pone display:block al enlace,
	   adentro hay un solo bloque, no hay líneas que contar, y el texto
	   sobrante lo termina tapando el overflow:hidden en vez de cortarse
	   con puntos suspensivos. */
	display: inline !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;
}

/* Mismo caso en el precio: WooCommerce lo envuelve en un <span
   class="woocommerce-Price-amount">, que es a quien el tema le pone el
   tamaño. El <del> y el <ins> de los productos en oferta quedan afuera, que
   tienen su propio tamaño por diseño. */
.lpc-carousel.lpc-estilo-global .lpc-price > .woocommerce-Price-amount,
.lpc-carousel.lpc-estilo-global .lpc-price > bdi {
	font-size: inherit !important;
	font-weight: inherit !important;
}

.lpc-carousel.lpc-estilo-global .lpc-price {
	font-size: var(--lpc-price-size, 16px) !important;
	font-weight: var(--lpc-price-weight, 600) !important;
}

/* Los dos precios de una oferta, en el camino del estilo global.
   Hacen falta aparte de las reglas de arriba por el marcado: cuando hay
   oferta, el <span class="woocommerce-Price-amount"> deja de ser hijo
   directo de .lpc-price y pasa a estar DENTRO del <del> y del <ins>. Las
   reglas de arriba usan ">" y no lo alcanzan, pero el control de
   tipografía de Elementor sí (apunta con un descendiente), así que sin
   esto el tamaño del panel no se vería en los productos rebajados — justo
   en los que se quiere distinguir. */
.lpc-carousel.lpc-estilo-global .lpc-price del {
	font-size: var(--lpc-price-del-size, inherit) !important;
	color: var(--lpc-price-del-color, #999) !important;
}

.lpc-carousel.lpc-estilo-global .lpc-price ins {
	font-size: var(--lpc-price-ins-size, inherit) !important;
	color: var(--lpc-price-ins-color, inherit) !important;
}

.lpc-carousel.lpc-estilo-global .lpc-price del .woocommerce-Price-amount,
.lpc-carousel.lpc-estilo-global .lpc-price del bdi,
.lpc-carousel.lpc-estilo-global .lpc-price ins .woocommerce-Price-amount,
.lpc-carousel.lpc-estilo-global .lpc-price ins bdi {
	font-size: inherit !important;
	font-weight: inherit !important;
	color: inherit !important;
}

.lpc-carousel.lpc-estilo-global .lpc-cart .button {
	background: var(--lpc-btn-bg, #e8722c) !important;
	color: var(--lpc-btn-color, #fff) !important;
	border-radius: var(--lpc-btn-radius, 6px) !important;
	padding: var(--lpc-btn-pad, 9px) 12px !important;
	font-size: var(--lpc-btn-size, 14px) !important;
}

.lpc-carousel.lpc-estilo-global .lpc-cart .button:hover {
	background: var(--lpc-btn-bg-hover, #d3661f) !important;
	color: var(--lpc-btn-color-hover, #fff) !important;
}

.lpc-carousel.lpc-estilo-global .lpc-body {
	text-align: var(--lpc-align, center) !important;
}