/* ==========================================================
   Navigator Component
   ========================================================== */

.zoofx-navigator{

    width:130px;

    margin-top:85px;

    margin-left:10px;

}

.zoofx-navigator__list{

    list-style:none;

    margin:0;

    padding:0;

}

.zoofx-navigator__item{

    margin-bottom:8px;

}

.zoofx-navigator__link{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    height:46px;

    border:1px solid #E5E5E5;

    border-radius:12px;

    background:#FFFFFF;

    color:#222;

    font-size:15px;

    font-weight:600;

    text-decoration:none;

    transition:all .20s ease;

}

.zoofx-navigator__link:hover{

    border-color:#111;

}

.zoofx-navigator__paw{

    width:17px;

    height:17px;

    background:url("../images/paw.svg") center center/contain no-repeat;

    flex:0 0 17px;

    transform:translateY(-2px);

}

.zoofx-navigator__item.is-active
.zoofx-navigator__link{

    background:#111;

    color:#FFF;

}

.zoofx-navigator__item.is-active
.zoofx-navigator__paw{

    filter:brightness(0) invert(1);

}

.zoofx-navigator ul,
.zoofx-navigator li{

    list-style:none !important;

}


/* ==========================================================
   Archive Layout
   ========================================================== */

.archive.tax-product_cat
.zoo-wrap-product-shop-loop.container{

    max-width:none;

    width:100%;

    padding-inline:80px;

}


/* ==========================================================
   ZoofX Layout
   ========================================================== */

.zoofx-layout{

    display:flex;

    align-items:flex-start;

    gap:80px;

}


/* ==========================================================
   Sticky Navigator (Desktop)
   ========================================================== */

:root{

    --zoofx-header-offset:100px;

}

.zoofx-layout > nav{

    flex:0 0 130px;

    position:sticky;

    top:var(--zoofx-header-offset);

    align-self:flex-start;

}


/* ==========================================================
   Products Grid
   ========================================================== */

.zoofx-layout > ul.products{

    flex:1;

    width:100% !important;

}


/* ==========================================================
   Responsive Mobile
   ========================================================== */

@media (max-width:768px){

    .zoofx-layout{

        display:flex;

        flex-direction:column;

        align-items:stretch;

    }

    .zoofx-layout > nav{

        position:static;

        flex:none;

        width:100%;

        top:auto;

        align-self:stretch;

    }

    .zoofx-navigator{

        width:100%;

        margin-top:0;

        margin-left:0;

        overflow-x:auto;

        overflow-y:visible;

        -webkit-overflow-scrolling:touch;

        scrollbar-width:none;

    }

    .zoofx-navigator::-webkit-scrollbar{

        display:none;

    }

    .zoofx-navigator__list{

        display:flex;

        flex-wrap:nowrap;

        overflow-x:auto;

        overflow-y:hidden;

        -webkit-overflow-scrolling:touch;

        scrollbar-width:none;

        gap:10px;

        width:max-content;

        min-width:max-content;

    }

    .zoofx-navigator__list::-webkit-scrollbar{

        display:none;

    }

    .zoofx-navigator__item{

        flex:none;

    }

    .zoofx-navigator__link{

        min-width:72px;

    }

    .archive.tax-product_cat
    .zoo-wrap-product-shop-loop.container{

        padding-inline:10px;

    }

    .is-sticky.wrap-top-shop-loop{

        top:17px !important;

    }

}

/* ==========================================================
   Product Layout - Desktop
   ========================================================== */

.single-product
.wrap-single-product-images
> .zoofx-navigator{

    width:100%;

    margin-top:24px;

    display:flex;

    justify-content:center;
    
}

.single-product
.wrap-single-product-images
.zoofx-navigator__list{

    display:flex;

    flex-wrap:nowrap;
    
    width:100%;
    
    gap:10px;

}

.single-product
.wrap-single-product-images
.zoofx-navigator__item{

    margin:0;

}

.single-product
.wrap-single-product-images
.zoofx-navigator__link{

    min-width:72px;

}




/* ==========================================================
   Product Navigator - Scroll Hint (Mobile)
   ========================================================== */

@media (max-width:768px){

    .single-product .zoofx-navigator{

        position:relative;

    }

.single-product .zoofx-navigator::after{

    content:"❯";

    position:absolute;

    right:8px;

    top:50%;

    transform:translateY(-50%);

    font-size:26px;

    color:#777;

    pointer-events:none;

    animation:zoofx-scroll-hint 1.4s ease-in-out infinite;

    opacity:1;

    transition:opacity .35s ease;

}

}

@keyframes zoofx-scroll-hint{

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

    50%{
        transform:translateY(-50%) translateX(5px);
    }

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

}

.single-product .zoofx-navigator.has-scrolled::after{

    opacity:0;

}