/** ELIMINAR ESTILOS POR DEFECTO DE WOOCOMMERCE */
.products::before,
.products::after {
    display: none !important;
    content: none !important;
}


.products {
    margin: 0 !important;
    padding: 0 !important;
}

.products>li {
    margin: 0 !important;
}



/* Contenedor */
.products-wrapper .products {
    display: grid;
    gap: 25px;
}

@media(max-width: 991px) {
    .products-wrapper .products {
        gap: 20px;
    }
}

@media(max-width: 767px) {
    .products-wrapper .products {
        gap: 10px;
    }
}

/* ===== DESKTOP ===== */

/* Vista x5 */
.products-wrapper.cols-5 .products {
    grid-template-columns: repeat(5, 1fr);
}

/* Vista x2 */
.products-wrapper.cols-2 .products {
    grid-template-columns: repeat(2, 1fr);
}


/* ===== TABLET ===== */
@media(max-width: 1024px) {

    .products-wrapper.cols-5 .products {
        grid-template-columns: repeat(3, 1fr);
    }

    .products-wrapper.cols-2 .products {
        grid-template-columns: 1fr;
    }

}


/* ===== CELULAR ===== */
@media(max-width: 767px) {

    .products-wrapper.cols-5 .products {
        grid-template-columns: repeat(2, 1fr);
    }

    .products-wrapper.cols-2 .products {
        grid-template-columns: 1fr;
    }

}

/* BANNER */
.shop-banner {
    height: 300px;
    background-size: cover;
    background-position: center;
    border-radius: 20px;
    position: relative;
}


.banner-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .35);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    border-radius: 20px;
}

.banner-title {
    font-size: 70px;
    margin: 0;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 0.5px;
    text-shadow: 0 4px 20px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .6);

}

@media(max-width: 991px) {
    .shop-banner {
        height: 240px;
    }

    .banner-title {
        font-size: 50px;
    }
}


@media(max-width: 768px) {
    .shop-banner {
        height: 150px;
    }

    .banner-title {
        font-size: 30px;
    }
}


/* ===== TOOLBAR ===== */

.shop-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 50px;
}



.shop-toolbar .toolbar-right {
    display: flex;
    align-items: center;
    gap: 14px;
}



.toolbar-right .separador {
    height: 40px;
    width: 3px;
    background: black;
    margin: 0;
}

@media(max-width: 767px) {
    .shop-toolbar {

        margin-top: 20px;
    }

    .shop-toolbar .toolbar-right {
        gap: 5px;
    }

}

.woocommerce .shop-toolbar .woocommerce-ordering {
    margin: 0;
}

/* Botón filtros */
.open-filters {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none !important;
    border: none !important;
    font-weight: 700 !important;
    color: black !important;
    font-size: 25px !important;
    padding: 0 !important;
}

.open-filters p {
    margin: 0;
}

@media(max-width: 767px) {
    .open-filters {
        font-size: 22px !important;
    }

    .open-filters p {
        display: none;
    }
}

.open-filters:focus,
.open-filters:focus-visible,
.open-filters:active {
    outline: none !important;
}

/* Vistas */
.view-switcher {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 10px;
}

@media(max-width: 767px) {
    .view-switcher {
        margin-right: 0;
    }

    .view-switcher .label {
        display: none;
    }
}

/* Botón base */
.grid-btn {
    height: 35px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: transparent !important;
    padding: 5px !important;

    display: grid;
    gap: 2px;

    cursor: pointer;

}

.grid-btn:active,
.grid-btn:focus,
.grid-btn:focus-visible {
    outline: none !important;
    border: 0 !important
}

/* Cuadritos internos */
.grid-btn span {
    background: #e5e5e5;
    border-radius: 2px;
    transition: .2s;
    width: 10px;

}

/* ===== ICONO 2 COLUMNAS ===== */
.grid-2 {
    grid-template-columns: 1fr 1fr;
}

.grid-2 span {
    height: 100%;
}

/* ===== ICONO 5 COLUMNAS ===== */
.grid-5 {
    grid-template-columns: 1fr 1fr 1fr;
}

.grid-5 span {
    height: 10px;
}

@media(max-width: 991px) {

    .grid-5 span {
        height: 20px;
    }

    .grid-2 {
        grid-template-columns: 1fr;
    }

    .grid-2 span {
        width: 20px;
    }

    .grid-5 span:nth-child(n+4) {
        display: none;
    }

    .grid-2 span:last-child {
        display: none;
    }
}

@media(max-width: 767px) {
    .grid-5 span:nth-child(n+3) {
        display: none;
    }
}





/* ACTIVO */
.grid-btn.active {
    border: solid 1px var(--color-primary) !important;

}

.grid-btn.active span {
    background: var(--color-primary);
    ;
}

/* ===== SELECR ORDERNAR ===== */

.woocommerce .toolbar-right .woocommerce-ordering {
    position: relative;
}

.woocommerce .toolbar-right .woocommerce-ordering select {
    background: #efefef;
    border: 0;
    border-radius: 40px;
    appearance: none;
    padding-right: 35px;
}

@media(max-width: 767px) {
    .woocommerce .toolbar-right .woocommerce-ordering select {
        padding-right: 15px;
        font-size: 14px;
    }
}


.woocommerce .toolbar-right .woocommerce-ordering::after {
    content: "▾";
    position: absolute;
    right: 15px;
    top: 48%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 30px;
    color: #666;
}


.woocommerce .toolbar-right .woocommerce-ordering select:focus,
.woocommerce .toolbar-right .woocommerce-ordering select:focus-visible,
.woocommerce .toolbar-right .woocommerce-ordering select:active {
    outline: none;

}

/* ===== ASIDE ===== */

.filters-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .3);
    z-index: 9998;

    opacity: 0;
    pointer-events: none;
    transition: .3s;
}

.filters-aside {
    position: fixed;
    left: 0;
    top: 25px;
    height: 95%;
    width: 420px;
    background: #fdfbf9;
    z-index: 9999;
    transform: translateX(-100%);
    transition: .3s;
    display: flex;
    flex-direction: column;
    border-radius: 0 30px 30px 0;
}



.filters-aside .aside-header {
    display: flex;
    justify-content: space-between;
    padding: 25px 20px;
    font-weight: bold;
}

@media(max-width:767px) {
    .filters-aside {
        width: 95%;

    }

    .filters-aside .aside-header {
        padding-bottom: 0;
    }

}


.filters-aside .aside-header h3 {
    margin: 0;
    font-weight: 600;
    letter-spacing: 1px;
}

.close-filters {
    padding: 0 !important;
    background: transparent !important;
    color: #b7b7b7 !important;
    font-size: 75px !important;
}

.filters-aside .aside-body {
    padding: 20px;
    overflow: auto;
}

.berocket_single_filter_widget {
    background: #f8f2eb;
    padding: 20px;
    border-radius: 30px;
    margin-bottom: 20px;
}

@media(max-width: 767px) {
    .berocket_single_filter_widget {
        padding: 10px 20px;
    }

    .berocket_single_filter_widget .bapf_sfilter ul li {
        font-size: 14px;
    }
}



.berocket_single_filter_widget .bapf_head h3 {
    font-size: 20px;

}

.berocket_single_filter_widget .irs--flat .irs-bar {
    height: 5px;
    background-color: var(--color-primary);
}

.berocket_single_filter_widget .irs--flat .irs-line {
    height: 5px;
}

.berocket_single_filter_widget .irs--flat .irs-handle>i:first-child {
    width: 10px;
    height: 10px;
    background: var(--color-primary);
    border-radius: 100%;
}

.berocket_single_filter_widget .irs--flat .irs-from,
.berocket_single_filter_widget .irs--flat .irs-single,
.berocket_single_filter_widget .irs--flat .irs-to {
    background-color: var(--color-primary);
}

.berocket_single_filter_widget .bapf-sfa-grey-rounded .berocket_aapf_widget_selected_area li a {
    font-size: 14px;
}

.bapf_sfilter.btn-eliminar-filtros {
    justify-content: center;
    display: flex;
    margin: 0;
}

/* ACTIVO */

.filters-open .filters-overlay {
    opacity: 1;
    pointer-events: auto;
}

.filters-open .filters-aside {
    transform: translateX(0);
}

/* GRID */
.products-wrapper {
    padding: 0;
    margin-top: 20px;
}