/*
 * Tienda AmericaWant.
 *
 * Una sola hoja. La version anterior tenia doce, y asi es como se llega a que
 * nadie sepa donde esta definida una cosa.
 *
 * Papel blanco, tinta negra, mucho aire, y una sola nota de color. Las fotos de
 * los equipos estan tomadas sobre fondo blanco: en claro la foto y la pagina
 * son la misma superficie, y no hace falta encerrarlas en tarjetas.
 */

:root {
	/* Curvas propias: las de fabrica son flojas y se notan. */
	--sale: cubic-bezier(0.23, 1, 0.32, 1);
	--toque: 160ms;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

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

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* Foco visible: sin esto no se puede recorrer la tienda con el teclado. */
:where(a, button, input, select, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--verde-texto);
	outline-offset: 2px;
	border-radius: 0;
}

/* --- Botones --- */

.boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	padding: 0.95rem 1.7rem;
	border: 1px solid transparent;
	border-radius: 0;
	background: var(--wp--preset--color--negro);
	color: var(--wp--preset--color--papel);
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition:
		transform var(--toque) var(--sale),
		background-color var(--toque) var(--sale);
}

.boton:active {
	transform: scale(0.97);
}

.boton--linea {
	background: transparent;
	border-color: var(--wp--preset--color--linea);
	color: var(--wp--preset--color--negro);
}

@media (hover: hover) and (pointer: fine) {
	.boton:hover {
		background: var(--wp--preset--color--verde-texto);
		color: var(--wp--preset--color--papel);
	}

	.boton--linea:hover {
		border-color: var(--wp--preset--color--negro);
		background: transparent;
		color: var(--wp--preset--color--negro);
	}
}

/* --- Cabecera --- */

.cabecera {
	position: sticky;
	top: 0;
	z-index: 30;
}

.cabecera a {
	text-decoration: none;
}

.cabecera .wp-block-navigation__responsive-container-open,
.cabecera .wp-block-navigation a {
	color: var(--wp--preset--color--gris);
}

@media (hover: hover) and (pointer: fine) {
	.cabecera .wp-block-navigation a:hover {
		color: var(--wp--preset--color--negro);
	}
}

/* --- Cabecera del catalogo --- */

.tienda__cabecera {
	max-width: 46rem;
	margin-bottom: var(--wp--preset--spacing--50);
}

.tienda__titulo {
	margin: 0 0 0.6rem;
	font-size: var(--wp--preset--font-size--titulo);
	line-height: 1;
	letter-spacing: -0.035em;
	text-wrap: balance;
}

.tienda__bajada {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-size: 1.05rem;
	line-height: 1.55;
	color: var(--wp--preset--color--gris);
	max-width: 42rem;
}

/*
 * Las razones para comprar, arriba de todo. Es lo primero que hacen las tiendas
 * que convierten: decir por que comprarte a vos antes de mostrar el precio.
 */
.usp {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.85rem;
	color: var(--wp--preset--color--gris);
}

.usp__item {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
}

.usp__item::before {
	content: "";
	flex: none;
	width: 0.4rem;
	height: 0.4rem;
	border-radius: 0;
	background: var(--wp--preset--color--verde);
}

.usp__item strong {
	color: var(--wp--preset--color--negro);
	font-weight: 600;
}

/* --- Rubros --- */

.rubros {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding-bottom: var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--40);
	border-bottom: 1px solid var(--wp--preset--color--linea);
}

.rubro {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	min-height: 40px;
	padding: 0.5rem 1rem;
	border: 1px solid var(--wp--preset--color--linea);
	border-radius: 0;
	font-size: 0.88rem;
	color: var(--wp--preset--color--gris);
	text-decoration: none;
	transition:
		border-color var(--toque) var(--sale),
		color var(--toque) var(--sale);
}

.rubro.es-puesto {
	background: var(--wp--preset--color--negro);
	border-color: var(--wp--preset--color--negro);
	color: var(--wp--preset--color--papel);
}

.rubro__cuenta {
	font-family: var(--wp--preset--font-family--tecnica);
	font-size: 0.72rem;
	opacity: 0.6;
}

@media (hover: hover) and (pointer: fine) {
	.rubro:not(.es-puesto):hover {
		border-color: var(--wp--preset--color--negro);
		color: var(--wp--preset--color--negro);
	}
}

/* --- Cuerpo: filtros y listado --- */

.tienda__cuerpo {
	display: grid;
	grid-template-columns: 13rem minmax(0, 1fr);
	gap: var(--wp--preset--spacing--60);
	align-items: start;
}

.filtros {
	position: sticky;
	top: 5rem;
}

.filtros__cabecera {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding-bottom: 0.6rem;
	margin-bottom: var(--wp--preset--spacing--30);
	border-bottom: 1px solid var(--wp--preset--color--linea);
}

.filtros__titulo {
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.filtros__limpiar {
	font-size: 0.75rem;
	color: var(--wp--preset--color--verde-texto);
	text-decoration: none;
}

.filtro {
	margin-bottom: var(--wp--preset--spacing--40);
}

.filtro__titulo {
	margin: 0 0 0.5rem;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gris);
}

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

.filtro__valor {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.34rem 0;
	font-size: 0.9rem;
	color: var(--wp--preset--color--gris);
	text-decoration: none;
	transition: color var(--toque) var(--sale);
}

/*
 * Cuadrado y no circulo: se puede elegir mas de un valor del mismo filtro, y
 * el circulo promete que solo se elige uno.
 */
.filtro__marca {
	position: relative;
	flex: none;
	width: 1rem;
	height: 1rem;
	border: 1px solid var(--wp--preset--color--linea);
	border-radius: 0;
	background: var(--wp--preset--color--papel);
	transition:
		background-color var(--toque) var(--sale),
		border-color var(--toque) var(--sale);
}

.filtro__valor.es-puesto {
	color: var(--wp--preset--color--negro);
	font-weight: 500;
}

.filtro__valor.es-puesto .filtro__marca {
	background: var(--wp--preset--color--negro);
	border-color: var(--wp--preset--color--negro);
}

.filtro__valor.es-puesto .filtro__marca::after {
	content: "";
	position: absolute;
	left: 0.32rem;
	top: 0.12rem;
	width: 0.26rem;
	height: 0.52rem;
	border-right: 2px solid var(--wp--preset--color--papel);
	border-bottom: 2px solid var(--wp--preset--color--papel);
	transform: rotate(45deg);
}

.filtro__nombre {
	flex: 1;
}

.filtro__cuenta {
	font-family: var(--wp--preset--font-family--tecnica);
	font-size: 0.72rem;
	color: var(--wp--preset--color--gris);
}

@media (hover: hover) and (pointer: fine) {
	.filtro__valor:hover {
		color: var(--wp--preset--color--negro);
	}

	.filtro__valor:hover .filtro__marca {
		border-color: var(--wp--preset--color--gris);
	}

	.filtros__limpiar:hover {
		text-decoration: underline;
	}
}

/* --- Barra de resultados --- */

.barra {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-bottom: var(--wp--preset--spacing--30);
	margin-bottom: var(--wp--preset--spacing--40);
	border-bottom: 1px solid var(--wp--preset--color--linea);
}

.barra__cuenta {
	margin: 0;
	font-size: 0.9rem;
	color: var(--wp--preset--color--gris);
}

.barra__cuenta strong {
	color: var(--wp--preset--color--negro);
	font-variant-numeric: tabular-nums;
}

.barra__select {
	padding: 0.55rem 2.2rem 0.55rem 0.85rem;
	border: 1px solid var(--wp--preset--color--linea);
	border-radius: 0;
	background-color: var(--wp--preset--color--papel);
	color: var(--wp--preset--color--negro);
	font-family: inherit;
	font-size: 0.88rem;
	appearance: none;
	background-image:
		linear-gradient(45deg, transparent 50%, var(--wp--preset--color--gris) 50%),
		linear-gradient(135deg, var(--wp--preset--color--gris) 50%, transparent 50%);
	background-position: right 1.05rem center, right 0.75rem center;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	cursor: pointer;
}

/* --- Grilla y tarjetas --- */

.grilla {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}

@media (max-width: 1099px) {
	.grilla {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.grilla {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/*
 * La tarjeta es un article, no un enlace, porque adentro lleva el boton de
 * compra. El enlace vive en el nombre y se estira sobre toda la tarjeta con
 * ::after: se clickea entera igual, pero queda un solo destino en el arbol de
 * accesibilidad y el boton sigue siendo alcanzable con el teclado.
 */
.tarjeta {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	color: inherit;
}

.tarjeta__enlace {
	text-decoration: none;
	color: inherit;
}

.tarjeta__enlace::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 0;
}

/*
 * El foco se dibuja sobre la tarjeta entera, que es lo que el enlace abarca.
 * Sin esto el anillo aparece alrededor de dos palabras del titulo y quien
 * navega con teclado no ve donde esta parado.
 */
.tarjeta__enlace:focus-visible {
	outline: none;
}

.tarjeta__enlace:focus-visible::after {
	outline: 2px solid var(--wp--preset--color--negro);
	outline-offset: 4px;
}

/*
 * La foto manda: cuadrada, grande y sobre el mismo blanco que la pagina, sin
 * marco. Es la leccion que mas se repite en las tiendas que venden por foto.
 */
/*
 * Cuadro lleno, de canto vivo y con fondo propio.
 *
 * En la referencia del cliente la foto de producto es una escena que ocupa el
 * cuadro entero. Las nuestras son recortes sobre blanco, asi que sobre papel
 * blanco el equipo queda flotando en la nada y la fila se lee como una lista.
 * El fondo tiza le devuelve el borde al cuadro sin inventar una escena que no
 * tenemos: es el puente honesto hasta que haya fotos de ambiente de verdad.
 */
.tarjeta__marco {
	position: relative;
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 0;
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--tiza);
}

.tarjeta__foto {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: transform 600ms var(--sale);
}

/*
 * Al pasar el mouse la foto se acerca apenas y el marco se levanta.
 *
 * Antes cambiaba a la segunda foto de la galeria, que es lo que hacen las
 * tiendas buenas. Aca no funciona: las segundas fotos son collages del
 * proveedor con textos encima ("10+ YEARS", bolsas de regalo). Cambiar a eso
 * al pasar el mouse ensuciaba la tarjeta en lugar de ayudar a decidir.
 *
 * Cuando haya fotos propias del equipo desde otro angulo, esto vuelve.
 */
@media (hover: hover) and (pointer: fine) {
	.tarjeta:hover .tarjeta__foto {
		transform: scale(1.04);
	}

	.tarjeta:hover .tarjeta__marco {
	}
}

.tarjeta__marco {
}

.tarjeta__sellos {
	position: absolute;
	left: 0.7rem;
	top: 0.7rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.35rem;
	z-index: 1;
}

.sello {
	padding: 0.3rem 0.6rem;
	border-radius: 0;
	background: var(--wp--preset--color--negro);
	color: var(--wp--preset--color--papel);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.sello--gratis {
	background: var(--wp--preset--color--verde);
	color: var(--wp--preset--color--negro);
}

.sello--sin {
	background: var(--wp--preset--color--gris);
}

/*
 * El cuerpo crece para llenar la tarjeta y el boton se empuja al pie. Asi los
 * botones de una fila quedan alineados aunque un nombre ocupe dos renglones y
 * el de al lado uno solo.
 */
.tarjeta__cuerpo {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.4rem;
}

.tarjeta__nombre {
	margin: 0;
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: 0;
	color: var(--wp--preset--color--negro);
}

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

/*
 * Solo aparece cuando WooCommerce tiene el dato cargado. Un "ultimas unidades"
 * puesto en todas las tarjetas deja de significar algo a la segunda visita.
 */
.tarjeta__stock {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--wp--preset--color--gris);
}

.tarjeta__stock::before {
	content: "";
	flex: none;
	width: 0.4rem;
	height: 0.4rem;
	border-radius: 0;
	background: currentColor;
}

.tarjeta__stock--hay {
	color: var(--wp--preset--color--verde-texto);
}

/* Ambar, no rojo: quedan pocas, no es un error. */
.tarjeta__stock--poco {
	color: #8A5A00;
}

.tarjeta__stock--pedido {
	color: var(--wp--preset--color--gris);
}

/* --- Comprar desde la grilla --- */

/*
 * Se levanta por encima del enlace estirado, si no el ::after de la tarjeta lo
 * tapa y el clic termina yendo a la ficha en vez de al pago.
 */
/*
 * Negro, rectangular y del ancho de su texto, no una barra verde de lado a lado.
 * El verde queda para el llamado del heroe: si cada tarjeta lleva el acento, el
 * acento deja de senalar nada.
 */
/*
 * margin-top: auto, no un margen fijo. El boton tiene que empujarse al pie de la
 * tarjeta para que los de una fila queden a la misma altura: con un margen fijo
 * la tarjeta cuyo nombre ocupa tres renglones deja su boton 26 px mas abajo que
 * la de al lado, y la fila se ve rota.
 */
.tarjeta__comprar {
	position: relative;
	z-index: 1;
	align-self: flex-start;
	margin-top: auto;
	padding: 0.62rem 1.35rem;
	border: 1px solid var(--wp--preset--color--negro);
	border-radius: 0;
	background: var(--wp--preset--color--negro);
	color: var(--wp--preset--color--papel);
	font-size: 0.8rem;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	transition:
		background var(--toque, 200ms) var(--sale, ease),
		color var(--toque, 200ms) var(--sale, ease);
}

/*
 * Variante de contorno para lo que no se compra de una: pedir precio o entrar a
 * la ficha. Dos botones verdes con destinos distintos ensenan mal que hace cada
 * uno.
 */
.tarjeta__comprar--linea {
	background: transparent;
	border-color: var(--wp--preset--color--negro);
	color: var(--wp--preset--color--negro);
}

@media (hover: hover) and (pointer: fine) {
	.tarjeta__comprar:hover {
		background: var(--wp--preset--color--verde);
		border-color: var(--wp--preset--color--verde);
		color: var(--wp--preset--color--negro);
	}

	.tarjeta__comprar--linea:hover {
		background: var(--wp--preset--color--negro);
		color: var(--wp--preset--color--papel);
	}
}

.tarjeta__comprar:focus-visible {
	outline: 2px solid var(--wp--preset--color--negro);
	outline-offset: 2px;
}

/* Mientras se agrega al carrito, para que nadie apriete dos veces. */
.tarjeta__comprar.esta-cargando {
	pointer-events: none;
	opacity: 0.65;
}

.tarjeta__precio {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.tarjeta__usd {
	font-size: 1.05rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.tarjeta__ars {
	font-size: 0.85rem;
	color: var(--wp--preset--color--gris);
	font-variant-numeric: tabular-nums;
}

.tarjeta__consultar {
	font-size: 0.95rem;
	color: var(--wp--preset--color--verde-texto);
	font-weight: 500;
}

/* --- Sin resultados --- */

.vacio {
	padding: var(--wp--preset--spacing--60) 0;
	text-align: center;
	color: var(--wp--preset--color--gris);
}

.vacio p {
	margin: 0 0 var(--wp--preset--spacing--40);
}

/* --- Paginacion --- */

.paginacion ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	justify-content: center;
	list-style: none;
	margin: var(--wp--preset--spacing--60) 0 0;
	padding: 0;
}

.paginacion a,
.paginacion span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.7rem;
	border: 1px solid var(--wp--preset--color--linea);
	border-radius: 0;
	font-size: 0.88rem;
	text-decoration: none;
	color: var(--wp--preset--color--gris);
}

.paginacion .current {
	background: var(--wp--preset--color--negro);
	border-color: var(--wp--preset--color--negro);
	color: var(--wp--preset--color--papel);
}

/* --- Ficha de producto --- */

.woocommerce div.product {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--60);
	align-items: start;
	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--70);
}

/*
 * LA GALERIA NO SE PEGA EN TELEFONO.
 *
 * Antes esta regla llevaba "position: sticky; top: 5rem" para todos los anchos,
 * y la media query de telefono intentaba deshacerlo con "position: static".
 * Fallaban las dos cosas:
 *
 *   1. WooCommerce trae ".woocommerce div.product div.images { position:
 *      relative }", que con especificidad (0,3,2) le gana a la nuestra (0,3,1).
 *      La galeria quedaba relativa, no estatica.
 *   2. El "top: 5rem" no se resetaba nunca. Con posicion relativa, "top" corre
 *      el dibujo 80 px hacia abajo pero deja la caja de maquetacion donde
 *      estaba: el resumen se ubicaba contra la caja sin correr, asi que el
 *      titulo del producto terminaba pintado ENCIMA de las miniaturas.
 *
 * Se invierte: sin pegado por defecto, y se agrega solo donde hay lugar.
 */
/*
 * LA GALERIA Y EL RESUMEN LLENAN SU COLUMNA.
 *
 * WooCommerce viene del mundo de dos columnas flotadas y declara en
 * woocommerce-layout.css:
 *
 *   .woocommerce div.product div.images  { width: 48%; float: left }
 *   .woocommerce div.product div.summary { width: 48%; float: right }
 *
 * Eso es (0,3,2). Nuestra regla era `.woocommerce div.product
 * .woocommerce-product-gallery`, que es (0,3,1) y pierde. Resultado medido en
 * 1440: las columnas de la grilla miden 637 y 579 px, pero la galeria ocupaba
 * 306 y el resumen 278 -el 48% de cada una-, dejando 395 px de vacio en el
 * medio. Por eso el titulo se partia en ocho renglones.
 *
 * Nombrando el elemento y su segunda clase se llega a (0,4,2) y gana, sin
 * recurrir a !important.
 */
.woocommerce div.product div.woocommerce-product-gallery.images {
	float: none;
	width: 100%;
}

/*
 * LA GALERIA NO SE PEGA. NI EN ESCRITORIO.
 *
 * Aca hubo un pegado que puse yo y que resulto peor que el problema que venia
 * a resolver: la galeria se montaba sobre la descripcion y la tapaba entera.
 *
 * POR QUE PASA. Un elemento "sticky" queda confinado a su bloque contenedor.
 * Para un item de grilla, la especificacion dice que ese bloque es su AREA de
 * grilla -aca la fila 1, de 1887 px-, pero Chrome lo confina al CONTENEDOR de
 * la grilla entera, que mide 4891 px. Medido en vivo: con el scroll en 3000 la
 * galeria estaba en y=3080, cuando su fila termina en 2154. Se habia escapado
 * 926 px, justo encima de las solapas de descripcion.
 *
 * NO SE PUEDE ARREGLAR SOLO CON CSS. La forma correcta pide un envoltorio
 * interno que se pegue dentro de la columna, y eso es tocar la plantilla de
 * producto de WooCommerce. No vale la pena por una comodidad: la galeria
 * acompana el scroll como acompano siempre.
 */
.woocommerce div.product .woocommerce-product-gallery__wrapper {
	border-radius: 0;
	overflow: hidden;
	background: var(--wp--preset--color--papel);
}

/*
 * EL ZOOM DE WOOCOMMERCE SE ESCAPABA DE LA FICHA.
 *
 * jquery.zoom inserta un <img class="zoomImg"> en posicion absoluta con la foto
 * a tamano completo: 1600 x 1600 px dentro de una columna de 342. Se recorta
 * solo si su contenedor directo tiene overflow oculto, y ese contenedor es
 * .woocommerce-product-gallery__image. El overflow estaba puesto en __wrapper y
 * en .flex-viewport, que son los abuelos, asi que la imagen gigante se derramaba
 * por encima del titulo y de todo lo que venia abajo.
 *
 * En el telefono se veia el titulo tapado por las fotos del proveedor.
 */
.woocommerce div.product .woocommerce-product-gallery__image {
	position: relative;
	overflow: hidden;
}

/*
 * Y en pantalla tactil el zoom directamente sobra: se dispara con el puntero
 * encima, cosa que en un telefono no existe. Se carga, no se usa y solo puede
 * romper. La lupa para agrandar (el lightbox) sigue funcionando con el toque.
 */
@media (pointer: coarse) {
	.woocommerce div.product .woocommerce-product-gallery img.zoomImg { display: none; }
}

.woocommerce div.product div.summary.summary {
	float: none;
	width: 100%;
	margin: 0;
}

.woocommerce div.product .product_title {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--grande);
	line-height: 1.08;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	margin: 0;
	color: var(--wp--preset--color--negro);
	font-size: 1.85rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.ficha__pesos {
	margin: 0.3rem 0 var(--wp--preset--spacing--40);
	font-size: 1.05rem;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--gris);
}

.ficha__pesos-nota {
	display: block;
	margin-top: 0.3rem;
	font-size: 0.78rem;
	line-height: 1.5;
	color: var(--wp--preset--color--gris);
}

.woocommerce div.product .woocommerce-product-details__short-description {
	margin-bottom: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--gris);
	line-height: 1.6;
}

/*
 * Las razones para confiar van pegadas al boton y no al pie: la duda aparece
 * justo cuando se esta por apretar.
 */
.confianza {
	list-style: none;
	margin: 0 0 var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--30) 0;
	border-block: 1px solid var(--wp--preset--color--linea);
	display: grid;
	gap: 0.6rem;
}

.confianza__item {
	display: flex;
	flex-direction: column;
	padding-left: 1.5rem;
	position: relative;
}

.confianza__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.42rem;
	width: 0.6rem;
	height: 0.3rem;
	border-left: 2px solid var(--wp--preset--color--verde-texto);
	border-bottom: 2px solid var(--wp--preset--color--verde-texto);
	transform: rotate(-45deg);
}

.confianza__que {
	font-size: 0.92rem;
	font-weight: 600;
}

.confianza__nota {
	font-size: 0.82rem;
	color: var(--wp--preset--color--gris);
}

.woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
	align-items: center;
	margin: 0 0 var(--wp--preset--spacing--30);
}

.woocommerce div.product form.cart .quantity input.qty {
	width: 4.2rem;
	padding: 0.95rem 0.5rem;
	border: 1px solid var(--wp--preset--color--linea);
	border-radius: 0;
	text-align: center;
	font-family: inherit;
	font-variant-numeric: tabular-nums;
}

.woocommerce div.product .single_add_to_cart_button {
	flex: 1;
	min-width: 12rem;
	padding: 1.05rem 2rem;
	border: 0;
	border-radius: 0;
	background: var(--wp--preset--color--negro);
	color: var(--wp--preset--color--papel);
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
	transition:
		transform var(--toque) var(--sale),
		background-color var(--toque) var(--sale);
}

.woocommerce div.product .single_add_to_cart_button:active {
	transform: scale(0.98);
}

@media (hover: hover) and (pointer: fine) {
	.woocommerce div.product .single_add_to_cart_button:hover {
		background: var(--wp--preset--color--verde-texto);
	}
}

.certis {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
}

.certi {
	padding: 0.3rem 0.65rem;
	border: 1px solid var(--wp--preset--color--linea);
	border-radius: 0;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--gris);
}

/* --- Especificaciones y relacionados --- */

.specs,
.relacionados {
	grid-column: 1 / -1;
	margin-top: var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--linea);
}

.specs__titulo,
.relacionados__titulo {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--medio);
}

/*
 * El hueco entre columnas no es estetico, es lo que hace legible la tabla.
 *
 * Con gap 0 el valor de una columna quedaba pegado al titulo de la siguiente y
 * la fila se leia "22 kWConector", "Tipo 2Instalacion". Cada celda lleva su
 * valor a la derecha, asi que sin separacion las dos columnas se funden en una
 * sola linea de texto sin sentido.
 */
.specs__lista {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
	gap: 0 var(--wp--preset--spacing--60);
	margin: 0;
}

.specs__fila {
	display: flex;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--wp--preset--color--linea);
}

.specs__fila dt {
	color: var(--wp--preset--color--gris);
	font-size: 0.88rem;
}

.specs__fila dd {
	margin: 0;
	font-size: 0.88rem;
	text-align: right;
	font-weight: 500;
}

/* --- Pie --- */

.pie__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.35rem;
	font-size: 0.9rem;
}

.pie__lista a {
	color: var(--wp--preset--color--gris);
	text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
	.pie__lista a:hover {
		color: var(--wp--preset--color--negro);
		text-decoration: underline;
	}
}

/* --- Colapso --- */

@media (max-width: 899px) {
	.tienda__cuerpo,
	.woocommerce div.product {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--40);
	}

	.filtros {
		position: static;
	}

	/*
	 * En telefono los filtros no pueden comerse la primera pantalla: van en
	 * fila, como pastillas, con area de toque de 44 px.
	 */
	.filtros {
		border: 1px solid var(--wp--preset--color--linea);
		border-radius: 0;
		padding: var(--wp--preset--spacing--30);
	}

	.filtro__lista {
		display: flex;
		flex-wrap: wrap;
		gap: 0.4rem;
	}

	.filtro__valor {
		min-height: 44px;
		padding: 0.5rem 0.85rem;
		border: 1px solid var(--wp--preset--color--linea);
		border-radius: 0;
	}

	.filtro__valor.es-puesto {
		background: var(--wp--preset--color--negro);
		border-color: var(--wp--preset--color--negro);
		color: var(--wp--preset--color--papel);
	}

	.filtro__marca {
		display: none;
	}

	.grilla {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	}
}

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