.navbar { position: fixed; width: 100%; z-index: 1; font-family: var(--font-text); }
.navbar .icon-menu { width: 245px; padding-bottom: 4px; }
.navbar a { font-size: 13px; text-decoration: auto; font-weight: 700 !important; font-family: var(--font-text); }
.navbar .btn-outline-dark { border: 2px solid #212529; border-radius: 8rem; padding: 8px 14px; font-weight: 500; }
.navbar-scrolled { background-color: #ffffffe8 !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); z-index: 2; }

.cart_count_menu_div { position: absolute; top: 18px; margin-left: 18px; }
.cart_count_menu { align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: #ffb531 !important; color: #000; font-size: 13px; font-weight: 500; padding-top: 2px; }
.cart-float-btn { background-color: #000000 !important; }

.dropdown { position: relative; }
.dropdown-toggle { background: none; border: none; font-size: 26px; cursor: pointer; color: #000000; }
.dropdown-menu { display: none; position: absolute; top: 35px; right: 0; background: white; border: 1px solid #ddd; border-radius: 5px; min-width: 180px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); z-index: 1000; }
.dropdown-toggle::after { display: none; }
.dropdown-menu.show { display: block; right: 0px; width: 265px; padding: 0px; border: 1px solid #dddddd; margin-top: 10px; }
.dropdown-menu a { display: block; padding: 10px 15px; color: #000000; text-decoration: none; font-size: 14px; font-weight: 600 !important; font-family: var(--font-text) !important; }
.dropdown-menu a:hover { background-color: #f2f2f2; }

@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl { max-width: 1160px; }
}

@media (max-width: 768px) {

    .cart_count_menu_div { position: absolute; top: 25px; margin-left: 18px; }

    .mobile-header { display: flex !important; justify-content: space-between; align-items: center; padding: 30px 20px 32px 22px; position: fixed; background: transparent; }
    .mobile-header .icon-menu { width: 225px; }

    .desktop-menu { display: none !important; }

    .mobile-icons { display: flex; align-items: center; gap: 16px; }
    .mobile-icons img { width: 27px; }
    .mobile-icons #openMobileMenu { font-size: 27px; }

    .mobile-menu-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; background-color: #ffffff; z-index: 1050; flex-direction: column; border-radius: 0px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); animation: slideDown 0.3s ease forwards; padding: 15px 20px 10px 20px; }
    .mobile-menu-overlay.show { display: flex; }
    .mobile-menu-overlay .close-icon { position: static; align-self: flex-end; font-size: 30px; cursor: pointer; color: #000; margin-bottom: 2px; font-family: var(--font-text); font-weight: 300; }
    .mobile-menu-overlay .menu-logo { width: 130px; margin: 0 auto 30px auto; }
    .mobile-menu-overlay .mobile-links { text-align: right; }
    .mobile-menu-overlay .mobile-links a { display: block; margin-bottom: 16px; font-family: var(--font-text); font-weight: 500; font-size: 18px; color: #000; text-decoration: none; }

    @keyframes slideDown {
        0% { transform: translateY(-100%); opacity: 0; }
        100% { transform: translateY(0); opacity: 1; }
    }
}

@media (max-width: 360px) {
    
    .mobile-header .icon-menu { width: 200px; }

    .mobile-icons img { width: 25px; }
    .mobile-icons #openMobileMenu { font-size: 25px; }
}

@supports (-webkit-touch-callout: none) {

    .mobile-icons { display: flex; align-items: center; gap: 20px; }
    .mobile-icons img { width: 32px !important; height: auto; vertical-align: middle; display: inline-block; margin: 2px 0px 0px 0px }
    .mobile-icons #openMobileMenu { font-size: 45px !important; line-height: 1 !important; vertical-align: middle; display: inline-block; padding: 0; margin: -6px 0px 0px 0px; }
}