/* =========================================================
   HOME PAGE
   ========================================================= */


/* =========================================================
   HERO
   ========================================================= */

.hero {
    position: relative;

    width: 100%;

    height: 367px;

    overflow: hidden;

    background: #f6f1ec;
}


.hero-background-carousel,
.hero-background-carousel .carousel-inner,
.hero-background-carousel .carousel-item {
    width: 100%;
    height: 100%;
}


.hero-background-carousel .carousel-item {
    position: relative;

    background-position: center center;

    background-repeat: no-repeat;

    background-size: cover;
}


.hero-background-carousel .carousel-item::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.30) 0%,
            rgba(255,255,255,.08) 52%,
            rgba(255,255,255,0) 100%
        );
}


.hero-content-layer {
    position: absolute;

    inset: 0;

    z-index: 10;

    display: flex;

    align-items: center;

    justify-content: center;

    pointer-events: none;
}


.hero-content-inner {
    width: 100%;

    pointer-events: auto;

    text-align: center;

    transform: translateY(-2px);
}


.hero h1 {
    margin-bottom: .45rem;

    font-weight: 800;

    font-size: 2.6rem;

    letter-spacing: -.02em;

    color: #0f172a;

    text-shadow:
        0 1px 3px rgba(255,255,255,.55);
}


.hero p.lead {
    margin-bottom: 1.15rem;

    color: #49647f;

    font-size: 1.05rem;

    text-shadow:
        0 1px 3px rgba(255,255,255,.65);
}


.hero-search {
    background: #fff;

    padding: .6rem;

    border-radius: .9rem;

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


.hero-search .form-control {
    border: none;
}


.hero-search .form-control:focus {
    box-shadow: none;
}


.hero-search .divider-v {
    width: 1px;

    background: var(--mlno-border);
}


.popular-chip {
    background: #fff;

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

    border-radius: 999px;

    padding: .3rem .9rem;

    font-size: .85rem;

    color: #374151;

    display: inline-block;
}


.popular-chip:hover {
    border-color: var(--mlno-blue);

    color: var(--mlno-blue);
}


/* =========================================================
   HERO CONTROLS
   ========================================================= */

.hero-background-carousel .carousel-control-prev,
.hero-background-carousel .carousel-control-next {
    width: 6%;

    z-index: 12;
}


.hero-background-carousel .carousel-indicators {
    z-index: 13;

    margin-bottom: .55rem;
}


.hero-background-carousel .carousel-indicators button {
    width: 7px;
    height: 7px;

    margin: 0 3px;

    border-radius: 50%;

    border: 0;
}


/* =========================================================
   HERO FALLBACK
   ========================================================= */

.hero-banner-fallback {
    width: 100%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.70),
            rgba(255,255,255,.15)
        ),
        url("https://images.unsplash.com/photo-1567016432779-094069958ea5?q=80&w=1600&auto=format&fit=crop");

    background-size: cover;

    background-position: center;
}


/* =========================================================
   SECTION HEADINGS
   ========================================================= */

.section-title {
    font-weight: 700;

    font-size: 1.3rem;

    margin-bottom: 0;
}


.view-all-link {
    font-size: .9rem;

    font-weight: 600;

    color: var(--mlno-blue);
}


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

.cat-card {
    background: var(--mlno-bg-soft);

    border-radius: .9rem;

    padding: 1.1rem .5rem;

    text-align: center;

    transition:
        transform .15s ease,
        box-shadow .15s ease;

    height: 100%;
}


.cat-card:hover {
    transform: translateY(-3px);

    box-shadow:
        0 8px 20px rgba(15,23,42,.08);
}


.cat-icon {
    width: 46px;
    height: 46px;

    display: flex;

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

    margin: 0 auto .55rem;

    border-radius: .65rem;

    font-size: 1.3rem;
}


.cat-label {
    font-size: .82rem;

    font-weight: 500;

    color: #334155;
}


/* =========================================================
   FEATURED PRODUCT CARDS
   ========================================================= */

.product-card {
    border: 1px solid var(--mlno-border);

    border-radius: .8rem;

    overflow: hidden;

    background: #fff;

    height: 100%;

    transition:
        box-shadow .15s ease;
}


.product-card:hover {
    box-shadow:
        0 10px 24px rgba(15,23,42,.08);
}


.product-img-wrap {
    position: relative;

    aspect-ratio: 4 / 3;

    overflow: hidden;

    background: #f1f5f9;
}


.product-img-wrap img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.badge-featured {
    position: absolute;

    top: .6rem;
    left: .6rem;

    background: var(--mlno-purple);

    color: #fff;

    font-size: .7rem;

    font-weight: 600;

    padding: .25rem .6rem;

    border-radius: 999px;
}


.fav-btn {
    position: absolute;

    top: .55rem;
    right: .55rem;

    width: 30px;
    height: 30px;

    border-radius: 50%;

    background: rgba(255,255,255,.92);

    border: none;

    display: flex;

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

    color: #475569;

    box-shadow:
        0 2px 6px rgba(0,0,0,.12);
}


.fav-btn:hover {
    color: #e11d48;
}


.product-body {
    padding: .85rem .9rem 1rem;

    position: relative;
}


.product-price {
    font-weight: 700;

    font-size: 1.02rem;

    margin-bottom: .15rem;
}


.product-title {
    font-size: .88rem;

    color: #334155;

    margin-bottom: .4rem;

    display: -webkit-box;

    -webkit-line-clamp: 1;

    -webkit-box-orient: vertical;

    overflow: hidden;
}


.product-meta {
    font-size: .76rem;

    color: var(--mlno-muted);

    display: flex;

    align-items: center;

    gap: .3rem;

    flex-wrap: wrap;
}


.verified-line {
    font-size: .76rem;

    color: var(--mlno-green);

    display: flex;

    align-items: center;

    gap: .25rem;

    margin-top: .25rem;
}


.chat-bubble {
    position: absolute;

    bottom: .7rem;
    right: .7rem;

    color: var(--mlno-blue);

    background: #eef2ff;

    width: 26px;
    height: 26px;

    border-radius: 50%;

    display: flex;

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

    font-size: .8rem;
}


/* =========================================================
   RECENTLY ADDED
   ========================================================= */

.mini-card {
    border: 1px solid var(--mlno-border);

    border-radius: .7rem;

    overflow: hidden;

    background: #fff;

    height: 100%;
}


.mini-img-wrap {
    position: relative;

    aspect-ratio: 1 / 1;

    background: #f1f5f9;

    overflow: hidden;
}


.mini-img-wrap img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.mini-fav-btn {
    position: absolute;

    top: .4rem;
    right: .4rem;

    width: 26px;
    height: 26px;

    border-radius: 50%;

    background: rgba(255,255,255,.92);

    border: none;

    display: flex;

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

    color: #475569;

    box-shadow:
        0 2px 6px rgba(0,0,0,.12);

    font-size: .75rem;
}


.mini-fav-btn:hover {
    color: #e11d48;
}


.mini-body {
    padding: .65rem .75rem .8rem;
}


.mini-price {
    font-weight: 700;

    font-size: .92rem;
}


.mini-title {
    font-size: .8rem;

    color: #334155;

    margin-bottom: .15rem;
}


.mini-loc,
.mini-time {
    font-size: .72rem;

    color: var(--mlno-muted);
}


.mini-time {
    display: flex;

    align-items: center;

    gap: .25rem;
}


/* =========================================================
   CAROUSEL
   ========================================================= */

.carousel-nav-btn {
    width: 38px;
    height: 38px;

    border-radius: 50%;

    background: #fff;

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

    display: flex;

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

    color: #334155;

    box-shadow:
        0 4px 10px rgba(15,23,42,.08);
}


.carousel-nav-btn:hover {
    background: var(--mlno-blue);

    color: #fff;

    border-color: var(--mlno-blue);
}


.carousel-wrap {
    position: relative;
}


.carousel-side-btn {
    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    z-index: 5;
}


.carousel-side-btn.prev {
    left: -14px;
}


.carousel-side-btn.next {
    right: -14px;
}


@media (max-width: 576px) {

    .carousel-side-btn {
        display: none;
    }

}


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

@media (max-width: 991px) {

    .hero {
        height: 350px;
    }

    .hero h1 {
        font-size: 2.25rem;
    }

}


@media (max-width: 767px) {

    .hero {
        height: 330px;
    }

    .hero-content-inner {
        padding: 0 18px;
    }

    .hero h1 {
        font-size: 1.7rem;
    }

    .hero p.lead {
        font-size: .95rem;
    }

    .hero-search {
        flex-direction: column;
    }

    .hero-search .divider-v {
        display: none;
    }

    .hero-background-carousel .carousel-control-prev,
    .hero-background-carousel .carousel-control-next {
        width: 10%;
    }

}

/* =========================================================
   HOMEPAGE WISHLIST ACTIVE STATE
   ========================================================= */

.fav-btn.active,
.mini-fav-btn.active {
    color: #e11d48;
}

.fav-btn.active i,
.mini-fav-btn.active i {
    color: #e11d48;
}

/* =========================================================
   HOMEPAGE PRODUCT CAROUSELS
   ========================================================= */

.home-featured-mobile,
.home-recent-mobile {
    display: none;
}

/* =========================================================
   MOBILE CAROUSEL CONTROLS
   ========================================================= */

.home-mobile-carousel-control {
    position: absolute;

    top: 50%;

    width: 36px;
    height: 36px;

    padding: 0;

    margin: 0;

    transform: translateY(-50%);

    border: 1px solid #e2e8f0;

    border-radius: 50%;

    background: #ffffff;

    color: #334155;

    opacity: 1;

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 10;

    box-shadow:
        0 3px 10px rgba(15, 23, 42, .14);

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


.home-mobile-carousel-control:hover {
    background: #ffffff;

    color: var(--mlno-blue);

    opacity: 1;

    box-shadow:
        0 5px 14px rgba(15, 23, 42, .18);
}


.home-mobile-carousel-control i {
    font-size: 1rem;

    line-height: 1;

    pointer-events: none;
}


.home-mobile-carousel-control.carousel-control-prev {
    left: 6px;
}


.home-mobile-carousel-control.carousel-control-next {
    right: 6px;
}


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

@media (max-width: 767.98px) {

    .home-featured-desktop,
    .home-recent-desktop {
        display: none !important;
    }


    .home-featured-mobile,
    .home-recent-mobile {
        display: block !important;
    }


    .home-featured-mobile .carousel,
    .home-recent-mobile .carousel {
        width: 100%;

        position: relative;
    }


    .home-featured-mobile .carousel-item,
    .home-recent-mobile .carousel-item {
        width: 100%;
    }


    .home-featured-mobile .product-card,
    .home-recent-mobile .mini-card {
        width: 100%;
    }


    .home-featured-mobile .product-img-wrap {
        aspect-ratio: 4 / 3;
    }


    .home-recent-mobile .mini-img-wrap {
        aspect-ratio: 1 / 1;
    }


    .home-featured-mobile .px-1,
    .home-recent-mobile .px-1 {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

}


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

@media (max-width: 575.98px) {

    .home-mobile-carousel-control {
        width: 32px;

        height: 32px;
    }


    .home-mobile-carousel-control.carousel-control-prev {
        left: 5px;
    }


    .home-mobile-carousel-control.carousel-control-next {
        right: 5px;
    }


    .home-mobile-carousel-control i {
        font-size: .9rem;
    }

}