/**
 * Carrito, checkout y el túnel de compra.
 *
 * Viste tres marcados que el tema no escribe:
 *
 *   · **WooCommerce** — la tabla del carrito, los totales, el formulario de
 *     pedido y los métodos de pago. Sus plantillas son suyas y así se quedan:
 *     saben de impuestos, de zonas de envío y de pasarelas.
 *   · **El módulo `044 · Tunnel d'achat`** — el héroe «Ton panier», el bloque
 *     Kiru y la línea de tiempo «lo que pasará después de pagar». Emitía
 *     clases `chido-tunnel__*` que **no tenían CSS en ninguna parte**: se
 *     buscó en el plugin y en la maqueta y no aparece. Marcado vivo apuntando
 *     a una hoja muerta, como la ficha de producto.
 *   · **El marco del tema** — los pasos y el panel de `page-panier.php`.
 *
 * Y una decisión que no es cosmética: **las cifras van en IBM Plex Mono**.
 * En Sour Gummy el 7 y el 1 son casi idénticos —«77,60 €» se lee «11,60 €»— y
 * en una tienda eso es un cliente que cree pagar once euros y paga setenta y
 * siete. La mono ya está en el sistema y tiene cifras inequívocas.
 */

/* =========================================================================
 * Las cifras, legibles
 * ====================================================================== */

.woocommerce-Price-amount,
.cart_totals .amount,
.shop_table .amount,
.chido-tunnel__kiru-amount-small,
.chido-buy__recap-lines dd {
	font-family: "IBM Plex Mono", monospace;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}

/* =========================================================================
 * WooCommerce reparte anchos con flotados
 *
 * Sus reglas de maquetado son siempre del mismo par: `float` **y** `width`
 * en porcentaje. Al convertir el padre en rejilla, el navegador ignora el
 * flotado pero **respeta el ancho** — y una columna del 48 % dentro de una
 * celda que ya es la mitad acaba midiendo un cuarto de página. Es lo que
 * dejaba el formulario de pedido en una tira de campos diminutos.
 *
 * Por eso no basta con `float: none`: hay que devolver el ancho a `auto` y
 * dejar que mande la rejilla.
 * ====================================================================== */

.woocommerce .col2-set .col-1,
.woocommerce .col2-set .col-2,
.woocommerce-page .col2-set .col-1,
.woocommerce-page .col2-set .col-2 {
	float: none;
	width: auto;
	max-width: none;
	padding: 0;
}

/*
 * Y hay que quitarle el limpia-flotados, que en una rejilla **cuenta como una
 * celda**.
 *
 *     .woocommerce .col2-set::after,
 *     .woocommerce .col2-set::before { content: " "; display: table }
 *
 * Un pseudoelemento con `content` es un hijo más, y por tanto un elemento de
 * la rejilla: se comía la primera columna y empujaba facturación a la segunda
 * y envío a la tercera. Eso era —y no las alturas— lo que descuadraba las dos
 * direcciones en la pantalla de gracias y lo que dejaba las de la cuenta
 * apretadas contra el borde derecho. Costó verlo porque en el HTML no hay
 * nada entre la apertura del `<div>` y la primera dirección.
 */
.woocommerce .col2-set::before,
.woocommerce .col2-set::after,
.woocommerce-page .col2-set::before,
.woocommerce-page .col2-set::after {
	content: none;
}

.woocommerce form .form-row-first,
.woocommerce form .form-row-last,
.woocommerce form .form-row-wide,
.woocommerce-page form .form-row-first,
.woocommerce-page form .form-row-last,
.woocommerce-page form .form-row-wide {
	float: none;
	width: auto;
}

/* =========================================================================
 * Avisos
 * ====================================================================== */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	margin: 0 0 1.5rem;
	padding: 1rem 1.25rem;
	border: var(--stroke);
	border-radius: var(--r);
	background: var(--paper-2);
	box-shadow: var(--pop-sm);
	list-style: none;
}

/*
 * WooCommerce coloca un icono de su tipografía propia en un `::before`
 * absoluto, contando con un relleno izquierdo de 3,5 em que aquí no existe:
 * el icono caía **encima de la primera palabra**. El sistema de Chido no usa
 * iconos tipográficos —distingue con color y trazo—, así que se retira.
 */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	content: none;
}

.woocommerce-error {
	background: rgba( 239, 89, 167, 0.16 );
	border-color: var(--pink);
}

.woocommerce-message {
	background: rgba( 7, 143, 96, 0.12 );
	border-color: var(--green);
}

.woocommerce-message .button,
.woocommerce-info .button {
	float: none;
	margin-left: 1rem;
}

/* =========================================================================
 * La tabla del carrito
 * ====================================================================== */

.woocommerce-cart-form .shop_table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	margin-bottom: 1.5rem;
}

.shop_table th {
	padding: 0 0.6rem 0.6rem;
	border-bottom: var(--stroke);
	font: 0.62rem/1.3 "IBM Plex Mono", monospace;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	text-align: left;
	color: var(--muted);
}

.shop_table td {
	padding: 0.9rem 0.6rem;
	border-bottom: var(--stroke-thin);
	vertical-align: middle;
}

.cart_item .product-thumbnail img {
	width: 3.5rem;
	height: 3.5rem;
	object-fit: contain;
	border: var(--stroke-thin);
	border-radius: var(--r-sm);
	background: var(--paper-2);
}

.cart_item .product-name a {
	font: 700 1.02rem/1.25 var(--font-display);
	text-decoration: none;
}

.cart_item .product-name a:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* La «x» de quitar: un botón, no un signo suelto perdido en la fila. */
.product-remove a.remove {
	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	border: var(--stroke-thin);
	border-radius: 50%;
	background: var(--paper);
	font-size: 1rem;
	line-height: 1;
	text-decoration: none;
	color: var(--ink);
	transition: background 140ms ease, transform 140ms ease;
}

.product-remove a.remove:hover {
	background: var(--pink);
	color: var(--paper);
	transform: scale(1.08);
}

.shop_table .quantity input.qty {
	width: 4rem;
	padding: 0.45rem;
	border: var(--stroke-thin);
	border-radius: var(--r-sm);
	background: var(--paper);
	font: 700 0.95rem/1 "IBM Plex Mono", monospace;
	text-align: center;
}

/* =========================================================================
 * Cupón y acciones
 * ====================================================================== */

/*
 * La fila de acciones.
 *
 * **El flex va en un div de dentro, nunca en el `<td>`.** Una celda con
 * `display: flex` deja de ser celda: el `colspan="6"` se ignora y la fila se
 * encoge a media tabla, con el borde cortado a la mitad. Fue exactamente lo
 * que pasó, y por eso `cart.php` envuelve el contenido en
 * `.chido-cart-actions`.
 *
 * WooCommerce además flota el cupón a la izquierda; se anula más abajo,
 * porque un flotado tampoco obedece al flex del padre.
 */
.woocommerce-cart-form .actions {
	padding-top: 1.1rem;
}

/*
 * Bloque en vez de flex. La fila la arma `.coupon`, que es quien tiene el
 * campo y el botón; poner otro flex por encima solo añadía un contenedor que
 * podía encogerse, y era justo lo que dejaba el cupón a un tercio del ancho
 * de la tabla.
 */
.chido-cart-actions {
	display: block;
	width: 100%;
}

/*
 * El cupón: campo a la izquierda, botón a la derecha, mismo alto y la fila
 * entera de lado a lado.
 *
 * WooCommerce lo arma con flotados y un ancho fijo, y lo hace con selectores
 * de cinco clases —`.woocommerce #content table.cart td.actions .coupon
 * .input-text`—. Una regla más corta pierde aunque venga después, así que
 * aquí se encadena hasta superarlos. No es adorno: sin esto el campo cae
 * encima del botón y el bloque se queda a media tabla.
 */
.woocommerce-cart table.cart td.actions .coupon,
.woocommerce table.cart td.actions .chido-cart-actions .coupon,
.woocommerce-page table.cart td.actions .chido-cart-actions .coupon {
	float: none;
	display: flex;
	gap: 0.5rem;
	align-items: stretch;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

.woocommerce-cart table.cart td.actions .coupon .input-text,
.woocommerce-checkout table.cart td.actions .coupon .input-text,
.woocommerce table.cart td.actions .chido-cart-actions .coupon .input-text,
.woocommerce-page table.cart td.actions .chido-cart-actions .coupon .input-text {
	float: none;
	flex: 1 1 auto;
	width: auto;
	max-width: none;
	min-width: 0;
	margin: 0;
	line-height: 1.2;
}

.woocommerce table.cart td.actions .chido-cart-actions .coupon button,
.woocommerce-page table.cart td.actions .chido-cart-actions .coupon button {
	flex: 0 0 auto;
	white-space: nowrap;
}

.woocommerce #payment #place_order,
.woocommerce-page #payment #place_order {
	float: none;
	width: 100%;
}

.woocommerce-cart-form .coupon input[type="text"] {
	flex: 0 1 12rem;
	min-width: 0;
	padding: 0.6rem 0.85rem;
	border: var(--stroke-thin);
	border-radius: var(--r-pill);
	background: var(--paper);
	font: 0.9rem/1 var(--font-body);
}

/*
 * «Mettre à jour le panier» desaparece: `lib/cart.js` lo pulsa por el
 * visitante en cuanto cambia una cantidad. Se esconde, no se borra — sigue
 * llevando el `nonce` y la lógica de envío, y es él quien recibe el clic.
 *
 * La regla cuelga de `.chido-cart--auto`, que pone el propio script. Si el
 * JavaScript no carga, el botón reaparece y el carrito se actualiza a mano
 * como toda la vida.
 */
.chido-cart--auto button[name="update_cart"],
.chido-cart--auto input[name="update_cart"] {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Sin ese botón, el cupón se queda solo en la fila. */
.chido-cart--auto .chido-cart-actions {
	justify-content: flex-start;
}

/* =========================================================================
 * Los botones, homologados
 *
 * Dos niveles y ninguno más. El criterio es la función, no el sitio:
 *
 *   PRINCIPAL (amarillo) — la acción que hace avanzar el pedido:
 *       «Valider la commande» · «Confirmer ma commande» · «Ajouter au panier»
 *   SECUNDARIO (papel)   — todo lo demás: aplicar cupón, seguir comprando,
 *       volver a la tienda.
 *
 * Mismo alto, mismo radio, mismo trazo y misma sombra en los dos: solo
 * cambia el fondo. Antes había cuatro tamaños y un morado suelto que no
 * está en la paleta.
 * ====================================================================== */

.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce .checkout-button,
.woocommerce #payment #place_order,
.chido-buy .single_add_to_cart_button {
	display: inline-block;
	padding: 0.8rem 1.6rem;
	border: var(--stroke);
	border-radius: var(--r-pill);
	background: var(--paper);
	box-shadow: var(--pop-sm);
	font: 700 1rem/1.15 var(--font-display);
	color: var(--ink);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: transform 140ms ease, box-shadow 140ms ease;
}

/*
 * El nivel principal. Hay que empatar la especificidad de WooCommerce, que
 * pinta sus botones `.alt` de morado con `.woocommerce a.button.alt` — tres
 * selectores. Una regla de dos perdía, y el botón de pagar salía violeta en
 * mitad de una paleta que no tiene violeta.
 */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce a.checkout-button.button,
.woocommerce #payment #place_order,
.chido-buy .single_add_to_cart_button {
	background: var(--yellow);
	/* El color va aquí y no en la regla base: WooCommerce pinta `.alt` en
	   blanco desde `.woocommerce a.button.alt`, tres selectores, y ganaba.
	   Texto blanco sobre amarillo no se lee. */
	color: var(--ink);
}

.woocommerce button.button:hover:not( :disabled ),
.woocommerce a.button:hover,
.woocommerce input.button:hover:not( :disabled ),
.woocommerce .checkout-button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #payment #place_order:hover,
.chido-buy .single_add_to_cart_button:hover:not( .disabled ) {
	background: var(--yellow);
	color: var(--ink);
	transform: translate(-2px, -2px);
	box-shadow: var(--pop);
}

.woocommerce button.button:disabled,
.woocommerce button.button[disabled],
.woocommerce input.button:disabled,
.chido-buy .single_add_to_cart_button.disabled {
	background: var(--paper-2);
	box-shadow: none;
	opacity: 0.55;
	cursor: not-allowed;
	transform: none;
}

/* =========================================================================
 * Los totales
 * ====================================================================== */

/*
 * El armazón de los totales. Importa el árbol real, que no es evidente:
 *
 *   .cart-collaterals
 *     └ .cart_totals
 *         ├ h2 + table            ← los importes
 *         ├ .wc-proceed-to-checkout
 *         │   ├ .chido-tunnel__timeline   ← la línea de tiempo, texto largo
 *         │   └ .checkout-button
 *         └ .chido-tunnel__kiru-decomp    ← el bloque Kiru, texto largo
 *
 * **Todo cuelga de `.cart_totals`.** Estrechar ese contenedor —que era lo que
 * yo hacía— mete también la línea de tiempo y el bloque Kiru en una columna
 * de veinte caracteres. Así que no se estrecha el contenedor: se estrechan
 * **solo la tabla y el botón**, y los bloques de texto se quedan a su ancho.
 */

.cart-collaterals {
	margin-top: 2.5rem;
}

/*
 * LA REGLA QUE LO ROMPÍA TODO. `woocommerce-layout.css` trae:
 *
 *   .woocommerce .cart-collaterals .cart_totals,
 *   .woocommerce-page .cart-collaterals .cart_totals { float: right; width: 48% }
 *
 * Es el maquetado clásico de WooCommerce: tabla de productos arriba, totales
 * flotando en la mitad derecha. Con el túnel dentro de ese contenedor, la
 * línea de tiempo y el bloque Kiru quedaban también en media página, con el
 * lado izquierdo en blanco.
 *
 * Se anula con la misma especificidad —dos clases y un elemento— porque una
 * regla más floja no gana. Después, cada hijo decide su ancho: la tabla y el
 * botón estrechos y a la derecha, los bloques de texto a toda la caja.
 */
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals {
	float: none;
	width: 100%;
}

.wc-proceed-to-checkout {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	margin-top: 1.5rem;
}

.cart_totals h2 {
	margin-bottom: 0.9rem;
	font: 700 clamp(1.4rem, 3vw, 2rem)/1.1 var(--font-display);
}

.cart_totals table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: var(--stroke);
	border-radius: var(--r);
	overflow: hidden;
	background: var(--paper-2);
	box-shadow: var(--pop-sm);
}

.cart_totals th,
.cart_totals td {
	padding: 0.85rem 1.1rem;
	border-bottom: var(--stroke-thin);
	text-align: left;
	vertical-align: top;
}

.cart_totals tr:last-child th,
.cart_totals tr:last-child td {
	border-bottom: 0;
}

.cart_totals th {
	font: 700 0.95rem/1.3 var(--font-display);
	text-transform: none;
	letter-spacing: 0;
	color: var(--ink);
	white-space: nowrap;
}

.cart_totals .order-total th,
.cart_totals .order-total td {
	background: var(--yellow);
	font-size: 1.1rem;
	font-weight: 700;
}

.cart_totals .woocommerce-shipping-methods {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cart_totals .woocommerce-shipping-destination {
	margin: 0.5rem 0 0;
	font-size: 0.85rem;
	color: var(--muted);
}

/* =========================================================================
 * El formulario del checkout
 * ====================================================================== */

.woocommerce-checkout h3 {
	margin: 1.75rem 0 1rem;
	font: 700 clamp(1.2rem, 2.6vw, 1.6rem)/1.15 var(--font-display);
}

.woocommerce-billing-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper {
	display: grid;
	gap: 0.85rem;
}

.form-row {
	display: grid;
	gap: 0.3rem;
	margin: 0;
	padding: 0;
}

.form-row label {
	font: 0.62rem/1.3 "IBM Plex Mono", monospace;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--muted);
}

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

.form-row input.input-text,
.form-row textarea,
.form-row select,
.select2-container .select2-selection {
	width: 100%;
	padding: 0.7rem 0.9rem;
	border: var(--stroke-thin);
	border-radius: var(--r-sm);
	background: var(--paper);
	font: 1rem/1.3 var(--font-body);
	color: var(--ink);
}

.form-row input.input-text:focus,
.form-row textarea:focus,
.form-row select:focus {
	outline: none;
	border: var(--stroke);
	box-shadow: var(--pop-sm);
}

.form-row textarea {
	min-height: 6rem;
	resize: vertical;
}

@media (min-width: 40rem) {
	.woocommerce-billing-fields__field-wrapper {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.form-row-wide,
	#billing_address_1_field,
	#billing_address_2_field {
		grid-column: 1 / -1;
	}
}

/* =========================================================================
 * El resumen del pedido y el pago
 * ====================================================================== */

#order_review {
	margin-top: 2rem;
	padding: clamp(1.25rem, 3vw, 1.75rem);
	border: var(--stroke);
	border-radius: var(--r-lg);
	background: var(--paper-2);
	box-shadow: var(--pop);
}

.woocommerce-checkout-review-order-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	margin-bottom: 1.25rem;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
	padding: 0.7rem 0.5rem;
	border-bottom: var(--stroke-thin);
	text-align: left;
}

.woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout-review-order-table tfoot .order-total td {
	border-top: var(--stroke);
	border-bottom: 0;
	font: 700 1.15rem/1.2 var(--font-display);
}

.woocommerce-checkout-payment,
.payment_methods {
	margin: 0;
	padding: 0;
	list-style: none;
}

.payment_methods li {
	padding: 0.85rem 1rem;
	border: var(--stroke-thin);
	border-radius: var(--r);
	background: var(--paper);
}

.payment_methods li + li {
	margin-top: 0.6rem;
}

.payment_methods label {
	font: 700 1rem/1.2 var(--font-display);
	cursor: pointer;
}

.payment_box {
	margin-top: 0.6rem;
	font-size: 0.88rem;
	color: var(--muted);
}

.woocommerce-terms-and-conditions-wrapper {
	margin: 1.25rem 0;
	font-size: 0.9rem;
}

/* =========================================================================
 * La pantalla de gracias
 *
 * Cuatro bloques, y el orden importa: confirmación → el Passeport y su Kiru
 * → qué va a pasar → el recibo. De lo que emociona a lo administrativo, que
 * es como se lee una confirmación de compra.
 *
 * El problema no era el contenido sino que todo venía seguido, sin aire ni
 * jerarquía: el QR, la línea de tiempo y la dirección de facturación pesaban
 * lo mismo.
 * ====================================================================== */

.woocommerce-order > * + * {
	margin-top: clamp( 1.75rem, 4vw, 2.75rem );
}

/* --- el bloque del pasaporte, que es lo distintivo ---------------------- */

.woocommerce-order .chido-tunnel__kiru-decomp {
	margin: 0;
}

/*
 * El pasaporte: QR a la izquierda, instrucciones a la derecha.
 *
 * El módulo `044` **ya emite la estructura correcta** —`__qr-image` y
 * `__qr-text` como hermanos— pero sin una línea de CSS: los dos caían uno
 * debajo del otro y el rótulo «Passeport Chido digital» se metía bajo la
 * sombra del código. Aquí solo hace falta declararlo en dos columnas.
 */
.chido-tunnel__qr {
	display: grid;
	gap: clamp( 1.25rem, 3vw, 2rem );
	align-items: start;
	padding: clamp( 1.25rem, 3vw, 2rem );
	border: var(--stroke);
	border-radius: var(--r-lg);
	background: var(--paper);
	box-shadow: var(--pop-sm);
}

.chido-tunnel__qr-image img {
	display: block;
	width: clamp( 9rem, 22vw, 13rem );
	height: auto;
	padding: 0.6rem;
	border: var(--stroke);
	border-radius: var(--r);
	background: var(--paper);
}

.chido-tunnel__qr-title {
	margin: 0.2rem 0 0.7rem;
	font: 700 clamp( 1.2rem, 2.8vw, 1.6rem )/1.15 var(--font-display);
}

.chido-tunnel__qr-text > p {
	margin: 0 0 0.7rem;
}

@media (min-width: 44rem) {
	.chido-tunnel__qr {
		grid-template-columns: auto minmax( 0, 1fr );
	}
}

/*
 * Los botones del módulo. Usa sus propias clases `chido-cta`, que tampoco
 * tenían estilo: se alinean con los dos niveles del resto de la tienda.
 */
.chido-cta {
	display: inline-block;
	margin-top: 0.4rem;
	padding: 0.8rem 1.6rem;
	border: var(--stroke);
	border-radius: var(--r-pill);
	background: var(--paper);
	box-shadow: var(--pop-sm);
	font: 700 1rem/1.15 var(--font-display);
	color: var(--ink);
	text-decoration: none;
	transition: transform 140ms ease, box-shadow 140ms ease;
}

.chido-cta--primary {
	background: var(--yellow);
}

.chido-cta:hover {
	background: var(--yellow);
	transform: translate( -2px, -2px );
	box-shadow: var(--pop);
}

/*
 * Los dos botones del final de la pantalla de gracias.
 *
 * «No los entiendo», dijo el cliente, y con razón: venían pegados uno al
 * otro, del mismo tamaño y con el mismo peso visual, así que no se sabía
 * cuál era la acción y cuál la alternativa. Se separan, el principal manda y
 * el otro se retira a enlace con trazo — el mismo criterio de dos niveles
 * que el resto de la tienda.
 */
.chido-tunnel__thankyou-ctas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
}

.chido-tunnel__thankyou-ctas .chido-cta {
	margin-top: 0;
}

.chido-tunnel__thankyou-ctas .chido-cta--secondary {
	padding: 0.8rem 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	text-decoration: underline;
	text-decoration-thickness: 0.14em;
	text-underline-offset: 0.22em;
	text-decoration-color: var(--yellow);
}

.chido-tunnel__thankyou-ctas .chido-cta--secondary:hover {
	background: transparent;
	box-shadow: none;
	transform: none;
	text-decoration-color: var(--ink);
}

/* --- el recibo --------------------------------------------------------- */

.chido-merci__recap {
	padding: clamp( 1.25rem, 3vw, 2rem );
	border: var(--stroke);
	border-radius: var(--r-lg);
	background: var(--paper-2);
	box-shadow: var(--pop-sm);
}

.chido-merci__titre {
	margin: 0 0 1.1rem;
	font: 700 clamp( 1.3rem, 3vw, 1.8rem )/1.1 var(--font-display);
}

/*
 * El resumen: cinco datos en fila con su rótulo encima.
 *
 * WooCommerce lo arma como una lista flotada con `border-right` punteado,
 * `padding-right: 2em` y `margin-right: 2em`, y lo hace desde
 * `.woocommerce ul.order_details li` — tres clases. Mis reglas de una clase
 * perdían, así que quedaban las rayas grises sueltas, el correo desbordando
 * sobre el total y un hueco a la izquierda. Aquí se encadena `ul.order_details`
 * con nuestra clase para ganar sin recurrir a `!important`.
 */
/*
 * Y el tercer limpia-flotados, el de la lista:
 *
 *     .woocommerce ul.order_details::after,
 *     .woocommerce ul.order_details::before { content:" "; display:table }
 *
 * Dos celdas fantasma más. La primera se comía la columna de la izquierda, así
 * que «Numéro de commande» empezaba en la segunda y el filete amarillo caía en
 * el dato equivocado. Mismo patrón que en `.col2-set` y en la cabecera de las
 * direcciones: WooCommerce limpia flotados con pseudoelementos y en una
 * rejilla eso son hijos.
 */
.woocommerce ul.order_details::before,
.woocommerce ul.order_details::after,
.woocommerce-page ul.order_details::before,
.woocommerce-page ul.order_details::after {
	content: none;
}

.woocommerce ul.order_details.woocommerce-order-overview,
.woocommerce-page ul.order_details.woocommerce-order-overview {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	/* El mismo hueco en vertical y en horizontal: el cliente pidió que las
	   líneas y los textos guarden la misma separación entre sí. */
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
	border: 0;
}

.woocommerce ul.order_details.woocommerce-order-overview li,
.woocommerce-page ul.order_details.woocommerce-order-overview li {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
	border: 0;
	font: 0.62rem/1.3 "IBM Plex Mono", monospace;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--muted);
}

/*
 * El filete amarillo separa **entre** datos, nunca delante del primero.
 *
 * Antes lo llevaban todos, así que el primero tenía una raya suelta a su
 * izquierda y su texto entraba sangrado respecto al título «Ta commande».
 * Un `li + li` no vale: con las columnas en `auto-fit` no se sabe cuál abre
 * cada fila, y el primero de la segunda fila volvía a lucir la raya pegada al
 * margen. Por eso el número de columnas se fija por tramo y el primero de
 * cada fila se calcula con `nth-child`.
 */
@media (min-width: 34rem) {
	.woocommerce ul.order_details.woocommerce-order-overview,
	.woocommerce-page ul.order_details.woocommerce-order-overview {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.woocommerce ul.order_details.woocommerce-order-overview li,
	.woocommerce-page ul.order_details.woocommerce-order-overview li {
		padding-left: 0.85rem;
		border-left: var(--sw) solid var(--yellow);
	}

	.woocommerce ul.order_details.woocommerce-order-overview li:nth-child(2n+1),
	.woocommerce-page ul.order_details.woocommerce-order-overview li:nth-child(2n+1) {
		padding-left: 0;
		border-left: 0;
	}
}

@media (min-width: 62rem) {
	.woocommerce ul.order_details.woocommerce-order-overview,
	.woocommerce-page ul.order_details.woocommerce-order-overview {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}

	/* Se deshace el corte de dos columnas antes de aplicar el de tres: mismo
	   peso de selector, gana el que va después. */
	.woocommerce ul.order_details.woocommerce-order-overview li:nth-child(2n+1),
	.woocommerce-page ul.order_details.woocommerce-order-overview li:nth-child(2n+1) {
		padding-left: 0.85rem;
		border-left: var(--sw) solid var(--yellow);
	}

	.woocommerce ul.order_details.woocommerce-order-overview li:nth-child(3n+1),
	.woocommerce-page ul.order_details.woocommerce-order-overview li:nth-child(3n+1) {
		padding-left: 0;
		border-left: 0;
	}
}

.woocommerce ul.order_details.woocommerce-order-overview li strong,
.woocommerce-page ul.order_details.woocommerce-order-overview li strong {
	display: block;
	margin-top: 0.35rem;
	font: 700 1rem/1.3 var(--font-display);
	letter-spacing: 0;
	text-transform: none;
	color: var(--ink);
	/* El correo es lo único que puede no caber: parte por donde haga falta
	   en vez de salirse sobre la columna de al lado. */
	overflow-wrap: anywhere;
}

/* --- el detalle y las direcciones -------------------------------------- */

.woocommerce-order-details__title,
.woocommerce-column__title {
	margin: 0 0 0.9rem;
	font: 700 clamp( 1.15rem, 2.6vw, 1.5rem )/1.15 var(--font-display);
}

.woocommerce-order-details table.shop_table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: var(--stroke);
	border-radius: var(--r);
	overflow: hidden;
	background: var(--paper);
}

.woocommerce-order-details table.shop_table th,
.woocommerce-order-details table.shop_table td {
	padding: 0.7rem 1rem;
	border-bottom: var(--stroke-thin);
	text-align: left;
}

/*
 * El pie de la tabla, **sin amarillo en la última fila**.
 *
 * Lo llevaba, y resaltaba «Moyen de paiement : Paiement test» en vez del
 * total: WooCommerce cierra el pie con el medio de pago, no con el importe, y
 * el número de filas cambia según haya envío, impuestos o cupón. No hay clase
 * que distinga la fila del total, así que ninguna se destaca por posición —se
 * prefiere no señalar a señalar lo que no es.
 */
.woocommerce-order-details table.shop_table tfoot th,
.woocommerce-order-details table.shop_table tfoot td {
	background: var(--paper-2);
}

.woocommerce-order-details table.shop_table tfoot tr:last-child th,
.woocommerce-order-details table.shop_table tfoot tr:last-child td {
	border-bottom: 0;
	font-weight: 700;
}

.woocommerce-customer-details address {
	padding: 1rem 1.2rem;
	border: var(--stroke-thin);
	border-radius: var(--r);
	background: var(--paper);
	font-style: normal;
	line-height: 1.6;
}

/*
 * Facturación y envío, lado a lado.
 *
 * Van con `.col2-set` / `.col-1` / `.col-2`, las mismas clases que el
 * formulario del checkout — así que el reseteo de anchos de más arriba, que
 * hacía falta allí, dejaba estas dos direcciones apiladas. Se les devuelve
 * la rejilla aquí, explícitamente y sin depender de los flotados.
 */
@media (min-width: 52rem) {
	.woocommerce-customer-details .woocommerce-columns--addresses,
	.woocommerce-customer-details .addresses.col2-set,
	.woocommerce-order .woocommerce-columns--addresses {
		display: grid;
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: clamp( 1.25rem, 3vw, 2rem );
	}

	/*
	 * Las dos cajas terminan a la misma altura.
	 *
	 * La de facturación lleva teléfono y correo debajo y la de envío no, así
	 * que las dos direcciones medían distinto y el bloque quedaba escalonado.
	 * La columna pasa a ser una caja flexible y la dirección se estira: los
	 * dos recuadros abren y cierran a la vez.
	 */
	.woocommerce-customer-details .woocommerce-column,
	.woocommerce-order .woocommerce-column {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
		margin: 0;
		min-width: 0;
	}

	.woocommerce-customer-details .woocommerce-column address {
		flex: 1 1 auto;
	}
}

/* Cada dirección con su título pegado a su caja, no flotando entre las dos. */
.woocommerce-customer-details .woocommerce-column__title {
	margin-top: 0;
}

.woocommerce-customer-details .woocommerce-column + .woocommerce-column .woocommerce-column__title {
	margin-top: 0;
}

/* =========================================================================
 * El túnel · módulo 044
 * ====================================================================== */

.chido-tunnel__hero {
	margin-bottom: 1.5rem;
}

.chido-tunnel__label {
	margin: 0 0 0.35rem;
	font: 0.62rem/1.3 "IBM Plex Mono", monospace;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--muted);
}

.chido-tunnel__title {
	margin: 0 0 0.5rem;
	font: 700 clamp(1.9rem, 5vw, 3.2rem)/1.02 var(--font-display);
	letter-spacing: var(--display-tracking);
}

.chido-tunnel__intro {
	margin: 0 0 1.5rem;
	max-width: 42rem;
	font-size: 1.02rem;
	color: var(--ink-soft);
}

/* --- el bloque Kiru dentro del carrito --------------------------------- */

.chido-tunnel__kiru-text {
	margin: 0;
}

/* Es un aviso, no una nota al pie: se le da caja propia. */
.chido-tunnel__kiru-decomp {
	margin: 2rem 0 0;
	padding: clamp(1.1rem, 2.5vw, 1.6rem);
	border: var(--stroke-thin);
	border-radius: var(--r);
	background: var(--paper-2);
}

.chido-tunnel__kiru-label {
	display: block;
	margin-bottom: 0.3rem;
	font: 0.62rem/1.3 "IBM Plex Mono", monospace;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--muted);
}

.chido-tunnel__kiru-amount-small {
	font-weight: 700;
	font-size: 1.15rem;
}

.chido-tunnel__kiru-link {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* --- la línea de tiempo ------------------------------------------------ */

.chido-tunnel__timeline {
	margin: 2rem 0;
	padding: clamp(1.25rem, 3vw, 1.75rem);
	border: var(--stroke);
	border-radius: var(--r-lg);
	background: var(--paper);
	box-shadow: var(--pop-sm);
}

.chido-tunnel__timeline-title {
	margin: 0 0 1.1rem;
	font: 700 1.25rem/1.15 var(--font-display);
}

.chido-tunnel__timeline-list {
	display: grid;
	gap: 1.1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.chido-tunnel__timeline-step {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.85rem;
	align-items: start;
}

/* El punto de cada paso, unido al siguiente por un filete. */
.chido-tunnel__timeline-marker {
	position: relative;
	display: grid;
	place-items: center;
	width: 1.6rem;
	height: 1.6rem;
	border: var(--stroke-thin);
	border-radius: 50%;
	background: var(--yellow);
	font: 700 0.72rem/1 "IBM Plex Mono", monospace;
}

.chido-tunnel__timeline-step:not( :last-child ) .chido-tunnel__timeline-marker::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	width: var(--sw-thin);
	height: 1.1rem;
	background: var(--ink);
	transform: translateX(-50%);
}

/* La versión de después de pagar: lo hecho se marca y se apaga. */
.chido-tunnel__timeline--anticipated .chido-tunnel__timeline-marker {
	background: var(--paper-2);
}

/* --- los pasos del checkout del módulo --------------------------------- */

.chido-tunnel__steps {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
	padding: 0;
	list-style: none;
}

.chido-tunnel__step {
	display: flex;
	gap: 0.4rem;
	align-items: center;
	padding: 0.4rem 0.8rem;
	border: var(--stroke-thin);
	border-radius: var(--r-pill);
	font: 0.72rem/1 "IBM Plex Mono", monospace;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
}

.chido-tunnel__step--active {
	border: var(--stroke);
	background: var(--yellow);
	color: var(--ink);
}

.chido-tunnel__step-number {
	font-weight: 600;
}

/* --- el selector de fecha (click & collect, módulo 048) ---------------- */

.chido-tunnel__datepicker {
	margin: 1.5rem 0;
	padding: clamp(1rem, 2.5vw, 1.5rem);
	border: var(--stroke-thin);
	border-radius: var(--r);
	background: var(--paper-2);
}

.chido-tunnel__datepicker-title {
	margin: 0 0 0.4rem;
	font: 700 1.05rem/1.2 var(--font-display);
}

.chido-tunnel__datepicker-intro {
	margin: 0 0 0.8rem;
	font-size: 0.88rem;
	color: var(--muted);
}

/* =========================================================================
 * El panel del tema
 * ====================================================================== */

.checkout-steps {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
}

.checkout-steps span {
	padding: 0.4rem 0.9rem;
	border: var(--stroke-thin);
	border-radius: var(--r-pill);
	font: 0.68rem/1 "IBM Plex Mono", monospace;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
}

.checkout-steps .is-active {
	border: var(--stroke);
	background: var(--yellow);
	color: var(--ink);
}

.checkout-panel {
	padding: clamp(1.25rem, 3.5vw, 2.5rem);
	border: var(--stroke);
	border-radius: var(--r-lg);
	background: var(--paper);
	box-shadow: var(--pop);
}

/* =========================================================================
 * Escritorio
 * ====================================================================== */

@media (min-width: 62rem) {
	/*
	 * El bloque de totales, en dos columnas de verdad.
	 *
	 * Apilado dejaba media página en blanco a cada lado: el título a la
	 * derecha, la tabla a la izquierda y la línea de tiempo abajo del todo.
	 * Aquí se reparte como un carrito de toda la vida — la explicación a la
	 * izquierda, la cuenta y el botón a la derecha, donde se decide.
	 *
	 * `display: contents` es la pieza clave: disuelve `.cart_totals` y
	 * `.wc-proceed-to-checkout`, que son cajas que WooCommerce impone y que
	 * no significan nada visualmente, para que sus hijos entren directamente
	 * en esta rejilla.
	 */
	.cart-collaterals {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(19rem, 23rem);
		gap: 2.5rem;
		align-items: start;
	}

	.cart_totals,
	.wc-proceed-to-checkout {
		display: contents;
	}

	.cart_totals > h2 {
		grid-column: 2;
		grid-row: 1;
		margin: 0;
	}

	.cart_totals > table {
		grid-column: 2;
		grid-row: 2;
	}

	.wc-proceed-to-checkout > .checkout-button {
		grid-column: 2;
		grid-row: 3;
		display: block;
		text-align: center;
	}

	.chido-tunnel__kiru-decomp {
		grid-column: 2;
		grid-row: 4;
		margin: 0;
	}

	/* La línea de tiempo ocupa la columna ancha, de arriba abajo. */
	.chido-tunnel__timeline {
		grid-column: 1;
		grid-row: 1 / span 4;
		margin: 0;
	}

	/*
	 * El checkout, en dos columnas — y la rejilla va en el **formulario**,
	 * no en `.col2-set`.
	 *
	 * Ese era el error: `.col2-set` son las dos columnas de WooCommerce para
	 * facturación y envío, no la estructura de la página. Al convertirlo en
	 * rejilla, los datos del cliente acababan en una de sus dos celdas y
	 * media página quedaba vacía. El reparto correcto es el clásico:
	 *
	 *     datos del cliente  |  resumen del pedido y pago
	 *
	 * Dentro, `.col2-set` vuelve a ser una sola columna: facturación y envío
	 * uno debajo del otro, que es como se rellenan.
	 */
	form.checkout.woocommerce-checkout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(21rem, 27rem);
		gap: clamp(1.5rem, 4vw, 3rem);
		align-items: start;
	}

	#customer_details {
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	#order_review_heading {
		grid-column: 2;
		grid-row: 1;
		margin-top: 0;
	}

	#order_review {
		grid-column: 2;
		grid-row: 2;
		margin-top: 0;
		position: sticky;
		top: 2rem;
	}

	.woocommerce-checkout .col2-set {
		display: block;
	}
}

/* Desde muy ancho, la línea de tiempo se abre a dos columnas dentro de su
   caja: cinco pasos en una tira vertical dejan la caja muy alta. */
@media (min-width: 86rem) {
	.chido-tunnel__timeline-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 2.5rem;
	}
}