/* ==========================================================================
   Matati — carrito lateral (inc/carrito-lateral.php), como el de
   thewoobles.com: panel desde la derecha sobre un velo.
   ========================================================================== */

.carrito-abierto { overflow: hidden; } /* sin scroll de la página detrás */

.carrito-lateral {
	position: fixed;
	inset: 0;
	z-index: 100;
}

.carrito-lateral[hidden] { display: none; }

.carrito-lateral__fondo {
	position: absolute;
	inset: 0;
	background: var(--velo);
	opacity: 0;
	transition: opacity var(--suave);
}

.carrito-lateral__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(440px, 100%);
	background: var(--crema);
	border-left: var(--borde);
	transform: translateX(100%);
	transition: transform var(--suave);
}

.carrito-lateral.is-abierto .carrito-lateral__fondo { opacity: 1; }

.carrito-lateral.is-abierto .carrito-lateral__panel { transform: none; }

.carrito-lateral__panel:focus { outline: 0; }

/* Mientras responde el servidor */
.carrito-lateral.is-cargando .carrito-lateral__contenido {
	opacity: .6;
	pointer-events: none;
}

.carrito-lateral__contenido {
	display: flex;
	flex-direction: column;
	height: 100%;
	transition: opacity var(--rapido);
}

.carrito-lateral__cargando { padding: 32px 24px; }

/* Cabecera */
.carrito-lateral__cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 20px 18px 24px;
	border-bottom: var(--borde);
}

.carrito-lateral__titulo {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 21px;
}

.carrito-lateral__cantidad {
	display: grid;
	place-items: center;
	min-width: 26px;
	height: 26px;
	padding-inline: 7px;
	font-family: var(--fuente-texto);
	font-size: 14px;
	font-weight: 800;
	background: var(--rosa);
	border-radius: var(--pastilla);
}

.carrito-lateral__cerrar,
.carrito-lateral__quitar {
	display: grid;
	place-items: center;
	flex: none;
	padding: 0;
	color: var(--tinta);
	background: none;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: background var(--rapido);
}

.carrito-lateral__cerrar { width: 44px; height: 44px; }

.carrito-lateral__cerrar .icono { width: 24px; height: 24px; }

.carrito-lateral__cerrar:hover,
.carrito-lateral__quitar:hover { background: var(--blanco); }

/* Cuerpo: líneas y sugerencias (lo único que se desplaza) */
.carrito-lateral__cuerpo {
	flex: 1;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 20px 24px 28px;
}

.carrito-lateral__vacio {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	padding-block: 8px 12px;
}

.carrito-lateral__lista {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.carrito-lateral__linea {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px;
	background: var(--blanco);
	border-radius: 20px;
}

.carrito-lateral__foto {
	flex: none;
	width: 76px;
	overflow: hidden;
	border-radius: 14px;
}

.carrito-lateral__foto img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}

.carrito-lateral__datos {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.carrito-lateral__nombre {
	font-family: var(--fuente-titulo);
	font-size: 18px;
	line-height: 1.15;
	text-decoration: none;
}

.carrito-lateral__nivel {
	font-size: 14px;
	font-weight: 700;
	color: var(--turquesa);
}

.carrito-lateral__precio {
	font-size: 15px;
	font-weight: 700;
}

.carrito-lateral__quitar { width: 36px; height: 36px; }

.carrito-lateral__quitar .icono { width: 18px; height: 18px; }

/* Sugerencias */
.carrito-lateral__sugeridos {
	margin-top: 28px;
	padding-top: 24px;
	border-top: var(--borde-punteado);
}

.carrito-lateral__subtitulo {
	margin-bottom: 14px;
	font-size: 20px;
}

.carrito-lateral__linea--sugerida .carrito-lateral__foto { width: 64px; }

.carrito-lateral__agregar {
	flex: none;
	padding: 8px 16px;
	font: inherit;
	font-size: 14px;
	font-weight: 800;
	color: var(--blanco);
	background: var(--tinta);
	border: 0;
	border-radius: var(--pastilla);
	cursor: pointer;
	transition: background var(--rapido);
}

.carrito-lateral__agregar:hover { background: var(--turquesa); }

.carrito-lateral__agregar:disabled { opacity: .5; }

/* Pie: subtotal y botón (siempre a la vista) */
.carrito-lateral__pie {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 20px 24px 22px;
	color: var(--crema);
	background: var(--tinta);
}

.carrito-lateral__subtotal {
	display: flex;
	justify-content: space-between;
	font-size: 17px;
}

.carrito-lateral__subtotal strong { font-size: 20px; }

.carrito-lateral__pagar { width: 100%; }

@media (max-width: 480px) {
	.carrito-lateral__panel { border-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.carrito-lateral__fondo,
	.carrito-lateral__panel { transition: none; }
}