/* La Comarca — capa de conversión
   Paleta tomada del tema: arena #e4d1b4, crema #f4ece0, negro #000.
   Verde WhatsApp oficial: #25D366. */

:root {
	--lcc-wa: #25d366;
	--lcc-wa-dark: #1da851;
	--lcc-sand: #e4d1b4;
	--lcc-cream: #f4ece0;
	--lcc-ink: #111;
	--lcc-line: rgba(0, 0, 0, 0.12);
}

/* ---------- Botón base ---------- */

.lcc-wa-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55em;
	padding: 0.85em 1.6em;
	border-radius: 999px;
	background: var(--lcc-wa);
	color: #fff !important;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none !important;
	border: 0;
	transition: background 0.15s ease, transform 0.15s ease;
}

.lcc-wa-btn:hover,
.lcc-wa-btn:focus {
	background: var(--lcc-wa-dark);
	color: #fff !important;
	transform: translateY(-1px);
}

.lcc-wa-icon {
	width: 1.25em;
	height: 1.25em;
	flex: 0 0 auto;
}

/* Ficha de producto: debajo de "Añadir al carrito". */
.lcc-wa-btn--product {
	margin-top: 0.9em;
	width: 100%;
	max-width: 22rem;
	font-size: 1.05rem;
}

/* Dentro del formulario de compra (un contenedor flex) el botón quedaba
   centrado en el espacio libre, corrido respecto de "Añadir al carrito".
   Ocupa la fila completa, alineado con el resto de la columna. */
form.cart .lcc-wa-btn--product {
	flex: 1 0 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}

/* En modo "WhatsApp total" es el único botón, así que pesa más. */
.lcc-wa-btn--solo {
	max-width: 26rem;
	padding: 1.05em 1.8em;
	font-size: 1.15rem;
}

.lcc-wa-btn--wide {
	width: 100%;
	margin-top: 1em;
	font-size: 1.05rem;
}

/* Tarjeta del catálogo: discreto, no compite con la foto. */
.lcc-wa-btn--loop {
	margin-top: 0.5em;
	padding: 0.5em 1.1em;
	font-size: 0.85rem;
	background: transparent;
	color: var(--lcc-wa-dark) !important;
	border: 1.5px solid var(--lcc-wa);
}

.lcc-wa-btn--loop:hover,
.lcc-wa-btn--loop:focus {
	background: var(--lcc-wa);
	color: #fff !important;
}

.lcc-wa-note {
	margin-top: 0.6em;
	font-size: 0.85rem;
	opacity: 0.75;
	text-align: center;
}

/* ---------- Botón flotante ---------- */

.lcc-float {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 9998;
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.8em 1.2em;
	border-radius: 999px;
	background: var(--lcc-wa);
	color: #fff !important;
	font-weight: 700;
	text-decoration: none !important;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
}

.lcc-float:hover,
.lcc-float:focus {
	background: var(--lcc-wa-dark);
	color: #fff !important;
}

/* En móvil se reduce al círculo para no tapar contenido. */
@media (max-width: 600px) {
	.lcc-float-text {
		display: none;
	}

	.lcc-float {
		padding: 0.9em;
	}

	.lcc-float .lcc-wa-icon {
		width: 1.6em;
		height: 1.6em;
	}
}

/* ---------- Barra fija en móvil (ficha de producto) ---------- */

.lcc-sticky-bar {
	display: none;
}

@media (max-width: 782px) {
	.lcc-sticky-bar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9999;
		display: flex;
		align-items: center;
		gap: 0.75rem;
		padding: 0.6rem 0.9rem;
		background: #fff;
		border-top: 1px solid var(--lcc-line);
		box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1);
	}

	.lcc-sticky-info {
		display: flex;
		flex-direction: column;
		min-width: 0;
		line-height: 1.25;
	}

	.lcc-sticky-name {
		font-size: 0.78rem;
		opacity: 0.7;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.lcc-sticky-price {
		font-size: 1.05rem;
		font-weight: 800;
		color: var(--lcc-ink);
	}

	.lcc-wa-btn--bar {
		margin-left: auto;
		flex: 0 0 auto;
		padding: 0.75em 1.2em;
		font-size: 0.95rem;
	}

	/* Con la barra abajo, el botón flotante sube para no solaparse. */
	body.single-product .lcc-float {
		bottom: 78px;
	}
}

/* ---------- Confianza y entrega en la ficha ---------- */

.lcc-trust {
	margin: 1.1em 0;
	padding: 0.9em 1.1em;
	background: var(--lcc-cream);
	border-radius: 10px;
}

.lcc-trust-delivery {
	margin: 0 0 0.5em;
	font-weight: 700;
}

.lcc-trust-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lcc-trust-list li {
	position: relative;
	margin: 0.3em 0;
	padding-left: 1.4em;
	font-size: 0.92rem;
}

.lcc-trust-list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--lcc-wa-dark);
	font-weight: 800;
}

/* ---------- Disponibilidad ---------- */

.lcc-stock {
	margin: 0.4em 0 0.9em;
	font-size: 0.95rem;
	font-weight: 700;
}

.lcc-stock--in {
	color: var(--lcc-wa-dark);
}

.lcc-stock--out {
	color: #b42318;
}

.lcc-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	padding: 0.28em 0.7em;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.lcc-badge--out {
	background: rgba(0, 0, 0, 0.75);
	color: #fff;
}

.lcc-size-help {
	margin: 0.6em 0;
	font-size: 0.88rem;
}

/* Los enlaces heredaban el color arena del tema (#e4d1b4), casi invisible
   sobre blanco (contraste 1,5:1). Este verde oscuro da 5,4:1. */
.lcc-size-help a,
.lcc-stock a {
	color: #0f7a3d !important;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.lcc-size-help a:hover,
.lcc-stock a:hover,
.lcc-size-help a:focus,
.lcc-stock a:focus {
	color: #0a5c2d !important;
}

.lcc-trust a,
.lcc-ship-pending a {
	color: #0f7a3d !important;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* "No aceptamos cambios": es un aviso, no una ventaja, así que sin ✓. */
.lcc-trust-list li.lcc-trust-policy::before {
	content: "!";
	color: #8a5a00;
}

/* Envío a confirmar, debajo del total del carrito y del checkout. */
.lcc-ship-pending td {
	padding-top: 0.6em !important;
	font-size: 0.88rem;
	line-height: 1.45;
	background: var(--lcc-cream);
}

.lcc-ship-pending p {
	margin: 0 0 0.4em;
}

.lcc-ship-pending p:last-child {
	margin-bottom: 0;
}

/* Modo "WhatsApp total": se conservan los selectores de talla y color para el
   mensaje, pero desaparecen el botón de carrito y la cantidad. */
body.lcc-total-mode.single-product form.cart .single_add_to_cart_button,
body.lcc-total-mode.single-product form.cart .quantity {
	display: none !important;
}

/* ---------- Progreso hacia el envío gratis ---------- */

.lcc-ship-bar {
	margin: 0 0 1.2em;
	padding: 0.9em 1.1em;
	background: var(--lcc-sand);
	border-radius: 10px;
}

.lcc-ship-bar p {
	margin: 0 0 0.55em;
	font-size: 0.95rem;
}

.lcc-ship-bar--done {
	background: #d7f5e3;
	font-weight: 700;
}

.lcc-ship-track {
	display: block;
	height: 7px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.14);
	overflow: hidden;
}

.lcc-ship-fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--lcc-wa-dark);
	transition: width 0.3s ease;
}

/* ---------- Checkout y página de gracias ---------- */

.lcc-checkout-note {
	margin-top: 0.8em;
	font-size: 0.86rem;
	text-align: center;
	opacity: 0.8;
}

.lcc-confirm {
	margin: 0 0 1.8em;
	padding: 1.3em;
	background: var(--lcc-cream);
	border: 2px solid var(--lcc-sand);
	border-radius: 12px;
	text-align: center;
}

.lcc-confirm-title {
	margin: 0 0 0.4em;
	font-size: 1.15rem;
	font-weight: 800;
}

.lcc-confirm-text {
	margin: 0;
	font-size: 0.95rem;
	opacity: 0.85;
}

/* ---------- Catálogo: producto completo dentro de un cuadro parejo ----------
   Las miniaturas se generan sin recortar (woocommerce_thumbnail_cropping =
   uncropped) porque la mayoría de los originales son verticales y el recorte
   cuadrado cortaba el producto: a Durags le quedaba media prenda. El cuadro
   mantiene la grilla alineada y `contain` muestra la foto entera sobre blanco. */

ul.products li.product img {
	aspect-ratio: 1 / 1;
	width: 100%;
	height: auto;
	object-fit: contain;
	object-position: center;
	background: #fff;
}

/* ---------- Catálogo: botones a la misma altura en toda la fila ----------
   Cuando el nombre ocupa dos líneas, los botones de esa tarjeta quedaban más
   abajo que los de sus vecinas. La tarjeta pasa a ser una columna flexible y
   el botón de compra se empuja al fondo; como las celdas de la grilla ya se
   estiran al alto de la fila, todos los botones terminan alineados. */

ul.products li.product {
	display: flex;
	flex-direction: column;
}

ul.products li.product .astra-shop-thumbnail-wrap {
	flex: 0 0 auto;
}

ul.products li.product .astra-shop-summary-wrap {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

/* Astra declara `.woocommerce-js ul.products li.product .button{margin-top:1em}`
   con la misma especificidad y su hoja carga después: sin !important gana
   la suya y el espacio sobrante queda debajo del botón en vez de arriba. */
ul.products li.product .astra-shop-summary-wrap > .button {
	margin-top: auto !important;
	align-self: stretch;
	text-align: center;
}

/* El margen que Astra ponía arriba pasa al precio, para no pegarlo al botón. */
ul.products li.product .astra-shop-summary-wrap > .price {
	margin-bottom: 1em;
}

ul.products li.product .lcc-wa-btn--loop {
	flex: 0 0 auto;
}

/* ---------- Filtro de precio: las cajas cortaban "C$150" en "C$15C" ---------- */

.wc-block-product-filter-price-slider input[type="text"] {
	min-width: 5.5em;
	max-width: 48%;
	padding-left: 0.4em !important;
	padding-right: 0.4em !important;
	text-align: center;
}

/* ---------- Ficha en móvil: nombre y precio sin tener que hacer scroll ----------
   Hoy la foto ocupa toda la primera pantalla y "Añadir al carrito" queda
   a ~1.200 px de altura, casi una pantalla y media más abajo. */

@media (max-width: 782px) {
	.single-product div.product .woocommerce-product-gallery img {
		max-height: 48vh;
		width: auto;
		margin: 0 auto;
		object-fit: contain;
	}

	/* La foto principal ocupa siempre la misma caja (todo el ancho × 48 % del
	   alto de pantalla), cargada o no, con o sin carrusel: antes medía según
	   la foto y el JavaScript la agrandaba después, moviendo la ficha. La
	   lupa del zoom (.zoomImg) maneja su propio tamaño. */
	.single-product div.product .woocommerce-product-gallery__image img:not(.zoomImg) {
		width: 100%;
		height: 48vh;
		max-height: none;
	}

	.single-product div.product .woocommerce-product-gallery {
		margin-bottom: 0.75em;
	}

	/* La barra fija de abajo no debe tapar el pie de la página. */
	body.single-product {
		padding-bottom: 76px;
	}
}

/* ---------- Barra superior (inc/navigation.php) ---------- */

.lcc-topbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.2em 0.6em;
	padding: 0.5em 16px;
	background: var(--lcc-ink);
	color: #fff;
	font-size: 0.85rem;
	line-height: 1.35;
	text-align: center;
}

.lcc-topbar strong {
	color: #fff;
}

.lcc-topbar a {
	color: #fff !important;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.lcc-topbar a:hover,
.lcc-topbar a:focus {
	color: var(--lcc-sand) !important;
}

.lcc-topbar-sep {
	opacity: 0.6;
}

/* En el celular no entra en una línea: cada parte va en la suya, sin el punto. */
@media (max-width: 480px) {
	.lcc-topbar {
		flex-direction: column;
		gap: 0.1em;
		padding-top: 0.4em;
		padding-bottom: 0.4em;
		font-size: 0.8rem;
	}

	.lcc-topbar-sep {
		display: none;
	}
}

/* ---------- Menú por categorías ---------- */

/* El nombre de la marca nunca se corta a mitad de palabra. */
body.lcc-menu-on .site-title,
body.lcc-menu-on .site-title a {
	white-space: nowrap;
	word-break: normal;
	overflow-wrap: normal;
}

/* En computadora el menú ocupa más: los ítems se acercan un poco. */
@media (min-width: 922px) {
	body.lcc-menu-on .main-header-menu > .menu-item > .menu-link {
		padding-left: 0.8em;
		padding-right: 0.8em;
	}
}

/* Hasta 1399 px no entran menú, redes y carrito en una fila: el menú bajaba
   a dos líneas y los íconos de redes se apilaban. En ese rango se ocultan
   las redes del encabezado, y debajo de 1200 px el menú usa letra menor. */
@media (min-width: 922px) and (max-width: 1399px) {
	body.lcc-menu-on #ast-desktop-header .ast-header-social-1-wrap {
		display: none;
	}
}

@media (min-width: 922px) and (max-width: 1199px) {
	body.lcc-menu-on .main-header-menu > .menu-item > .menu-link {
		padding-left: 0.5em;
		padding-right: 0.5em;
		font-size: 15px;
		white-space: nowrap;
	}
}

/* Con "Ver todo" son seis ítems: en las pantallas más angostas de
   computadora también se achican un poco el logo y los espacios. */
@media (min-width: 922px) and (max-width: 1099px) {
	body.lcc-menu-on .main-header-menu > .menu-item > .menu-link {
		padding-left: 0.3em;
		padding-right: 0.3em;
		font-size: 14px;
	}

	body.lcc-menu-on #ast-desktop-header .custom-logo-link img {
		max-width: 80px;
		height: auto;
	}

	body.lcc-menu-on #ast-desktop-header .site-title {
		font-size: 22px;
	}
}

/* El ítem de WhatsApp en verde. */

.main-header-menu .menu-item > a.lcc-menu-wa,
.ast-mobile-popup-content .menu-item > a.lcc-menu-wa {
	color: #0f7a3d !important;
	font-weight: 700;
}

/* ---------- Portada (inc/home.php) ---------- */

.lcc-home {
	--lcc-home-max: 1200px;
}

.lcc-hero {
	background: var(--lcc-cream);
	border-radius: 16px;
}

/* Astra pone sangría a las listas del contenido. */
.lcc-home ul.lcc-cats-grid,
.lcc-home ul.lcc-facts-list {
	margin: 0 !important;
	padding: 0 !important;
}

.lcc-hero-inner {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	grid-template-areas:
		"text media"
		"actions media";
	align-items: center;
	gap: 0 48px;
	max-width: var(--lcc-home-max);
	margin: 0 auto;
	padding: 56px 24px;
}

.lcc-hero-text {
	grid-area: text;
	align-self: end;
}

.lcc-hero-media {
	grid-area: media;
	text-align: center;
}

.lcc-hero-actions {
	grid-area: actions;
	align-self: start;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 24px;
}

.lcc-hero-title {
	margin: 0 0 0.4em;
	font-size: clamp(1.7rem, 3.6vw, 2.9rem);
	line-height: 1.12;
	color: var(--lcc-ink);
}

.lcc-hero-sub {
	margin: 0;
	max-width: 34em;
	font-size: 1.1rem;
	line-height: 1.55;
	color: #333;
}

/* La foto de producto es vertical y con fondo blanco: va en una tarjeta. */
.lcc-hero-img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 440px;
	margin: 0 auto;
	padding: 12px;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
	object-fit: contain;
}

.lcc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0.85em 1.6em;
	border-radius: 999px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none !important;
	transition: background 0.15s ease, color 0.15s ease;
}

.lcc-btn--dark {
	background: var(--lcc-ink);
	color: #fff !important;
}

.lcc-btn--dark:hover,
.lcc-btn--dark:focus {
	background: #333;
	color: #fff !important;
}

.lcc-btn--outline {
	border: 1.5px solid var(--lcc-ink);
	color: var(--lcc-ink) !important;
}

.lcc-btn--outline:hover,
.lcc-btn--outline:focus {
	background: var(--lcc-ink);
	color: #fff !important;
}

.lcc-hero-wa {
	min-height: 48px;
}

.lcc-home-section {
	max-width: var(--lcc-home-max);
	margin: 0 auto;
	padding: 48px 24px 0;
}

.lcc-home-h2 {
	margin: 0 0 20px;
	font-size: clamp(1.4rem, 2.4vw, 1.9rem);
	color: var(--lcc-ink);
}

.lcc-cats-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lcc-cat {
	display: block;
	color: var(--lcc-ink) !important;
	text-decoration: none !important;
}

.lcc-cat-img {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--lcc-line);
	border-radius: 12px;
}

.lcc-cat-img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform 0.2s ease;
}

.lcc-cat:hover .lcc-cat-img img,
.lcc-cat:focus .lcc-cat-img img {
	transform: scale(1.04);
}

.lcc-cat-name {
	display: block;
	margin-top: 10px;
	font-size: 1.05rem;
	font-weight: 700;
	text-align: center;
}

.lcc-best .woocommerce {
	margin-bottom: 0;
}

.lcc-home-more {
	margin: 8px 0 0;
	text-align: center;
}

.lcc-facts {
	padding-bottom: 56px;
}

.lcc-facts-list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lcc-facts-list li {
	padding: 18px;
	background: var(--lcc-cream);
	border-radius: 12px;
	font-size: 0.95rem;
	line-height: 1.5;
}

.lcc-facts-list strong {
	display: block;
	margin-bottom: 4px;
}

.lcc-facts-list a {
	color: #0f7a3d !important;
	font-weight: 700;
}

@media (max-width: 921px) {
	.lcc-cats-grid,
	.lcc-facts-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* En el celular el banner queda compacto para que las categorías, con fotos,
   aparezcan sin bajar mucho: texto a la izquierda, foto chica a la derecha y
   los dos botones a todo el ancho debajo. */
@media (max-width: 600px) {
	/* El contenedor de Astra ya deja 20 px a cada lado. */
	.lcc-hero {
		border-radius: 12px;
	}

	.lcc-hero-inner {
		grid-template-columns: minmax(0, 1fr) 38%;
		grid-template-areas:
			"text media"
			"actions actions";
		gap: 0 12px;
		padding: 20px 14px;
	}

	.lcc-hero-text {
		align-self: center;
	}

	.lcc-hero-title {
		font-size: 1.45rem;
	}

	.lcc-hero-sub {
		font-size: 0.95rem;
		line-height: 1.45;
	}

	.lcc-hero-img {
		max-height: 210px;
		padding: 6px;
		border-radius: 12px;
	}

	.lcc-hero-actions {
		flex-direction: column;
		margin-top: 18px;
	}

	.lcc-hero-actions > a {
		width: 100%;
	}

	.lcc-home-section {
		padding: 32px 0 0;
	}

	.lcc-cats-grid {
		gap: 12px;
	}

	.lcc-facts {
		padding-bottom: 40px;
	}

	.lcc-facts-list {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
	}
}

/* ---------- Completá el look (inc/look.php) ---------- */

.lcc-look {
	clear: both;
	margin: 8px 0 40px;
	padding-top: 24px;
	border-top: 1px solid var(--lcc-line);
}

.lcc-look-title {
	margin: 0 0 16px;
	font-size: 1.4rem;
}

.lcc-look ul.lcc-look-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 260px));
	gap: 16px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

.lcc-look-card {
	display: flex;
	align-items: center;
	gap: 14px;
	height: 100%;
	padding: 10px;
	border: 1px solid var(--lcc-line);
	border-radius: 12px;
	background: #fff;
	color: var(--lcc-ink) !important;
	text-decoration: none !important;
	transition: border-color 0.15s ease;
}

.lcc-look-card:hover,
.lcc-look-card:focus {
	border-color: var(--lcc-ink);
}

.lcc-look-img {
	flex: 0 0 88px;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 8px;
	background: #fff;
}

/* Tamaño explícito: Astra carga después y le ponía height:auto (PageSpeed la
   marcaba como "imagen sin tamaño"). */
.lcc-look .lcc-look-card .lcc-look-img img {
	width: 88px !important;
	height: 88px !important;
	object-fit: contain;
}

.lcc-look-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	line-height: 1.3;
}

.lcc-look-name {
	font-weight: 700;
}

.lcc-look-price {
	font-size: 0.95rem;
}

.lcc-look-cta {
	margin-top: 4px;
	font-size: 0.85rem;
	font-weight: 700;
	color: #0f7a3d;
	text-decoration: underline;
	text-underline-offset: 2px;
}

@media (max-width: 782px) {
	.lcc-look ul.lcc-look-list {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
	}
}

/* ---------- Contacto (inc/pages.php) ---------- */

.lcc-contact {
	max-width: 900px;
	margin: 0 auto;
	padding: 40px 0 56px;
}

.lcc-contact-title {
	margin: 0 0 0.3em;
}

.lcc-contact-lead {
	margin: 0 0 1em;
	font-size: 1.1rem;
}

.lcc-contact-cta {
	max-width: 420px;
	margin: 0;
}

.lcc-contact-phone {
	margin: 0.5em 0 2em;
	font-weight: 700;
}

.lcc-contact ul.lcc-contact-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

.lcc-contact-grid li {
	padding: 18px;
	background: var(--lcc-cream);
	border-radius: 12px;
	line-height: 1.5;
}

.lcc-contact-grid strong {
	display: block;
	margin-bottom: 4px;
}

.lcc-contact-grid a,
.lcc-footer a {
	color: #0f7a3d !important;
	font-weight: 700;
}

@media (max-width: 600px) {
	.lcc-contact {
		padding-top: 24px;
	}

	.lcc-contact ul.lcc-contact-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- Mejoras de catálogo y ficha (inc/extras.php) ---------- */

.lcc-cat-intro {
	max-width: 46em;
	margin: 0 0 1.5em;
	font-size: 1rem;
	line-height: 1.6;
}

.lcc-cat-intro p {
	margin: 0 0 0.6em;
}

/* Descripción plegable: cada subtítulo se abre al tocarlo. */
details.lcc-fold {
	margin: 0;
	border-bottom: 1px solid var(--lcc-line);
}

details.lcc-fold:first-of-type {
	border-top: 1px solid var(--lcc-line);
}

details.lcc-fold > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	min-height: 48px;
	padding: 0.7em 0;
	font-size: 1.05rem;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

details.lcc-fold > summary::-webkit-details-marker {
	display: none;
}

details.lcc-fold > summary::after {
	content: "+";
	flex: 0 0 auto;
	font-size: 1.4rem;
	font-weight: 400;
	line-height: 1;
}

details.lcc-fold[open] > summary::after {
	content: "−";
}

details.lcc-fold > summary:focus-visible {
	outline: 2px solid #0f7a3d;
	outline-offset: 2px;
}

.lcc-fold-body {
	padding: 0 0 1em;
}

.lcc-fold-body > :last-child {
	margin-bottom: 0;
}

/* Colores disponibles en la tarjeta del catálogo. */
.lcc-colors {
	display: flex;
	align-items: center;
	gap: 0.45em;
	margin: 0.2em 0 0.4em;
	font-size: 0.82rem;
	color: #555;
}

.lcc-colors-dots {
	display: inline-flex;
	gap: 3px;
}

.lcc-colors-dot {
	width: 0.8em;
	height: 0.8em;
	border: 1px solid rgba(0, 0, 0, 0.3);
	border-radius: 50%;
}

.lcc-badge--best {
	background: var(--lcc-ink);
	color: #fff;
}

/* ---------- Talla y color como botones (inc/swatches.php) ----------
   El <select> de WooCommerce sigue en la página para elegir la variación,
   pero fuera de la vista. La tabla de variaciones pasa a una columna:
   etiqueta arriba y botones abajo, a todo el ancho. */

form.variations_form select.lcc-select-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden;
	clip: rect(0 0 0 0);
	opacity: 0;
	pointer-events: none;
}

body.lcc-swatches-on form.variations_form table.variations,
body.lcc-swatches-on form.variations_form table.variations tbody,
body.lcc-swatches-on form.variations_form table.variations tr,
body.lcc-swatches-on form.variations_form table.variations th,
body.lcc-swatches-on form.variations_form table.variations td {
	display: block;
	width: 100%;
	border: 0;
}

body.lcc-swatches-on form.variations_form table.variations th {
	padding: 0 0 0.45em;
	text-align: left;
	line-height: 1.3;
}

body.lcc-swatches-on form.variations_form table.variations td {
	position: relative;
	padding: 0 0 1em;
}

.lcc-chosen {
	font-weight: 400;
}

.lcc-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* Astra da estilo a todos los <button> (fondo arena, mayúsculas, padding):
   el selector largo y los !important dejan los botones como opciones. */
form.variations_form .lcc-swatches .lcc-swatch {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45em;
	min-width: 48px;
	min-height: 44px;
	margin: 0;
	padding: 0.45em 0.95em !important;
	border: 1.5px solid rgba(0, 0, 0, 0.28) !important;
	border-radius: 8px !important;
	background: #fff !important;
	color: var(--lcc-ink) !important;
	font-size: 0.95rem !important;
	font-weight: 600 !important;
	line-height: 1.15 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	box-shadow: none;
	cursor: pointer;
}

form.variations_form .lcc-swatches .lcc-swatch:hover {
	border-color: var(--lcc-ink) !important;
}

form.variations_form .lcc-swatches .lcc-swatch.is-selected {
	border-color: var(--lcc-ink) !important;
	background: var(--lcc-ink) !important;
	color: #fff !important;
}

/* Agotada: se ve, tachada, para que no parezca que la tienda no la trabaja. */
form.variations_form .lcc-swatches .lcc-swatch.is-out {
	border-style: dashed !important;
	background: #f4f4f4 !important;
	color: rgba(0, 0, 0, 0.45) !important;
	text-decoration: line-through;
}

form.variations_form .lcc-swatches .lcc-swatch.is-soldout {
	cursor: not-allowed;
}

form.variations_form .lcc-swatches .lcc-swatch:focus-visible {
	outline: 2px solid #0f7a3d;
	outline-offset: 2px;
}

.lcc-swatch-dot {
	flex: 0 0 auto;
	width: 1em;
	height: 1em;
	border: 1px solid rgba(0, 0, 0, 0.3);
	border-radius: 50%;
}

.lcc-swatch.is-selected .lcc-swatch-dot {
	border-color: rgba(255, 255, 255, 0.7);
}

.lcc-swatch.is-out .lcc-swatch-dot {
	opacity: 0.45;
}

body.lcc-swatches-on form.variations_form .reset_variations {
	display: inline-block;
	margin-top: 0.6em;
	font-size: 0.85rem;
}

/* ---------- Ficha estable al cargar ----------
   Antes de que llegue el JavaScript del carrusel (flexslider), WooCommerce
   muestra todas las fotos una debajo de otra, y al armarse el carrusel la
   galería se achica: nombre, precio y botones saltaban (CLS 0,18 a 0,25 en
   PageSpeed). Medido en una copia local con red 4G lenta (03/10/2026):
   1. flexslider pone display:block en línea a las fotos mientras se arma:
      sin !important aparecían las cuatro en dos filas (galería de 886 px).
   2. Hay un instante en que el visor ya existe pero sin alto: mismo efecto.
   3. La envoltura tiene "transition: all .5s" de WooCommerce: una reserva
      con margen se animaba hasta 0. La reserva va en un ::after, sin animación.
   Con esto el movimiento medido bajó a 0,003-0,024 en cinco fichas. */

/* Antes del carrusel (la envoltura todavía es hija directa de la galería):
   solo la primera foto. */
.woocommerce-product-gallery > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:nth-child(n+2) {
	display: none !important;
}

/* Visor recién creado y todavía sin alto: siguen ocultas las fotos 2+. */
.flex-viewport:not([style*="height"]) > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:nth-child(n+2) {
	display: none !important;
}

/* Lugar de las miniaturas: 25 % del ancho + 4 px de alto, 15 px por encima y
   15 px de margen debajo; con 5 fotos o más son dos filas. */
.woocommerce-product-gallery > .woocommerce-product-gallery__wrapper:has(> .woocommerce-product-gallery__image:nth-child(2))::after {
	content: "";
	display: block;
	padding-top: calc(25% + 34px);
}

.woocommerce-product-gallery > .woocommerce-product-gallery__wrapper:has(> .woocommerce-product-gallery__image:nth-child(5))::after {
	padding-top: calc(50% + 38px);
}

/* Miniaturas del carrusel: un cuadrado reservado antes de que carguen.
   La regla de celular (width:auto) también las alcanzaba: sin foto todavía
   medían 0 y la fila crecía al llegar. */
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img {
	width: 100% !important;
	height: auto !important;
	max-height: none !important;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}

/* Respeta a quien pidió menos animación. */
@media (prefers-reduced-motion: reduce) {
	.lcc-wa-btn,
	.lcc-ship-fill {
		transition: none;
	}

	.lcc-wa-btn:hover {
		transform: none;
	}
}