/* =========================================================
   MOBILE MENU
========================================================= */

@media (max-width: 991px) {

    .nav-link:hover::after, .nav-link.active::after { display: none;}
    /* -----------------------------------------
       MOBILE NAV
    ----------------------------------------- */

.main-nav.mobile-open { position: fixed; top: var(--header-height); left: 0; width: 100%; height: calc(100vh - var(--header-height)); background: rgb(0 0 0 / 92%);
overflow-y: auto; z-index: 9998; display: block;}
.main-nav.mobile-open .nav-list { display: flex; flex-direction: column; align-items: stretch; width: 100%; padding: 15px 0; gap: 0; }
.main-nav.mobile-open .nav-item { width: 100%; border-bottom: solid 1px #393939; }
.main-nav.mobile-open .nav-link {  display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 16px 20px; }


    /* -----------------------------------------
       IMPORTANT:
       DESKTOP FIXED MEGA MENU RESET
    ----------------------------------------- */

    .main-nav.mobile-open .mega-menu {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        max-width: none !important;
        transform: none !important;
        opacity: 1;
        visibility: visible;
        box-shadow: none;
        border: 0;
        background: #fff;
        display: none;
    }


    /* -----------------------------------------
       OPEN DROPDOWN
       Add .active to .has-dropdown
    ----------------------------------------- */

    .main-nav.mobile-open .nav-item.has-dropdown.active .mega-menu {
        display: block;
    }


    /* -----------------------------------------
       MEGA INNER
    ----------------------------------------- */

    .main-nav.mobile-open .mega-inner {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 10px 20px 20px;
    }


    /* -----------------------------------------
       MEGA MENU GRID
       Desktop columns -> Mobile stack
    ----------------------------------------- */

    .main-nav.mobile-open .mega-menu.products-menu .mega-inner {
        grid-template-columns: 1fr !important;
    }


    .main-nav.mobile-open .product-column {
        width: 100%;
        padding: 15px 0;
        border-right: 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }


    .main-nav.mobile-open .product-column:last-child {
        border-bottom: 0;
    }


    /* -----------------------------------------
       PRODUCT LINKS
    ----------------------------------------- */

    .main-nav.mobile-open .product-links {
        display: flex;
        flex-direction: column;
        gap: 0;
    }


    .main-nav.mobile-open .product-link {
        display: block;
        padding: 12px 0;
    }


    /* -----------------------------------------
       PREVIEW IMAGE
       Hide desktop hover preview on mobile
    ----------------------------------------- */

    .main-nav.mobile-open .product-preview {
        display: none;
    }


    /* -----------------------------------------
       OTHER DROPDOWN
    ----------------------------------------- */

    .main-nav.mobile-open .dropdown-menu {
        position: static !important;
        width: 100%;
        transform: none !important;
        opacity: 1;
        visibility: visible;
        box-shadow: none;
    }


    /* -----------------------------------------
       BODY SCROLL LOCK
    ----------------------------------------- */

    body.menu-open {
        overflow: hidden;
    }

    .product-detail-page .product-gallery { position: static;}
    .price-value { font-size: 3.5rem;}

}


/* =============================================================
   MOBILE MENU TOGGLE
============================================================= */

@media (max-width: 991px) {

    .menu-toggle {
        position: relative;
        width: 44px;
        height: 44px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
    }


    .menu-toggle span {
        display: block;
        width: 22px;
        height: 2px;
        background: #fff;
        transition:
            transform 0.3s ease,
            opacity 0.3s ease;
    }


    /* -----------------------------------------
       OPEN → X
    ----------------------------------------- */

    .menu-toggle.active span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.active span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }


     .product-column a { margin-bottom: 0;}
    .mega-inner { gap: 2rem;}
    .main-nav.mobile-open .product-link { padding: 5px 0;}
    .banner-content { width: 100%; padding: 20px; left: 0;}

    .banner-content h2 { font-size: 3rem;}

    .modular-kitchen { grid-template-columns: 1fr; margin-top: 5rem;}

    .product-banner {
    position: relative;
    padding: 2rem;
background: #18191e
}

.product-banner .product-banner-content {
    position: relative;
    top: 30%;
    position: relative;
    z-index: 1;
}


.product-banner img { display: none}
.product-banner .product-banner-content {padding-left: 0;}

}

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

@media (max-width: 991px) {

    .header-inner {
        min-height: 7rem;
    }

    .main-nav {
        margin-right: 2rem;
    }

    .nav-list {
        gap: 2.2rem;
    }

    .nav-link {
        font-size: 14px;
    }
}


@media (max-width: 991px) {

    .header-inner {
        min-height: 6.8rem;
    }

    .main-nav {
        display: none;
    }

    .search-btn {
        margin-left: auto;
        margin-right: 0.5rem;
    }

    .menu-toggle {
        display: flex;
    }

    .search-overlay {
        padding: 2rem 1.2rem;
    }

    .search-panel {
        max-height: 92vh;
        padding: 4rem 1.8rem 2rem;
    }

    .search-result {
        grid-template-columns: 4.8rem 1fr auto;
        gap: 1rem;
    }

    .search-result img {
        width: 4.8rem;
        height: 4.8rem;
    }


}


@media (max-width: 891px) {
.product-banner h3 { font-size: 3rem;}
.product-banner .product-banner-content { padding: 2rem 0;}

body , p.text{ font-size: 16px;}

.product-series--reverse .product-series-inner { grid-template-columns: 1fr; padding-left: 0;}

.product-listing {padding: 5rem 0 3rem;}
.product-listing .container { max-width: 100%;}

.product-category-sidebar { position: static;}


}