@import url('https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap');
     /* Dropdown and Mega Menu Styles */ /* Import Fjalla One Font */ /* Header 8 Specific Styles - Desktop Navigation */ .header-8 .nav-horizontal {
        display: flex;
        align-items: center;
        column-gap: 20px;
        row-gap: 5px;
        flex-wrap: wrap;
    } .header-8 .nav-link {
        text-decoration: none;
        font-size: 18px;
        font-weight: 400;
        font-style: normal;
        font-variant: normal;
        font-kerning: auto;
        font-optical-sizing: auto;
        font-stretch: 100%;
        font-variation-settings: normal;
        font-feature-settings: normal;
        text-transform: uppercase;
        text-align: left;
        text-indent: 0px;
        padding: 8px 0;
        transition: color 0.3s ease;
        white-space: nowrap;
        position: relative;
    } /* Underline hover effect for regular nav links (including categories/attributes without children) */ .header-8 .nav-dropdown .nav-link::after,
    .header-8 .nav-horizontal > a.nav-link::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 0%;
        height: 2px;
        background: currentColor;
        transition: width 0.3s ease;
    } .header-8 .nav-dropdown .nav-link:hover::after,
    .header-8 .nav-horizontal > a.nav-link:hover::after {
        width: 100%;
    } /* Disable underline for dropdown toggles (items with children) */ .header-8 .nav-dropdown .dropdown-toggle::after {
        display: none;
    } /* Header 8 Specific - Desktop Navigation Dropdowns */ .header-8 .nav-dropdown {
        position: relative;
        display: inline-block;
    } /* Create a larger hover area to prevent dropdown from disappearing */ .header-8 .attribute-menu-item,
    .header-8 .category-menu-item {
        position: relative;
    } .header-8 .attribute-menu-item::before,
    .header-8 .category-menu-item::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 20px; /* Extend hover area below the menu item */
        z-index: 999;
        pointer-events: none;
    } /* Header 8 Specific - Dropdown Body Styles */ .header-8 .dropdown-body {
        visibility: hidden;
        opacity: 0;
        transform: translateY(20px);
        position: absolute;
        top: 100%;
        left: 0;
        background: #fff;
        z-index: 1000;
        transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
        pointer-events: none;
        border-radius: 6px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        border: 1px solid #ddd;
        min-width: 200px;
        padding: 10px 0;
        margin-top: -5px; /* Create overlap to prevent gap */
    } /* Show dropdown on hover for attributes and categories */ .header-8 .attribute-menu-item:hover .attribute-menu-body,
    .header-8 .category-menu-item:hover .category-menu-body {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    } /* Ensure dropdown stays visible when hovering over the dropdown itself */ .header-8 .attribute-menu-item .attribute-menu-body:hover,
    .header-8 .category-menu-item .category-menu-body:hover {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    } /* Header 8 Specific - Menu lists styling */ .header-8 .attribute-menu-list,
    .header-8 .category-menu-list {
        list-style: none;
        padding: 0;
        margin: 0;
    } .header-8 .attribute-menu-list li,
    .header-8 .category-menu-list li {
        padding: 0;
    } .header-8 .attribute-menu-list .dropdown-item,
    .header-8 .category-menu-list .dropdown-item {
        padding: 8px 16px;
        display: block;
        width: 100%;
        text-decoration: none;
        font-size: 18px;
        font-weight: 400;
        text-transform: uppercase;
        transition: background-color 0.2s ease;
    } .header-8 .dropdown-icon {
        margin-left: 4px;
        transition: transform 0.3s ease;
    } .header-8 .nav-dropdown:hover .dropdown-icon {
        transform: rotate(180deg);
    } /* Header 8 Specific - Mega Menu Styles */ .header-8 .nav-mega-menu {
        position: relative;
        display: inline-block;
    } .header-8 .mega-menu-body {
        position: absolute;
        top: 100%;
        left: 0;
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 6px;
        box-shadow: 0 10px 25px rgba(0,0,0,0.15);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: all 0.3s ease;
        z-index: 1000;
        pointer-events: none;
        min-width: 300px;
        max-width: 800px;
    } .header-8 .nav-mega-menu:hover .mega-menu-body {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    } /* Header 8 Specific - Mobile responsive adjustments */ @media (max-width: 900px) {
        .header-8 .desktop-nav {
            display: none;
        }
    } @media (min-width: 901px) {
        .header-8 .header_8_menu_section {
            display: none;
        }
    }