/* =========================================================
   OOKLA BOX BY STYLE MEGA MENU  (HOVER FIX VERSION)
========================================================= */


/* =========================================================
   NAVBAR ANCHOR
========================================================= */

.ookla-navbar{
    position:relative;
    z-index:100000;
}


/* =========================================================
   BOX BY STYLE MENU ITEM
========================================================= */

.ookla-box-style-menu-item{
    position:static !important;
}

.mega-product-content a{
    font-size:12px !important;
}
/* =========================================================
   MEGA MENU
   FIX: pointer-events:none hata diya. Ab sirf visibility
   se hide hota hai, jo delay ke sath hidden hoti hai,
   is liye mouse le jane ka time milta hai.
========================================================= */

.ookla-mega-menu{
    position:absolute;
    top:100%;
    left:50%;
    width:min(1220px, calc(100vw - 40px));
    box-sizing:border-box;
    z-index:99999;

    visibility:hidden;
    opacity:0;

    transform:translateX(-50%) translateY(8px);

    /* CLOSE: 0.3s ruk kar band hoga */
    transition:
        opacity .18s ease .3s,
        transform .18s ease .3s,
        visibility 0s linear .48s;
}


/* =========================================================
   INVISIBLE HOVER BRIDGE
   FIX: bara kiya taa ke link aur menu ke darmiyan gap cover ho
========================================================= */

.ookla-mega-menu::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:-30px;
    height:32px;
    background:transparent;
}


/* =========================================================
   OPEN ON HOVER
========================================================= */

.ookla-box-style-menu-item:hover > .ookla-mega-menu,
.ookla-box-style-menu-item:focus-within > .ookla-mega-menu,
.ookla-mega-menu:hover{
    visibility:visible;
    opacity:1;
    transform:translateX(-50%) translateY(0);

    /* OPEN: foran khulega */
    transition:
        opacity .18s ease 0s,
        transform .18s ease 0s,
        visibility 0s linear 0s;
}


/* =========================================================
   MAIN INNER
========================================================= */

.ookla-mega-inner{
    width:100%;
    display:grid;
    grid-template-columns:220px minmax(0,1fr) 255px;
    min-height:470px;
    background:#ffffff;
    border:1px solid #e6ddd1;
    border-radius:0 0 20px 20px;
    overflow:hidden;
    box-shadow:0 25px 65px rgba(16,37,29,.18);
}


/* =========================================================
   LEFT
========================================================= */

.mega-left{
    padding:27px 16px;
    background:#fffdfa;
    border-right:1px solid #e8dfd4;
}

.mega-left-title{
    margin:0 0 18px;
    padding:0 8px;
    color:#10251d;
    font-size:14px;
    line-height:1.3;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.4px;
}


/* =========================================================
   CATEGORY LIST
========================================================= */

.mega-category-list{
    display:flex;
    flex-direction:column;
    gap:7px;
}


/* =========================================================
   CATEGORY
========================================================= */

.mega-category{
    width:100%;
    min-height:48px;
    display:flex;
    align-items:center;
    gap:9px;
    padding:6px 9px;
    border:1px solid transparent;
    border-radius:11px;
    background:transparent;
    color:#17251f;
    font-family:inherit;
    font-size:11px;
    font-weight:600;
    text-align:left;
    cursor:pointer;
    box-sizing:border-box;
    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease;
}

.mega-category:hover{
    background:#fbf1e2;
    border-color:#ead4b4;
}

.mega-category.active{
    background:#f4e5cf;
    border-color:#ead3ae;
    color:#10251d;
}


/* =========================================================
   CATEGORY ICON
========================================================= */

.mega-category-icon{
    width:34px;
    min-width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:#fff7eb;
    border:1px solid #f0dfc7;
    color:#d7a869;
}

.mega-category-icon svg{
    width:18px;
    height:18px;
    display:block;
}

.mega-category.active .mega-category-icon{
    background:#d7a869;
    border-color:#d7a869;
    color:#ffffff;
}


/* =========================================================
   CATEGORY NAME
========================================================= */

.mega-category-name{
    flex:1;
    min-width:0;
    line-height:1.3;
}


/* =========================================================
   CATEGORY ARROW
========================================================= */

.mega-category-arrow{
    width:22px;
    height:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#b8894d;
    font-size:14px;
}

.mega-category.active .mega-category-arrow{
    color:#10251d;
}


/* =========================================================
   CENTER
========================================================= */

.mega-center{
    min-width:0;
    padding:27px 24px;
    background:#ffffff;
}


/* =========================================================
   PANELS
========================================================= */

.mega-category-panel{
    display:none;
}

.mega-category-panel.active{
    display:block;
}

.mega-category-panel[hidden]{
    display:none !important;
}


/* =========================================================
   CATEGORY HEADING
========================================================= */

.mega-center-header{
    margin:0 0 19px;
}

.mega-category-heading-link{
    color:inherit;
    text-decoration:none;
}

.mega-category-heading-link:hover{
    color:inherit;
}

.mega-center-header h3{
    margin:0;
    color:#10251d;
    font-size:23px;
    line-height:1.2;
    font-weight:700;
}

.heading-link-arrow{
    display:inline-block;
    margin-left:4px;
    color:#c18f51;
    font-size:16px;
}

.mega-center-header p{
    margin:5px 0 0;
    color:#8a8177;
    font-size:11px;
    line-height:1.5;
}


/* =========================================================
   PRODUCT GRID
========================================================= */

.mega-products-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:11px;
}


/* =========================================================
   PRODUCT
========================================================= */

.mega-product{
    min-width:0;
    min-height:70px;
    display:flex;
    align-items:center;
    gap:5px;
    padding:5px;
    box-sizing:border-box;
    background:#ffffff;
    border:1px solid #e6ddd2;
    border-radius:12px;
    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.mega-product:hover{
    transform:translateY(-2px);
    border-color:#d7a869;
    box-shadow:0 8px 18px rgba(16,37,29,.08);
}


/* =========================================================
   PRODUCT IMAGE
========================================================= */

.mega-product-image{
    width:52px;
    min-width:52px;
    height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border-radius:10px;
    background:#f7f3ed;
    border:1px solid #eee5da;
    text-decoration:none;
}

.mega-product-image img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:transform .25s ease;
}

.mega-product:hover .mega-product-image img{
    transform:scale(1.05);
}


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

.mega-product-fallback-icon{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#d7a869;
}

.mega-product-fallback-icon svg{
    width:22px;
    height:22px;
}


/* =========================================================
   PRODUCT TITLE
========================================================= */

.mega-product-content{
    flex:1;
    min-width:0;
}

.mega-product-name{
    display:block;
    color:#17251f;
    text-decoration:none;
    font-size:11px;
    line-height:1.35;
    font-weight:600;
}

.mega-product-name:hover{
    color:#b27d3c;
}


/* =========================================================
   PRODUCT ARROW
========================================================= */

.mega-product-arrow{
    width:24px;
    min-width:24px;
    height:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#fbf1e2;
    color:#b27d3c;
    text-decoration:none;
    font-size:13px;
}

.mega-product:hover .mega-product-arrow{
    background:#d7a869;
    color:#ffffff;
}


/* =========================================================
   NO PRODUCTS
========================================================= */

.mega-no-products{
    grid-column:1 / -1;
    min-height:120px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    padding:20px;
    border:1px dashed #e2d2c0;
    border-radius:13px;
    background:#fffaf4;
}

.mega-no-products-icon{
    width:48px;
    min-width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:13px;
    background:#fbefd9;
    color:#d7a869;
}

.mega-no-products-icon svg{
    width:22px;
    height:22px;
}

.mega-no-products strong{
    display:block;
    margin-bottom:4px;
    color:#17251f;
    font-size:13px;
}

.mega-no-products span{
    display:block;
    color:#8b8278;
    font-size:10px;
}


/* =========================================================
   VIEW ALL
========================================================= */

.mega-view-all{
    width:max-content;
    max-width:100%;
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin:18px auto 0;
    padding:11px 15px 11px 17px;
    border-radius:999px;
    background:#064d3a;
    color:#ffffff;
    text-decoration:none;
    font-size:12px;
    font-weight:600;
}

.mega-view-all:hover{
    background:#d7a869;
    color:#10251d;
}

.mega-view-all-arrow{
    width:25px;
    height:25px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#d7a869;
    color:#10251d;
}


/* =========================================================
   RIGHT PROMO
========================================================= */

.mega-promo{
    position:relative;
    min-height:430px;
    margin:20px 20px 20px 0;
    overflow:hidden;
    border-radius:16px;
    background:
        radial-gradient(circle at 100% 100%, rgba(217,182,136,.18), transparent 28%),
        #102f25;
}

.mega-promo::before{
    content:"";
    position:absolute;
    width:150px;
    height:150px;
    top:-70px;
    right:-70px;
    border:1px solid rgba(215,168,105,.28);
    border-radius:50%;
}

.mega-promo::after{
    content:"";
    position:absolute;
    width:120px;
    height:120px;
    right:-50px;
    bottom:-50px;
    background:rgba(215,168,105,.12);
    border-radius:50%;
}

.mega-promo-content{
    position:relative;
    z-index:2;
    padding:28px 22px;
}

.mega-promo-small{
    display:block;
    margin-bottom:12px;
    color:#d7a869;
    font-size:9px;
    font-weight:700;
    letter-spacing:1px;
}

.mega-promo h3{
    margin:0 0 13px;
    color:#ffffff;
    font-size:23px;
    line-height:1.12;
    font-weight:700;
}

.mega-promo p{
    max-width:190px;
    margin:0 0 24px;
    color:rgba(255,255,255,.82);
    font-size:10.5px;
    line-height:1.55;
}


/* =========================================================
   QUOTE BUTTON
========================================================= */

.mega-promo-button{
    min-height:45px;
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    padding:5px 7px 5px 18px;
    border-radius:999px;
    background:#d7a869;
    color:#10251d;
    text-decoration:none;
    font-size:12px;
    font-weight:600;
}

.mega-promo-button:hover{
    background:#e3bd88;
    color:#10251d;
}

.mega-promo-button-arrow{
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#064d3a;
    color:#ffffff;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1100px){

    .ookla-mega-menu{
        width:calc(100vw - 30px);
    }

    .ookla-mega-inner{
        grid-template-columns:200px minmax(0,1fr) 220px;
    }

    .mega-products-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

}


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

@media(max-width:800px){

    .ookla-mega-menu{
        left:15px;
        right:15px;
        width:auto;
        transform:translateY(8px);
    }

    .ookla-box-style-menu-item:hover > .ookla-mega-menu,
    .ookla-box-style-menu-item:focus-within > .ookla-mega-menu,
    .ookla-mega-menu:hover{
        transform:translateY(0);
    }

    .ookla-mega-inner{
        grid-template-columns:1fr;
        max-height:calc(100vh - 90px);
        overflow-y:auto;
        border-radius:0 0 18px 18px;
    }

    .mega-left{
        border-right:0;
        border-bottom:1px solid #e8dfd4;
    }

    .mega-category-list{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:7px;
    }

    .mega-products-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .mega-promo{
        min-height:220px;
        margin:0 18px 18px;
    }

}


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

@media(max-width:520px){

    .mega-category-list{
        grid-template-columns:1fr;
    }

    .mega-products-grid{
        grid-template-columns:1fr;
    }

    .mega-center-header h3{
        font-size:20px;
    }

}