/* ============================================================
   prd_listado_v2.css
   Basado en prd_listado.css — cambios marcados con [v2]
   ============================================================ */

/* ── Filter box ─────────────────────────────────────────────── */
.filter-box {
	margin-bottom: 25px;
}
.filter-box .title-filter-box {
	margin-bottom: 10px;
}
.filter-box .title-filter-box h3 {
	font-weight: bold;
	font-size: 14px;
	color: #000;
	position: relative;
	width: 100%;
	margin-bottom: -3px;
}
.filter-box .title-filter-box h3 + span {
	width: 50px;
	height: 3px;
	background: #F9423A;
	display: inline-block;
}
.cursor-pointer {
	cursor: pointer;
}

/* ── content-filter-box ─────────────────────────────────────── */
/* [v2] Quitado max-height: 200px — el sidebar maneja su propio scroll */
.content-filter-box {
	overflow-x: hidden;
	overflow-y: visible; /* [v2] era auto con max-height 200px */
	/* padding-right: 25px; */
	transition: max-height 0.2s ease-in-out;
}

/* [v2] Scrollbar del sidebar lo maneja #sidebar-desktop — estos quedan como fallback */
.content-filter-box::-webkit-scrollbar {
	width: 7px;
	cursor: pointer;
}
.content-filter-box::-webkit-scrollbar-track {
	background: #696158;
	border-left: 3px solid white;
	border-right: 3px solid white;
	cursor: pointer;
}
.content-filter-box::-webkit-scrollbar-thumb {
	background: #696158;
	border-radius: 5px;
	cursor: pointer;
}

/* Categorías */
.content-filter-box.categories-container {
	max-height: none !important; /* [v2] era 300px */
}
.content-filter-box.categories-container ul {
	padding-left: 20px;
}
.content-filter-box.categories-container ul li {
	list-style: none;
}
.content-filter-box.categories-container ul li a {
	width: 90%;
	display: inline-block;
	margin-right: -4px;
}
.content-filter-box.categories-container ul li span {
	cursor: pointer;
	transition: all 0.1s ease-out;
	position: relative;
	width: 9%;
	display: inline-block;
	margin-right: -4px;
}
.content-filter-box .categories-link {
	border-left: 2.5px solid white;
	padding-left: 2px;
	transition: all 0.1s ease-out;
}
.content-filter-box .categories-link:hover {
	color: #F9423A !important;
}
.content-filter-box .categories-link.active {
	border-left: 3px solid #F9423A;
}
.content-filter-box.categories-container ul li span:after {
	content: "";
}
.content-filter-box.categories-container ul li span[aria-expanded="false"]:after {
	content: "+";
}
.content-filter-box.categories-container ul li span[aria-expanded="true"]:after {
	content: "-";
}

/* [v2] Marcas y características — sin scroll propio, el sidebar hace scroll */
.content-filter-box.brands-container,
.content-filter-box.caracteristicas-container {
	overflow-y: visible !important; /* [v2] era scroll */
	max-height: none !important;    /* [v2] nuevo */
}

/* ── Acordeón ───────────────────────────────────────────────── */
.title-filter-box {
	cursor: pointer;
}
.title-filter-box h3 {
	color: #696158 !important;
}
.title-filter-box .btn-accordeon {
	position: relative;
	float: right;
	top: -18px;
	right: 7%;
	cursor: pointer;
	width: 30px;
	text-align: center;
}
.title-filter-box .btn-accordeon:before {
	content: "–";
	font-weight: bold;
	font-size: 20px;
}
.title-filter-box .btn-accordeon.closed:before {
	content: "+";
}
/* [v2] acordeón cerrado — max-height 0 sigue funcionando con transition */
.content-filter-box.accordeon-closed {
	max-height: 0 !important;
	overflow: hidden !important;
}

/* ── Sidebar desktop — sticky con scroll propio ─────────────── */
/* [v2] NUEVO: el sidebar completo es el contenedor con scroll  */
#sidebar-desktop {
	position: sticky;
	top: 0;
	height: 100vh;
	overflow-y: auto;
	overflow-x: hidden;
	border-right: 1px solid #e8e8e8;
	padding-bottom: 2rem;
}
#sidebar-desktop::-webkit-scrollbar       { width: 4px; }
#sidebar-desktop::-webkit-scrollbar-track  { background: transparent; }
#sidebar-desktop::-webkit-scrollbar-thumb  { background: #ccc; border-radius: 4px; }
#sidebar-desktop::-webkit-scrollbar-thumb:hover { background: #aaa; }

/* ── Overlay de carga al aplicar filtros ────────────────────── */
/* [v2] NUEVO */
#filter-loading-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(255, 255, 255, .5);
	z-index: 9999;
	align-items: center;
	justify-content: center;
}
#filter-loading-overlay.active {
	display: flex;
}
#filter-loading-spinner {
	width: 44px;
	height: 44px;
	border: 4px solid #e0e0e0;
	border-top-color: var(--rojo-feram, #F9423A);
	border-radius: 50%;
	animation: prd-spin .7s linear infinite;
}
@keyframes prd-spin { to { transform: rotate(360deg); } }

/* ── Productos ──────────────────────────────────────────────── */
.product-box {
	margin-top: 20px;
	font-size: 11px;
	padding-top: 15px;
	padding-bottom: 15px;
	border-right: 1px solid #dee2e6;
	border-bottom: 2px solid #fff;
}
.product-box:hover {
	border-bottom: 2px solid #F9423A;
	margin-top: 20px;
}
.product-box img {
	transition: opacity 0.3s;
}
.product-box .marca {
	z-index: 50;
}
.product-box .stars i {
	font-size: 10px;
	color: #E2E2E2;
	letter-spacing: -3px;
}
.product-box .stars i.active {
	color: #F2B411;
}

/* ── Paginador ──────────────────────────────────────────────── */
.paginador {
	margin-left: 5px;
	font-size: 12px;
	line-height: 28px;
}
.paginador .txt {
	line-height: 32px;
	padding-left: 30px;
}
.paginador nav a {
	float: left;
	width: 38px;
	height: 38px;
	line-height: 38px;
	text-align: center;
	background: #ECECEC;
	text-decoration: none;
	color: #6a6a6a;
	font-size: 12px;
	border-radius: 50%;
	margin-right: 7px;
}
.paginador nav a:hover {
	opacity: 0.7;
}
.paginador nav .select {
	background: #F9423A;
	color: #FFFFFF;
}
.paginador div {
	float: left;
}

/* ── Filtros seleccionados ──────────────────────────────────── */
.seleccion-container ul li:hover {
	background-color: #EBEBEB !important;
}
.borrar-filtros:hover {
	text-decoration: underline #E3E1E1 !important;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media screen and (min-width: 480px) and (max-width: 767px) {
	.product-box:nth-child(2n) {
		border-right: none;
	}
}
@media screen and (min-width: 768px) and (max-width: 991px) {
	.product-box:nth-child(3n) {
		border-right: none;
	}
	/* [v2] sidebar se deshabilita en móvil */
	#sidebar-desktop {
		position: static;
		height: auto;
		overflow: visible;
		border-right: none;
	}
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
	.product-box:nth-child(4n) {
		border-right: none;
	}
	.paginador nav {
		display: flex;
		justify-content: center;
		gap: 20px;
	}
}
@media screen and (min-width: 1200px) {
	.product-box:nth-child(4n) {
		border-right: none;
	}
}