/**
 * Carrito, pago y confirmación (doc 06, mockup 05).
 *
 * El flujo es el nativo de WooCommerce; esto le pone la piel de la casa: la
 * barra de tres pasos, las líneas en tarjetas de cristal y el resumen en la
 * columna de la derecha, que en móvil se va abajo.
 */

/* -------------------------------------------------- 1. Barra de pasos */

.bx-pasos {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--bx-e-2);
	flex-wrap: wrap;
	list-style: none;
	margin: 0 0 var(--bx-e-4);
	padding: 0;
	counter-reset: paso;
}

.bx-pasos__paso {
	display: flex;
	align-items: center;
	gap: var(--bx-e-2);
}

/* La línea que une un paso con el siguiente. */
.bx-pasos__paso:not(:last-child)::after {
	content: "";
	width: clamp(24px, 7vw, 92px);
	height: 1px;
	background: var(--bx-panel-linea);
}

.bx-pasos__paso--hecho:not(:last-child)::after {
	background: rgba(56, 214, 245, .5);
}

.bx .bx-pasos__enlace {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--bx-texto-3);
	font-family: var(--bx-ui);
	font-size: .8rem;
	font-weight: 600;
	text-decoration: none;
}

.bx-pasos__numero {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border: 1px solid var(--bx-panel-borde);
	border-radius: 50%;
	background: rgba(255, 255, 255, .04);
	font-size: .82rem;
	line-height: 1;
}

.bx-pasos__paso--activo .bx-pasos__enlace {
	color: var(--bx-texto);
}

/* El paso en el que se está, encendido con su halo. */
.bx-pasos__paso--activo .bx-pasos__numero {
	border-color: var(--bx-accent);
	background: linear-gradient(180deg, rgba(56, 214, 245, .28), rgba(56, 214, 245, .1));
	color: var(--bx-accent);
	box-shadow: 0 0 18px rgba(56, 214, 245, .35);
}

.bx-pasos__paso--hecho .bx-pasos__enlace {
	color: var(--bx-texto-2);
}

.bx-pasos__paso--hecho .bx-pasos__numero {
	border-color: rgba(56, 214, 245, .5);
	color: var(--bx-accent);
}

.bx .bx-pasos__paso--hecho a.bx-pasos__enlace:hover {
	color: var(--bx-accent);
}

@media (max-width: 480px) {
	/* En pantallas estrechas se quedan los números y el nombre del paso en
	   curso: los tres rótulos completos no caben sin partirse. */
	.bx-pasos__paso:not(.bx-pasos__paso--activo) .bx-pasos__nombre {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/* ------------------------------------------------------ 2. Estructura */

.bx .bx-compra__titulo {
	margin: 0 0 var(--bx-e-3);
	color: var(--bx-gold-claro);
	font-family: var(--bx-display);
	font-size: clamp(1.6rem, 5vw, 2.2rem);
	font-weight: 600;
}

.bx-compra {
	display: grid;
	gap: var(--bx-e-3);
}

/* Dos columnas solo en el carrito. El pago va apilado de arriba abajo, en
   secciones que se abren de una en una: el resumen ya no acompaña desde un
   lado, es el primer paso (petición de David, 21 de agosto de 2026). */
@media (min-width: 992px) {
	.bx-compra--carrito {
		grid-template-columns: minmax(0, 1fr) 380px;
		gap: var(--bx-e-4);
		align-items: start;
	}
}

/* El carrito reparte sus dos piezas entre las dos columnas. La estructura de
   WooCommerce mete el formulario y los "collaterals" como hermanos, así que se
   colocan por su sitio en la rejilla en vez de envolverlos. */
.bx-compra--carrito .bx-cesta__form {
	grid-column: 1;
}

.bx-compra--carrito .bx-cesta__lado {
	grid-column: 1;
	display: flex;
	flex-direction: column;
	gap: var(--bx-e-3);
}

/* El método de envío, a todo el ancho, debajo del formulario y por encima
   del resumen: necesita más sitio que la columna de 380 px del resumen —el
   selector de punto de recogida de Correos no cabe ahí—. */
.bx-compra--carrito .bx-cesta__envio {
	grid-column: 1;
}

@media (min-width: 992px) {
	.bx-compra--carrito .bx-cesta__envio {
		grid-column: 1 / -1;
		grid-row: 2;
	}

	.bx-compra--carrito .bx-cesta__lado {
		grid-row: 1;
	}
}

@media (min-width: 992px) {
	.bx-compra--carrito .bx-cesta__lado {
		grid-column: 2;
		grid-row: 1;
		position: sticky;
		top: var(--bx-e-3);
	}
}

/* ---------------------------------------------- 3. Líneas del carrito */

.bx-cesta__lineas {
	display: flex;
	flex-direction: column;
	gap: var(--bx-e-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.bx-cesta__linea {
	display: grid;
	grid-template-columns: 84px minmax(0, 1fr) auto;
	grid-template-areas:
		"foto datos quitar"
		"foto precio precio"
		"foto cantidad subtotal";
	align-items: center;
	gap: 10px var(--bx-e-2);
	padding: var(--bx-e-2);
	border: 1px solid var(--bx-panel-borde);
	border-radius: var(--bx-r-m);
	background: linear-gradient(160deg, rgba(9, 26, 42, .5) 0%, var(--bx-panel-fondo) 60%, rgba(3, 12, 22, .55) 100%);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}

@media (min-width: 782px) {
	/* En pantalla ancha, la fila del mockup: foto, nombre, precio, cantidad,
	   subtotal y papelera. */
	.bx-cesta__linea {
		grid-template-columns: 96px minmax(0, 1fr) 8rem 10rem 7rem auto;
		grid-template-areas: "foto datos precio cantidad subtotal quitar";
		gap: var(--bx-e-3);
	}
}

.bx-cesta__foto {
	grid-area: foto;
	overflow: hidden;
	border-radius: 10px;
	background: rgba(0, 0, 0, .3);
}

.bx .bx-cesta__foto img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	aspect-ratio: 1;
	object-fit: cover;
}

.bx-cesta__datos {
	grid-area: datos;
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.bx-cesta__nombre {
	color: var(--bx-texto);
	font-size: .98rem;
	font-weight: 600;
	line-height: 1.25;
}

.bx .bx-cesta__nombre a {
	color: inherit;
	text-decoration: none;
}

.bx .bx-cesta__nombre a:hover {
	color: var(--bx-accent);
}

.bx-cesta__variacion,
.bx-cesta__variacion p {
	margin: 0;
	color: var(--bx-texto-3);
	font-size: .78rem;
	line-height: 1.3;
}

.bx-cesta__precio {
	grid-area: precio;
	color: var(--bx-texto-2);
	font-size: .92rem;
}

.bx-cesta__cantidad {
	grid-area: cantidad;
}

.bx-cesta__subtotal {
	grid-area: subtotal;
	color: var(--bx-texto);
	font-size: 1rem;
	font-weight: 700;
	text-align: right;
	white-space: nowrap;
}

.bx-cesta__quitar {
	grid-area: quitar;
	justify-self: end;
}

/* En móvil, cada celda dice lo que es. */
@media (max-width: 781px) {
	.bx-cesta__precio::before,
	.bx-cesta__subtotal::before {
		content: attr(data-titulo) ": ";
		color: var(--bx-texto-3);
		font-size: .78rem;
		font-weight: 500;
	}

	.bx-cesta__subtotal {
		text-align: left;
	}
}

.bx .bx-cesta__papelera {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 9px;
	color: var(--bx-texto-3);
	font-size: 0;
	text-decoration: none;
}

.bx .bx-cesta__papelera:hover {
	background: rgba(214, 64, 78, .14);
	color: #ff8f9a;
}

/* El selector de cantidad de WooCommerce, con la piel del sistema. */
.bx .bx-cesta__cantidad .quantity {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 2px;
	border: 1px solid var(--bx-borde-fuerte);
	border-radius: var(--bx-r-pill);
	background: rgba(0, 0, 0, .25);
	float: none;
	margin: 0;
}

.bx .bx-cesta__cantidad input.qty,
.bx .bx-cesta__cantidad .bx-cesta__campo {
	width: 3.2rem;
	min-height: 34px;
	padding: 4px 0;
	border: 0;
	background: none;
	color: var(--bx-texto);
	font-size: .9rem;
	font-weight: 600;
	text-align: center;
}

.bx-cesta__acciones {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--bx-e-2);
	margin-top: var(--bx-e-3);
}

.bx .bx-cesta__seguir {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--bx-texto-2);
	font-size: .88rem;
	text-decoration: none;
}

.bx .bx-cesta__seguir:hover {
	color: var(--bx-accent);
}

/* La flecha del enlace mira a la izquierda, que es a donde lleva. */
.bx-cesta__seguir svg {
	transform: rotate(180deg);
}

/* Con JavaScript, cada cambio de cantidad se aplica solo. */
.bx-con-js .bx-cesta__actualizar {
	display: none;
}

/* ----------------------------------------------- 4. Cupón y resumen */

.bx-cesta__cupon,
.bx-resumen {
	padding: var(--bx-e-3);
	border: 1px solid var(--bx-panel-borde);
	border-radius: var(--bx-r-l);
	background: linear-gradient(160deg, rgba(9, 26, 42, .55) 0%, var(--bx-panel-fondo) 45%, rgba(3, 12, 22, .6) 100%);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
}

.bx-cesta__rotulo {
	display: block;
	margin-bottom: 10px;
	color: var(--bx-gold);
	font-family: var(--bx-ui);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.bx-cesta__cupon-campos {
	display: flex;
	gap: 8px;
}

.bx input.bx-cesta__cupon-campo {
	flex: 1 1 auto;
	min-height: 44px;
	font-size: .9rem;
}

.bx .bx-cesta__cupon-btn {
	flex: 0 0 auto;
	min-height: 44px;
	padding: 10px 18px;
	font-size: .8rem;
}

.bx .bx-resumen__titulo {
	margin: 0 0 var(--bx-e-2);
	color: var(--bx-gold-claro);
	font-family: var(--bx-display);
	font-size: 1.15rem;
	font-weight: 600;
}

.bx-resumen__filas {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-bottom: var(--bx-e-2);
}

.bx-resumen__fila {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--bx-e-2);
	color: var(--bx-texto-2);
	font-size: .9rem;
}

.bx-resumen__fila > span:last-child {
	font-weight: 600;
	text-align: right;
}

.bx-resumen__fila--descuento {
	color: var(--bx-accent);
}

.bx-resumen__fila--total {
	padding-top: var(--bx-e-2);
	border-top: 1px solid var(--bx-panel-linea);
	color: var(--bx-texto);
	font-size: 1.05rem;
}

.bx-resumen__fila--total > span:last-child {
	color: var(--bx-gold-claro);
	font-family: var(--bx-display);
	font-size: 1.5rem;
}

/* Las opciones de envío que pinta WooCommerce: en el resumen de antes, y en
   los contenedores propios del carrito y del pago a los que las trae
   compra.js (data-bx-envio-carrito, data-bx-envio-checkout). Mismo estilo en
   los tres sitios. La plantilla propia (woocommerce/cart/cart-shipping.php)
   pinta `.woocommerce-shipping-totals` como `<div>`, no como `<tr>`: una fila
   de tabla suelta fuera de una `<table>` es HTML inválido y el analizador del
   navegador la descartaba al repintar por AJAX (aunque el HTML que mandaba el
   servidor era correcto). */
.bx-resumen .woocommerce-shipping-totals,
.bx-cesta__envio-cuerpo .woocommerce-shipping-totals,
.bx-pago__envio .woocommerce-shipping-totals {
	display: block;
}

.bx-resumen ul#shipping_method,
.bx-resumen .woocommerce-shipping-methods,
.bx-cesta__envio-cuerpo ul#shipping_method,
.bx-cesta__envio-cuerpo .woocommerce-shipping-methods,
.bx-pago__envio ul#shipping_method,
.bx-pago__envio .woocommerce-shipping-methods {
	display: flex;
	flex-direction: column;
	gap: 8px;
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
}

.bx-resumen ul#shipping_method li,
.bx-cesta__envio-cuerpo ul#shipping_method li,
.bx-pago__envio ul#shipping_method li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	font-size: .86rem;
}

.bx-resumen ul#shipping_method label {
	color: var(--bx-texto-2);
	line-height: 1.35;
}

/* En sus contenedores propios (carrito y pago), el método de envío se elige
   con la misma tarjeta que el método de pago (doc 12): el redondel nativo se
   esconde —sigue ahí para teclado y lectores de pantalla— y manda la
   etiqueta entera, con una flecha que se enciende en verde al elegir. Mismo
   componente para la misma acción, como pide la norma 11. */
.bx-cesta__envio-cuerpo ul#shipping_method li > label,
.bx-pago__envio ul#shipping_method li > label {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 14px var(--bx-e-2);
	border: 1px solid var(--bx-panel-borde);
	border-radius: var(--bx-r-m);
	background: rgba(255, 255, 255, .035);
	color: var(--bx-texto);
	font-size: .92rem;
	font-weight: 600;
	line-height: 1.35;
	cursor: pointer;
	transition: border-color .18s ease, background .18s ease;
}

.bx-cesta__envio-cuerpo ul#shipping_method li > label:hover,
.bx-pago__envio ul#shipping_method li > label:hover {
	border-color: rgba(255, 62, 165, .45);
}

.bx-cesta__envio-cuerpo ul#shipping_method li > input[type="radio"],
.bx-pago__envio ul#shipping_method li > input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.bx-cesta__envio-cuerpo ul#shipping_method li > label::before,
.bx-pago__envio ul#shipping_method li > label::before {
	content: "";
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	background-color: rgba(255, 255, 255, .18);
	-webkit-mask: var(--bx-flecha) center / contain no-repeat;
	mask: var(--bx-flecha) center / contain no-repeat;
	transform: translateX(-3px);
	transition: background-color .18s ease, transform .18s ease;
}

.bx-cesta__envio-cuerpo ul#shipping_method li > input:checked + label::before,
.bx-pago__envio ul#shipping_method li > input:checked + label::before {
	background-color: var(--bx-exito);
	transform: none;
}

.bx-cesta__envio-cuerpo ul#shipping_method li > input:checked + label,
.bx-pago__envio ul#shipping_method li > input:checked + label {
	border-color: var(--bx-fucsia);
	background: linear-gradient(180deg, rgba(255, 62, 165, .16), rgba(255, 62, 165, .04));
	box-shadow: 0 0 0 1px var(--bx-fucsia), var(--bx-fucsia-glow);
}

.bx-cesta__envio-cuerpo ul#shipping_method li > input:focus-visible + label,
.bx-pago__envio ul#shipping_method li > input:focus-visible + label {
	outline: 2px solid var(--bx-accent);
	outline-offset: 2px;
}

/* Con un único método disponible, WooCommerce no imprime un radio sino un
   campo oculto (`type="hidden"`): es la única opción, así que la tarjeta se
   ve siempre como elegida. */
.bx-cesta__envio-cuerpo ul#shipping_method li > input[type="hidden"] + label::before,
.bx-pago__envio ul#shipping_method li > input[type="hidden"] + label::before {
	background-color: var(--bx-exito);
	transform: none;
}

.bx-cesta__envio-cuerpo ul#shipping_method li > input[type="hidden"] + label,
.bx-pago__envio ul#shipping_method li > input[type="hidden"] + label {
	border-color: var(--bx-fucsia);
	background: linear-gradient(180deg, rgba(255, 62, 165, .16), rgba(255, 62, 165, .04));
	box-shadow: 0 0 0 1px var(--bx-fucsia), var(--bx-fucsia-glow);
}

/* El rótulo "Envío" del bloque nativo (antes el <th> de la fila) no hace
   falta en los contenedores propios: el título de la sección ya dice lo
   mismo ("Método de envío"). En el resumen de siempre sí se deja, porque ahí
   no hay ningún título por encima que lo sustituya. */
.bx-cesta__envio-cuerpo .bx-envio-nombre,
.bx-pago__envio .bx-envio-nombre {
	display: none;
}

.bx-resumen .bx-envio-nombre {
	margin: 0 0 4px;
	color: var(--bx-texto-3);
	font-size: .78rem;
	font-weight: 600;
}

.bx-cesta__envio-titulo {
	margin: 0 0 var(--bx-e-3);
	color: var(--bx-gold-claro);
	font-family: var(--bx-display);
	font-size: 1.15rem;
	font-weight: 600;
}

.bx-cesta__envio {
	padding: var(--bx-e-3);
	border: 1px solid var(--bx-panel-borde);
	border-radius: var(--bx-r-l);
	background: linear-gradient(160deg, rgba(9, 26, 42, .5) 0%, var(--bx-panel-fondo) 55%, rgba(3, 12, 22, .58) 100%);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
}

/* Sin JavaScript no hay nada que mover a estos contenedores —el envío se ve
   donde WooCommerce lo pone de siempre, en el resumen del carrito— así que
   se quedan sin pintar en vez de dejar una caja o un título huérfano. */
.bx-cesta__envio:has(.bx-cesta__envio-cuerpo:empty),
.bx-pago__seccion--envio:has(.bx-pago__envio:empty) {
	display: none;
}

.bx-resumen .woocommerce-shipping-destination {
	margin: 10px 0 0;
	color: var(--bx-texto-3);
	font-size: .8rem;
}

.bx-resumen .shipping-calculator-button {
	color: var(--bx-accent);
	font-size: .82rem;
}

/* El selector de oficina / Punto City Paq del plugin correosoficial se
   imprime dentro del mismo <li> que la etiqueta del método (hermano del
   <label>, vía woocommerce_after_shipping_rate), así que sin más reglas
   queda en la misma línea, apretado. Además, el CSS del propio plugin da
   por hecho un fondo claro: texto en azul marino (--co_blue) y, en las
   direcciones, negro forzado con !important — sobre el panel oscuro de la
   tienda no se lee nada. En vez de perseguir cada !important campo a campo,
   se le da su propia fila a ancho completo por debajo del método y una
   tarjeta clara que lo envuelve: así el plugin funciona con los colores con
   los que está hecho y sí se lee. */
.bx-resumen ul#shipping_method li,
.bx-cesta__envio-cuerpo ul#shipping_method li,
.bx-pago__envio ul#shipping_method li {
	flex-wrap: wrap;
}

.bx-resumen .correos_oficial,
.bx-cesta__envio-cuerpo .correos_oficial,
.bx-pago__envio .correos_oficial {
	flex: 1 0 100%;
	width: 100%;
	margin: var(--bx-e-2) 0 0;
	padding: var(--bx-e-3);
	border-radius: var(--bx-r-m);
	background: #f4f6f8;
	border: 1px solid var(--bx-panel-borde);
	box-sizing: border-box;
}

/* El plugin imprime el `.correos_oficial` en todos los métodos de la lista
   (por si acaso), pero solo trae contenido de verdad —el buscador de
   oficina/punto— cuando el método elegido lo necesita; en el resto queda
   vacío (solo espacios en blanco) y, sin esta regla, se vería igualmente
   como una tarjeta clara sin nada dentro. */
.bx-resumen .correos_oficial:not(:has(*)),
.bx-cesta__envio-cuerpo .correos_oficial:not(:has(*)),
.bx-pago__envio .correos_oficial:not(:has(*)) {
	display: none;
}

.bx-resumen .correos_oficial .map,
.bx-cesta__envio-cuerpo .correos_oficial .map,
.bx-pago__envio .correos_oficial .map {
	border-radius: calc(var(--bx-r-m) - 4px);
	overflow: hidden;
}

/* Los títulos "Oficina", "Horario", "Localización"... son <h3> del plugin
   y heredarían el azul marino del propio widget (legible sobre la tarjeta
   clara), pero la regla global `.bx h3` del tema los pinta en blanco —
   pensada para el fondo oscuro de siempre— y blanco sobre la tarjeta clara
   no se lee. Además venían con el tamaño de un <h3> de verdad (el de
   Storefront), enormes al lado del texto del widget —que va a .88rem—:
   son rótulos de dos palabras dentro de una tarjeta pequeña, así que se
   bajan al tamaño de una etiqueta. */
.bx-resumen .correos_oficial h3,
.bx-cesta__envio-cuerpo .correos_oficial h3,
.bx-pago__envio .correos_oficial h3 {
	color: var(--co_blue, #002e6d);
	font-size: .82rem !important;
	line-height: 1.3;
	letter-spacing: .02em;
}

/* Mismo problema que los <h3>, con el campo del código postal y el
   desplegable de oficina/población: la regla global `.bx input, .bx select`
   los pinta con fondo casi transparente y texto blanco —pensada para el
   panel oscuro de siempre—, así que sobre la tarjeta clara del widget
   quedan en blanco sobre blanco, prácticamente invisibles. También la
   flechita del desplegable (`.bx select`) se dibuja en blanco por el mismo
   motivo: se vuelve a la flecha nativa del navegador en vez de perseguir el
   color exacto de esa flecha dibujada con gradientes. */
.bx-resumen .correos_oficial input[type="text"],
.bx-resumen .correos_oficial select,
.bx-cesta__envio-cuerpo .correos_oficial input[type="text"],
.bx-cesta__envio-cuerpo .correos_oficial select,
.bx-pago__envio .correos_oficial input[type="text"],
.bx-pago__envio .correos_oficial select {
	background: #ffffff;
	border: 1px solid #c7d6db;
	color: var(--co_blue, #002e6d);
	min-height: 40px;
	padding: 8px 10px;
}

.bx-resumen .correos_oficial select,
.bx-cesta__envio-cuerpo .correos_oficial select,
.bx-pago__envio .correos_oficial select {
	appearance: auto;
	-webkit-appearance: auto;
	background-image: none;
	padding-right: 10px;
}

.bx-resumen .correos_oficial select option,
.bx-cesta__envio-cuerpo .correos_oficial select option,
.bx-pago__envio .correos_oficial select option {
	background: #ffffff;
	color: var(--co_blue, #002e6d);
}

.bx-resumen .correos_oficial input:focus,
.bx-resumen .correos_oficial select:focus,
.bx-cesta__envio-cuerpo .correos_oficial input:focus,
.bx-cesta__envio-cuerpo .correos_oficial select:focus,
.bx-pago__envio .correos_oficial input:focus,
.bx-pago__envio .correos_oficial select:focus {
	border-color: var(--co_blue, #002e6d);
	box-shadow: 0 0 0 2px rgba(0, 46, 109, .18);
}

/* La dirección de la oficina/punto ("Localización") venía a 1,3rem —el
   propio plugin lo fuerza con !important— y, en mayúsculas y sin nada
   alrededor que la empequeñezca, se veía mucho más basta que el resto de
   texto del checkout. */
.bx-resumen .correos_oficial .citypaq-address-info,
.bx-resumen .correos_oficial .office-address-info,
.bx-resumen .correos_oficial .customs-advice-doc,
.bx-cesta__envio-cuerpo .correos_oficial .citypaq-address-info,
.bx-cesta__envio-cuerpo .correos_oficial .office-address-info,
.bx-cesta__envio-cuerpo .correos_oficial .customs-advice-doc,
.bx-pago__envio .correos_oficial .citypaq-address-info,
.bx-pago__envio .correos_oficial .office-address-info,
.bx-pago__envio .correos_oficial .customs-advice-doc {
	font-size: .88rem !important;
}

.bx-resumen__pie {
	margin-top: var(--bx-e-2);
}

.bx .bx-resumen__pagar {
	width: 100%;
}

.bx-resumen .bx-confianza {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin-top: var(--bx-e-3);
	padding-top: var(--bx-e-3);
	border-top: 1px solid var(--bx-panel-linea);
}

.bx-resumen .bx-confianza__item {
	flex-direction: column;
	gap: 4px;
	text-align: center;
	font-size: .66rem;
}

/* La franja trae cuatro sellos y en la columna caben tres. */
.bx-resumen .bx-confianza__item:nth-child(2) {
	display: none;
}

/* --------------------------------------------------- 5. Carrito vacío */

.bx-cesta-vacia {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--bx-e-2);
	padding: var(--bx-e-6) var(--bx-e-3);
	text-align: center;
}

.bx-cesta-vacia svg {
	color: rgba(255, 255, 255, .22);
}

.bx .bx-cesta-vacia__titulo {
	margin: 0;
	color: var(--bx-gold-claro);
	font-family: var(--bx-display);
	font-size: 1.4rem;
	font-weight: 600;
}

.bx-cesta-vacia__texto {
	max-width: 46ch;
	margin: 0 0 var(--bx-e-2);
	color: var(--bx-texto-3);
}

/* ------------------------------- 6. Lo que impone Storefront

   El tema padre reparte el carrito en columnas con anchos y floats propios,
   pensados para su tabla. Aquí la maqueta es una rejilla, así que sus medidas
   se retiran: si no, el resumen sale más estrecho que el cupón que tiene
   justo encima y el botón de pagar se parte en tres líneas. */

.bx .bx-cesta__lado,
.bx .bx-cesta__lado .cart_totals,
.bx .bx-cesta__lado .bx-resumen {
	float: none;
	width: 100%;
	max-width: none;
	margin: 0;
	padding-right: 0;
	text-align: left;
}

.bx .bx-cesta__lado .bx-resumen {
	padding: var(--bx-e-3);
}

/* Y su botón de pagar, que llega con estilos de enlace del tema padre. */
.bx .bx-resumen__pagar,
.bx .bx-resumen__pagar:visited {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	text-decoration: none;
	white-space: nowrap;
}

.bx .bx-resumen__pagar:hover {
	text-decoration: none;
}

/* El encabezado de página de Storefront se retira en la compra, y con él se
   iba el aire de arriba: la barra de pasos quedaba pegada al menú. */
.woocommerce-cart .bx-principal,
.woocommerce-checkout .bx-principal {
	padding-top: var(--bx-e-5);
}

/* El botón de pagar llega subrayado desde el tema padre, que da ese estilo a
   los enlaces del resumen. */
.bx .cart_totals a.bx-resumen__pagar,
.bx .cart_totals a.bx-resumen__pagar:hover,
.bx .cart_totals a.bx-resumen__pagar:visited {
	color: #fff;
	text-decoration: none;
}

/* Los botones de más y menos que añade el tema padre al selector de cantidad
   llegan como cuadrados grises. Aquí son los mismos redondos del panel del
   carrito, para que el sitio entero tenga un solo stepper. */
.bx .bx-cesta__cantidad .quantity button,
.bx .bx-cesta__cantidad .quantity input[type="button"],
.bx .bx-cesta__cantidad .quantity .plus,
.bx .bx-cesta__cantidad .quantity .minus {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	box-shadow: none;
	color: var(--bx-texto-2);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1;
	text-shadow: none;
	cursor: pointer;
}

.bx .bx-cesta__cantidad .quantity button:hover,
.bx .bx-cesta__cantidad .quantity .plus:hover,
.bx .bx-cesta__cantidad .quantity .minus:hover {
	background: rgba(255, 255, 255, .08);
	color: var(--bx-accent);
	filter: none;
}

/* ------------------------------------------------ 7. Página de pago */

.bx-compra--pago .bx-pago__columna {
	display: flex;
	flex-direction: column;
	gap: var(--bx-e-3);
	min-width: 0;
	counter-reset: bx-paso;
}

/* Los pasos los cuenta el CSS. Sin JavaScript la sección del envío no tiene
   nada que enseñar y se esconde (más abajo), y lo escondido no cuenta: así la
   numeración va seguida en vez de saltarse el 3. */
.bx-pago__seccion {
	counter-increment: bx-paso;
}

.bx-pago__numero::before {
	content: counter(bx-paso);
}

.bx-pago__seccion {
	padding: var(--bx-e-3);
	border: 1px solid var(--bx-panel-borde);
	border-radius: var(--bx-r-l);
	background: linear-gradient(160deg, rgba(9, 26, 42, .5) 0%, var(--bx-panel-fondo) 55%, rgba(3, 12, 22, .58) 100%);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
}

/* La sección abierta se enciende, para que se distinga de un vistazo cuál se
   está rellenando. */
.bx-pago__seccion[open] {
	border-color: rgba(56, 214, 245, .3);
}

/* ---------------------------- La cabecera que abre y cierra la sección

   Es el <summary> del <details>: el mismo acordeón que los filtros del
   catálogo y las preguntas del contacto, con su signo de más que se convierte
   en menos. Pulsarla funciona sin JavaScript. */
/* En pantallas estrechas el adelanto baja a su propia línea: apretado contra
   el título, lo partía en dos y se recortaba a la mitad. */
.bx-pago__cabecera {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 4px var(--bx-e-2);
	cursor: pointer;
	list-style: none;
}

@media (min-width: 640px) {
	.bx-pago__cabecera {
		display: flex;
	}
}

.bx-pago__cabecera::-webkit-details-marker {
	display: none;
}

.bx-pago__seccion[open] .bx-pago__cabecera {
	margin-bottom: var(--bx-e-3);
}

.bx .bx-pago__rotulo {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	margin: 0;
	color: var(--bx-gold-claro);
	font-family: var(--bx-display);
	font-size: 1.15rem;
	font-weight: 600;
}

.bx-pago__titulo {
	min-width: 0;
}

/* Lo elegido, con la sección cerrada: se lee sin abrirla. Se aparta a la
   derecha y, si no cabe, se recorta antes que empujar al título. */
.bx-pago__adelanto {
	overflow: hidden;
	grid-column: 1 / -1;
	flex: 0 1 auto;
	color: var(--bx-texto-3);
	font-family: var(--bx-ui);
	font-size: .82rem;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (min-width: 640px) {
	.bx-pago__adelanto {
		margin-left: auto;
		text-align: right;
	}
}

.bx-pago__adelanto:empty {
	display: none;
}

/* Con la sección abierta el adelanto sobra: lo que dice está justo debajo. */
.bx-pago__seccion[open] .bx-pago__adelanto {
	display: none;
}

/* Signo de más que se convierte en menos al abrir, el del resto del tema. */
.bx-pago__signo {
	position: relative;
	grid-row: 1;
	grid-column: 2;
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	margin-left: var(--bx-e-1);
}

.bx-pago__adelanto:empty + .bx-pago__signo,
.bx-pago__seccion[open] .bx-pago__signo {
	margin-left: auto;
}

.bx-pago__signo::before,
.bx-pago__signo::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 12px;
	height: 1.6px;
	border-radius: 2px;
	background: var(--bx-texto-3);
	transition: transform .2s ease, opacity .2s ease;
}

.bx-pago__signo::after {
	transform: rotate(90deg);
}

.bx-pago__seccion[open] .bx-pago__signo::after {
	opacity: 0;
	transform: rotate(0);
}

.bx-pago__cabecera:hover .bx-pago__signo::before,
.bx-pago__cabecera:hover .bx-pago__signo::after {
	background: var(--bx-accent);
}

.bx-pago__cuerpo {
	min-width: 0;
}

/* El botón que lleva al paso siguiente. Sin JavaScript no tendría nada que
   hacer —se avanza pulsando la cabecera, que es lo que hace el <details> de
   serie—, así que no se enseña. */
.bx .bx-pago__continuar {
	width: 100%;
	margin-top: var(--bx-e-3);
}

/* Con sitio, el paso siguiente se queda a la derecha y a un ancho cómodo: a
   toda la pantalla competía con «Realizar el pedido», que es el que manda. */
@media (min-width: 640px) {
	.bx .bx-pago__continuar {
		display: flex;
		width: auto;
		min-width: 220px;
		margin-left: auto;
	}
}

.bx-sin-js .bx-pago__continuar {
	display: none;
}

/* Y sin JavaScript el cupón se queda donde lo pone WooCommerce, arriba del
   todo, así que este hueco solo dejaría un rótulo sin campo debajo. */
.bx-sin-js .bx-resumen__cupon {
	display: none;
}

/* Mientras el carrito aplica un cambio de cantidad, la página se apaga un
   poco y no admite más toques: el mismo aviso que el resto de esperas. */
.bx-pago--esperando .bx-resumen__productos {
	opacity: .55;
	pointer-events: none;
}

.bx-pago__numero {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	border: 1px solid var(--bx-accent);
	border-radius: 50%;
	background: linear-gradient(180deg, rgba(56, 214, 245, .26), rgba(56, 214, 245, .08));
	color: var(--bx-accent);
	font-family: var(--bx-ui);
	font-size: .8rem;
	line-height: 1;
}

/* Los dos bloques de campos, uno al lado del otro cuando hay sitio. */
.bx-pago__campos {
	display: grid;
	gap: var(--bx-e-3);
}

/* Los dos bloques van uno debajo de otro y a todo lo ancho: la segunda
   columna solo lleva el aviso de "enviar a otra dirección" y las notas, así
   que puesta al lado dejaba media página vacía. Lo que sí se reparte en dos
   columnas son los campos de dentro. */
/* Storefront le pone a los campos de media línea (`form-row-first` y
   `form-row-last`) un ancho en porcentaje, un `float` y un margen entre ellos,
   pensados para SU rejilla de columnas flotadas. Dentro de la nuestra, ese 45 %
   se calcula sobre el ancho de la celda —que ya es media línea—, así que el
   nombre y los apellidos salían a un cuarto de ancho, con medio hueco al lado.
   Cada campo ocupa su celda entera y quien reparte es la rejilla. */
.bx .woocommerce-billing-fields__field-wrapper > .form-row,
.bx .woocommerce-shipping-fields__field-wrapper > .form-row,
.bx .woocommerce-additional-fields__field-wrapper > .form-row {
	float: none;
	width: 100%;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
}

/* Y el campo de dentro cuenta su relleno DENTRO del ancho: los `input` nacen
   en `content-box`, así que un `width: 100%` se comía además los 28 px de
   relleno y el campo se salía de su media línea, pisando al de al lado. */
.bx .woocommerce-billing-fields__field-wrapper input,
.bx .woocommerce-billing-fields__field-wrapper select,
.bx .woocommerce-billing-fields__field-wrapper textarea,
.bx .woocommerce-shipping-fields__field-wrapper input,
.bx .woocommerce-shipping-fields__field-wrapper select,
.bx .woocommerce-shipping-fields__field-wrapper textarea,
.bx .woocommerce-additional-fields__field-wrapper input,
.bx .woocommerce-additional-fields__field-wrapper select,
.bx .woocommerce-additional-fields__field-wrapper textarea {
	box-sizing: border-box;
}

@media (min-width: 640px) {
	.bx .woocommerce-billing-fields__field-wrapper,
	.bx .woocommerce-shipping-fields__field-wrapper {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--bx-e-2);
	}

	/* WooCommerce ya marca cuáles van a medias y cuáles enteros. */
	.bx .form-row-wide,
	.bx .form-row.notes,
	.bx #billing_address_1_field,
	.bx #billing_address_2_field,
	.bx #shipping_address_1_field,
	.bx #shipping_address_2_field {
		grid-column: 1 / -1;
	}
}

/* Sin la columna del resumen al lado, el formulario ocupa la página entera y
   los campos que WooCommerce marca como "anchos" —el código postal, la
   población, la provincia, el teléfono— se estiraban más de mil píxeles para
   guardar cinco cifras. Con sitio de sobra vuelven a media línea, y solo aquí:
   en «Mi cuenta» la columna es estrecha y allí sí los quieren enteros. */
@media (min-width: 992px) {
	.bx .bx-pago__seccion--datos #billing_postcode_field,
	.bx .bx-pago__seccion--datos #billing_city_field,
	.bx .bx-pago__seccion--datos #billing_state_field,
	.bx .bx-pago__seccion--datos #billing_phone_field,
	.bx .bx-pago__seccion--datos #shipping_postcode_field,
	.bx .bx-pago__seccion--datos #shipping_city_field {
		grid-column: auto;
	}
}

.bx .bx-pago__campos h3 {
	margin: 0 0 var(--bx-e-2);
	color: var(--bx-texto);
	font-family: var(--bx-ui);
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

/* La tabla de productos del repaso nativo sobra: el resumen de la derecha ya
   los enseña, y repetirlos alarga la página sin aportar nada. */
.bx-pago__revision .shop_table.woocommerce-checkout-review-order-table {
	display: none;
}

/* Formas de pago en tarjetas seleccionables, como el mockup. */
.bx .wc_payment_methods {
	display: flex;
	flex-direction: column;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bx li.wc_payment_method {
	margin: 0;
	padding: 0;
}

.bx li.wc_payment_method > label {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px var(--bx-e-2);
	border: 1px solid var(--bx-panel-borde);
	border-radius: var(--bx-r-m);
	background: rgba(255, 255, 255, .035);
	color: var(--bx-texto);
	font-size: .92rem;
	font-weight: 600;
	cursor: pointer;
	transition: border-color .18s ease, background .18s ease;
}

.bx li.wc_payment_method > label:hover {
	border-color: rgba(255, 62, 165, .45);
}

/* El redondel de siempre se va de la vista, pero sigue ahí para el teclado y
   para quien navegue a oídas: quien manda es el contenedor entero, que ya era
   la etiqueta del campo y por tanto se puede pulsar de lado a lado. */
.bx li.wc_payment_method > input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* En su lugar, una flecha a la izquierda. Ocupa sitio siempre —aunque esté
   apagada— para que el rótulo no dé un salto al elegir. */
.bx li.wc_payment_method > label::before {
	content: "";
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	background-color: rgba(255, 255, 255, .18);
	-webkit-mask: var(--bx-flecha) center / contain no-repeat;
	mask: var(--bx-flecha) center / contain no-repeat;
	transform: translateX(-3px);
	transition: background-color .18s ease, transform .18s ease;
}

/* La tarjeta elegida se enciende: flecha verde y filo fucsia. */
.bx li.wc_payment_method > input:checked + label::before {
	background-color: var(--bx-exito);
	transform: none;
}

.bx li.wc_payment_method > input:checked + label {
	border-color: var(--bx-fucsia);
	background: linear-gradient(180deg, rgba(255, 62, 165, .16), rgba(255, 62, 165, .04));
	box-shadow: 0 0 0 1px var(--bx-fucsia), var(--bx-fucsia-glow);
}

/* Con el redondel escondido, el foco del teclado lo enseña el contenedor. */
.bx li.wc_payment_method > input:focus-visible + label {
	outline: 2px solid var(--bx-accent);
	outline-offset: 2px;
}

.bx li.wc_payment_method > label img {
	max-height: 26px;
	width: auto;
	margin: 0 0 0 auto;
}

/* Los logos que pone la casa —la tarjeta lleva dos, Visa y Mastercard— van
   juntos al filo derecho, no separándose entre ellos: el hueco lo reparte el
   grupo, no cada imagen.
   Flotan, como los iconos que pone WooCommerce a las demás pasarelas: su hoja
   fuerza `display: block` en la etiqueta con un selector de `#id` que gana a
   cualquier regla del tema, así que ahí no vale un margen automático. */
.bx li.wc_payment_method > label .bx-pago__logos {
	float: right;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: 10px;
}

.bx li.wc_payment_method > label .bx-pago__logo {
	height: 24px;
	width: auto;
	margin: 0;
	border-radius: 3px;
}

/* El de Bizum viene sin fondo: se le pone la tarjeta blanca, como en el pie. */
.bx li.wc_payment_method > label .bx-pago__logo--fondo {
	padding: 3px 6px;
	background: #fff;
}

.bx .payment_box {
	margin: 8px 0 0;
	padding: var(--bx-e-2);
	border: 1px solid var(--bx-panel-linea);
	border-radius: var(--bx-r-s);
	background: rgba(0, 0, 0, .25);
	color: var(--bx-texto-2);
	font-size: .85rem;
	line-height: 1.45;
}

.bx .payment_box::before {
	display: none;
}

/* Condiciones y botón de realizar el pedido. */
.bx .woocommerce-terms-and-conditions-wrapper {
	margin-top: var(--bx-e-3);
	font-size: .86rem;
}

.bx .form-row.place-order {
	margin: var(--bx-e-3) 0 0;
	padding: 0;
}

/* La casilla de aceptar las condiciones no es una casilla más: es el paso que
   cierra la compra. Va en su propia caja, con la misma marca de cristal que las
   de los filtros pero más grande, y toda la caja marca —la etiqueta envuelve a
   la casilla—, así que la zona que responde al dedo es de lado a lado y no el
   cuadradito de la esquina. */
.bx .woocommerce-terms-and-conditions-wrapper .form-row {
	margin: var(--bx-e-2) 0 0;
	padding: 0;
}

.bx .woocommerce-terms-and-conditions-wrapper label.checkbox,
.bx .woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox,
.bx h3#ship-to-different-address label {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 60px;
	margin: 0;
	padding: 12px 14px;
	/* La caja cuenta su relleno por dentro: los elementos del tema no tienen un
	   box-sizing común, y sin esto el relleno se sumaba al ancho y la caja
	   sobresalía 28 px por la derecha de su contenedor. */
	box-sizing: border-box;
	/* El rótulo de «enviar a otra dirección» va dentro de un <h3>, así que
	   heredaba la tipografía de titular y el peso 300 de Storefront: las dos
	   casillas dicen lo mismo y tienen que leerse igual. */
	font-family: var(--bx-ui);
	font-weight: 600;
	border: 1px solid var(--bx-panel-linea);
	border-radius: var(--bx-r-m);
	background: rgba(255, 255, 255, .04);
	color: var(--bx-texto-2);
	font-size: .88rem;
	line-height: 1.4;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
	transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.bx .woocommerce-terms-and-conditions-wrapper label.checkbox:hover,
.bx h3#ship-to-different-address label:hover {
	border-color: rgba(56, 214, 245, .45);
	background: rgba(255, 255, 255, .06);
}

/* Con el teclado, la caja entera se ve elegida: la casilla de dentro es la que
   tiene el foco, pero lo que hay que mirar es la caja. */
.bx .woocommerce-terms-and-conditions-wrapper label.checkbox:focus-within,
.bx h3#ship-to-different-address label:focus-within {
	border-color: var(--bx-accent);
	box-shadow: 0 0 0 3px rgba(56, 214, 245, .22);
}

/* El asterisco de obligatorio, arriba con la primera línea del texto: en medio
   de la caja parecía suelto. */
.bx .woocommerce-terms-and-conditions-wrapper label.checkbox .required {
	align-self: flex-start;
	margin-top: 2px;
}

/* El enlace a las condiciones sigue siendo un enlace: se pulsa y lleva a
   leerlas, no marca la casilla. */
.bx .woocommerce-terms-and-conditions-wrapper label.checkbox a {
	color: var(--bx-accent);
	text-decoration: underline;
}

/* La casilla: la misma de los filtros, a 30 px para que se pulse cómoda con el
   dedo. La del navegador se esconde pero sigue siendo la que manda, así que el
   teclado y los lectores de pantalla trabajan igual que siempre. */
.bx .woocommerce-terms-and-conditions-wrapper input[type="checkbox"],
.bx h3#ship-to-different-address input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	/*
	 * En su sitio, dentro de la caja. De 768 px para arriba, Storefront saca la
	 * casilla de «enviar a otra dirección» del flujo y la pega al filo derecho
	 * (`position: absolute; right: 0`), así que la caja se quedaba con el
	 * rótulo a un lado, un hueco en medio y la casilla colgando del borde. Se
	 * devuelven las cuatro propiedades con las que la mueve.
	 */
	position: relative;
	top: auto;
	right: auto;
	transform: none;
	flex: 0 0 auto;
	float: none;
	width: 30px;
	height: 30px;
	margin: 0;
	border: 1px solid rgba(190, 224, 240, .38);
	border-radius: 9px;
	background: linear-gradient(180deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .02) 55%, rgba(255, 255, 255, .06) 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
	cursor: pointer;
	transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

/* La marca: los dos trazos de siempre, a la escala de esta casilla. */
.bx .woocommerce-terms-and-conditions-wrapper input[type="checkbox"]::after,
.bx h3#ship-to-different-address input[type="checkbox"]::after {
	content: "";
	position: absolute;
	top: 4px;
	left: 10px;
	width: 8px;
	height: 15px;
	border: solid #eafcff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) scale(.4);
	opacity: 0;
	transition: opacity .16s ease, transform .16s cubic-bezier(.2, 1.4, .4, 1);
}

.bx .woocommerce-terms-and-conditions-wrapper input[type="checkbox"]:checked,
.bx h3#ship-to-different-address input[type="checkbox"]:checked {
	border-color: var(--bx-cta-borde);
	background: linear-gradient(180deg, rgba(56, 214, 245, .55), rgba(56, 214, 245, .18));
	box-shadow:
		0 0 14px rgba(56, 214, 245, .5),
		inset 0 1px 0 rgba(255, 255, 255, .35);
	/* El golpe de aceptar, a la vez que las chispas: la casilla da un empujón y
	   vuelve. Es lo mismo que hace el corazón de favoritos al ponerse. */
	animation: bx-acepta .34s cubic-bezier(.2, 1.4, .4, 1);
}

.bx .woocommerce-terms-and-conditions-wrapper input[type="checkbox"]:checked::after,
.bx h3#ship-to-different-address input[type="checkbox"]:checked::after {
	opacity: 1;
	transform: rotate(45deg) scale(1);
}

.bx .woocommerce-terms-and-conditions-wrapper input[type="checkbox"]:focus-visible,
.bx h3#ship-to-different-address input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--bx-accent);
	outline-offset: 3px;
}

/* Aceptada, la caja se queda encendida: se ve de un vistazo que ese paso está
   dado. */
.bx .woocommerce-terms-and-conditions-wrapper label.checkbox:has(input:checked),
.bx h3#ship-to-different-address label:has(input:checked) {
	border-color: rgba(56, 214, 245, .5);
	background: rgba(56, 214, 245, .08);
}

@keyframes bx-acepta {
	0%   { transform: scale(1); }
	45%  { transform: scale(1.14); }
	100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.bx .woocommerce-terms-and-conditions-wrapper input[type="checkbox"]:checked,
	.bx h3#ship-to-different-address input[type="checkbox"]:checked {
		animation: none;
	}
}

.bx #place_order {
	width: 100%;
	/* Aire de sobra con lo de arriba: es el botón que cobra, y pegado al «he
	   leído y estoy de acuerdo» se pulsa sin querer al ir a marcar. */
	margin-top: var(--bx-e-4);
	background: var(--bx-cta2-fondo);
	border-color: var(--bx-cta2-borde);
	box-shadow: var(--bx-cta2-glow), inset 0 1px 0 rgba(255, 255, 255, .12);
	color: #fff;
	font-size: .95rem;
}

/* ------------------------------------- 8. Resumen de la página de pago

   Es la primera sección del pago y vive dentro de su panel, así que no lleva
   cristal propio: dos cristales uno dentro de otro se ven como una caja
   hundida. */

.bx-resumen--pago {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.bx-resumen__productos {
	display: flex;
	flex-direction: column;
	gap: var(--bx-e-2);
	list-style: none;
	margin: 0 0 var(--bx-e-3);
	padding: 0 0 var(--bx-e-3);
	border-bottom: 1px solid var(--bx-panel-linea);
}

/* Cada línea es la misma pieza del carrito: foto, nombre, paso de cantidad y
   el importe con la papelera al lado. */
.bx-resumen__producto {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--bx-e-2);
}

.bx-resumen__producto + .bx-resumen__producto {
	padding-top: var(--bx-e-2);
	border-top: 1px solid var(--bx-panel-linea);
}

/* Al quitarla, la línea se va con el mismo estallido que en el carrito. */
.bx-resumen__producto--se-va {
	opacity: 0;
	transform: scale(.96);
	transition: opacity .2s ease, transform .2s ease;
}

.bx-resumen__foto {
	overflow: hidden;
	width: 64px;
	height: 64px;
	border-radius: 8px;
	background: rgba(0, 0, 0, .3);
}

.bx .bx-resumen__foto img {
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
}

.bx-resumen__datos {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.bx-resumen__nombre {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	color: var(--bx-texto);
	font-size: .84rem;
	font-weight: 600;
	line-height: 1.25;
}

.bx-resumen__variacion,
.bx-resumen__variacion p {
	margin: 0;
	color: var(--bx-texto-3);
	font-size: .76rem;
	line-height: 1.3;
}

/* El paso de cantidad, el mismo del panel del carrito; aquí sus mandos son
   enlaces —dentro del formulario del pago no cabe un botón de enviar— y por
   eso hay que devolverles el aspecto que el tema da a los enlaces. */
.bx-resumen__cantidad {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	width: fit-content;
	margin-top: 6px;
	padding: 2px;
	border: 1px solid var(--bx-borde-fuerte);
	border-radius: var(--bx-r-pill);
	background: rgba(0, 0, 0, .25);
}

.bx a.bx-resumen__paso,
.bx a.bx-resumen__paso:visited {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--bx-texto-2);
	text-decoration: none;
	cursor: pointer;
}

.bx a.bx-resumen__paso:hover {
	background: rgba(255, 255, 255, .08);
	color: var(--bx-accent);
}

.bx a.bx-resumen__paso[aria-disabled="true"] {
	opacity: .35;
	pointer-events: none;
}

.bx input.bx-resumen__numero {
	width: 40px;
	min-height: 0;
	padding: 3px 0;
	border: 0;
	background: none;
	color: var(--bx-texto);
	font-size: .84rem;
	font-weight: 600;
	text-align: center;
}

/* La flechita nativa del campo numérico sobra: para eso está el paso. */
.bx-resumen__numero::-webkit-outer-spin-button,
.bx-resumen__numero::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.bx-resumen__numero {
	-moz-appearance: textfield;
	appearance: textfield;
}

.bx-resumen__lado {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
}

.bx-resumen__importe {
	color: var(--bx-texto);
	font-size: .9rem;
	font-weight: 700;
	white-space: nowrap;
}

.bx a.bx-resumen__quitar,
.bx a.bx-resumen__quitar:visited {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	color: var(--bx-texto-3);
	text-decoration: none;
}

.bx a.bx-resumen__quitar:hover {
	background: rgba(214, 64, 78, .14);
	color: #ff8f9a;
}

/* ---------------------- 9. Lo que impone Storefront en el pago

   El tema padre pinta la caja de pago sobre fondo blanco y centrada, pensada
   para su maqueta clara. Aquí se devuelve al cristal del sistema: si no, el
   bloque sale como un recuadro blanco con el texto ilegible encima. */

.bx .woocommerce-checkout #payment,
.bx #payment {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
}

.bx #payment .form-row {
	padding: 0;
}

.bx #payment div.payment_box {
	color: var(--bx-texto-2);
}

/* Su triangulito apuntando a la forma de pago elegida, que aquí no encaja. */
.bx #payment div.payment_box::before,
.bx #payment div.payment_box::after {
	display: none;
}

.bx .woocommerce-checkout-review-order,
.bx .bx-pago__revision {
	width: 100%;
	max-width: none;
	float: none;
}

/* Los dos bloques de datos del cliente: el tema padre los reparte con floats
   y anchos del 50 %; aquí manda la rejilla. */
.bx .bx-pago__campos .col-1,
.bx .bx-pago__campos .col-2 {
	float: none;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}


/* Campos del checkout con la piel del sistema. */
.bx .woocommerce-billing-fields__field-wrapper,
.bx .woocommerce-shipping-fields__field-wrapper,
.bx .woocommerce-additional-fields__field-wrapper {
	display: flex;
	flex-direction: column;
	gap: var(--bx-e-2);
}

.bx .form-row {
	margin: 0;
	padding: 0;
}

.bx .form-row label {
	display: block;
	margin-bottom: 5px;
	color: var(--bx-texto-2);
	font-size: .82rem;
	font-weight: 600;
}

.bx .form-row .required {
	color: var(--bx-error);
	text-decoration: none;
}

/* La caja del cupón que WooCommerce pone arriba del todo. */
.bx .woocommerce-form-coupon-toggle,
.bx .checkout_coupon {
	margin-bottom: var(--bx-e-3);
}

.bx .checkout_coupon {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: var(--bx-e-2);
	border: 1px solid var(--bx-panel-borde);
	border-radius: var(--bx-r-m);
	background: rgba(255, 255, 255, .035);
}

.bx .checkout_coupon .form-row {
	flex: 1 1 12rem;
	margin: 0;
}

/* ---- El cupón dentro del resumen del pedido

   Se ve exactamente igual que en la página del carrito: el rótulo dorado
   «Código de descuento», el campo y, al lado, el botón fantasma de aplicar. La
   caja de aquí no lleva fondo ni borde propios —ya está dentro del panel del
   resumen—, pero las medidas y los tonos son los mismos que los de
   `.bx-cesta__cupon`, que es lo que se ve en el carrito. */
.bx-resumen__cupon {
	margin-bottom: var(--bx-e-3);
}

.bx .bx-resumen__cupon .checkout_coupon {
	gap: 8px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

/* Con JavaScript el formulario ya está a la vista aquí, así que el aviso de
   «¿Tienes un cupón? Haz clic aquí» sobra —igual que sobra en el carrito—. Sin
   JavaScript se queda donde WooCommerce lo pone y sigue abriéndose. */
.bx-con-js .woocommerce-form-coupon-toggle {
	display: none;
}

/* Y dentro del formulario, la explicación de WooCommerce tampoco hace falta: el
   rótulo de encima ya dice lo que es. Los párrafos que sí son campos llevan la
   clase form-row y no se tocan. */
.bx .bx-resumen__cupon .checkout_coupon > p:not(.form-row) {
	display: none;
}

.bx .bx-resumen__cupon .checkout_coupon .form-row {
	flex: 1 1 9rem;
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}

.bx .bx-resumen__cupon .checkout_coupon .form-row-last {
	flex: 0 0 auto;
}

/* El campo se ciñe a lo que mide un código —un pelín más, para que no vaya
   justo— en vez de estirarse de lado a lado del resumen: en escritorio llegaba
   a medir mil píxeles para escribir ocho letras. */
.bx .bx-resumen__cupon .checkout_coupon .form-row-first {
	flex: 0 1 16rem;
	max-width: 16rem;
}

.bx .bx-resumen__cupon input.input-text {
	box-sizing: border-box;
	min-height: 44px;
	font-size: .9rem;
}

/* El botón, el fantasma del carrito: mismas medidas, mismo tono. */
.bx .bx-resumen__cupon .checkout_coupon button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	min-height: 44px;
	padding: 10px 18px;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: var(--bx-r-s);
	background: transparent;
	/* Sin el resplandor ni las mayúsculas que traen los botones del pago: el
	   del carrito no los tiene y estos dos tienen que ser el mismo botón. */
	box-shadow: none;
	color: var(--bx-texto);
	font-family: var(--bx-ui);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .01em;
	line-height: 1.2;
	text-align: center;
	text-transform: none;
	cursor: pointer;
	transition: border-color .18s ease, color .18s ease;
}

.bx .bx-resumen__cupon .checkout_coupon button:hover,
.bx .bx-resumen__cupon .checkout_coupon button:focus-visible {
	border-color: var(--bx-accent);
	color: var(--bx-texto);
}

/* El pago exprés de la pasarela, en su franja de arriba. */
.bx .bx-pago-expres,
.bx #wpg_paypal_checkout_express,
.bx .wpg-express-checkout {
	margin-bottom: var(--bx-e-3);
}

/* El repaso del pedido y las formas de pago llegan con fondo claro y anchos
   propios —del tema padre y del plugin de la pasarela—, y los selectores por
   identificador pesan más que los de clase. Se responde con el mismo peso. */
.bx #order_review,
.woocommerce-checkout .bx #order_review {
	width: 100%;
	max-width: none;
	float: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.bx #payment ul.payment_methods,
.bx #payment ul.wc_payment_methods {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.bx #payment ul.payment_methods li,
.bx #payment ul.wc_payment_methods li.wc_payment_method {
	background: none;
	border: 0;
	padding: 0;
}

.bx #payment div.payment_box {
	background: rgba(0, 0, 0, .25);
	color: var(--bx-texto-2);
}

.bx #payment div.payment_box p,
.bx #payment div.payment_box label {
	color: var(--bx-texto-2);
}

/* Los campos de tarjeta que inyecta la pasarela dentro de su caja. */
.bx #payment div.payment_box input,
.bx #payment div.payment_box select {
	background: rgba(255, 255, 255, .06);
	border: 1px solid var(--bx-borde-fuerte);
	color: var(--bx-texto);
}

.bx #payment .place-order,
.bx #payment .form-row.place-order {
	background: none;
	padding: 0;
}

/* El aviso de enviar a otra dirección y las notas, debajo de los campos. */
.bx .bx-pago__campos .col-2 {
	margin-top: var(--bx-e-2);
}

.bx .woocommerce-shipping-fields__field-wrapper {
	margin-top: var(--bx-e-2);
}

.bx #ship-to-different-address {
	margin: 0;
}

.bx #ship-to-different-address label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: .86rem;
	text-transform: none;
	letter-spacing: 0;
}

/* ------------------------- 10. Los campos, en dos columnas

   Va al final a propósito: más arriba se les da una columna con flex para el
   móvil, y estas reglas tienen que poder pisarla en cuanto hay ancho. */

@media (min-width: 640px) {
	.bx .woocommerce-billing-fields__field-wrapper,
	.bx .woocommerce-shipping-fields__field-wrapper {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--bx-e-2);
	}

	/* WooCommerce ya marca cuáles van a medias y cuáles enteros; y la calle,
	   el piso y el correo piden el ancho entero aunque él no lo diga. */
	.bx .form-row-wide,
	.bx #billing_address_1_field,
	.bx #billing_address_2_field,
	.bx #billing_email_field,
	.bx #shipping_address_1_field,
	.bx #shipping_address_2_field {
		grid-column: 1 / -1;
	}
}

/* El aviso de enviar a otra dirección es una casilla, no un encabezado: en el
   marcado nativo es un <h3> con el <input> dentro, y salía el texto a un lado
   y la casilla flotando al otro, encima de las notas.

   Y es LA MISMA casilla que la de aceptar las condiciones: caja propia de lado
   a lado, cómoda de pulsar con el dedo y con las chispas al marcarse. Las dos
   preguntan lo mismo —un sí o un no que cambia la compra—, así que se ven y se
   comportan igual. El estilo se comparte arriba, con el de las condiciones;
   aquí solo queda lo del encabezado. */
.bx h3#ship-to-different-address {
	display: block;
	margin: var(--bx-e-3) 0 0;
	font-size: .86rem;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}

.bx .woocommerce-additional-fields {
	margin-top: var(--bx-e-3);
}

.bx .woocommerce-additional-fields h3 {
	margin-bottom: var(--bx-e-2);
}

/* El contenedor de los datos del cliente llega con float y el 48 % de ancho
   del tema padre, así que el formulario entero se quedaba en la mitad
   izquierda del panel con medio panel vacío al lado. */
.bx .bx-pago__campos,
.bx .col2-set.bx-pago__campos,
.woocommerce-checkout .bx .col2-set {
	float: none;
	width: 100%;
	max-width: none;
	margin: 0;
}

/* La casilla llegaba flotando al filo derecho del panel, lejos de su propio
   texto: dentro de la caja va primero y pegada al rótulo. */
.bx h3#ship-to-different-address input.woocommerce-form__input-checkbox,
.bx h3#ship-to-different-address input[type="checkbox"] {
	float: none;
	order: -1;
}

/* ------------------------------------------ 11. Confirmación del pedido */

/* Toda la confirmación en una sola columna centrada: el saludo, el detalle del
   pedido y los datos de envío alineados al mismo ancho. Antes el saludo medía
   620 y lo de debajo se iba a todo lo ancho, así que la página se leía como dos
   páginas pegadas. */
.bx-gracias {
	display: flex;
	flex-direction: column;
	gap: var(--bx-e-4);
	width: 100%;
	max-width: 760px;
	margin: 0 auto;
}

.bx-gracias__panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--bx-e-2);
	width: 100%;
	margin: 0;
	padding: var(--bx-e-5) var(--bx-e-3);
	text-align: center;
}

/* El sello redondo con el visto, encendido como en el mockup. */
.bx-gracias__sello {
	display: grid;
	place-items: center;
	width: 104px;
	height: 104px;
	margin-bottom: var(--bx-e-2);
	border: 2px solid var(--bx-accent);
	border-radius: 50%;
	background: radial-gradient(circle at 50% 40%, rgba(56, 214, 245, .22), rgba(56, 214, 245, .04) 70%);
	color: var(--bx-accent);
	box-shadow: 0 0 34px rgba(56, 214, 245, .35), inset 0 0 22px rgba(56, 214, 245, .18);
}

.bx .bx-gracias__titulo {
	margin: 0;
	color: var(--bx-gold-claro);
	font-family: var(--bx-display);
	font-size: clamp(1.4rem, 4.4vw, 2rem);
	font-weight: 600;
	line-height: 1.2;
}

.bx-gracias__numero {
	margin: 0;
	color: var(--bx-accent);
	font-family: var(--bx-ui);
	font-size: .92rem;
	font-weight: 700;
	letter-spacing: .08em;
}

.bx-gracias__texto {
	max-width: 46ch;
	margin: 0;
	color: var(--bx-texto-2);
}

.bx-gracias__datos,
.bx .woocommerce-order-overview {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: var(--bx-e-2);
	width: 100%;
	margin: var(--bx-e-2) 0 0;
	padding: var(--bx-e-2) 0 0;
	border-top: 1px solid var(--bx-panel-linea);
	list-style: none;
}

.bx .woocommerce-order-overview li {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--bx-texto-3);
	font-size: .78rem;
	text-align: center;
	text-transform: none;
}

.bx .woocommerce-order-overview li strong {
	color: var(--bx-texto);
	font-size: .95rem;
}

.bx-gracias__acciones {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	width: 100%;
	margin-top: var(--bx-e-3);
}

.bx .bx-gracias__acciones .bx-btn {
	width: min(100%, 320px);
}

.bx .bx-gracias__enlace {
	color: var(--bx-texto-3);
	font-size: .86rem;
	text-decoration: underline;
}

.bx .bx-gracias__enlace:hover {
	color: var(--bx-accent);
}

/* El detalle del pedido y los datos del cliente, que pinta WooCommerce.

   Van al ancho de la columna, sin `margin: 0 auto`: dentro de un contenedor
   flex —y `.bx-gracias` lo es— los márgenes automáticos APAGAN el estirado y
   encogen la caja a su contenido. Así, el detalle salía a 750 px, los datos del
   cliente a 274 y el saludo a 620: tres anchos distintos en la misma página, y
   las dos direcciones apiladas porque en 274 px no cabían dos columnas. */
.bx .woocommerce-order-details,
.bx .woocommerce-customer-details {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: var(--bx-e-3);
	border: 1px solid var(--bx-panel-borde);
	border-radius: var(--bx-r-l);
	background: linear-gradient(160deg, rgba(9, 26, 42, .5) 0%, var(--bx-panel-fondo) 55%, rgba(3, 12, 22, .58) 100%);
}

.bx .woocommerce-order-details__title,
.bx .woocommerce-column__title {
	margin: 0 0 var(--bx-e-2);
	color: var(--bx-gold-claro);
	font-family: var(--bx-display);
	font-size: 1.1rem;
}

.bx .woocommerce-table--order-details {
	width: 100%;
	border: 0;
}

.bx .woocommerce-table--order-details th,
.bx .woocommerce-table--order-details td {
	padding: 10px 0;
	border: 0;
	border-bottom: 1px solid var(--bx-panel-linea);
	color: var(--bx-texto-2);
	font-size: .9rem;
}

.bx .woocommerce-table--order-details tfoot td,
.bx .woocommerce-table--order-details tfoot th {
	color: var(--bx-texto);
}

.bx-gracias .bx-confianza {
	max-width: 820px;
	margin: 0 auto;
}

/* El tema padre pinta el resumen del pedido como un recibo de papel: fondo
   blanco y borde dentado. Sobre el fondo oscuro del sitio queda una mancha
   blanca con el texto ilegible dentro. */
.bx ul.order_details,
.bx .woocommerce-order-overview,
.bx ul.woocommerce-thankyou-order-details {
	background: none;
	border: 0;
	box-shadow: none;
	filter: none;
}

.bx ul.order_details::before,
.bx ul.order_details::after,
.bx .woocommerce-order-overview::before,
.bx .woocommerce-order-overview::after {
	display: none;
	content: none;
}

.bx ul.order_details li {
	background: none;
	border: 0;
}

/* Y la tabla del detalle, igual: sin el papel de debajo. */
.bx .woocommerce-table--order-details,
.bx table.shop_table.order_details,
.bx .woocommerce-order-details table {
	background: none;
	border: 0;
	box-shadow: none;
}

.bx .woocommerce-table--order-details thead th,
.bx table.shop_table.order_details thead th {
	background: none;
	color: var(--bx-gold);
	font-family: var(--bx-ui);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.bx .woocommerce-table--order-details tbody td,
.bx .woocommerce-table--order-details tfoot td,
.bx .woocommerce-table--order-details tfoot th,
.bx table.shop_table.order_details td,
.bx table.shop_table.order_details th {
	background: none;
}

.bx .woocommerce-table--order-details a {
	color: var(--bx-texto);
	text-decoration: none;
}

.bx .woocommerce-table--order-details a:hover {
	color: var(--bx-accent);
}

/* Las direcciones del pedido, una al lado de la otra.

   El contenedor llega con la clase `col2-set`, a la que Storefront le pone su
   propio ancho de columna: medía 240 px, así que por muchas columnas que
   pidiera la rejilla solo cabía una y las dos direcciones se apilaban. Primero
   se le devuelve el ancho —y con el peso suficiente, que la regla del tema
   pedía `.woocommerce-checkout .bx .col2-set` y en esta web las dos clases
   viven en el MISMO <body>, así que no casaba nunca— y luego se reparten. */
.bx .woocommerce-customer-details .woocommerce-columns--addresses,
.bx .woocommerce-customer-details .col2-set {
	float: none;
	width: 100%;
	max-width: none;
	margin: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--bx-e-3);
}

/* Desde tablet, las dos en fila. Por debajo no: dos direcciones en columnas de
   150 px se parten por sílabas. */
@media (min-width: 640px) {
	.bx .woocommerce-customer-details .woocommerce-columns--addresses,
	.bx .woocommerce-customer-details .col2-set {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.bx .woocommerce-customer-details address {
	padding: 0;
	border: 0;
	color: var(--bx-texto-2);
	font-style: normal;
	font-size: .9rem;
	line-height: 1.6;
	overflow-wrap: anywhere;
}

/* Las dos direcciones llegan con el ancho y el float del tema padre, así que
   se quedaban en una columna estrecha con los títulos partidos por sílabas. */
.bx .woocommerce-customer-details .woocommerce-column,
.bx .woocommerce-columns--addresses .col-1,
.bx .woocommerce-columns--addresses .col-2 {
	float: none;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

.bx .woocommerce-customer-details .woocommerce-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: var(--bx-e-3);
}

/* Guardar una tarjeta en Mi cuenta no es finalizar una compra: el morado está
   reservado para ese último paso, así que aquí el botón vuelve a la llamada
   principal del tema, la misma de "Guardar cambios". */
.bx.woocommerce-add-payment-method #place_order {
	background: var(--bx-cta-fondo);
	border-color: var(--bx-cta-borde);
	box-shadow: var(--bx-cta-glow), inset 0 1px 0 rgba(255, 255, 255, .12);
	color: var(--bx-cta-texto);
}

/* Y no tiene que cruzar el ancho entero: es un botón, no una barra. */
@media (min-width: 560px) {
	.bx.woocommerce-add-payment-method #place_order {
		width: auto;
		min-width: 16rem;
	}
}

/* WooCommerce pinta la fila de la pasarela de gris claro al pasar el ratón
   —#payment .payment_methods > li:not(.woocommerce-notice):hover— y sobre el
   fondo oscuro del tema eso deja el texto blanco sobre blanco. Se repite el
   :not() para ganarle en especificidad y el realce pasa a ser un velo claro. */
.bx #payment ul.payment_methods > li:not(.woocommerce-notice),
.bx #payment ul.wc_payment_methods > li:not(.woocommerce-notice) {
	background: none;
}

.bx #payment ul.payment_methods > li:not(.woocommerce-notice):hover,
.bx #payment ul.payment_methods > li:not(.woocommerce-notice):focus-within,
.bx #payment ul.wc_payment_methods > li:not(.woocommerce-notice):hover,
.bx #payment ul.wc_payment_methods > li:not(.woocommerce-notice):focus-within {
	background: rgba(255, 255, 255, .05);
}

/* Los monederos, ya recolocados al final de la lista de métodos. No son filas
   con su redondel —son botones de Apple y Google, con su aspecto de marca
   obligatorio—, así que se les da el ancho de las filas y un poco de aire.
   Cuando el aparato no tiene ninguno, WooPayments no pinta nada y este bloque
   no ocupa: por eso los márgenes van en los hijos y no en el contenedor. */
.bx .wcpay-express-checkout-wrapper {
	width: 100%;
}

/* WooPayments marca el elemento con .is-ready en cuanto tiene botones que
   enseñar; hasta entonces mide cero y no debe separar nada. */
.bx.woocommerce-checkout .wcpay-express-checkout-wrapper #wcpay-express-checkout-element.is-ready {
	margin: var(--bx-e-2) 0 0;
}

/* El "O" que WooPayments pone entre la lista y los botones, con la línea y el
   tono del resto de separadores del tema. */
.bx .wcpay-express-checkout__separator {
	display: flex;
	align-items: center;
	gap: var(--bx-e-2);
	margin: var(--bx-e-2) 0 0;
	color: var(--bx-texto-3);
	font-family: var(--bx-ui);
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .08em;
}

.bx .wcpay-express-checkout__separator::before,
.bx .wcpay-express-checkout__separator::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--bx-panel-linea);
}

/* ------------------------------------------------ Paga en un toque

   Apple Pay, Google Pay y el pagar a plazos los dibuja PayPal; Amazon Pay lo
   dibuja Stripe dentro de su propio marco. Ninguno es una opción que se marque,
   así que se agrupan bajo un rótulo, con la misma caja que las filas de arriba
   y todos los botones a la misma anchura y altura.

   El bloque nace visible y solo se retira si al final no llega ningún botón:
   al revés no vale, porque Apple Pay no se dibuja dentro de una caja
   escondida y esconderlo "hasta ver si viene" era justo lo que lo impedía. */
.bx .bx-rapido {
	margin-top: var(--bx-e-3);
	padding: var(--bx-e-2) var(--bx-e-2) var(--bx-e-3);
	border: 1px solid var(--bx-panel-borde);
	border-radius: var(--bx-r-m);
	background: rgba(255, 255, 255, .035);
	/* El mismo radio para el recorte del velo mágico. */
	--bx-radio-magia: var(--bx-r-m);
}

/* Sin ningún botón dentro, el bloque sobra. */
.bx .bx-rapido.bx-rapido--vacio {
	display: none;
}

.bx .bx-rapido__rotulo {
	display: block;
	margin: 0 0 10px;
	color: var(--bx-texto-3);
	font-family: var(--bx-ui);
	font-size: .76rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.bx .bx-rapido__botones {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Cada hueco es el sitio de un proveedor: dentro manda su marco, que trae su
   propio alto de botón. */
.bx .bx-rapido__hueco > * {
	margin: 0 !important;
}

/* Del bloque de PayPal se queda todo menos su propio botón —PayPal ya es una
   fila de la lista— y los adornos de la franja que traía. */
.bx .bx-rapido__hueco--plazos .express-title,
.bx .bx-rapido__hueco--plazos .express-divider,
.bx .bx-rapido__hueco--plazos #ppcp_checkout_top,
.bx .bx-rapido .wcpay-express-checkout__separator {
	display: none !important;
}

.bx .bx-rapido__hueco--plazos fieldset,
.bx .bx-rapido__hueco--plazos .ppcp-button-container {
	margin: 0;
	padding: 0;
	border: 0;
}

/* Los botones de PayPal vienen en fila; aquí van uno debajo de otro, cada uno
   del ancho del bloque. */
.bx .bx-rapido__hueco--plazos .wc_ppcp_express_checkout_gateways,
.bx .bx-rapido__hueco--plazos .express_payment_method_ppcp {
	display: flex !important;
	flex-direction: column;
	gap: 10px;
	width: 100%;
}

.bx .bx-rapido__hueco--plazos .express_payment_method_ppcp > div {
	width: 100% !important;
	max-width: none !important;
}

.bx.woocommerce-checkout .bx-rapido #wcpay-express-checkout-element,
.bx.woocommerce-checkout .bx-rapido #wcpay-express-checkout-element.is-ready {
	margin: 0;
	min-height: 0;
}

/* Los botones no cruzan la pantalla entera en escritorio: quedan a un ancho
   cómodo, alineados a la izquierda como el resto del bloque. */
/* Alineados a la derecha, como el botón de cada fila de arriba, y con aire
   entre ellos: pegados parecían un bloque macizo de colores. El ancho se
   marca aquí, en la columna, y no botón a botón: cada plugin le pone el suyo
   al contenedor y pelear con todos era una carrera de !important. */
.bx .bx-rapido__botones {
	width: 100%;
	max-width: 320px;
	margin-left: auto;
	gap: 16px;
}

@media (max-width: 781px) {
	.bx .bx-rapido__botones {
		gap: 18px;
	}
}

/* Y el orden de los botones, el de Ajustes → Pagos: Apple Pay, Google Pay,
   Amazon Pay y el pagar a plazos al final, con PayPal. Los tres primeros los
   pinta PayPal dentro de sus propias cajas, así que estas se dejan pasar —sin
   caja propia— para que sus botones entren en el mismo reparto que el marco de
   Amazon y se puedan ordenar uno a uno. */
.bx .bx-rapido__hueco--plazos,
.bx .bx-rapido__hueco--plazos .ppcp-button-container,
.bx .bx-rapido__hueco--plazos fieldset,
.bx .bx-rapido__hueco--plazos .wc_ppcp_express_checkout_gateways,
.bx .bx-rapido__hueco--plazos .express_payment_method_ppcp {
	display: contents;
}

.bx .bx-rapido .apple-pay-container {
	order: 1;
}

.bx .bx-rapido .google-pay-container {
	order: 2;
}

.bx .bx-rapido__hueco--monederos {
	order: 3;
}

.bx .bx-rapido #ppcp_checkout_top_alternative {
	order: 4;
}

/* Y dentro, cada botón ocupa la columna entera. */
.bx .bx-rapido .apple-pay-container,
.bx .bx-rapido .google-pay-container,
.bx .bx-rapido #ppcp_checkout_top_alternative,
.bx .bx-rapido .bx-rapido__hueco--monederos {
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
}

/* El marco de Stripe también se ciñe al ancho de los demás y se va a la
   derecha: es un elemento con id, así que hay que llamarlo por su nombre para
   ganarle a su propio estilo. */
.bx.woocommerce-checkout .bx-rapido .wcpay-express-checkout-wrapper,
.bx.woocommerce-checkout .bx-rapido #wcpay-express-checkout-element,
.bx.woocommerce-checkout .bx-rapido #wcpay-express-checkout-element.is-ready {
	width: 100%;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/* El rótulo de cada paso arranca a la izquierda. El del pago se iba a media
   columna porque el tema padre lo manda a la derecha con un 41 % de ancho
   —una regla con id, que gana a cualquier clase—, así que hay que llamarlo
   por su nombre para deshacerlo. Ancho automático y no 100 %: el rótulo
   comparte la cabecera con el adelanto y el signo. */
.bx .bx-pago__rotulo,
.bx #order_review_heading {
	width: auto;
	float: none;
	clear: none;
	margin-right: 0;
	justify-content: flex-start;
	text-align: left;
}

.bx #order_review {
	width: 100%;
	float: none;
	clear: none;
	margin-right: 0;
	text-align: left;
}

/* ------------------------------------- La espera de los pagos de un toque

   Cada proveedor dibuja su botón cuando puede, y entre el primero y el último
   pueden pasar varios segundos. En vez de enseñarlos según llegan —con alguno
   apareciendo y volviéndose a ir—, el bloque guarda su sitio con tres
   cristales encantados y los descubre todos a la vez cuando están listos. */
.bx .bx-rapido__espera {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
	max-width: 320px;
	margin-left: auto;
}

.bx .bx-rapido__cristal {
	position: relative;
	overflow: hidden;
	display: block;
	height: 44px;
	border: 1px solid var(--bx-panel-linea);
	border-radius: 10px;
	background: linear-gradient(180deg, rgba(56, 214, 245, .07), rgba(139, 92, 246, .07));
}

/* El destello que recorre el cristal, como si algo se estuviera invocando
   dentro. */
.bx .bx-rapido__cristal::after {
	content: "";
	position: absolute;
	top: 0;
	left: -60%;
	width: 60%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(56, 214, 245, .35), rgba(255, 62, 165, .25), transparent);
	animation: bx-invocando 1.5s ease-in-out infinite;
}

/* Cada uno entra a su ritmo: los tres a la vez parecían una barra de carga. */
.bx .bx-rapido__cristal:nth-child(2)::after {
	animation-delay: .22s;
}

.bx .bx-rapido__cristal:nth-child(3)::after {
	animation-delay: .44s;
}

@keyframes bx-invocando {
	0% {
		left: -60%;
	}

	60%,
	100% {
		left: 110%;
	}
}

/* Con los botones ya puestos, los cristales se van y el bloque se descubre. */
.bx .bx-rapido--listo .bx-rapido__espera {
	display: none;
}

/* La opacidad va en cada botón y no en la columna que los agrupa: esa se deja
   pasar con display:contents —para poder ordenarlos uno a uno— y un elemento
   sin caja propia no admite opacidad. */
.bx .bx-rapido:not(.bx-rapido--listo) .apple-pay-container,
.bx .bx-rapido:not(.bx-rapido--listo) .google-pay-container,
.bx .bx-rapido:not(.bx-rapido--listo) #ppcp_checkout_top,
.bx .bx-rapido:not(.bx-rapido--listo) #ppcp_checkout_top_alternative,
.bx .bx-rapido:not(.bx-rapido--listo) .bx-rapido__hueco--monederos {
	opacity: 0;
	pointer-events: none;
}

.bx .bx-rapido .apple-pay-container,
.bx .bx-rapido .google-pay-container,
.bx .bx-rapido #ppcp_checkout_top_alternative,
.bx .bx-rapido .bx-rapido__hueco--monederos {
	transition: opacity .28s ease;
}

/* Mientras esperan, los botones no ocupan sitio: lo guardan los cristales. */
.bx .bx-rapido:not(.bx-rapido--listo) .bx-rapido__botones {
	position: absolute;
	left: 0;
	width: 100%;
	max-width: 320px;
	pointer-events: none;
}

.bx .bx-rapido {
	position: relative;
}

@media (prefers-reduced-motion: reduce) {
	.bx .bx-rapido__cristal::after {
		animation: none;
	}
}

/* ------------------------- 12. El modal de las condiciones de venta

   Leer las condiciones no despliega un acordeón encima del formulario —que era
   lo que hacía WooCommerce y dejaba el botón de pagar bailando media pantalla
   más abajo—: abre el MISMO modal que los filtros del catálogo en escritorio.
   Mismo cristal, mismo nacimiento desde un punto, las mismas partículas y el
   texto con su propio desplazamiento dentro.

   Sin JavaScript el enlace es un enlace: lleva a la página de las condiciones y
   se leen enteras allí. */

.bx-modal-velo {
	position: fixed;
	inset: 0;
	z-index: 94;
	background: rgba(0, 4, 9, .74);
	animation: bx-velo-entra .3s ease both;
}

.bx-modal {
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 95;
	display: flex;
	flex-direction: column;
	width: min(820px, 94vw);
	max-height: 86vh;
	overflow: hidden;
	transform: translate(-50%, -50%);
	border-radius: var(--bx-r-l);
	/* El cristal de la casa: el mismo de los paneles y el modal de filtros. */
	background: var(--bx-vidrio-luz), var(--bx-vidrio);
	-webkit-backdrop-filter: blur(34px) saturate(175%) brightness(1.06);
	backdrop-filter: blur(34px) saturate(175%) brightness(1.06);
	box-shadow:
		0 32px 70px rgba(0, 0, 0, .55),
		0 4px 14px rgba(0, 0, 0, .3),
		inset 0 0 60px var(--bx-vidrio-halo);
}

.bx-modal:focus {
	outline: none;
}

.bx-modal--naciendo {
	animation: bx-modal-nace .72s cubic-bezier(.34, .04, .18, 1) both;
}

.bx-modal--muriendo {
	animation: bx-modal-muere .34s ease-in both;
}

.bx-modal--muriendo ~ .bx-modal-velo,
.bx-modal-velo--muriendo {
	animation: bx-velo-entra .24s ease reverse both;
}

.bx-modal__cabecera {
	position: relative;
	flex: 0 0 auto;
	padding: var(--bx-e-4) var(--bx-e-4) var(--bx-e-2);
	padding-right: 64px;
	border-bottom: 1px solid var(--bx-panel-linea);
}

.bx .bx-modal__titulo {
	margin: 0;
	color: var(--bx-gold-claro);
	font-family: var(--bx-display);
	font-size: 1.15rem;
	font-weight: 600;
}

/* El aspa, la misma del modal de filtros. */
.bx .bx-modal__cerrar {
	position: absolute;
	top: 18px;
	right: 18px;
	z-index: 4;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	min-height: 0;
	padding: 0;
	border: 1px solid rgba(210, 236, 248, .42);
	border-radius: 50%;
	background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04));
	color: #ffffff;
	cursor: pointer;
}

.bx .bx-modal__cerrar:hover,
.bx .bx-modal__cerrar:focus-visible {
	border-color: rgba(56, 214, 245, .55);
	background: rgba(56, 214, 245, .16);
}

/* El texto, con su propio desplazamiento: el modal no crece con la ley del
   condicionado, por larga que sea. */
.bx-modal__cuerpo {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: var(--bx-e-3) var(--bx-e-4) var(--bx-e-4);
	color: var(--bx-texto-2);
	font-size: .9rem;
	line-height: 1.65;
}

.bx .bx-modal__cuerpo h1,
.bx .bx-modal__cuerpo h2,
.bx .bx-modal__cuerpo h3,
.bx .bx-modal__cuerpo h4 {
	margin: var(--bx-e-3) 0 var(--bx-e-1);
	color: var(--bx-texto);
	font-size: 1rem;
}

.bx .bx-modal__cuerpo p,
.bx .bx-modal__cuerpo li {
	color: var(--bx-texto-2);
}

.bx .bx-modal__cuerpo a {
	color: var(--bx-accent);
}

/* Dentro del modal, el texto que WooCommerce enseñaba en acordeón se ve entero
   y sin su caja de desplazamiento propia: la del modal ya hace ese trabajo. */
.bx-modal__cuerpo .woocommerce-terms-and-conditions {
	display: block;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	overflow: visible;
}

@media (prefers-reduced-motion: reduce) {
	.bx-modal--naciendo,
	.bx-modal--muriendo,
	.bx-modal-velo,
	.bx-modal-velo--muriendo {
		animation: none;
	}
}

/* --------------------------- 13. El velo de espera de WooCommerce

   Cuando WooCommerce —o una pasarela— está recalculando algo, tapa el trozo de
   página con su velo de bloqueo: fondo BLANCO al 60 %, que sobre esta tienda se
   ve como un fogonazo encima de los métodos de pago. Ocurre nada más cargar el
   pago, mientras Amazon Pay y compañía se levantan.

   El velo se queda —avisa de que ahí no se puede tocar todavía—, pero con el
   color de la casa: oscuro, con el vidrio de siempre y un halo cian que late en
   vez del aspa negra sobre blanco. Los estilos del velo los escribe blockUI en
   el propio elemento, así que la única forma de ganarles es !important. */
.bx .blockUI.blockOverlay {
	background: rgba(3, 12, 22, .58) !important;
	opacity: 1 !important;
	-webkit-backdrop-filter: blur(3px) saturate(130%);
	backdrop-filter: blur(3px) saturate(130%);
	border-radius: inherit;
	cursor: progress;
}

/* El aspa de WooCommerce es un SVG oscuro pensado para fondo blanco: en su
   lugar, el pulso de la casa. */
.bx .blockUI.blockOverlay::before {
	/* El pseudoelemento se declara entero y no se hereda nada de la hoja de
	   WooCommerce: así el pulso está centrado aunque esa hoja cambie o no
	   llegue. */
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: 34px;
	height: 34px;
	margin: -17px 0 0 -17px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(170, 244, 255, .95) 0%, rgba(56, 214, 245, .5) 42%, rgba(56, 214, 245, .12) 68%, rgba(56, 214, 245, 0) 78%);
	box-shadow: 0 0 32px rgba(56, 214, 245, .55);
	animation: bx-espera-late 1.1s ease-in-out infinite;
	font-size: inherit;
	color: transparent;
}

@keyframes bx-espera-late {
	0%, 100% { transform: scale(.72); opacity: .55; }
	50%      { transform: scale(1.08); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.bx .blockUI.blockOverlay::before {
		animation: none;
	}
}

/* ------------------- Pedido recibido: cuando hay que entrar para verlo

   El enlace de un pedido de un cliente registrado, abierto sin haber entrado,
   no enseña el pedido: WooCommerce pide acceder. Esa pantalla no pasa por la
   plantilla de la confirmación, así que se quedaba con el «Gracias» suelto, un
   aviso y unos campos desnudos a todo lo ancho. Aquí se le da la misma columna
   centrada que al resto de la confirmación. */

.woocommerce-order-received .woocommerce > .woocommerce-thankyou-order-received {
	max-width: 760px;
	margin: 0 auto var(--bx-e-3);
	color: var(--bx-gold-claro);
	font-family: var(--bx-display);
	font-size: clamp(1.3rem, 4vw, 1.8rem);
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
}

.woocommerce-order-received .woocommerce > .woocommerce-info,
.woocommerce-order-received .woocommerce > .woocommerce-error,
.woocommerce-order-received .woocommerce > .woocommerce-message {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

/* La tarjeta de acceso, más estrecha que la de «Mi cuenta»: aquí solo se entra,
   no se elige entre entrar y registrarse. */
.bx-acceso--suelto {
	max-width: 520px;
	margin: 0 auto;
}

.bx-acceso--suelto .bx-acceso__texto {
	margin: 0 0 var(--bx-e-2);
	color: var(--bx-texto-2);
	font-size: .9rem;
	line-height: 1.5;
}

/* La fila de «recuérdame» y el botón son los del acceso de «Mi cuenta»: el
   formulario es el mismo y se comporta igual. Aquí no hace falta añadir nada. */