/* ==========================================================================
   Los cinco estilos de título y los cinco de carrusel/tarjeta.

   Por qué un archivo aparte y no dentro de card.css o carousel.css: Happy
   Store carga ESTE mismo archivo para pintar la tienda de WooCommerce con
   los mismos estilos. Es la única copia; si estas reglas vivieran en el
   plugin del carrusel y se repitieran allá, a la tercera vez que alguien
   toque un estilo las dos versiones ya no se parecerían.

   Por eso cada regla nombra los dos marcados que existen:
     .lpc-card   → la tarjeta del carrusel (este plugin)
     li.product  → la tarjeta de la tienda (WooCommerce, pintada por Happy Store)

   El acento sale de --lpc-btn-bg, que es el color de marca que el cliente
   ya eligió una vez en Happy Plus > Product Carousel.

   IMPORTANTE: "linea" y "clasico" son los de siempre y **no declaran nada**.
   Son el aspecto que ya tienen los sitios, y tienen que seguir igual.
   ========================================================================== */


/* ==========================================================================
   TÍTULOS
   ========================================================================== */

/* --- 1. Línea al costado (clásico) ----------------------------------------
   El de siempre: texto a la izquierda y una línea que ocupa el resto del
   ancho. Vive en carousel.css y no se toca desde acá. */


/* --- 2. Centrado con subrayado -------------------------------------------- */
.lpc-heading.lpc-t-centrado {
	display: block;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: calc(var(--lpc-heading-size, 1.4em) * .8);
	font-weight: 600;
}

.lpc-heading.lpc-t-centrado::after {
	display: block;
	width: 56px;
	height: 3px;
	margin: 12px auto 0;
	background: var(--lpc-btn-bg, #e8722c);
	flex: none;
}


/* --- 3. Barra lateral ------------------------------------------------------ */
.lpc-heading.lpc-t-barra {
	gap: 12px;
	padding-left: 14px;
	border-left: 5px solid var(--lpc-btn-bg, #e8722c);
	font-weight: 800;
	letter-spacing: -.01em;
}

/* Sin la línea horizontal: la barra ya es el separador. */
.lpc-heading.lpc-t-barra::after {
	display: none;
}


/* --- 4. Bloque de color ---------------------------------------------------- */
.lpc-heading.lpc-t-bloque {
	display: inline-flex;
	padding: 10px 18px;
	border-radius: 999px;
	background: var(--lpc-btn-bg, #e8722c);
	color: var(--lpc-btn-color, #fff);
	font-size: calc(var(--lpc-heading-size, 1.4em) * .85);
	font-weight: 700;
}

.lpc-heading.lpc-t-bloque::after {
	display: none;
}


/* --- 5. Mínimo ------------------------------------------------------------- */
.lpc-heading.lpc-t-minimo {
	text-transform: uppercase;
	letter-spacing: .22em;
	font-size: calc(var(--lpc-heading-size, 1.4em) * .62);
	font-weight: 500;
	opacity: .75;
}

.lpc-heading.lpc-t-minimo::after {
	display: none;
}


/* ==========================================================================
   CARRUSEL Y TARJETAS
   ========================================================================== */

/* --- 1. Clásico ------------------------------------------------------------
   El de siempre: borde fino, esquinas suaves, flechas circulares. Vive en
   card.css y carousel.css; acá no se declara nada. */


/* --- 2. Tarjeta elevada ---------------------------------------------------- */
.lpc-c-elevado .lpc-card,
ul.products.lpc-c-elevado li.product {
	border: 0 !important;
	border-radius: 14px !important;
	background: var(--lpc-card-bg, #fff);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 6px 16px rgba(0, 0, 0, .06);
	transition: box-shadow .2s ease, transform .2s ease;
}

.lpc-c-elevado .lpc-card:hover,
ul.products.lpc-c-elevado li.product:hover {
	box-shadow: 0 2px 6px rgba(0, 0, 0, .10), 0 14px 32px rgba(0, 0, 0, .12);
	transform: translateY(-3px);
}

.lpc-c-elevado .lpc-arrow {
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .14);
}


/* --- 3. Limpio -------------------------------------------------------------
   Sin caja: solo imagen y texto. La foto crece apenas al pasar el mouse,
   que es todo el efecto que necesita. */
.lpc-c-limpio .lpc-card,
ul.products.lpc-c-limpio li.product {
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

.lpc-c-limpio .lpc-thumb,
ul.products.lpc-c-limpio li.product a img {
	overflow: hidden;
	border-radius: 6px;
}

.lpc-c-limpio .lpc-thumb img,
ul.products.lpc-c-limpio li.product a img {
	transition: transform .35s ease;
}

.lpc-c-limpio .lpc-card:hover .lpc-thumb img,
ul.products.lpc-c-limpio li.product:hover a img {
	transform: scale(1.05);
}

.lpc-c-limpio .lpc-body {
	padding-left: 0;
	padding-right: 0;
}

.lpc-c-limpio .lpc-arrow {
	border: 0;
	background: transparent;
	box-shadow: none;
}


/* --- 4. Contorno marcado --------------------------------------------------- */
.lpc-c-contorno .lpc-card,
ul.products.lpc-c-contorno li.product {
	border: 2px solid var(--lpc-btn-bg, #e8722c) !important;
	border-radius: 0 !important;
	background: var(--lpc-card-bg, #fff);
	box-shadow: none !important;
	transition: transform .18s ease, box-shadow .18s ease;
}

.lpc-c-contorno .lpc-card:hover,
ul.products.lpc-c-contorno li.product:hover {
	transform: translate(-3px, -3px);
	box-shadow: 6px 6px 0 var(--lpc-btn-bg, #e8722c);
}

.lpc-c-contorno .lpc-arrow {
	border: 2px solid var(--lpc-btn-bg, #e8722c);
	border-radius: 0;
	background: var(--lpc-card-bg, #fff);
}


/* --- 5. Compacto -----------------------------------------------------------
   Tarjetas pegadas, separadas por una línea fina. Para catálogos largos,
   donde entran más productos por pantalla. */
.lpc-c-compacto .lpc-card,
ul.products.lpc-c-compacto li.product {
	border: 0 !important;
	border-radius: 0 !important;
	border-right: 1px solid var(--lpc-border-color, rgba(0, 0, 0, .10)) !important;
	background: transparent !important;
	box-shadow: none !important;
	padding-right: 10px;
}

.lpc-c-compacto .lpc-body {
	padding: 8px 0 0;
}

.lpc-c-compacto .lpc-title {
	font-size: calc(var(--lpc-title-size, 15px) * .92);
}

.lpc-c-compacto .lpc-arrow {
	width: 30px;
	height: 30px;
	border-radius: 4px;
}