/* ===== RESET ===== */
 body {
     margin: 0;
     font-family: Arial, sans-serif;
 }

 .container {
     width: 95%;
     max-width: 1200px;
     margin: auto;
 }

 /* ===== HEADER ===== */
 .header {
     width: 100%;
     background: #f4f4f4;
     position: relative;
     transition: all .3s ease;
     top: 0 !important;
 }

 /* Sticky */
 .header.sticky {
     position: fixed;
     top: 0;
     left: 0;
     z-index: 1000;
     background: #fff;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
 }

 /* space fix when sticky */
 body.header-space {
     padding-top: 160px;
 }

 /* ===== TOP BAR ===== */
 .top-bar {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 15px 0 30px;
 }

 .search-box {
     display: flex;
     width: 40%;
 }

 .search-box input {
     flex: 1;
     padding: 10px;
     border-radius: 30px 0 0 30px;
     border: 1px solid #ddd;
     outline: none;
 }

 .search-box button {
     background: #a27f43;
     border: none;
     padding: 0 20px;
     border-radius: 0 30px 30px 0;
     color: #fff;
     cursor: pointer;
 }

 .contact-info {
     display: flex;
     gap: 20px;
 }

 .contact-item {
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .contact-item i {
     background: #fff;
     padding: 10px;
     border-radius: 50%;
     color: #ab8b4a;
 }

 /* ===== NAVIGATION ===== */
 .nav-bar {
     background: #fff;
     border-top: 1px solid #eee;
     position: relative;
 }

 .nav-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
     
    border-radius: 16px;
     
    left: 0;
    right: 0;
    top: -27px;
     
    margin: auto;
 }

 .nav-menu {
     display: flex;
     list-style: none;
     gap: 25px;
     font-weight: 600;
     margin: 0;
     padding: 0;
 }

 .nav-menu li {
     cursor: pointer;
     position: relative;
 }

 .nav-menu .hot span {
     background: red;
     color: #fff;
     font-size: 10px;
     padding: 2px 6px;
     border-radius: 5px;
     position: absolute;
     top: -10px;
     right: -20px;
 }

 .nav-icons {
     display: flex;
     gap: 20px;
     align-items: center;
     margin-left: 40px;
 }

 .cart {
     position: relative;
 }

 .cart span {
     position: absolute;
     top: -8px;
     right: -10px;
     background: #7dbb00;
     color: #fff;
     font-size: 12px;
     padding: 2px 6px;
     border-radius: 50%;
 }

 /* ===== MOBILE ===== */
 .mobile-toggle {
     display: none;
     font-size: 24px;
     cursor: pointer;
 }

 /* ===== RESPONSIVE ===== */
 @media(max-width:992px) {

     .search-box,
     .contact-info {
         display: none;
     }

     .mobile-toggle {
         display: block;
     }

     .nav-container {
         position: relative;
         top: 0;
         width: 100%;
         border-radius: 0;
         justify-content: space-between;
         padding: 1px;
     }

     .nav-icons {
         display: none;
     }

     /* RIGHT SLIDE MENU */
     .nav-menu {
         flex-direction: column;
         position: fixed;
         top: 0;
         right: -100%;
         height: 100vh;
         width: 280px;
         background: #fff;
         padding: 80px 25px;
         gap: 20px;
         transition: .4s ease;
         box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
         z-index: 1100;
     }

     .nav-menu.active {
         right: 0;
     }
 }

 .close-menu {
     display: none;
     text-align: right;
     font-size: 22px;
     cursor: pointer;
     margin-bottom: 20px;
 }

 /* Dropdown */
 .dropdown {
     position: relative;
 }

 .dropdown-menu {
     position: absolute;
     top: 100%;
     left: 0;
     background: #fff;
     list-style: none;
     padding: 10px 0;
     min-width: 200px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
     display: none;
 }

 .dropdown-menu li {
     padding: 8px 15px;
     cursor: pointer;
 }

 .dropdown-menu li:hover {
     background: #f2f2f2;
 }

 .dropdown:hover .dropdown-menu {
     display: block;
 }

 /* Mobile dropdown style */
 @media(max-width:992px) {

     .close-menu {
         display: block;
     }

     .dropdown-menu {
         position: relative;
         box-shadow: none;
         padding-left: 15px;
     }

     .dropdown-menu {
         display: none;
     }

     .dropdown.active .dropdown-menu {
         display: block;
     }
 }
 /* Sub Dropdown */
.menu-item-2 {
    position: relative;
}

.menu-item-2 > .sub-menu {
    position: absolute;
    left: 100%;
    top: 0;
    display: none;
    background: #fff;
    min-width: 180px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

.menu-item-2:hover > .sub-menu {
    display: block;
}

/* Mobile Sub Dropdown */
@media(max-width:992px){

    .menu-item-2 > .sub-menu {
        position: relative;
        left: 0;
        box-shadow: none;
    }

    .menu-item-2.active > .sub-menu {
        display: block;
    }
}