/* ==========================================================================
   Tienda de productos (WooCommerce)

   WooCommerce trae su propia hoja, pensada para un tema genérico: botones
   morados, tipografías distintas y una rejilla de columnas flotadas. Aquí
   se cambia todo eso por las variables del sitio, para que la tienda se
   lea como parte de la web y no como un programa pegado dentro.

   Los selectores cuelgan de `body.woocommerce-page .c-tienda`, y las dos
   partes hacen falta:
   - `.c-tienda` la pone el contenedor de las plantillas del tema, para que
     estos estilos no se derramen por el resto de la web.
   - `woocommerce-page` es la clase que WordPress pone en el body de
     *todas* las páginas de la tienda. Ojo con `woocommerce` a secas, que
     parece la misma pero no: solo la llevan el catálogo, las fichas y las
     categorías, no el carrito, el pago ni la cuenta. Con ella, los botones
     del carrito se quedaban morados.

   También hay que subir por encima de los selectores de WooCommerce 11, del
   tipo `.woocommerce:where(body:not(...)) button.button.alt`, que ya son de
   especificidad (0,3,1), y (0,4,1) si el botón está deshabilitado.

   Solo se carga cuando hay productos: ver inc/estilos.php.
   ========================================================================== */

/* ------------------------------------------------------- Cabecera y barra */

.c-barra__tienda {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-left: auto;
}

.c-tienda-carrito,
.c-tienda-cuenta {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--c-texto-claro);
	text-decoration: none;
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.c-tienda-carrito:hover,
.c-tienda-cuenta:hover {
	color: var(--c-papel);
}

.c-tienda-carrito svg,
.c-tienda-cuenta svg {
	width: 1.15rem;
	height: 1.15rem;
	flex-shrink: 0;
}

/* El número de artículos, como una etiqueta. */
.c-tienda-carrito__cuenta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.25rem;
	height: 1.25rem;
	padding: 0 0.3rem;
	border-radius: 999px;
	background: var(--c-rojo);
	color: var(--c-papel);
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1;
}

/* ---------------------------------------------------------------- Botones */

body.woocommerce-page .c-tienda .button,
body.woocommerce-page .c-tienda button.button,
body.woocommerce-page .c-tienda input.button,
body.woocommerce-page .c-tienda a.button,
body.woocommerce-page .c-tienda a.button.alt,
body.woocommerce-page .c-tienda button.button.alt,
body.woocommerce-page .c-tienda input.button.alt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	padding: 0.72em 1.4em;
	border: 1px solid transparent;
	border-radius: var(--c-radio-chico);
	background: var(--c-rojo);
	background-color: var(--c-rojo);
	color: var(--c-papel);
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	text-shadow: none;
	cursor: pointer;
	transition: background-color var(--c-transicion), border-color var(--c-transicion);
}

body.woocommerce-page .c-tienda .button:hover,
body.woocommerce-page .c-tienda button.button:hover,
body.woocommerce-page .c-tienda input.button:hover,
body.woocommerce-page .c-tienda a.button:hover,
body.woocommerce-page .c-tienda a.button.alt:hover,
body.woocommerce-page .c-tienda button.button.alt:hover,
body.woocommerce-page .c-tienda input.button.alt:hover {
	background: var(--c-rojo-claro);
	background-color: var(--c-rojo-claro);
	color: var(--c-papel);
}

/* El botón secundario —«Ver el carrito», «Aplicar cupón»— va en línea. */
body.woocommerce-page .c-tienda a.button:not(.button.alt),
body.woocommerce-page .c-tienda button.button:not(.button.alt) {
	background: transparent;
	background-color: transparent;
	border-color: var(--c-rojo);
	color: var(--c-rojo);
}

body.woocommerce-page .c-tienda a.button:not(.button.alt):hover,
body.woocommerce-page .c-tienda button.button:not(.button.alt):hover {
	background: var(--c-rojo);
	background-color: var(--c-rojo);
	color: var(--c-papel);
}

/* ------------------------------------------------------- Filtros de categoría */

/*
 * Dos filas: arriba el tipo de pieza y abajo el material. Son enlaces
 * Normales, no botones de JavaScript: cada uno lleva a la dirección de su
 * categoría, así que se puede compartir y el buscador la encuentra.
 */
.c-filtros {
	margin: 0 0 2rem;
	padding: 1.1rem 1.25rem;
	background: var(--c-humo);
	border: 1px solid var(--c-borde);
	border-radius: var(--c-radio);
}

.c-filtros__fila {
	display: flex;
	align-items: baseline;
	gap: 1rem;
}

.c-filtros__fila + .c-filtros__fila {
	margin-top: 0.75rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--c-borde);
}

.c-filtros__titulo {
	flex-shrink: 0;
	width: 7.5rem;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--c-texto-tenue);
}

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

.c-filtros__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.35rem 0.75rem;
	border: 1px solid var(--c-borde);
	border-radius: 999px;
	background: var(--c-papel);
	color: var(--c-texto);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.5;
	text-decoration: none;
	transition: border-color var(--c-transicion), color var(--c-transicion), background-color var(--c-transicion);
}

.c-filtros__chip:hover {
	border-color: var(--c-rojo);
	color: var(--c-rojo);
}

.c-filtros__chip--activo,
.c-filtros__chip--activo:hover {
	background: var(--c-rojo);
	border-color: var(--c-rojo);
	color: var(--c-papel);
}

/* El número de piezas de cada categoría. */
.c-filtros__cuenta {
	font-size: 0.75rem;
	font-weight: 700;
	opacity: 0.7;
}

/* ---------------------------------------------------------------- Catálogo */

body.woocommerce-page .c-tienda ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 2rem 1.5rem;
	padding: 0;
	margin: 0;
	list-style: none;
}

body.woocommerce-page .c-tienda ul.products::before,
body.woocommerce-page .c-tienda ul.products::after {
	content: none;
}

body.woocommerce-page .c-tienda ul.products li.product {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	clear: none !important;
	display: flex;
	flex-direction: column;
	background: var(--c-papel);
	border: 1px solid var(--c-borde);
	border-radius: var(--c-radio);
	overflow: hidden;
	transition: border-color var(--c-transicion), box-shadow var(--c-transicion);
}

body.woocommerce-page .c-tienda ul.products li.product:hover {
	border-color: var(--c-rojo);
	box-shadow: var(--c-sombra);
}

/*
 * La imagen va con `display: block` y ancho completo, sin altura fija:
 * con `aspect-ratio` la foto se recortaba y el hueco que dejaba la
 * tapaba el precio de debajo.
 */
body.woocommerce-page .c-tienda ul.products li.product a img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	border-radius: 0;
	object-fit: cover;
}

body.woocommerce-page .c-tienda ul.products li.product .woocommerce-loop-product__title {
	padding: 1rem 1.1rem 0.35rem;
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--c-texto);
}

body.woocommerce-page .c-tienda ul.products li.product .price {
	display: block;
	padding: 0 1.1rem 1rem;
	margin: 0;
	color: var(--c-rojo);
	font-size: 1rem;
	font-weight: 700;
}

body.woocommerce-page .c-tienda ul.products li.product .price del {
	color: var(--c-texto-tenue);
	font-weight: 400;
}

body.woocommerce-page .c-tienda ul.products li.product .price ins {
	text-decoration: none;
}

body.woocommerce-page .c-tienda ul.products li.product .onsale,
body.woocommerce-page .c-tienda span.onsale {
	min-width: 0;
	min-height: 0;
	padding: 0.25em 0.7em;
	margin: 0.8rem 0 0 0.8rem;
	border-radius: var(--c-radio-chico);
	background: var(--c-rojo);
	color: var(--c-papel);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.6;
	text-transform: uppercase;
}

body.woocommerce-page .c-tienda ul.products li.product .button {
	margin: auto 1.1rem 1.1rem;
	width: calc(100% - 2.2rem);
}

/* --------------------------------------------------- Ficha del producto */

/*
 * La foto y los datos van en dos columnas. Se declara `display: grid` con
 * columnas explícitas porque el `float` que trae WooCommerce deja la
 * ficha descuadrada en cuanto un elemento baja de altura.
 *
 * La galería NO lleva `position: sticky`: con la rejilla de una sola
 * columna en pantallas estrechas se salía de su sitio y tapaba el precio.
 */
body.woocommerce-page .c-tienda div.product {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 3rem;
	align-items: start;
	margin: 0;
	width: 100%;
	float: none;
}

/* «También te puede interesar» es el TERCER hijo de esa rejilla de dos
 * columnas. Sin esto cae en la celda de la foto y se queda con la mitad del
 * ancho: medido a 1400 px, el bloque sacaba 546 px de 1140 y sus tarjetas
 * quedaban en 119 px, con el botón «Añadir al carrito» partido en cuatro
 * líneas. Al ocupar las dos columnas pasa a ocupar el ancho entero. */
body.woocommerce-page .c-tienda div.product > .related.products {
	grid-column: 1 / -1;
	float: none;
	clear: both;
	width: 100%;
	margin: 1rem 0 0;
}

body.woocommerce-page .c-tienda div.product > .related.products > h2 {
	margin: 0 0 1.5rem;
}

/* La galería y el resumen son las dos celdas, en orden. */
body.woocommerce-page .c-tienda div.product div.images,
body.woocommerce-page .c-tienda div.product .woocommerce-product-gallery {
	width: auto !important;
	float: none !important;
	margin: 0;
}

body.woocommerce-page .c-tienda div.product div.summary,
body.woocommerce-page .c-tienda div.product .summary {
	width: auto !important;
	float: none !important;
	margin: 0;
}

/* La imagen de la galería, sin alturas forzadas. */
body.woocommerce-page .c-tienda div.product div.images img,
body.woocommerce-page .c-tienda div.product .woocommerce-product-gallery img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 auto;
	border-radius: var(--c-radio);
}

body.woocommerce-page .c-tienda div.product .woocommerce-product-gallery {
	position: static;
}

/* Las miniaturas que pone WooCommerce en el lateral. */
body.woocommerce-page .c-tienda div.product .woocommerce-product-gallery__thumbnail {
	border: 1px solid var(--c-borde);
	border-radius: var(--c-radio-chico);
}

body.woocommerce-page .c-tienda div.product div.images .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
}

body.woocommerce-page .c-tienda div.product div.images .flex-control-thumbs li {
	width: 5rem;
	float: none;
	margin: 0;
}

body.woocommerce-page .c-tienda div.product div.images .flex-control-thumbs img {
	width: 100%;
	height: auto;
}

body.woocommerce-page .c-tienda div.product .product_title {
	margin: 0 0 0.5rem;
	padding: 0;
	font-size: 2rem;
	line-height: 1.2;
	color: var(--c-texto);
}

body.woocommerce-page .c-tienda div.product .price {
	margin: 0 0 1rem;
	color: var(--c-rojo);
	font-size: 1.5rem;
	font-weight: 700;
}

body.woocommerce-page .c-tienda div.product .woocommerce-product-details__short-description {
	color: var(--c-texto-tenue);
	font-size: 1.0625rem;
	line-height: 1.65;
}

/* El resumen, con sus separadores. */
body.woocommerce-page .c-tienda div.product .summary > * {
	margin-bottom: 1.1rem;
}

/*
 * El formulario de compra es una fila: la cantidad a la izquierda y el
 * botón a la derecha, ocupando el hueco que quede.
 *
 * Antes era una rejilla de una sola columna, y por eso la cantidad y el
 * botón caían uno debajo de otro y el botón quedaba ancho entero, que es
 * justo lo que se veía mal.
 *
 * `display: contents` aplana el envoltorio que WooCommerce pone entre
 * ellos —`.variations_button` en los productos con medidas—, de forma que
 * sus hijos pasan a ser elementos de esta fila y los dos tipos de
 * producto —con medidas y sin ellas— se colocan igual.
 */
body.woocommerce-page .c-tienda div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	margin: 1.5rem 0;
	padding: 1.5rem;
	background: var(--c-humo);
	border: 1px solid var(--c-borde);
	border-radius: var(--c-radio);
}

body.woocommerce-page .c-tienda div.product form.cart .variations_button {
	display: contents;
}

/*
 * Con medidas, WooCommerce mete cantidad y botón dos envoltorios más
 * abajo: `.single_variation_wrap` y, dentro, `.variations_button`. El
 * primero es el que manda, porque se queda con el ancho que le toca por su
 * cuenta y el botón se queda sin sitio —se veía estrecho, de 160px—,
 * así que también hay que aplanarlo y darle la fila entera.
 */
body.woocommerce-page .c-tienda div.product form.cart .single_variation_wrap {
	flex: 1 0 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	margin: 0;
}

/*
 * El aviso de WooCommerce —precio y existencias de la medida elegida— va
 * en su propia fila, encima de la de comprar. Vacío no ocupa sitio.
 */
body.woocommerce-page .c-tienda div.product form.cart .single_variation {
	flex: 1 0 100%;
	margin: 0;
}

body.woocommerce-page .c-tienda div.product form.cart .single_variation:empty {
	display: none;
}

/* La tabla de medidas ocupa su propia fila entera. */
body.woocommerce-page .c-tienda div.product form.cart table.variations {
	flex: 1 0 100%;
}

/* El desplegable de medidas. */
body.woocommerce-page .c-tienda div.product form.cart table.variations {
	width: 100%;
	margin: 0;
	border: 0;
}

body.woocommerce-page .c-tienda div.product form.cart table.variations th,
body.woocommerce-page .c-tienda div.product form.cart table.variations td {
	padding: 0 0 0.6rem;
	background: none;
	border: 0;
	text-align: left;
	vertical-align: top;
}

body.woocommerce-page .c-tienda div.product form.cart table.variations th.label {
	width: 6rem;
	padding-top: 0.55rem;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--c-texto);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

body.woocommerce-page .c-tienda div.product form.cart select,
body.woocommerce-page .c-tienda .select2-container .select2-selection--single {
	width: 100%;
	min-height: 2.75rem;
	padding: 0.5rem 2rem 0.5rem 0.9rem;
	border: 1px solid var(--c-borde);
	border-radius: var(--c-radio-chico);
	background-color: var(--c-papel);
	color: var(--c-texto);
	font-family: inherit;
	font-size: 0.9375rem;
}

body.woocommerce-page .c-tienda a.reset_variations {
	display: inline-block;
	margin-top: 0.5rem;
	font-size: 0.8125rem;
	color: var(--c-texto-tenue);
}

body.woocommerce-page .c-tienda .woocommerce-variation-availability {
	font-size: 0.875rem;
	color: var(--c-exito);
}

/* La cantidad: ancho fijo, a la izquierda de la fila. */
body.woocommerce-page .c-tienda div.product form.cart .quantity {
	flex: 0 0 5.5rem;
	width: 5.5rem;
	margin: 0;
}

body.woocommerce-page .c-tienda div.product form.cart .quantity input.qty {
	width: 100%;
	min-height: 3rem;
}

/* El botón se queda con todo el hueco de la derecha. */
body.woocommerce-page .c-tienda div.product form.cart .single_add_to_cart_button {
	flex: 1 1 auto;
	margin: 0;
	min-height: 3rem;
}

/* El aviso del IVA que añade inc/tienda.php. */
.c-tienda__iva {
	margin: 1rem 0 0;
	font-size: 0.875rem;
	color: var(--c-texto-tenue);
}

/* ------------------------------------------------------ Carrito y pedido */

/*
 * El carrito en dos columnas: la lista de artículos a la izquierda y los
 * totales a la derecha.
 *
 * WooCommerce lo deja con la tabla a todo el ancho y los totales debajo,
 * ocupando la mitad derecha, con lo que media pantalla se queda vacía. Con
 * esta rejilla las dos cosas caben en la misma fila y se aprovecha el
 * ancho.
 *
 * Ojo: el contenedor es `.woocommerce`, que en otras páginas de la tienda
 * va en una sola columna, así que la rejilla se limita al carrito con la
 * clase que WordPress pone en el body.
 */
body.woocommerce-cart .c-tienda .woocommerce {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 2.5rem;
}

body.woocommerce-cart .c-tienda .woocommerce > .woocommerce-notices-wrapper,
body.woocommerce-cart .c-tienda .woocommerce > .woocommerce-info,
body.woocommerce-cart .c-tienda .woocommerce > .woocommerce-message {
	flex: 1 0 100%;
}

body.woocommerce-cart .c-tienda form.woocommerce-cart-form {
	flex: 1 1 60%;
	float: none;
	width: auto;
	margin: 0;
}

body.woocommerce-cart .c-tienda .cart-collaterals {
	flex: 1 1 34%;
	float: none;
	width: auto;
	margin: 0;
}

/* Los totales van a su caja, con el mismo aire que el resto. */
body.woocommerce-cart .c-tienda .cart_totals {
	padding: 1.25rem 1.5rem;
	background: var(--c-humo);
	border: 1px solid var(--c-borde);
	border-radius: var(--c-radio);
}

body.woocommerce-cart .c-tienda .cart_totals h2 {
	margin: 0 0 1rem;
	padding: 0;
}

/*
 * El botón «Actualizar el carrito» está deshabilitado hasta que se cambia
 * una cantidad, y WooCommerce lo pone gris. Se deja rojo pero más apagado,
 * para que se vea que es un botón y no un trozo de texto perdido.
 */
body.woocommerce-page .c-tienda .button:disabled,
body.woocommerce-page .c-tienda .button.disabled,
body.woocommerce-page .c-tienda button.button:disabled {
	opacity: 0.55;
	cursor: not-allowed;
	background: var(--c-rojo);
	background-color: var(--c-rojo);
	border-color: var(--c-rojo);
	color: var(--c-papel);
}

body.woocommerce-page .c-tienda table.shop_table {
	width: 100%;
	margin: 0 0 2rem;
	border: 0;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

body.woocommerce-page .c-tienda table.shop_table th {
	padding: 0.85rem 0.6rem;
	border-bottom: 1px solid var(--c-borde);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	text-align: left;
	color: var(--c-texto-tenue);
}

body.woocommerce-page .c-tienda table.shop_table td {
	padding: 1rem 0.6rem;
	border-bottom: 1px solid var(--c-borde);
	vertical-align: middle;
	color: var(--c-texto);
}

body.woocommerce-page .c-tienda table.shop_table td a {
	color: var(--c-texto);
	text-decoration: none;
}

body.woocommerce-page .c-tienda table.shop_table td a:hover {
	color: var(--c-rojo);
}

body.woocommerce-page .c-tienda table.shop_table img {
	width: 72px;
	height: auto;
	border-radius: var(--c-radio-chico);
}

body.woocommerce-page .c-tienda .quantity input.qty {
	width: 4.5rem;
	padding: 0.5rem;
	border: 1px solid var(--c-borde);
	border-radius: var(--c-radio-chico);
	font-family: inherit;
	text-align: center;
}

body.woocommerce-page .c-tienda .cart_totals,
body.woocommerce-page .c-tienda-checkout-review-order-table {
	width: 100%;
}

body.woocommerce-page .c-tienda .cart_totals h2,
body.woocommerce-page .c-tienda-checkout-review-order h3 {
	font-size: 1.125rem;
	color: var(--c-texto);
}

body.woocommerce-page .c-tienda .cart_totals .order-total th,
body.woocommerce-page .c-tienda-checkout-review-order .order-total th {
	font-size: 1.0625rem;
	color: var(--c-texto);
}

body.woocommerce-page .c-tienda .order-total td {
	font-weight: 700;
	color: var(--c-rojo);
}

body.woocommerce-page .c-tienda ul.cart_list {
	padding: 0;
	list-style: none;
}

body.woocommerce-page .c-tienda ul.cart_list li {
	display: flex;
	gap: 1rem;
	padding: 1rem 0;
	border-bottom: 1px solid var(--c-borde);
}

/* --------------------------------------------------------------- Avisos */

body.woocommerce-page .c-tienda .woocommerce-message,
body.woocommerce-page .c-tienda .woocommerce-info,
body.woocommerce-page .c-tienda .woocommerce-error,
body.woocommerce-page .c-tienda .woocommerce-notice {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 1.5rem;
	padding: 0.9rem 1.1rem;
	border: 1px solid var(--c-borde);
	border-left: 3px solid var(--c-rojo);
	border-radius: var(--c-radio-chico);
	background: var(--c-humo);
	font-size: 0.9375rem;
	list-style: none;
}

body.woocommerce-page .c-tienda .woocommerce-message::before,
body.woocommerce-page .c-tienda .woocommerce-info::before,
body.woocommerce-page .c-tienda .woocommerce-error::before,
body.woocommerce-page .c-tienda .woocommerce-notice::before {
	content: none;
}

/* ------------------------------------------------------------ Formularios */

body.woocommerce-page .c-tienda form .form-row {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin: 0 0 1rem;
	padding: 0;
}

body.woocommerce-page .c-tienda form .form-row label {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--c-texto);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

body.woocommerce-page .c-tienda form .form-row .required {
	color: var(--c-rojo);
	text-decoration: none;
}

body.woocommerce-page .c-tienda form input.input-text,
body.woocommerce-page .c-tienda form textarea,
body.woocommerce-page .c-tienda form select,
body.woocommerce-page .c-tienda .select2-container .select2-selection--single {
	width: 100%;
	min-height: 2.75rem;
	padding: 0.55rem 0.9rem;
	border: 1px solid var(--c-borde);
	border-radius: var(--c-radio-chico);
	background-color: var(--c-papel);
	color: var(--c-texto);
	font-family: inherit;
	font-size: 0.9375rem;
}

body.woocommerce-page .c-tienda form textarea {
	min-height: 7rem;
	resize: vertical;
}

body.woocommerce-page .c-tienda form input.input-text:focus,
body.woocommerce-page .c-tienda form select:focus,
body.woocommerce-page .c-tienda form textarea:focus {
	outline: 2px solid var(--c-rojo);
	outline-offset: 1px;
	border-color: var(--c-rojo);
}

body.woocommerce-page .c-tienda .select2-container .select2-selection--single {
	display: flex;
	align-items: center;
}

body.woocommerce-page .c-tienda .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 100%;
}

body.woocommerce-page .c-tienda form .form-row.woocommerce-invalid input.input-text {
	border-color: var(--c-rojo);
}

/* ------------------------------------------------------ Migas y paginación */

body.woocommerce-page .c-tienda .woocommerce-breadcrumb {
	margin-bottom: 1.25rem;
	font-size: 0.8125rem;
	color: var(--c-texto-tenue);
}

body.woocommerce-page .c-tienda .woocommerce-breadcrumb a {
	color: var(--c-texto-tenue);
}

body.woocommerce-page .c-tienda .woocommerce-ordering,
body.woocommerce-page .c-tienda .woocommerce-result-count {
	margin: 0 0 1.5rem;
	font-size: 0.875rem;
	color: var(--c-texto-tenue);
}

body.woocommerce-page .c-tienda .woocommerce-ordering select {
	min-height: 2.5rem;
	padding: 0.4rem 2rem 0.4rem 0.75rem;
	border: 1px solid var(--c-borde);
	border-radius: var(--c-radio-chico);
	background-color: var(--c-papel);
	color: var(--c-texto);
	font-family: inherit;
	font-size: 0.875rem;
}

body.woocommerce-page .c-tienda nav.woocommerce-pagination ul {
	display: flex;
	gap: 0.4rem;
	padding: 0;
	list-style: none;
	border: 0;
}

body.woocommerce-page .c-tienda nav.woocommerce-pagination li {
	border: 0;
}

body.woocommerce-page .c-tienda nav.woocommerce-pagination a,
body.woocommerce-page .c-tienda nav.woocommerce-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.6rem;
	border: 1px solid var(--c-borde);
	border-radius: var(--c-radio-chico);
	color: var(--c-texto);
	text-decoration: none;
}

body.woocommerce-page .c-tienda nav.woocommerce-pagination .page-numbers.current {
	background: var(--c-rojo);
	border-color: var(--c-rojo);
	color: var(--c-papel);
}

/* ------------------------------------------------------------- Mi cuenta */

body.woocommerce-page .c-tienda-account .woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: 0;
	margin: 0 0 2rem;
	list-style: none;
}

body.woocommerce-page .c-tienda-account .woocommerce-MyAccount-navigation li a {
	display: inline-block;
	padding: 0.6rem 1rem;
	border: 1px solid var(--c-borde);
	border-radius: var(--c-radio-chico);
	color: var(--c-texto);
	text-decoration: none;
}

body.woocommerce-page .c-tienda-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--c-rojo);
	border-color: var(--c-rojo);
	color: var(--c-papel);
}

/* ------------------------------------------------------------- Pantallas */

@media (max-width: 1200px) {
	body.woocommerce-page .c-tienda ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 980px) {
	body.woocommerce-page .c-tienda div.product {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.75rem;
	}

	body.woocommerce-page .c-tienda ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 620px) {
	body.woocommerce-page .c-tienda ul.products {
		grid-template-columns: minmax(0, 1fr);
	}

	.c-filtros__fila {
		flex-direction: column;
		gap: 0.5rem;
	}

	.c-filtros__titulo {
		width: auto;
	}

	body.woocommerce-page .c-tienda table.shop_table thead {
		display: none;
	}

	body.woocommerce-page .c-tienda table.shop_table tr.cart_item,
	body.woocommerce-page .c-tienda table.shop_table tr.order-total {
		display: block;
		padding: 0.75rem 0;
		border-bottom: 1px solid var(--c-borde);
	}

	body.woocommerce-page .c-tienda table.shop_table td {
		display: flex;
		justify-content: space-between;
		gap: 1rem;
		padding: 0.25rem 0;
		border: 0;
	}

	.c-barra__tienda {
		gap: 0.75rem;
	}
}