:root {
    --app-navbar-min-height: 169px;
    --bs-dark: #000000;
    --bs-dark-bg-subtle: #1A1A1A;
    --bs-dark-rgb: 00, 00, 00;
    --bs-blue: #0261F5;
    --bs-primary-rgb: 16, 93, 231;
    --bs-dark-blue: #16213b;
    --bs-secondary-bg-rgb: 241, 239, 236;
    --bs-tertiary-color: #96989E;
    --bs-white: white;
}

html, body {
    overscroll-behavior: none;
}

body {
    padding-top: var(--app-navbar-min-height) !important;
    height: auto !important;
}

body > header {
    height: var(--app-navbar-min-height) !important;
}

.bs5-shell {
    .navbar {
        --bs-navbar-color: var(--bs-white);
        --bs-navbar-active-color: var(--bs-white);
        --bs-navbar-disabled-color: rgba(255, 255, 255, 0.5);
        --bs-navbar-toggler-border-color: transparent;
        --bs-navbar-toggler-padding-y: .5rem;
    }

    .dropdown-toggle::after {
        display: none;
    }

    .navbar.nav-main.bg-dark {
        --bs-bg-opacity: 0;
    }
    
    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    }
    
    .navbar-dark .navbar-brand {
        display: none;
    }

    .navbar-dark .navbar-nav {
        --bs-nav-link-color: var(--bs-white);
        --bs-nav-link-hover-color: var(--bs-info);
        --bs-navbar-active-color: var(--bs-info);
    }
    
    .navbar-toggler, .navbar-toggler:focus {
        border: none;
        box-shadow: none;
    }
    
    .navbar.nav-cart .navbar-nav {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .nav-link {
        font-size: 18px;
        font-weight: 400;
    }

    .navbar-expand-lg .navbar-nav .nav-link:link,
    .navbar-expand-lg .navbar-nav .nav-link:visited  {
        color: white;
    }

    .navbar-expand-lg .navbar-nav .nav-link:hover,
    .navbar-expand-lg .navbar-nav .nav-link:active  {
        color: #FFB600;
    }

    
    button.navbar-fade.navbar-toggler {
        transition: background-color 150ms linear;
    }

    footer {
        font-weight: 400;
    }
    
    footer .nav-item {
        --bs-nav-link-padding-x: 0;
        --bs-nav-link-color: var(--bs-white);
        --bs-nav-link-hover-color: var(--bs-info);
    }
    
    .cart-count {
        --bs-badge-color: white;
    }
    
    .offcanvas {
        --bs-offcanvas-padding-y: 2rem;
        --bs-offcanvas-padding-x: 1.5rem;
        --bs-offcanvas-width: 90%;
        --bs-bg-opacity: 1;
    }
    
    .search-wrapper {
        background-color: white;
        border: 1px solid rgb(62, 70, 78);
        border-radius: 50%;
        transition: border-color 0.15s ease-in, box-shadow 0.15s ease-in;
    }
    
    .search-wrapper:focus-within {
        background-color: white;
        border-color: rgba(13, 110, 253, 0.8);
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    }
    
    .search-wrapper > .form-control {
        --bs-body-bg: transparent;
    }
    
    .search-wrapper > .form-control:focus {
        box-shadow: none;
    }
    
    .btn-search-toggle {
        --bs-btn-color: var(--bs-gray-500);
        --bs-btn-bg: var(--bs-white);
        --bs-btn-border-color: transparent;
        --bs-btn-hover-color: var(--bs-gray-700);
        --bs-btn-hover-bg: var(--bs-white);
        --bs-btn-hover-border-color: transparent;
        --bs-btn-focus-shadow-rgb: var(--bs-white);
        --bs-btn-active-color: var(--bs-blue);
        --bs-btn-active-bg: var(--bs-white);
        --bs-btn-active-border-color: var(--bs-white);
        border-radius: 50%;
    }

    @media (min-width: 768px) {
        .navbar.nav-cart .navbar-nav .nav-link {
            --bs-navbar-nav-link-padding-x: 0;
        }
    }    

    @media (min-width: 992px) {
        .navbar.nav-main {
            --bs-navbar-padding-x: 0;
            --bs-navbar-padding-y: 1rem;
        }
    
        .navbar.nav-main.bg-dark {
            --bs-bg-opacity: 1;
        }
    
        .navbar-dark .navbar-brand {
            display: block;
        }
    
        .navbar-expand-lg .offcanvas .offcanvas-body {
            flex-direction: row-reverse;
        }
    
        .navbar-dark .navbar-nav {
            --bs-nav-link-color: var(--bs-white);
            --bs-nav-link-padding-y: 0;
        }
    
        .navbar-dark .navbar-nav .nav-link {
            --bs-navbar-nav-link-padding-x: .5rem;
            --bs-navbar-nav-link-padding-y: 0;
            --bs-nav-link-font-size: 1rem;
            --bs-nav-link-font-weight: 400;
        }
    
        .navbar.nav-cart .navbar-nav {
            justify-content: flex-end;
            --bs-nav-link-padding-y: .4rem;
        }
    
        .navbar.nav-cart .navbar-nav .nav-link {
            width: auto;
            justify-content: flex-end;
        }
    }

    @media (min-width: 1200px) {
        .navbar-dark .navbar-nav .nav-link {
            --bs-navbar-nav-link-padding-x: 1rem;
            --bs-nav-link-font-size: 1.125rem;
        }
    }

    @media (min-width: 992px) {
        .offcanvas .dropdown:hover > .dropdown-menu {
            display: block;
            margin-top: 0;
        }
    }
    @media (max-width: 991.98px) {
        .offcanvas .dropdown-menu {
            display: block;
            position: static;
            --bs-dropdown-color: white;
            --bs-dropdown-bg: transparent;
            --bs-dropdown-link-color: var(--bs-white);
            --bs-dropdown-link-hover-color: var(--bs-info);
            --bs-dropdown-link-hover-bg: transparent;
            --bs-dropdown-link-active-color: var(--bs-info);
            --bs-dropdown-link-active-bg: transparent;
        }
    
        .offcanvas .dropdown-toggle::after {
            display: none;
        }
    }
    
    footer .nav-item, footer .nav-item .nav-link {
        --bs-nav-link-padding-x: 0;
        --bs-nav-link-padding-y: .25rem;
        --bs-nav-link-color: var(--bs-white);
        --bs-nav-link-hover-color: var(--bs-info);
        --bs-nav-link-font-size: 1rem;
    }
    
}

@media (min-width: 992px) {
    :root {
        --app-navbar-min-height: 160px;
    }
}    

@media (min-width: 1200px) {
    :root {
        --app-navbar-min-height: 169px;
    }
}