/**
 * Drawer del carrito (doc 09, mockup 08).
 *
 * Mismo cristal y mismo gesto que el menú móvil: entra desde la derecha, con
 * el velo desenfocando la tienda por detrás. En móvil ocupa el 80 %, como el
 * menú; en escritorio se queda en una columna de 520 px.
 */

.bx-carrito {
	position: fixed;
	inset: 0;
	z-index: 96;
}

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

.bx-carrito__velo {
	position: absolute;
	inset: 0;
	background: rgba(0, 4, 9, .55);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	animation: bx-velo-entra .28s ease both;
}

.bx-carrito--saliendo .bx-carrito__velo {
	animation: bx-velo-entra .22s ease reverse both;
}

/* El panel hereda el cristal del menú (.bx-drawer) y solo cambia de medida. */
.bx-carrito__panel {
	flex-direction: column;
	width: min(80%, 420px);
}

.bx-carrito__panel:focus {
	outline: none;
}

@media (min-width: 782px) {
	.bx-carrito__panel {
		/* Ancho pedido por David para escritorio. */
		width: min(520px, calc(100% - 2 * var(--bx-drawer-lado)));
	}
}

/* El respaldo: sin partículas —o con el movimiento reducido— el panel entra
   deslizándose desde la derecha, como toda la vida. */
.bx-carrito__panel {
	animation: bx-carrito-entra .28s ease both;
}

.bx-carrito--saliendo .bx-carrito__panel {
	animation: bx-carrito-entra .24s ease reverse both;
}

@keyframes bx-carrito-entra {
	from { transform: translateX(112%); opacity: 0; }
	to   { transform: translateX(0); opacity: 1; }
}

/* Con las partículas disponibles el panel nunca entra deslizándose: nace como
   un punto en su sitio y crece. La marca la pone el JavaScript al arrancar y
   se queda; si se quitara al acabar, la animación de deslizar se relanzaría y
   el panel se saldría de la pantalla justo al terminar. */
.bx-carrito--magico .bx-carrito__panel {
	animation: none;
}

/* Nace desde su propio centro, que es donde va a quedarse. */
.bx-carrito--magico.bx-carrito--naciendo .bx-carrito__panel {
	animation: bx-panel-nace .72s cubic-bezier(.34, .04, .18, 1) both;
}

.bx-carrito--magico.bx-carrito--muriendo .bx-carrito__panel {
	animation: bx-panel-muere .34s ease-in both;
}

/* El velo entra pronto: si el fondo sigue encendido, las partículas se
   pierden sobre la página iluminada. */
.bx-carrito--naciendo .bx-carrito__velo {
	animation: bx-velo-entra .26s ease both;
}
@media (prefers-reduced-motion: reduce) {
	.bx-carrito__panel,
	.bx-carrito__velo {
		animation: none;
	}
}

/* ------------------------------------------------------------ Cabecera */

.bx-carrito__cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bx-e-2);
	flex: 0 0 auto;
	/* Mismo margen lateral que el cuerpo (doc 11 fase 5.2), para que no quede
	   más pegada al filo que el resto del panel. */
	padding: var(--bx-e-3) var(--bx-e-4) var(--bx-e-2);
	border-bottom: 1px solid var(--bx-cristal-filo, rgba(200, 230, 244, .2));
}

.bx .bx-carrito__titulo {
	margin: 0;
	color: var(--bx-gold-claro);
	font-family: var(--bx-display);
	font-size: 1.15rem;
	font-weight: 600;
}

.bx .bx-carrito__cerrar {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid rgba(200, 230, 244, .28);
	border-radius: 50%;
	background: rgba(255, 255, 255, .06);
	color: var(--bx-texto);
	cursor: pointer;
}

.bx .bx-carrito__cerrar:hover {
	border-color: var(--bx-accent);
	color: var(--bx-accent);
}

/* --------------------------------------------------------- El contenido */

.bx-carrito__cuerpo {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	/* Solo desplaza la lista; el pie con el botón se queda fijo abajo. */
	overflow-y: auto;
	overscroll-behavior: contain;
	/* Antes var(--bx-e-3): el contenido quedaba pegado al filo iluminado del
	   panel (doc 11 fase 5.2). */
	padding: var(--bx-e-4);
	gap: var(--bx-e-3);
}

.bx-carrito--trabajando .bx-carrito__cuerpo {
	opacity: .6;
	pointer-events: none;
}

/* Mientras el servidor confirma, el desglose se lee un punto más suave: las
   cifras que hay son las de restar la línea que se acaba de ir, y el envío por
   rangos o un cupón en porcentaje todavía pueden moverlas. */
.bx-carrito__desglose--provisional {
	opacity: .82;
	transition: opacity .2s ease;
}

.bx-carrito__rotulo {
	display: block;
	margin-bottom: 8px;
	color: var(--bx-gold);
	font-family: var(--bx-ui);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

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

.bx-carrito__avisos:empty {
	display: none;
}

.bx-carrito__aviso {
	margin: 0 0 8px;
	padding: 9px 12px;
	border-radius: var(--bx-r-s);
	font-size: .82rem;
	line-height: 1.35;
}

.bx-carrito__aviso--error {
	border: 1px solid rgba(214, 64, 78, .45);
	background: rgba(214, 64, 78, .14);
	color: #ffc9ce;
}

.bx-carrito__aviso--ok {
	border: 1px solid rgba(58, 166, 106, .45);
	background: rgba(58, 166, 106, .14);
	color: #bdf0d3;
}

/* ------------------------------------------------------- Las líneas */

.bx-carrito__lineas {
	display: flex;
	flex-direction: column;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bx-carrito__linea {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto;
	align-items: start;
	gap: var(--bx-e-2);
	padding: 10px;
	border: 1px solid var(--bx-panel-linea);
	border-radius: 12px;
	background: rgba(255, 255, 255, .035);
}

.bx-carrito__foto {
	display: block;
	overflow: hidden;
	width: 64px;
	height: 64px;
	border-radius: 10px;
	background: rgba(0, 0, 0, .3);
}

.bx .bx-carrito__foto img {
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
}

.bx-carrito__datos {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.bx-carrito__nombre {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	color: var(--bx-texto);
	font-size: .88rem;
	font-weight: 600;
	line-height: 1.25;
}

.bx .bx-carrito__nombre a {
	color: inherit;
}

.bx .bx-carrito__nombre a:hover {
	color: var(--bx-accent);
}

.bx-carrito__variacion,
.bx-carrito__variacion p {
	margin: 0;
	color: var(--bx-texto-3);
	font-size: .74rem;
	line-height: 1.3;
}

/* Stepper compacto. */
.bx-carrito__cantidad {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	width: fit-content;
	padding: 2px;
	border: 1px solid var(--bx-borde-fuerte);
	border-radius: var(--bx-r-pill);
	background: rgba(0, 0, 0, .25);
}

.bx .bx-carrito__paso {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--bx-texto-2);
	cursor: pointer;
}

.bx .bx-carrito__paso:hover:not([disabled]) {
	background: rgba(255, 255, 255, .08);
	color: var(--bx-accent);
}

.bx .bx-carrito__paso[disabled] {
	opacity: .35;
	cursor: not-allowed;
}

.bx input.bx-carrito__numero {
	width: 40px;
	min-height: 0;
	padding: 3px 0;
	border: 0;
	background: none;
	color: var(--bx-texto);
	font-size: .84rem;
	font-weight: 600;
	text-align: center;
}

/* La flechita nativa del campo numérico sobra: para eso está el stepper. */
.bx-carrito__numero::-webkit-outer-spin-button,
.bx-carrito__numero::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.bx-carrito__numero {
	-moz-appearance: textfield;
	appearance: textfield;
}

.bx-carrito__lado {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
}

.bx-carrito__precio {
	color: var(--bx-texto);
	font-size: .92rem;
	font-weight: 700;
	white-space: nowrap;
}

.bx .bx-carrito__quitar {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	color: var(--bx-texto-3);
}

.bx .bx-carrito__quitar:hover {
	background: rgba(214, 64, 78, .14);
	color: #ff8f9a;
}

/* -------------------------------------------------------------- Cupón */

.bx-carrito__cupon-campos {
	display: flex;
	gap: 8px;
}

.bx input.bx-carrito__cupon-campo {
	flex: 1 1 auto;
	min-height: 42px;
	font-size: .86rem;
}

.bx .bx-carrito__cupon-btn {
	flex: 0 0 auto;
	min-height: 42px;
	padding: 10px 18px;
	font-size: .78rem;
}

.bx-carrito__cupones {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
}

.bx-carrito__cupones li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 6px 4px 12px;
	border: 1px solid rgba(56, 214, 245, .4);
	border-radius: var(--bx-r-pill);
	background: rgba(56, 214, 245, .1);
	font-size: .76rem;
}

.bx .bx-carrito__cupon-quitar {
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--bx-texto-2);
	cursor: pointer;
}

.bx .bx-carrito__cupon-quitar:hover {
	color: var(--bx-accent);
}

/* ----------------------------------------------------------- Desglose */

.bx-carrito__desglose {
	margin: 0;
	padding: var(--bx-e-2) 0 0;
	border-top: 1px solid var(--bx-panel-linea);
}

.bx-carrito__fila {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--bx-e-2);
	margin: 0 0 8px;
	color: var(--bx-texto-2);
	font-size: .86rem;
}

.bx-carrito__fila dt,
.bx-carrito__fila dd {
	margin: 0;
}

.bx-carrito__fila dd {
	font-weight: 600;
	white-space: nowrap;
}

.bx-carrito__fila--descuento {
	color: var(--bx-accent);
}

.bx-carrito__fila--total {
	margin: 0;
	padding-top: 10px;
	border-top: 1px solid var(--bx-panel-linea);
	color: var(--bx-texto);
	font-size: 1rem;
}

.bx-carrito__fila--total dd {
	color: var(--bx-gold-claro);
	font-family: var(--bx-display);
	font-size: 1.35rem;
}

/* ------------------------------------------------------------- Upsell */

.bx-carrito__upsell {
	padding: var(--bx-e-2);
	border: 1px solid var(--bx-panel-linea);
	border-radius: 12px;
	background: rgba(255, 255, 255, .03);
}

.bx-carrito__sugerido {
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px;
}

.bx-carrito__sugerido-foto {
	display: block;
	overflow: hidden;
	width: 52px;
	height: 52px;
	border-radius: 9px;
}

.bx .bx-carrito__sugerido-foto img {
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
}

.bx-carrito__sugerido-texto {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.bx .bx-carrito__sugerido-nombre {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	color: var(--bx-texto);
	font-size: .82rem;
	font-weight: 600;
	line-height: 1.25;
}

.bx-carrito__sugerido-precio {
	color: var(--bx-texto-3);
	font-size: .8rem;
}

.bx .bx-carrito__sugerido-btn,
.bx .bx-carrito__sugerido .button {
	min-height: 36px;
	padding: 8px 14px;
	font-size: .72rem;
	white-space: nowrap;
}

/* ---------------------------------------------------------------- Pie */

/* El pie va dentro de lo que se repinta —cambia con el carrito—, así que se
   pega al fondo con el margen automático en vez de sacándolo fuera. Con pocas
   líneas quedaba a media altura, con un palmo de panel vacío debajo. */
.bx-carrito__pie {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
	margin-top: auto;
	/* El relleno del cuerpo se compensa para que el pie llegue a los filos. */
	margin-right: calc(-1 * var(--bx-e-4));
	margin-bottom: calc(-1 * var(--bx-e-4));
	margin-left: calc(-1 * var(--bx-e-4));
	padding: var(--bx-e-4);
	border-top: 1px solid var(--bx-cristal-filo, rgba(200, 230, 244, .2));
	background: rgba(4, 14, 24, .5);
}

/* El rótulo se parte en dos líneas en pantallas estrechas; con un punto
   menos de cuerpo y algo menos de espaciado cabe entero. */
.bx .bx-carrito__pagar {
	width: 100%;
	font-size: .82rem;
	letter-spacing: .05em;
}

@media (min-width: 400px) {
	.bx .bx-carrito__pagar {
		font-size: .92rem;
		letter-spacing: .08em;
	}
}

.bx .bx-carrito__ver {
	color: var(--bx-texto-3);
	font-size: .82rem;
	text-decoration: underline;
}

.bx .bx-carrito__ver:hover {
	color: var(--bx-accent);
}

/* Los sellos, en una fila apretada al pie. */
.bx-carrito__pie .bx-confianza {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	width: 100%;
	margin-top: 4px;
}

.bx-carrito__pie .bx-confianza__item {
	flex-direction: column;
	gap: 4px;
	text-align: center;
	font-size: .66rem;
}

/* La franja de confianza trae cuatro sellos y en el panel caben tres. */
.bx-carrito__pie .bx-confianza__item:nth-child(2) {
	display: none;
}

/* ------------------------------------------------------ Carrito vacío */

.bx-carrito__vacio {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--bx-e-2);
	flex: 1 1 auto;
	padding: var(--bx-e-5) var(--bx-e-3);
	text-align: center;
	color: var(--bx-texto-3);
}

.bx-carrito__vacio svg {
	color: rgba(255, 255, 255, .22);
}

.bx-carrito__vacio-texto {
	margin: 0;
	font-size: .92rem;
}

/* Con el panel abierto, la página de detrás no se mueve. */
.bx-sin-scroll,
.bx-sin-scroll body {
	overflow: hidden;
}