/* ============================================================================
   TopStore Filtros AJAX · estilos del panel, rejilla en carga, deslizable móvil
   ============================================================================ */

:root {
	--tsf-accent: #FF9E00;
	--tsf-accent-dark: #A15600;
	--tsf-ink: #1A1A1A;
	--tsf-muted: #7A828A;
	--tsf-line: #E6E6E6;
	--tsf-hover: #FFF6E6;
	--tsf-chip-bg: #FFF1D9;
	--tsf-chip-bd: #F0C68A;
	--tsf-chip-tx: #7A4300;
	--tsf-field-bd: #D2DAE2;
	--tsf-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--tsf-sticky-top: 24px;
}

/* ---------------------------------------------------------------------------
   Panel
   --------------------------------------------------------------------------- */
.tsf {
	font-size: 14px;
	line-height: 1.4;
	color: var(--tsf-ink);
	box-sizing: border-box;
}
.tsf *, .tsf *::before, .tsf *::after { box-sizing: inherit; }

/* El panel ocupa todo lo que necesite: sin alto máximo ni scroll propio, de
   modo que acompaña a la columna de productos hasta el último de la página. */
.tsf--sticky { position: static; }
.tsf--sticky.tsf--fits {
	position: sticky;
	top: var(--tsf-sticky-top);
}

.tsf__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 0 0 12px;
	margin: 0 0 6px;
	border-bottom: 2px solid var(--tsf-ink);
}
.tsf__title {
	margin: 0 !important;
	font-family: var(--tsf-mono) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: .14em !important;
	text-transform: uppercase !important;
	color: var(--tsf-accent-dark) !important;
	line-height: 1 !important;
}
.tsf__clear {
	appearance: none;
	background: none !important;
	border: 0 !important;
	padding: 4px 0 !important;
	margin: 0;
	font-family: var(--tsf-mono);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--tsf-muted) !important;
	text-decoration: underline;
	text-decoration-style: dotted;
	text-underline-offset: 3px;
	cursor: pointer;
	box-shadow: none !important;
	line-height: 1;
	min-height: 0;
}
.tsf__clear:hover { color: var(--tsf-accent-dark) !important; }

/* Etiquetas de filtros activos */
.tsf__chips {
	list-style: none !important;
	margin: 10px 0 4px !important;
	padding: 0 !important;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.tsf-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 !important;
	padding: 5px 6px 5px 11px;
	border-radius: 999px;
	background: var(--tsf-chip-bg);
	border: 1px solid var(--tsf-chip-bd);
	color: var(--tsf-chip-tx);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.2;
	max-width: 100%;
}
.tsf-chip__label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.tsf-chip__remove {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 18px;
	height: 18px;
	min-height: 0;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50%;
	background: rgba(122, 67, 0, .12) !important;
	color: inherit !important;
	cursor: pointer;
	transition: background .15s, color .15s;
	box-shadow: none !important;
}
.tsf-chip__remove:hover { background: var(--tsf-accent-dark) !important; color: #fff !important; }

/* Grupos */
.tsf__groups { display: block; }
.tsf-group {
	padding: 14px 0;
	border-bottom: 1px solid var(--tsf-line);
}
.tsf-group:last-child { border-bottom: 0; }
.tsf-group[hidden] { display: none !important; }

.tsf-group__toggle {
	appearance: none;
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	margin: 0;
	padding: 2px 0 !important;
	min-height: 0;
	background: none !important;
	border: 0 !important;
	border-radius: 0;
	box-shadow: none !important;
	color: var(--tsf-ink) !important;
	font-family: var(--tsf-mono);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-align: left;
	line-height: 1.3;
	cursor: pointer;
}
.tsf-group__toggle:hover { color: var(--tsf-accent-dark) !important; }
.tsf-group__name { flex: 1 1 auto; min-width: 0; }
.tsf-group__badge {
	flex: none;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--tsf-accent);
	color: #fff;
	font-family: var(--tsf-mono);
	font-size: 11px;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
	letter-spacing: 0;
}
.tsf-group__chevron {
	flex: none;
	color: var(--tsf-muted);
	transition: transform .2s ease;
}
.tsf-group.is-open .tsf-group__chevron { transform: rotate(180deg); }
.tsf-group__body { padding-top: 12px; }
.tsf-group__body[hidden] { display: none !important; }

/* Buscador dentro del grupo */
.tsf-search {
	position: relative;
	margin: 0 0 10px;
	color: var(--tsf-muted);
}
.tsf-search svg {
	position: absolute;
	left: 11px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
}
.tsf-search__input {
	width: 100% !important;
	height: 36px !important;
	padding: 0 10px 0 32px !important;
	border: 1px solid var(--tsf-field-bd) !important;
	border-radius: 8px !important;
	background: #fff !important;
	font-size: 13px !important;
	color: var(--tsf-ink) !important;
	box-shadow: none !important;
	outline: none;
}
.tsf-search__input:focus { border-color: var(--tsf-accent) !important; box-shadow: 0 0 0 3px rgba(255, 158, 0, .2) !important; }

/* Opciones */
.tsf-list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.tsf-opt { margin: 0 !important; padding: 0 !important; }
.tsf-opt.is-hidden,
.tsf-opt.is-search-hidden { display: none !important; }
.tsf-group:not(.is-expanded) .tsf-opt.is-extra { display: none !important; }

.tsf-opt__label {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 !important;
	padding: 7px 8px;
	border-radius: 7px;
	cursor: pointer;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.3;
	color: var(--tsf-ink);
	transition: background .15s ease;
	position: relative;
}
.tsf-opt__label:hover { background: var(--tsf-hover); }

.tsf-opt__input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	pointer-events: none;
}
.tsf-opt__box {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border: 1.5px solid #C9CFD6;
	border-radius: 5px;
	background: #fff;
	color: #fff;
	transition: background .15s, border-color .15s, box-shadow .15s;
}
.tsf-opt__box svg { opacity: 0; transform: scale(.6); transition: opacity .12s, transform .12s; }
.tsf-opt__input:checked + .tsf-opt__box { background: var(--tsf-accent); border-color: var(--tsf-accent); }
.tsf-opt__input:checked + .tsf-opt__box svg { opacity: 1; transform: scale(1); }
.tsf-opt__input:focus-visible + .tsf-opt__box { box-shadow: 0 0 0 3px rgba(255, 158, 0, .35); }
.tsf-opt__input:checked ~ .tsf-opt__text { font-weight: 600; }

.tsf-opt__text { flex: 1 1 auto; min-width: 0; }
.tsf-opt__count {
	flex: none;
	margin-left: auto;
	padding: 3px 7px;
	border-radius: 999px;
	background: #F3F4F6;
	color: var(--tsf-muted);
	font-family: var(--tsf-mono);
	font-size: 11.5px;
	font-weight: 500;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.tsf-opt.is-empty .tsf-opt__label { opacity: .45; cursor: not-allowed; }
.tsf-opt.is-empty .tsf-opt__label:hover { background: none; }

/* Estilo «chips» */
.tsf-list--chips { flex-direction: row; flex-wrap: wrap; gap: 8px; }
.tsf-list--chips .tsf-opt__label {
	gap: 6px;
	padding: 6px 12px;
	border: 1.5px solid var(--tsf-line);
	border-radius: 999px;
	background: #fff;
	font-size: 13px;
	transition: all .15s ease;
}
.tsf-list--chips .tsf-opt__label:hover { border-color: var(--tsf-accent); background: #fff; }
.tsf-list--chips .tsf-opt__box { display: none; }
.tsf-list--chips .tsf-opt__count { margin-left: 0; background: rgba(0, 0, 0, .06); }
.tsf-list--chips .tsf-opt__label:has(.tsf-opt__input:checked) {
	background: var(--tsf-accent-dark);
	border-color: var(--tsf-accent-dark);
	color: #fff;
}
.tsf-list--chips .tsf-opt__label:has(.tsf-opt__input:checked) .tsf-opt__count { background: rgba(255, 255, 255, .22); color: #fff; }
.tsf-list--chips .tsf-opt__label:has(.tsf-opt__input:focus-visible) { box-shadow: 0 0 0 3px rgba(255, 158, 0, .35); }

/* Ver más */
.tsf-more {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 8px 0 0;
	padding: 6px 8px !important;
	min-height: 0;
	background: none !important;
	border: 0 !important;
	border-radius: 6px;
	box-shadow: none !important;
	color: var(--tsf-accent-dark) !important;
	font-family: var(--tsf-mono);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	cursor: pointer;
}
.tsf-more::before { content: "+"; font-weight: 700; }
.tsf-more[aria-expanded="true"]::before { content: "−"; }
.tsf-more:hover { background: var(--tsf-hover) !important; }
.tsf-more[hidden] { display: none !important; }

/* Precio */
.tsf-price { --lo: 0%; --hi: 100%; }
.tsf-price__slider {
	position: relative;
	height: 28px;
	margin: 2px 9px 14px;
}
.tsf-price__track,
.tsf-price__fill {
	position: absolute;
	top: 50%;
	height: 4px;
	margin-top: -2px;
	border-radius: 2px;
}
.tsf-price__track { left: -9px; right: -9px; background: #E4E7EB; }
.tsf-price__fill { left: var(--lo); right: calc(100% - var(--hi)); background: var(--tsf-accent); }
.tsf-price__range {
	-webkit-appearance: none;
	appearance: none;
	position: absolute;
	left: -9px;
	top: 0;
	width: calc(100% + 18px);
	height: 28px;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	pointer-events: none;
	outline: none;
	box-shadow: none;
}
.tsf-price__range--max { z-index: 2; }
.tsf-price.is-hi .tsf-price__range--min { z-index: 3; }
.tsf-price__range::-webkit-slider-runnable-track { height: 28px; background: transparent; border: 0; }
.tsf-price__range::-moz-range-track { height: 28px; background: transparent; border: 0; }
.tsf-price__range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	pointer-events: auto;
	width: 20px;
	height: 20px;
	margin-top: 4px;
	border-radius: 50%;
	background: #fff;
	border: 2.5px solid var(--tsf-accent);
	box-shadow: 0 1px 4px rgba(0, 0, 0, .22);
	cursor: grab;
	transition: transform .12s;
}
.tsf-price__range::-moz-range-thumb {
	pointer-events: auto;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: #fff;
	border: 2.5px solid var(--tsf-accent);
	box-shadow: 0 1px 4px rgba(0, 0, 0, .22);
	cursor: grab;
}
.tsf-price__range:active::-webkit-slider-thumb { transform: scale(1.12); cursor: grabbing; }
.tsf-price__range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(255, 158, 0, .35); }
.tsf-price__range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(255, 158, 0, .35); }

.tsf-price__inputs { display: flex; align-items: center; gap: 8px; }
.tsf-price__field {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 4px;
	height: 38px;
	margin: 0 !important;
	padding: 0 10px;
	border: 1px solid var(--tsf-field-bd);
	border-radius: 8px;
	background: #fff;
	font-weight: 400;
	transition: border-color .15s, box-shadow .15s;
}
.tsf-price__field:focus-within { border-color: var(--tsf-accent); box-shadow: 0 0 0 3px rgba(255, 158, 0, .2); }
.tsf-price__cur { font-family: var(--tsf-mono); font-size: 12px; color: var(--tsf-muted); }
.tsf-price__input {
	flex: 1 1 auto;
	min-width: 0;
	width: 100% !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	outline: none !important;
	font-family: var(--tsf-mono);
	font-size: 14px !important;
	font-weight: 500;
	color: var(--tsf-ink) !important;
	text-align: right;
	font-variant-numeric: tabular-nums;
}
.tsf-price__sep { color: var(--tsf-muted); }
.tsf-price__input::selection { background: #E4E7EB; color: var(--tsf-ink); }
.tsf-price__input::-moz-selection { background: #E4E7EB; color: var(--tsf-ink); }

/* Botón aplicar (modo con botón) */
.tsf__actions { padding-top: 14px; }
.tsf__apply {
	width: 100%;
	height: 44px;
	border: 0 !important;
	border-radius: 999px;
	background: var(--tsf-accent) !important;
	color: #fff !important;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
	transition: opacity .15s, transform .15s;
}
.tsf__apply:hover { transform: translateY(-1px); }
.tsf__apply:disabled { opacity: .45; cursor: default; transform: none; }

/* El panel dentro del widget de Blocksy */
.tsf-widget { margin-bottom: 0 !important; }

/* ---------------------------------------------------------------------------
   Rejilla en carga
   --------------------------------------------------------------------------- */
ul.products.is-loading { position: relative; pointer-events: none; }
ul.products.is-loading > li { opacity: .35; transition: opacity .2s; }
ul.products.is-loading::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 110px;
	width: 40px;
	height: 40px;
	margin-left: -20px;
	border: 3px solid rgba(255, 158, 0, .25);
	border-top-color: var(--tsf-accent);
	border-radius: 50%;
	animation: tsf-spin .7s linear infinite;
	z-index: 5;
}
@keyframes tsf-spin { to { transform: rotate(360deg); } }
.tsf.is-loading .tsf__groups { opacity: .7; }

/* Estado vacío */
.tsf-empty {
	grid-column: 1 / -1 !important;
	width: 100% !important;
	list-style: none !important;
	text-align: center;
	padding: 52px 24px !important;
	margin: 0 !important;
	background: #FFF9EF;
	border: 1px dashed var(--tsf-chip-bd);
	border-radius: 18px;
	color: var(--tsf-ink);
}
.tsf-empty__icon { color: var(--tsf-accent-dark); margin-bottom: 10px; }
.tsf-empty__title { margin: 0 0 6px !important; font-size: 18px !important; font-weight: 700 !important; }
.tsf-empty__text { margin: 0 0 18px !important; color: var(--tsf-muted); }
.tsf-empty__clear {
	display: inline-flex;
	align-items: center;
	height: 42px;
	padding: 0 22px;
	border: 0 !important;
	border-radius: 999px;
	background: var(--tsf-accent) !important;
	color: #fff !important;
	font-weight: 700;
	cursor: pointer;
}

/* ---------------------------------------------------------------------------
   Móvil: botón flotante + panel deslizable
   --------------------------------------------------------------------------- */
.tsf-fab {
	position: fixed;
	left: 50%;
	bottom: 18px;
	transform: translateX(-50%);
	z-index: 9990;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 46px;
	padding: 0 20px !important;
	border: 0 !important;
	border-radius: 999px;
	background: var(--tsf-ink) !important;
	color: #fff !important;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .02em;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
	cursor: pointer;
	transition: transform .15s;
}
.tsf-fab:hover { transform: translateX(-50%) translateY(-2px); }
.tsf-fab[hidden] { display: none !important; }
.tsf-fab__n {
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--tsf-accent);
	color: #fff;
	font-size: 12px;
	line-height: 22px;
	text-align: center;
}
.tsf-fab__n[hidden] { display: none !important; }

.tsf-drawer { position: fixed; inset: 0; z-index: 100000; }
.tsf-drawer[hidden] { display: none !important; }
.tsf-drawer__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 18, 22, .55);
	opacity: 0;
	transition: opacity .25s ease;
}
.tsf-drawer__panel {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: min(92vw, 400px);
	display: flex;
	flex-direction: column;
	background: #fff;
	box-shadow: 0 0 40px rgba(0, 0, 0, .25);
	transform: translateX(-100%);
	transition: transform .25s ease;
	outline: none;
}
.tsf-drawer.is-open .tsf-drawer__backdrop { opacity: 1; }
.tsf-drawer.is-open .tsf-drawer__panel { transform: none; }

.tsf-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 18px;
	border-bottom: 1px solid var(--tsf-line);
}
.tsf-drawer__title {
	margin: 0 !important;
	font-family: var(--tsf-mono) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: .14em !important;
	text-transform: uppercase !important;
	color: var(--tsf-accent-dark) !important;
}
.tsf-drawer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	min-height: 0;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50%;
	background: #F3F4F6 !important;
	color: var(--tsf-ink) !important;
	cursor: pointer;
	box-shadow: none !important;
}
.tsf-drawer__body {
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 4px 18px 18px;
}
.tsf-drawer__body .tsf { position: static; max-height: none; overflow: visible; padding-right: 0; }
.tsf-drawer__body .tsf__head { border-bottom: 0; padding: 8px 0 0; justify-content: flex-end; margin: 0; }
.tsf-drawer__body .tsf__title { display: none; }
.tsf-drawer__foot {
	display: flex;
	gap: 10px;
	padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--tsf-line);
	background: #fff;
}
.tsf-drawer__clear {
	flex: 0 0 auto;
	height: 46px;
	padding: 0 16px !important;
	border: 1.5px solid var(--tsf-line) !important;
	border-radius: 999px;
	background: #fff !important;
	color: var(--tsf-ink) !important;
	font-weight: 600;
	cursor: pointer;
}
.tsf-drawer__apply {
	flex: 1 1 auto;
	height: 46px;
	border: 0 !important;
	border-radius: 999px;
	background: var(--tsf-accent) !important;
	color: #fff !important;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}
body.tsf-lock { overflow: hidden; }

@media (max-width: 999px) {
	.tsf--sticky { position: static; max-height: none; overflow: visible; padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.tsf *, .tsf-drawer *, .tsf-fab { transition: none !important; animation-duration: .01ms !important; }
}