/*
 * Carrito, checkout y pedido recibido (feature 010).
 *
 * Las páginas son las clásicas de WooCommerce dentro de las plantillas del
 * tema. Las reglas van bajo `.rios-compra` para ganar a las hojas generales de
 * WooCommerce (`woocommerce-layout`, `-smallscreen` y `-general`), que siguen
 * cargadas por los avisos y los desplegables del checkout.
 */

/* Cabecera de la página. */
.rios-compra__cabecera {
	margin-bottom: var(--wp--preset--spacing--50);
}

.rios-compra__titulo {
	margin: 0;
	color: var(--wp--preset--color--azul);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 800;
	line-height: 1.2;
}

.rios-compra__subtitulo {
	margin: var(--wp--preset--spacing--10) 0 0;
	color: var(--wp--preset--color--texto-suave);
	font-size: var(--wp--preset--font-size--sm);
}

/*
 * El bloque classic-shortcode no lleva la clase del editor: se busca por su
 * contenedor. woocommerce-blocktheme limita el contenido y el título a 1000 px:
 * se llevan al ancho de contenido del tema, como el resto de la página (el
 * contenedor viene además con alignwide, que lo ensancharía).
 */
main.rios-compra > .woocommerce,
main.rios-compra .rios-compra__titulo {
	max-width: var(--wp--style--global--content-size);
}

/* Foco visible en todo lo interactivo de estas páginas. */
.rios-compra :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--wp--custom--foco);
	outline-offset: 2px;
}

/* Tarjeta común: lista del carrito, resumen y secciones del checkout. */
.rios-carrito__lista,
.rios-resumen,
.rios-checkout__seccion:not(.rios-checkout__seccion--interior, .rios-checkout__seccion--confirmar),
.rios-checkout__resumen,
.rios-confirmacion__tarjeta {
	box-sizing: border-box;
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: var(--wp--custom--radio--md);
	background: var(--wp--preset--color--blanco);
	box-shadow: var(--wp--preset--shadow--tarjeta);
}

/* Botones de las páginas de compra. */
.rios-compra .rios-boton-checkout,
.rios-compra .rios-boton-pagar,
.rios-compra .rios-boton-zona,
.rios-compra .rios-carrito__seguir,
.rios-compra .rios-checkout__volver {
	display: inline-flex;
	gap: var(--wp--preset--spacing--20);
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	max-width: 100%;
	min-height: 3rem;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	border: 2px solid var(--wp--preset--color--amarillo);
	border-radius: var(--wp--custom--radio--sm);
	background: var(--wp--preset--color--amarillo);
	color: var(--wp--preset--color--azul);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color var(--wp--custom--transicion), border-color var(--wp--custom--transicion);
}

.rios-compra .rios-boton-checkout:not(:disabled):hover,
.rios-compra .rios-boton-pagar:hover {
	border-color: var(--wp--preset--color--amarillo-oscuro);
	background: var(--wp--preset--color--amarillo-oscuro);
	color: var(--wp--preset--color--azul);
}

.rios-compra .rios-boton-zona,
.rios-compra .rios-carrito__seguir,
.rios-compra .rios-checkout__volver {
	border-color: var(--wp--preset--color--azul);
	background: var(--wp--preset--color--blanco);
	color: var(--wp--preset--color--azul);
}

.rios-compra .rios-boton-zona:hover,
.rios-compra .rios-carrito__seguir:hover,
.rios-compra .rios-checkout__volver:hover {
	background: var(--wp--preset--color--azul-claro);
}

.rios-compra .rios-boton-checkout.is-desactivado:disabled {
	border-color: var(--wp--preset--color--borde);
	background: var(--wp--preset--color--azul-claro);
	color: var(--wp--preset--color--texto-suave);
	cursor: not-allowed;
}

.rios-compra :where(.rios-boton-checkout, .rios-boton-pagar, .rios-boton-zona, .rios-carrito__seguir, .rios-checkout__volver) svg {
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
}

/* Productos que no se envían a la zona, encima del botón de pago (feature 053). */
.rios-compra .rios-checkout__bloqueados {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--rojo);
	border-left-width: 4px;
	border-radius: var(--wp--custom--radio--md);
	background: var(--wp--preset--color--blanco);
	color: var(--wp--preset--color--texto);
	font-size: var(--wp--preset--font-size--sm);
}

.rios-compra .rios-checkout__bloqueados:focus-visible {
	outline: 2px solid var(--wp--preset--color--azul);
	outline-offset: 2px;
}

.rios-compra .rios-checkout__bloqueados p {
	margin: 0;
}

.rios-compra .rios-checkout__bloqueados .rios-checkout__bloqueados-titulo {
	color: var(--wp--preset--color--rojo);
	font-weight: 700;
}

.rios-compra .rios-checkout__bloqueados ul {
	margin: var(--wp--preset--spacing--20) 0;
	padding-left: 1.25rem;
}

.rios-compra .rios-checkout__bloqueados a {
	color: var(--wp--preset--color--azul);
	font-weight: 700;
}

/* Resumen de errores de WooCommerce (con enlaces a cada campo). */
.rios-compra .woocommerce .woocommerce-error {
	margin: 0 0 var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
	border: 1px solid var(--wp--preset--color--rojo);
	border-left-width: 4px;
	border-radius: var(--wp--custom--radio--md);
	background: var(--wp--preset--color--blanco);
	color: var(--wp--preset--color--texto);
	font-size: var(--wp--preset--font-size--sm);
}

.rios-compra .woocommerce .woocommerce-error::before {
	top: var(--wp--preset--spacing--40);
	left: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--rojo);
}

.rios-compra .woocommerce .woocommerce-error li {
	margin: 0 0 var(--wp--preset--spacing--10);
}

.rios-compra .woocommerce .woocommerce-error a {
	color: var(--wp--preset--color--azul);
	font-weight: 700;
	text-decoration: underline;
}

.rios-compra .woocommerce .woocommerce-error:focus {
	outline: var(--wp--custom--foco);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * Carrito
 * ------------------------------------------------------------------------ */

.rios-carrito__zona {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	align-items: center;
	margin-bottom: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: var(--wp--custom--radio--md);
	background: var(--wp--preset--color--azul-claro);
	color: var(--wp--preset--color--texto);
	font-size: var(--wp--preset--font-size--sm);
}

.rios-carrito__zona.is-sin-zona {
	border-color: var(--wp--preset--color--amarillo);
	background: var(--wp--preset--color--amarillo);
	color: var(--wp--preset--color--azul);
}

.rios-carrito__zona-icono {
	flex: none;
	color: var(--wp--preset--color--azul);
}

.rios-carrito__zona-texto {
	flex: 1 1 12rem;
}

.rios-carrito__zona-etiqueta {
	color: var(--wp--preset--color--texto-suave);
}

.rios-carrito__zona strong {
	color: var(--wp--preset--color--azul);
}

.rios-carrito__zona-boton,
.rios-cambiar-zona {
	display: inline-flex;
	gap: var(--wp--preset--spacing--10);
	align-items: center;
	min-height: 2.75rem;
	padding: 0 var(--wp--preset--spacing--30);
	border: 0;
	background: none;
	color: var(--wp--preset--color--azul);
	font: inherit;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.rios-carrito__zona-boton:hover,
.rios-cambiar-zona:hover {
	text-decoration-thickness: 2px;
}

.rios-carrito {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	align-items: start;
}

.rios-carrito > * {
	min-width: 0;
}

@media (min-width: 1024px) {

	.rios-carrito {
		grid-template-columns: minmax(0, 1fr) 22rem;
	}

	.rios-carrito__resumen {
		position: sticky;
		top: var(--wp--preset--spacing--40);
	}
}

.rios-carrito__lista {
	padding: var(--wp--preset--spacing--40);
}

.rios-compra .woocommerce table.rios-carrito__tabla {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	border-radius: 0;
}

.rios-compra .woocommerce table.rios-carrito__tabla thead th {
	padding: 0 var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	border-bottom: 1px solid var(--wp--preset--color--borde);
	color: var(--wp--preset--color--azul);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	text-align: left;
}

.rios-compra .woocommerce table.rios-carrito__tabla tbody td {
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--20);
	border-top: 0;
	border-bottom: 1px solid var(--wp--preset--color--borde);
	color: var(--wp--preset--color--texto);
	vertical-align: middle;
}

.rios-compra .woocommerce table.rios-carrito__tabla td.product-thumbnail {
	width: 5.5rem;
	padding-left: 0;
}

.rios-compra .woocommerce table.rios-carrito__tabla td.product-thumbnail img {
	display: block;
	width: 5rem;
	max-width: none;
	height: 5rem;
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: var(--wp--custom--radio--sm);
	background: var(--wp--preset--color--azul-claro);
	object-fit: contain;
}

.rios-compra .woocommerce table.rios-carrito__tabla td.product-name {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
}

.rios-compra .woocommerce table.rios-carrito__tabla td.product-name > a {
	color: var(--wp--preset--color--azul);
	text-decoration: none;
}

.rios-compra .woocommerce table.rios-carrito__tabla td.product-name > a:hover {
	text-decoration: underline;
}

.rios-compra .rios-producto-unidad {
	margin: var(--wp--preset--spacing--10) 0 0;
	color: var(--wp--preset--color--texto-suave);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 400;
}

.rios-compra .woocommerce table.rios-carrito__tabla td.product-price,
.rios-compra .woocommerce table.rios-carrito__tabla td.product-subtotal {
	color: var(--wp--preset--color--azul);
	font-weight: 700;
	white-space: nowrap;
}

.rios-compra .woocommerce table.rios-carrito__tabla td.product-price del {
	display: block;
	color: var(--wp--preset--color--texto-suave);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 400;
}

.rios-compra .woocommerce table.rios-carrito__tabla td.product-price ins {
	text-decoration: none;
}

.rios-carrito__descuento {
	display: inline-block;
	margin-top: var(--wp--preset--spacing--10);
	padding: 0 var(--wp--preset--spacing--20);
	border-radius: var(--wp--custom--radio--full);
	background: var(--wp--preset--color--amarillo);
	color: var(--wp--preset--color--azul);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
}

.rios-compra .woocommerce table.rios-carrito__tabla td.product-remove {
	width: 2.75rem;
	padding-right: 0;
	text-align: right;
}

/* Quitar: el enlace de WooCommerce con el icono del tema. */
.rios-compra .woocommerce table.rios-carrito__tabla a.rios-carrito__quitar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--wp--custom--radio--full);
	background: none;
	color: var(--wp--preset--color--azul) !important;
	font-size: inherit;
	line-height: 1;
}

.rios-compra .woocommerce table.rios-carrito__tabla a.rios-carrito__quitar:hover {
	background: var(--wp--preset--color--azul-claro);
	color: var(--wp--preset--color--rojo) !important;
}

/* Cantidad con − y +. Sin el script, solo el campo de WooCommerce. */
.rios-cantidad {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: var(--wp--custom--radio--sm);
	background: var(--wp--preset--color--blanco);
}

.rios-cantidad__boton {
	display: none;
	width: 2.75rem;
	min-height: 2.75rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--azul);
	font: inherit;
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	cursor: pointer;
}

.rios-cantidad__boton:hover {
	background: var(--wp--preset--color--azul-claro);
}

.rios-cantidad-activa .rios-cantidad__boton {
	display: block;
}

.rios-compra .rios-cantidad .quantity {
	display: flex;
}

.rios-compra .rios-cantidad .quantity .qty {
	width: 3rem;
	min-height: 2.75rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--azul);
	font: inherit;
	font-weight: 700;
	text-align: center;
	appearance: textfield;
}

.rios-cantidad-activa .rios-cantidad .quantity .qty {
	border-inline: 1px solid var(--wp--preset--color--borde);
}

.rios-compra .rios-cantidad .qty::-webkit-inner-spin-button,
.rios-compra .rios-cantidad .qty::-webkit-outer-spin-button {
	margin: 0;
	appearance: none;
}

/* Línea que no se entrega en la zona. */
.rios-compra .woocommerce table.rios-carrito__tabla tr.rios-linea--bloqueada td {
	background: var(--wp--preset--color--azul-claro);
}

.rios-compra .woocommerce table.rios-carrito__tabla tr.rios-linea--bloqueada td.product-thumbnail img {
	opacity: 0.6;
}

.rios-linea__motivo {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
	align-items: center;
	margin: var(--wp--preset--spacing--20) 0 0;
	color: var(--wp--preset--color--rojo);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
}

.rios-linea__motivo-icono {
	flex: none;
	width: 1rem;
	height: 1rem;
}

.rios-linea__quitar {
	color: var(--wp--preset--color--azul);
	font-weight: 700;
}

/* Fila de acciones: cupón (si hay cupones) y "Actualizar carrito". */
.rios-compra .woocommerce table.rios-carrito__tabla td.actions {
	padding: var(--wp--preset--spacing--40) 0 0;
	border-bottom: 0;
	background: none;
	text-align: left;
}

.rios-compra .woocommerce table.rios-carrito__tabla td.actions:empty {
	padding: 0;
}

.rios-compra .woocommerce .rios-carrito__cupon {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);

	/* woocommerce-blocktheme pone `align-items: center`, que en columna centra la etiqueta. */
	align-items: stretch;
	float: none;
	margin-bottom: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--azul);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;

	/* La hoja de móvil de WooCommerce alinea las celdas a la derecha con !important. */
	text-align: left;
}

/* Campo y botón del cupón, en el carrito y en el checkout. */
.rios-carrito__cupon-campo,
.rios-cupon__campo {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	align-items: flex-start;
}

.rios-cupon__entrada {
	display: flex;
	flex: 1 1 12rem;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
}

.rios-compra .woocommerce :is(.rios-carrito__cupon, .rios-cupon) .input-text {
	box-sizing: border-box;
	width: auto;
	min-height: 2.75rem;
	margin: 0;
	padding: 0 var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: var(--wp--custom--radio--sm);
	background: var(--wp--preset--color--blanco);
	font: inherit;
}

/* woocommerce-blocktheme fija el campo por su id (50 px de alto, 50 % de ancho en móvil). */
/* stylelint-disable-next-line selector-id-pattern -- id de WooCommerce. */
.rios-compra .woocommerce .woocommerce-cart-form #coupon_code {
	width: auto;
	height: auto;
	margin: 0;
	padding: 0 var(--wp--preset--spacing--30);
	font-size: inherit;
}

.rios-compra .woocommerce .rios-cupon .input-text.has-error {
	border-color: var(--wp--preset--color--rojo);
}

.rios-compra .woocommerce .rios-cupon .coupon-error-notice {
	color: var(--wp--preset--color--rojo);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
}

/* "Aplicar": amarillo, como el resto de botones de la compra (con destello.css). */
.rios-compra .woocommerce button.rios-boton-cupon {
	display: inline-flex;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	margin: 0;
	padding: 0 var(--wp--preset--spacing--50);
	border: 2px solid var(--wp--preset--color--amarillo);
	border-radius: var(--wp--custom--radio--sm);
	background: var(--wp--preset--color--amarillo);
	color: var(--wp--preset--color--azul);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	line-height: 1.2;
	transition: background-color var(--wp--custom--transicion), border-color var(--wp--custom--transicion);
}

.rios-compra .woocommerce .rios-boton-cupon:hover {
	border-color: var(--wp--preset--color--amarillo-oscuro);
	background: var(--wp--preset--color--amarillo-oscuro);
	color: var(--wp--preset--color--azul);
}

/* Cupón del checkout: aviso con el enlace que lo abre y formulario debajo. */
.rios-compra .woocommerce .rios-cupon__aviso {
	display: flex;
	gap: var(--wp--preset--spacing--30);
	align-items: center;
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: var(--wp--custom--radio--md);
	background: var(--wp--preset--color--azul-claro);
	color: var(--wp--preset--color--azul);
	font-size: var(--wp--preset--font-size--sm);
}

.rios-cupon__icono {
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
}

.rios-compra .woocommerce .rios-cupon__pregunta {
	margin: 0;
	font-weight: 600;
}

.rios-compra .woocommerce .rios-cupon__pregunta .showcoupon {
	color: var(--wp--preset--color--azul);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.rios-compra .woocommerce form.rios-cupon {
	margin: 0 0 var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: var(--wp--custom--radio--md);
	background: var(--wp--preset--color--blanco);
	box-shadow: var(--wp--preset--shadow--tarjeta);
	text-align: left;
}

/* Con cantidad.js, "Actualizar carrito" no se ve, pero sigue siendo accesible y aparece al recibir el foco. */
.rios-cantidad-activa .rios-compra .woocommerce .rios-carrito__actualizar:not(:focus) {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.rios-carrito__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	align-items: center;
	justify-content: space-between;
	margin-top: var(--wp--preset--spacing--40);
}

.rios-carrito__vaciar {
	display: inline-flex;
	gap: var(--wp--preset--spacing--10);
	align-items: center;
	min-height: 2.75rem;
	padding: 0 var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: var(--wp--custom--radio--sm);
	color: var(--wp--preset--color--azul);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	text-decoration: none;
}

.rios-carrito__vaciar:hover {
	background: var(--wp--preset--color--azul-claro);
}

.rios-carrito__vaciar svg {
	width: 1rem;
	height: 1rem;
}

/* Carrito y checkout en móvil y tableta: cada línea como una tarjeta. */
@media (max-width: 767px) {

	.rios-carrito__lista {
		padding: var(--wp--preset--spacing--30);
	}

	.rios-compra .woocommerce table.rios-carrito__tabla thead {
		display: none;
	}

	.rios-compra .woocommerce table.rios-carrito__tabla,
	.rios-compra .woocommerce table.rios-carrito__tabla tbody {
		display: block;
	}

	.rios-compra .woocommerce table.rios-carrito__tabla tr.rios-carrito__linea {
		display: grid;
		grid-template-columns: 4.5rem minmax(0, 1fr) auto;
		grid-template-areas:
			"imagen nombre quitar"
			"imagen precio precio"
			"cantidad cantidad total";
		gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
		align-items: center;
		padding: var(--wp--preset--spacing--30) 0;
		border-bottom: 1px solid var(--wp--preset--color--borde);
	}

	.rios-compra .woocommerce table.rios-carrito__tabla tr.rios-linea--bloqueada {
		background: var(--wp--preset--color--azul-claro);
	}

	/* woocommerce-smallscreen alinea a la derecha con !important. */
	.rios-compra .woocommerce table.rios-carrito__tabla tr.rios-carrito__linea td {
		display: block;
		padding: 0;
		border: 0;
		background: none;
		text-align: left !important;
	}

	.rios-compra .woocommerce table.rios-carrito__tabla tr.rios-carrito__linea td::before {
		display: none;
	}

	.rios-compra .woocommerce table.rios-carrito__tabla td.product-thumbnail {
		display: block !important;
		grid-area: imagen;
		align-self: start;
		width: auto;
	}

	.rios-compra .woocommerce table.rios-carrito__tabla td.product-thumbnail img {
		width: 4.5rem;
		height: 4.5rem;
	}

	.rios-compra .woocommerce table.rios-carrito__tabla td.product-name {
		grid-area: nombre;
	}

	.rios-compra .woocommerce table.rios-carrito__tabla td.product-price {
		grid-area: precio;
	}

	.rios-compra .woocommerce table.rios-carrito__tabla td.product-price del {
		display: inline;
		margin-right: var(--wp--preset--spacing--10);
	}

	.rios-compra .woocommerce table.rios-carrito__tabla td.product-quantity {
		grid-area: cantidad;
	}

	.rios-compra .woocommerce table.rios-carrito__tabla td.product-subtotal {
		grid-area: total;
		font-size: var(--wp--preset--font-size--lg);
		text-align: right !important;
	}

	.rios-compra .woocommerce table.rios-carrito__tabla td.product-remove {
		grid-area: quitar;
		align-self: start;
		width: auto;
	}

	.rios-compra .woocommerce table.rios-carrito__tabla tr:not(.rios-carrito__linea) {
		display: block;
	}

	.rios-compra .woocommerce table.rios-carrito__tabla td.actions {
		display: block;
	}

	.rios-carrito__acciones > * {
		flex: 1 1 auto;
		justify-content: center;
	}
}

/* ---------------------------------------------------------------------------
 * Resumen del pedido (carrito y checkout)
 * ------------------------------------------------------------------------ */

.rios-resumen,
.rios-checkout__resumen {
	padding: var(--wp--preset--spacing--40);
}

.rios-compra .woocommerce .cart-collaterals .rios-resumen {
	float: none;
	width: auto;
}

.rios-compra .rios-resumen__titulo {
	margin: 0 0 var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--azul);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 800;
}

.rios-compra .woocommerce table.rios-resumen__tabla {
	width: 100%;
	margin: 0 0 var(--wp--preset--spacing--40);
	border: 0;
	border-collapse: collapse;
	border-radius: 0;
	font-size: var(--wp--preset--font-size--sm);
}

.rios-compra .woocommerce table.rios-resumen__tabla tr :is(th, td) {
	padding: var(--wp--preset--spacing--20) 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--texto);
	font-weight: 400;
	text-align: left;
	vertical-align: top;
}

.rios-compra .woocommerce table.rios-resumen__tabla tr > td:last-child {
	text-align: right;
}

.rios-compra .woocommerce table.rios-resumen__tabla tr:not(.order-total) td::before {
	display: none;
}

.rios-compra .woocommerce .rios-resumen table.rios-resumen__tabla tr {
	display: table-row;
}

.rios-compra .woocommerce .rios-resumen table.rios-resumen__tabla :is(th, td) {
	display: table-cell;
}

/* Aviso del módulo cuando el carrito no se puede pagar. */
.rios-compra .woocommerce table.rios-resumen__tabla tr.rios-envio-aviso td {
	color: var(--wp--preset--color--rojo);
	font-weight: 600;
}

.rios-compra .woocommerce table.rios-resumen__tabla tr.order-total :is(th, td) {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--azul-claro);
	color: var(--wp--preset--color--azul);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 800;
}

.rios-compra .woocommerce table.rios-resumen__tabla tr.order-total th {
	border-radius: var(--wp--custom--radio--sm) 0 0 var(--wp--custom--radio--sm);
}

.rios-compra .woocommerce table.rios-resumen__tabla tr.order-total td {
	border-radius: 0 var(--wp--custom--radio--sm) var(--wp--custom--radio--sm) 0;
}

.rios-compra .woocommerce table.rios-resumen__tabla tr.order-total td::before {
	display: none;
}

.rios-compra .woocommerce table.rios-resumen__tabla tr.order-total th + td {
	text-align: right;
}

.rios-resumen__continuar {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	padding: 0;
}

.rios-compra .woocommerce .rios-resumen__continuar .rios-boton-checkout {
	width: 100%;
	margin: 0;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--md);
}

.rios-checkout-motivo {
	margin: 0;
	color: var(--wp--preset--color--rojo);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
}

/* Líneas del resumen del checkout. */
.rios-compra .woocommerce table.rios-resumen__tabla thead {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.rios-compra .woocommerce table.rios-resumen__tabla tbody tr:not(.rios-envio-aviso) :is(th, td) {
	padding: var(--wp--preset--spacing--30) 0;
	border-bottom: 1px solid var(--wp--preset--color--borde);
}

.rios-compra .woocommerce table.rios-resumen__tabla tbody td.product-total {
	color: var(--wp--preset--color--azul);
	font-weight: 700;
	white-space: nowrap;
}

.rios-compra .woocommerce table.rios-resumen__tabla tfoot tr:first-child :is(th, td) {
	padding-top: var(--wp--preset--spacing--30);
}

.rios-resumen__linea {
	display: flex;
	gap: var(--wp--preset--spacing--30);
	align-items: flex-start;
}

.rios-compra img.rios-resumen__imagen {
	flex: none;
	width: 3.5rem;
	height: 3.5rem;
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: var(--wp--custom--radio--sm);
	background: var(--wp--preset--color--azul-claro);
	object-fit: contain;
}

.rios-resumen__producto {
	min-width: 0;
}

.rios-resumen__nombre {
	display: block;
	color: var(--wp--preset--color--azul);
	font-weight: 600;
}

.rios-resumen__producto .product-quantity {
	color: var(--wp--preset--color--texto-suave);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
}

/* ---------------------------------------------------------------------------
 * Checkout
 * ------------------------------------------------------------------------ */

/* Dos columnas: el formulario (campos y pago) y el resumen, que va fuera de él. */
.rios-checkout-columnas {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	align-items: start;
}

.rios-checkout-columnas > * {
	min-width: 0;
}

/* checkout.js antepone al formulario el resumen de errores: encima de los campos. */
.rios-checkout {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--50);
}

@media (min-width: 1024px) {

	.rios-checkout-columnas {
		grid-template-columns: minmax(0, 1fr) 24rem;
	}

	.rios-checkout__resumen {
		position: sticky;
		top: var(--wp--preset--spacing--40);
	}
}

.rios-checkout__principal,
.rios-checkout__datos {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
}

/* WooCommerce pone las columnas de datos en flotantes al 48 %. */
.rios-compra .woocommerce .rios-checkout__datos {
	width: auto;
}

.rios-checkout__seccion:not(.rios-checkout__seccion--interior, .rios-checkout__seccion--confirmar) {
	padding: var(--wp--preset--spacing--40);
}

.rios-checkout__cabecera {
	display: flex;
	gap: var(--wp--preset--spacing--30);
	align-items: flex-start;
	margin-bottom: var(--wp--preset--spacing--40);
}

.rios-checkout__numero {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: var(--wp--custom--radio--full);
	background: var(--wp--preset--color--azul);
	color: var(--wp--preset--color--blanco);
	font-weight: 800;
}

.rios-compra .rios-checkout__titulo {
	margin: 0;
	color: var(--wp--preset--color--azul);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 800;
	line-height: 1.2;
}

.rios-checkout__subtitulo {
	margin: var(--wp--preset--spacing--10) 0 0;
	color: var(--wp--preset--color--texto-suave);
	font-size: var(--wp--preset--font-size--sm);
}

/*
 * Secciones 3 y 5: comparten tarjeta con la 2 y la 4 (los campos de entrega
 * son un solo bloque del módulo y el botón de pago va dentro del pago), con
 * una línea de separación.
 */
.rios-checkout__seccion--interior,
.rios-checkout__seccion--confirmar {
	grid-column: 1 / -1;
	width: 100%;
	margin-top: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--50) 0 0;
	border-top: 1px solid var(--wp--preset--color--borde);
}

.rios-checkout__seccion--confirmar .rios-checkout__cabecera {
	margin-bottom: var(--wp--preset--spacing--30);
}

/* Títulos de WooCommerce y del módulo que repiten el de la sección. */
.rios-checkout .woocommerce-billing-fields > h3,
.rios-checkout .woocommerce-additional-fields > h3,
.rios-checkout #rios-entrega > h3 {
	display: none;
}

.rios-checkout #rios-entrega > h4 {
	grid-column: 1 / -1;
	margin: var(--wp--preset--spacing--20) 0 0;
	color: var(--wp--preset--color--azul);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
}

/* Rejilla de campos: dos columnas desde 600 px. */
.rios-checkout .woocommerce-billing-fields__field-wrapper,
.rios-checkout #rios-entrega {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0 var(--wp--preset--spacing--40);
}

@media (min-width: 600px) {

	.rios-checkout .woocommerce-billing-fields__field-wrapper,
	.rios-checkout #rios-entrega {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.rios-checkout .woocommerce-billing-fields__field-wrapper > .form-row-wide,
	.rios-checkout #rios-entrega > .form-row-wide {
		grid-column: 1 / -1;
	}

	/* Nombre y documento, teléfono y correo: de dos en dos. */
	.rios-checkout #rios-entrega > :is([id="nombre_entrega_field"], [id="ci_entrega_field"], [id="telefono_entrega_field"], [id="email_entrega_field"]) {
		grid-column: auto;
	}

}

.rios-compra .woocommerce .rios-checkout .form-row {
	float: none;
	width: auto;
	margin: 0 0 var(--wp--preset--spacing--40);
	padding: 0;
}

.rios-compra .woocommerce .rios-checkout .form-row label {
	display: block;
	margin-bottom: var(--wp--preset--spacing--10);
	color: var(--wp--preset--color--texto);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	line-height: 1.4;
}

.rios-compra .woocommerce .rios-checkout .form-row .required {
	color: var(--wp--preset--color--rojo);
	text-decoration: none;
}

.rios-compra .woocommerce .rios-checkout .form-row .optional {
	color: var(--wp--preset--color--texto-suave);
	font-weight: 400;
}

.rios-compra .woocommerce .rios-checkout .form-row :is(.input-text, select, textarea),
.rios-compra .woocommerce .rios-checkout .select2-container .select2-selection--single {
	box-sizing: border-box;
	width: 100%;
	min-height: 2.75rem;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: var(--wp--custom--radio--sm);
	background: var(--wp--preset--color--blanco);
	color: var(--wp--preset--color--texto);
	font: inherit;
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.5;
}

.rios-compra .woocommerce .rios-checkout .form-row textarea {
	min-height: 5.5rem;
}

.rios-compra .woocommerce .rios-checkout .form-row :is(.input-text, select, textarea)::placeholder {
	color: var(--wp--preset--color--texto-suave);
	opacity: 1;
}

.rios-compra .woocommerce .rios-checkout .select2-container .select2-selection--single .select2-selection__rendered {
	padding: 0;
	color: var(--wp--preset--color--texto);
	line-height: 1.6;
}

.rios-compra .woocommerce .rios-checkout .select2-container .select2-selection--single .select2-selection__arrow {
	top: 50%;
	right: var(--wp--preset--spacing--20);
	transform: translateY(-50%);
}

.rios-compra .woocommerce .rios-checkout .form-row :is(.input-text, select, textarea):focus {
	border-color: var(--wp--preset--color--azul);
	outline: var(--wp--custom--foco);
	outline-offset: 0;
}

.rios-compra .woocommerce .rios-checkout .form-row .description {
	color: var(--wp--preset--color--texto-suave);
	font-size: var(--wp--preset--font-size--xs);
}

/* Zona fija del destinatario (la pinta el módulo). Con la especificidad de
   .form-row, que si no le quita el relleno y deja el texto pegado al borde. */
.rios-compra .woocommerce .rios-checkout .rios-entrega__zona {
	margin: 0 0 var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radio--sm);
	background: var(--wp--preset--color--azul-claro);
	color: var(--wp--preset--color--texto);
	font-size: var(--wp--preset--font-size--sm);
}

.rios-checkout .rios-entrega__zona strong {
	color: var(--wp--preset--color--azul);
}

/*
 * Zona y "Cambiar zona" en una sola franja, como en el carrito: los dos
 * párrafos comparten la primera fila de la rejilla y el botón queda a la
 * derecha, dentro de la franja.
 */
.rios-checkout #rios-entrega > .rios-entrega__zona {
	grid-row: 1;
	grid-column: 1 / -1;

	/* Sin altura mínima: con el relleno, la franja mide lo que el botón y el
	   texto queda centrado (display: flex partiría la frase y sus espacios).
	   Móvil: el botón va debajo del texto, dentro de la franja. */
	padding-bottom: calc(2.75rem + var(--wp--preset--spacing--20));
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: var(--wp--custom--radio--md);
}

.rios-checkout #rios-entrega > .rios-entrega__cambiar {
	z-index: 1;
	grid-row: 1;
	grid-column: 1 / -1;
	align-self: end;
	justify-self: end;
	margin-inline-end: var(--wp--preset--spacing--30);
	margin-bottom: calc(var(--wp--preset--spacing--40) + var(--wp--preset--spacing--10));
}

@media (min-width: 600px) {

	.rios-checkout #rios-entrega > .rios-entrega__zona {
		padding-bottom: var(--wp--preset--spacing--30);
		padding-inline-end: 11rem;
	}

	.rios-checkout #rios-entrega > .rios-entrega__cambiar {
		align-self: center;
		margin-bottom: var(--wp--preset--spacing--40);
	}
}

.rios-cambiar-zona svg {
	width: 1rem;
	height: 1rem;
}

/* Errores en línea y resumen de errores (los pinta checkout.js de WooCommerce). */
.rios-compra .woocommerce .rios-checkout .form-row.woocommerce-invalid :is(.input-text, select, textarea),
.rios-compra .woocommerce .rios-checkout .form-row.woocommerce-invalid .select2-selection--single {
	border-color: var(--wp--preset--color--rojo);
}

.rios-compra .woocommerce .rios-checkout .form-row.woocommerce-invalid label {
	color: var(--wp--preset--color--rojo);
}

.rios-compra .woocommerce .checkout-inline-error-message {
	margin: var(--wp--preset--spacing--10) 0 0;
	color: var(--wp--preset--color--rojo);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
}

.rios-compra .woocommerce .checkout-inline-error-message::before {
	content: "! ";
}

/*
 * Errores de campo (feature 034): ya salen junto a cada campo, así que no se
 * repiten en el recuadro de arriba. Solo dentro del grupo que pinta
 * checkout.js (sin JavaScript no hay errores en línea y el recuadro se ve).
 * checkout-errores.js vuelve a mostrar los que no tienen su campo en la página.
 */
.rios-compra [class~="woocommerce-NoticeGroup-checkout"] .rios-avisos--solo-campos,
.rios-compra [class~="woocommerce-NoticeGroup-checkout"] .rios-aviso--campo {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Pedido recibido
 * ------------------------------------------------------------------------ */

.rios-confirmacion__tarjeta {
	padding: var(--wp--preset--spacing--50);
	text-align: center;
}

.rios-confirmacion__icono {
	width: 3rem;
	height: 3rem;
	color: var(--wp--preset--color--verde);
}

.rios-compra .rios-confirmacion__titulo {
	margin: var(--wp--preset--spacing--20) 0;
	color: var(--wp--preset--color--azul);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 800;
}

.rios-compra .woocommerce .rios-confirmacion .woocommerce-thankyou-order-received {
	margin: 0 0 var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--texto-suave);
	font-size: var(--wp--preset--font-size--md);
}

/* Pago: solo el contenedor; los campos de tarjeta van en un iframe de la pasarela. */
.rios-compra .woocommerce .rios-checkout__seccion--pago #payment {
	border-radius: 0;
	background: none;
}

.rios-compra .woocommerce .rios-checkout__seccion--pago #payment > ul {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	border: 0;
}

.rios-compra .woocommerce .rios-checkout__seccion--pago #payment > ul > li {
	margin: 0;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: var(--wp--custom--radio--md);
	background: var(--wp--preset--color--blanco);
	color: var(--wp--preset--color--texto);
	line-height: 1.5;
}

.rios-compra .woocommerce .rios-checkout__seccion--pago #payment > ul > li:has(> input:checked) {
	border-color: var(--wp--preset--color--amarillo);
	background: var(--wp--preset--color--azul-claro);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--amarillo);
}

.rios-compra .woocommerce .rios-checkout__seccion--pago #payment > ul > li > input {
	width: 1.125rem;
	height: 1.125rem;
	margin: 0 var(--wp--preset--spacing--20) 0 0;
	vertical-align: middle;
	accent-color: var(--wp--preset--color--azul);
}

.rios-compra .woocommerce .rios-checkout__seccion--pago #payment > ul > li > label {
	color: var(--wp--preset--color--azul);
	font-weight: 700;
	cursor: pointer;
}

.rios-compra .woocommerce .rios-checkout__seccion--pago #payment > ul > li img {
	max-height: 1.5rem;
	margin-left: var(--wp--preset--spacing--10);
	vertical-align: middle;
}

.rios-compra .woocommerce .rios-checkout__seccion--pago #payment [class~="payment_box"] {
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: var(--wp--preset--spacing--30);
	border-radius: var(--wp--custom--radio--sm);
	background: var(--wp--preset--color--azul-claro);
	color: var(--wp--preset--color--texto);
	font-size: var(--wp--preset--font-size--sm);
}

.rios-compra .woocommerce .rios-checkout__seccion--pago #payment [class~="payment_box"]::before {
	display: none;
}

.rios-compra .woocommerce .rios-checkout__seccion--pago #payment div.form-row.place-order {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	align-items: center;
	justify-content: space-between;
	margin: 0;
	padding: 0;
}

.rios-compra .woocommerce .rios-checkout__seccion--pago #payment .place-order > * {
	flex: 1 1 100%;
}

.rios-compra .woocommerce .rios-checkout__seccion--pago #payment .place-order > :is(.rios-checkout__volver, .rios-boton-pagar) {
	flex: 1 1 12rem;
}

.rios-compra .woocommerce .rios-checkout__seccion--pago #payment .woocommerce-privacy-policy-text {
	color: var(--wp--preset--color--texto-suave);
	font-size: var(--wp--preset--font-size--xs);
}

.rios-compra .woocommerce .rios-checkout__seccion--pago #payment .woocommerce-privacy-policy-text p {
	margin: 0;
}

.rios-compra .woocommerce .rios-checkout__seccion--pago #payment .rios-boton-pagar {
	float: none;
	width: auto;
	margin: 0;
}

@media (min-width: 600px) {

	.rios-compra .woocommerce .rios-checkout__seccion--pago #payment .place-order > :is(.rios-checkout__volver, .rios-boton-pagar) {
		flex: 0 1 auto;
	}

	.rios-compra .woocommerce .rios-checkout__seccion--pago #payment .rios-boton-pagar {
		margin-left: auto;
	}
}

/* Cabecera del resumen con "Editar carrito". */
.rios-checkout__resumen-cabecera {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	align-items: baseline;
	justify-content: space-between;
}

.rios-checkout__editar {
	color: var(--wp--preset--color--azul);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
}

.rios-compra .woocommerce .rios-checkout__resumen .woocommerce-checkout-review-order {
	float: none;
	width: auto;
}

/* ---------------------------------------------------------------------------
 * Avisos de WooCommerce y banner del pie
 * ------------------------------------------------------------------------ */

.rios-compra .woocommerce :is(.woocommerce-message, .woocommerce-info) {
	border-top-color: var(--wp--preset--color--azul);
	border-radius: var(--wp--custom--radio--sm);
	background: var(--wp--preset--color--azul-claro);
	color: var(--wp--preset--color--texto);
}

.rios-compra .woocommerce :is(.woocommerce-message, .woocommerce-info)::before {
	color: var(--wp--preset--color--azul);
}

.rios-compra .woocommerce .cart-empty {
	font-size: var(--wp--preset--font-size--md);
}

.rios-compra .woocommerce .return-to-shop .button {
	border-radius: var(--wp--custom--radio--sm);
	background: var(--wp--preset--color--amarillo);
	color: var(--wp--preset--color--azul);
	font-weight: 700;
}

.rios-compra-banner {
	overflow: hidden;
}

.rios-compra-banner__titulo {
	max-width: 32rem;
	margin: 0;
	font-weight: 800;
	line-height: 1.2;
}

.rios-compra-banner__resalte {
	background: none;
	color: var(--wp--preset--color--amarillo);
}

.rios-compra-banner__texto {
	margin: var(--wp--preset--spacing--20) 0 0;
}

/*
 * Bajo el resumen del checkout (design/checkout.png): garantías y banner.
 * "Compartir carrito" usa la variante "boton" del bloque de la 015.
 */
.rios-checkout-garantias {
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0 var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: var(--wp--custom--radio--md);
	background: var(--wp--preset--color--blanco);
	list-style: none;
}

.rios-checkout-garantias__item {
	display: flex;
	gap: var(--wp--preset--spacing--30);
	align-items: center;
	padding: var(--wp--preset--spacing--40) 0;
}

.rios-checkout-garantias__item + .rios-checkout-garantias__item {
	border-top: 1px solid var(--wp--preset--color--borde);
}

.rios-checkout-garantias__icono {
	flex: none;
	width: 2.25rem;
	height: 2.25rem;
	color: var(--wp--preset--color--azul);
}

.rios-checkout-garantias__textos {
	display: grid;
	gap: 0.125rem;
	color: var(--wp--preset--color--texto-suave);
	font-size: var(--wp--preset--font-size--xs);
}

.rios-checkout-garantias__titulo {
	color: var(--wp--preset--color--azul);
	font-size: var(--wp--preset--font-size--sm);
}

.rios-checkout-banner {
	overflow: hidden;
	margin-top: var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radio--md);
}

.rios-checkout-banner__titulo,
.rios-checkout-banner__texto {
	margin: 0;
	color: var(--wp--preset--color--blanco);
	font-weight: 800;
	line-height: 1.2;
}

.rios-checkout-banner__titulo {
	font-size: var(--wp--preset--font-size--lg);
}

.rios-checkout-banner__texto {
	color: var(--wp--preset--color--amarillo);
	font-size: var(--wp--preset--font-size--md);
}

/* "Te puede interesar" bajo el carrito. */
.rios-carrito__interesar {
	margin-top: var(--wp--preset--spacing--70);
}

/*
 * "Continuar al checkout": WooCommerce da al enlace `display: block`, relleno
 * de 1em y letra de 1.25em (`.woocommerce-cart .wc-proceed-to-checkout
 * a.checkout-button`), que lo sacaban de la tarjeta en escritorio.
 */
.woocommerce-cart .rios-compra .wc-proceed-to-checkout {
	padding: var(--wp--preset--spacing--20) 0 0;
}

.woocommerce-cart .rios-compra .wc-proceed-to-checkout .rios-boton-checkout {
	display: flex;
	width: 100%;
	margin: 0;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--md);
}

/*
 * Feature 015.
 * Encabezado del carrito con "Compartir carrito" a la derecha (carrito.png);
 * en pantallas estrechas va debajo del subtítulo.
 */
.rios-compra__cabecera:has(> .rios-compartir) {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: var(--wp--preset--spacing--30);
	align-items: start;
}

.rios-compra__cabecera > :not(.rios-compartir) {
	grid-column: 1;
}

.rios-compra__cabecera > .rios-compartir {
	grid-row: 1 / span 2;
	grid-column: 2;
	align-self: center;
	margin: 0;
}

@media (max-width: 599px) {

	.rios-compra__cabecera > .rios-compartir {
		grid-row: auto;
		grid-column: 1;
		justify-self: start;
		margin-top: var(--wp--preset--spacing--10);
	}

	.rios-compra__cabecera > .rios-compartir .rios-compartir__abrir {
		padding-inline: 0;
	}
}

/*
 * Checkout con sesión: "Elige un destinatario" y la casilla de guardar o
 * actualizar (los pinta el módulo, Checkout\Destinatarios).
 */
.rios-compra .woocommerce .rios-checkout .rios-destinatarios {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: var(--wp--custom--radio--sm);
	background: var(--wp--preset--color--azul-claro);
}

.rios-compra .woocommerce .rios-checkout label[for="rios-destinatarios"] {
	color: var(--wp--preset--color--azul);
	font-weight: 700;
}

.rios-compra .woocommerce .rios-checkout .rios-destinatarios .woocommerce-input-wrapper {
	display: block;
}

.rios-compra .woocommerce .rios-checkout .rios-destinatarios__guardar[hidden] {
	display: none;
}

.rios-compra .woocommerce .rios-checkout .rios-destinatarios__guardar .woocommerce-form__label {
	display: inline-flex;
	gap: var(--wp--preset--spacing--20);
	align-items: center;
	margin: 0;
	color: var(--wp--preset--color--texto);
	font-weight: 600;
	cursor: pointer;
}

.rios-compra .woocommerce .rios-checkout .rios-destinatarios__guardar input[type="checkbox"] {
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	margin: 0;
	accent-color: var(--wp--preset--color--azul);
}

/*
 * Capa de carga de WooCommerce (blockUI) al actualizar el carrito o el
 * checkout: la misma que el selector de zona al guardar. Capa blanca
 * translúcida, contenido desenfocado detrás y spinner con los colores de la
 * marca. WooCommerce pone el fondo, la opacidad y `z-index: 1000` en línea;
 * con ese z-index tapaba la cabecera fija (99) al desplazar. Basta con quedar
 * encima del bloque que se actualiza.
 */
.rios-compra [class~="blockUI"][class~="blockOverlay"] {
	z-index: 2 !important;
	border-radius: var(--wp--custom--radio--md);
	background: color-mix(in srgb, var(--wp--preset--color--blanco) 60%, transparent) !important;
	opacity: 1 !important;
	backdrop-filter: blur(3px);
	animation: rios-compra-aparecer 0.2s ease both;
}

.rios-compra [class~="blockUI"][class~="blockOverlay"]::before {
	position: absolute;
	top: 50%;
	left: 50%;
	box-sizing: border-box;
	width: 3rem;
	height: 3rem;
	margin: -1.5rem 0 0 -1.5rem;
	border: 4px solid var(--wp--preset--color--azul-claro);
	border-top-color: var(--wp--preset--color--azul);
	border-right-color: var(--wp--preset--color--amarillo);
	border-radius: 50%;
	background: none;
	content: "";
	animation: rios-compra-girar 0.8s linear infinite;
}

@keyframes rios-compra-girar {

	to {
		transform: rotate(1turn);
	}
}

@keyframes rios-compra-aparecer {

	from {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {

	.rios-compra [class~="blockUI"][class~="blockOverlay"] {
		animation: none;
	}

	.rios-compra [class~="blockUI"][class~="blockOverlay"]::before {
		animation-duration: 2.4s;
	}
}

/* ---------------------------------------------------------------------------
 * Carrito vacío (feature 029)
 *
 * El bloque central (cart/cart-empty.php) va dentro de `.woocommerce`, que
 * cart.js sustituye al quitar el último producto. "Productos populares" y la
 * franja de beneficios van fuera, se pintan siempre y solo se ven cuando la
 * página contiene el estado vacío. Así llegan activos (Interactivity API)
 * desde la carga.
 * ------------------------------------------------------------------------ */

.rios-carrito-vacio {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
	align-items: center;
	justify-content: center;
	padding: var(--wp--preset--spacing--40) 0;
}

.rios-carrito-vacio__ilustracion {
	flex: 0 0 auto;
	width: min(15rem, 60vw);
	height: auto;
}

.rios-carrito-vacio__fondo {
	fill: var(--wp--preset--color--azul-claro);
}

.rios-carrito-vacio__destellos,
.rios-carrito-vacio__carrito,
.rios-carrito-vacio__asa {
	fill: none;
	stroke: var(--wp--preset--color--azul);
	stroke-width: 5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.rios-carrito-vacio__destellos {
	stroke-width: 3;
}

.rios-carrito-vacio__bolsa--amarilla,
.rios-carrito-vacio__mango {
	fill: var(--wp--preset--color--amarillo);
}

.rios-carrito-vacio__bolsa--azul {
	fill: var(--wp--preset--color--azul-medio);
}

.rios-carrito-vacio__rueda {
	fill: var(--wp--preset--color--amarillo);
	stroke: var(--wp--preset--color--azul);
	stroke-width: 5;
}

.rios-carrito-vacio__cuerpo {
	flex: 1 1 22rem;
	max-width: 32rem;
}

.rios-carrito-vacio__titulo {
	margin: 0 0 var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--azul);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 800;
	line-height: 1.2;
}

.rios-carrito-vacio__texto {
	margin: 0 0 var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--texto);
	font-size: var(--wp--preset--font-size--md);
}

.rios-compra .woocommerce .rios-carrito-vacio__boton {
	display: inline-flex;
	box-sizing: border-box;
	gap: var(--wp--preset--spacing--10);
	align-items: center;
	border-radius: var(--wp--custom--radio--md);
	font-weight: 700;
}

.rios-carrito-vacio__puntos {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20) 0;
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0;
	list-style: none;
}

.rios-carrito-vacio__punto {
	display: flex;
	gap: var(--wp--preset--spacing--10);
	align-items: center;
	padding-inline-end: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--texto);
	font-size: var(--wp--preset--font-size--sm);
}

/* Separadores solo cuando los tres caben en una línea. */
@media (min-width: 600px) {

	.rios-carrito-vacio__punto + .rios-carrito-vacio__punto {
		padding-inline-start: var(--wp--preset--spacing--30);
		border-inline-start: 1px solid var(--wp--preset--color--borde);
	}
}

.rios-carrito-vacio__punto .rios-icono {
	color: var(--wp--preset--color--azul);
}

/*
 * Móvil: todo centrado bajo la ilustración, botón a lo ancho con la altura
 * táctil (sin el relleno grande del botón del tema) y los tres puntos en tres
 * columnas, con el icono encima del texto.
 */
@media (max-width: 599px) {

	.rios-carrito-vacio {
		padding-top: 0;
		text-align: center;
	}

	.rios-carrito-vacio__ilustracion {
		width: min(11rem, 50vw);
	}

	.rios-compra .woocommerce .rios-carrito-vacio__boton {
		justify-content: center;
		width: 100%;
		padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	}

	.rios-carrito-vacio__puntos {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--20);
	}

	.rios-carrito-vacio__punto {
		flex-direction: column;
		gap: var(--wp--preset--spacing--10);
		padding: 0;
		font-size: var(--wp--preset--font-size--xs);
		line-height: 1.3;
	}
}

/*
 * Mostrar y ocultar según haya estado vacío en la página. Sin `:has()`
 * (navegador antiguo) no se aplica ninguna de las dos reglas: se ve todo.
 */
.rios-compra:not(:has(.rios-carrito-vacio)) :is(.rios-carrito__populares, .rios-compra-beneficios) {
	display: none;
}

.rios-compra:has(.rios-carrito-vacio) :is(.rios-pasos, .rios-carrito__interesar, .rios-compra-banner) {
	display: none;
}

/* Productos populares: 6 en una fila, cuadrícula en tablet y fila deslizable en móvil. */
.rios-carrito__populares {
	margin-top: var(--wp--preset--spacing--60);
}

/* Tablet: 3 columnas, dos filas completas con 6 productos. */
@media (min-width: 768px) and (max-width: 1023px) {

	.rios-carrito__populares .rios-tarjetas.wc-block-product-template {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {

	.rios-carrito__populares .rios-tarjetas.wc-block-product-template {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {

	/*
	 * Anula la tarjeta horizontal de "Más vendidos" en móvil (feature 018):
	 * aquí la tarjeta es vertical, en una fila que se desliza.
	 */
	.rios-carrito__populares .rios-tarjetas.wc-block-product-template {
		position: relative;
		display: flex;
		gap: var(--wp--preset--spacing--30);
		margin-bottom: 0;
		padding-bottom: var(--wp--preset--spacing--10);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
	}

	.rios-carrito__populares .rios-tarjetas > .wc-block-product {
		flex: 0 0 calc((100% - var(--wp--preset--spacing--30)) / 2.2);
		padding-bottom: 0;
		scroll-snap-align: start;
	}

	.rios-carrito__populares.rios-seccion-productos--mas-vendidos .rios-tarjeta {
		display: flex;
		flex-direction: column;
	}

	.rios-carrito__populares.rios-seccion-productos--mas-vendidos .rios-tarjeta__media {
		position: relative;
		margin: 0 0 var(--wp--preset--spacing--10);
	}

	.rios-carrito__populares.rios-seccion-productos--mas-vendidos .rios-tarjeta__nombre {
		padding-inline-end: 0;
	}
}

/* Franja de beneficios: compacta, en lugar del banner. */
.rios-compra-beneficios {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--60);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radio--md);
}

@media (min-width: 1024px) {

	.rios-compra-beneficios {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.rios-compra-beneficio + .rios-compra-beneficio {
		padding-inline-start: var(--wp--preset--spacing--30);
		border-inline-start: 1px solid var(--wp--preset--color--borde);
	}
}

.rios-compra-beneficio {
	gap: var(--wp--preset--spacing--20);
	justify-content: center;
}

.rios-compra-beneficio__texto {
	margin: 0;
	line-height: 1.35;
}