/**
 * ZIHOUSE · Carrito, finalizar compra y avisos.
 *
 * WooCommerce sirve estas tres pantallas con bloques (`wc-block-*`) y su hoja
 * por defecto: cajas grises, tipografía del sistema, botones de plataforma. Es
 * justo donde el cliente decide si confía, y hasta ahora era la única parte del
 * sitio que no hablaba el idioma de la marca.
 *
 * Reglas que sigue esta hoja:
 *  - Fraunces solo en los títulos y en las cifras de dinero. Nunca en formularios.
 *  - Una sola acción morada por pantalla: pagar. Todo lo demás es tinta o borde.
 *  - Nada de sombras ni cajas redondeadas de plantilla: reglas finas y aire.
 *  - El resumen del pedido acompaña al formulario, no compite con él.
 *
 * @package ZIHOUSE
 */

/* ══════════════════════════════════════════════════════════════════════════
   0 · SISTEMA DE COMERCIO: TOKENS Y ÁMBITO
   ───────────────────────────────────────────────────────────────────────────
   POR QUÉ EXISTE ESTE BLOQUE

   ZIHOUSE tiene dos idiomas visuales y hasta ahora solo estaba escrito uno.

   El editorial: titulares enormes, aire, ritmo lento. Correcto en la portada,
   donde el trabajo es seducir.

   El transaccional: denso, ordenado, rápido de leer. Es el que faltaba.

   Sin un ámbito propio, la escala editorial gobernaba la compra. `base.css`
   declara `h1 { font-size: var(--zihouse-text-hero) }` sin excepciones, así que
   «Carrito», «Finalizar compra» y «Pedido recibido» salían a 78 px en una
   pantalla de 390. Medido: el titular de «Finalizar compra» ocupaba 162 px, un
   19% de la pantalla, antes de que el visitante viera un solo campo.

   Peor todavía, la escala CRECE en móvil: el token base sube de 14 a 15 px por
   debajo de cierto ancho, así que el titular engorda justo donde menos sitio
   hay.

   Aquí se define una escala propia para la compra y se aplica a un ámbito
   cerrado. Todo lo que venga después usa estos tokens y ninguno más. Si algo
   necesita otro tamaño, se cambia el token, no se añade una excepción.

   REGLA DE USO
   · Ningún valor suelto en píxeles fuera de este bloque.
   · Ninguna excepción por pantalla («solo en checkout», «solo en gracias»).
   · Ninguna excepción por ancho que no sea uno de los cortes declarados aquí.
   ══════════════════════════════════════════════════════════════════════════ */

.woocommerce-cart,
.woocommerce-checkout,
.woocommerce-account,
.woocommerce-order-received,
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout,
#zihouse-minicart {
	/* — Tipografía —
	   El techo de cada clamp es deliberadamente bajo. Un titular de compra no
	   compite con el contenido: lo etiqueta. */
	/* ESCALA CORREGIDA (revision 2)
	   La primera pasada sobrecompenso: de titulares de 78 px se bajo a 24, y 24
	   es demasiado poco para un H1 en una tienda de ticket alto. Premium no es
	   pequeno, es proporcionado. Vuelve a una escala con presencia pero acotada:
	   el titular etiqueta la pantalla, no la ocupa. */
	--commerce-h1: clamp(2.375rem, 8vw, 2.875rem);
	--commerce-h2: clamp(1.75rem, 5vw, 2.125rem);
	--commerce-h3: clamp(1.25rem, 3.2vw, 1.5rem);
	--commerce-body: 0.9375rem;
	--commerce-meta: 0.8125rem;

	/* — Espaciado —
	   Cuatro pasos y ni uno más. Con más pasos vuelven los 17 px sueltos. */
	--commerce-gap-xs: 0.25rem;
	--commerce-gap-sm: 0.5rem;
	--commerce-gap-md: 1rem;
	--commerce-gap-lg: 1.75rem;

	/* — Superficie — */
	--commerce-radius: 6px;
	--commerce-border: 1px solid var(--zihouse-color-border);
	--commerce-surface: var(--zihouse-color-bg);
	--commerce-surface-alt: var(--zihouse-color-surface);

	/* — Componentes —
	   Un solo valor para la miniatura y uno para la altura de control. Antes
	   había tres de cada: campos de 35 px en el carrito, 45 en login y 56 en
	   checkout, y miniaturas de 64, 72 y 80. */
	--commerce-product-thumb: 4rem;
	--commerce-control-height: 3rem;
	/* Controles secundarios: el selector de cantidad y cualquier boton que no
	   sea la accion principal. Sin este segundo token, forzar 3rem a todo
	   inflaba la fila del carrito de 157 a 180 px. Medido. */
	--commerce-control-height-sm: 2.25rem;
}

@media (min-width: 48rem) {
	.woocommerce-cart,
	.woocommerce-checkout,
	.woocommerce-account,
	.woocommerce-order-received,
	.wp-block-woocommerce-cart,
	.wp-block-woocommerce-checkout,
	#zihouse-minicart {
		--commerce-gap-lg: 2.25rem;
		--commerce-product-thumb: 5rem;
		--commerce-control-height: 3.25rem;
	}
}

/* ── El ámbito: aquí acaba la escala editorial ────────────────────────────
   Se cubre el titular de la página (un `h1` sin clase, que es como lo pinta
   WordPress) y los titulares que WooCommerce mete en sus plantillas. */
.woocommerce-cart .zihouse-main h1,
.woocommerce-checkout .zihouse-main h1,
.woocommerce-account .zihouse-main h1,
.woocommerce-order-received .zihouse-main h1 {
	font-size: var(--commerce-h1);
	line-height: 1.12;
	letter-spacing: var(--zihouse-tracking-tight);
	margin-bottom: var(--commerce-gap-md);
	text-wrap: balance;
}

.woocommerce-cart .zihouse-main h2,
.woocommerce-checkout .zihouse-main h2,
.woocommerce-account .zihouse-main h2,
.woocommerce-order-received .zihouse-main h2,
.woocommerce-order-received .woocommerce-column__title {
	font-size: var(--commerce-h2);
	line-height: 1.2;
	margin-bottom: var(--commerce-gap-sm);
}

.woocommerce-cart .zihouse-main h3,
.woocommerce-checkout .zihouse-main h3,
.woocommerce-account .zihouse-main h3,
.woocommerce-order-received .zihouse-main h3 {
	font-size: var(--commerce-h3);
	line-height: 1.25;
}

/* ══════════════════════════════════════════════════════════════════════════
   0 · AVISOS  (bloques y clásicos)
   Los de fábrica llegan en verde, rojo y azul de plantilla, con icono grande
   y borde de color a los cuatro lados. Aquí un aviso es una nota al margen:
   fondo del propio papel, una regla vertical que da el tono y texto legible.
   ══════════════════════════════════════════════════════════════════════════ */

.wc-block-components-notice-banner,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	display: flex;
	align-items: flex-start;
	gap: var(--zihouse-space-sm);
	margin: 0 0 var(--zihouse-space-md);
	padding: var(--zihouse-space-sm) var(--zihouse-space-md);
	border: 0;
	border-left: 2px solid var(--zihouse-color-ink);
	border-radius: 0;
	background: var(--zihouse-color-surface);
	box-shadow: none;
	color: var(--zihouse-color-ink);
	font-family: var(--zihouse-font-body);
	font-size: var(--zihouse-text-sm);
	line-height: var(--zihouse-leading-normal);
}

/* El enlace del aviso («Ver carrito») es el único hijo que no es texto, y sin
   decirlo el flex se lo llevaba a 82 px, partiendo las dos palabras en dos
   renglones dentro de una caja de 45 de alto. Se le dice que no encoja y que no
   parta: dos palabras en un renglón ocupan menos que dos renglones. */
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
	flex: 0 0 auto;
	white-space: nowrap;
	align-self: center;
}

/* El icono circular relleno de color es lo que más grita. Fuera. */
.wc-block-components-notice-banner > svg,
.wc-block-components-notice-banner__content > svg {
	display: none;
}

.wc-block-components-notice-banner__content {
	padding: 0;
	font-size: inherit;
	line-height: inherit;
}

/* El tono lo da la regla lateral, no el fondo.
   WooCommerce tiñe el fondo con `.wc-block-components-notice-banner.is-error`
   (rosa), `.is-success` (verde) y demás, que pesan más que la clase sola. Hay
   que repetir el fondo en cada variante para devolverlas al papel del sitio. */
.wc-block-components-notice-banner.is-success,
.woocommerce-message {
	border-left-color: var(--zihouse-color-instock);
	background-color: var(--zihouse-color-surface);
}

.wc-block-components-notice-banner.is-error,
.woocommerce-error {
	border-left-color: var(--zihouse-color-danger);
	background-color: var(--zihouse-color-surface);
}

.wc-block-components-notice-banner.is-warning {
	border-left-color: var(--zihouse-color-warning);
	background-color: var(--zihouse-color-surface);
}

.wc-block-components-notice-banner.is-info,
.woocommerce-info {
	border-left-color: var(--zihouse-color-ink-muted);
	background-color: var(--zihouse-color-surface);
}

/* El texto dentro de la variante de error llega en rojo oscuro de plantilla. */
.wc-block-components-notice-banner.is-error,
.wc-block-components-notice-banner.is-error .wc-block-components-notice-banner__content,
.wc-block-components-notice-banner.is-success,
.wc-block-components-notice-banner.is-success .wc-block-components-notice-banner__content {
	color: var(--zihouse-color-ink);
}

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

/* Listas de error dentro del aviso: sin viñeta ni sangría heredada.
   `.woocommerce-error` es a la vez el aviso y una lista, asi que hereda el
   margen del aviso de arriba y aqui solo se le quita lo de lista. Poner
   `margin: 0` tambien aqui anulaba la separacion inferior del aviso. */
.wc-block-components-notice-banner__content ul {
	margin: 0;
}

.wc-block-components-notice-banner__content ul,
.woocommerce-error {
	list-style: none;
	padding-left: 0;
}

/* El botón de cerrar, discreto. */
.wc-block-components-notice-banner .wc-block-components-button--text {
	color: var(--zihouse-color-ink-muted);
	opacity: 0.7;
}

.wc-block-components-notice-banner .wc-block-components-button--text:hover { opacity: 1; }

/* Aviso del carrito por la regla del pack de cojines. */
.zihouse-pack-note {
	margin: 0 0 var(--zihouse-space-sm);
	font-size: var(--zihouse-text-sm);
	color: var(--zihouse-color-ink-muted);
}

/* EN LA FICHA, LA NOTA SE HABÍA METIDO EN LA FILA DE COMPRA
   WooCommerce imprime la nota dentro del mismo contenedor flex que la cantidad
   y el botón. Medido a 390: la nota se llevaba 168 px de 350, la cantidad 72 y
   al botón le quedaban 80, con «Añadir al carrito» partido en tres renglones
   dentro de una caja de 80×78. No era un problema de tipografía ni de
   espaciado: eran tres elementos repartiéndose un ancho que solo da para dos.

   La nota pasa a renglón propio y por delante —se lee ANTES de elegir cuántas
   unidades, que es cuando sirve— y la fila queda para cantidad y botón. */
.zihouse-pdp__buy .woocommerce-variation-add-to-cart,
.zihouse-pdp__buy form.cart {
	flex-wrap: wrap;
}

.zihouse-pdp__buy .zihouse-pack-note {
	flex: 0 0 100%;
	order: -1;
	margin-bottom: var(--zihouse-space-2xs);
}

/* ==========================================================================
   0b · COMPONENTES DEL SISTEMA
   --------------------------------------------------------------------------
   Todo lo de aquí usa los tokens de arriba. Si un valor no sale de un token es
   porque es geometría de un componente concreto (una proporción, un número de
   columnas), no una medida de diseño.
   ========================================================================== */

/* -- LÍNEA DE PRODUCTO DEL MINICARRITO -------------------------------------
   WooCommerce la sirve como texto corrido: la miniatura flota y el nombre cae
   debajo. Medido a 390 px: 173 a 192 px por línea, 557 px para tres productos
   en un panel de 844. El visitante no llegaba a ver el subtotal sin desplazar.

   Pasa a rejilla de tres columnas: foto, texto, quitar. Con la foto al lado y
   no encima, la misma información cabe en algo menos de la mitad. */
#zihouse-minicart ul.woocommerce-mini-cart {
	margin: 0;
	padding: 0;
	list-style: none;
}

#zihouse-minicart li.woocommerce-mini-cart-item {
	display: grid;
	grid-template-columns: var(--commerce-product-thumb) minmax(0, 1fr) 1.5rem;
	align-items: start;
	column-gap: var(--commerce-gap-md);
	row-gap: 0;
	padding: var(--commerce-gap-md) 0;
	margin: 0;
	border-bottom: var(--commerce-border);
}

#zihouse-minicart li.woocommerce-mini-cart-item::before,
#zihouse-minicart li.woocommerce-mini-cart-item::after { content: none; }

/* El enlace de quitar lo pone WooCommerce antes que nada. Se manda a la
   tercera columna para que la foto abra la fila. */
#zihouse-minicart li.woocommerce-mini-cart-item > a.remove {
	grid-column: 3;
	grid-row: 1;
	justify-self: end;
	position: static;
	width: 1.5rem;
	height: 1.5rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var(--commerce-body);
	color: var(--zihouse-color-ink-muted);
	text-decoration: none;
	background: none;
}

#zihouse-minicart li.woocommerce-mini-cart-item > a.remove:hover {
	color: var(--zihouse-color-ink);
	background: none;
}

/* El enlace del producto contiene la foto y el nombre. Se despliega para que la
   foto caiga en la columna 1 y el texto en la 2. */
#zihouse-minicart li.woocommerce-mini-cart-item > a:not(.remove) {
	display: contents;
	color: inherit;
	text-decoration: none;
	font-size: var(--commerce-body);
	line-height: 1.3;
}

#zihouse-minicart li.woocommerce-mini-cart-item img {
	grid-column: 1;
	grid-row: 1 / span 2;
	width: var(--commerce-product-thumb);
	height: var(--commerce-product-thumb);
	margin: 0;
	float: none;
	object-fit: cover;
	border-radius: var(--commerce-radius);
	background: var(--zihouse-shop-media-bg);
}

#zihouse-minicart li.woocommerce-mini-cart-item .quantity {
	grid-column: 2;
	grid-row: 2;
	font-size: var(--commerce-meta);
	color: var(--zihouse-color-ink-muted);
	margin-top: var(--commerce-gap-xs);
}

#zihouse-minicart .woocommerce-mini-cart__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--commerce-gap-sm);
	padding: var(--commerce-gap-md) 0;
	margin: 0;
	border-top: var(--commerce-border);
	font-size: var(--commerce-body);
}

#zihouse-minicart .woocommerce-mini-cart__total strong {
	font-size: var(--commerce-meta);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--zihouse-color-ink-muted);
}

#zihouse-minicart .woocommerce-mini-cart__total .amount {
	font-family: var(--zihouse-font-display);
	font-size: var(--commerce-h2);
	color: var(--zihouse-color-ink);
}

#zihouse-minicart .woocommerce-mini-cart__buttons {
	display: grid;
	gap: var(--commerce-gap-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

#zihouse-minicart .woocommerce-mini-cart__buttons a {
	width: 100%;
	min-height: var(--commerce-control-height);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* -- ALTURA DE CONTROL ÚNICA -----------------------------------------------
   Había tres alturas para el mismo campo: 35 px en el carrito, 45 en login y
   56 en checkout. Una sola, y sale del token. */
.woocommerce-cart .zihouse-main input:not([type="checkbox"]):not([type="radio"]):not(.wc-block-components-quantity-selector__input),
.woocommerce-checkout .zihouse-main input:not([type="checkbox"]):not([type="radio"]),
.woocommerce-account .zihouse-main input:not([type="checkbox"]):not([type="radio"]),
.woocommerce-cart .zihouse-main select,
.woocommerce-checkout .zihouse-main select,
.woocommerce-account .zihouse-main select {
	/* Los campos de los BLOQUES (checkout) no entran aqui: los cubre la lista
	   completa de la seccion de campos, mas abajo, con el mismo token. Estaban
	   en los dos sitios y el segundo hacia invisible al primero. */
	min-height: var(--commerce-control-height);
}

/* Solo la ACCION PRINCIPAL usa la altura grande. El primer intento aplicaba
    a secas dentro del ambito y engordaba el selector de cantidad, que
   tambien es un boton: la fila del carrito paso de 157 a 180 px. */
/* La clase se repite a proposito. WooCommerce Blocks inyecta sus estilos EN
   LINEA, despues de la hoja del tema, y con la misma especificidad gana el
   suyo: dejaba el boton en los 45 px que trae de fabrica. Repetir la clase
   sube la especificidad y evita tener que recurrir a !important, que es como
   empezo la cadena que estamos deshaciendo. */
/* UNA SOLA DEFINICION DE LA ACCION PRINCIPAL.
   Habia CUATRO reglas repartidas por este mismo fichero tocando el alto de
   este boton: una aqui, otra con especificidad de tres clases usando
   --zihouse-control-h, otra bajo "CONFIRMAR EL PEDIDO" y otra suelta para el
   ancho. Ganaba la de tres clases, que es la razon por la que el boton salia a
   42 px en escritorio y 45 en movil en vez de la altura del token. Ahora todo
   lo del boton principal vive aqui y en ningun otro sitio. */
.wp-block-woocommerce-cart .wc-block-cart__submit-button.wc-block-cart__submit-button,
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button.wc-block-components-checkout-place-order-button,
.woocommerce-account .zihouse-main button[type="submit"] {
	width: 100%;
	min-height: var(--commerce-control-height);
	border-radius: var(--zihouse-radius-pill);
	font-family: var(--zihouse-font-body);
	font-size: var(--commerce-body);
	font-weight: 500;
	letter-spacing: 0.04em;
	box-shadow: none;
}

/* Selector de cantidad: control compacto, y la fila respira. */
.wc-block-components-quantity-selector,
.wc-block-components-quantity-selector input,
.wc-block-components-quantity-selector button {
	min-height: var(--commerce-control-height-sm);
	height: var(--commerce-control-height-sm);
}

/* -- DENSIDAD DE LA FILA DEL CARRITO: LIMITE ALCANZADO --------------------
   Queda documentado para no volver a intentarlo a ciegas.

   La fila mide 141-166 px a 390. Dentro, la celda de producto apila nombre 48,
   precio 21, medida 16 y cantidad 36. El nombre sale a 18,75 px con la escala
   editorial y ocupa dos lineas altas.

   Se probaron dos caminos y los dos estan descartados:

   1. Reasignar anchos de las celdas. Resultado medido: miniatura deformada a
      48x64 y filas MAS altas, de 166 a 174. Revertido.

   2. Bajar el nombre al token de comercio con una regla normal. No aplica:
      algo lo fija con !important por encima. Comprobado inyectando la regla en
      el navegador, sin efecto. Con !important si funciona y la fila baja de
      166 a 155, once pixeles por fila.

   No se pone ese !important a peticion expresa del cliente. Si algun dia se
   quiere esos once pixeles, el camino limpio no es forzar el estilo: es
   sustituir el bloque del carrito por el shortcode clasico, que admite
   plantilla propia. Coste: se pierde la actualizacion instantanea de
   cantidades y el pago expres del bloque. */

/* -- ACCIÓN SECUNDARIA -----------------------------------------------------
   Faltaba la salida. En el carrito solo había un camino, hacia delante, y
   quien todavía estaba mirando tenía que usar el botón de atrás. */
.zihouse-commerce-back-wrap {
	margin: 0;
	text-align: center;
}

.zihouse-commerce-back {
	display: inline-flex;
	align-items: center;
	gap: var(--commerce-gap-xs);
	margin-top: var(--commerce-gap-md);
	font-size: var(--commerce-body);
	color: var(--zihouse-color-ink-muted);
	text-decoration: none;
	border-bottom: 1px solid var(--zihouse-color-border);
	padding-bottom: 2px;
}

.zihouse-commerce-back:hover {
	color: var(--zihouse-color-ink);
	border-color: var(--zihouse-color-ink);
}

/* -- PEDIDO RECIBIDO -------------------------------------------------------
   Era la pantalla más descuidada del recorrido: el titular a 78 px, «Detalles
   del pedido» a 48 y las dos direcciones a 48 cada una. Todo con la escala
   editorial porque no había ámbito. Con los tokens ya baja; aquí solo se
   ordena lo que WooCommerce deja suelto. */
.woocommerce-order-received .woocommerce-order-overview {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
	gap: var(--commerce-gap-md);
	margin: 0 0 var(--commerce-gap-lg);
	padding: var(--commerce-gap-md);
	list-style: none;
	border: var(--commerce-border);
	border-radius: var(--commerce-radius);
	background: var(--commerce-surface-alt);
}

.woocommerce-order-received .woocommerce-order-overview li {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: var(--commerce-h3);
	color: var(--zihouse-color-ink);
}

.woocommerce-order-received .woocommerce-order-overview li strong {
	display: block;
	margin-top: var(--commerce-gap-xs);
	font-family: var(--zihouse-font-display);
	font-weight: 400;
}

/* Facturación y envío en tarjetas, no bajo titulares gigantes. */
.woocommerce-order-received .woocommerce-customer-details .woocommerce-columns,
.woocommerce-order-received .woocommerce-columns--addresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: var(--commerce-gap-md);
}

.woocommerce-order-received .woocommerce-column {
	padding: var(--commerce-gap-md);
	border: var(--commerce-border);
	border-radius: var(--commerce-radius);
	background: var(--commerce-surface);
}

.woocommerce-order-received .woocommerce-column address {
	font-style: normal;
	font-size: var(--commerce-body);
	line-height: 1.55;
	color: var(--zihouse-color-ink-muted);
}

/* -- ACCIÓN PRINCIPAL DEL FLUJO --------------------------------------------
   Estos dos botones se pintaban desde woocommerce.css, dentro de la lista que
   comparten con los botones clásicos, y con tres `!important` para ganarle a la
   hoja de WooCommerce Blocks. Ahí empezaba el problema: cualquier ajuste desde
   este fichero perdía, y la única salida era añadir otro `!important`.

   Al traerlos aquí con el prefijo del bloque, el selector ya es más específico
   que el de WooCommerce y los `!important` sobran. Tres menos.

   POR QUÉ TINTA Y NO LILA

   Estaban en lila macizo: un rectángulo saturado de 350×48 en una pantalla que
   ya es blanco roto y crema. Con el lila reservado a acento, ese bloque era la
   mayor mancha de color de todo el recorrido, y hacía de un botón el elemento
   más ruidoso de la página.

   En tinta pesa igual —es igual de oscuro sobre fondo claro, así que no pierde
   jerarquía— y el lila entra al pasar por encima y al enfocar, que es donde un
   acento sirve: para confirmar que el gesto ha llegado. Es la misma regla que
   sigue el botón de añadir de la tarjeta, así que el sistema dice lo mismo en
   los dos sitios.

   Los botones clásicos (ficha, «proceder al pago» del carrito antiguo) siguen
   donde estaban: no son de este flujo. */
.wp-block-woocommerce-cart .wc-block-cart__submit-button,
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button {
	background: var(--zihouse-color-ink);
	border-color: var(--zihouse-color-ink);
	color: var(--zihouse-color-bg);
}

.wp-block-woocommerce-cart .wc-block-cart__submit-button:hover,
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button:hover {
	/* Misma respuesta que .zihouse-btn--primary: la tinta se aclara. */
	background: var(--zihouse-ink-soft);
	border-color: var(--zihouse-ink-soft);
	color: var(--zihouse-color-bg);
}

.wp-block-woocommerce-cart .wc-block-cart__submit-button:focus-visible,
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button:focus-visible {
	outline: 2px solid var(--zihouse-color-accent);
	outline-offset: 2px;
}

/* -- CAMPO DE TEXTO DE LOS BLOQUES -----------------------------------------
   Estaba definido en los dos ficheros con valores distintos: aquí a
   `text-base` sobre el fondo de página, y en woocommerce.css a `text-sm` sobre
   `color-card` y con la altura de control general.

   Ese choque es el que me hizo perder un rato persiguiendo por qué el
   `min-height` no se aplicaba: ganaba el otro fichero por orden de carga. Ahora
   el campo vive solo aquí y usa los tokens de comercio. */
.wp-block-woocommerce-checkout .wc-block-components-text-input input,
.wp-block-woocommerce-cart .wc-block-components-text-input input {
	font-family: var(--zihouse-font-body);
	font-size: var(--commerce-body);
	color: var(--zihouse-color-ink);
	background: var(--commerce-surface);
	border: var(--commerce-border);
	border-radius: var(--commerce-radius);
	padding: 0 0.9em;
	box-shadow: none;
}


/* ══════════════════════════════════════════════════════════════════════════
   1 · LIENZO COMÚN de carrito y checkout
   ══════════════════════════════════════════════════════════════════════════ */

.woocommerce-cart .zihouse-main--shop,
.woocommerce-checkout .zihouse-main--shop,
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
	font-family: var(--zihouse-font-body);
	color: var(--zihouse-color-ink);
}

/* Titulos de pagina.
   Estaban en clamp(2.4rem, 5vw, 4rem): hasta 64 px. Hoy no se ven porque
   WordPress sirve estas paginas con un h1 sin clase, que ya cae en el ambito
   de comercio, pero era una bomba de relojeria: el dia que la plantilla
   cambiara a .wp-block-post-title volvia el titular gigante. Ahora usa el
   mismo token que el resto del flujo. */
.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title,
.woocommerce-cart .wp-block-post-title,
.woocommerce-checkout .wp-block-post-title {
	font-family: var(--zihouse-font-display);
	font-weight: 400;
	font-size: var(--commerce-h1);
	letter-spacing: var(--zihouse-tracking-tight);
	line-height: 1.12;
	margin: 0 0 var(--commerce-gap-md);
}

/* Rejilla: contenido ancho + columna de resumen que acompaña al hacer scroll. */
.wc-block-components-sidebar-layout {
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: flex-start;
}

.wc-block-components-sidebar {
	position: sticky;
	top: calc(var(--zihouse-header-height, 72px) + var(--zihouse-space-md));
	padding: 0;
}

@media (max-width: 780px) {
	.wc-block-components-sidebar { position: static; }
}

/* ══════════════════════════════════════════════════════════════════════════
   2 · TIPOGRAFÍA DE DINERO
   El precio se ve igual en la tarjeta, en la ficha, en el carrito y aquí.
   ══════════════════════════════════════════════════════════════════════════ */

.wc-block-components-formatted-money-amount,
.wc-block-components-product-price,
.wc-block-components-totals-item__value {
	font-family: var(--zihouse-font-display);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   3 · CARRITO
   ══════════════════════════════════════════════════════════════════════════ */

/* Cabecera de la tabla: mayúsculas pequeñas, como el resto de antetítulos. */
.wc-block-cart-items__header {
	font-family: var(--zihouse-font-body);
	font-size: var(--zihouse-text-xs);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--zihouse-color-ink-muted);
	border-bottom: 1px solid var(--zihouse-color-border);
	padding-bottom: var(--zihouse-space-xs);
}

.wc-block-cart-items__row {
	border-bottom: 1px solid var(--zihouse-color-border);
	padding: var(--zihouse-space-md) 0;
}

.wc-block-cart-items__row:last-child { border-bottom: 0; }

/* La miniatura la viste product-media.css, que es el sistema de imagen del
   sitio y ya cubre estos tres selectores. Aqui habia una copia con radio de 4px
   frente a los 2px de alli: dos ficheros pintando la misma foto con esquinas
   distintas segun cual cargara despues. */

.wc-block-components-product-name {
	font-family: var(--zihouse-font-display);
	font-size: var(--zihouse-text-lg);
	font-weight: 400;
	line-height: var(--zihouse-leading-snug);
	color: var(--zihouse-color-ink);
	text-decoration: none;
}

.wc-block-components-product-name:hover {
	color: var(--zihouse-color-accent);
	text-decoration: none;
}

/* Metadatos de la variación: dato secundario, no un bloque de texto más. */
.wc-block-components-product-details,
.wc-block-components-product-metadata__description {
	font-size: var(--zihouse-text-xs);
	color: var(--zihouse-color-ink-muted);
	letter-spacing: 0.01em;
}

.wc-block-components-product-details li { margin: 0; }

/* Selector de cantidad: un control, no tres cajas sueltas. */
.wc-block-components-quantity-selector {
	border: 1px solid var(--zihouse-color-border);
	border-radius: var(--zihouse-radius-pill);
	background: transparent;
	max-width: 8.5rem;
	overflow: hidden;
}

.wc-block-components-quantity-selector::after { display: none; }

.wc-block-components-quantity-selector__input {
	font-family: var(--zihouse-font-body);
	font-size: var(--zihouse-text-sm);
	color: var(--zihouse-color-ink);
	background: transparent;
	border: 0;
}

.wc-block-components-quantity-selector__button {
	color: var(--zihouse-color-ink-muted);
	background: transparent;
	border: 0;
	font-size: 1.1rem;
	transition: color var(--zihouse-duration-fast) var(--zihouse-ease-out-quart);
}

.wc-block-components-quantity-selector__button:hover:not(:disabled) {
	color: var(--zihouse-color-accent);
	background: transparent;
}

.wc-block-components-quantity-selector__button:disabled { opacity: 0.35; }

/* Quitar del carrito: enlace, nunca botón rojo. */
.wc-block-cart-item__remove-link {
	font-size: var(--zihouse-text-xs);
	letter-spacing: 0.02em;
	color: var(--zihouse-color-ink-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wc-block-cart-item__remove-link:hover { color: var(--zihouse-color-danger); }

/* ══════════════════════════════════════════════════════════════════════════
   4 · RESUMEN Y TOTALES
   ══════════════════════════════════════════════════════════════════════════ */

.wc-block-components-totals-wrapper {
	border-top: 1px solid var(--zihouse-color-border);
	padding: var(--zihouse-space-sm) 0;
}

.wc-block-components-totals-wrapper:first-child { border-top: 0; }

.wc-block-components-totals-item__label {
	font-size: var(--zihouse-text-sm);
	color: var(--zihouse-color-ink-muted);
}

.wc-block-components-totals-item__value {
	font-size: var(--zihouse-text-base);
	color: var(--zihouse-color-ink);
}

/* El total: la cifra que importa, con el peso de un titular.
   El filete y el aire superior se declaran mas abajo, en la seccion del
   resumen; estaban repetidos aqui con los mismos valores. */
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	font-family: var(--zihouse-font-display);
	font-size: var(--zihouse-text-lg);
	color: var(--zihouse-color-ink);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-weight: 500;
}

/* El importe del envío, en tinta como los demás.
   Estaba en verde para que «Gratis» se leyera como buena noticia, pero la regla
   no distingue el texto: pintaba de verde también «9,19 €». Un cargo en el
   color de lo positivo dice lo contrario de lo que pasa. La palabra «Gratis» ya
   es la buena noticia; no necesita color. */

/* Cupones y paneles plegables. */
.wc-block-components-panel__button {
	font-family: var(--zihouse-font-body);
	font-size: var(--zihouse-text-sm);
	color: var(--zihouse-color-ink-muted);
	padding: var(--zihouse-space-xs) 0;
}

.wc-block-components-panel__button:hover { color: var(--zihouse-color-ink); }

/* Resumen del pedido en el checkout: encerrado en papel, no en una caja gris. */
.wc-block-components-order-summary .wc-block-components-panel__button {
	font-family: var(--zihouse-font-display);
	font-size: var(--zihouse-text-lg);
	color: var(--zihouse-color-ink);
}

.wc-block-components-order-summary-item {
	padding: var(--zihouse-space-sm) 0;
	border-bottom: 1px solid var(--zihouse-color-border);
}

.wc-block-components-order-summary-item:last-child { border-bottom: 0; }

/* El marco y el fondo de esta miniatura los pone product-media.css. Aqui solo
   se decide su TAMANO, mas abajo, que es lo propio del componente. */

/* El contador redondo negro sobre la miniatura, al morado de marca. */
.wc-block-components-order-summary-item__quantity {
	background: var(--zihouse-color-accent);
	color: var(--zihouse-color-on-accent);
	border: 0;
	box-shadow: none;
	font-family: var(--zihouse-font-body);
	font-size: 0.7rem;
}

/* La columna de resumen, sobre superficie cálida y con aire.
   
   AQUÍ HUBO UN FALLO GRAVE Y CONVIENE QUE QUEDE ESCRITO.
   
   Esto seleccionaba `.wc-block-checkout__sidebar > *`, o sea CUALQUIER hijo de
   la columna. Y entre esos hijos WooCommerce mete su contenedor de avisos, que
   lleva dentro un «snackbar» en POSICIÓN FIJA de la altura de la pantalla,
   normalmente invisible porque no tiene fondo.
   
   Al pintarle fondo crema se convirtió en un panel fijo de 810 px tapando el
   formulario entero. En móvil, que es donde la pantalla mide justo eso, el
   checkout se veía en blanco: la maquetación estaba perfecta debajo y no se
   veía nada. Así lo fotografió la clienta.
   
   La lección: en una columna que pertenece a un plugin no se pinta «todos los
   hijos». Se nombra el bloque que se quiere pintar y punto, porque el plugin
   puede meter ahí lo que le convenga sin avisar. */
.wc-block-checkout__sidebar .wc-block-components-sidebar,
.wc-block-checkout__sidebar > .wp-block-woocommerce-checkout-order-summary-block {
	background: var(--zihouse-color-surface);
	border: 1px solid var(--zihouse-color-border);
	border-radius: var(--zihouse-radius-md);
	padding: var(--commerce-gap-md);
}

/* El titular del resumen traía 20 px de relleno arriba y abajo más 16 de margen
   superior, encima de los de la caja. Sumado, el nombre del panel flotaba con
   73 px de aire por encima en una pantalla de 390. Se apoya en el token del
   sistema como todo lo demás. */
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title {
	padding: var(--commerce-gap-sm) 0;
	margin-top: 0;
	/* Sus dos filetes sobraban. Plegado el panel, enmarcaban un titulo dentro de
	   una caja que ya tiene borde: tres rayas para separar nada. Desplegado, el
	   bloque de articulos trae su propio borde superior, que es el que de verdad
	   separa el titulo de la lista. */
	border-top: 0;
	border-bottom: 0;
}

@media (min-width: 48rem) {
	.wc-block-checkout__sidebar .wc-block-components-sidebar,
	.wc-block-checkout__sidebar > .wp-block-woocommerce-checkout-order-summary-block {
		padding: var(--commerce-gap-lg);
	}
}

/* Cinturón y tirantes: los avisos no llevan tarjeta pase lo que pase. */
.wc-block-checkout__sidebar .wc-block-components-notices,
.wc-block-checkout__sidebar .wc-block-components-notices__snackbar {
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   5 · CHECKOUT · pasos y formulario
   ══════════════════════════════════════════════════════════════════════════ */

.wc-block-components-checkout-step {
	border: 0;
	padding: 0 0 var(--zihouse-space-lg);
	margin: 0 0 var(--zihouse-space-lg);
	border-bottom: 1px solid var(--zihouse-color-border);
}

.wc-block-components-checkout-step:last-of-type { border-bottom: 0; }

/* El tamano de `__title` NO se pone aqui: se pone mas abajo, en la seccion de
   ritmo del checkout, y a mayor escala. Estaban los dos y ganaba aquel; dejar
   este era mantener vivo un valor que no se aplica nunca. */
.wc-block-components-title,
.wc-block-components-checkout-step__title {
	font-family: var(--zihouse-font-display);
	font-weight: 400;
	letter-spacing: var(--zihouse-tracking-tight);
	color: var(--zihouse-color-ink);
}

.wc-block-components-title {
	font-size: clamp(1.25rem, 2vw, 1.55rem);
}

.wc-block-components-checkout-step__description {
	font-size: var(--zihouse-text-sm);
	color: var(--zihouse-color-ink-muted);
	margin-top: var(--zihouse-space-3xs);
}

/* AQUÍ SE OCULTABA LA IDENTIFICACIÓN, SIN QUERER
   Esta regla se escribió para quitar el número de paso en círculo, pero
   __heading-content no es el número: es la ranura derecha de la cabecera, y es
   donde el checkout de bloques pone el enlace de acceso. Con display:none, el
   checkout de ZIHOUSE se quedó sin ninguna forma visible de iniciar sesión.

   El número de paso ya lo pinta el contador de CSS de más abajo, así que esta
   ranura queda libre para lo que de verdad lleva: la puerta del cliente que ya
   tiene cuenta. */
.wc-block-components-checkout-step__heading-content {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

/* LA PUERTA DEL CLIENTE REGISTRADO
   Era un enlace del tamaño del texto de apoyo. Ahora es lo que es: la acción
   secundaria del primer paso —la principal es seguir comprando como invitado,
   que no requiere pulsar nada—. Misma gramática que el resto de contornos del
   sistema: se tiñe al pasar por encima, no se rellena. */
.wc-block-checkout__login-prompt {
	display: inline-flex;
	align-items: center;
	min-height: 2.25rem;
	padding: 0 0.9em;
	border: 1px solid var(--zihouse-color-border-strong);
	border-radius: var(--zihouse-radius-pill);
	font-family: var(--zihouse-font-body);
	font-size: var(--zihouse-text-sm);
	font-weight: 600;
	line-height: 1;
	color: var(--zihouse-color-ink);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--zihouse-duration-fast) var(--zihouse-ease-out-quart),
		border-color var(--zihouse-duration-fast) var(--zihouse-ease-out-quart);
}

.wc-block-checkout__login-prompt:hover {
	background: var(--zihouse-tint-ink);
	border-color: var(--zihouse-color-ink);
	color: var(--zihouse-color-ink);
}

.wc-block-checkout__login-prompt:focus-visible {
	outline: var(--zihouse-focus-ring-width) solid var(--zihouse-color-accent);
	outline-offset: var(--zihouse-focus-ring-offset);
}

/* La cabecera del paso pasa a repartir título y puerta en la misma línea. */
.wc-block-components-checkout-step__heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--zihouse-space-md);
	flex-wrap: wrap;
}

/* En móvil la puerta baja debajo del título en vez de encogerlo. */
@media (max-width: 30rem) {
	.wc-block-components-checkout-step__heading { gap: var(--zihouse-space-2xs); }
	.wc-block-components-checkout-step__heading-content { width: 100%; }
}

/* Campos: la misma altura y el mismo borde que el resto del sitio. */
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-select__container,
.wc-block-components-combobox-control input.components-combobox-control__input {
	font-family: var(--zihouse-font-body);
	font-size: var(--zihouse-text-base);
	color: var(--zihouse-color-ink);
	background: var(--zihouse-color-bg);
	border: 1px solid var(--zihouse-color-border);
	border-radius: var(--zihouse-radius-sm);
	min-height: var(--zihouse-control-h, 3rem);
	box-shadow: none;
}

.wc-block-components-text-input input:focus,
.wc-block-components-combobox-control input.components-combobox-control__input:focus,
.wc-block-components-select__container:focus-within {
	border-color: var(--zihouse-color-accent);
	outline: 2px solid var(--zihouse-color-accent);
	outline-offset: 1px;
	box-shadow: none;
}

.wc-block-components-text-input label,
.wc-block-components-select__label {
	font-family: var(--zihouse-font-body);
	font-size: var(--zihouse-text-sm);
	color: var(--zihouse-color-ink-muted);
}

/* Casillas y radios al morado de marca. */
.wc-block-components-checkbox__input[type="checkbox"]:checked,
.wc-block-components-radio-control__input:checked {
	background-color: var(--zihouse-color-accent);
	border-color: var(--zihouse-color-accent);
}

.wc-block-components-checkbox__label,
.wc-block-components-radio-control__label {
	font-size: var(--zihouse-text-sm);
	color: var(--zihouse-color-ink);
}

/* Opciones de envío y de pago: filas seleccionables con estado claro. */
/* La separacion y el relleno de estas filas se fijan mas abajo, donde se coloca
   el circulo del radio; estaban tambien aqui con otros valores y ganaba aquel. */
.wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control__option {
	border: 1px solid var(--zihouse-color-border);
	border-radius: var(--zihouse-radius-sm);
	padding: var(--zihouse-space-sm) var(--zihouse-space-md);
	background: var(--zihouse-color-bg);
	transition: border-color var(--zihouse-duration-fast) var(--zihouse-ease-out-quart),
		background-color var(--zihouse-duration-fast) var(--zihouse-ease-out-quart);
}

.wc-block-components-radio-control__option:hover { border-color: var(--zihouse-color-ink-muted); }

/* El estado activo se marca con borde y fondo, nunca solo con color. */
.wc-block-components-radio-control__option-checked,
.wc-block-components-radio-control-accordion-option:has(input:checked) {
	border-color: var(--zihouse-color-accent);
	background: var(--zihouse-color-accent-soft, var(--zihouse-color-surface));
}

.wc-block-components-radio-control__option::after,
.wc-block-components-radio-control__option::before { box-shadow: none; }

/* La etiqueta del precio del envío, alineada y en Fraunces. La tipografia de
   `__secondary-label` se completa mas abajo, con su tamano y su color; aqui
   solo queda el grupo de etiquetas, que no se repite. */
.wc-block-components-shipping-rates-control__package .wc-block-components-radio-control__label-group {
	font-family: var(--zihouse-font-display);
}

/* ══════════════════════════════════════════════════════════════════════════
   6 · BOTONES
   Uno morado por pantalla: pagar. El resto, tinta sobre papel.
   ══════════════════════════════════════════════════════════════════════════ */

.wc-block-components-button:not(.wc-block-components-button--text) {
	font-family: var(--zihouse-font-body);
	font-size: var(--zihouse-text-sm);
	font-weight: 500;
	letter-spacing: 0.04em;
	border-radius: var(--zihouse-radius-pill);
	min-height: var(--zihouse-control-h, 3rem);
	padding-inline: var(--zihouse-space-lg);
	box-shadow: none;
	transition: background-color var(--zihouse-duration-fast) var(--zihouse-ease-out-quart),
		color var(--zihouse-duration-fast) var(--zihouse-ease-out-quart),
		border-color var(--zihouse-duration-fast) var(--zihouse-ease-out-quart);
}

/* La accion principal se define entera en la seccion 0b. */

/* Volver al carrito: enlace de vuelta, no una segunda llamada. */
.wc-block-components-checkout-return-to-cart-button {
	color: var(--zihouse-color-ink-muted);
	font-size: var(--zihouse-text-sm);
	text-decoration: none;
}

.wc-block-components-checkout-return-to-cart-button:hover { color: var(--zihouse-color-ink); }

/* ══════════════════════════════════════════════════════════════════════════
   7 · PAGO EXPRÉS
   Los botones de Apple Pay y Google Pay los dibujan sus dueños y no se pueden
   reestilizar: viven dentro de un iframe. Lo que sí se puede es darles menos
   protagonismo, contenerlos a un ancho razonable y separarlos del formulario
   con un divisor discreto en lugar de una franja de colores.
   ══════════════════════════════════════════════════════════════════════════ */

/* La separacion inferior se fija en la seccion de ritmo del checkout, mas
   abajo; aqui estaba repetida con otro valor y no llegaba a aplicarse. */
.wc-block-components-express-payment {
	border: 0;
}

.wc-block-components-express-payment__title-container {
	border: 0;
}

.wc-block-components-express-payment__title,
.wc-block-components-express-payment-continue-rule {
	font-family: var(--zihouse-font-body);
	font-size: var(--zihouse-text-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--zihouse-color-ink-muted);
}

.wc-block-components-express-payment-continue-rule::before,
.wc-block-components-express-payment-continue-rule::after {
	background: var(--zihouse-color-border);
	height: 1px;
}

.wc-block-components-express-payment__event-buttons {
	gap: var(--zihouse-space-2xs);
}

.wc-block-components-express-payment__event-buttons > li {
	/* El ancho maximo se fija en la seccion de PAGO EXPRES, mas abajo. */
	margin-inline: auto;
}

/* En el carrito no pintan nada: la decisión ahí es seguir, no pagar. */
.wp-block-woocommerce-cart .wc-block-components-express-payment,
.wp-block-woocommerce-cart .wc-block-cart__payment-options { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   8 · CARRITO VACÍO
   ══════════════════════════════════════════════════════════════════════════ */

.wc-block-cart__empty-cart__title {
	font-family: var(--zihouse-font-display);
	font-weight: 400;
	font-size: clamp(1.6rem, 3vw, 2.4rem);
	color: var(--zihouse-color-ink);
}

/* ══════════════════════════════════════════════════════════════════════════
   9 · CARGA
   El esqueleto gris de WooCommerce sobre papel marfil canta muchísimo.
   ══════════════════════════════════════════════════════════════════════════ */

.wc-block-components-skeleton,
.is-loading .wc-block-components-loading-mask__children {
	background: var(--zihouse-color-surface);
}

@media (prefers-reduced-motion: reduce) {
	.wc-block-components-button,
	.wc-block-components-radio-control__option { transition-duration: 1ms; }
}

/* ══════════════════════════════════════════════════════════════════════════
   10 · PESO SUFICIENTE
   WooCommerce Blocks encadena selectores largos del tipo
   `table.wc-block-cart-items .wc-block-cart-items__row .wc-block-…`, y el
   núcleo de WordPress añade `.wp-element-button` a los botones. Una clase
   suelta pierde contra eso aunque la hoja cargue después. Aquí se repiten las
   pocas declaraciones que perdían, con el peso justo para ganar y sin recurrir
   a !important, que dejaría el bloque imposible de ajustar más adelante.
   ══════════════════════════════════════════════════════════════════════════ */

/* --- Nombre del producto en la fila del carrito --- */
.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name {
	font-family: var(--zihouse-font-display);
	font-size: var(--zihouse-text-lg);
	font-weight: 400;
	line-height: var(--zihouse-leading-snug);
	color: var(--zihouse-color-ink);
	text-decoration: none;
}

.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name:hover {
	color: var(--zihouse-color-accent);
}

/* --- Enlace de quitar --- */
.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__remove-link {
	font-size: var(--zihouse-text-xs);
	color: var(--zihouse-color-ink-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__remove-link:hover {
	color: var(--zihouse-color-danger);
}

/* --- Precio de la fila --- */
.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-price__value {
	font-family: var(--zihouse-font-display);
	font-variant-numeric: tabular-nums;
	font-size: var(--zihouse-text-base);
	color: var(--zihouse-color-ink);
}

/* --- Botón de volver al carrito, dentro del pie de acciones --- */
.wp-block-woocommerce-checkout .wc-block-checkout__actions .wc-block-components-checkout-return-to-cart-button {
	color: var(--zihouse-color-ink-muted);
	background: transparent;
	border: 0;
	min-height: auto;
	width: auto;
}

/* --- Totales --- */
.wp-block-woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wp-block-woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: var(--zihouse-font-display);
	font-size: clamp(1.4rem, 2.4vw, 1.9rem);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

/* Miniatura de la fila: la viste product-media.css (ver nota de arriba). */



/* El texto interno del botón hereda el color, no el gris del tema. */
.wp-block-woocommerce-cart .wc-block-cart__submit-button .wc-block-components-button__text,
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button .wc-block-components-button__text {
	color: inherit;
}

/* --- Campos del formulario, con peso suficiente -----------------------------
   WooCommerce los declara con selectores de atributo del tipo
   `.wc-block-components-text-input input[type=text]`, que pesan más que la
   clase sola. Se repiten aquí con el mismo patrón para que el alto y el papel
   de fondo sean los del resto del sitio y no el blanco puro del bloque. */
.wp-block-woocommerce-checkout .wc-block-components-text-input input[type="text"],
.wp-block-woocommerce-checkout .wc-block-components-text-input input[type="email"],
.wp-block-woocommerce-checkout .wc-block-components-text-input input[type="tel"],
.wp-block-woocommerce-checkout .wc-block-components-text-input input[type="number"],
.wp-block-woocommerce-checkout .wc-block-components-text-input input[type="password"],
.wp-block-woocommerce-checkout .wc-block-components-textarea,
.wp-block-woocommerce-checkout .components-combobox-control__input[type="text"],
.wp-block-woocommerce-cart .wc-block-components-text-input input[type="text"] {
	min-height: var(--zihouse-control-h);
	padding: 1.5em 1em 0.5em;
	background-color: var(--zihouse-color-bg);
	border: 1px solid var(--zihouse-color-border);
	border-radius: var(--zihouse-radius-sm);
	font-family: var(--zihouse-font-body);
	font-size: var(--zihouse-text-base);
	color: var(--zihouse-color-ink);
	box-shadow: none;
}

.wp-block-woocommerce-checkout .wc-block-components-text-input input[type="text"]:focus,
.wp-block-woocommerce-checkout .wc-block-components-text-input input[type="email"]:focus,
.wp-block-woocommerce-checkout .wc-block-components-text-input input[type="tel"]:focus,
.wp-block-woocommerce-checkout .components-combobox-control__input[type="text"]:focus {
	border-color: var(--zihouse-color-accent);
	outline: 2px solid var(--zihouse-color-accent);
	outline-offset: 1px;
	box-shadow: none;
}

/* El desplegable de país y provincia, al mismo molde. */
.wp-block-woocommerce-checkout .wc-block-components-combobox .components-form-token-field__input-container,
.wp-block-woocommerce-checkout .wc-block-components-select .wc-block-components-select__container {
	min-height: var(--zihouse-control-h);
	background-color: var(--zihouse-color-bg);
	border: 1px solid var(--zihouse-color-border);
	border-radius: var(--zihouse-radius-sm);
}

/* ══════════════════════════════════════════════════════════════════════════
   11 · SUGERENCIAS DE PRODUCTO
   Dos formas del mismo componente: una tira que se arrastra en el panel
   lateral, estrecho, y una rejilla en la página de carrito. Misma tarjeta,
   mismo marco marfil que la tienda, para que no parezca publicidad pegada.
   ══════════════════════════════════════════════════════════════════════════ */

.zihouse-suggest {
	margin: var(--zihouse-space-lg) 0 0;
}

.zihouse-suggest__title {
	margin: 0 0 var(--zihouse-space-sm);
	font-family: var(--zihouse-font-display);
	font-weight: 400;
	letter-spacing: var(--zihouse-tracking-tight);
	color: var(--zihouse-color-ink);
}

.zihouse-suggest__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.zihouse-suggest__link {
	display: block;
	text-decoration: none;
	color: inherit;
}

/* Caja de la sugerencia: aqui la geometria; el marco y el fondo, en
   product-media.css. */
.zihouse-suggest__media {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--commerce-radius);
	margin-bottom: var(--commerce-gap-xs);
}

.zihouse-suggest__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 700ms var(--zihouse-ease-out-quint);
}

.zihouse-suggest__link:hover .zihouse-suggest__media img { transform: scale(1.06); }

.zihouse-suggest__brand {
	display: block;
	font-size: 0.62rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--zihouse-color-ink-muted);
}

.zihouse-suggest__name {
	display: block;
	font-family: var(--zihouse-font-display);
	line-height: var(--zihouse-leading-snug);
	color: var(--zihouse-color-ink);
}

.zihouse-suggest__link:hover .zihouse-suggest__name { color: var(--zihouse-color-accent); }

.zihouse-suggest__price {
	display: block;
	margin-top: 0.15em;
	font-family: var(--zihouse-font-display);
	font-variant-numeric: tabular-nums;
	color: var(--zihouse-color-ink);
}

.zihouse-suggest__price del { opacity: 0.45; margin-right: 0.35em; }
.zihouse-suggest__price ins { text-decoration: none; }

/* --- Variante panel lateral: tira que se arrastra --- */
.zihouse-suggest--drawer {
	border-top: 1px solid var(--zihouse-color-border);
	padding-top: var(--zihouse-space-md);
}

.zihouse-suggest--drawer .zihouse-suggest__title {
	font-size: var(--zihouse-text-base);
}

.zihouse-suggest--drawer .zihouse-suggest__list {
	display: grid;
	grid-auto-flow: column;
	/* Ancho de columna calculado para que se vean DOS enteros y el tercero
	   asome: si caben tres justos, no se lee que la tira continua. */
	grid-auto-columns: calc((100% - var(--commerce-gap-sm) * 2) / 2.25);
	gap: var(--commerce-gap-sm);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	padding-bottom: var(--zihouse-space-2xs);
	/* Barra fina: en un panel de 26rem una barra gruesa se come el diseño. */
	scrollbar-width: thin;
	scrollbar-color: var(--zihouse-color-border) transparent;
}

.zihouse-suggest--drawer .zihouse-suggest__item { scroll-snap-align: start; }

.zihouse-suggest--drawer .zihouse-suggest__name { font-size: var(--zihouse-text-sm); }
.zihouse-suggest--drawer .zihouse-suggest__price { font-size: var(--zihouse-text-sm); }

/* --- Variante página de carrito: rejilla --- */
.zihouse-suggest--cart {
	margin-top: var(--zihouse-space-3xl);
	padding-top: var(--zihouse-space-xl);
	border-top: 1px solid var(--zihouse-color-border);
}

.zihouse-suggest--cart .zihouse-suggest__title {
	font-size: clamp(1.4rem, 2.6vw, 2rem);
	margin-bottom: var(--zihouse-space-lg);
}

/* En el carrito la rejilla vale en escritorio, donde hay ancho de sobra. En
   movil se convierte en tira horizontal por el mismo motivo que en el panel:
   apilados verticalmente, seis productos anaden mil pixeles de scroll a una
   pantalla que ya era larga, y nadie llega. */
.zihouse-suggest--cart .zihouse-suggest__list {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - var(--commerce-gap-md) * 2) / 2.25);
	gap: var(--commerce-gap-md);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	padding-bottom: var(--commerce-gap-xs);
}

.zihouse-suggest--cart .zihouse-suggest__list::-webkit-scrollbar { display: none; }
.zihouse-suggest--cart .zihouse-suggest__item { scroll-snap-align: start; }

@media (min-width: 48rem) {
	.zihouse-suggest--cart .zihouse-suggest__list {
		grid-auto-flow: row;
		grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
		grid-auto-columns: auto;
		overflow-x: visible;
	}
}

.zihouse-suggest--cart .zihouse-suggest__name { font-size: var(--zihouse-text-base); }

@media (prefers-reduced-motion: reduce) {
	.zihouse-suggest__media img { transition-duration: 1ms; }
}

/* ══════════════════════════════════════════════════════════════════════════
   12 · PASOS NUMERADOS DEL CHECKOUT
   ───────────────────────────────────────────────────────────────────────────
   01 · INFORMACIÓN   02 · ENTREGA   03 · PAGO

   Es jerarquía VISUAL, no un asistente por pasos. Convertir el checkout de
   WooCommerce en un formulario multipantalla obliga a tocar su validación y su
   estado, que es justo donde no conviene meter mano: ahí se rompen los pagos.

   La numeración la lleva un contador de CSS, así que se ordena sola. Si mañana
   se añade o se quita una sección, los números se recalculan sin que nadie
   tenga que acordarse de renumerar nada a mano.
   ══════════════════════════════════════════════════════════════════════════ */

.wp-block-woocommerce-checkout .wc-block-checkout__main {
	counter-reset: zi-step;
}

.wp-block-woocommerce-checkout .wc-block-components-checkout-step {
	counter-increment: zi-step;
	position: relative;
}

.wp-block-woocommerce-checkout .wc-block-components-checkout-step__title::before {
	/* decimal-leading-zero: "01" pesa más que "1" y ancla la columna. */
	content: counter(zi-step, decimal-leading-zero);
	margin-right: 0.7em;
	font-family: var(--zihouse-font-body);
	font-size: 0.58em;
	font-weight: 500;
	letter-spacing: 0.14em;
	color: var(--zihouse-color-ink-muted);
	/* Alineado a la base del título, no centrado: el número acompaña, no compite. */
	vertical-align: 0.35em;
}

/* En pantallas estrechas el número se lleva un espacio que hace falta para el
   título, y la sección ya se entiende por su posición. */
@media (max-width: 30rem) {
	.wp-block-woocommerce-checkout .wc-block-components-checkout-step__title::before {
		display: none;
	}
}

/* ══════════════════════════════════════════════════════════════════════════
   13 · CARRITO VACÍO
   ───────────────────────────────────────────────────────────────────────────
   WooCommerce pinta aquí una carita triste con un lagrimón, dibujada por CSS
   desde la clase `with-empty-cart-icon`. Es un recurso de plantilla: infantiliza
   una marca de interiorismo y, sobre todo, dramatiza algo que no es un drama.
   Un carrito vacío no es una mala noticia, es el estado normal de quien acaba de
   llegar.

   Se retira el icono y se deja el mensaje solo, con aire alrededor. Debajo ya
   están los productos nuevos, que es la salida útil.
   ══════════════════════════════════════════════════════════════════════════ */

.wp-block-woocommerce-empty-cart-block .with-empty-cart-icon::before,
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
	content: none !important;
	display: none !important;
}

.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title {
	font-family: var(--zihouse-font-display);
	font-weight: 400;
	font-size: clamp(1.6rem, 3.2vw, 2.4rem);
	letter-spacing: var(--zihouse-tracking-tight);
	line-height: var(--zihouse-leading-tight);
	color: var(--zihouse-color-ink);
	margin: var(--zihouse-space-2xl) 0 var(--zihouse-space-md);
	padding: 0;
}

/* El separador de puntos de fábrica desaparece.
   
   Primero intenté convertirlo en una regla fina, pero el núcleo de WordPress lo
   define con selectores envueltos en `:where()` sobre `:root` que ganan a
   cualquier regla razonable de un tema. Y peleando por ello me di cuenta de que
   no hacía falta: entre el mensaje y los productos nuevos ya hay aire de sobra,
   y una línea ahí solo añadiría un elemento más. Se quita y punto. */
.wp-block-woocommerce-empty-cart-block .wp-block-separator,
.wp-block-woocommerce-empty-cart-block hr {
	display: none;
}

/* "Nuevo en la tienda": antetítulo, no un segundo titular que compita con el
   mensaje de arriba. */
.wp-block-woocommerce-empty-cart-block h2:not(.wc-block-cart__empty-cart__title) {
	font-family: var(--zihouse-font-body);
	font-size: var(--zihouse-text-xs);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--zihouse-color-ink-muted);
	margin-bottom: var(--zihouse-space-lg);
}

/* ══════════════════════════════════════════════════════════════════════════
   14 · REPARTO DE COLUMNAS EN CARRITO Y CHECKOUT
   ───────────────────────────────────────────────────────────────────────────
   WooCommerce reparte 65/35. Sobra formulario y falta resumen: en el momento de
   pagar, el resumen NO es un apéndice, es la mitad de la decisión. El cliente
   mira ahí para confirmar qué lleva y cuánto suma antes de dar el botón.

   Se lleva a 60/40. Cuarenta puntos dan para que la miniatura del producto se
   vea, el desglose respire y el total tenga peso de verdad.

   Se toca la base flexible, no el ancho: así el envoltorio sigue pudiendo
   apilar las columnas por su cuenta cuando no caben, sin que haya que duplicar
   sus puntos de corte aquí.
   ══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 65rem) {
	/* Se reparte el espacio SOBRANTE (`flex: n 1 0`), no el ancho total.
	   
	   Con porcentajes no funciona: 60% + 40% suman el 100% y, al añadirse el hueco
	   de separación, el conjunto pasa del ancho disponible y el contenedor manda la
	   segunda columna a la línea de abajo. Es exactamente lo que pasaba: el resumen
	   aparecía debajo de los productos en vez de a su lado.
	   
	   Con base cero y crecimiento 3 y 2, el navegador descuenta primero el hueco y
	   reparte lo que queda, así que la proporción se respeta y nada desborda. */
	.wc-block-components-sidebar-layout .wc-block-components-main {
		flex: 3 1 0;
		max-width: none;
	}

	.wc-block-components-sidebar-layout .wc-block-components-sidebar {
		flex: 2 1 0;
		max-width: none;
	}
}

/* La fila de producto del carrito, como pieza editorial: sin fondo, sin caja,
   separada por una regla y con aire suficiente para que la foto mande. */
.wp-block-woocommerce-cart .wc-block-cart-items__row {
	background: none;
	padding-block: var(--zihouse-space-md);
}

.wp-block-woocommerce-cart .wc-block-cart-item__wrap {
	gap: var(--zihouse-space-sm);
}

/* La columna de resumen no lleva caja propia en el carrito: la separa una regla
   vertical. Una caja más ahí sumaría un borde encima de otro borde. */
@media (min-width: 65rem) {
	.wp-block-woocommerce-cart .wc-block-cart__sidebar {
		border-left: 1px solid var(--zihouse-color-border);
		padding-left: clamp(1.5rem, 3vw, 3rem);
	}

	.wp-block-woocommerce-cart .wc-block-cart__sidebar > * {
		background: none;
		border: 0;
		padding: 0;
	}
}

/* --- Rejilla del atajo [zihouse_productos] --- */
.zihouse-shortcode-grid { margin-top: var(--zihouse-space-lg); }

.zihouse-shortcode-grid__title {
	margin: 0 0 var(--zihouse-space-md);
	font-family: var(--zihouse-font-body);
	font-size: var(--zihouse-text-xs);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--zihouse-color-ink-muted);
	text-align: left;
}

.zihouse-shortcode-grid__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--zihouse-space-md);
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: left;
}

@media (min-width: 48rem) {
	.zihouse-shortcode-grid__list { grid-template-columns: repeat(4, 1fr); }
}

.zihouse-shortcode-grid__list > li { margin: 0; }

/* El bloque de carrito vacío centra todo su contenido; la rejilla no. */
.wp-block-woocommerce-empty-cart-block .zihouse-shortcode-grid,
.wp-block-woocommerce-empty-cart-block .zihouse-shortcode-grid * { text-align: left; }

/* ══════════════════════════════════════════════════════════════════════════
   10 · CHECKOUT DE TICKET ALTO
   ───────────────────────────────────────────────────────────────────────────
   Esta pantalla es donde se decide una compra de varios cientos de euros. La
   anterior era correcta y por eso parecía barata: campos de 50 px, botón de
   confirmar de 42 px con letra de 12, miniaturas de 48 px y un radio que se
   comía la primera letra de «Envío a domicilio».

   Lo que hace cara una pantalla de pago no es adorno, es aplomo: cajas altas
   que no dan miedo de pulsar, un solo acento de color, tipografía de display
   donde hay una cifra importante, y espacio suficiente para que nada parezca
   apretado.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── EL FALLO DEL RADIO ─────────────────────────────────────────────────────
   WooCommerce coloca el radio en posición absoluta a 16 px del borde y le da
   20 px de ancho, así que ocupa de 16 a 36. El relleno izquierdo de la fila lo
   había dejado en 21 px, o sea que el texto arrancaba dentro del radio y se
   perdían quince píxeles de la primera palabra: «Envío a domicilio» se leía
   «vío a domicilio».

   Aquí se dejan de suponer las medidas de WooCommerce y se declaran: el hueco
   de la izquierda se calcula a partir del tamaño real del radio más su margen
   más un espacio, así que no se pueden volver a pisar aunque cambie una cosa
   o la otra. */
.wp-block-woocommerce-checkout,
.wp-block-woocommerce-cart {
	--zi-radio-size: 1.15rem;
	--zi-radio-inset: var(--zihouse-space-md);
}

.wc-block-components-radio-control__option,
.wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option {
	position: relative;
	padding-block: var(--zihouse-space-md);
	padding-inline-start: calc(
		var(--zi-radio-inset, 1.3rem) + var(--zi-radio-size, 1.15rem) + var(--zihouse-space-sm)
	);
	padding-inline-end: var(--zihouse-space-md);
	margin-bottom: var(--zihouse-space-xs);
	cursor: pointer;
}

.wc-block-components-radio-control__input {
	inset-inline-start: var(--zi-radio-inset, 1.3rem);
	top: 50%;
	width: var(--zi-radio-size, 1.15rem);
	height: var(--zi-radio-size, 1.15rem);
	margin: 0;
	transform: translateY(-50%);
	border: 1px solid var(--zihouse-color-border);
	background: var(--zihouse-color-bg);
}

/* El precio del envío es una cifra: va en la display y pegado a la derecha. */
.wc-block-components-radio-control__label-group {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--zihouse-space-sm);
	width: 100%;
}

.wc-block-components-radio-control__secondary-label {
	font-family: var(--zihouse-font-display);
	font-size: var(--zihouse-text-base);
	color: var(--zihouse-color-ink);
	white-space: nowrap;
}

/* ── RITMO ─────────────────────────────────────────────────────────────────
   Un paso por pantalla mental: más aire entre bloques que dentro de ellos. */
.wc-block-components-checkout-step {
	padding-bottom: var(--zihouse-space-xl);
	margin-bottom: var(--zihouse-space-xl);
}

.wc-block-components-checkout-step__title {
	font-size: clamp(1.35rem, 2.1vw, 1.75rem);
}

/* -- CAMPOS DEL CHECKOUT --------------------------------------------------
   Aqui habia un !important y una nota diciendo que no habia otra forma. Si la
   habia: repetir la clase, que es lo que resolvio el boton principal. Sube la
   especificidad por encima de los estilos que WooCommerce Blocks inyecta en
   linea, sin recurrir a la fuerza bruta.

   Y ademas ya no fija 56 px a mano: usa el mismo token que los campos del
   carrito y de la cuenta, que es lo que hacia que el formulario midiera 56 en
   una pantalla y 48 en otra. */
.wp-block-woocommerce-checkout .wc-block-components-text-input input.wc-block-components-text-input__input,
.wp-block-woocommerce-checkout .wc-block-components-text-input input,
.wp-block-woocommerce-checkout .wc-block-components-textarea.wc-block-components-textarea,
.wp-block-woocommerce-checkout .wc-block-components-combobox-control input.components-combobox-control__input,
.wp-block-woocommerce-checkout .wc-block-components-select__container.wc-block-components-select__container,
.wp-block-woocommerce-checkout .wc-block-components-select select {
	min-height: var(--commerce-control-height);
}

.wc-block-components-text-input input:hover,
.wc-block-components-select__container:hover {
	border-color: var(--zihouse-color-ink-muted);
}
/* ── RESUMEN DEL PEDIDO ────────────────────────────────────────────────────
   Es la única prueba visual de lo que se está comprando. La miniatura de 48 px
   no enseña un producto, enseña un icono.

   El relleno de esta caja estaba declarado DOS veces con el mismo selector:
   arriba a `space-md` y aquí a `space-lg`. Ganaba este por orden, y el
   resultado eran 37,5 px de aire por los cuatro lados en un panel de 163 de
   alto: más de la mitad de la caja era margen. La declaración vive ahora en un
   solo sitio, arriba. */
.wc-block-components-order-summary-item .wc-block-components-order-summary-item__image,
.wc-block-components-order-summary-item .wc-block-components-order-summary-item__image img {
	width: var(--commerce-product-thumb);
	height: var(--commerce-product-thumb);
	max-width: none;
	border-radius: var(--commerce-radius);
	object-fit: cover;
	background: var(--zihouse-shop-media-bg);
}

.wc-block-components-order-summary-item {
	gap: var(--zihouse-space-sm);
	padding-block: var(--zihouse-space-sm);
}

.wc-block-components-order-summary-item__description .wc-block-components-product-name {
	font-family: var(--zihouse-font-display);
	font-size: var(--zihouse-text-base);
	line-height: var(--zihouse-leading-snug);
	color: var(--zihouse-color-ink);
}

/* El total, con el peso de un total. */
.wc-block-components-totals-footer-item {
	padding-top: var(--zihouse-space-sm);
	border-top: 1px solid var(--zihouse-color-ink);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: var(--zihouse-font-display);
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	letter-spacing: var(--zihouse-tracking-tight);
}



/* ── PAGO EXPRÉS ──────────────────────────────────────────────────────────
   Los botones los dibuja Stripe dentro de un iframe y no se pueden reestilizar.
   Lo que sí se puede es que no ocupen más alto del que tienen, para que el
   bloque no parezca una caja vacía mientras cargan. */
.wc-block-components-express-payment__event-buttons > li {
	max-width: 20rem;
	min-height: 0;
}

.wc-block-components-express-payment {
	margin-bottom: var(--zihouse-space-xl);
}

@media (max-width: 48rem) {
	.wc-block-components-checkout-step {
		padding-bottom: var(--zihouse-space-lg);
		margin-bottom: var(--zihouse-space-lg);
	}
	.wc-block-components-order-summary-item__image,
	.wc-block-components-order-summary-item__image img { width: 4rem; height: 4rem; }
}