/* Navbar */
.common-navbar {
    height: 0;
    overflow: hidden;
    transition: var(--transition);
    background-color: white !important;
}

.common-navbar.navbar-scrolled {
    height: 74px;
    overflow: visible;
}
/* End Navbar */

/* Utilities */
.product-card  {
    box-shadow: var(--shadow);
    border-radius: 8px;
    transition: var(--transition);
    height: 100%;
}

.product-card > .card-body {
    padding: 16px;
}

.product-card > .card-img-top {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.product-card:hover {
    transform: translateY(-8px);
}
/* End Utilities */

/* Header */
.header-background {
    background: url(../../../../images/pages/ecommerce/landing/header-background.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 101vh;
}

.header-input-group {
    max-width: 771px;
    width: auto;
    margin: 0 auto;
}

.header-input {
    width: 169px;
    border: 1px solid #D6D6D6;
    border-radius: 4px;
    margin-right: 16px;
}

.header-input:last-of-type {
    margin-right: 36px;
}
/* End Header */

/* Recommended */
#recommeded {
    margin-top: 64px;
    margin-bottom: 64px;
}

.recommended-container {
    box-shadow: var(--shadow);
    border-radius: 8px;
}

.recommended-container > .card-body {
    padding: 32px;
}

.recommended-title {
    font-family: var(--font-1);
    font-style: normal;
    font-weight: 400;
    font-size: 36px;
    color: var(--black);
    margin-bottom: 32px;
}

.recommended-nav-link {
    font-family: var(--font-2);
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    color: var(--grey) !important;
    background-color: transparent !important;
    padding: 0;
    border: 0 !important;
    padding-bottom: 8px !important;
    outline: 0 !important;
}

.recommended-nav-link.active {
    border-bottom: 5px solid var(--primary) !important;
    color: var(--black) !important;
}
/* End Recommended */

/* Divider */
.divider hr {
    margin: 64px 0;
    border-color: var(--primary);
}
/* End Divider */

/* Category */
#category {
    margin-top: 64px;
}

.category-container {
    padding: 0 8px;
}

.category-img {
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    border-radius: 8px;
    margin-bottom: 16px;
}

.category-item {
    opacity: .75;
    transition: var(--transition);
}

.category-item:hover {
    opacity: 1;
    transform: translateY(-8px);
}
/* End Category */

/* Free Class */
.free-card {
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.free-card > .card-body {
    padding: 32px;
}

.free-carousel .slick-track
{
    display: flex !important;
}

.free-carousel .slick-slide
{
    height: inherit !important;
}

.free-btn-prev {
    width: 48px;
    height: 48px;
    background-color: var(--primary);
    box-shadow: var(--transition);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 2%;
    border: 0;
}

.free-btn-next {
    width: 48px;
    height: 48px;
    background-color: var(--primary);
    box-shadow: var(--transition);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 2%;
    border: 0;
}
/* End Free Class */

/* Favourite */
.favourite-card {
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.favourite-card > .card-body {
    padding: 32px;
}

.favourite-carousel .slick-track
{
    display: flex !important;
}

.favourite-carousel .slick-slide
{
    height: inherit !important;
}

.favourite-btn-prev {
    width: 48px;
    height: 48px;
    background-color: var(--primary);
    box-shadow: var(--transition);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 2%;
    border: 0;
}

.favourite-btn-next {
    width: 48px;
    height: 48px;
    background-color: var(--primary);
    box-shadow: var(--transition);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 2%;
    border: 0;
}

.btn-category {
    display: block;
    margin: 24px auto 64px auto;
    background-color: var(--primary) !important;
    width: fit-content;
}
/* End Favourite */

/* Star */
.star.not {
    color: var(--grey);
}

@media (max-width: 997.98px) {

    /* Header */
    .header-background {
        height: auto;
    }

    .page-header {
        position: static;
        top: 0;
        padding: 48px 0;
    }
    /* End Header */

    /* Category */
    .category-item {
        opacity: 1;
    }
    /* Category End */

}

@media (max-width: 767.98px) {

    /* Header */
    .header-input {
        width: 100%;
        margin-right: 0;
        margin-bottom: 12px;
    }

    .page-header .btn.btn-layout {
        width: 100%;
    }
    /* End Header */

    /* Divider */
    .divider hr {
        margin-top: 48px;
        margin-bottom: 48px;
    }
    /* End Divider */

    /* Recommended */
    #recommended {
        margin-top: 48px;
        margin-bottom: 48px;
    }

    .recommended-container .card-body {
        padding: 16px;
    }

    .recommended-title {
        font-size: 22px;
        text-align: center ;
    }

    .recommended-nav-link {
        padding-bottom: 0;
        border: 0;
        margin-bottom: 24px;
    }

    .recommended-nav-link.active {
        border: 2px solid var(--primary) !important;
        padding: 8px !important;
        border-radius: 8px;
    }

    .product-item {
        margin-bottom: 24px;
    }
    /* End Recommended */

    /* Category */
    #category {
        margin-top: 48px;
    }

    .category-container {
        padding: 0;
    }

    .category-gutter {
        margin-left: -12px;
        margin-right: -12px;
    }

    .category-gutter > [class^="col-"],
    .category-gutter > [class^=" col-"] {
        padding-left: 12px;
        padding-right: 12px;
    }
    /* End Category */

    /* Free */
    .free-card .card-body {
        padding: 16px;
    }

    .free-btn-next,
    .free-btn-prev {
        width: 32px;
        height: 32px;
        padding: 8px;
    }
    /* End Free */

    /* Favourite */
    .favourite-card .card-body {
        padding: 16px;
    }

    .favourite-btn-next,
    .favourite-btn-prev {
        width: 32px;
        height: 32px;
        padding: 8px;
    }
    /* End Favourite */

}

@media (min-width: 768px) and (max-width: 997.98px) {

    /* Header */
    .header-input {
        width: 17%;
        margin-right: 4px;
        font-size: 12px;
    }

    .header-input:last-of-type {
        margin-right: 8px;
    }
    /* End Header */

    /* Recommended */

    .recommended-title {
        text-align: center ;
    }

    .recommended-nav-link {
        padding-bottom: 0;
        border: 0;
        margin-bottom: 24px;
    }

    .recommended-nav-item {
        width: 50%;
        margin-bottom: 24px !important;
    }

    .recommended-nav-item:nth-last-of-type(-n+2) {
        margin-bottom: 0 !important;
    }

    .recommended-nav-link {
        margin: 0 auto;
        display: block;
    }

    .recommended-nav-link.active {
        border: 2px solid var(--primary) !important;
        padding: 8px !important;
        border-radius: 8px;
    }

    .product-item {
        margin-bottom: 24px;
    }
    /* End Recommended */

}