/**
 * MLC Toolkit — Barra de categorías, panel de filtros y chips
 * ---------------------------------------------------------------------------
 * El maquetado de referencia era una columna de 211 px con todo en absoluto.
 * Aquí se reconstruye como una columna fluida que también funciona en
 * horizontal (barra superior) y que en móvil se colapsa tras un botón.
 */

/* ==========================================================================
   Barra de categorías
   ========================================================================== */
.mlc-catbar {
	font-family: var(--mlc-font-family) !important;
	color: var(--mlc-color-text) !important;
}

.mlc-catbar__title {
	margin: 0 0 var(--mlc-space-md) !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-catbar__list {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: var(--mlc-space-md) var(--mlc-space-lg) !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.mlc-catbar__link {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	font-weight: var(--mlc-fw-semibold) !important;
	font-size: var(--mlc-fs-base) !important;
	line-height: 1.3 !important;
	color: var(--mlc-color-text) !important;
	text-decoration: none !important;
	transition: color var(--mlc-transition) !important;
}

.mlc-catbar__link:hover,
.mlc-catbar__link.is-active,
.mlc-catbar__sublink:hover,
.mlc-catbar__sublink.is-active {
	color: var(--mlc-color-accent) !important;
}

.mlc-catbar__link--all {
	color: var(--mlc-color-accent) !important;
}

.mlc-catbar__count {
	font-weight: var(--mlc-fw-regular) !important;
	font-size: var(--mlc-fs-tag) !important;
	color: var(--mlc-color-text-soft) !important;
}

.mlc-catbar__sublist {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: var(--mlc-space-sm) var(--mlc-space-md) !important;
	margin: var(--mlc-space-sm) 0 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.mlc-catbar__sublink {
	font-weight: var(--mlc-fw-bold) !important;
	font-size: 14px !important;
	color: var(--mlc-color-text) !important;
	text-decoration: none !important;
}

/* Variante vertical: la de la referencia. */
.mlc-catbar--vertical .mlc-catbar__list {
	flex-direction: column !important;
	gap: 22px !important;
}

.mlc-catbar--vertical .mlc-catbar__sublist {
	flex-direction: column !important;
	gap: 12px !important;
	margin-top: 12px !important;
	padding-left: 16px !important;
	border-left: 1px solid #eee !important;
}

/* En móvil la barra horizontal se desplaza en horizontal en vez de romperse. */
@media (max-width: 600px) {
	.mlc-catbar--horizontal .mlc-catbar__list {
		flex-wrap: nowrap !important;
		overflow-x: auto !important;
		gap: var(--mlc-space-md) !important;
		padding-bottom: var(--mlc-space-sm) !important;
		scrollbar-width: thin !important;
	}

	.mlc-catbar--horizontal .mlc-catbar__link {
		white-space: nowrap !important;
	}

	.mlc-catbar--horizontal .mlc-catbar__sublist {
		display: none !important;
	}
}

/* ==========================================================================
   Panel de filtros
   ========================================================================== */
.mlc-filters {
	font-family: var(--mlc-font-family) !important;
	color: var(--mlc-color-text) !important;
}

.mlc-filters__header {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 10px !important;
	margin-bottom: var(--mlc-space-lg) !important;
}

.mlc-filters__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-filters__clear {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	color: var(--mlc-color-text-soft) !important;
	font-family: inherit !important;
	font-weight: var(--mlc-fw-bold) !important;
	font-size: 17px !important;
	cursor: pointer !important;
	transition: color var(--mlc-transition) !important;
}

/* `hidden` tiene que ganar al `display` de arriba. */
.mlc-filters__clear[hidden] {
	display: none !important;
}

.mlc-filters__clear:hover {
	color: var(--mlc-color-text) !important;
}

/* Botón de despliegue, solo visible en móvil. */
.mlc-filters__toggle {
	display: none !important;
	align-items: center !important;
	gap: 8px !important;
	width: 100% !important;
	padding: 12px 16px !important;
	margin-bottom: var(--mlc-space-md) !important;
	border: 1px solid var(--mlc-color-border) !important;
	background-color: var(--mlc-color-white) !important;
	color: var(--mlc-color-text) !important;
	font-family: inherit !important;
	font-weight: var(--mlc-fw-bold) !important;
	font-size: var(--mlc-fs-small) !important;
	cursor: pointer !important;
}

.mlc-filters__block {
	padding-bottom: var(--mlc-space-lg) !important;
	margin-bottom: var(--mlc-space-lg) !important;
	border-bottom: 1px solid var(--mlc-color-line) !important;
}

.mlc-filters__block--last,
.mlc-filters__block:last-of-type {
	border-bottom: 0 !important;
	margin-bottom: var(--mlc-space-md) !important;
}

.mlc-filters__label {
	margin: 0 0 var(--mlc-space-md) !important;
	font-weight: var(--mlc-fw-semibold) !important;
	font-size: var(--mlc-fs-small) !important;
	line-height: 1.5 !important;
	letter-spacing: 0.3px !important;
	text-transform: uppercase !important;
	color: var(--mlc-color-text) !important;
}

.mlc-filters__all {
	display: inline-block !important;
	margin-bottom: var(--mlc-space-md) !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	color: var(--mlc-color-accent) !important;
	font-family: inherit !important;
	font-weight: var(--mlc-fw-semibold) !important;
	font-size: var(--mlc-fs-base) !important;
	cursor: pointer !important;
}

.mlc-filters__cats,
.mlc-filters__subcats {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.mlc-filters__cats > li + li {
	margin-top: 14px !important;
}

.mlc-filters__subcats {
	margin: 12px 0 0 !important;
	padding-left: 16px !important;
	border-left: 1px solid #eee !important;
}

.mlc-filters__subcats > li + li {
	margin-top: 10px !important;
}

.mlc-filters__cat {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	cursor: pointer !important;
	font-weight: var(--mlc-fw-semibold) !important;
	font-size: var(--mlc-fs-base) !important;
	line-height: 1.27 !important;
	color: var(--mlc-color-text) !important;
	transition: color var(--mlc-transition) !important;
}

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

.mlc-filters__cat--child {
	font-weight: var(--mlc-fw-bold) !important;
}

.mlc-filters__cat-name {
	flex: 1 1 auto !important;
	min-width: 0 !important;
}

.mlc-filters__count {
	flex: 0 0 auto !important;
	font-weight: var(--mlc-fw-regular) !important;
	font-size: var(--mlc-fs-tag) !important;
	color: var(--mlc-color-text-soft) !important;
}

.mlc-filters__colors {
	gap: var(--mlc-swatch-gap) !important;
}

.mlc-filters__order {
	width: 100% !important;
	max-width: 260px !important;
	padding: 8px 10px !important;
	border: 1px solid var(--mlc-color-border) !important;
	background-color: var(--mlc-color-white) !important;
	font-family: inherit !important;
	font-size: var(--mlc-fs-small) !important;
	color: var(--mlc-color-text) !important;
}

.mlc-filters__total {
	margin: 0 !important;
	font-weight: var(--mlc-fw-bold) !important;
	font-size: var(--mlc-fs-tag) !important;
	color: var(--mlc-color-text-soft) !important;
}

/* --------------------------------------------------------------------------
   Rango de precio con dos pulgares
   -------------------------------------------------------------------------- */
.mlc-range {
	position: relative !important;
	height: 20px !important;
	margin-bottom: var(--mlc-space-md) !important;
}

.mlc-range__track {
	position: absolute !important;
	top: 8px !important;
	left: 0 !important;
	right: 0 !important;
	height: 4px !important;
	border-radius: 16px !important;
	background-color: var(--mlc-color-line) !important;
}

.mlc-range__fill {
	position: absolute !important;
	top: 0 !important;
	bottom: 0 !important;
	border-radius: 16px !important;
	background-color: var(--mlc-color-accent) !important;
}

/* Los dos <input type="range"> se superponen; solo el pulgar recibe eventos. */
.mlc-range__input {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 20px !important;
	margin: 0 !important;
	padding: 0 !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	/* Hello Elementor pone borde y radio a todos los input: aquí sobran, el
	   carril lo dibuja .mlc-range__track. */
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	pointer-events: none !important;
}

.mlc-range__input:focus-visible {
	outline: none !important;
}

.mlc-range__input::-webkit-slider-thumb {
	-webkit-appearance: none !important;
	pointer-events: auto !important;
	width: 20px !important;
	height: 20px !important;
	border-radius: 50% !important;
	border: 7px solid var(--mlc-color-white) !important;
	background-color: var(--mlc-color-accent) !important;
	box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.15) !important;
	cursor: pointer !important;
}

.mlc-range__input::-moz-range-thumb {
	pointer-events: auto !important;
	width: 20px !important;
	height: 20px !important;
	border-radius: 50% !important;
	border: 7px solid var(--mlc-color-white) !important;
	background-color: var(--mlc-color-accent) !important;
	box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.15) !important;
	cursor: pointer !important;
}

.mlc-range__input:focus-visible::-webkit-slider-thumb {
	outline: 2px solid var(--mlc-color-text) !important;
	outline-offset: 2px !important;
}

.mlc-range__footer {
	display: flex !important;
	align-items: center !important;
	gap: var(--mlc-space-md) !important;
	flex-wrap: wrap !important;
}

.mlc-range__apply {
	padding: 5px 12px !important;
	border: 0 !important;
	background-color: var(--mlc-color-text) !important;
	color: var(--mlc-color-white) !important;
	font-family: inherit !important;
	font-weight: var(--mlc-fw-bold) !important;
	font-size: var(--mlc-fs-tag) !important;
	cursor: pointer !important;
	transition: opacity var(--mlc-transition) !important;
}

/* Mismo hover que `.mlc-btn`. El color se fija porque el reset del tema
   cambia el de los botones al pasar por encima. */
.mlc-range__apply:hover,
.mlc-range__apply:focus-visible {
	opacity: 0.85 !important;
	background-color: var(--mlc-color-text) !important;
	color: var(--mlc-color-white) !important;
}

.mlc-range__text {
	margin: 0 !important;
	font-weight: var(--mlc-fw-bold) !important;
	font-size: var(--mlc-fs-tag) !important;
	color: var(--mlc-color-text) !important;
}

/* ==========================================================================
   Chips de filtros activos
   ========================================================================== */
.mlc-chips {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: var(--mlc-space-sm) var(--mlc-space-md) !important;
	margin-bottom: var(--mlc-space-lg) !important;
	font-family: var(--mlc-font-family) !important;
}

.mlc-chips.is-empty {
	display: none !important;
}

.mlc-chips__label {
	font-weight: var(--mlc-fw-semibold) !important;
	font-size: var(--mlc-fs-small) !important;
	letter-spacing: 0.3px !important;
	text-transform: uppercase !important;
	color: var(--mlc-color-text) !important;
}

.mlc-chips__list {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: var(--mlc-space-sm) !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.mlc-chip {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	height: 24px !important;
	padding: 0 10px !important;
	border: 0 !important;
	background-color: var(--mlc-color-accent) !important;
	color: var(--mlc-color-white) !important;
	font-family: inherit !important;
	font-weight: var(--mlc-fw-bold) !important;
	font-size: var(--mlc-fs-tag) !important;
	line-height: 1 !important;
	cursor: pointer !important;
	transition: background-color var(--mlc-transition) !important;
}

.mlc-chip:hover {
	background-color: var(--mlc-color-text) !important;
}

.mlc-chips__clear {
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	color: var(--mlc-color-text-soft) !important;
	font-family: inherit !important;
	font-weight: var(--mlc-fw-bold) !important;
	font-size: var(--mlc-fs-tag) !important;
	text-decoration: underline !important;
	cursor: pointer !important;
}

.mlc-chips__clear:hover {
	color: var(--mlc-color-text) !important;
}

/* ==========================================================================
   Móvil: el panel se colapsa
   ========================================================================== */
@media (max-width: 900px) {
	.mlc-filters__toggle {
		display: flex !important;
	}

	.mlc-filters__body {
		display: none !important;
	}

	.mlc-filters.is-open .mlc-filters__body {
		display: block !important;
		padding: var(--mlc-space-md) !important;
		border: 1px solid var(--mlc-color-border) !important;
		background-color: var(--mlc-color-white) !important;
	}

	.mlc-filters__header {
		flex-direction: row !important;
		align-items: center !important;
		justify-content: space-between !important;
	}
}

/* ==========================================================================
   Móvil y tablet: botón flotante y hoja de filtros
   --------------------------------------------------------------------------
   Hasta 1024 px la columna lateral (barra de categorías vertical y panel de
   filtros) se oculta y la sustituye un botón flotante centrado abajo. El JS
   mueve esos mismos nodos a la hoja al abrirla. En escritorio no existe nada
   de esto.
   ========================================================================== */
.mlc-ffab,
.mlc-fsheet-root {
	display: none !important;
}

/* Bloqueo del scroll del fondo (también lo declara el mini-carrito). */
.mlc-no-scroll {
	overflow: hidden !important;
}

@media (max-width: 1024px) {
	.mlc-catbar--vertical[data-mlc-catbar],
	[data-mlc-filters] {
		display: none !important;
	}

	.mlc-fsheet .mlc-catbar--vertical[data-mlc-catbar],
	.mlc-fsheet [data-mlc-filters] {
		display: block !important;
	}

	/* Dentro de la hoja no hace falta el desplegable antiguo del panel. */
	.mlc-fsheet .mlc-filters__toggle {
		display: none !important;
	}

	.mlc-fsheet .mlc-filters__body {
		display: block !important;
	}

	.mlc-fsheet-root {
		display: block !important;
	}

	/* ---------------------------------------------------------------------
	   Botón flotante: centrado abajo. El WhatsApp (Joinchat) va en la
	   esquina derecha y el carrito en el header: no se pisan.
	   --------------------------------------------------------------------- */
	.mlc-ffab {
		position: fixed !important;
		left: 50% !important;
		bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
		z-index: calc(var(--mlc-z-dropdown) - 100) !important;
		display: inline-flex !important;
		align-items: center !important;
		gap: 8px !important;
		margin: 0 !important;
		padding: 13px 22px !important;
		border: 0 !important;
		border-radius: var(--mlc-radius-pill) !important;
		background-color: var(--mlc-color-accent) !important;
		box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22) !important;
		color: var(--mlc-color-white) !important;
		font-family: var(--mlc-font-family) !important;
		font-weight: var(--mlc-fw-semibold) !important;
		font-size: 15px !important;
		line-height: 1 !important;
		letter-spacing: 0.2px !important;
		white-space: nowrap !important;
		cursor: pointer !important;
		transform: translateX(-50%) !important;
		transition: box-shadow var(--mlc-transition) !important;
	}

	.mlc-ffab:hover,
	.mlc-ffab:focus-visible {
		background-color: var(--mlc-color-accent) !important;
		box-shadow: 0 8px 26px rgba(0, 0, 0, 0.3) !important;
		color: var(--mlc-color-white) !important;
	}

	.mlc-ffab:focus-visible {
		outline: 2px solid var(--mlc-color-text) !important;
		outline-offset: 3px !important;
	}

	.mlc-ffab svg {
		display: block !important;
		flex: 0 0 auto !important;
	}

	.mlc-ffab__count {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		min-width: 20px !important;
		height: 20px !important;
		padding: 0 6px !important;
		border-radius: var(--mlc-radius-pill) !important;
		background-color: var(--mlc-color-white) !important;
		color: var(--mlc-color-accent) !important;
		font-weight: var(--mlc-fw-bold) !important;
		font-size: 12px !important;
		line-height: 1 !important;
	}

	.mlc-ffab__count[hidden] {
		display: none !important;
	}

	/* ---------------------------------------------------------------------
	   Hoja emergente
	   --------------------------------------------------------------------- */
	.mlc-fsheet__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-fsheet {
		position: fixed !important;
		right: 0 !important;
		bottom: 0 !important;
		left: 0 !important;
		z-index: var(--mlc-z-panel) !important;
		display: flex !important;
		flex-direction: column !important;
		max-height: 85vh !important;
		max-height: 85dvh !important;
		border-radius: 16px 16px 0 0 !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: translateY(100%) !important;
		transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
	}

	.mlc-fsheet-root.is-open .mlc-fsheet__overlay {
		opacity: 1 !important;
	}

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

	.mlc-fsheet[hidden],
	.mlc-fsheet__overlay[hidden] {
		display: none !important;
	}

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

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

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

	.mlc-fsheet__close:hover {
		background: none !important;
		color: var(--mlc-color-accent) !important;
	}

	.mlc-fsheet__body {
		flex: 1 1 auto !important;
		min-height: 0 !important;
		padding: 20px !important;
		overflow-y: auto !important;
		overscroll-behavior: contain !important;
		-webkit-overflow-scrolling: touch !important;
	}

	.mlc-fsheet__body > * + * {
		margin-top: var(--mlc-space-lg) !important;
	}
}

@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
	.mlc-fsheet,
	.mlc-fsheet__overlay,
	.mlc-ffab {
		transition: none !important;
	}
}