/**
 * MLC Toolkit — Mini-carrito lateral e iconos de header
 */

/* ==========================================================================
   Iconos del header (carrito, favoritos, cuenta)
   ========================================================================== */
.mlc-header-action {
	display: inline-flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 4px !important;
	padding: 4px !important;
	border: 0 !important;
	background: none !important;
	color: var(--mlc-color-text) !important;
	font-family: var(--mlc-font-family) !important;
	font-weight: var(--mlc-fw-bold) !important;
	font-size: var(--mlc-fs-small) !important;
	line-height: 1 !important;
	text-decoration: none !important;
	cursor: pointer !important;
	transition: color var(--mlc-transition) !important;
}

.mlc-header-action:hover {
	color: var(--mlc-color-accent) !important;
}

.mlc-header-action__icon {
	position: relative !important;
	display: inline-flex !important;
}

.mlc-header-action__label {
	white-space: nowrap !important;
}

/* Contador sobre el icono. */
.mlc-cart-count,
.mlc-fav-count {
	position: absolute !important;
	top: -6px !important;
	right: -10px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 17px !important;
	height: 17px !important;
	padding: 0 4px !important;
	border-radius: var(--mlc-radius-pill) !important;
	background-color: var(--mlc-color-sale) !important;
	color: var(--mlc-color-white) !important;
	font-size: 10px !important;
	font-weight: var(--mlc-fw-bold) !important;
	line-height: 1 !important;
}

.mlc-cart-count.is-empty,
.mlc-fav-count.is-empty {
	display: none !important;
}

/* ==========================================================================
   Panel deslizante
   ========================================================================== */
.mlc-no-scroll {
	overflow: hidden !important;
}

.mlc-minicart__overlay {
	position: fixed !important;
	inset: 0 !important;
	z-index: var(--mlc-z-overlay) !important;
	background-color: var(--mlc-color-overlay) !important;
	opacity: 0 !important;
	transition: opacity var(--mlc-transition) !important;
}

.mlc-minicart-root.is-open .mlc-minicart__overlay {
	opacity: 1 !important;
}

.mlc-minicart {
	position: fixed !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	z-index: var(--mlc-z-panel) !important;
	display: flex !important;
	flex-direction: column !important;
	width: min(var(--mlc-minicart-width, 420px), 100vw) !important;
	background-color: var(--mlc-color-white) !important;
	box-shadow: var(--mlc-shadow-panel) !important;
	font-family: var(--mlc-font-family) !important;
	color: var(--mlc-color-text) !important;
	transform: translateX(100%) !important;
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.mlc-minicart-root.is-open .mlc-minicart {
	transform: translateX(0) !important;
}

/* El panel y el overlay se ocultan con el atributo `hidden`. Como aquí se
   declara `display`, hace falta la regla explícita: si no, el atributo deja de
   surtir efecto en cuanto todas las declaraciones llevan !important. */
.mlc-minicart[hidden],
.mlc-minicart__overlay[hidden] {
	display: none !important;
}

.mlc-minicart__header {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: var(--mlc-space-md) !important;
	padding: var(--mlc-space-lg) !important;
	border-bottom: 1px solid var(--mlc-color-line) !important;
}

.mlc-minicart__title {
	margin: 0 !important;
	font-weight: var(--mlc-fw-semibold) !important;
	font-size: 20px !important;
	line-height: 1 !important;
	letter-spacing: 0.3px !important;
	text-transform: uppercase !important;
}

.mlc-minicart__close {
	display: inline-flex !important;
	padding: 4px !important;
	border: 0 !important;
	background: none !important;
	color: var(--mlc-color-text) !important;
	cursor: pointer !important;
}

.mlc-minicart__close:hover {
	color: var(--mlc-color-sale) !important;
}

.mlc-minicart__body {
	position: relative !important;
	flex: 1 1 auto !important;
	display: flex !important;
	flex-direction: column !important;
	min-height: 0 !important;
	overflow-y: auto !important;
}

/* --------------------------------------------------------------------------
   Líneas de producto
   -------------------------------------------------------------------------- */
.mlc-minicart__list {
	flex: 1 1 auto !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.mlc-minicart__item {
	display: flex !important;
	gap: var(--mlc-space-md) !important;
	padding: var(--mlc-space-md) var(--mlc-space-lg) !important;
	border-bottom: 1px solid var(--mlc-color-line) !important;
}

/* Cambios hechos en el clic que el servidor aún no ha confirmado: la línea
   que se está añadiendo, la cantidad que se está cambiando y el subtotal,
   que solo sabe calcular el servidor. */
.mlc-minicart__item--pending,
.mlc-minicart__item.is-updating .mlc-minicart__price,
.mlc-minicart__footer.is-updating .mlc-minicart__subtotal {
	opacity: 0.55 !important;
	transition: opacity var(--mlc-transition) !important;
}

.mlc-minicart__media {
	flex: 0 0 72px !important;
	width: 72px !important;
}

.mlc-minicart__media img {
	display: block !important;
	width: 100% !important;
	aspect-ratio: 1 / 1 !important;
	object-fit: cover !important;
}

.mlc-minicart__info {
	display: flex !important;
	flex-direction: column !important;
	gap: 6px !important;
	flex: 1 1 auto !important;
	min-width: 0 !important;
}

.mlc-minicart__name {
	margin: 0 !important;
	font-weight: var(--mlc-fw-semibold) !important;
	font-size: 14px !important;
	line-height: 1.3 !important;
}

.mlc-minicart__name a {
	color: var(--mlc-color-text) !important;
	text-decoration: none !important;
}

.mlc-minicart__name a:hover {
	color: var(--mlc-color-accent) !important;
}

.mlc-minicart__variation {
	font-size: 12px !important;
	color: var(--mlc-color-text-soft) !important;
}

.mlc-minicart__variation p {
	margin: 0 !important;
}

.mlc-minicart__price {
	margin: 0 !important;
	font-weight: var(--mlc-fw-bold) !important;
	font-size: 14px !important;
	color: var(--mlc-color-text) !important;
}

.mlc-minicart__controls {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: var(--mlc-space-sm) !important;
	margin-top: 2px !important;
}

/* Selector de cantidad. */
.mlc-qty {
	display: inline-flex !important;
	align-items: center !important;
	border: 1px solid var(--mlc-color-border) !important;
}

.mlc-qty__btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 28px !important;
	height: 28px !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	color: var(--mlc-color-text) !important;
	cursor: pointer !important;
}

.mlc-qty__btn:hover {
	color: var(--mlc-color-accent) !important;
}

.mlc-qty__input {
	width: 40px !important;
	height: 28px !important;
	padding: 0 !important;
	border: 0 !important;
	border-inline: 1px solid var(--mlc-color-border) !important;
	background: none !important;
	text-align: center !important;
	font-family: inherit !important;
	font-weight: var(--mlc-fw-bold) !important;
	font-size: 13px !important;
	color: var(--mlc-color-text) !important;
	appearance: textfield !important;
	-moz-appearance: textfield !important;
}

.mlc-qty__input::-webkit-outer-spin-button,
.mlc-qty__input::-webkit-inner-spin-button {
	-webkit-appearance: none !important;
	margin: 0 !important;
}

.mlc-minicart__remove {
	display: inline-flex !important;
	padding: 4px !important;
	border: 0 !important;
	background: none !important;
	color: var(--mlc-color-text-soft) !important;
	cursor: pointer !important;
	transition: color var(--mlc-transition) !important;
}

.mlc-minicart__remove:hover {
	color: var(--mlc-color-sale) !important;
}

/* --------------------------------------------------------------------------
   Pie con subtotal y botones
   -------------------------------------------------------------------------- */
.mlc-minicart__footer {
	position: sticky !important;
	bottom: 0 !important;
	padding: var(--mlc-space-lg) !important;
	border-top: 1px solid var(--mlc-color-line) !important;
	background-color: var(--mlc-color-white) !important;
}

.mlc-minicart__subtotal {
	display: flex !important;
	align-items: baseline !important;
	justify-content: space-between !important;
	gap: var(--mlc-space-md) !important;
	margin-bottom: var(--mlc-space-md) !important;
	font-weight: var(--mlc-fw-semibold) !important;
	font-size: var(--mlc-fs-base) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.3px !important;
}

.mlc-minicart__subtotal strong {
	font-weight: var(--mlc-fw-bold) !important;
	font-size: 18px !important;
}

.mlc-minicart__actions {
	display: flex !important;
	flex-direction: column !important;
	gap: var(--mlc-space-sm) !important;
}

.mlc-minicart__empty {
	flex: 1 1 auto !important;
	background: none !important;
}

@media (max-width: 600px) {
	.mlc-minicart {
		width: 100vw !important;
	}

	.mlc-header-action__label {
		display: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mlc-minicart,
	.mlc-minicart__overlay {
		transition: none !important;
	}
}