@media (max-width: 768px) {
    .btnpricefilter {
        text-align: right;
    }

    .marginright-7H {
        margin-right: -7.5px;
    }

    .marginright-15 {
        margin-right: -15px;
        margin-left: -15px;
    }

    .marginright0 {
        margin-right: 0px;
    }

    .marginright15 {
        margin-right: 15px;
    }

    .marginleft-7H {
        margin-left: -7.5px;
    }

    .marginleft-15 {
        margin-left: -15px;
        margin-right: -15px;
    }

    .marginleft0 {
        margin-left: 0px;
    }

    .marginleft15 {
        margin-left: 15px;
    }

    .margintop30 {
        margin-top: 30px;
    }
}

@media (min-width:768px) and (max-width:992px) {
    .btnpricefilter {
        text-align: left;
    }
}

@media (min-width: 992px) {
    /*@media (min-width: 768px) {*/
    .btnpricefilter {
        text-align: right;
    }

    .marginright-7H-md {
        margin-right: -7.5px;
    }

    .marginright-15-md {
        margin-right: -15px;
    }

    .marginright0-md {
        margin-right: 0px;
    }

    .marginright15-md {
        margin-right: 15px;
    }

    .marginleft-7H-md {
        margin-left: -7.5px;
    }

    .marginleft-15-md {
        margin-left: -15px;
    }

    .marginleft0-md {
        margin-left: 0px;
    }

    .marginleft15-md {
        margin-left: 15px;
    }

    .margintop30-md {
        margin-top: 30px;
    }
}

.checkoutsidebar {
    position: fixed;
    top: 0px;
    width: 300px;
    bottom: 0px;
    right: 0px;
    border: 1px solid silver;
    z-index: 4000;
    background-color: white;
    display: none;
}

    .checkoutsidebar .header {
        height: 55px;
        line-height: 55px;
        width: 100%;
        border-bottom: solid 1px silver;
        background-color: var(--color1);
        color: var(--color4);
        text-align: left;
        padding-left: 15px;
        font-size: 15pt;
    }

.checkoutsidebar .header .close {
    text-align: right;
    top: 15px;
    right: 15px;
    max-height:32px;
    max-width:32px;
    position: absolute;
    cursor: pointer;
}

.checkoutsidebar .content {
    position: absolute;
    bottom: 45px;
    top: 55px;
    width: 100%;
    overflow-x: auto;
    overflow-y: auto;
}

.checkoutsidebar .content .remove {
    cursor:pointer;
    font-size: 1.6rem;
}

.checkoutsidebar .content .title1 {
    font-size: 12px;
    color: black;
    font-weight:500;
}

.checkoutsidebar .content .title2 {
    font-size: 11px;
    color: var(--color2);
}

.checkoutsidebar .content .price {
    font-size: 12px;
    color: var(--color3);
    font-weight:500;
}

    .checkoutsidebar .footer {
        position: absolute;
        bottom: 0px;
        font-size: 12.68pt;
        text-align: center;
        line-height: 44px;
        height: 44px;
        width: 100%;
        background-color: var(--color1);
        color: var(--color4);
        text-decoration: none;
    }

.checkoutsidebar div .footer, a {
    color: var(--color1);
}

.checkoutsidebar div a {
    color: var(--color1);
}

.checkoutsidebar div a:hover {
    color: var(--color2);
}

.cart .remove {
    cursor:pointer;
    font-size: 1.6rem;
}

.cart .title1 {
    font-size: 14px;
    color: black;
    font-weight: 500;
    margin-left: -10px;
    margin-right: -15px;
}

.cart .title2 {
    font-size: 13px;
    color: var(--color2);
    margin-left: -10px;
    margin-right: -15px;
}

.cart .price {
    font-size: 14px;
    color: var(--color1);
    font-weight: 500;
    margin-top: 15px;
    margin-left: -10px;
    margin-right: -15px;
}

.link {
    color: var(--color2);
    text-decoration: none;
}

.link:hover {
    color: var(--color1);
}

.link1 {
    color: var(--color1);
    text-decoration: none;
}

.link1:hover {
    color: var(--color2);
}


.btnsize {
    width: 160px;
    height: 45px;
}

.btnimglink {
    line-height: 30px;
    cursor: pointer;
}

.img-animate {
    /*    transition: opacity .5s .25s ease-out;
    transform: rotateZ(-2deg);*/
}

.linkproductcategory, a.linkproductcategory:hover {
    color: var(--color1);
    text-decoration: none;
}

a.linkproductcategory {
    color: var(--color2);
    font-size: 14px;
    font-weight: 500;
}

.productcategoryitemcount
{
    color:black;
}

.productcolor {
    border-radius: 15px;
    width: 25px;
    height: 25px;
    margin-right: 10px;
    margin-bottom: 10px;
    border: solid 1px black;
}

.productcolormini {
    border-radius: 10px;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    margin-bottom: 8px;
    border: solid 1px black;
}

.productsaleprice {
    text-decoration: line-through;
    color: var(--color2);
    font-weight: 500;
}

.productprice {
    color: var(--color2);
    font-weight: 500;
}

.linkproductname, a.linkproductname:hover {
    color: var(--color1);
    text-decoration: none;
}

a.linkproductname {
    color: var(--color2);
    font-size: 14px;
    font-weight: 500;
}

.imgload {
/*    width: 600px;
    height: 450px;
    background: url(loading.gif) 50% no-repeat;
    border: 1px solid black;
    border-radius: 5px;*/

    background: url('../assets/images/loading.gif');
}


.linkproducticon {
    color: white;
    width: 40px;
    height: 40px;
    background-color: black;
    margin-right: 1px;
    position: relative;
    cursor: pointer;
}

.linkproducticon:hover {
    color: var(--color1);
}

.productdetailcolor {
    width: 25px;
    height: 25px;
    border: solid 1px black;
    margin-right: 5px;
    margin-bottom: 10px;
    cursor: pointer;
}

.productdetailcolorselected {
    width: 29px;
    height: 29px;
    border: solid 4px black;
    margin-top: -2px;
    margin-right: 5px;
    margin-bottom: 10px;
    cursor: pointer;
}



/* ============================================
   MEGA MENU — CLEAN STRUCTURE & HOVER FIX
   ============================================ */

/* 1️⃣ Base dropdown behavior */
.navbar-nav > .nav-item.mega-dropdown {
    position: static; /* allows full-width dropdown */
}

.navbar {
    overflow: visible; /* prevents clipping */
}

/* 2️⃣ Mega menu container */
.mega-menu {
    display: none; /* hidden by default */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 999;
    background: #fff;
    border: none;
    border-radius: 0;
    width: 100%;
    margin-top: 0; /* remove gap between nav and menu */
    padding: 2rem 3rem; /* internal spacing */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

    /* 3️⃣ Hover show behavior (Only for desktop, not mobile) */
    /*.mega-dropdown:hover > .mega-menu,
    .mega-menu:hover {
        display: block;
    }*/

    /* 4️⃣ Column layout inside mega menu */
    .mega-menu .row > div {
        margin-bottom: 1rem;
    }

    .mega-menu h6 {
        font-weight: 700;
        text-transform: uppercase;
        font-size: 0.9rem;
        margin-bottom: 0.75rem;
        color: #000;
    }

    .mega-menu .dropdown-item {
        font-size: 0.85rem;
        color: #333;
        padding: 0.25rem 0;
        display: block;
        white-space: normal;
    }

        .mega-menu .dropdown-item:hover {
            color: #007bff;
            background: transparent;
        }

/* 5️⃣ Responsive (mobile behavior) */
@media (max-width: 991px) {
    .nav-item.mega-dropdown {
        margin-top:5px;
        margin-left: -20px; /* Change this value as per your needs */
        padding-left:0px;
    }

    /* Mobile - initially hidden */
    .mega-menu {
        display: none;
        position: static; /* change to static positioning */
        width: 100%;
        padding: 1rem;
        box-shadow: none;
        max-height: 75vh; /* Limit the height to 75% of the viewport height */
        overflow-y: auto; /* Add vertical scroll if content exceeds the height */
    }

    /* Show mega menu when clicked (with .show class) */
    .mega-dropdown.show .mega-menu {
        display: block;
    }

    /* Disable hover behavior on mobile */
    /*.mega-dropdown:hover > .mega-menu {
        display: none !important;*/ /* Disable hover behavior */
    /*}*/

    .mega-menu .row {
        flex-direction: column;
    }

    .mega-menu .col-md-3 {
        width: 100%;
    }
}

@media (min-width: 992px) {
    /* Desktop - enable hover behavior */
    .mega-dropdown:hover > .mega-menu {
        display: block !important; /* Enable hover to show */
    }
}