/* ── Finalizar compra (checkout de BLOQUES de WooCommerce) ──
   El resumen del pedido venía todo a 13px (nombre, precios, subtotal, cupones) y a
   11.4px el aviso de envío. Es la pantalla donde el cliente comprueba qué va a pagar:
   si hay que entornar los ojos para leer el total, se abandona el carrito.

   Los selectores van ANIDADOS bajo .wp-block-woocommerce-checkout (y no con
   !important) para ganarle por especificidad a los estilos que trae WooCommerce,
   sin pelearnos con ellos ni depender del orden de carga de las hojas. */

.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__description,
.wp-block-woocommerce-checkout .wc-block-components-product-name,
.wp-block-woocommerce-checkout .wc-block-components-product-price,
.wp-block-woocommerce-checkout .wc-block-components-product-price__value,
.wp-block-woocommerce-checkout .wc-block-components-product-metadata,
.wp-block-woocommerce-checkout .wc-block-components-product-metadata__description,
.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__individual-price,
.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__total-price,
.wp-block-woocommerce-checkout .wc-block-components-formatted-money-amount,
.wp-block-woocommerce-checkout .wc-block-formatted-money-amount {
	font-size: 16px;
	line-height: 1.5;
}

/* El nombre del producto, que es lo primero que se busca con la vista. */
.wp-block-woocommerce-checkout .wc-block-components-product-name {
	font-weight: 700;
	color: var(--ink);
}

/* Subtotal, entrega, descuentos. */
.wp-block-woocommerce-checkout .wc-block-components-totals-item__label,
.wp-block-woocommerce-checkout .wc-block-components-totals-item__value,
.wp-block-woocommerce-checkout .wc-block-components-panel__button {
	font-size: 16px;
}

/* Avisos pequeños ("Introduce la dirección para calcular"): estaban a 11.4px. */
.wp-block-woocommerce-checkout .wc-block-components-shipping-placeholder__value,
.wp-block-woocommerce-checkout .wc-block-components-totals-item__description {
	font-size: 14px;
	line-height: 1.5;
}

/* Cabecera "Resumen del pedido" y TOTAL: los dos anclajes de la pantalla.
   El título lleva un selector más largo a propósito: WooCommerce lo estiliza con
   .wc-block-components-title y le ganaba, dejando el texto a 20px y el precio de al
   lado a 22px, descuadrados. */
.wp-block-woocommerce-checkout .wc-block-components-checkout-order-summary__title .wc-block-components-checkout-order-summary__title-text,
.wp-block-woocommerce-checkout .wc-block-components-checkout-order-summary__title-price {
	font-size: 22px;
}
.wp-block-woocommerce-checkout .wc-block-components-totals-footer-item,
.wp-block-woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wp-block-woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wp-block-woocommerce-checkout .wc-block-components-totals-footer-item-tax-value {
	font-size: 24px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   Peinado del checkout de bloques con el sistema de Rulos.

   WooCommerce lo sirve con sus estilos de fábrica: botón gris #32373c a 13px sin
   redondeo, panel lateral transparente y campos con el radio por defecto. Nada de
   eso se parece al resto de la tienda, justo en la pantalla donde el cliente decide.

   Todo va anidado bajo .wp-block-woocommerce-checkout / -cart y sin !important:
   gana por especificidad, no a codazos.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── El botón que cierra la venta ──
   Coral, como TODOS los botones de compra de la tienda (el coral está reservado a
   comprar; ver components.css). Con el mismo relieve retro que el resto. */
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-cart .wc-block-cart__submit-button {
	background: var(--coral);
	color: #fff;
	font-family: var(--font-ui);
	font-size: 16px;
	font-weight: 800;
	border: 0;
	border-radius: var(--r-lg);
	padding: 16px 24px;
	box-shadow: var(--lift);
	transition: transform .08s ease, box-shadow .08s ease;
}
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button:hover,
.wp-block-woocommerce-cart .wc-block-cart__submit-button:hover {
	background: var(--coral);
	opacity: .95;
}
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button:active,
.wp-block-woocommerce-cart .wc-block-cart__submit-button:active {
	transform: translateY(3px);
	box-shadow: 0 2px 0 var(--coral-d);
}

/* ── Titulares de cada paso (Dirección de envío, Opciones de pago…) ── */
.wp-block-woocommerce-checkout .wc-block-components-checkout-step__heading-content,
.wp-block-woocommerce-checkout .wc-block-components-title {
	color: var(--green);
}

/* ── Campos del formulario ──
   Mismo redondeo y el verde de marca al enfocar, en vez del azul del navegador. */
.wp-block-woocommerce-checkout .wc-block-components-text-input input,
.wp-block-woocommerce-checkout .wc-block-components-select__container,
.wp-block-woocommerce-checkout .wc-block-components-combobox-control input {
	border-radius: var(--r-md);
	font-size: 16px;   /* menos de 16px hace que el iPhone haga zoom al enfocar */
}
.wp-block-woocommerce-checkout .wc-block-components-text-input.is-active input:focus,
.wp-block-woocommerce-checkout .wc-block-components-text-input input:focus {
	outline: 2px solid var(--green);
	outline-offset: 1px;
}
.wp-block-woocommerce-checkout .wc-block-components-checkbox__input,
.wp-block-woocommerce-checkout .wc-block-components-radio-control__input {
	accent-color: var(--green);
}

/* ── Método de pago elegido: se marca en verde, no en negro ── */
.wp-block-woocommerce-checkout .wc-block-components-radio-control-accordion-option {
	border-radius: var(--r-md);
}
.wp-block-woocommerce-checkout .wc-block-components-radio-control-accordion-option:has(input:checked) {
	border-color: var(--green);
	box-shadow: inset 0 0 0 1px var(--green);
	background: rgba(59,91,68,.04);
}

/* ── Panel del resumen: una tarjeta, como las del resto de la tienda ── */
@media (min-width: 782px) {
	.wp-block-woocommerce-checkout .wc-block-components-sidebar {
		background: var(--card);
		border: 1px solid rgba(59,91,68,.14);
		border-radius: var(--r-lg);
		box-shadow: var(--shadow-card);
		padding: 20px;
	}
}
.wp-block-woocommerce-checkout .wc-block-components-totals-footer-item {
	color: var(--green);
}

/* Enlaces (Términos, Política de privacidad): verde de marca y subrayados. */
.wp-block-woocommerce-checkout a {
	color: var(--green);
	text-decoration: underline;
}