/* =========================================================
   FILTER BUTTON
========================================================= */

.shop-filter-trigger{
    display:flex;
    align-items:center;
    gap:.5rem;

    border:none;
    background:#111;
    color:#fff;

    padding:14px 24px;

    border-radius:16px;

    font-size:.95rem;
    font-weight:600;

    transition:all .3s ease;
}

.shop-filter-trigger:hover{
    background:#000;
    transform:translateY(-2px);

    box-shadow:
        0 10px 30px rgba(0,0,0,.15);
}

/* =========================================================
   OFFCANVAS
========================================================= */

.filters-offcanvas{
    height:auto !important;
    max-height:520px;

    border:none !important;
    /* border-radius:0 0 38px 38px; */

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fafafa 100%
        );

    box-shadow:
        0 30px 70px rgba(0,0,0,.12);

    transform:translateY(-20px);
    opacity:0;

    transition:
        transform .4s cubic-bezier(.16,1,.3,1),
        opacity .4s ease;
}

.filters-offcanvas.show{
    transform:translateY(0);
    opacity:1;
}

/* IMPORTANTE */

.filters-offcanvas.offcanvas-top{
    top:0;
    right:0;
    left:0;
    bottom:auto;

    height:auto;
}

/* BODY */

.filters-offcanvas .offcanvas-body{
    overflow-y:auto;
    padding-bottom:2rem;
}

/* =========================================================
   TITLES
========================================================= */

.filters-mini-text{
    font-size:.75rem;
    font-weight:700;
    letter-spacing:4px;

    color:#999;
}

.filters-main-title{
    margin-top:.4rem;

    font-size:2.3rem;
    font-weight:800;

    color:#111;
}

.filters-title1{
    font-size:1.3rem;
    font-weight:700;

    color:#111;
}

.filters-subtitle1{
    font-size:.95rem;
    color:#777;
}

/* =========================================================
   CATEGORY SCROLL
========================================================= */

.categories-scroll1{
    display:flex;
    align-items:flex-start;
    gap:1.5rem;

    width:100%;

    overflow-x:auto;
    overflow-y:hidden;

    padding:
        .5rem
        .5rem
        1rem;

    scrollbar-width:none;

    -webkit-overflow-scrolling:touch;

    scroll-behavior:smooth;
}

.categories-scroll1::-webkit-scrollbar{
    display:none;
}

/* CENTRADO AUTOMÁTICO */

.categories-scroll1::before,
.categories-scroll1::after{
    content:"";
    flex:1 0 20px;
}

/* =========================================================
   CATEGORY CARD
========================================================= */

.category-card1{
    flex:0 0 auto;

    min-width:170px;

    text-decoration:none;

    transition:all .35s ease;
}

.category-card1:hover{
    transform:translateY(-6px);
}

.category-img1{
    width:150px;
    height:150px;

    margin-bottom:1rem;

    border-radius:28px;
    overflow:hidden;

    position:relative;

    box-shadow:
        0 15px 40px rgba(0,0,0,.08);
}

.category-img1 img{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:transform .6s ease;
}

.category-card1:hover img{
    transform:scale(1.08);
}

.category-card1 span{
    display:block;

    text-align:center;

    font-size:1rem;
    font-weight:700;

    color:#111;
}

.category-card1.active .category-img1{
    outline:3px solid #111;
    outline-offset:5px;
}

/* =========================================================
   STYLE TAGS
========================================================= */

.styles-scroll{
    display:flex;
    justify-content:flex-start;
    gap:1rem;

    width:100%;

    overflow-x:auto;
    overflow-y:hidden;

    padding-bottom:.5rem;

    scrollbar-width:none;

    -webkit-overflow-scrolling:touch;
}

.styles-scroll::-webkit-scrollbar{
    display:none;
}

/* CENTRADO INTELIGENTE */

.styles-scroll::before,
.styles-scroll::after{
    content:"";
    flex:1 0 20px;
}

.style-tag{
    border:1px solid rgba(0,0,0,.08);

    background:#fff;
    color:#111;

    padding:14px 24px;

    border-radius:999px;

    font-size:.9rem;
    font-weight:600;

    white-space:nowrap;

    transition:all .3s ease;
}

.style-tag:hover{
    background:#111;
    color:#fff;

    transform:translateY(-2px);
}

.style-tag.active{
    background:#111;
    color:#fff;

    box-shadow:
        0 10px 25px rgba(0,0,0,.15);
}

/* =========================================================
   PRODUCT CARD
========================================================= */

.product-card1{
    border-radius:28px;
    overflow:hidden;

    transition:all .35s ease;
}

.product-card1:hover{
    transform:translateY(-8px);
}

.product-image-wrapper{
    border-radius:24px;
    overflow:hidden;

    background:#f7f7f7;
}

.product-image-wrapper img{
    width:100%;

    object-fit:cover;

    transition:transform .5s ease;
}

.product-card1:hover .product-image-wrapper img{
    transform:scale(1.05);
}

/* =========================================================
   CUSTOM PRODUCT CARD
========================================================= */



/* =========================================================
   RESPONSIVE
========================================================= */


@media(max-width:768px){

    .filters-offcanvas{
        max-height:420px;
        border-radius:0 0 28px 28px;
    }

    .filters-main-title{
        font-size:1.7rem;
    }

    .category-card1{
        min-width:140px;
    }

    .category-img1{
        width:140px;
        height:180px;
    }

    .styles-scroll{
        flex-wrap:nowrap;
        overflow-x:auto;

        padding-bottom:.5rem;

        scrollbar-width:none;
    }

    .styles-scroll::-webkit-scrollbar{
        display:none;
    }

}



/* =========================================================
   FLOATING FILTER BUTTON
========================================================= */

.floating-filter-btn{
    position:fixed;

    left:0;
    top:50%;

    transform:translateY(-50%);

    z-index:1050;

    display:flex;
    align-items:center;
    gap:.9rem;

    border:none;

    background:#111;
    color:#fff;

    height:64px;
    width:64px;

    padding:0 1.3rem 0 1.2rem;

    border-radius:0 22px 22px 0;

    overflow:hidden;

    transition:
        width .35s cubic-bezier(.16,1,.3,1),
        transform .3s ease,
        background .3s ease;

    box-shadow:
        0 15px 35px rgba(0,0,0,.18);
}

/* HOVER */

.floating-filter-btn:hover{
    width:170px;

    background:#000;

    transform:
        translateY(-50%)
        translateX(0);
}

/* ICON */

.filter-icon{
    min-width:24px;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:1rem;
}

/* TEXT */

.filter-text{
    white-space:nowrap;

    font-size:.95rem;
    font-weight:600;

    opacity:0;

    transform:translateX(-10px);

    transition:
        opacity .25s ease,
        transform .25s ease;
}

/* SHOW TEXT ON HOVER */

.floating-filter-btn:hover .filter-text{
    opacity:1;
    transform:translateX(0);
}

/* SMALL FLOAT EFFECT */

.floating-filter-btn:active{
    transform:
        translateY(-50%)
        scale(.97);
}

/* MOBILE */

@media(max-width:768px){

    .floating-filter-btn{
        bottom:20px;
        top:auto;

        left:50%;

        transform:translateX(-50%);

        border-radius:999px;

        width:auto;

        height:56px;

        padding:0 1.4rem;
    }

    .floating-filter-btn:hover{
        width:auto;

        transform:translateX(-50%);
    }

    .filter-text{
        opacity:1;
        transform:none;
    }

}



/* =========================================================
   CENTERED FILTER LAYOUT
========================================================= */

.filters-centered-wrapper{
    width:100%;

    display:flex;
    justify-content:center;
}

/* =========================================================
   CATEGORIES
========================================================= */

.categories-scroll1{
    display:flex;
    justify-content:center;
    align-items:flex-start;
    gap:1.5rem;

    width:fit-content;
    max-width:100%;

    overflow-x:auto;
    overflow-y:hidden;

    padding:
        .5rem
        .5rem
        1rem;

    scrollbar-width:none;

    -webkit-overflow-scrolling:touch;
}

.categories-scroll1::-webkit-scrollbar{
    display:none;
}

/* =========================================================
   CATEGORY CARD
========================================================= */

.category-card1{
    flex:0 0 auto;

    min-width:170px;

    text-decoration:none;

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.category-card1:hover{
    transform:translateY(-8px);
}

.category-img1{
    width: 150px;
    height:150px;

    border-radius:30px;
    overflow:hidden;

    margin-bottom:1rem;

    position:relative;

    box-shadow:
        0 18px 40px rgba(0,0,0,.08);

    transition:
        transform .4s ease,
        box-shadow .4s ease;
}

.category-card1:hover .category-img1{
    box-shadow:
        0 25px 50px rgba(0,0,0,.14);
}

.category-img1 img{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:transform .7s ease;
}

.category-card1:hover img{
    transform:scale(1.08);
}

.category-card1 span{
    display:block;

    text-align:center;

    font-size:1rem;
    font-weight:700;

    color:#111;

    transition:.3s ease;
}

.category-card1.active .category-img1{
    outline:3px solid #111;
    outline-offset:6px;
}

.category-card1.active span{
    color:#111;
}

/* =========================================================
   STYLES
========================================================= */

/* .styles-scroll{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:1rem;

    max-width:1000px;
} */

/* =========================================================
   STYLE TAG
========================================================= */

.style-tag{
    border:none;

    background:#fff;

    padding:14px 26px;

    border-radius:999px;

    font-size:.92rem;
    font-weight:600;

    color:#111;

    border:1px solid rgba(0,0,0,.08);

    transition:
        transform .3s ease,
        background .3s ease,
        color .3s ease,
        box-shadow .3s ease;
}

.style-tag:hover{
    background:#111;
    color:#fff;

    transform:translateY(-3px);

    box-shadow:
        0 12px 25px rgba(0,0,0,.14);
}

.style-tag.active{
    background:#111;
    color:#fff;

    box-shadow:
        0 10px 25px rgba(0,0,0,.16);
}

/* =========================================================
   TITLES
========================================================= */

.filters-title1{
    text-align:center;

    font-size:1.35rem;
    font-weight:700;

    color:#111;
}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width:768px){

    .categories-scroll1{
        justify-content:flex-start;
    }

    .styles-scroll{
        justify-content:flex-start;
        flex-wrap:nowrap;

        overflow-x:auto;

        padding-bottom:.5rem;

        scrollbar-width:none;
    }

    .styles-scroll::-webkit-scrollbar{
        display:none;
    }

    .category-card1{
        min-width:140px;
    }

    .category-img1{
        width:140px;
        height:180px;
    }

}