/**
 * Checkout y pantalla de "pedido recibido".
 *
 * Los dos son bloques de WooCommerce, pensados para un tema claro. Sobre el
 * fondo negro del sitio quedan varias cosas ilegibles, y eso es lo que arregla
 * esta hoja.
 */

/* =========================================================================
   AVISO DE DEMORA POR STOCK
   ========================================================================= */

.hbg-aviso-stock {
	margin: 0 0 var(--hbg-e4);
	padding: var(--hbg-e3) var(--hbg-e4);
	background: rgba(57, 255, 20, 0.07);
	border: 1px solid rgba(57, 255, 20, 0.4);
	border-radius: var(--hbg-radio-sm);
	color: var(--hbg-texto-suave);
	font-size: 0.88rem;
	line-height: 1.55;
}

/* =========================================================================
   ETIQUETAS DE LOS CAMPOS

   WooCommerce las hace flotar DENTRO del campo, que es blanco, y les pone
   `color: inherit`. Heredaban el gris claro del tema y quedaban blanco sobre
   blanco: el cliente no veía qué tenía que completar.
   ========================================================================= */

.wc-block-components-form .wc-block-components-text-input label,
.wc-block-components-text-input label,
.wc-block-components-checkout-step .wc-block-components-text-input label {
	color: #4a4d52;
}

/* Con el campo ya completo la etiqueta se achica y sube, pero sigue sobre el
   blanco: tiene que quedar oscura igual. */
.wc-block-components-text-input.is-active label {
	color: #6b6f75;
}

/* El texto que escribe el cliente. */
.wc-block-components-text-input input,
.wc-block-components-form .wc-block-components-text-input input,
.wc-blocks-components-select__select {
	color: #1b1d20;
}

/* =========================================================================
   FOCO EN LOS CAMPOS DEL FORMULARIO

   De fábrica, al enfocar un campo el borde pasa a un gris oscuro casi
   invisible sobre el fondo blanco del input: ni haciendo click ni tabulando
   se nota adónde fue el foco. Se reemplaza por el mismo resplandor verde de
   marca que ya usan los recuadros de Contacto y las opciones de envío/pago,
   reutilizando esos mismos tokens (`--hbg-glow` + `--hbg-glow-fuerte`) para
   que el criterio sea el mismo en todo el sitio.

   Los tres selectores cubren TODOS los campos de texto del checkout —
   contacto, dirección de envío y de facturación, teléfono, nota del
   pedido—, no sólo la dirección: los tres comparten uno de estos mismos
   componentes de bloque.

   Va con `:focus`, no `:focus-visible`: el pedido puntual es que se note
   "al hacer clic o tabular", y para un campo de texto un click también debe
   dejar clara la marca de foco, no sólo la navegación por teclado.
   ========================================================================= */

.wc-block-components-text-input input:focus,
.wc-blocks-components-select__select:focus,
.wc-block-components-textarea:focus {
	border-color: var(--hbg-neon) !important;
	outline: none !important;
	box-shadow: var(--hbg-glow), var(--hbg-glow-fuerte) !important;
}

/* =========================================================================
   PANTALLA DE PEDIDO RECIBIDO

   Los títulos venían en blanco sobre una tarjeta casi blanca (#fbfbfb): no se
   leía ni "Detalles del pedido" ni "Dirección de facturación". Se pasa la
   tarjeta entera al oscuro de la marca, que además es el color que ya tenía la
   tabla de abajo.
   ========================================================================= */

.woocommerce-order .woocommerce-order-details,
.woocommerce-order .woocommerce-customer-details,
.wc-block-order-confirmation-totals,
.wc-block-order-confirmation-billing-address,
.wc-block-order-confirmation-shipping-address {
	padding: var(--hbg-e5);
	margin-bottom: var(--hbg-e5);
	background: var(--hbg-superficie-1);
	border: 1px solid var(--hbg-borde);
	border-radius: var(--hbg-radio);
}

/*
 * OJO con la especificidad. Astra pinta estos títulos de blanco desde
 *
 *     .woocommerce-page.woocommerce-checkout .woocommerce-order
 *     h2.woocommerce-order-details__title   -> (0,4,1)
 *
 * Un `.woocommerce-order h2` (0,1,1) no le gana, y el título seguía en blanco
 * sobre blanco aunque el color sí cambiara. Hay que igualar el prefijo y sumar
 * una clase más.
 */
.woocommerce-page.woocommerce-checkout .woocommerce-order .woocommerce-order-details h2.woocommerce-order-details__title,
.woocommerce-page.woocommerce-checkout .woocommerce-order .woocommerce-customer-details h2.woocommerce-column__title,
.woocommerce-page.woocommerce-checkout .woocommerce-order h2,
.woocommerce-page.woocommerce-checkout .woocommerce-order h3,
.woocommerce-order h2,
.woocommerce-order h3,
.woocommerce-order .woocommerce-order-details__title,
.woocommerce-order .woocommerce-column__title,
.wc-block-order-confirmation-totals h2,
.wc-block-order-confirmation-billing-address h2,
.wc-block-order-confirmation-shipping-address h2 {
	background: transparent;
	color: var(--hbg-texto);
	font-family: var(--hbg-fuente-titulo);
	/* Venía en 20,8 px de fuente con 20,8 de relleno: una barra de 70 px de
	   alto para un título. */
	font-size: 1.15rem;
	padding: 0 0 var(--hbg-e3);
	margin: 0;
	border-bottom: 1px solid var(--hbg-borde);
}

/* ------------------------------- la tabla ------------------------------- */

.woocommerce-order table.woocommerce-table--order-details,
.wc-block-order-confirmation-totals table {
	width: 100%;
	margin: var(--hbg-e4) 0 0;
	border-collapse: collapse;
	font-size: 0.94rem;
}

/* La cuadrícula verde eran el borde propio de la tabla y el del tema sumados.
   Queda una sola línea por fila. */
.woocommerce-order table.woocommerce-table--order-details,
.woocommerce-order table.woocommerce-table--order-details tr {
	border: none;
}

/*
 * Mismo problema de especificidad que los títulos: Astra pone el borde verde
 * desde `.woocommerce-page.woocommerce-checkout …`, así que la línea separadora
 * hay que declararla con ese prefijo o queda en 0 y las filas se pegan.
 */
.woocommerce-page.woocommerce-checkout .woocommerce-order table.woocommerce-table--order-details th,
.woocommerce-page.woocommerce-checkout .woocommerce-order table.woocommerce-table--order-details td,
.woocommerce-order table.woocommerce-table--order-details th,
.woocommerce-order table.woocommerce-table--order-details td,
.wc-block-order-confirmation-totals th,
.wc-block-order-confirmation-totals td {
	/* Estaba en 50 px por fila. Con esto la tabla ocupa bastante menos y se lee
	   igual. */
	padding: var(--hbg-e2) var(--hbg-e3);
	border: none;
	border-bottom: 1px solid var(--hbg-borde);
	color: var(--hbg-texto);
	text-align: left;
	vertical-align: top;
}

.woocommerce-order table.woocommerce-table--order-details th,
.wc-block-order-confirmation-totals th {
	color: var(--hbg-texto-suave);
	font-family: var(--hbg-fuente-titulo);
	font-weight: 600;
}

.woocommerce-order table.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-order table.woocommerce-table--order-details tfoot tr:last-child td {
	border-bottom: none;
	color: var(--hbg-neon);
	font-size: 1.05rem;
	font-weight: 700;
}

/* ------------------ resumen del pedido (número, fecha…) ------------------

   WooCommerce arma esa fila con `ul.order_details`, que trae de fábrica:

       ul.order_details li { float:left; border-right:1px dashed #cfc8d8 }

   O sea, cada dato flotando con una línea punteada clara al costado. Sobre
   fondo negro eso se ve como rayitas sueltas, y además el recuadro quedaba
   duplicado: uno afuera y otro marcando la lista de adentro.

   Acá queda UN solo recuadro —el de afuera— y adentro una grilla sin bordes.
   La cadena incluye `.woocommerce-order` y la clase de la lista para ganarle
   a la hoja de WooCommerce sin `!important`.
   ========================================================================= */

.woocommerce-order ul.woocommerce-order-overview.order_details,
.wc-block-order-confirmation-summary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--hbg-e3) var(--hbg-e5);
	margin: 0 0 var(--hbg-e5);
	padding: var(--hbg-e4);
	border: 1px solid var(--hbg-borde);
	border-radius: var(--hbg-radio-sm);
	background: var(--hbg-superficie-1);
	list-style: none;
}

/*
 * WooCommerce despeja los flotantes con `ul.order_details::before/::after`
 * (`content:" "; display:table`). Como acá la lista es una grilla, esos dos
 * fantasmas pasan a ser celdas y dejaban un hueco vacío antes del primer dato.
 * Sin flotantes no hay nada que despejar.
 */
.woocommerce-order ul.woocommerce-order-overview.order_details::before,
.woocommerce-order ul.woocommerce-order-overview.order_details::after,
ul.wc-bacs-bank-details.order_details::before,
ul.wc-bacs-bank-details.order_details::after,
.woocommerce ul.order_details::before,
.woocommerce ul.order_details::after {
	display: none;
}

/* El recuadro de adentro que sobraba. */
.wc-block-order-confirmation-summary ul {
	display: contents;
	border: none;
	background: transparent;
	padding: 0;
	margin: 0;
}

.woocommerce-order ul.woocommerce-order-overview.order_details li,
.wc-block-order-confirmation-summary ul li {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
	border: none;         /* adiós a la línea punteada entre datos */
	color: var(--hbg-texto-tenue);
	font-family: var(--hbg-fuente-titulo);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1.4;
	text-transform: uppercase;
}

.woocommerce-order ul.woocommerce-order-overview.order_details li strong,
.wc-block-order-confirmation-summary ul li .wc-block-order-confirmation-summary-list-item__value {
	display: block;
	margin-top: 2px;
	color: var(--hbg-texto);
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.3;
	text-transform: none;
}

/*
 * El número de pedido es el dato que el cliente va a tener que decirnos por
 * WhatsApp, así que se lee más grande que el resto y en verde. Fecha, total y
 * método de pago quedan como están.
 */
.woocommerce-order ul.woocommerce-order-overview.order_details li.woocommerce-order-overview__order strong,
.wc-block-order-confirmation-summary ul li:first-child .wc-block-order-confirmation-summary-list-item__value {
	color: var(--hbg-neon);
	font-size: 1.6rem;
	line-height: 1.15;
}

/* ------------------------ datos para transferir ------------------------- */

.woocommerce-order .woocommerce-bacs-bank-details,
.woocommerce-bacs-bank-details {
	margin: var(--hbg-e4) 0 0;
	padding: var(--hbg-e4);
	background: rgba(57, 255, 20, 0.06);
	border: 1px solid rgba(57, 255, 20, 0.4);
	border-radius: var(--hbg-radio-sm);
}

.woocommerce-bacs-bank-details h2,
.woocommerce-bacs-bank-details h3 {
	color: var(--hbg-neon);
	font-size: 1rem;
	border: none;
	padding: 0 0 var(--hbg-e2);
}

/*
 * La lista de datos también sale con la clase `order_details`, así que trae la
 * misma herencia: cada dato flotando con una línea punteada clara al costado y
 * en versalitas diminutas. Se reemplaza por una grilla de fichas: etiqueta
 * chica arriba, dato grande y seleccionable abajo, que es lo que el cliente
 * necesita copiar para transferir.
 */
.wc-bacs-bank-details,
ul.wc-bacs-bank-details.order_details {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: var(--hbg-e2) var(--hbg-e4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.wc-bacs-bank-details li,
ul.wc-bacs-bank-details.order_details li {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
	border: none;
	color: var(--hbg-texto-tenue);
	font-family: var(--hbg-fuente-titulo);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1.4;
	list-style: none;
	text-transform: uppercase;
}

.wc-bacs-bank-details li strong,
ul.wc-bacs-bank-details.order_details li strong {
	display: block;
	margin-top: 2px;
	color: var(--hbg-texto);
	font-family: var(--hbg-fuente-texto);
	font-size: 1.02rem;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.35;
	text-transform: none;
	/* CVU y alias se copian a mano: que un doble clic tome el dato entero. */
	user-select: all;
	overflow-wrap: anywhere;
}

/* El nombre del titular separa un bloque de datos del siguiente. */
.woocommerce-bacs-bank-details h3.wc-bacs-bank-details-account-name {
	margin-top: var(--hbg-e3);
	padding-bottom: var(--hbg-e2);
	color: var(--hbg-texto-suave);
	font-size: 0.95rem;
}

.woocommerce-bacs-bank-details h2 + h3.wc-bacs-bank-details-account-name,
.woocommerce-bacs-bank-details h3.wc-bacs-bank-details-account-name:first-of-type {
	margin-top: 0;
}

@media (max-width: 640px) {
	.woocommerce-order .woocommerce-order-details,
	.woocommerce-order .woocommerce-customer-details,
	.wc-block-order-confirmation-totals,
	.wc-block-order-confirmation-billing-address,
	.wc-block-order-confirmation-shipping-address {
		padding: var(--hbg-e4);
	}
}

/* =========================================================================
   OPCIONES DE ENVÍO Y DE PAGO

   El bloque de WooCommerce dibuja el marco del grupo y la línea que resalta
   la opción elegida con `currentColor`, que acá es el texto casi blanco de la
   marca: sobre el fondo negro se veía como un recuadro blanco suelto, fuera
   de estilo con el resto del sitio. Se lo reemplaza por el mismo marco oscuro
   con hover verde que ya usan los recuadros de datos de Contacto.
   ========================================================================= */

.wc-block-components-radio-control,
.wc-block-components-radio-control-accordion-option {
	background: var(--hbg-superficie-1);
	border: 1px solid var(--hbg-borde);
	border-radius: 0;
	transition: border-color var(--hbg-transicion),
	            box-shadow var(--hbg-transicion),
	            background-color var(--hbg-transicion);
}

/* El marco propio de acá arriba reemplaza al que dibuja WooCommerce con `:after`. */
.wc-block-components-radio-control--highlight-checked:after {
	display: none;
}

.wc-block-components-radio-control:hover,
.wc-block-components-radio-control:focus-within,
.wc-block-components-radio-control-accordion-option:hover,
.wc-block-components-radio-control-accordion-option:focus-within {
	border-color: var(--hbg-neon);
	box-shadow: 0 0 0 1px var(--hbg-neon),
	            0 0 18px rgba(57, 255, 20, 0.35);
	background-color: rgba(57, 255, 20, 0.04);
}

/* Las opciones de pago ya traen su propio marco (arriba): la fila interna no
   necesita uno de más. */
.wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option {
	border: none;
}

/* Línea divisoria entre opciones dentro de un mismo grupo, en vez del blanco
   traslúcido de fábrica. */
.wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option:after,
.wc-block-components-radio-control--highlight-checked div.wc-block-components-radio-control-accordion-option:after {
	background: var(--hbg-borde);
}

/*
 * Resalte de la opción elegida: borde y fondo verde tenue en toda la fila,
 * mismo tratamiento que las tarjetas elegidas del armador de combos
 * (`.hbg-combo-item.is-elegido`), no sólo el aro fino de antes.
 *
 * `__option-checked` es la clase base que React pone SIEMPRE que la opción
 * está tildada. `--checked-option-highlighted` es una variante que sólo
 * aparece cuando el grupo tiene 2 o más opciones (`highlightChecked`); con
 * un solo método de pago habilitado —por ejemplo, sólo Mercado Pago— esa
 * variante no llega a existir y la opción elegida quedaba sin ninguna marca.
 * Por eso el selector cubre las dos.
 */
.wc-block-components-radio-control__option-checked,
.wc-block-components-radio-control__option--checked-option-highlighted,
.wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.wc-block-components-radio-control-accordion-option:has(.wc-block-components-radio-control__option-checked) {
	background-color: rgba(57, 255, 20, 0.08) !important;
	box-shadow: inset 0 0 0 1.5px var(--hbg-neon) !important;
}

/* ------------------------------ el círculo ------------------------------ */

.wc-block-components-radio-control__input {
	background: var(--hbg-superficie-2) !important;
	border-color: var(--hbg-borde-fuerte) !important;
}

.wc-block-components-radio-control__input:checked {
	border-color: var(--hbg-neon) !important;
}

/* El punto de la opción elegida: verde, no blanco. */
.wc-block-components-radio-control__input:checked:before {
	background: var(--hbg-neon) !important;
}

/* =========================================================================
   RETIRO EN EL LOCAL — sólo Nombre y Apellido

   La clase `hbg-retiro-local` la pone checkout.js cuando el método elegido es
   "Retiro en el local". El correo NO se esconde: vive en "Información de
   contacto" y es a donde va la confirmación del pedido.
   ========================================================================= */

body.hbg-retiro-local .wc-block-components-address-form__country,
body.hbg-retiro-local .wc-block-components-address-form__address_1,
body.hbg-retiro-local .wc-block-components-address-form__address_2,
body.hbg-retiro-local .wc-block-components-address-form__city,
body.hbg-retiro-local .wc-block-components-address-form__state,
body.hbg-retiro-local .wc-block-components-address-form__postcode,
body.hbg-retiro-local .wc-block-components-address-form__phone,
body.hbg-retiro-local .wc-block-checkout__use-address-for-billing,
/* El enlace "+ Añadir altura, piso y departamento" abre un campo de dirección:
   con retiro tampoco va. */
body.hbg-retiro-local .wc-block-components-address-form__address_2-toggle {
	display: none;
}

/*
 * Cuando el cliente ya tiene una dirección guardada, WooCommerce no muestra el
 * formulario sino una tarjeta con dos renglones: el nombre arriba y la
 * dirección abajo. Con retiro se esconde el renglón de la dirección y queda el
 * nombre. "Editar" se deja a la vista: es por donde se corrige el nombre, y al
 * abrirlo aparecen sólo Nombre y Apellido.
 */
body.hbg-retiro-local .wc-block-components-address-card__address-section--secondary {
	display: none;
}

/*
 * Con envío real esos campos SÍ hacen falta, aunque el navegador ya no los
 * marque como obligatorios (la exigencia quedó en el servidor, ver
 * inc/checkout.php). Se esconde el "(opcional)" para no invitar a saltearlos.
 */
body:not(.hbg-retiro-local) .wc-block-components-address-form__address_1 .wc-block-components-label__optional,
body:not(.hbg-retiro-local) .wc-block-components-address-form__city .wc-block-components-label__optional,
body:not(.hbg-retiro-local) .wc-block-components-address-form__state .wc-block-components-label__optional,
body:not(.hbg-retiro-local) .wc-block-components-address-form__postcode .wc-block-components-label__optional {
	display: none;
}

.hbg-aviso-direccion {
	margin: var(--hbg-e3) 0 0;
	padding: var(--hbg-e3);
	border: 1px solid rgba(255, 92, 92, 0.5);
	border-radius: var(--hbg-radio-sm);
	background: rgba(255, 92, 92, 0.08);
	color: var(--hbg-texto);
	font-size: 0.9rem;
	line-height: 1.4;
}

/* =========================================================================
   RESUMEN DEL PEDIDO EN MOBILE
   ========================================================================= */

/*
 * La flecha de desplegar, en verde de marca. El SVG viene con el color del
 * texto; se pinta el relleno, que es de donde toma el color el ícono de
 * WooCommerce.
 */
.wc-block-components-checkout-order-summary__title-icon svg,
.wc-block-components-checkout-order-summary__title-icon svg path {
	fill: var(--hbg-neon);
}

.wc-block-components-checkout-order-summary__title {
	cursor: pointer;
}

/*
 * El resumen arranca DESPLEGADO en el celular.
 *
 * WooCommerce lo esconde con `display:none` mientras no esté abierto, y el
 * cliente no ve qué está comprando hasta que lo despliega. No se puede abrir
 * por JavaScript: React deja ese bloque "dormido" hasta que recibe un toque de
 * verdad, así que un clic hecho por código no hace nada (probado).
 *
 * Se resuelve por CSS y con una condición muy precisa: mientras el título NO
 * tenga `aria-expanded`, o sea mientras el cliente todavía no lo haya tocado,
 * el contenido se muestra. En cuanto lo toca por primera vez, WooCommerce
 * escribe ese atributo y a partir de ahí manda él: el acordeón se pliega y se
 * despliega como siempre.
 *
 * Cuatro clases (0,4,0) para ganarle a la regla de WooCommerce sin
 * `!important`.
 */
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title:not([aria-expanded]) + .wc-block-components-checkout-order-summary__content {
	display: block;
}

/*
 * El resumen aparecía DOS veces en el celular: el acordeón de arriba y otra
 * copia entera más abajo, dentro del formulario. La de abajo la dibuja
 * WooCommerce en un contenedor propio ("fill wrapper") que sólo existe en
 * pantallas chicas — en escritorio ni siquiera está en la página. Se esconde
 * esa segunda; queda la de arriba, que es la que se puede plegar.
 */
.wp-block-woocommerce-checkout-order-summary-block.checkout-order-summary-block-fill-wrapper {
	display: none;
}

/* =========================================================================
   ENTREGA: "Enviar" / "Retiro en el local"

   Los dos botones venían casi iguales —marco fino y fondo transparente— y no
   se notaba cuál estaba elegido. El elegido pasa a verse como el botón
   "Agregar al carrito" del sitio: mismo verde (`--hbg-neon`), texto negro y el
   mismo resplandor. El otro queda discreto, como las tarjetas y los campos.
   ========================================================================= */

.wc-block-checkout__shipping-method-container {
	gap: var(--hbg-e2);
}

.wc-block-checkout__shipping-method-option {
	flex: 1 1 0;
	min-height: 44px;
	padding: var(--hbg-e2) var(--hbg-e3);
	border: 1px solid var(--hbg-borde);
	border-radius: var(--hbg-radio-sm);
	background: var(--hbg-superficie-1);
	color: var(--hbg-texto-suave);
	font-family: var(--hbg-fuente-titulo);
	font-weight: 600;
	transition: background-color var(--hbg-transicion), color var(--hbg-transicion),
	            border-color var(--hbg-transicion), box-shadow var(--hbg-transicion);
}

.wc-block-checkout__shipping-method-option:hover {
	border-color: var(--hbg-neon);
	color: var(--hbg-texto);
}

/* El elegido: igual que "Agregar al carrito" (ver la sección BOTONES de base.css). */
.wc-block-checkout__shipping-method-option.wc-block-checkout__shipping-method-option--selected {
	background: var(--hbg-neon);
	border-color: var(--hbg-neon);
	color: var(--hbg-negro);
	font-weight: 700;
	box-shadow: 0 0 10px rgba(57, 255, 20, 0.5);
}

/* Texto, precio e ícono heredan el color del botón, no el suyo propio. */
.wc-block-checkout__shipping-method-option--selected .wc-block-checkout__shipping-method-option-title,
.wc-block-checkout__shipping-method-option--selected .wc-block-checkout__shipping-method-option-rate,
.wc-block-checkout__shipping-method-option--selected .wc-block-checkout__shipping-method-option-icon {
	color: var(--hbg-negro);
	fill: var(--hbg-negro);
}

.wc-block-checkout__shipping-method-option--selected .wc-block-checkout__shipping-method-option-icon path {
	fill: var(--hbg-negro);
}

/* =========================================================================
   EL CORREO, ADENTRO DE LOS DATOS DEL CLIENTE

   Antes el correo tenía una sección propia arriba de todo ("Información de
   contacto") con un solo campo. Ahora baja y queda pegado a los datos de la
   persona: con envío, debajo de la dirección de facturación; con retiro,
   debajo del nombre y el apellido de quien pasa a buscar.

   Se hace con el ORDEN del formulario, no moviendo el campo de lugar en el
   marcado: el checkout lo dibuja React y un nodo movido a mano vuelve a su
   sitio (o rompe) en el primer refresco. Cambiar el orden visual es estable y
   no toca el funcionamiento: el campo sigue siendo el mismo, con su
   validación y su guardado de siempre.

   Las demás secciones llevan su número para que NADA se mueva de donde está
   hoy: Entrega, Ubicaciones, dirección, opciones de envío, pago, notas,
   términos y el botón quedan en el mismo orden.
   ========================================================================= */

.wc-block-checkout__form {
	display: flex;
	flex-direction: column;
}

/* Cualquier bloque que no esté en la lista queda junto al correo, no arriba. */
.wc-block-checkout__form > * {
	order: 5;
}

.wc-block-checkout__form > .wc-block-checkout__shipping-method {
	order: 1;
}

.wc-block-checkout__form > .wp-block-woocommerce-checkout-pickup-options-block {
	order: 2;
}

.wc-block-checkout__form > .wc-block-checkout__shipping-fields {
	order: 3;
}

.wc-block-checkout__form > .wc-block-checkout__billing-fields {
	order: 4;
}

/* El correo, justo debajo de los datos de la persona. */
.wc-block-checkout__form > .wc-block-checkout__contact-fields {
	order: 5;
	/* Se pega a la sección de arriba: es parte de ella, no otra sección. */
	margin-top: calc(var(--hbg-e5) * -1);
}

.wc-block-checkout__form > .wc-block-checkout__shipping-option {
	order: 6;
}

.wc-block-checkout__form > .wc-block-checkout__payment-method {
	order: 7;
}

.wc-block-checkout__form > .wc-block-checkout__order-notes {
	order: 8;
}

.wc-block-checkout__form > .wc-block-checkout__terms {
	order: 9;
}

.wc-block-checkout__form > .wc-block-checkout__actions {
	order: 10;
}

/* Ya no es una sección aparte: sin título propio. */
.wc-block-checkout__contact-fields > .wc-block-components-checkout-step__heading-container {
	display: none;
}