#mpf-ajax-filter-bar {
    --mpf-azul: var(--azul, #4fb8e0);
    --mpf-azul-suave: var(--azul-suave, #8fdcf5);
    --mpf-bg: var(--bg-tarjeta, #1b1b20);
    --mpf-bg-sec: var(--bg-secundario, #16161a);
    --mpf-borde: var(--borde, #2a2a30);
    --mpf-texto: var(--texto-principal, #f2f2f2);
    --mpf-texto-sec: var(--texto-secundario, #a0a0a8);

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    font-family: 'Poppins', 'Segoe UI', sans-serif;
    margin-bottom: 18px;
    position: relative;
    z-index: 10;
}

.mpf-bar-item {
    position: relative;
    z-index: 1;
}

/* El item abierto (con su panel desplegado) debe quedar SIEMPRE por encima
   de los demás botones, sin importar el orden en pantalla. Esto evita que
   en mobile, cuando los botones se acomodan en varias filas, el panel
   abierto quede tapado por otro botón de una fila siguiente. */
.mpf-bar-item.mpf-open {
    z-index: 50;
}

/* El contenedor de atributos dinámicos no debe romper el layout de fila:
   con display:contents, sus hijos (Color, Talla, etc.) se comportan como
   si fueran hermanos directos de #mpf-ajax-filter-bar */
.mpf-attr-container {
    display: contents;
}

.mpf-bar-toggle {
    background-color: var(--mpf-bg);
    color: var(--mpf-texto);
    border: 1px solid var(--mpf-borde);
    border-radius: 30px;
    padding: 9px 18px;
    font-weight: 600;
    font-size: 0.9em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: border-color 0.25s ease;
    position: relative;
}

.mpf-bar-item.mpf-open .mpf-bar-toggle,
.mpf-bar-toggle:hover {
    border-color: var(--mpf-azul);
}

.mpf-bar-arrow {
    color: var(--mpf-azul);
    font-size: 0.8em;
    transition: transform 0.25s ease;
}

.mpf-bar-item.mpf-open .mpf-bar-arrow {
    transform: rotate(180deg);
}

.mpf-bar-count {
    background-color: var(--mpf-azul);
    color: #0d0d0f;
    border-radius: 50%;
    font-size: 0.75em;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.mpf-bar-panel {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background-color: var(--mpf-bg-sec);
    border: 1px solid var(--mpf-borde);
    border-radius: 12px;
    padding: 18px;
    min-width: 240px;
    max-width: 90vw;
    box-shadow: 0 10px 30px rgba(0,0,0,0.55);
    z-index: 60;
}

.mpf-bar-item.mpf-open .mpf-bar-panel {
    display: block;
}

/* --- Slider de precio: rediseñado para verse limpio, sin el "riel"
   blanco por defecto del navegador asomando detrás --- */
.mpf-price-panel {
    min-width: 260px;
}

.mpf-slider-wrap {
    position: relative;
    height: 20px;
    margin: 14px 4px 18px;
}

.mpf-slider-track {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 4px;
    background-color: var(--mpf-borde);
    border-radius: 4px;
    transform: translateY(-50%);
    pointer-events: none;
}

.mpf-slider-range {
    position: absolute;
    top: 50%;
    height: 4px;
    background: linear-gradient(90deg, var(--mpf-azul), var(--mpf-azul-suave));
    border-radius: 4px;
    transform: translateY(-50%);
    pointer-events: none;
}

.mpf-range {
    -webkit-appearance: none !important;
    appearance: none !important;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 20px;
    transform: translateY(-50%);
    background: transparent !important;
    background-image: none !important;
    outline: none;
    box-shadow: none !important;
    border: none !important;
    margin: 0;
    padding: 0;
    pointer-events: none;
}

/* Ocultar por completo el "riel" nativo del navegador (Chrome/Safari/iOS) */
.mpf-range::-webkit-slider-runnable-track {
    -webkit-appearance: none !important;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    height: 4px;
    box-shadow: none !important;
    border-radius: 0 !important;
}
/* Ocultar el riel nativo en Firefox */
.mpf-range::-moz-range-track {
    background: transparent !important;
    border: none !important;
    height: 4px;
    box-shadow: none !important;
}
.mpf-range::-moz-range-progress {
    background: transparent !important;
}
/* Safari en iOS a veces dibuja un "wrapper" adicional detrás del riel */
.mpf-range::-webkit-slider-container {
    background: transparent !important;
}

.mpf-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    pointer-events: auto;
    width: 18px;
    height: 18px;
    margin-top: 0;
    border-radius: 50%;
    background-color: var(--mpf-azul);
    border: 3px solid #0d0d0f;
    box-shadow: 0 2px 6px rgba(0,0,0,0.5);
    cursor: pointer;
}
.mpf-range::-moz-range-thumb {
    pointer-events: auto;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: var(--mpf-azul);
    border: 3px solid #0d0d0f;
    box-shadow: 0 2px 6px rgba(0,0,0,0.5);
    cursor: pointer;
}

.mpf-values {
    text-align: center;
    font-size: 0.9em;
    color: var(--mpf-texto);
    margin-bottom: 14px;
}
.mpf-values .mpf-min-label, .mpf-values .mpf-max-label {
    color: var(--mpf-azul);
    font-weight: 700;
}

.mpf-bar-apply, .mpf-clear-all {
    background: linear-gradient(135deg, var(--mpf-azul), var(--mpf-azul-suave));
    color: #0d0d0f;
    border: none;
    border-radius: 30px;
    padding: 8px 16px;
    font-weight: 700;
    font-size: 0.85em;
    cursor: pointer;
    width: 100%;
    transition: opacity 0.25s ease;
}
.mpf-bar-apply:hover {
    opacity: 0.88;
}

.mpf-clear-all {
    width: auto;
    background: transparent;
    color: var(--mpf-texto-sec);
    border: 1px solid var(--mpf-borde);
}
.mpf-clear-all:hover {
    color: var(--mpf-azul);
    border-color: var(--mpf-azul);
    opacity: 1;
}

.mpf-attr-panel {
    max-height: 280px;
    overflow-y: auto;
}
.mpf-attr-panel label.mpf-attr-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    color: var(--mpf-texto-sec);
    font-size: 0.88em;
    cursor: pointer;
}
.mpf-attr-panel label.mpf-attr-option:hover {
    color: var(--mpf-azul);
}
.mpf-attr-panel .mpf-attr-apply {
    margin-top: 10px;
}

.mpf-loading-indicator {
    color: var(--mpf-azul);
    font-size: 0.85em;
    font-style: italic;
}

.mpf-no-products {
    color: var(--mpf-texto, #f2f2f2);
    padding: 20px 0;
}

/* Paginación de resultados filtrados */
.mpf-pagination {
    margin-top: 20px;
    width: 100%;
}

.mpf-pagination ul.page-numbers {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
    background: none;
    border-radius: 0;
    width: auto;
}

.mpf-pagination ul.page-numbers li {
    list-style: none;
    margin: 0;
}

.mpf-pagination li .page-numbers,
.mpf-pagination button.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: 50%;
    background-color: var(--mpf-bg, #1b1b20);
    color: var(--mpf-texto, #f2f2f2);
    border: 1px solid var(--mpf-borde, #2a2a30);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

.mpf-pagination li .page-numbers.current,
.mpf-pagination li .page-numbers:hover {
    background-color: var(--mpf-azul, #4fb8e0);
    color: #0d0d0f;
    border-color: var(--mpf-azul, #4fb8e0);
}

/* --- Mobile: asegurar que el panel abierto tenga espacio y no se corte --- */
@media (max-width: 480px) {
    .mpf-bar-panel {
        min-width: 220px;
        left: 50%;
        transform: translateX(-50%);
    }
}