/**
 * Cesta: la bolsa de la cabecera, el panel «TU CESTA» y el −/+ de cantidad.
 *
 * Se carga en toda la web porque el panel cuelga de la cabecera. Lo que pinta el widget
 * «Carrito de menú» de Elementor Pro (bolsa, contenedor, cierre) se ajusta sobre sus
 * clases; el contenido del panel es la plantilla `woocommerce/cart/mini-cart.php` del
 * tema, con clases propias `rj-cart__*`.
 *
 * Fuentes: RJ_Tienda_Pantallas.pdf págs. 4, 12–14 (Send220426) y RJ_WFM_Tienda.pdf
 * págs. 2–5 (Móvil). Colores: los del Kit (el wireframe no tiene color).
 */

/* ------------------------------------------------------------------
 * 1. Bolsa de la cabecera (pág. 15: 25×21 con asa, número dentro, 14 Bold; móvil pág. 5:
 *    16×14 con el número a 9). Con la cesta vacía no se dibuja (págs. 1 y móvil 1 y 10).
 *    El icono es el SVG de THE TIAS desde assets/img; el del widget se oculta.
 */
.rj-header__cart .elementor-menu-cart__toggle {
	line-height: 0;
}
.rj-header__cart .elementor-menu-cart__toggle_button {
	display: block;
	position: relative;
	width: 25px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--rj-contrast);
}
.rj-header__cart .elementor-menu-cart__toggle_button:hover,
.rj-header__cart .elementor-menu-cart__toggle_button:focus {
	background: transparent;
	color: var(--rj-contrast);
}
.rj-header__cart .elementor-menu-cart__toggle_button:focus-visible {
	outline: 2px solid var(--rj-contrast);
	outline-offset: 4px;
}
.rj-header__cart .elementor-button-icon {
	display: block;
	width: 100%;
	height: 100%;
	background: url("../img/bolsa.svg") center / contain no-repeat;
}
.rj-header__cart .elementor-button-icon > i,
.rj-header__cart .elementor-button-icon > svg {
	display: none;
}
/* Número centrado en el cuerpo de la bolsa (pág. 15: 14 Bold; cabe «99»). El cuerpo del SVG va de
   7,8 a 29,3 de 30 de alto → a 25 de ancho, de 7 a 27,5. El selector repite el del widget porque
   su regla para el indicador «plain» (inline-block) ganaba y dejaba el número arriba. */
.rj-header__cart .elementor-menu-cart__toggle .elementor-button-icon .elementor-button-icon-qty[data-counter] {
	position: absolute;
	inset: 7px 0 0.5px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	height: auto;
	margin: 0;
	padding: 0;
	border-radius: 0;
	background: none;
	font: 700 14px/1 var(--rj-font-body);
	letter-spacing: -0.02em;
	color: var(--rj-contrast);
	text-align: center;
}
.rj-header__cart .elementor-menu-cart__toggle:has(.elementor-button-icon-qty[data-counter="0"]) {
	display: none;
}
@media (max-width: 1024px) {
	/* Objetivo táctil de 24×24 (WCAG 2.2) con el dibujo de 16×19 dentro. */
	.rj-header__cart .elementor-menu-cart__toggle_button {
		width: 24px;
		height: 24px;
	}
	.rj-header__cart .elementor-button-icon {
		background-size: 16px 19px;
	}
	/* Bolsa de 16×19 dentro del objetivo de 24: cuerpo del SVG de 8,8 a 21,4 → número a 9 (pág. 5 móvil). */
	.rj-header__cart .elementor-menu-cart__toggle .elementor-button-icon .elementor-button-icon-qty[data-counter] {
		inset: 8px 0 2px;
		font-size: 9px;
	}
}

/* ------------------------------------------------------------------
 * 2. Panel lateral (pág. 13): 510 de ancho desde el borde superior, alto el del contenido,
 *    relleno 60 a los lados y abajo, fondo crema (rj-base-2, decisión del 21/09). En móvil
 *    la bolsa lleva a la página de la cesta (cesta.js) y el panel no se usa.
 */
.rj-header__cart .elementor-menu-cart__container {
	background-color: var(--rj-backdrop);
}
.rj-header__cart .elementor-menu-cart__main {
	inset-block: 0 auto;
	width: 510px;
	max-width: 100%;
	max-height: 100dvh;
	min-height: 0;
	padding: 0 var(--rj-space-60) var(--rj-space-60);
	overflow-y: auto;
	background-color: var(--rj-base-2);
	box-shadow: none;
	font: 400 16px/18px var(--rj-font-body);
	color: var(--rj-contrast);
}
/* «X» de cerrar (pág. 13: 20 px arriba a la derecha, a 60 del borde): el SVG de THE TIAS
   en un objetivo de 24×24; las dos rayas que dibuja el widget se quitan. */
.rj-header__cart .elementor-menu-cart__close-button {
	position: absolute;
	inset-block-start: 33px;
	inset-inline-end: calc(var(--rj-space-60) - 2px);
	width: 24px;
	height: 24px;
	margin: 0;
	align-self: auto;
	background: url("../img/cerrar.svg") center / 20px 20px no-repeat;
}
.rj-header__cart .elementor-menu-cart__close-button::before,
.rj-header__cart .elementor-menu-cart__close-button::after {
	display: none;
}
.rj-header__cart .elementor-menu-cart__close-button:focus-visible {
	outline: 2px solid var(--rj-contrast);
	outline-offset: 4px;
}
@media (max-width: 1024px) {
	.rj-header__cart .elementor-menu-cart__container {
		display: none;
	}
}

/* ------------------------------------------------------------------
 * 3. Contenido del panel (mini-cart.php).
 */
.rj-cart {
	display: flex;
	flex-direction: column;
}
/* «TU CESTA» (pág. 13: 20 Regular mayúsculas; la lista empieza a 90 del borde). */
.rj-cart__title {
	margin: 0;
	padding-block: var(--rj-space-40) 26px;
	font: 400 20px/24px var(--rj-font-body);
	text-transform: uppercase;
}
/* Lista con scroll (págs. 13–14): dos artículos a la vista, barra fina a la derecha. */
.rj-cart__list {
	--rj-cart-item-h: 116px; /* foto 113; texto 16 + 4 líneas de 18 + 10 + −/+ de 34 */
	display: flex;
	flex-direction: column;
	gap: var(--rj-space-15);
	max-height: calc(2 * var(--rj-cart-item-h) + var(--rj-space-15));
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--rj-contrast) transparent;
}
/* Artículo (pág. 13): foto 90×113, texto a 30, papelera arriba a la derecha. */
.rj-cart__item {
	position: relative;
	display: grid;
	grid-template-columns: 90px 1fr;
	column-gap: var(--rj-space-30);
	align-items: start;
	margin: 0;
	padding: 0;
}
.rj-cart__img {
	display: block;
	line-height: 0;
}
.rj-cart__img img {
	display: block;
	width: 90px;
	height: 113px;
	object-fit: cover;
}
.rj-cart__body {
	padding-inline-end: var(--rj-space-80); /* sitio para la papelera (pág. 13: texto hasta 1300, papelera a 1320) */
}
.rj-cart__name {
	display: block;
	font-weight: 600;
	color: inherit;
	text-decoration: none;
}
.rj-cart__name:hover,
.rj-cart__name:focus-visible {
	text-decoration: underline;
}
.rj-cart__item .variation,
.rj-cart__units,
.rj-cart__price {
	margin: 0;
	font-weight: 400;
}
.rj-cart__item .variation {
	display: flex;
	flex-wrap: wrap;
	gap: 0 0.25em;
}
.rj-cart__item .variation dt,
.rj-cart__item .variation dd,
.rj-cart__item .variation p {
	display: inline;
	margin: 0;
	font-weight: 400;
}
.rj-cart__item .rj-qty {
	margin-block-start: var(--rj-space-10);
}
.rj-cart__remove {
	position: absolute;
	inset-block-start: 0;
	inset-inline-end: var(--rj-space-40);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	line-height: 0;
}
.rj-cart__remove:focus-visible {
	outline: 2px solid var(--rj-contrast);
	outline-offset: 2px;
}
/* Resumen (pág. 13): «Valor del pedido», «Gastos estimados de envío», «TOTAL» a 18,
   importes a la derecha; el total en negrita y con 10 de aire. */
.rj-cart__totals {
	margin: var(--rj-space-25) 0 0;
	padding-block-end: var(--rj-space-25);
	font-size: 18px;
	line-height: 24px;
}
.rj-cart__row {
	display: flex;
	justify-content: space-between;
	gap: var(--rj-space-20);
}
.rj-cart__row dt,
.rj-cart__row dd {
	margin: 0;
}
.rj-cart__row dd {
	text-align: end;
}
.rj-cart__row--total {
	margin-block-start: var(--rj-space-10);
	font-weight: 700;
	text-transform: uppercase;
}
.rj-cart__row--total .includes_tax {
	display: block;
	font-size: 14px;
	font-weight: 400;
	line-height: 18px;
	text-transform: none;
}
/* Botones (pág. 13: 390×50, 20 Medium mayúsculas; «Finalizar compra» relleno y «Ir a la
   cesta» con borde, separados 16 → 15). Las Clases rj-btn del Kit solo existen en la
   página cuando un elemento de Elementor las usa, así que aquí van con sus mismos tokens. */
.rj-cart__buttons {
	display: flex;
	flex-direction: column;
	gap: var(--rj-space-15);
	margin: 0;
}
.rj-cart__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: var(--rj-space-50);
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--rj-contrast);
	color: var(--rj-base);
	font: 500 20px/1 var(--rj-font-body);
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}
.rj-cart__btn.rj-btn--outline {
	border: var(--rj-line-ui) solid var(--rj-contrast);
	background: transparent;
	color: var(--rj-contrast);
}
.rj-cart__btn:hover,
.rj-cart__btn:focus-visible {
	font-weight: 700;
}
.rj-cart__btn:focus-visible {
	outline: 2px solid var(--rj-contrast);
	outline-offset: 2px;
}
.rj-cart__empty {
	margin: 0;
}

/* ------------------------------------------------------------------
 * 4. −/+ de cantidad (pág. 4: 100×34, número 20 Medium; los SVG Suma/Resta de 15). El
 *    mismo en la ficha (tienda.js lo monta sobre el campo de WooCommerce), en el panel y
 *    en la página de la cesta (inc/cesta.php lo pinta).
 */
/* En la ficha la caja es la de WooCommerce hasta que tienda.js le añade rj-qty. */
.rj-qty,
.rj-product__cart .quantity {
	display: inline-flex;
	align-items: stretch;
	width: 100px;
	max-width: 100px;
	height: 34px;
	border: var(--rj-line-ui) solid var(--rj-contrast);
}
.rj-qty .screen-reader-text,
.rj-product__cart .quantity .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}
.rj-qty input.qty,
.rj-product__cart .quantity input.qty {
	flex: 1;
	min-width: 0;
	border: 0;
	padding: 0 0 2px; /* la cifra de Switzer queda 1 px baja respecto al centro de la caja y de los −/+ */
	background: transparent;
	color: var(--rj-contrast);
	font: 500 20px/1 var(--rj-font-body);
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}
.rj-qty input.qty::-webkit-outer-spin-button,
.rj-qty input.qty::-webkit-inner-spin-button,
.rj-product__cart .quantity input.qty::-webkit-outer-spin-button,
.rj-product__cart .quantity input.qty::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}
.rj-qty input.qty:focus-visible {
	outline: 2px solid var(--rj-contrast);
	outline-offset: -2px;
}
.rj-qty__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	border: 0;
	padding: 0;
	background: transparent;
	color: var(--rj-contrast);
	line-height: 0;
	cursor: pointer;
}
.rj-qty__btn:focus-visible {
	outline: 2px solid var(--rj-contrast);
	outline-offset: -2px;
}
.rj-qty__btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}
.rj-qty__icon {
	display: block;
	width: 15px;
	height: 15px;
}
.rj-qty.is-busy {
	opacity: 0.5;
	pointer-events: none;
}

/* ------------------------------------------------------------------
 * 5. Avisos de WooCommerce («… han sido añadidos a tu carrito»): WooCommerce les lleva el foco al
 *    pintarlos y el contorno de foco del Kit los enmarcaba como si fueran un botón. No son
 *    interactivos: sin contorno.
 */
.woocommerce-notices-wrapper .woocommerce-message:focus,
.woocommerce-notices-wrapper .woocommerce-info:focus,
.woocommerce-notices-wrapper .woocommerce-error:focus,
.woocommerce-notices-wrapper .woocommerce-message:focus-visible,
.woocommerce-notices-wrapper .woocommerce-info:focus-visible,
.woocommerce-notices-wrapper .woocommerce-error:focus-visible {
	outline: none;
}