/* Catálogo / archivo de categoría (MOCKUP-4) */

.catalog-layout {
	display: grid;
	gap: var(--space-5);
	grid-template-columns: 1fr;
	padding-block: var(--space-5);
}
@media (min-width: 1024px) {
	.catalog-layout { grid-template-columns: 280px 1fr; }
}

.catalog-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	margin-bottom: var(--space-4);
}

.filters-toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
}
@media (min-width: 1024px) {
	.filters-toggle { display: none; }
}

.filters-panel {
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-border-soft);
	border-radius: var(--radius-md);
	padding: var(--space-4);
}
@media (max-width: 1023px) {
	.filters-panel {
		position: fixed;
		inset: 0 20% 0 0;
		z-index: 51;
		border-radius: 0;
		transform: translateX(-100%);
		transition: transform var(--transition-fast);
		overflow-y: auto;
	}
	.filters-panel.is-open { transform: translateX(0); }
}

.filters-panel__heading { display: flex; align-items: center; gap: var(--space-2); }

.filters-panel__group { margin-bottom: var(--space-5); }
.filters-panel__title { font-size: 0.85rem; text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-3); }
.filters-panel__hint { font-size: 0.75rem; color: var(--color-text-muted); margin: calc(-1 * var(--space-2)) 0 var(--space-3); }
.filters-panel__option { display: flex; align-items: center; gap: var(--space-2); padding-block: var(--space-1); }

/* ---- Marcas: "Ver más" ---- */
.filters-panel__brands { display: flex; flex-direction: column; }
.js-filters-brand-extra { display: none; }
.filters-panel__brands.is-expanded .js-filters-brand-extra { display: flex; }
.filters-panel__show-more {
	align-self: flex-start;
	margin-top: var(--space-2);
	background: none;
	border: 0;
	color: var(--color-accent);
	font-size: 0.78rem;
	font-weight: 700;
	text-decoration: underline;
	padding: 0;
}

/* ---- Slider de doble rango (Precio, Peso) ---- */
.range-slider__label {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
	font-size: 0.8rem;
	color: var(--color-text);
	margin-bottom: var(--space-5);
}
.range-slider__label span { color: var(--color-accent); font-weight: 700; }
.range-slider__track {
	position: relative;
	height: 4px;
	background: var(--color-border-soft);
	border-radius: 999px;
}
.range-slider__fill {
	position: absolute;
	top: 0; bottom: 0;
	background: var(--color-accent);
	border-radius: 999px;
}
.range-slider__input {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	margin: 0;
	transform: translateY(-50%);
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	pointer-events: none;
}
.range-slider__input::-webkit-slider-runnable-track { -webkit-appearance: none; background: transparent; height: 4px; }
.range-slider__input::-moz-range-track { background: transparent; height: 4px; border: 0; }
.range-slider__input::-webkit-slider-thumb {
	-webkit-appearance: none;
	pointer-events: auto;
	width: 18px; height: 18px;
	border-radius: 50%;
	background: var(--color-accent);
	border: 2px solid #111;
	box-shadow: 0 0 0 1px var(--color-border-soft);
	cursor: pointer;
}
.range-slider__input::-moz-range-thumb {
	pointer-events: auto;
	width: 18px; height: 18px;
	border-radius: 50%;
	background: var(--color-accent);
	border: 2px solid #111;
	cursor: pointer;
}

/* ---- Nivel de juego: pills ---- */
.filters-panel__pills { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.filters-panel__pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-2) var(--space-4);
	border: 1px solid var(--color-border-soft);
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--color-text-muted);
	cursor: pointer;
	transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.filters-panel__pill:has(input:checked),
.filters-panel__pill.is-checked {
	background: var(--color-accent);
	color: #111;
	border-color: var(--color-accent);
}

/* ---- Forma de cabeza: botones con ícono ---- */
.filters-panel__icons { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.filters-panel__icon-option {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-2);
	border: 1px solid var(--color-border-soft);
	border-radius: var(--radius-sm);
	color: var(--color-text-muted);
	cursor: pointer;
	transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.filters-panel__icon-visual { width: 26px; height: 26px; }
.filters-panel__icon-visual svg { width: 100%; height: 100%; }
.filters-panel__icon-label { font-size: 0.65rem; text-transform: uppercase; font-weight: 700; text-align: center; }
.filters-panel__icon-option:has(input:checked),
.filters-panel__icon-option.is-checked {
	background: rgba(255, 212, 0, 0.08);
	border-color: var(--color-accent);
	color: var(--color-accent);
}

.orderby-select {
	background: var(--color-bg-elevated);
	color: var(--color-text);
	border: 1px solid var(--color-border-soft);
	border-radius: var(--radius-sm);
	padding: var(--space-2) var(--space-3);
	min-height: 44px;
}