/* ============================================
COMPONENTE PROPIO: ESTA ES LA BARRA LATERAL QUE SE RENDERIZA EN:
- SHOP
- TAX
- CATG
- BRAND
ESTA BARRA RENDERIZA EL SHORTCODE DE YITH AJAX PILTER (PLUGIN) 
=============================================== */


/* SIDE BAR FIJA EN DEKTOP */
.shop-layout {

    display: flex;
    gap: 32px;
    align-items: flex-start;

}

.shop-sidebar {

    width: 280px;
    flex-shrink: 0;
    position: sticky;
    top: 24px;
    margin: 16px;
    padding: 24px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    background: #fff;

}

.shop-content {

    flex: 1;
    min-width: 0;

}

/* ocultar botones de "Filtros" y "x" */
.shop-filters-toggle,
.shop-sidebar__close {

    display: none;

}

/* sacarle circulito/vineta a los items de la lista de filtros */
.shop-sidebar__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* estilo de los titulos de los items de la lista de filtros */
h3.shop-sidebar__title {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 10px 0;
    color: var(--color-text);
}

/*estilo de los items de la lista de filtros */
.shop-sidebar__list li a{
    font-weight: 300;
    color: var(--color-text-long);
    font-size: 14px;
}

/* =========================
   CHECKBOX DE FILTROS
========================= */

.shop-sidebar__list li a {
    display: flex;
    align-items: center;
    gap: 10px;
}



/* checkbox patra los filtros desactivados */
.shop-sidebar__list li a::before {
    content: "";
    width: 16px;
    height: 16px;
    border: 1px solid var(--color-border);
    border-radius: 3px;
    flex-shrink: 0;
}



/* checkbox para los filtros activos */
.shop-sidebar__list li.is-active a::before {
    background-color: var(--rosa-fucsia);
    border-color: var(--rosa-fucsia);
}



/* MOBILE - OCULTAR SIDE BAR */
/* ==========================================
   MOBILE
========================================== */

@media (max-width: 768px) {

    /* Layout */

    .shop-layout {

        display: block;

    }

    /* Botón abrir filtros */

    .shop-filters-toggle {

        margin-top: 16px;
        display: flex;
        align-items: center;
        justify-content: center;

    }

    /* Botón cerrar */

    .shop-sidebar__close {

        position: absolute;
        top: 16px;
        right: 16px;
        left: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        
    }


    /* Sidebar */

    .shop-sidebar {

        position: fixed;
        top: 0;
        left: 0;
        width: 320px;
        max-width: 85vw;
        height: 100vh;
        margin: 0;
        border-radius: 0;
        z-index: 1000;
        transform: translateX(-100%);
        transition: transform .3s ease;

    }

    /* Estado abierto */

    .shop-sidebar.is-open {

        transform: translateX(0);

    }

    /* Overlay */

    .shop-sidebar-overlay {

        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.45);
        opacity: 0;
        visibility: hidden;
        transition:
            opacity .3s ease,
            visibility .3s ease;
        z-index: 999;
        
    }

    .shop-sidebar-overlay.is-visible {

        opacity: 1;
        visibility: visible;

    }

}