/* =========================================================
   ECLAT FOODZ — RESPONSIVE CSS
   Mobile Header + Tablet Drawer + Homepage Slider
   Supports iPad Pro 1032px
========================================================= */


/* =========================================================
   1. ECLAT FOODZ — MOBILE / TABLET HEADER
========================================================= */

.eclat-mobile-header,
.eclat-mobile-overlay,
.eclat-mobile-drawer {
    display: none;
}

@media (max-width: 1199.98px) {

    /* Mobile / tablet header */

    .eclat-mobile-header {
        position: relative;
        z-index: 100002;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
        min-height: 76px;
        padding: 10px 16px;
        background: #fff;
        box-sizing: border-box;
    }

    .eclat-mobile-brand {
        display: inline-flex;
        align-items: center;
        min-width: 0;
    }

    .eclat-mobile-brand img {
        display: block;
        width: auto;
        max-width: 145px;
        max-height: 58px;
        object-fit: contain;
    }

    .eclat-mobile-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 12px;
        flex-shrink: 0;
    }

    .eclat-mobile-cart {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        color: #a4031e;
        text-decoration: none;
        font-size: 21px;
        pointer-events: auto;
    }

    .eclat-mobile-cart-count {
        position: absolute;
        top: 0;
        right: -3px;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 18px;
        height: 18px;
        padding: 0 4px;
        border: 2px solid #fff;
        border-radius: 20px;
        background: #a4031e;
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        line-height: 1;
        box-sizing: border-box;
    }

    /* Hamburger button */

    #eclatMobileMenuOpen {
        position: relative;
        z-index: 100003;
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        width: 44px;
        height: 44px;
        padding: 10px;
        border: 1px solid #e8d8dc;
        border-radius: 8px;
        background: #fff;
        cursor: pointer;
        pointer-events: auto;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    #eclatMobileMenuOpen span {
        display: block;
        width: 22px;
        height: 2px;
        border-radius: 2px;
        background: #a4031e;
        pointer-events: none;
    }

    /* Hide template navigation */

    .mobile-nav__toggler {
        display: none !important;
    }

    .main-header-style4__content {
        display: none !important;
    }

    /* =====================================================
       2. MOBILE OVERLAY
    ===================================================== */

    #eclatMobileOverlay {
        position: fixed !important;
        inset: 0;
        z-index: 100010;
        display: block !important;
        background: rgba(18, 12, 14, 0.58);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .28s ease, visibility .28s ease;
    }

    #eclatMobileOverlay.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* =====================================================
       3. RIGHT-SIDE MOBILE DRAWER
    ===================================================== */

    #eclatMobileDrawer {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: auto !important;

        z-index: 100011 !important;

        display: flex !important;
        flex-direction: column;

        width: min(420px, 100%) !important;
        max-width: 100% !important;

        height: 100vh !important;
        height: 100dvh !important;

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

        padding: 0 0 24px;
        background: #fff;

        box-shadow: -12px 0 35px rgba(0, 0, 0, .16);

        transform: translateX(105%) !important;
        visibility: hidden;
        pointer-events: none;

        transition:
            transform .3s ease,
            visibility .3s ease !important;

        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box;
    }

    #eclatMobileDrawer.is-open {
        transform: translateX(0) !important;
        visibility: visible;
        pointer-events: auto;
    }

    /* Drawer header */

    .eclat-drawer-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 82px;
        padding: 16px 20px;
        border-bottom: 1px solid #f0e8ea;
        flex-shrink: 0;
    }

    .eclat-drawer-header a {
        display: inline-flex;
        align-items: center;
    }

    .eclat-drawer-header img {
        display: block;
        width: auto;
        max-width: 140px;
        max-height: 55px;
        object-fit: contain;
    }

    /* Close button */

    #eclatMobileMenuClose {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        border: 1px solid #eee0e3;
        border-radius: 50%;
        background: #fff;
        color: #a4031e;
        font-size: 28px;
        line-height: 1;
        cursor: pointer;
    }

    /* Drawer navigation */

    .eclat-drawer-nav {
        display: flex;
        flex-direction: column;
        padding: 12px 20px 0;
    }

    .eclat-drawer-nav > a {
        display: flex;
        align-items: center;
        min-height: 52px;
        padding: 12px 2px;
        border-bottom: 1px solid #f2ecee;
        color: #292326;
        font-size: 16px;
        font-weight: 600;
        text-decoration: none;
        transition: color .2s ease;
    }

    .eclat-drawer-nav > a:hover,
    .eclat-drawer-nav > a:focus {
        color: #a4031e;
    }

    /* Order button */

    .eclat-drawer-order {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 48px;
        margin: 22px 20px 0;
        border-radius: 6px;
        background: #a4031e;
        color: #fff;
        font-weight: 700;
        text-decoration: none;
    }

    .eclat-drawer-order:hover,
    .eclat-drawer-order:focus {
        background: #790016;
        color: #fff;
    }

    /* Prevent background scrolling */

    body.eclat-mobile-menu-open {
        overflow: hidden !important;
        touch-action: none;
    }
}


/* =========================================================
   4. SMALL MOBILE HEADER
========================================================= */

@media (max-width: 380px) {

    .eclat-mobile-header {
        padding-right: 12px;
        padding-left: 12px;
    }

    .eclat-mobile-brand img {
        max-width: 125px;
    }

    .eclat-mobile-actions {
        gap: 7px;
    }
}


/* =========================================================
   5. ECLAT FOODZ — CONSOLIDATED RESPONSIVE SLIDER
========================================================= */

.eco-responsive-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    isolation: isolate;
}

.eco-responsive-slider .swiper-container,
.eco-responsive-slider .swiper-wrapper,
.eco-responsive-slider .swiper-slide {
    height: 100%;
}

.eco-responsive-slider .swiper-slide {
    position: relative;
}

.eco-responsive-slider .main-slider-style4__inner {
    position: relative;
    width: 100%;
    height: 450px;
    overflow: hidden;
}

.eco-responsive-slider .image-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.eco-responsive-slider .main-slider-style4__inner > .container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    height: 100%;
    margin: 0 auto;
    padding: 25px 35px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
}


/* =========================================================
   6. PRODUCT SLIDES — DESKTOP
========================================================= */

.eco-responsive-slider .swiper-slide.first-banner-slide
.slide-one-content {
    position: relative !important;
    inset: auto !important;
    transform: none !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;

    width: 47% !important;
    max-width: 550px !important;
    height: auto !important;

    margin: 0 !important;
    padding: 20px 0 !important;

    float: none !important;
    text-align: left !important;
    box-sizing: border-box !important;
    z-index: 3;
}

/* Product title */

.eco-responsive-slider .first-banner-slide
.slide-one-content .big-title {
    position: relative !important;
    width: 100% !important;
    margin: 0 0 20px !important;
    padding: 0 !important;
    text-align: left !important;
}

.eco-responsive-slider .first-banner-slide
.slide-one-content .big-title h2 {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    font-size: clamp(34px, 4vw, 40px);
    line-height: 1.12 !important;
    text-align: left !important;
    overflow-wrap: break-word;
}

/* Description */

.eco-responsive-slider .first-banner-slide
.slide-one-content .text-box {
    width: 100%;
    margin: 0 0 20px;
    text-align: left !important;
}

/* Explore button */

.eco-responsive-slider .first-banner-slide
.slide-one-content .first-banner-explore,
.eco-responsive-slider .first-banner-slide
.slide-one-content .btn-box {
    position: relative !important;
    inset: auto !important;
    transform: none !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: auto !important;
    max-width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

.eco-responsive-slider .first-banner-slide
.slide-one-content .first-banner-explore a,
.eco-responsive-slider .first-banner-slide
.slide-one-content .btn-box a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
}


/* =========================================================
   7. TABLETS AND LAPTOPS — 768px TO 1199px
========================================================= */

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

    .eco-responsive-slider .main-slider-style4__inner {
        height: 500px;
        min-height: 500px;
    }

    .eco-responsive-slider .main-slider-style4__inner > .container {
        padding: 25px 6%;
    }

    .eco-responsive-slider .swiper-slide.first-banner-slide
    .slide-one-content {
        width: 47% !important;
        max-width: 460px !important;
    }

    .eco-responsive-slider .first-banner-slide
    .slide-one-content .big-title {
        margin-bottom: 16px !important;
    }

    .eco-responsive-slider .first-banner-slide
    .slide-one-content .big-title h2 {
        font-size: clamp(30px, 3.8vw, 43px);
        line-height: 1.15 !important;
    }
}


/* =========================================================
   8. MOBILE SLIDER — UP TO 767px
========================================================= */

@media (max-width: 767px) {

    .eco-responsive-slider .main-slider-style4__inner {
        height: 500px;
        min-height: 500px;
    }

    /* Mobile banner images */

    .eco-responsive-slider .mobile-beet {
        background-image: url('../images/slides/mobilebeetbanner.png') !important;
        background-position: center center !important;
    }

    .eco-responsive-slider .mobile-moringa {
        background-image: url('../images/slides/moringamobile.png') !important;
        background-position: center center !important;
    }

    .eco-responsive-slider .mobile-ginseng {
        background-image: url('../images/slides/ginsengmobile.png') !important;
        background-position: center center !important;
    }

    .eco-responsive-slider .mobile-team {
        background-image: url('../images/slides/mobilebanner8.png') !important;
        background-position: center center !important;
    }

    .eco-responsive-slider .mobile-ginger {
        background-image: url('../images/slides/gingermobile.png') !important;
        background-position: center center !important;
    }

    .eco-responsive-slider .mobile-whole-team {
        background-image: url('../images/slides/eclatban9-mobile.jpeg') !important;
        background-position: center center !important;
    }

    .eco-responsive-slider .mobile-amla {
        background-image: url('../images/slides/amlamobile.png') !important;
        background-position: center center !important;
    }

    .eco-responsive-slider .mobile-turmeric {
        background-image: url('../images/slides/turmericmobile.png') !important;
        background-position: center center !important;
    }

    .eco-responsive-slider .image-layer {
        background-size: cover !important;
        background-repeat: no-repeat !important;
    }

    /* Mobile banner container */

    .eco-responsive-slider .main-slider-style4__inner > .container {
        width: 100%;
        max-width: 100%;
        height: 100%;
        margin: 0;
        padding: 28px 24px;
        align-items: flex-start;
        justify-content: flex-start;
    }

    /* Product title and button */

    .eco-responsive-slider .swiper-slide.first-banner-slide
    .slide-one-content {
        position: relative !important;
        inset: auto !important;
        transform: none !important;

        width: 100% !important;
        max-width: 340px !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        align-items: flex-start !important;
        justify-content: flex-start !important;
        text-align: left !important;
    }

    .eco-responsive-slider .first-banner-slide
    .slide-one-content .big-title {
        width: 100% !important;
        margin: 0 0 16px !important;
        padding: 0 !important;
        text-align: left !important;
    }

    .eco-responsive-slider .first-banner-slide
    .slide-one-content .big-title h2 {
        font-size: clamp(25px, 6vw, 34px);
        line-height: 1.2 !important;
        text-align: left !important;
        overflow-wrap: break-word;
        text-shadow: 0 2px 8px rgba(0, 0, 0, .35);
    }

    .eco-responsive-slider .first-banner-slide
    .slide-one-content .first-banner-explore,
    .eco-responsive-slider .first-banner-slide
    .slide-one-content .btn-box {
        width: auto !important;
        margin: 0 !important;
        justify-content: flex-start !important;
        text-align: left !important;
    }

    /* Team and alternate slides */

    .eco-responsive-slider .swiper-slide.slide-two
    .main-slider-style4__inner > .container,
    .eco-responsive-slider .swiper-slide.slide-nine
    .main-slider-style4__inner > .container {
        align-items: flex-start;
        justify-content: center;
        padding: 20px 18px;
    }

    .eco-responsive-slider .swiper-slide.slide-two
    .slide-two-content,
    .eco-responsive-slider .swiper-slide.slide-nine
    .slide-nine-content {
        width: 100%;
        max-width: 430px;
        margin: 0 auto;
        text-align: center;
    }

    /* Slider navigation */

    .eco-responsive-slider .main-slider-nav {
        position: absolute;
        z-index: 10;
        right: 0;
        bottom: 22px;
        left: 0;
        pointer-events: none;
    }

    .eco-responsive-slider .main-slider-nav__control {
        pointer-events: auto;
    }

    .eco-responsive-slider .main-slider-style4__shape-bg {
        display: none;
    }
}


/* =========================================================
   9. SMALL MOBILE SLIDER — UP TO 380px
========================================================= */

@media (max-width: 380px) {

    .eco-responsive-slider .main-slider-style4__inner {
        height: 500px;
        min-height: 500px;
    }

    .eco-responsive-slider .main-slider-style4__inner > .container {
        padding: 24px 18px;
    }

    .eco-responsive-slider .first-banner-slide
    .slide-one-content .big-title h2 {
        font-size: 25px;
    }
}


/* =========================================================
   10. SLIDER TEXT POSITIONING FIX
   Keep product title and Explore button together
========================================================= */

.eco-responsive-slider .swiper-slide {
    position: relative !important;
}

.eco-responsive-slider .main-slider-style4__inner {
    position: relative !important;
    overflow: hidden !important;
}

.eco-responsive-slider .main-slider-style4__inner > .container {
    position: relative !important;
    height: 100% !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding-top: 55px !important;
    box-sizing: border-box !important;
}

/* Reset theme positioning */

.eco-responsive-slider .swiper-slide.first-banner-slide
.slide-one-content {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    transform: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;

    width: 47% !important;
    max-width: 550px !important;
    height: auto !important;
    padding: 0 !important;

    float: none !important;
    text-align: left !important;
}

/* Product title positioning */

.eco-responsive-slider .first-banner-slide
.slide-one-content .big-title,
.eco-responsive-slider .first-banner-slide
.slide-one-content .big-title h2 {
    position: relative !important;
    top: auto !important;
    transform: none !important;
}

.eco-responsive-slider .first-banner-slide
.slide-one-content .big-title {
    width: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 16px !important;
    padding-top: 0 !important;
}

.eco-responsive-slider .first-banner-slide
.slide-one-content .big-title h2 {
    margin-top: 0 !important;
    padding-top: 0 !important;
    line-height: 1.12 !important;
    text-align: left !important;
}

/* Explore button directly below title */

.eco-responsive-slider .first-banner-slide
.slide-one-content .first-banner-explore,
.eco-responsive-slider .first-banner-slide
.slide-one-content .btn-box {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    margin-top: 0 !important;
    padding-top: 0 !important;
}


/* =========================================================
   11. TABLET SLIDER TEXT POSITIONING
========================================================= */

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

    .eco-responsive-slider .main-slider-style4__inner > .container {
        padding-top: 45px !important;
        padding-right: 6% !important;
        padding-left: 6% !important;
    }

    .eco-responsive-slider .swiper-slide.first-banner-slide
    .slide-one-content {
        width: 47% !important;
        max-width: 460px !important;
    }
}


/* =========================================================
   12. MOBILE SLIDER TEXT POSITIONING
========================================================= */

@media (max-width: 767px) {

    .eco-responsive-slider .main-slider-style4__inner > .container {
        padding: 28px 24px !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }

    .eco-responsive-slider .swiper-slide.first-banner-slide
    .slide-one-content {
        width: 100% !important;
        max-width: 340px !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }

    .eco-responsive-slider .first-banner-slide
    .slide-one-content .big-title {
        margin-top: 0 !important;
        margin-bottom: 16px !important;
    }

    .eco-responsive-slider .first-banner-slide
    .slide-one-content .big-title h2 {
        font-size: clamp(25px, 6vw, 34px) !important;
        line-height: 1.2 !important;
    }
}