/* Container */
.menu-toggle {
    display: inline-block;
     all: unset;
    font-size: 24px;
}

.menu-wrapper ul{
    list-style: none;
}

.mega-menu {
 display: none;
  position: absolute;   /* 👈 yahi key hai */
  top: 145px;            /* hamburger ke neeche */
  left: 0;
  
  background: #fff;
  border: 1px solid #ddd;
  z-index: 9999;

}

@media (max-width: 500px) {
    .mega-menu {
       display: none;
        position: absolute;   /* 👈 yahi key hai */
        top: 104px;            /* hamburger ke neeche */
        left: 0;
        
        background: #fff;
        border: 1px solid #ddd;
        z-index: 9999;
    }
}

.menu-level-1-wrap {
    background-color: #f3f5fa;
    width: 350px;
    float: left;
    min-height: 500px;
    padding: 23px 10px;
    box-sizing: border-box;
     background: rgb(217 215 215 / 60%);
    border-radius: 2px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(212, 212, 212, 0.3);

}

/* Search Bar */
.menu-search-li {
    padding: 0 0 30px 0;
    margin-bottom: 0;
    width: 100%;
    border-bottom: 0.5px solid #000;
    display: flex;
    justify-content: center;
}
.menu-search-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 322px;
    height: 42px;
    padding: 0 15px;
    background: #fff;
    border: 1px solid #c4c4c4;
    border-radius: 10px;
    box-sizing: border-box;
}
.menu-search-inner input {
    flex-grow: 1;
    border: none;
    outline: none;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.25px;
    color: #000;
    background: transparent;
    padding: 0;
    margin-right: 10px;
}
.menu-search-inner input::placeholder {
    color: #c7c7cc;
}
.menu-search-inner .fa-search {
    position: static;
    transform: none;
    color: #999999;
    font-size: 16px;
}

/* ☰ click */
.mega-menu.menu-open {
  display: block;
}

/* LEVEL 1 ITEMS */
.menu-level-1 {
    position: static;
}

.menu-level-1 > a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    padding: 10px 15px;
    border-bottom: none; 
    cursor: pointer;
    background: transparent;
    color: #0F0D13;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.5px;
    box-sizing: border-box;
    border-radius: 8px; /* Optional slight rounding for hover */
}

/* Hover State */
.menu-level-1:hover > a {
     background-color: #dc3545; /* Red active/hover color */
     color: #fff;
}

/* Active State Styles */
.menu-level-1.active > a,
.menu-level-1 > a.active {
    background-color: #dc3545;
    color: #fff;
}

/* Arrow Icon */
.menu-level-1 > a::after {
    content: "\f054"; /* fa-chevron-right */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: static; /* Flexbox handles position */
    transform: none;
    font-size: 12px; 
    color: inherit;
}

/* Change Arrow to Dash on Hover or Active */
.menu-level-1:hover > a::after,
.menu-level-1.active > a::after {
  content: "\f101"; /* fa-chevron-right */
  transform: none;
  color: inherit;
}

/* LEVEL 2 */
.menu-level-2-wrap {
    display: none;
    position: absolute;
    top: 0;
    left: 100%;         
    width: 370px;
    float: left;
    min-height: 500px;
    padding: 0;
    background: rgba(212, 212, 212, 0.9);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(212, 212, 212, 0.3);
}

/* Level 2 Header (Selected Category Name) */
.menu-level-2-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    padding: 10px 15px;
    box-sizing: border-box;
    margin-bottom: 12px;
    background: rgba(212, 212, 212, 0.8);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(212, 212, 212, 0.3);

}

@media (min-width: 320px) and (max-width: 1200px) {
    .menu-level-2-header {
        display: none;
    }
}


.menu-level-2-header h3 {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.5px;
    color: #0f0d13;
    margin: 0;
    padding: 0;
}

.menu-level-2-header .fa-times {
    font-size: 16px;
    color: #000;
    cursor: pointer;
}

.menu-level-2 {
    display: block;
    width: 100%;
    /* margin-bottom 12px gap */
}

.menu-level-2 > a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Changed from space-between to left align */
    height: 70px;
    padding: 10px 15px;
    border-bottom: none;
    cursor: pointer;
    background: transparent;
    color: #1d1b20;
    font-family: 'SF Pro', 'Roboto', sans-serif;
    font-size: 15px;
    line-height: 20px;
    letter-spacing: -0.23px;
    box-sizing: border-box;
}

.menu-level-2 > a .leve-2-icon { 
    border: 1px solid #d1d1d6; 
    border-radius: 5px; 
    padding: 0; 
    overflow: hidden; 
    width: 50px; 
    height: 50px; 
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    margin-right: 10px;
    flex-shrink: 0; /* Prevent icon shrinking */
    color: #dc3545;
}

.menu-level-2 > a .leve-2-icon img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.menu-level-2 > a::after {
    content: "\f054"; /* fa-chevron-right */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: static;
    transform: none;
    font-size: 10px;
    color: #000;
    margin-left: auto; /* Push to far right */
}

/* Hover or Active State Level 2 */
.menu-level-2:hover > a,
.menu-level-2.active > a {
    background-color: #80808080;
    color: #fff;
    border-radius: 10px;
    margin: 0 5px; /* Adjusting width slightly on hover for the rounded look */
    width: calc(100% - 10px);
}

.menu-level-2:hover > a::after,
.menu-level-2.active > a::after {
    content: "\f101"; /* fa-angle-double-right */
    color: #dc3545;
    transform: none;
}

.menu-level-2:hover > a .leve-2-icon,
.menu-level-2.active > a .leve-2-icon {
     border-color: #fff;
}

/* Hide toggle button by default on desktop */
.submenu-toggle {
    display: none;
}


/* LEVEL 3 */
.menu-level-3-wrap {
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
    width: 686px; /* Increased to comfortably fit 3 items (203+15)*3 + 15 padding = ~669 + leeway */
    background: #fbfbfb;
    border: none;
    float: left;
    padding: 0; 
    box-shadow: -3px 4px 15px 0px rgba(0,0,0,0.15);
    min-height: 500px;
    padding-bottom: 20px;
    background: rgba(212, 212, 212, 0.7);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(212, 212, 212, 0.3);
    
}

/* Level 3 Header (Selected Sub-Category Name) */
.menu-level-3-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    padding: 10px 15px;
    /* background: #f3f5fa; */
    border-bottom: 0.5px solid #aeaeb2;
    border-top-right-radius: 10px;
    box-sizing: border-box;
    margin-bottom: 15px;
    width: 100%;
    grid-column: 1 / -1; /* Make it span all columns if grid is used, but here I'll use display block for wrap and grid for items later */
}

.menu-level-3-header h3 {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.5px;
    color: #0f0d13;
    margin: 0;
}

.menu-level-3-header .fa-times {
    font-size: 16px;
    color: #000;
    cursor: pointer;
}

/* Specific Grid Layout for Items */
/* I need to select only the LIs, leaving the header out of the grid flow or making the UL a flex column container */
/* Better approach: Let header be first child, then a container for items or just float/flex items */

.menu-level-3-wrap {
    display: none; 
    /* Removed flex-direction: column */
    /* position and width from previous CSS block remain unless overridden here for specific needed props */
}

/* Specific Grid Layout for Items */

.menu-level-3 {
    display: block;
    float: left;
    width: 203px;
    margin-right: 15px; /* Spacing between items */
    margin-bottom: 15px;
    list-style: none;
    margin-left: 0;
}

/* Target every 3rd item to remove right margin to fit perfectly if width allows, 
   or just let wrap handle it. 
   670px container. Items 203px. 
   Margin right 15px.
   (203+15)*3 = 654px. Fits. 
   But the 3rd item will have margin-right 15px vs container...
   Actually, let's add padding-left to container to align with header.
*/

.menu-level-3-wrap {
     padding-left: 15px; /* Align first item with header text */
     box-sizing: border-box;
}

.product-card {
    background: transparent;
    border: none;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    width: 203px;
    height: 279px; /* 249px image + 30px footer */
    overflow: hidden;
    position: relative;
    box-shadow: none; /* Reset old shadow */
}

.product-image {
    height: 249px;
    width: 100%;
    background: #fff;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.product-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.product-overlay-title {
    position: absolute;
    bottom: 30px; /* Adjusted to sit above footer */
    left: 0;
    width: 100%;
    height: 40px;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    padding: 0 10px;
    box-sizing: border-box;
    z-index: 2; /* Ensure it is above the image */
}

.product-overlay-title p {
    font-family: 'SF Pro', 'Roboto', sans-serif;
    font-size: 11px;
    line-height: 13px;
    letter-spacing: 0.06px;
    color: #fff;
    margin: 0;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.product-footer {
    height: 30px;
    background: #e2212f;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    
    /* Move font styles from 'a' to here */
    font-family: 'SF Pro', 'Roboto', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.06px;
    color: #fff; 
    text-decoration: none;
    cursor: pointer;
}

/* Make the link wrapper block to fill card size */
.product-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    width: 100%;
    height: 100%;
}

.product-footer .fa-chevron-right {
    font-size: 10px;
    margin-left: 5px;
}

/* Reset hover effects from previous CSS */
.product-card:hover {
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}



@media (max-width: 992px) {
  /* .menu-level-1-wrap {
    width: 30%;
  }

  .menu-level-2-wrap {
    width: 30%;
  }

  .menu-level-3-wrap {
    width: 40%;
    grid-template-columns: repeat(2, 1fr);
  } */
}
@media (max-width: 768px) {
  /* .menu-level-1-wrap,
  .menu-level-2-wrap,
  .menu-level-3-wrap {
    width: 100%;
    float: none;
  }

  .menu-level-3-wrap {
    grid-template-columns: repeat(1, 1fr);
  } */
}

.search-bar-new {
        max-width: 90%;
}

@media (max-width: 1200px) and (min-width: 800px) {
    /* Adjust widths for medium screens */
    .menu-menu {
        width: 70%;
    }
}

@media (max-width: 1200px) {
    /* Mobile Menu Container Overrides */
    .mega-menu {
        width: 100%;
        left: 0;
        right: 0;
    }
    .menu-level-1-wrap,
    .menu-level-2-wrap,
    .menu-level-3-wrap {
        width: 100% !important;
        position: static;
        float: none;
        max-height: 90dvh;
        min-height: auto;
        padding: 0;
        box-shadow: none;
        background-color: #f3f5fa;
        border-bottom: 1px solid lightgray;
        overflow:   auto;
    }

    .menu-level-3-wrap {
        margin-left: 12px;
        padding-right: 2rem;
    }
    /* Hide submenus by default */
    .menu-level-2-wrap, 
    .menu-level-3-wrap {
        display: none;
    }

    /* Search Bar Mobile */
    .menu-search-li {
        padding: 15px;
        width: 100%;
        box-sizing: border-box;
        position: relative; /* Context for pseudo-element */
        background: #f3f5fa;
        display: block; /* Override flex causing center alignment issues if any */
    }

    .menu-search-li::after {
        content: "";
        display: block;
        height: 1px;
        background: #e0e0e0;
        position: absolute;
        bottom: 0;
        left: 15px;
        right: 15px;
    }

    .menu-search-inner {
        width: 100%;
        max-width: 100%;
        height: 40px;
        background: #fff;
        border: none;
        border-radius: 8px;
        /* Ensure flex unique properties */
        display: flex;
        align-items: center;
        padding: 0 15px; 
        box-sizing: border-box;
    }
    
    .menu-search-inner input {
        background: transparent;
        font-size: 16px; /* Better for mobile touch targets */
    }

    /* --- Level 1 Items (Mobile) --- */
    .menu-level-1 > a {
        height: 50px;
        padding: 10px 15px;
        margin-bottom: 1px; /* Gap between items */
        background-color: transparent;
        color: #0F0D13;
        font-family: 'Roboto', sans-serif;
        font-weight: 500; /* Medium */
        font-size: 16px;
        line-height: 24px;
        letter-spacing: 0.5px;
        border-radius: 0;
    }
    
    /* Level 1 Hover/Active on Mobile */
    .menu-level-1.active > a {
       background-color: #80808080; /* Red background for active */
       color: #fff; /* White text */
       border-radius: 8px; /* Rounded corners */
    }

    .menu-level-1:hover > a {
        background-color: #e2212f; /* No hover effect on mobile usually, or keep specific */
        color: #fff;
    }
    
    /* Change arrow color on active Level 1 */
    .menu-level-1 > a::after {
        font-size: 16px; /* Small type */
    }

    .menu-level-1.active > a::after {
        color: #fff;
    }

    /* --- Level 2 Items (Mobile) --- */
    .menu-level-2 {
        position: relative; /* Context for absolute positioning of toggle */
    }

    .menu-level-2 > a {
        height: 50px;
        padding: 10px 50px 10px 25px; /* Give space on right for toggle */
        display: flex;
        align-items: center;
        justify-content: flex-start; /* Align left */
        background-color: transparent;
        margin: 0;
        width: 100%;
        border-radius: 0;
    }

    .menu-level-2 > a .leve-2-icon {
        width: 35px;
        height: 35px;
        border: 1px solid #d1d1d6;
        border-radius: 5px;
        background: #fff;
        margin-right: 10px;
        padding: 2px; /* Inner padding for image */
        flex-shrink: 0;
    }

    /* Font for Level 2 Text */
    .menu-level-2 > a {
        font-family: -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        font-weight: 400; /* Regular */
        font-size: 15px;
        line-height: 20px;
        letter-spacing: -0.23px;
        color: #1d1b20;
    }

    /* Hover & Active state mobile Level 2 */
    .menu-level-2.active > a {
        background-color: #e2212f; /* Red background */
        color: #fff;
        width: 100%;
        margin: 0;
        border-radius: 8px; /* Rounded */
    }

    .menu-level-2:hover > a {
        /* background-color: rgba(0,0,0,0.05);
        color: #1d1b20;
        width: 100%;
        margin: 0;
        border-radius: 0; */
    }
    
    .menu-level-2.active > a .leve-2-icon {
        border-color: #fff; /* White border for icon box */
    }
    
    .menu-level-2:hover > a .leve-2-icon {
        border-color: #d1d1d6;
    }
    
    /* Remove pseudo-element arrow on mobile, since we use real toggle button now */
    .menu-level-2 > a::after {
        content: none; 
    }
    .menu-level-2.active > a::after {
        content: none;
    }
    .menu-level-2:hover > a::after {
        content: none;
    }

    /* Style the Toggle Button */
    .submenu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0;
        right: 0;
        width: 50px; /* Clickable area */
        height: 50px;
        cursor: pointer;
        z-index: 10;
        color: #000;
        font-size: 14px;
    }

    .submenu-toggle i {
        /* Center logic handled by flex on parent */
    }

    .submenu-toggle.active {
         color: #fff; /* If parent is red active, verify if toggle overlaps or sits on top */
         /* Actually parent background covers whole LI? No, on link only. Link has width 100% and margin 0 */
         /* If link is active, it has red bg. Toggle sits on top of link visually because of z-index and absolute pos */
    }
    
    /* When active, change icon to Minus */
    .submenu-toggle.active i::before {

        content: "\f101"; /* fa-angle-double-right */
    }

    /* --- Level 3 Items (Mobile - List View) --- */
    .menu-level-3-header {
        display: none; /* Hide header if not needed or style it */
    }
    
    /* Convert Grid/Card to List Item */
    .menu-level-3 {
        width: 100%;
        float: none;
        margin: 0;
        padding: 0;
    }

    .product-card-link {
        display: block;
        width: 100%;
    }

    .product-card {
        width: 100%;
        height: 50px; /* Fixed height list item */
        flex-direction: row;
        align-items: center;
        background: transparent;
        padding: 10px 15px 10px 25px; /* Match indent */
        border-radius: 0;
        box-shadow: none;
        overflow: visible;
        margin-bottom: 0;
    }

    /* Product Image in List */
    .product-image {
        width: 35px; /* Match Level 2 icon size */
        height: 35px;
        flex-shrink: 0; /* Prevent shrinking */
        border: 1px solid #d1d1d6;
        border-radius: 5px;
        background: #fff;
        margin-right: 10px;
        border-bottom-left-radius: 5px; 
        border-bottom-right-radius: 5px;
        padding: 2px;
    }
    
    .product-image img {
         /* Ensure image fits inside the small box */
         max-width: 100%;
         max-height: 100%;
    }

    /* Hide Footer but KEEP overlay-title block logic */
    .product-footer {
        display: none !important; 
    }

    /* Re-purposed overlay title as main text - Mobile List View */
    .product-overlay-title {
            max-width: 50%;
        position: static !important; 
        background: transparent !important;
        width: auto !important;
        height: auto !important;
        padding: 0 !important;
        flex: 1; 
        display: flex !important; /* Changed to flex to align text vertically if needed, though block is fine */
        align-items: center;
        margin-right: 10px;
        margin-bottom: 0; 
        bottom: auto !important; /* Reset bottom */
        left: auto !important;   /* Reset left */
    }

    .product-overlay-title p {
        font-family: -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        font-weight: 400;
        font-size: 13px;
        line-height: 15px;
        letter-spacing: -0.23px;
        color: #1d1b20;
        white-space: normal;
        margin: 0;
        text-align: left;
    }

    .product-card {
        width: 100%;
        height: auto; /* Allow height to grow */
        min-height: 62px;
        display: flex;
        flex-direction: row;
        align-items: center;
        background: transparent;
        padding: 10px 15px 10px 25px; /* Match indent */
        border-radius: 0;
        box-shadow: none;
        overflow: visible;
        margin-bottom: 0;
    }

    /* Add Chevron for Level 3 items like Level 2 */
    .product-card::after {
        content: "\f054"; /* fa-chevron-right */
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        font-size: 16px;
        color: #000;
        margin-left: auto; /* Push right */
    }

    /* Reset hover for card */
    .product-card:hover {
        box-shadow: none;
        background-color: rgba(0,0,0,0.05); /* Slight hover effect */
    }
}