/* ==========================================================================
   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-cart .added_to_cart,
.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: #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;
}

.lpc-price {
	font-size: var(--lpc-price-size, 16px);
	font-weight: var(--lpc-price-weight, 600);
	color: #212e42;
	margin-top: auto;
}

.lpc-price del {
	color: #999;
	font-weight: 400;
	margin-right: 6px;
}

.lpc-price ins {
	text-decoration: none;
}

.lpc-cart {
	margin-top: 6px;
}

.lpc-cart .button,
.lpc-cart .added_to_cart {
	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,
.lpc-cart .added_to_cart: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,
.lpc-cart .added_to_cart: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;
}

.lpc-cart .added_to_cart {
	margin-top: 6px;
	background: #212e42;
}

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

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