/* ==========================================================================
   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.

   Solo se carga en las páginas con productos: ver inc/estilos.php.
   ========================================================================== */

/* ------------------------------------------------------------- Cabecera */

/* Carrito y cuenta, en la barra de la cabecera. */
.n-cabecera__tienda {
	display: flex;
	align-items: center;
	gap: 1rem;
}

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

.n-tienda-carrito:hover,
.n-tienda-cuenta:hover {
	color: var(--n-oro-oscuro);
}

.n-tienda-carrito svg,
.n-tienda-cuenta svg {
	width: 1.15rem;
	height: 1.15rem;
	flex: none;
	color: var(--n-oro);
}

/* El número va en un círculo. Con el carrito vacío no se enseña: un cero
   al lado del icono distrae. */
.n-tienda-carrito__cuenta {
	display: none;
	align-items: center;
	justify-content: center;
	min-width: 1.35rem;
	height: 1.35rem;
	padding: 0 0.3rem;
	border-radius: 999px;
	background: var(--n-oro);
	color: var(--n-blanco);
	font-size: 0.7rem;
	font-weight: 700;
	line-height: 1;
}

.n-tienda-carrito:not([data-cuenta="0"]) .n-tienda-carrito__cuenta {
	display: inline-flex;
}

@media (max-width: 34rem) {
	.n-tienda-cuenta span {
		display: none;
	}
}

/* ------------------------------------------------------- Botones y enlaces */

/* Los botones de WooCommerce con la forma del sitio. */
.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,
.woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce .return-to-shop a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 0.85em 1.9em;
	border: 1px solid var(--n-oro);
	border-radius: var(--n-radio);
	background: var(--n-oro);
	color: var(--n-blanco);
	font-family: var(--n-fuente-texto);
	font-size: var(--n-tam-pequeno);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1.2;
	transition: background-color var(--n-transicion), border-color var(--n-transicion),
		color var(--n-transicion);
}

.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,
.woocommerce input.button.alt:hover,
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce .return-to-shop a.button:hover {
	background: var(--n-oro-oscuro);
	border-color: var(--n-oro-oscuro);
	color: var(--n-blanco);
}

.woocommerce a.button.added_to_cart,
.woocommerce a.button:not(.add_to_cart_button):disabled {
	background: var(--n-oliva);
	border-color: var(--n-oliva);
	color: var(--n-blanco);
}

/* Botones de un solo borde: los secundarios, como el de «seguir
   comprando». El botón de pagar el pedido lleva también la clase «alt»,
   así que no entra aquí: ese es el principal y va relleno. */
.woocommerce .checkout-button {
	background: transparent;
	color: var(--n-oro-oscuro);
}

/* El botón de cantidad, que es un grupo. */
.woocommerce .quantity {
	display: inline-flex;
	align-items: stretch;
}

.woocommerce .quantity .qty {
	width: 4.5rem;
	padding: 0.6em 0.4em;
	border: 1px solid var(--n-linea-fuerte);
	border-radius: var(--n-radio);
	background: var(--n-blanco);
	color: var(--n-tinta);
	font-family: var(--n-fuente-texto);
	text-align: center;
}

.woocommerce .quantity input::-webkit-outer-spin-button,
.woocommerce .quantity input::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

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

.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="url"],
.woocommerce input[type="password"],
.woocommerce input[type="search"],
.woocommerce input[type="number"],
.woocommerce textarea,
.woocommerce select {
	max-width: 100%;
	box-sizing: border-box;
	padding: 0.7em 0.8em;
	border: 1px solid var(--n-linea-fuerte);
	border-radius: var(--n-radio);
	background: var(--n-blanco);
	color: var(--n-tinta);
	font-family: var(--n-fuente-texto);
	font-size: var(--n-tam-pequeno);
	line-height: 1.5;
}

.woocommerce input:focus,
.woocommerce textarea:focus,
.woocommerce select:focus {
	border-color: var(--n-oro);
	outline: 2px solid rgb(173 134 89 / 25%);
	outline-offset: 1px;
}

.woocommerce label {
	display: block;
	margin-bottom: 0.35rem;
	color: var(--n-tinta-media);
	font-size: var(--n-tam-mini);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

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

.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--n-hueco);
	padding: 0;
	margin: 0;
	list-style: none;
}

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

.woocommerce ul.products li.product {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	clear: none !important;
	overflow: hidden;
}

.woocommerce ul.products li.product a img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	margin: 0 !important;
	border-radius: var(--n-radio-grande);
	object-fit: cover;
	background: var(--n-crema-oscuro);
}

@media (max-width: 48rem) {
	.woocommerce ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1rem;
	}
}

@media (max-width: 30rem) {
	.woocommerce ul.products {
		grid-template-columns: 1fr;
	}
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	margin: 0.9rem 0 0.3rem;
	padding: 0;
	color: var(--n-tinta);
	font-family: var(--n-fuente-titulo);
	font-size: 1.4rem;
	font-weight: 600;
	line-height: 1.2;
}

.woocommerce ul.products li.product .price {
	margin: 0;
	color: var(--n-tinta-media);
	font-family: var(--n-fuente-texto);
	font-size: var(--n-tam-pequeno);
}

.woocommerce ul.products li.product .price del {
	color: var(--n-piedra);
}

.woocommerce ul.products li.product .price ins {
	text-decoration: none;
	font-weight: 700;
}

.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
	min-width: auto;
	min-height: auto;
	padding: 0.25em 0.7em;
	border-radius: 999px;
	background: var(--n-terracota);
	color: var(--n-blanco);
	font-size: var(--n-tam-mini);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.woocommerce ul.products li.product .button {
	margin-top: 0.9rem;
}

/* El listado y el encabezado del catálogo. */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
	margin: 0 0 0.9rem;
	font-family: var(--n-fuente-texto);
	font-size: var(--n-tam-mini);
}

.woocommerce .woocommerce-ordering select {
	min-width: 16rem;
}

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

/* WooCommerce flotaba la ficha a dos columnas con anchuras del 48 %. Aquí
   manda la rejilla, así que esos flotados hay que anularlos. */
.woocommerce div.product {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: start;
}

.woocommerce div.product .summary,
.woocommerce div.product .woocommerce-product-gallery {
	float: none !important;
	width: auto !important;
	min-width: 0;
}

@media (max-width: 56rem) {
	.woocommerce div.product {
		grid-template-columns: minmax(0, 1fr);
	}
}

.woocommerce div.product .product_title {
	margin: 0 0 0.6rem;
	color: var(--n-tinta);
	font-family: var(--n-fuente-titulo);
	font-size: clamp(2rem, 1.3rem + 2.2vw, 3rem);
	font-weight: 600;
	line-height: 1.1;
}

.woocommerce div.product .price {
	margin: 0 0 1rem;
	color: var(--n-tinta);
	font-family: var(--n-fuente-texto);
	font-size: 1.5rem;
	font-weight: 700;
}

.woocommerce div.product .price del {
	color: var(--n-piedra);
	font-weight: 400;
}

.woocommerce div.product .price ins {
	text-decoration: none;
}

.n-tienda__iva {
	margin: 0 0 1.1rem;
	color: var(--n-piedra);
	font-size: var(--n-tam-mini);
}

.woocommerce div.product .woocommerce-product-details__short-description {
	color: var(--n-tinta-media);
	font-size: var(--n-tam-cuerpo);
	line-height: 1.7;
}

.woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.8rem;
	margin: 1.4rem 0;
}

.woocommerce div.product .product_meta {
	margin-top: 1.4rem;
	padding-top: 1.1rem;
	border-top: 1px solid var(--n-linea);
	color: var(--n-piedra);
	font-size: var(--n-tam-mini);
}

.woocommerce div.product .product_meta a {
	color: var(--n-oro-oscuro);
}

/* Pestañas de la ficha. */
.woocommerce div.product .woocommerce-tabs {
	grid-column: 1 / -1;
	margin-top: clamp(1.5rem, 4vw, 2.5rem);
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 1.4rem;
	margin: 0 0 1.2rem;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--n-linea);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
	content: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0 0 0.6rem;
	border-bottom: 2px solid transparent;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	border-bottom-color: var(--n-oro);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	color: var(--n-tinta-media);
	font-family: var(--n-fuente-texto);
	font-size: var(--n-tam-pequeno);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
}

.woocommerce div.product .woocommerce-tabs .panel h2,
.woocommerce div.product .woocommerce-tabs .panel h3 {
	color: var(--n-tinta);
	font-family: var(--n-fuente-titulo);
	font-weight: 600;
	line-height: 1.2;
}

.woocommerce div.product .woocommerce-tabs .panel p,
.woocommerce div.product .woocommerce-tabs .panel li {
	color: var(--n-tinta-media);
	line-height: 1.7;
}

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

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin: 0 0 var(--n-hueco);
	padding: 0.9rem 1.1rem;
	border: 1px solid var(--n-linea);
	border-top: 3px solid var(--n-oro);
	border-radius: var(--n-radio);
	background: var(--n-crema-oscuro);
	color: var(--n-tinta-media);
	font-family: var(--n-fuente-texto);
	font-size: var(--n-tam-pequeno);
	list-style: none;
}

.woocommerce-message {
	border-top-color: var(--n-oliva);
}

.woocommerce-error {
	border-top-color: var(--n-terracota);
	background: #fdf4f1;
}

.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-error::before {
	display: none;
}

.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
	padding: 0.5em 1em;
	font-size: var(--n-tam-mini);
}

/* WooCommerce no carga su hoja de texto-oculto-a-lectores, así que su
   «Quitar artículo» se cuenta y la columna de la papelera se hincha. */
.woocommerce .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

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

/* ------------------------------------------------------------- Carrito */

.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce {
	display: block;
	width: 100%;
}

.woocommerce-cart .woocommerce > form.woocommerce-cart-form,
.woocommerce-cart .woocommerce > .cart-collaterals {
	float: none !important;
	width: auto !important;
	min-width: 0;
}

.woocommerce-cart .woocommerce > form.woocommerce-cart-form {
	display: block;
	text-align: left;
}

.woocommerce-cart .woocommerce > .cart-collaterals {
	margin-top: 1.8rem;
	padding-top: 1.4rem;
	border-top: 1px solid var(--n-linea);
}

.woocommerce-cart .cart_totals {
	float: none !important;
	width: 100% !important;
	max-width: 30rem;
	margin-left: auto;
}

/* Tabla del carrito. */
.woocommerce-cart .woocommerce-cart-form__contents th,
.woocommerce-cart .woocommerce-cart-form__contents td {
	vertical-align: middle;
}

.woocommerce-cart .woocommerce-cart-form__contents .product-remove {
	width: 3rem;
	text-align: center;
}

.woocommerce-cart .woocommerce-cart-form__contents .product-thumbnail {
	width: 5.5rem;
}

.woocommerce-cart .woocommerce-cart-form__contents .product-name {
	width: auto;
	min-width: 14rem;
}

.woocommerce-cart .woocommerce-cart-form__contents .product-price,
.woocommerce-cart .woocommerce-cart-form__contents .product-subtotal {
	width: 8rem;
	white-space: nowrap;
}

.woocommerce-cart .woocommerce-cart-form__contents .product-quantity {
	width: 7rem;
}

@media (max-width: 40rem) {
	.woocommerce-cart .woocommerce-cart-form__contents .product-name {
		min-width: 0;
	}
}

/* La fila del cupón es una celda de la tabla, así que no puede llevar
   display: flex: al dejar de ser celda, el colspan se ignora y se queda
   con el ancho de una columna. Se flotan los hijos, que sí funciona. */
.woocommerce-cart .woocommerce-cart-form td.actions {
	padding: 0.9rem 0.6rem;
}

.woocommerce-cart .woocommerce-cart-form td.actions .coupon {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	margin: 0;
}

.woocommerce-cart .woocommerce-cart-form td.actions .coupon label {
	margin: 0;
}

.woocommerce-cart .woocommerce-cart-form td.actions button[name="update_cart"] {
	float: right;
	margin: 0;
}

/* Totales. */
.woocommerce-cart .cart_totals h2,
.woocommerce-checkout #order_review_heading {
	margin: 0 0 0.8rem;
	color: var(--n-tinta);
	font-family: var(--n-fuente-titulo);
	font-size: 1.5rem;
	font-weight: 600;
}

.woocommerce-cart .cart_totals table {
	margin: 0;
	border: 0;
}

.woocommerce-cart .cart_totals th,
.woocommerce-cart .cart_totals td {
	padding: 0.55rem 0;
	border: 0;
	background: none;
	color: var(--n-tinta-media);
	font-family: var(--n-fuente-texto);
	font-size: var(--n-tam-pequeno);
	text-align: left;
}

.woocommerce-cart .cart_totals tr.order-total th,
.woocommerce-cart .cart_totals tr.order-total td {
	border-top: 1px solid var(--n-linea);
	padding-top: 0.8rem;
	color: var(--n-tinta);
	font-weight: 700;
	font-size: var(--n-tam-cuerpo);
}

/* ------------------------------------------------------------- Pago */

/* El formulario de pago, en dos columnas: los datos y, al lado, el
   resumen del pedido. WooCommerce lo monta con display: table y columnas
   flotadas al 50 %, así que aquí se rehace con rejilla. */
@media (min-width: 64rem) {
	.woocommerce-checkout form.checkout {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) minmax(0, 21rem);
		grid-template-rows: auto 1fr;
		gap: 0 clamp(1.5rem, 3vw, 3rem);
		align-items: start;
	}
}

.woocommerce-checkout form.checkout > .col2-set {
	grid-column: 1;
	grid-row: 1 / span 2;
	min-width: 0;
}

.woocommerce-checkout form.checkout > #order_review_heading,
.woocommerce-checkout form.checkout > #order_review {
	grid-column: 2;
}

/* Los datos de facturación y de envío son una columna de texto normal. Si
   se les pone una rejilla propia, el primer campo se va a la segunda
   columna y se queda media pantalla de blanco a su izquierda. */
.woocommerce-checkout #customer_details,
.woocommerce-checkout #customer_details .col2-set,
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
	display: block !important;
	grid-template-columns: none !important;
	float: none !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0;
	padding: 0;
}

/* Y dentro de cada bloque, los campos a dos columnas. */
@media (min-width: 48rem) {
	.woocommerce-checkout #customer_details .woocommerce-billing-fields,
	.woocommerce-checkout #customer_details .woocommerce-shipping-fields {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 1.2rem;
		align-items: start;
	}

	.woocommerce-checkout #customer_details .woocommerce-billing-fields > *,
	.woocommerce-checkout #customer_details .woocommerce-shipping-fields > * {
		grid-column: 1 / -1;
	}

	.woocommerce-checkout #customer_details .form-row:not(.form-row-wide),
	.woocommerce-checkout #customer_details .form-row-first,
	.woocommerce-checkout #customer_details .form-row-last {
		grid-column: auto;
	}
}

.woocommerce-checkout #customer_details .form-row {
	margin: 0 0 0.9rem;
}

.woocommerce-checkout #customer_details .form-row label {
	margin-bottom: 0.3rem;
}

.woocommerce-checkout #customer_details .woocommerce-input-wrapper {
	display: block;
	width: 100%;
}

.woocommerce-checkout #customer_details input,
.woocommerce-checkout #customer_details select {
	width: 100%;
}

.woocommerce-checkout #customer_details h3 {
	margin: 0 0 0.6rem;
	color: var(--n-tinta);
	font-family: var(--n-fuente-titulo);
	font-size: 1.35rem;
	font-weight: 600;
}

/* El bloque «¿has comprado antes?» y el del cupón. */
.woocommerce-checkout .woocommerce-form-login-toggle,
.woocommerce-checkout .woocommerce-form-coupon-toggle {
	list-style: none;
}

/* Resumen del pedido. */
.woocommerce-checkout #order_review {
	box-sizing: border-box;
	max-width: 100%;
	margin-top: 0;
	padding: 1.2rem;
	border: 1px solid var(--n-linea);
	border-radius: var(--n-radio);
	background: var(--n-blanco);
}

.woocommerce-checkout #order_review table {
	width: 100%;
	margin: 0;
	border: 0;
}

.woocommerce-checkout #order_review table th,
.woocommerce-checkout #order_review table td {
	padding: 0.55rem 0.2rem;
	border-bottom: 1px solid var(--n-linea);
	background: none;
	color: var(--n-tinta-media);
	font-family: var(--n-fuente-texto);
	font-size: var(--n-tam-mini);
	text-align: left;
	vertical-align: top;
}

.woocommerce-checkout #order_review .product-name {
	color: var(--n-tinta);
}

.woocommerce-checkout #order_review .order-total th,
.woocommerce-checkout #order_review .order-total td {
	border-bottom: 0;
	padding-top: 0.8rem;
	color: var(--n-tinta);
	font-weight: 700;
	font-size: var(--n-tam-pequeno);
}

/* Formas de pago. */
.woocommerce-checkout #payment {
	margin-top: 1.4rem;
	border-radius: var(--n-radio);
	background: var(--n-crema-oscuro);
}

.woocommerce-checkout #payment ul.payment_methods {
	padding: 1.1rem;
	border: 1px solid var(--n-linea);
	border-radius: var(--n-radio);
	background: var(--n-blanco);
	list-style: none;
}

.woocommerce-checkout #payment ul.payment_methods li {
	margin: 0 0 0.6rem;
}

.woocommerce-checkout #payment ul.payment_methods label {
	display: inline;
	margin: 0;
	color: var(--n-tinta);
	font-size: var(--n-tam-pequeno);
	letter-spacing: normal;
	text-transform: none;
}

.woocommerce-checkout #payment .payment_box {
	padding: 0.8rem;
	border-radius: var(--n-radio);
	background: var(--n-crema);
	color: var(--n-tinta-media);
	font-size: var(--n-tam-mini);
}

.woocommerce-checkout #payment .payment_box img {
	max-width: 160px;
	height: auto;
}

/* El botón de pagar el pedido: el más importante de todo el proceso. */
.woocommerce-checkout #place_order {
	width: 100%;
	padding: 1em 2em;
	background: var(--n-oro);
	border-color: var(--n-oro);
	color: var(--n-blanco);
	font-size: var(--n-tam-pequeno);
}

.woocommerce-checkout #place_order:hover {
	background: var(--n-oro-oscuro);
	border-color: var(--n-oro-oscuro);
}

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

.woocommerce-account .woocommerce-navigation {
	float: none !important;
	width: 100% !important;
	margin: 0 0 1.6rem;
}

.woocommerce-account .woocommerce-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.4rem;
	margin: 0;
	padding: 0 0 0.9rem;
	border-bottom: 1px solid var(--n-linea);
	list-style: none;
}

.woocommerce-account .woocommerce-navigation ul li {
	margin: 0;
	font-size: var(--n-tam-mini);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.woocommerce-account .woocommerce-navigation ul li a {
	color: var(--n-tinta-media);
	text-decoration: none;
}

.woocommerce-account .woocommerce-navigation ul li.is-active a {
	color: var(--n-oro-oscuro);
	font-weight: 700;
}

.woocommerce-account .woocommerce-MyAccount-content {
	float: none !important;
	width: 100% !important;
}

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

.woocommerce-breadcrumb {
	margin: 0 0 1.2rem;
	color: var(--n-piedra);
	font-family: var(--n-fuente-texto);
	font-size: var(--n-tam-mini);
}

.woocommerce-breadcrumb .woocommerce-breadcrumb__separator {
	margin: 0 0.4em;
	color: var(--n-linea-fuerte);
}

.woocommerce-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 1.6rem 0 0;
	padding: 0;
	border: 0;
	list-style: none;
}

.woocommerce-pagination ul.page-numbers li {
	margin: 0;
	border: 0;
}

.woocommerce-pagination ul.page-numbers a,
.woocommerce-pagination ul.page-numbers span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.4rem;
	height: 2.4rem;
	padding: 0 0.5rem;
	border: 1px solid var(--n-linea-fuerte);
	border-radius: var(--n-radio);
	color: var(--n-tinta-media);
	font-size: var(--n-tam-mini);
	text-decoration: none;
}

.woocommerce-pagination ul.page-numbers .current span {
	border-color: var(--n-oro);
	background: var(--n-oro);
	color: var(--n-blanco);
}

.woocommerce div[class*="woocommerce"] + div[class*="woocommerce"] {
	margin-top: 0;
}

/* Los enlaces sueltos de WooCommerce, que vienen subrayados y azules. */
.woocommerce a:not(.button):not(.added_to_cart) {
	color: var(--n-oro-oscuro);
}

/* Los mensajes de la página, sin adornos. */
.woocommerce .woocommerce-info {
	justify-content: flex-start;
	font-size: var(--n-tam-cuerpo);
}

/* Casillas de «crear cuenta» y «enviar a otra dirección».

   La regla de arriba pone los campos al ancho del todo, y a las casillas
   eso les deja la línea entera: la casilla se queda en una esquina y el
   texto, en otra. Aquí se les devuelve su medida y se alinean con su
   etiqueta. */
.woocommerce-checkout #customer_details input[type="checkbox"],
.woocommerce-checkout #customer_details input[type="radio"],
.woocommerce-checkout #customer_details .woocommerce-form__input-checkbox,
.woocommerce-checkout .woocommerce-shipping-toggle label input,
.woocommerce .woocommerce-form__label-for-checkbox input {
	width: auto;
	min-width: 0;
	flex: none;
}

.woocommerce-checkout #customer_details .woocommerce-form__label-for-checkbox,
.woocommerce-checkout .woocommerce-shipping-toggle label,
.woocommerce .woocommerce-form-login-toggle label {
	display: flex !important;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	color: var(--n-tinta-media);
	font-size: var(--n-tam-mini);
	letter-spacing: normal;
	text-transform: none;
}

.woocommerce-checkout #customer_details .createaccount,
.woocommerce-checkout #customer_details .woocommerce-shipping-fields__field-wrapper {
	margin-top: 0.6rem;
}

/* Espacio entre la cabecera de la página y el contenido de la tienda.

   La sección de las páginas normales respira con todo el aire del sitio,
   pero aquí, con el formulario de pago debajo, el hueco se come media
   pantalla sin ganar nada. Se deja la mitad. */
.n-seccion--tienda {
	padding-top: calc(var(--n-seccion) * 0.4);
}

@media (max-width: 40rem) {
	.n-seccion--tienda {
		padding-top: calc(var(--n-seccion) * 0.3);
	}
}

/* En el móvil, WooCommerce convierte la tabla del carrito en bloques con
   el nombre de cada campo encima. La miniatura se queda entonces como un
   hueco vacío al principio de cada producto, así que se quita. */
@media (max-width: 48rem) {
	.woocommerce-cart .woocommerce-cart-form__contents .product-thumbnail {
		display: none;
	}
}