/* ==========================================================================
   Tienda Simple — hoja única del theme.

   Mobile primero. Los colores, la tipografía y los radios salen de theme.json
   y de la variación del preset; acá está la estructura y los patrones de
   ecommerce que ninguna de las dos cosas puede expresar.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Base
   -------------------------------------------------------------------------- */

:root {
	--ts-radio: var(--wp--custom--radio--normal, 8px);
	--ts-radio-chico: var(--wp--custom--radio--chico, 4px);
	--ts-radio-grande: var(--wp--custom--radio--grande, 16px);
	--ts-pastilla: var(--wp--custom--radio--pastilla, 999px);
	--ts-transicion: 180ms cubic-bezier(0.2, 0, 0.2, 1);
	--ts-ratio-producto: var(--wp--custom--producto--relacion-imagen, 1 / 1);
	--ts-margen: var(--wp--custom--margen-lateral, clamp(1rem, 4vw, 3rem));
	--ts-alto-header: 64px;

	/* Espaciado propio.
	   ⚠ No se usan las variables `--wp--preset--spacing--*`: WordPress genera
	   su propia escala y le gana a la que declara el theme.json, así que
	   `spacing--30` termina valiendo 0.67rem en vez de 1.5rem y el diseño sale
	   apretado sin que se note por qué. El sistema es de acá. */
	--ts-e1: 0.5rem;
	--ts-e2: 1rem;
	--ts-e3: 1.5rem;
	--ts-e4: 2.5rem;
	--ts-e5: clamp(3rem, 6vw, 5rem);
	--ts-e6: clamp(4rem, 8vw, 7rem);

	/* Separación de la grilla de productos. */
	--ts-grilla-y: clamp(2.75rem, 4.5vw, 4.5rem);
	--ts-grilla-x: clamp(0.9rem, 2vw, 2rem);

	/* Ritmo vertical. Una sola medida para el aire entre secciones: si cada
	   patrón trae su propio padding, no hay ritmo, hay accidentes. */
	--ts-seccion-y: clamp(3rem, 6vw, 5rem);
	--ts-titulo-abajo: clamp(1.25rem, 2.5vw, 2rem);

	/* Botones. Un solo lugar decide las medidas; el preset sólo cambia el
	   radio y si van en mayúsculas. */
	--ts-btn-alto: 3rem;
	--ts-btn-alto-chico: 2.625rem;
	--ts-btn-alto-grande: 3.5rem;
	--ts-btn-pad-x: 1.5rem;
	--ts-btn-pad-x-chico: 1rem;
	--ts-btn-pad-x-grande: 2rem;
	--ts-btn-fuente: 0.9375rem;
	--ts-btn-fuente-chico: 0.8125rem;
	--ts-btn-fuente-grande: 1.0625rem;
}

/* --------------------------------------------------------------------------
   1b. Botones — el sistema

   Antes había cinco tamaños distintos conviviendo (theme.json, cada preset,
   la tarjeta de producto, la ficha y los de WooCommerce). Acá se unifican
   todos en tres medidas: chico, normal y grande.
   -------------------------------------------------------------------------- */

.wp-element-button,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--ts-btn-alto);
	padding: 0 var(--ts-btn-pad-x);
	border: 0;
	border-radius: var(--ts-radio);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-family: inherit;
	font-size: var(--ts-btn-fuente);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--ts-transicion), color var(--ts-transicion);
}

.wp-element-button:hover,
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* Secundario: mismo tamaño, otro peso visual. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	box-sizing: border-box;
	min-height: var(--ts-btn-alto);
	padding: 0 var(--ts-btn-pad-x);
	border: 1px solid currentColor;
	background: transparent;
	color: var(--wp--preset--color--contrast);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}


img {
	max-width: 100%;
	height: auto;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
	border-radius: var(--ts-radio-chico);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------------
   2. Barra de anuncios
   -------------------------------------------------------------------------- */

.ts-anuncio {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.ts-anuncio__lista {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem 2rem;
	max-width: var(--wp--style--global--wide-size, 1560px);
	margin: 0 auto;
	padding: 0.55rem var(--ts-margen);
	list-style: none;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-align: center;
}

.ts-anuncio__item {
	margin: 0;
	white-space: nowrap;
}

/* En celular sólo entra uno: se muestra el primero, que es el más importante. */
@media (max-width: 700px) {
	.ts-anuncio__item + .ts-anuncio__item {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   3. Encabezado
   -------------------------------------------------------------------------- */

.ts-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: var(--wp--preset--color--base);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.admin-bar .ts-header {
	top: 32px;
}

.ts-header__fila {
	gap: 0.75rem 1.5rem;
	min-height: var(--ts-alto-header);
	padding-block: 0.65rem;
}

/* Orden en celular: hamburguesa · marca · carrito, y el buscador abajo. */
.ts-header__nav { order: 1; flex: 0 0 auto; }
.ts-header__marca { order: 2; flex: 1 1 auto; justify-content: center; min-width: 0; }
.ts-header__acciones { order: 3; flex: 0 0 auto; gap: 0.5rem; }

.ts-header__marca {
	gap: 0.55rem;
}

.ts-header__marca .wp-block-site-title {
	margin: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.ts-header__marca .wp-block-site-title a {
	color: inherit;
	text-decoration: none;
}

.ts-header__marca .wp-block-site-logo img {
	display: block;
}

/* El buscador ocupa su propia fila abajo, que en celular es lo correcto:
   buscar es la acción principal de una tienda con muchos productos. */
.ts-header .ts-buscador {
	order: 4;
	flex: 1 0 100%;
	margin: 0;
}

.ts-header .wp-block-search__inside-wrapper {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--ts-pastilla);
	background: var(--wp--preset--color--surface);
	padding: 0.15rem 0.15rem 0.15rem 0.9rem;
}

.ts-header .wp-block-search__input {
	border: 0;
	background: transparent;
	padding: 0.5rem 0;
	font-size: 1rem; /* 16px: menos de eso, iOS hace zoom al enfocar. */
}

.ts-header .wp-block-search__input::placeholder {
	color: var(--wp--preset--color--muted);
}

.ts-header .wp-block-search__button {
	border: 0;
	border-radius: var(--ts-pastilla);
	background: transparent;
	color: var(--wp--preset--color--muted);
	padding: 0.4rem 0.6rem;
}

.ts-header .wp-block-search__button:hover {
	color: var(--wp--preset--color--contrast);
}

/* Navegación */
.ts-header .wp-block-navigation a {
	color: inherit;
	text-decoration: none;
	font-weight: 500;
}

.ts-header .wp-block-navigation a:hover {
	color: var(--wp--preset--color--primary);
}

.ts-header .wp-block-navigation__responsive-container-open {
	padding: 0.35rem;
}

@media (min-width: 900px) {
	.ts-header__fila {
		gap: 2rem;
		min-height: 76px;
	}

	/* En desktop: marca · navegación · buscador · carrito. */
	.ts-header__marca    { order: 1; flex: 0 0 auto; justify-content: flex-start; }
	.ts-header__nav      { order: 2; flex: 1 1 auto; }
	.ts-header__acciones { order: 4; }

	.ts-header .ts-buscador {
		order: 3;
		flex: 0 1 280px;
		min-width: 180px;
		margin-left: auto;
	}
}

/* Carrito */
.ts-carrito {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: var(--ts-pastilla);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	transition: background var(--ts-transicion);
}

.ts-carrito:hover {
	background: var(--wp--preset--color--surface);
}

.ts-carrito__icono {
	/* ⚠ Era un path con relleno macizo: el asa quedaba rellena también, porque
	   `fill-rule` por defecto no hace agujero, y el ícono se veía como una
	   mancha negra. Ahora es de trazo. */
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
}

.ts-carrito__cuenta {
	position: absolute;
	top: 2px;
	right: 0;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: var(--ts-pastilla);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}

.ts-carrito__cuenta--vacio {
	display: none;
}

/* --------------------------------------------------------------------------
   4. Portada
   -------------------------------------------------------------------------- */

.ts-portada {
	position: relative;
	display: grid;
	align-items: end;
	min-height: 74svh;
	/* Más aire abajo: el botón de WhatsApp y el del carrito flotan sobre esa
	   franja y se le montaban encima a la llamada a la acción. */
	padding: var(--ts-e5) 0 calc(var(--ts-e5) + 3.5rem);
	background: var(--wp--preset--color--surface) center / cover no-repeat;
	color: var(--wp--preset--color--contrast);
	overflow: hidden;
}

.ts-portada--con-foto {
	color: #fff;
}

.ts-portada__velo {
	display: none;
}

.ts-portada--con-foto .ts-portada__velo {
	display: block;
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 38%),
		linear-gradient(0deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0) 62%);
}

.ts-portada__contenido {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--wp--style--global--content-size, 1240px);
	margin: 0 auto;
	padding-inline: var(--ts-margen);
}

.ts-portada__titulo {
	max-width: 16ch;
	margin: 0;
	font-size: var(--wp--preset--font-size--display);
	line-height: 1.02;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.ts-portada__bajada {
	max-width: 42ch;
	margin: 0.9rem 0 0;
	font-size: var(--wp--preset--font-size--medio);
	line-height: 1.5;
	opacity: 0.94;
}

.ts-portada__accion {
	margin: 1.75rem 0 0;
}

/* Sin `display` propio: el sistema de botones lo pone en `inline-flex` y ahí
   el texto se centra vertical. Con `inline-block` y `min-height` el texto
   quedaba pegado arriba y el botón se veía roto. */
.ts-portada__accion .wp-element-button {
	text-decoration: none;
}

.ts-portada--con-foto .ts-portada__accion .wp-element-button {
	background: #fff;
	color: #111;
}

.ts-portada--con-foto .ts-portada__accion .wp-element-button:hover {
	background: var(--wp--preset--color--accent);
	color: #fff;
}

/* Cada preset le da otro peso a la portada. */
.ts-portada--categorias {
	min-height: 52svh;
	align-items: center;
	text-align: center;
}

.ts-portada--categorias .ts-portada__titulo,
.ts-portada--categorias .ts-portada__bajada {
	margin-inline: auto;
}

.ts-portada--listado {
	min-height: 0;
	align-items: center;
	padding-block: var(--ts-e4);
}

/* Con la portada centrada el choque no existe: no hace falta el aire extra. */
.ts-portada--categorias,
.ts-portada--listado {
	padding-bottom: var(--ts-e5);
}

.ts-portada--listado.ts-portada--con-foto {
	min-height: 34svh;
}

.ts-portada--listado .ts-portada__titulo {
	font-size: var(--wp--preset--font-size--titulo);
	max-width: 22ch;
}

.ts-portada--listado .ts-portada__bajada {
	font-size: var(--wp--preset--font-size--normal);
}

@media (min-width: 900px) {
	.ts-portada {
		min-height: min(66svh, 620px);
	}

	.ts-portada--categorias {
		min-height: min(48svh, 460px);
	}
}

/* --------------------------------------------------------------------------
   5. Franja de confianza
   -------------------------------------------------------------------------- */

.ts-confianza {
	border-bottom: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--base);
}

.ts-confianza__lista {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	max-width: var(--wp--style--global--wide-size, 1560px);
	margin: 0 auto;
	padding: 0 var(--ts-margen);
	list-style: none;
}

.ts-confianza__item {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	margin: 0;
	padding: 1rem 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.ts-confianza__item:last-child {
	border-bottom: 0;
}

.ts-confianza__titulo {
	font-size: var(--wp--preset--font-size--normal);
	font-weight: 600;
}

.ts-confianza__texto {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--chico);
	line-height: 1.45;
}

@media (min-width: 700px) {
	.ts-confianza__lista {
		grid-template-columns: repeat(3, 1fr);
		gap: 2rem;
	}

	.ts-confianza__item {
		align-items: center;
		padding: 1.35rem 0;
		border-bottom: 0;
		text-align: center;
	}
}

/* --------------------------------------------------------------------------
   6. Secciones
   -------------------------------------------------------------------------- */

/* Todas las secciones respiran igual. */
.ts-seccion {
	padding-block: var(--ts-seccion-y);
}

/* Dos secciones seguidas del mismo color no necesitan el doble de aire. */
.ts-seccion + .ts-seccion {
	padding-top: 0;
}

/* …salvo que la de abajo tenga fondo propio: ahí sí hace falta separarlas. */
.ts-seccion + .ts-seccion--nosotros,
.ts-seccion--nosotros + .ts-seccion {
	padding-top: var(--ts-seccion-y);
}

.ts-seccion__titulo {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin: 0 0 var(--ts-titulo-abajo);
	font-size: var(--wp--preset--font-size--titulo);
	line-height: 1.15;
	letter-spacing: -0.025em;
}

.ts-seccion__accion {
	margin-top: var(--ts-seccion-y);
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   7. Grilla de productos

   ⚠ Todos los selectores llevan el prefijo `.woocommerce` a propósito:
   WooCommerce estiliza la grilla con `.woocommerce ul.products li.product`,
   que le gana por especificidad a `ul.products li.product`. Sin el prefijo, su
   grilla de floats se impone sobre esta de grid y aparece una columna vacía al
   principio de cada fila (su clearfix `::before` pasa a ser una celda).
   -------------------------------------------------------------------------- */

.woocommerce ul.products,
ul.products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	/* La separación entre filas se mide contra el alto de la tarjeta, no en
	   abstracto: con tarjetas de ~520px, 40px se leen como pegadas. El botón
	   de una fila y la foto de la siguiente necesitan aire de verdad. */
	gap: var(--ts-grilla-y) var(--ts-grilla-x);
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce .products ul::before,
.woocommerce .products ul::after,
ul.products::before,
ul.products::after {
	content: none;
	display: none;
}

/* ⚠ El selector lleva `[class*="columns-"]` a propósito. WooCommerce declara
   el ancho de la tarjeta con `.woocommerce ul.products[class*="columns-"]
   li.product { width: 30.75% }`, que suma un selector de atributo y le gana a
   `.woocommerce ul.products li.product` aunque nuestra hoja cargue después.
   Sin esto, en el catálogo las tarjetas salen a un tercio de su columna. */
.woocommerce ul.products li.product,
.woocommerce ul.products[class*="columns-"] li.product,
ul.products li.product {
	position: relative;
	display: flex;
	flex-direction: column;
	width: auto;
	margin: 0;
	padding: 0;
	float: none;
	clear: none;
	text-align: left;
}

/* La imagen vive en su propia caja para poder recortar el zoom del hover. */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	color: inherit;
	text-decoration: none;
}

/* Las tarjetas también respiran por dentro: foto, nombre, precio y botón
   necesitan escalones distintos o se leen como un bloque solo. */

.woocommerce ul.products li.product img,
ul.products li.product img {
	display: block;
	width: 100%;
	aspect-ratio: var(--ts-ratio-producto);
	object-fit: cover;
	margin: 0;
	border-radius: var(--ts-radio);
	background: var(--wp--preset--color--surface);
	transition: transform 450ms cubic-bezier(0.2, 0, 0.2, 1);
}

.woocommerce ul.products li.product:hover img {
	transform: scale(1.035);
}

/* El recorte del zoom. */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link::before {
	content: none;
}

.woocommerce ul.products li.product .woocommerce-loop-product__link {
	overflow: hidden;
	border-radius: var(--ts-radio);
}

.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	margin: 0;
	padding: 0.85rem 0 0;
	font-family: var(--wp--preset--font-family--texto);
	font-size: var(--wp--preset--font-size--normal);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0;
	color: var(--wp--preset--color--contrast);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.woocommerce ul.products li.product .price {
	display: flex;
	align-items: baseline;
	gap: 0.45rem;
	/* El margen de abajo va acá y no en el botón: el botón se alinea con
	   `margin-top: auto` para que todas las tarjetas terminen parejas, y ese
	   auto se come cualquier separación que se le ponga. */
	margin: 0.45rem 0 1.1rem;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--medio);
	font-weight: 700;
	letter-spacing: -0.01em;
}

.woocommerce ul.products li.product .price del {
	order: 2;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--chico);
	font-weight: 400;
	opacity: 1;
}

.woocommerce ul.products li.product .price ins {
	order: 1;
	background: none;
	color: var(--wp--preset--color--sale);
	font-weight: 700;
	text-decoration: none;
}

/* La tarjeta ya no lleva botón: la compra arranca en la ficha. Lo que queda
   es foto, nombre, precio y cuotas, en ese orden de peso visual. */
.woocommerce ul.products li.product .ts-cuotas {
	display: block;
	margin-top: 0.3rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--chico);
	line-height: 1.4;
}

.woocommerce ul.products li.product .price {
	margin-bottom: 0;
}

/* Chapa de oferta: la de WooCommerce es un círculo verde. Se reemplaza. */
.woocommerce span.onsale,
.woocommerce ul.products li.product span.onsale,
span.onsale {
	position: absolute;
	top: 0.6rem;
	left: 0.6rem;
	right: auto;
	z-index: 2;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0.25rem 0.6rem;
	border-radius: var(--ts-radio-chico);
	background: var(--wp--preset--color--sale);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.06em;
	text-align: center;
	text-transform: uppercase;
}

.woocommerce ul.products li.product.outofstock img {
	opacity: 0.5;
}

@media (min-width: 640px) {
	.woocommerce ul.products,
	ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.woocommerce ul.products.columns-2, ul.products.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.woocommerce ul.products.columns-3, ul.products.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.woocommerce ul.products.columns-4, ul.products.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.woocommerce ul.products.columns-5, ul.products.columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.preset-listado .woocommerce ul.products {
	--ts-grilla-y: clamp(2rem, 3vw, 3rem);
}

/* Orden y conteo del catálogo */
.woocommerce .woocommerce-result-count {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--chico);
}

.woocommerce .woocommerce-ordering {
	margin: 0;
}

.woocommerce .woocommerce-ordering select {
	padding: 0.55rem 2rem 0.55rem 0.85rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--ts-radio);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--chico);
}

.woocommerce .woocommerce-notices-wrapper:empty {
	display: none;
}

/* --------------------------------------------------------------------------
   8. Grilla de categorías
   -------------------------------------------------------------------------- */

.woocommerce ul.products li.product-category a,
ul.products li.product-category a {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: var(--ts-radio);
	background: var(--wp--preset--color--surface);
	color: inherit;
	text-decoration: none;
}

.woocommerce ul.products li.product-category img {
	aspect-ratio: 4 / 5;
	margin: 0;
	border-radius: 0;
	transition: transform 500ms cubic-bezier(0.2, 0, 0.2, 1);
}

.woocommerce ul.products li.product-category a:hover img {
	transform: scale(1.05);
}

/* El nombre va encima de la foto, que es lo que hace que una grilla de
   categorías se lea como navegación y no como un listado más. */
.woocommerce ul.products li.product-category a::after {
	content: "";
	position: absolute;
	inset: 40% 0 0;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0));
	pointer-events: none;
}

.woocommerce ul.products li.product-category h2,
.woocommerce ul.products li.product-category .woocommerce-loop-category__title {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	display: block;
	margin: 0;
	padding: 1rem;
	color: #fff;
	font-family: var(--wp--preset--font-family--texto);
	font-size: var(--wp--preset--font-size--medio);
	font-weight: 600;
	line-height: 1.25;
	-webkit-line-clamp: none;
}

.woocommerce ul.products li.product-category .count {
	display: block;
	margin: 0.1rem 0 0;
	padding: 0;
	background: none;
	color: rgba(255, 255, 255, 0.78);
	font-size: var(--wp--preset--font-size--chico);
	font-weight: 400;
}

/* --------------------------------------------------------------------------
   9. Ficha de producto — plantilla clásica

   ⚠ Acá NO va ninguna grilla. WooCommerce dibuja la ficha con bloques y su
   contenedor también lleva la clase `product`, así que un `display: grid`
   sobre `.woocommerce div.product` le parte la maqueta a la plantilla de
   bloques: las columnas quedan encajonadas en la mitad del ancho. La ficha se
   estiliza en la sección 17.

   Sólo quedan acá los retoques que sirven si algún día se usa la plantilla
   clásica y que no afectan al layout.
   -------------------------------------------------------------------------- */

.woocommerce .woocommerce-breadcrumb {
	margin: 0 0 var(--ts-e3);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--chico);
}

.woocommerce .woocommerce-breadcrumb a {
	color: inherit;
}

.woocommerce div.product .product_title {
	margin: 0 0 0.6rem;
	font-size: var(--wp--preset--font-size--titulo);
	letter-spacing: -0.02em;
}

.woocommerce div.product .stock {
	margin: 0 0 1rem;
	font-size: var(--wp--preset--font-size--chico);
	font-weight: 600;
}

.woocommerce div.product .stock.in-stock { color: var(--wp--preset--color--accent); }
.woocommerce div.product .stock.out-of-stock { color: var(--wp--preset--color--sale); }

/* --------------------------------------------------------------------------
   10. Carrito y checkout
   -------------------------------------------------------------------------- */

.woocommerce table.shop_table {
	border-collapse: collapse;
	border-color: var(--wp--preset--color--border);
	border-radius: var(--ts-radio);
}

.woocommerce table.shop_table th {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--chico);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.woocommerce .cart-collaterals .cart_totals,
.woocommerce-cart .cart-collaterals .cart_totals {
	width: 100%;
	float: none;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text {
	width: 100%;
	padding: 0.8rem 0.9rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--ts-radio);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-size: 1rem;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top-color: var(--wp--preset--color--primary);
	border-radius: var(--ts-radio);
	background: var(--wp--preset--color--surface);
}

.woocommerce-error {
	border-top-color: var(--wp--preset--color--sale);
}

/* --------------------------------------------------------------------------
   11. Accesos rápidos por categoría (preset Listado)
   -------------------------------------------------------------------------- */

.ts-filtros-cat {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 var(--ts-e3);
	padding: 0;
	list-style: none;
}

.ts-filtros-cat__link {
	display: inline-block;
	padding: 0.5rem 1rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--ts-pastilla);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--chico);
	font-weight: 500;
	text-decoration: none;
	transition: border-color var(--ts-transicion), background var(--ts-transicion);
}

.ts-filtros-cat__link:hover {
	border-color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--surface);
}

/* --------------------------------------------------------------------------
   12. Quiénes somos, locales y contacto
   -------------------------------------------------------------------------- */

.ts-nosotros {
	max-width: 62ch;
}

.ts-nosotros p {
	color: var(--wp--preset--color--muted);
	line-height: 1.7;
}

.ts-locales {
	display: grid;
	/* `start`: sin esto la grilla estira todas las tarjetas al alto de la más
	   alta, y los locales sin mapa quedan como cajas vacías de 280px. */
	align-items: start;
	gap: var(--ts-e3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ts-locales__item {
	padding: var(--ts-e3);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--ts-radio);
	background: var(--wp--preset--color--base);
}

.ts-locales__nombre {
	margin: 0 0 0.4rem;
	font-size: var(--wp--preset--font-size--medio);
	font-weight: 700;
}

.ts-locales__dato {
	margin: 0.2rem 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--chico);
	line-height: 1.5;
}

.ts-locales__dato a {
	color: inherit;
}

.ts-locales__mapa {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	margin-top: 1rem;
	border: 0;
	border-radius: var(--ts-radio);
}

.ts-locales--compacto {
	gap: 0.9rem;
}

.ts-locales--compacto .ts-locales__item {
	padding: 0;
	border: 0;
	background: none;
}

@media (min-width: 782px) {
	.ts-locales:not(.ts-locales--compacto) {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	}
}

.ts-contacto {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--chico);
}

.ts-contacto a {
	color: inherit;
}

/* --------------------------------------------------------------------------
   13. Pie
   -------------------------------------------------------------------------- */

.ts-footer {
	padding-block: var(--ts-e5) var(--ts-e4);
}

.ts-footer a {
	color: inherit;
	text-decoration: none;
}

.ts-footer a:hover {
	text-decoration: underline;
}

.ts-footer__cols {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ts-e4);
}

.ts-footer__col--marca .wp-block-site-title {
	font-weight: 700;
	letter-spacing: -0.02em;
}

.ts-footer__col--marca .wp-block-site-tagline {
	margin-top: 0.4rem;
	opacity: 0.7;
}

.ts-footer__titulo {
	margin: 0 0 0.85rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.6;
}

.ts-footer .ts-locales__dato,
.ts-footer .ts-locales__nombre,
.ts-footer .ts-contacto {
	color: inherit;
	opacity: 0.78;
}

.ts-footer .ts-locales__nombre {
	font-size: var(--wp--preset--font-size--chico);
	font-weight: 600;
	opacity: 1;
}

.ts-footer .wp-block-navigation a:hover {
	text-decoration: underline;
}

.ts-pie {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: var(--ts-e4);
	padding-top: var(--ts-e3);
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.ts-pie__medios {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ts-pie__medio {
	padding: 0.3rem 0.7rem;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--ts-radio-chico);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	opacity: 0.85;
}

.ts-pie__legal {
	margin: 0;
	font-size: var(--wp--preset--font-size--chico);
	opacity: 0.6;
}

@media (min-width: 782px) {
	.ts-footer__cols {
		grid-template-columns: 1.4fr 1fr 1.2fr 1fr;
		gap: var(--ts-e4);
	}
}

/* --------------------------------------------------------------------------
   14. Botón flotante de WhatsApp
   -------------------------------------------------------------------------- */

.ts-whatsapp {
	/* Abajo a la izquierda: la derecha es del carrito flotante. */
	position: fixed;
	left: 1rem;
	bottom: 1rem;
	z-index: 45;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem;
	border-radius: var(--ts-pastilla);
	background: #25d366;
	color: #06251a;
	font-size: var(--wp--preset--font-size--chico);
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
	transition: transform var(--ts-transicion);
}

.ts-whatsapp:hover {
	transform: translateY(-2px);
}

.ts-whatsapp svg {
	flex: none;
	width: 22px;
	height: 22px;
	fill: currentColor;
}

.ts-whatsapp__texto {
	display: none;
}

@media (min-width: 600px) {
	.ts-whatsapp {
		padding: 0.75rem 1.1rem;
	}

	.ts-whatsapp__texto {
		display: inline;
	}
}

/* --------------------------------------------------------------------------
   15. Barra de modelos (sólo en el sitio escaparate)
   -------------------------------------------------------------------------- */

.ts-barra {
	position: fixed;
	left: 50%;
	bottom: 1rem;
	z-index: 50;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.35rem 0.75rem;
	max-width: calc(100vw - 2rem);
	padding: 0.6rem 0.75rem;
	transform: translateX(-50%);
	border-radius: var(--ts-pastilla);
	background: #0a0a0a;
	color: #f4f4f4;
	font-size: 0.8125rem;
	line-height: 1.3;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
}

.ts-barra__texto {
	margin: 0;
	padding-left: 0.5rem;
	color: #9a9a9a;
	white-space: nowrap;
}

.ts-barra__texto strong {
	color: #d4ff00;
	font-weight: 600;
}

.ts-barra__opciones {
	display: flex;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ts-barra__opcion {
	display: inline-block;
	padding: 0.35rem 0.85rem;
	border-radius: var(--ts-pastilla);
	color: #f4f4f4;
	font-weight: 600;
	text-decoration: none;
	transition: background var(--ts-transicion), color var(--ts-transicion);
}

.ts-barra__opcion:hover {
	background: #262626;
	color: #fff;
}

.ts-barra__opcion--activa,
.ts-barra__opcion--activa:hover {
	background: #d4ff00;
	color: #0a0a0a;
}

.ts-barra ~ .ts-whatsapp {
	bottom: 4.75rem;
}

@media (max-width: 599px) {
	.ts-barra ~ .ts-whatsapp {
		bottom: 6.5rem;
	}
}

body:has(.ts-barra) .ts-footer {
	padding-bottom: calc(var(--ts-e3) + 3.5rem);
}

@media (max-width: 599px) {
	.ts-barra {
		left: 0.75rem;
		right: 0.75rem;
		max-width: none;
		transform: none;
		border-radius: var(--ts-radio-grande);
	}

	.ts-barra__texto {
		width: 100%;
		padding-left: 0;
		text-align: center;
	}

	.ts-barra__opciones {
		width: 100%;
		justify-content: center;
	}
}

/* --------------------------------------------------------------------------
   16. Preferencias del sistema
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* --------------------------------------------------------------------------
   17. Ficha de producto

   La plantilla `single-product.html` usa `woocommerce/legacy-template`, que es
   lo que hace el propio WooCommerce: su ficha clásica trae galería con zoom,
   pestañas y relacionados ya resueltos. Armarla bloque por bloque significaba
   reimplementar todo eso y quedarse sin la mitad.

   La grilla se ata a `:has(> div.summary)` para que, si algún día WooCommerce
   pasa a bloques, esto no le parta la maqueta a la nueva.
   -------------------------------------------------------------------------- */

.ts-producto .woocommerce-breadcrumb {
	margin: 0 0 var(--ts-e3);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--chico);
}

.ts-producto .woocommerce-breadcrumb a {
	color: inherit;
}

.ts-producto div.product:has(> div.summary) {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ts-e4);
}

.ts-producto div.product > div.images,
.ts-producto div.product > div.summary {
	width: 100%;
	float: none;
	margin: 0;
}

/* ⚠ WooCommerce dibuja la galería con `opacity: 0` en línea y la revela con su
   JavaScript. Si ese script falla o tarda, la ficha queda sin foto y parece
   rota. Se fuerza visible: el zoom y el lightbox son un extra, la foto no. */
.ts-producto .woocommerce-product-gallery {
	opacity: 1 !important;
}

.ts-producto .woocommerce-product-gallery__image img {
	width: 100%;
	border-radius: var(--ts-radio-grande);
}

.ts-producto .woocommerce-product-gallery__trigger {
	z-index: 3;
}

.ts-producto .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem;
	margin: 0.7rem 0 0;
	padding: 0;
	list-style: none;
}

.ts-producto .flex-control-thumbs li {
	width: 84px;
	margin: 0;
}

.ts-producto .flex-control-thumbs img {
	border-radius: var(--ts-radio);
	opacity: 0.55;
	cursor: pointer;
}

.ts-producto .flex-control-thumbs img.flex-active,
.ts-producto .flex-control-thumbs img:hover {
	opacity: 1;
}

.ts-producto .product_title {
	margin: 0 0 0.7rem;
	font-size: var(--wp--preset--font-size--titulo);
	line-height: 1.1;
	letter-spacing: -0.025em;
}

.ts-producto div.product p.price,
.ts-producto div.product span.price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0 0 1rem;
	color: var(--wp--preset--color--contrast);
	font-size: 1.85rem;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.ts-producto div.product p.price del {
	color: var(--wp--preset--color--muted);
	font-size: 1.15rem;
	font-weight: 400;
	opacity: 1;
}

.ts-producto div.product p.price ins {
	background: none;
	color: var(--wp--preset--color--sale);
	text-decoration: none;
}

.ts-producto .woocommerce-product-details__short-description {
	margin: 0 0 1.25rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--medio);
	line-height: 1.65;
}

.ts-producto div.product .stock {
	margin: 0 0 1rem;
	font-size: var(--wp--preset--font-size--chico);
	font-weight: 600;
}

.ts-producto div.product .stock.in-stock { color: var(--wp--preset--color--accent); }
.ts-producto div.product .stock.out-of-stock { color: var(--wp--preset--color--sale); }

.ts-producto form.cart {
	display: flex;
	flex-wrap: wrap;
	/* `stretch` hacía que la cantidad y el botón se estiraran a 87px cuando
	   miden 56: en un flex row, el hijo más alto arrastra al otro. */
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 1.5rem;
}

.ts-producto form.cart .quantity {
	display: flex;
	flex: 0 0 auto;
}

.ts-producto form.cart .quantity input.qty {
	box-sizing: border-box;
	width: 6rem;
	height: var(--ts-btn-alto-grande);
	min-height: 0;
	padding: 0 0.5rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--ts-radio);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-size: 1rem;
	text-align: center;
}

.ts-producto form.cart .single_add_to_cart_button {
	/* Con tope: un botón de 512px de ancho no se lee como un botón. */
	flex: 1 1 14rem;
	max-width: 22rem;
	height: var(--ts-btn-alto-grande);
	min-height: 0;
	padding: 0 var(--ts-btn-pad-x-grande);
	font-size: var(--ts-btn-fuente-grande);
}

.ts-producto form.cart .single_add_to_cart_button:hover {
	background: var(--wp--preset--color--contrast);
}

.ts-producto .variations {
	width: 100%;
	margin-bottom: 0.5rem;
	border: 0;
}

.ts-producto .variations th,
.ts-producto .variations td {
	display: block;
	padding: 0 0 0.4rem;
	text-align: left;
}

.ts-producto .variations select {
	width: 100%;
	padding: 0.75rem 0.9rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--ts-radio);
	background: var(--wp--preset--color--base);
	font-size: 1rem;
}

/* Las tres líneas que sacan la duda antes de comprar */
.ts-ayudas {
	margin: 0 0 1.25rem;
	padding: 1rem 1.1rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--ts-radio);
	background: var(--wp--preset--color--surface);
	list-style: none;
	font-size: var(--wp--preset--font-size--chico);
	line-height: 1.55;
}

.ts-ayudas__item {
	position: relative;
	margin: 0;
	padding-left: 1.35rem;
	color: var(--wp--preset--color--muted);
}

.ts-ayudas__item + .ts-ayudas__item {
	margin-top: 0.45rem;
}

.ts-ayudas__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
}

.ts-ayudas__item a {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
}

.ts-producto .product_meta {
	padding-top: 1rem;
	border-top: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--chico);
}

.ts-producto .product_meta > span {
	display: block;
	margin-bottom: 0.25rem;
}

/* Pestañas */
.ts-producto .woocommerce-tabs {
	margin-top: var(--ts-e5);
}

.ts-producto .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin: 0 0 1.5rem;
	padding: 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
	list-style: none;
}

.ts-producto .woocommerce-tabs ul.tabs::before,
.ts-producto .woocommerce-tabs ul.tabs::after,
.ts-producto .woocommerce-tabs ul.tabs li::before,
.ts-producto .woocommerce-tabs ul.tabs li::after {
	content: none;
	border: 0;
	box-shadow: none;
}

.ts-producto .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

.ts-producto .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 0.7rem 1.1rem;
	border-bottom: 2px solid transparent;
	color: var(--wp--preset--color--muted);
	font-weight: 600;
	text-decoration: none;
}

.ts-producto .woocommerce-tabs ul.tabs li.active a {
	border-bottom-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--contrast);
}

.ts-producto .woocommerce-Tabs-panel > h2:first-child {
	display: none;
}

.ts-producto .woocommerce-Tabs-panel p {
	max-width: 70ch;
	color: var(--wp--preset--color--muted);
	line-height: 1.7;
}

.ts-producto .related,
.ts-producto .upsells {
	margin-top: var(--ts-e5);
	padding-top: var(--ts-e4);
	border-top: 1px solid var(--wp--preset--color--border);
}

.ts-producto .related > h2,
.ts-producto .upsells > h2 {
	margin: 0 0 var(--ts-e3);
	font-size: var(--wp--preset--font-size--titulo);
	letter-spacing: -0.02em;
}

@media (min-width: 900px) {
	.ts-producto div.product:has(> div.summary) {
		/* Las columnas miden lo que ocupan, no la mitad cada una: si no, la
		   foto queda flotando dentro de una columna vacía y se abre un hueco
		   entre la foto y los datos. El conjunto se centra. */
		/* ⚠ La primera columna lleva la medida explícita. Con `auto` la pista
		   se estira para llenar el espacio libre y la foto queda pegada a la
		   izquierda con un hueco de 500px hasta los datos. */
		grid-template-columns: min(560px, calc((100svh - 12rem) * 0.8)) minmax(0, 540px);
		justify-content: center;
		gap: clamp(2rem, 4vw, 4rem);
		align-items: start;
	}

	/* ⚠ El ancho de la galería se deriva del ALTO disponible, no del ancho de
	   la columna. Con una foto 4:5 a ancho completo, en una pantalla de 800px
	   la imagen medía 974px de alto: el comprador no la veía entera sin
	   scrollear, que es justo lo que tiene que ver primero.
	   4:5 significa ancho = alto × 0,8. */
	.ts-producto div.product > div.images {
		width: 100%;
	}

	.ts-producto div.product > div.summary {
		max-width: 540px;
	}

	.ts-producto div.product > .woocommerce-tabs,
	.ts-producto div.product > .related,
	.ts-producto div.product > .upsells {
		grid-column: 1 / -1;
	}
}

@media (max-width: 899px) {
	.ts-producto form.cart .single_add_to_cart_button {
		flex: 1 1 100%;
	}
}

/* --------------------------------------------------------------------------
   18. Páginas del negocio

   Quiénes somos, preguntas frecuentes, cómo comprar, envíos y contacto.
   -------------------------------------------------------------------------- */

.ts-pagina {
	padding-block: var(--ts-seccion-y);
}

.ts-pagina .wp-block-post-title,
.ts-pagina__titulo {
	margin: 0 0 0.75rem;
	font-size: var(--wp--preset--font-size--titulo);
	line-height: 1.1;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

/* ⚠ En un layout `constrained` WordPress centra a los hijos con
   `margin-inline: auto`. Cualquier bloque con ancho máximo propio queda
   centrado mientras el título arranca a la izquierda, y el desalineado se ve
   enseguida. Todo lo que tenga ancho propio se ancla a la izquierda. */
.ts-pagina__bajada,
.ts-faq,
.ts-nosotros,
.ts-pagina .wp-block-post-content > p {
	margin-inline: 0 auto;
}

.ts-pagina__bajada {
	max-width: 60ch;
	margin-bottom: var(--ts-e4);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--medio);
	line-height: 1.6;
}

.ts-pagina .wp-block-post-content > h2 {
	margin-top: var(--ts-seccion-y);
	margin-bottom: var(--ts-titulo-abajo);
	font-size: var(--wp--preset--font-size--titulo);
	letter-spacing: -0.02em;
}

.ts-pagina .wp-block-post-content > h2:first-child {
	margin-top: 0;
}

.ts-pagina .wp-block-post-content > p {
	max-width: 68ch;
	margin-block: 0 1rem;
	color: var(--wp--preset--color--muted);
	line-height: 1.7;
}

/* --- Preguntas frecuentes ------------------------------------------------ */

.ts-faq {
	max-width: 780px;
	margin: 0;
	border-top: 1px solid var(--wp--preset--color--border);
}

.ts-faq__item {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.ts-faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.15rem 0;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--medio);
	font-weight: 600;
	line-height: 1.4;
	list-style: none;
	cursor: pointer;
}

.ts-faq__item summary::-webkit-details-marker {
	display: none;
}

/* La cruz que gira: dice "esto se abre" sin necesidad de una imagen. */
.ts-faq__item summary::after {
	content: "";
	flex: none;
	width: 14px;
	height: 14px;
	background:
		linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
		linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
	opacity: 0.5;
	transition: transform var(--ts-transicion), opacity var(--ts-transicion);
}

.ts-faq__item[open] summary::after {
	transform: rotate(45deg);
	opacity: 1;
}

.ts-faq__item[open] summary {
	padding-bottom: 0.5rem;
}

.ts-faq__item p {
	max-width: 68ch;
	margin: 0;
	padding-bottom: 1.25rem;
	color: var(--wp--preset--color--muted);
	line-height: 1.7;
}

/* --- Cómo comprar -------------------------------------------------------- */

.ts-pasos {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ts-e3);
	margin: 0;
}

.ts-paso {
	padding: var(--ts-e3);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--ts-radio);
	background: var(--wp--preset--color--base);
}

.ts-paso__numero {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	margin: 0 0 0.85rem;
	border-radius: 999px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--chico);
	font-weight: 700;
	line-height: 1;
}

.ts-paso__titulo {
	margin: 0 0 0.4rem;
	font-size: var(--wp--preset--font-size--grande);
	line-height: 1.2;
}

.ts-paso p:not(.ts-paso__numero) {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--normal);
	line-height: 1.6;
}

@media (min-width: 700px) {
	.ts-pasos {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1100px) {
	.ts-pasos {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* --- Menú de ayuda del pie ----------------------------------------------- */

.ts-menu-ayuda {
	display: grid;
	gap: 0.45rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--chico);
}

.ts-menu-ayuda a {
	opacity: 0.78;
}

.ts-menu-ayuda a:hover {
	opacity: 1;
}

/* --- Créditos del pie ---------------------------------------------------- */

.ts-pie__creditos {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35rem 1.25rem;
}

.ts-pie__mino {
	margin: 0;
	font-size: var(--wp--preset--font-size--chico);
	opacity: 0.75;
}

.ts-pie__mino a {
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

/* Separación entre los enlaces de la navegación: la define el theme, no la
   escala de espaciado de WordPress. */
.ts-header .wp-block-navigation {
	gap: clamp(1rem, 2vw, 1.75rem);
}

/* --------------------------------------------------------------------------
   19. Carrito y checkout — la maqueta de la página

   Las plantillas `page-cart` y `page-checkout` son del theme para que estas
   dos pantallas conserven el encabezado y el pie del sitio. WooCommerce trae
   las suyas con un encabezado mínimo, y perder la marca justo cuando el
   comprador está por pagar es exactamente lo contrario de lo que conviene.
   -------------------------------------------------------------------------- */

.ts-compra {
	padding-block: var(--ts-e4) var(--ts-e5);
}

.ts-compra__titulo {
	margin: 0 0 var(--ts-e4);
	font-size: var(--wp--preset--font-size--titulo);
	letter-spacing: -0.025em;
}

/* Checkout de LFAB */
.ts-compra .lfabco-checkout,
.ts-compra .lfabco-wrap {
	--lfabco-radius: var(--ts-radio);
}

.ts-compra input[type="text"],
.ts-compra input[type="email"],
.ts-compra input[type="tel"],
.ts-compra input[type="number"],
.ts-compra select,
.ts-compra textarea {
	box-sizing: border-box;
	width: 100%;
	padding: 0.85rem 0.95rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--ts-radio);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.4;
}

.ts-compra input:focus,
.ts-compra select:focus,
.ts-compra textarea:focus {
	border-color: var(--wp--preset--color--primary);
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--primary) 18%, transparent);
}

.ts-compra label {
	display: block;
	margin-bottom: 0.35rem;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--chico);
	font-weight: 600;
}

.ts-compra .woocommerce-info,
.ts-compra .woocommerce-message {
	margin-bottom: var(--ts-e3);
	padding: 0.9rem 1.1rem;
	border-top: 3px solid var(--wp--preset--color--primary);
	border-radius: var(--ts-radio);
	background: var(--wp--preset--color--surface);
	font-size: var(--wp--preset--font-size--chico);
}

.ts-compra table.shop_table {
	width: 100%;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--ts-radio);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}

.ts-compra table.shop_table th,
.ts-compra table.shop_table td {
	padding: 0.9rem 1rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
	text-align: left;
}

.ts-compra table.shop_table tr:last-child th,
.ts-compra table.shop_table tr:last-child td {
	border-bottom: 0;
}

.ts-compra .cart_totals,
.ts-compra .cart-collaterals {
	width: 100%;
	float: none;
	margin-top: var(--ts-e4);
}

.ts-compra .quantity input.qty {
	width: 5rem;
	text-align: center;
}

/* --------------------------------------------------------------------------
   20. Catálogo — la barra de arriba y el listado

   `/tienda/`, las categorías y la búsqueda usan la plantilla clásica de
   WooCommerce dentro de nuestra maqueta. Con las plantillas de bloques la
   grilla salía sin estilo: fotos gigantes, chapa de oferta suelta y títulos
   centrados.
   -------------------------------------------------------------------------- */

.ts-catalogo {
	padding-block: var(--ts-e4) var(--ts-e5);
}

.ts-catalogo .woocommerce-breadcrumb {
	margin: 0 0 var(--ts-e2);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--chico);
}

.ts-catalogo .woocommerce-breadcrumb a {
	color: inherit;
}

.ts-catalogo .woocommerce-products-header {
	margin: 0 0 var(--ts-e2);
}

.ts-catalogo .woocommerce-products-header__title,
.ts-catalogo .ts-catalogo__titulo,
.ts-catalogo h1.page-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--titulo);
	line-height: 1.1;
	letter-spacing: -0.03em;
}

.ts-catalogo .term-description {
	max-width: 62ch;
	margin: 0.6rem 0 0;
	color: var(--wp--preset--color--muted);
	line-height: 1.6;
}

/* Barra de herramientas: cantidad de resultados a la izquierda, orden a la
   derecha, y una línea que la separa de la grilla. */
.ts-catalogo .woocommerce-notices-wrapper + .woocommerce-result-count,
.ts-catalogo .woocommerce-result-count {
	float: none;
	margin: 0;
}

.ts-catalogo .woocommerce-ordering {
	float: none;
	margin: 0;
}

.ts-catalogo .woocommerce-result-count,
.ts-catalogo .woocommerce-ordering {
	display: inline-block;
	vertical-align: middle;
}

/* La barra se arma con un contenedor propio para poder alinearla. */
.ts-catalogo .ts-catalogo__barra {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	margin: 0 0 var(--ts-e3);
	padding-bottom: var(--ts-e2);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.ts-catalogo .ts-catalogo__barra .woocommerce-result-count {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--chico);
}

.ts-catalogo select.orderby {
	box-sizing: border-box;
	height: var(--ts-btn-alto-chico);
	padding: 0 2.25rem 0 0.9rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--ts-radio);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--chico);
}

/* Paginación */
.ts-catalogo .woocommerce-pagination {
	margin-top: var(--ts-e5);
}

.ts-catalogo .woocommerce-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	justify-content: center;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

.ts-catalogo .woocommerce-pagination ul.page-numbers li {
	margin: 0;
	border: 0;
	overflow: visible;
}

.ts-catalogo .woocommerce-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	height: 2.75rem;
	padding: 0 0.6rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--ts-radio);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--chico);
	font-weight: 600;
	text-decoration: none;
}

.ts-catalogo .woocommerce-pagination .page-numbers.current,
.ts-catalogo .woocommerce-pagination .page-numbers:hover {
	border-color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.ts-catalogo__buscador {
	max-width: 460px;
	margin: 0 0 var(--ts-e4);
}

/* --------------------------------------------------------------------------
   21. Cuotas
   -------------------------------------------------------------------------- */

.ts-cuotas--ficha {
	margin: -0.5rem 0 1.25rem;
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--normal);
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   22. Franja de cierre

   Lo último antes del pie: el recordatorio de que hay alguien del otro lado.
   -------------------------------------------------------------------------- */

.ts-cierre {
	padding-block: var(--ts-e5);
	background: var(--wp--preset--color--surface);
	text-align: center;
}

.ts-cierre__contenido {
	max-width: 46ch;
	margin: 0 auto;
	padding-inline: var(--ts-margen);
}

.ts-cierre__titulo {
	margin: 0 0 0.6rem;
	font-size: var(--wp--preset--font-size--titulo);
	line-height: 1.15;
	letter-spacing: -0.025em;
}

.ts-cierre__texto {
	margin: 0 0 var(--ts-e3);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--medio);
	line-height: 1.6;
}

.ts-cierre__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
}

/* Enlace "Cómo llegar" cuando el local no tiene mapa incrustado. */
.ts-locales__accion {
	margin: 0.85rem 0 0;
}

.ts-locales__accion a {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--chico);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}