/* ==========================================================
   HomeDen Generic Carousel
   Reusable Component
========================================================== */

.hd-carousel{
    position:relative;
    width:100%;
}


/* ========================================
   Viewport
======================================== */

.hd-carousel-viewport{
    overflow:hidden;
    width:100%;
}


/* ========================================
   Track
======================================== */

.hd-carousel-track{

    display:flex;
    align-items:stretch;

    gap:24px;

    transition:
        transform .45s cubic-bezier(.2,.8,.2,1);

    will-change:transform;

}


/* ========================================
   Items
======================================== */

.hd-carousel-item{

    flex:0 0 auto;

    min-width:0;

}


/*
Default widths

Desktop = 3
Tablet = 2
Mobile = 1

Override if required.
*/

.hd-carousel-item{

    width:calc((100% - 48px)/3);

}


/* ========================================
   Navigation
======================================== */

.hd-carousel-navigation{

    margin-top:36px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:18px;

}


/* ========================================
   Buttons
======================================== */

.hd-carousel-button{

    width:48px;
    height:48px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#fff;

    color:var(--color-brand);

    border:1px solid var(--color-border);

    box-shadow:
        0 8px 18px rgba(0,0,0,.06);

    transition:.3s;

}

.hd-carousel-button:hover{

    background:var(--color-brand);

    color:#fff;

    border-color:var(--color-brand);

}

.hd-carousel-button:disabled{

    opacity:.35;

    pointer-events:none;

}


/* ========================================
   Dots
======================================== */

.hd-carousel-dots{

    display:flex;

    align-items:center;

    gap:10px;

}


.hd-carousel-dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#d9d9d9;

    cursor:pointer;

    transition:.3s;

}


.hd-carousel-dot.active{

    width:34px;

    border-radius:999px;

    background:var(--color-brand);

}


/* ========================================
   Optional Fade
======================================== */

.hd-carousel-fade-left,
.hd-carousel-fade-right{

    position:absolute;

    top:0;

    bottom:0;

    width:80px;

    pointer-events:none;

    z-index:3;

}

.hd-carousel-fade-left{

    left:0;

    background:
        linear-gradient(
            90deg,
            #fff,
            rgba(255,255,255,0)
        );

}

.hd-carousel-fade-right{

    right:0;

    background:
        linear-gradient(
            -90deg,
            #fff,
            rgba(255,255,255,0)
        );

}


/* ========================================
   Tablet
======================================== */

@media (max-width:991px){

    .hd-carousel-track{

        gap:20px;

    }

    .hd-carousel-item{

        width:calc((100% - 20px)/2);

    }

}


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

@media (max-width:767px){

    .hd-carousel-track{

        gap:16px;

    }

    .hd-carousel-item{

        width:100%;

    }

    .hd-carousel-navigation{

        margin-top:24px;

        gap:14px;

    }

    .hd-carousel-button{

        width:42px;
        height:42px;

    }

    .hd-carousel-dot{

        width:8px;
        height:8px;

    }

    .hd-carousel-dot.active{

        width:26px;

    }

}


/* ========================================
   Small Mobile
======================================== */

@media (max-width:480px){

    .hd-carousel-navigation{

        gap:10px;

    }

    .hd-carousel-button{

        width:38px;
        height:38px;

        font-size:14px;

    }

}