/* Minicarrito: panel lateral derecho con fondo oscurecido. CSS plano, sin compilar (como css/pages/*.css).
   El JS (scripts/shopping_cart.src.js) mueve #shopping_cart_detail y #mini-cart-overlay al final del body y les
   pone .is-open; con el panel abierto, <html> lleva .mini-cart-open (la pagina de detras no se desplaza).
   Por encima de la cabecera fija (z-index 99999997), del menu lateral (99999998) y de los flotantes; por debajo
   de los popups de colorbox (2147483646). */

.mini-cart {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 100000000;
	display: flex;
	flex-direction: column;
	width: 440px;
	max-width: 100%;
	background: #ffffff;
	color: #232323;
	box-shadow: -4px 0 24px rgba(0, 0, 0, 0.18);
	transform: translateX(100%);
	visibility: hidden;
	transition: transform 0.3s ease, visibility 0s linear 0.3s;
}

.mini-cart.is-open {
	transform: none;
	visibility: visible;
	transition: transform 0.3s ease, visibility 0s;
}

.mini-cart-overlay {
	position: fixed;
	inset: 0;
	z-index: 99999999;
	background: rgba(35, 35, 35, 0.45);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.mini-cart-overlay.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.3s ease, visibility 0s;
}

html.mini-cart-open,
html.mini-cart-open body {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.mini-cart,
	.mini-cart.is-open,
	.mini-cart-overlay,
	.mini-cart-overlay.is-open {
		transition: none;
	}
}

/* Cabecera: icono negro (con punto verde si hay productos), "Contenido de la cesta" y X. Tamanos de Figma. */
.mini-cart__header {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 12px;
	padding: 16px 16px 4px;
}

.mini-cart__icon {
	position: relative;
	display: flex;
	flex-shrink: 0;
	color: #232323;
}

.mini-cart:has(.fila) .mini-cart__icon::after {
	content: "";
	position: absolute;
	top: 1px;
	right: -1px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #39CEA1;
}

.mini-cart__title {
	flex: 1 1 auto;
	margin: 0;
	font-size: 20px;
	font-weight: 400;
	line-height: 24px;
	color: #232323;
}

.mini-cart__close {
	display: flex;
	margin: -6px;
	padding: 6px;
	border: 0;
	background: none;
	color: #232323;
	cursor: pointer;
}

.mini-cart__close svg {
	width: 24px;
	height: 24px;
}

.mini-cart__close:hover {
	color: #000000;
}

/* Contenido (lo sustituye el AJAX): "N productos" fijo arriba, lineas con scroll y pie fijo abajo. */
.mini-cart #content_products {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 0;
}

.mini-cart .mini-cart__count {
	flex: none;
	margin: 0;
	padding: 0 16px 6px;
	border-bottom: 1px solid #e1e1e1;
	font-size: 11px;
	line-height: 16px;
	letter-spacing: 0.1px;
	color: #696969;
}

.mini-cart__lines {
	flex: 1 1 auto;
	min-height: 0;
	overflow-x: hidden;
	overflow-y: auto;
	/* Hueco de la barra de scroll siempre reservado (en movil, 0): el JS lo resta del margen derecho y no cambia segun
	   haya o no scroll. */
	scrollbar-gutter: stable;
	/* En movil, al llegar al final de la lista no se desplaza la pagina de detras. */
	overscroll-behavior: contain;
	padding: 0 16px;
}

/* Lineas, como las tarjetas de movil de la pagina del carrito:
   [img] [pastilla + nombre + stock] [papelera]
   [precio unidad (antes)]  [x4]  [total]
   La papelera tiene columna propia (no la del total), para que el nombre tenga mas ancho en movil. */
.mini-cart .fila {
	display: grid;
	grid-template-columns: 85px minmax(0, 1fr) auto auto 28px;
	grid-template-areas:
		"img  info info info  del"
		"unit unit qty  total total";
	column-gap: 8px;
	row-gap: 8px;
	align-items: start;
	padding: 12px 0;
	border-bottom: 1px solid #eeeeee;
	font-size: 14px;
	line-height: 1.3;
	color: #232323;
}

.mini-cart .fila:last-child {
	border-bottom: 0;
}

/* Carrito vacio: solo el mensaje (sin pie). */
.mini-cart__empty {
	margin: 0;
	padding: 48px 0;
	font-size: 14px;
	line-height: 1.4;
	text-align: center;
	color: #696969;
}

.mini-cart__img {
	grid-area: img;
	display: block;
}

.mini-cart__img .foto,
.mini-cart__img img {
	display: block;
	width: 85px;
	height: 85px;
	object-fit: contain;
}

/* Sin imagen (regalo pendiente de elegir): el texto ocupa tambien su sitio. */
.mini-cart .fila:not(:has(.mini-cart__img)) .mini-cart__info {
	grid-column: 1 / 5;
}

.mini-cart__info {
	grid-area: info;
	align-self: center;
	min-width: 0;
	padding-right: 8px;
}

.mini-cart .name {
	display: block;
	font-size: 14px;
	font-weight: 500;
	color: #232323;
	text-decoration: none;
}

.mini-cart a.name:hover {
	text-decoration: underline;
}

/* Stock / plazo de entrega con punto, como en el carrito. */
.mini-cart .mini-cart__info .entrega {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	color: #39CEA1;
}

/* Plazo de entrega que no es el de stock / 48-72 h: en gris, como en los listados (alli solo va en verde ese). */
.mini-cart .mini-cart__info .entrega--plazo {
	color: #696969;
}

.mini-cart .mini-cart__info .entrega::before {
	content: "";
	display: inline-block;
	position: relative;
	top: -1px;
	width: 6px;
	height: 6px;
	margin-right: 4px;
	border-radius: 50%;
	background: currentColor;
	vertical-align: middle;
}

.mini-cart__pending {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	color: #39CEA1;
	text-decoration: underline;
}

/* Pastillas de oferta y regalo (mismos colores que en el carrito). */
.mini-cart__badge {
	display: flex;
	align-items: center;
	gap: 6px;
	width: fit-content;
	margin-bottom: 5px;
	padding: 3px 10px 3px 8px;
	border-radius: 11px;
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	white-space: nowrap;
	color: #ffffff;
}

.mini-cart__badge--offer {
	background: #B850B6;
}

.mini-cart__badge--gift {
	background: #3ccf9e;
}

.mini-cart .delete {
	grid-area: del;
	justify-self: end;
	display: flex;
	padding-top: 8px;
	cursor: pointer;
}

.mini-cart .delete svg {
	width: 28px;
	height: 28px;
	/* El dibujo no llega al borde de su caja: se pega al margen derecho, como los importes del pie. */
	margin-right: -6px;
}

.mini-cart__unit {
	grid-area: unit;
	align-self: center;
	font-size: 14px;
}

.mini-cart__label {
	display: block;
	margin-bottom: 4px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	color: #696969;
}

.mini-cart__old {
	margin-left: 4px;
	font-size: 12px;
	color: #999999;
}

.mini-cart .numero {
	grid-area: qty;
	align-self: center;
	min-width: 44px;
	font-size: 16px;
	text-align: center;
	color: #232323;
}

.mini-cart .precio {
	grid-area: total;
	align-self: center;
	min-width: 76px;
	font-size: 14px;
	font-weight: 500;
	/* A la derecha, alineado con los importes del pie. */
	text-align: right;
	white-space: nowrap;
}

.mini-cart .precio--offer {
	color: #B850B6;
}

.mini-cart .precio--free {
	color: #39CEA1;
}

/* Pie fijo: totales (subtotal, envio, IVA y total) y botones. Como en Figma, el separador va dentro del margen de
   16px (no a todo el ancho) y sin sombra. Importes como en el resumen del carrito: texto gris normal e importe oscuro
   en negrita a 14px; el total, mas grande y en morado. */
.mini-cart__footer {
	flex: none;
	padding: 0 16px 8px;
}

.mini-cart__totals {
	transition: opacity 0.2s ease;
}

/* Mientras llegan los totales completos (IVA y total) por AJAX. */
.mini-cart__totals.is-loading {
	opacity: 0.55;
}

.mini-cart__subtotal,
.mini-cart__shipping-row,
.mini-cart__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	font-size: 14px;
	line-height: 20px;
	color: #696969;
}

.mini-cart__subtotal {
	padding: 8px 0;
	border-top: 1px solid #e1e1e1;
}

.mini-cart__subtotal strong,
.mini-cart__shipping-row strong,
.mini-cart__row strong {
	font-size: 14px;
	font-weight: 500;
	color: #232323;
	white-space: nowrap;
}

/* Otras lineas de totales (cupon, recargo...; el IVA no se muestra): seguidas, sin separador entre ellas. */
.mini-cart__row {
	padding: 2px 0;
}

.mini-cart__shipping + .mini-cart__row {
	padding-top: 8px;
	border-top: 1px solid #eeeeee;
}

.mini-cart__row--ot_total {
	margin-top: 6px;
	padding: 8px 0 10px;
	border-top: 1px solid #eeeeee;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	color: #232323;
}

.mini-cart__row--ot_total strong {
	font-size: 22px;
	line-height: 28px;
	color: #90288e;
}

.mini-cart__shipping + .mini-cart__row--ot_total {
	margin-top: 0;
}

/* Envio: "Gastos de Envio | importe", tarjeta del envio gratis y nota de zonas, en un unico bloque. */
.mini-cart__shipping {
	padding: 8px 0 10px;
	border-top: 1px solid #eeeeee;
}

.mini-cart__shipping.is-free-shipping .mini-cart__shipping-row strong {
	color: #39CEA1;
}

/* Tarjeta que anima a llegar al envio gratis (o lo celebra): fondo del verde de la web muy rebajado. */
.mini-cart__promo {
	margin-top: 8px;
	padding: 10px 12px 12px;
	border-radius: 4px;
	background: rgba(57, 206, 161, 0.1);
}

.mini-cart__promo-text {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 14px;
	line-height: 1.3;
	color: #232323;
}

.mini-cart__promo-text svg {
	flex-shrink: 0;
	color: #39CEA1;
}

.mini-cart__promo-text strong {
	font-weight: 700;
	color: #39CEA1;
}

.mini-cart__progress {
	display: block;
	height: 6px;
	margin-top: 8px;
	border-radius: 3px;
	background: #ffffff;
}

.mini-cart__progress > span {
	display: block;
	height: 100%;
	border-radius: 3px;
	background: #39CEA1;
}

.mini-cart__promo-goal {
	display: block;
	margin-top: 6px;
	font-size: 11px;
	line-height: 1.35;
	color: #39CEA1;
}

.mini-cart__note {
	display: block;
	margin-top: 8px;
	font-size: 11px;
	line-height: 1.35;
	color: #767676;
}

.mini-cart__footer .button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	font-size: 14px;
}

.mini-cart__checkout {
	height: 48px;
}

.mini-cart__footer .mini-cart__view {
	height: 44px;
	margin-top: 8px;
	border: 1px solid #a5a5a5;
	background: #ffffff;
	color: #90288e;
	text-transform: none;
}

.mini-cart__footer .mini-cart__view:hover,
.mini-cart__footer .mini-cart__view:focus {
	border-color: #90288e;
	background: #ffffff;
	color: #90288e;
}

/* Movil (como el carrito, desde $grid-breakpoint-sm) y pantallas de menos de 800px de alto (tablet en horizontal,
   portatiles pequenos): pie mas compacto para que se vean mas productos. Botones en una fila ("Ver Cesta" |
   "Realizar Pedido", mas ancho), importes algo menores, tarjeta de envio mas ajustada e imagen de producto de 64px. */
@media only screen and (max-width: 767px), only screen and (max-height: 799px) {
	.mini-cart .fila {
		grid-template-columns: 64px minmax(0, 1fr) auto auto 28px;
	}

	.mini-cart__img .foto,
	.mini-cart__img img {
		width: 64px;
		height: 64px;
	}

	.mini-cart__footer {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
		column-gap: 8px;
	}

	.mini-cart__totals {
		grid-column: 1 / -1;
	}

	.mini-cart__subtotal,
	.mini-cart__shipping-row,
	.mini-cart__row {
		font-size: 13px;
		line-height: 18px;
	}

	.mini-cart__subtotal strong,
	.mini-cart__shipping-row strong,
	.mini-cart__row strong {
		font-size: 13px;
	}

	.mini-cart__subtotal {
		padding: 6px 0;
	}

	.mini-cart__shipping {
		padding: 6px 0 8px;
	}

	.mini-cart__row--ot_total {
		margin-top: 4px;
		padding: 6px 0 8px;
		font-size: 15px;
	}

	.mini-cart__row--ot_total strong {
		font-size: 20px;
		line-height: 24px;
	}

	.mini-cart__promo {
		margin-top: 6px;
		padding: 8px 10px;
	}

	.mini-cart__promo-text {
		font-size: 13px;
	}

	.mini-cart__progress {
		height: 4px;
		margin-top: 6px;
	}

	.mini-cart__promo-goal {
		margin-top: 4px;
	}

	.mini-cart__note {
		margin-top: 6px;
	}

	.mini-cart__checkout,
	.mini-cart__footer .mini-cart__view {
		grid-row: 2;
		height: 44px;
		margin-top: 0;
	}

	.mini-cart__checkout {
		grid-column: 2;
	}

	.mini-cart__footer .mini-cart__view {
		grid-column: 1;
	}
}