/**
 * Carrito y finalizar compra.
 *
 * Ambas páginas son bloques de WooCommerce (wp:woocommerce/cart y
 * wp:woocommerce/checkout), así que se estilan sobre las clases .wc-block-*.
 * Al no haber tema de terceros de por medio ya no hacen falta los parches de
 * especificidad que necesitaba Shopkeeper: aquí solo se aporta la marca.
 */

.woocommerce-cart .contenido-principal,
.woocommerce-checkout .contenido-principal {
	padding-bottom: var(--e-8);
}

/* ------------------------------------------------ Cabecera fina de caja */

/* Nada de portadilla enorme: una barra compacta con migas y un título discreto,
   para ir directo al carrito y evitar scroll de más. */
.caja-cabecera {
	padding-block: var(--e-3) var(--e-2);
	border-bottom: 1px solid var(--borde);
	margin-bottom: var(--e-5);
}

.caja-cabecera .migas {
	padding-block: 0 var(--e-1);
}

.caja-cabecera__titulo {
	font-size: var(--t-l);
	margin: 0;
}

.caja-contenido {
	padding-bottom: var(--e-8);
}

/* ------------------------------------------------------------ Tipografía */

.wc-block-components-title,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-title {
	font-family: var(--fuente-titulo);
	font-weight: 400;
	letter-spacing: -0.01em;
	text-transform: none;
	color: var(--tinta);
}

.wc-block-components-form .wc-block-components-text-input label,
.wc-block-components-text-input label,
.wc-block-components-checkbox__label,
.wc-block-components-radio-control__label {
	font-family: var(--fuente-texto);
	text-transform: none;
	letter-spacing: 0;
}

/* --------------------------------------------------------------- Campos */

.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-select__container select,
.wc-blocks-components-select__select {
	border-radius: var(--radio);
	border-color: var(--borde-fuerte);
	font-size: var(--t-base);
}

.wc-block-components-text-input.is-active input:focus,
.wc-block-components-text-input input:focus,
.wc-blocks-components-select__select:focus {
	outline: none;
	border-color: var(--marca);
	box-shadow: 0 0 0 3px rgb(145 114 71 / 15%);
}

/* -------------------------------------------- Opciones de envío y de pago */

.wc-block-components-radio-control__option,
.wc-block-components-radio-control-accordion-option {
	border-radius: var(--radio-m);
	transition: background var(--transicion), box-shadow var(--transicion);
}

/* La opción elegida se marca con fondo de marca y una barra lateral, en vez
   del recuadro oscuro que dibuja WooCommerce por defecto. */
.wc-block-components-radio-control__option--checked-option-highlighted,
.wc-block-components-radio-control-accordion-option--checked-option-highlighted {
	background: var(--crema);
	box-shadow: inset 3px 0 0 var(--marca);
}

.wc-block-components-radio-control__input:checked {
	accent-color: var(--marca);
}

/* --------------------------------------------------------- Resumen */

/*
 * El resumen NO es fijo: en pantallas estrechas el bloque de WooCommerce se
 * coloca arriba y, si además era sticky, pisaba el formulario. Se deja estático
 * y se limita su altura para que no ocupe de más.
 */
.wp-block-woocommerce-checkout .wc-block-checkout__sidebar {
	position: static;
}

/*
 * Un único panel para el resumen: el fondo, el borde y el radio los lleva solo
 * el contenedor exterior. La lista de artículos interior no debe repetir borde
 * ni radio, o aparece un doble recuadro.
 */
.wp-block-woocommerce-checkout-order-summary-block {
	background: var(--crema);
	border: 1px solid var(--borde);
	border-radius: var(--radio-g);
	padding: var(--e-5);
}

.wc-block-components-order-summary,
.wp-block-woocommerce-checkout-order-summary-cart-items-block {
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
}

.wc-block-components-sidebar .wc-block-components-totals-wrapper,
.wp-block-woocommerce-checkout-order-summary-subtotal-block,
.wp-block-woocommerce-checkout-order-summary-shipping-block,
.wp-block-woocommerce-checkout-order-summary-taxes-block,
.wp-block-woocommerce-checkout-order-summary-discount-block,
.wp-block-woocommerce-checkout-order-summary-fee-block,
.wp-block-woocommerce-checkout-order-summary-coupon-form-block,
.wp-block-woocommerce-checkout-order-summary-totals-block {
	background: none;
	border-radius: 0;
	padding-inline: 0;
}

/* Las líneas divisorias las marca un borde fino, no un cambio de fondo. */
.wc-block-components-totals-wrapper {
	border-top: 1px solid var(--borde);
}

.wc-block-components-order-summary-item__image img {
	border-radius: var(--radio);
}

/* ------------------------------------------------------------- Totales */

.wc-block-components-totals-item__label {
	font-weight: 600;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: var(--fuente-titulo);
	font-size: var(--t-xl);
	color: var(--tinta);
}

/* --------------------------------------------------------------- Botón */

/* Separación respecto al panel del resumen que queda justo encima. */
.wc-block-checkout__actions,
.wp-block-woocommerce-checkout-actions-block {
	margin-top: var(--e-5);
}

.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button {
	background: var(--marca);
	border-radius: var(--radio);
	font-family: var(--fuente-texto);
	font-size: var(--t-s);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding-block: 1.15rem;
	transition: background var(--transicion), transform var(--transicion),
		box-shadow var(--transicion);
}

.wc-block-components-checkout-place-order-button:hover,
.wc-block-cart__submit-button:hover {
	background: var(--marca-oscura);
	transform: translateY(-2px);
	box-shadow: var(--sombra-m);
}

/* --------------------------------------------------------------- Avisos */

.wc-block-components-notice-banner {
	border-radius: var(--radio-m);
}

.wc-block-components-notice-banner.is-success {
	border-color: var(--verde);
}

/* ------------------------------------------------------ Barra de progreso */

/* Cuánto falta para el envío gratuito. Se pinta desde el tema en carrito y
   en la cesta lateral. */
.progreso-envio {
	background: var(--crema);
	border-radius: var(--radio-m);
	padding: var(--e-4);
	margin-bottom: var(--e-4);
	font-size: var(--t-s);
}

.progreso-envio__texto {
	display: flex;
	align-items: center;
	gap: var(--e-2);
	margin-bottom: var(--e-3);
	line-height: 1.4;
}

.progreso-envio__texto svg {
	width: 20px;
	height: 20px;
	color: var(--marca);
	flex-shrink: 0;
}

.progreso-envio__texto strong {
	color: var(--marca-oscura);
}

.progreso-envio__barra {
	height: 8px;
	border-radius: 4px;
	background: var(--arena);
	overflow: hidden;
}

.progreso-envio__relleno {
	height: 100%;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--oro), var(--marca));
	transition: width 500ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.progreso-envio.esta-conseguido .progreso-envio__relleno {
	background: var(--verde);
}

/* ------------------------------------------------------- Cesta lateral */

.cesta__vacia {
	text-align: center;
	padding-block: var(--e-8);
	color: var(--tinta-suave);
}

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

.cesta__linea {
	display: flex;
	gap: var(--e-4);
	padding-block: var(--e-4);
	border-bottom: 1px solid var(--borde);
	margin: 0;
}

.cesta__linea img {
	width: 84px;
	height: 84px;
	object-fit: cover;
	border-radius: var(--radio);
	background: var(--crema);
	flex-shrink: 0;
}

.cesta__datos {
	flex: 1;
	min-width: 0;
}

.cesta__nombre {
	font-weight: 700;
	font-size: var(--t-s);
	line-height: 1.35;
	margin-bottom: var(--e-1);
}

.cesta__nombre a {
	color: var(--tinta);
	text-decoration: none;
}

.cesta__variacion {
	font-size: var(--t-xs);
	color: var(--tinta-suave);
	margin-bottom: var(--e-2);
}

.cesta__precio {
	font-family: var(--fuente-titulo);
	font-size: var(--t-m);
}

.cesta__quitar {
	font-size: var(--t-xs);
	color: var(--tinta-suave);
	text-decoration: underline;
	align-self: flex-start;
}

.cesta__quitar:hover {
	color: var(--rojo);
}

.cesta__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: var(--e-4);
	font-size: var(--t-s);
}

.cesta__total strong {
	font-family: var(--fuente-titulo);
	font-size: var(--t-xl);
	font-weight: 400;
}

/* ------------------------------------------------------- Logotipo de Bizum

   El módulo de Redsys registra Bizum en el checkout de bloques sin icono, así
   que la marca se pone desde aquí: en el bloque no hay forma de añadirla sin
   parchear el plugin, y un parche se perdería en la siguiente actualización.
   El archivo sale del kit oficial de botones que mandó el banco. */

label[for="radio-control-wc-payment-method-options-redsys_bizum"] .wc-block-components-radio-control__label-group {
	width: 100%;
}

label[for="radio-control-wc-payment-method-options-redsys_bizum"] .wc-block-components-radio-control__label {
	display: flex;
	align-items: center;
	gap: var(--e-4);
	width: 100%;
}

label[for="radio-control-wc-payment-method-options-redsys_bizum"] .wc-block-components-radio-control__label::after {
	content: "";
	display: block;
	flex: none;
	width: 66px;
	height: 19px;
	margin-left: auto;
	background: url("../img/bizum.png") no-repeat right center / contain;
}