/* =========================================
   CSS VARIABLES - CUSTOMIZE YOUR MENU
   ========================================= */

.floating-minimal-dropdown {
    /* Colors - Light Theme */
    --fmd-bg-light: #ffffff;
    --fmd-text-light: #111111;
    --fmd-text-muted-light: #5e5e5e; /* #666666; */
    --fmd-border-light: #e8e8e8;
    --fmd-hover-bg-light: #f8f8f8;
    --fmd-active-bg-light: #f5f5f5;
    --fmd-cta-bg-light: #111111;
    --fmd-cta-text-light: #ffffff;
    --fmd-shadow-light: 0 2px 12px rgba(0, 0, 0, 0.04);
    --fmd-shadow-scrolled-light: 0 4px 20px rgba(0, 0, 0, 0.08);
    --fmd-dropdown-shadow-light: 0 8px 32px rgba(0, 0, 0, 0.12);
    
    /* Colors - Dark Theme */
    --fmd-bg-dark: #1a1a1a;
    --fmd-text-dark: #ffffff;
    --fmd-text-muted-dark: #e1e1e1; /* #b0b0b0; */
    --fmd-border-dark: #333333;
    --fmd-hover-bg-dark: #2a2a2a;
    --fmd-active-bg-dark: #333333;
    --fmd-cta-bg-dark: #ffffff;
    --fmd-cta-text-dark: #111111;
    --fmd-shadow-dark: 0 2px 12px rgba(0, 0, 0, 0.2);
    --fmd-shadow-scrolled-dark: 0 4px 20px rgba(0, 0, 0, 0.3);
    --fmd-dropdown-shadow-dark: 0 8px 32px rgba(0, 0, 0, 0.4);
    
    /* Typography */
    --fmd-font-main: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    
    /* Logo */
    --fmd-logo-size: 14px;
    --fmd-logo-size-mobile: 14px;
    --fmd-logo-weight: 600;
    --fmd-logo-letter-spacing: -0.02em;
    
    /* Navigation Links */
    --fmd-link-size: 13px;
    --fmd-link-size-mobile: 16px;
    --fmd-link-weight: 450;
    --fmd-link-padding: 10px 16px;
    --fmd-link-padding-mobile: 16px 0;
    --fmd-link-gap: 4px;
    
    /* CTA Button */
    --fmd-cta-size: 13px;
    --fmd-cta-size-mobile: 14px;
    --fmd-cta-weight: 500;
    --fmd-cta-padding: 10px 20px;
    --fmd-cta-padding-mobile: 14px 28px;
    
    /* Layout */
    --fmd-padding: 8px 10px 8px 24px;
    --fmd-padding-mobile: 12px 16px;
    --fmd-padding-shrunk: 6px 8px 6px 20px;
    --fmd-margin-top: 24px;
    --fmd-margin-top-shrunk: 12px;
    --fmd-border-radius: 100px;
    --fmd-gap: 8px;
    
    /* Dropdown */
    --fmd-dropdown-border-radius: 16px;
    --fmd-dropdown-padding: 8px;
    --fmd-dropdown-min-width: 200px;
    --fmd-dropdown-item-padding: 10px 16px;
    --fmd-dropdown-item-radius: 8px;
    --fmd-dropdown-offset: 12px;
    --fmd-submenu-offset: 8px;
    
    /* Hamburger */
    --fmd-hamburger-size: 40px;
    --fmd-hamburger-line-width: 18px;
    --fmd-hamburger-line-height: 1.5px;
    --fmd-hamburger-line-gap: 5px;
    
    /* Mobile Drawer */
    --fmd-drawer-padding: 80px 24px 40px;
    
    /* Animations */
    --fmd-transition-smooth: 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    --fmd-transition-standard: 0.3s ease;
    --fmd-transition-quick: 0.25s ease;
    --fmd-transition-drawer: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    --fmd-transition-dropdown: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    
    /* Z-index layers */
    --fmd-z-menu: 1000;
    --fmd-z-skip: 1001;
    --fmd-z-toggle: 1002;
    --fmd-z-drawer: 999;
    --fmd-z-dropdown: 1010;
    
    /* Active theme variables (default to light) */
    --fmd-bg: var(--fmd-bg-light);
    --fmd-text: var(--fmd-text-light);
    --fmd-text-muted: var(--fmd-text-muted-light);
    --fmd-border: var(--fmd-border-light);
    --fmd-hover-bg: var(--fmd-hover-bg-light);
    --fmd-active-bg: var(--fmd-active-bg-light);
    --fmd-cta-bg: var(--fmd-cta-bg-light);
    --fmd-cta-text: var(--fmd-cta-text-light);
    --fmd-shadow: var(--fmd-shadow-light);
    --fmd-shadow-scrolled: var(--fmd-shadow-scrolled-light);
    --fmd-dropdown-shadow: var(--fmd-dropdown-shadow-light);
}

/* =========================================
   BASE MENU STYLES
   ========================================= */

.floating-minimal-dropdown {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: var(--fmd-z-menu);
    display: flex;
    justify-content: center;
    padding-top: var(--fmd-margin-top);
    transition: padding-top var(--fmd-transition-smooth);
    font-family: var(--fmd-font-main);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Custom adjustment for section after the menu */
.floating-minimal-dropdown + .is-section {
    margin-top: -78px !important;
}

.floating-minimal-dropdown *,
.floating-minimal-dropdown *::before,
.floating-minimal-dropdown *::after {
    box-sizing: border-box;
}

/* =========================================
   SKIP LINK (Accessibility)
   ========================================= */

.floating-minimal-dropdown__skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--fmd-text);
    color: var(--fmd-bg);
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    z-index: var(--fmd-z-skip);
    border-radius: var(--fmd-border-radius);
    font-family: var(--fmd-font-main);
}

.floating-minimal-dropdown__skip-link:focus {
    top: 8px;
    outline: 2px solid var(--fmd-cta-bg);
}

/* =========================================
   PILL CONTAINER
   ========================================= */

.floating-minimal-dropdown__pill {
    display: flex;
    align-items: center;
    gap: var(--fmd-gap);
    background: var(--fmd-bg);
    padding: var(--fmd-padding);
    border-radius: var(--fmd-border-radius);
    border: 1px solid var(--fmd-border);
    box-shadow: var(--fmd-shadow);
    max-width: fit-content;
    transition: padding var(--fmd-transition-smooth),
                background-color var(--fmd-transition-standard),
                border-color var(--fmd-transition-standard),
                box-shadow var(--fmd-transition-standard);
}

/* =========================================
   MENU TOGGLE (Hidden Checkbox)
   ========================================= */

.floating-minimal-dropdown__toggle {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* =========================================
   HAMBURGER BUTTON
   ========================================= */

.floating-minimal-dropdown__hamburger-label {
    display: none;
    width: var(--fmd-hamburger-size);
    height: var(--fmd-hamburger-size);
    cursor: pointer;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: var(--fmd-z-toggle);
    -webkit-tap-highlight-color: transparent;
    border-radius: 50%;
    background: var(--fmd-hover-bg);
    margin-left: auto;
    flex-shrink: 0;
}

.floating-minimal-dropdown__hamburger-label:focus-visible {
    outline: 2px solid var(--fmd-cta-bg);
    outline-offset: 2px;
}

.floating-minimal-dropdown__hamburger {
    width: var(--fmd-hamburger-line-width);
    height: var(--fmd-hamburger-line-height);
    background: var(--fmd-text);
    position: relative;
    transition: background var(--fmd-transition-quick);
}

.floating-minimal-dropdown__hamburger::before,
.floating-minimal-dropdown__hamburger::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--fmd-text);
    left: 0;
    transition: transform var(--fmd-transition-standard);
}

.floating-minimal-dropdown__hamburger::before {
    transform: translateY(calc(-1 * var(--fmd-hamburger-line-gap)));
}

.floating-minimal-dropdown__hamburger::after {
    transform: translateY(var(--fmd-hamburger-line-gap));
}

/* Screen reader text */
.floating-minimal-dropdown__sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* =========================================
   LOGO
   ========================================= */

.floating-minimal-dropdown__logo-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    align-items: center;
    border-radius: 4px;
    margin-right: 16px;
    flex-shrink: 0;
}

.floating-minimal-dropdown__logo-combo {
    display: flex;
    align-items: center;
    gap: 8px;
}

.floating-minimal-dropdown__logo-link:focus-visible {
    outline: 2px solid var(--fmd-cta-bg);
    outline-offset: 4px;
}

.floating-minimal-dropdown__logo {
    font-size: var(--fmd-logo-size);
    font-weight: var(--fmd-logo-weight);
    letter-spacing: var(--fmd-logo-letter-spacing);
    color: var(--fmd-text);
    transition: font-size var(--fmd-transition-smooth);
    font-family: var(--fmd-font-main);
    white-space: nowrap;
}

/* Logo Image Container */
.floating-minimal-dropdown__logo-image {
    height: 32px;
    width: 32px;
    overflow: hidden;
    display: inline-block;
    transition: all var(--fmd-transition-smooth);
    flex-shrink: 0;
}

.floating-minimal-dropdown__logo-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Rounded (Circle) Logo Variant */
.floating-minimal-dropdown__logo-image--rounded {
    border-radius: 50%;
}

/* Normal Logo Variant */
.floating-minimal-dropdown__logo-image--normal {
    width: auto;
    aspect-ratio: auto;
}

.floating-minimal-dropdown__logo-image--normal img {
    height: 100%;
    width: auto;
    object-fit: contain;
}

/* =========================================
   NAVIGATION
   ========================================= */

.floating-minimal-dropdown__nav {
    display: flex;
    align-items: center;
}

.floating-minimal-dropdown__list {
    display: flex;
    gap: var(--fmd-link-gap);
    list-style: none;
    margin: 0;
    padding: 0;
}

.floating-minimal-dropdown__item {
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
}

/* =========================================
   NAVIGATION LINKS
   ========================================= */

.floating-minimal-dropdown__link {
    font-size: var(--fmd-link-size);
    font-weight: var(--fmd-link-weight);
    color: var(--fmd-text-muted);
    text-decoration: none;
    padding: var(--fmd-link-padding);
    border-radius: var(--fmd-border-radius);
    transition: all var(--fmd-transition-quick);
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--fmd-font-main);
    cursor: pointer;
    white-space: nowrap;
}

.floating-minimal-dropdown__link:hover {
    color: var(--fmd-text);
    background: var(--fmd-hover-bg);
}

.floating-minimal-dropdown__link:focus-visible {
    outline: 2px solid var(--fmd-cta-bg);
    outline-offset: 2px;
}

/* Active state */
.floating-minimal-dropdown__link--active {
    color: var(--fmd-text);
    background: var(--fmd-active-bg);
}

/* Parent link with dropdown indicator */
.floating-minimal-dropdown__link--parent {
    padding-right: 12px;
}

/* =========================================
   LINK WRAPPER (for split click targets on mobile)
   ========================================= */

.floating-minimal-dropdown__link-wrapper {
    display: contents;
}

.floating-minimal-dropdown__dropdown-link-wrapper {
    display: contents;
}

/* Dropdown chevron icon */
.floating-minimal-dropdown__chevron {
    width: 10px;
    height: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--fmd-transition-quick);
    flex-shrink: 0;
}

.floating-minimal-dropdown__chevron svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Mobile chevron toggle button - hidden on desktop */
.floating-minimal-dropdown__chevron-toggle {
    display: none;
}

/* =========================================
   DROPDOWN MENU
   ========================================= */

.floating-minimal-dropdown__dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    min-width: var(--fmd-dropdown-min-width);
    background: var(--fmd-bg);
    border: 1px solid var(--fmd-border);
    border-radius: var(--fmd-dropdown-border-radius);
    padding: var(--fmd-dropdown-padding);
    box-shadow: var(--fmd-dropdown-shadow);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--fmd-transition-dropdown),
                transform var(--fmd-transition-dropdown),
                visibility 0s linear 0.2s;
    z-index: var(--fmd-z-dropdown);
    margin-top: var(--fmd-dropdown-offset);
}

/* Dropdown open state */
.floating-minimal-dropdown__item--open > .floating-minimal-dropdown__dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    transition: opacity var(--fmd-transition-dropdown),
                transform var(--fmd-transition-dropdown),
                visibility 0s linear 0s;
}

/* Chevron rotation when open */
.floating-minimal-dropdown__item--open > .floating-minimal-dropdown__link .floating-minimal-dropdown__chevron,
.floating-minimal-dropdown__item--open > .floating-minimal-dropdown__link-wrapper > .floating-minimal-dropdown__link .floating-minimal-dropdown__chevron {
    transform: rotate(180deg);
}

/* Dropdown list */
.floating-minimal-dropdown__dropdown-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Dropdown item */
.floating-minimal-dropdown__dropdown-item {
    position: relative;
}

/* Dropdown link */
.floating-minimal-dropdown__dropdown-link {
    font-size: var(--fmd-link-size);
    font-weight: var(--fmd-link-weight);
    color: var(--fmd-text-muted);
    text-decoration: none;
    padding: var(--fmd-dropdown-item-padding);
    border-radius: var(--fmd-dropdown-item-radius);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    transition: all var(--fmd-transition-quick);
    font-family: var(--fmd-font-main);
    cursor: pointer;
    white-space: nowrap;
}

.floating-minimal-dropdown__dropdown-link:hover {
    color: var(--fmd-text);
    background: var(--fmd-hover-bg);
}

.floating-minimal-dropdown__dropdown-link:focus-visible {
    outline: 2px solid var(--fmd-cta-bg);
    outline-offset: -2px;
}

/* Submenu chevron (points right) */
.floating-minimal-dropdown__dropdown-link .floating-minimal-dropdown__chevron {
    transform: rotate(-90deg);
}

.floating-minimal-dropdown__dropdown-item--open > .floating-minimal-dropdown__dropdown-link .floating-minimal-dropdown__chevron,
.floating-minimal-dropdown__dropdown-item--open > .floating-minimal-dropdown__dropdown-link-wrapper > .floating-minimal-dropdown__dropdown-link .floating-minimal-dropdown__chevron {
    transform: rotate(90deg);
}

/* =========================================
   NESTED DROPDOWN (SUBMENU)
   ========================================= */

.floating-minimal-dropdown__submenu {
    position: absolute;
    top: 0;
    left: 100%;
    margin-left: var(--fmd-submenu-offset);
    min-width: var(--fmd-dropdown-min-width);
    background: var(--fmd-bg);
    border: 1px solid var(--fmd-border);
    border-radius: var(--fmd-dropdown-border-radius);
    padding: var(--fmd-dropdown-padding);
    box-shadow: var(--fmd-dropdown-shadow);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--fmd-transition-dropdown),
                transform var(--fmd-transition-dropdown),
                visibility 0s linear 0.2s;
    z-index: var(--fmd-z-dropdown);
    transform: translateX(-8px);
}

/* Submenu open state */
.floating-minimal-dropdown__dropdown-item--open > .floating-minimal-dropdown__submenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
    transition: opacity var(--fmd-transition-dropdown),
                transform var(--fmd-transition-dropdown),
                visibility 0s linear 0s;
}

/* Dropdown divider */
.floating-minimal-dropdown__dropdown-divider {
    height: 1px;
    background: var(--fmd-border);
    margin: 8px 0;
}

/* =========================================
   CTA BUTTON
   ========================================= */

.floating-minimal-dropdown__cta {
    font-size: var(--fmd-cta-size);
    font-weight: var(--fmd-cta-weight);
    color: var(--fmd-cta-text);
    background: var(--fmd-cta-bg);
    text-decoration: none;
    padding: var(--fmd-cta-padding);
    border-radius: var(--fmd-border-radius);
    margin-left: var(--fmd-gap);
    transition: all var(--fmd-transition-quick);
    display: block;
    font-family: var(--fmd-font-main);
    white-space: nowrap;
    flex-shrink: 0;
}

/* .floating-minimal-dropdown__cta:hover {
    opacity: 0.9
} */

.floating-minimal-dropdown__cta:focus-visible {
    outline: 2px solid var(--fmd-cta-bg);
    outline-offset: 4px;
}

/* =========================================
   SCROLLED STATE (SHRINK)
   ========================================= */

.floating-minimal-dropdown--scrolled {
    padding-top: var(--fmd-margin-top-shrunk);
}

.floating-minimal-dropdown--scrolled .floating-minimal-dropdown__pill {
    padding: var(--fmd-padding-shrunk);
    box-shadow: var(--fmd-shadow-scrolled);
}

/* =========================================
   DARK THEME
   ========================================= */

.floating-minimal-dropdown--dark {
    --fmd-bg: var(--fmd-bg-dark);
    --fmd-text: var(--fmd-text-dark);
    --fmd-text-muted: var(--fmd-text-muted-dark);
    --fmd-border: var(--fmd-border-dark);
    --fmd-hover-bg: var(--fmd-hover-bg-dark);
    --fmd-active-bg: var(--fmd-active-bg-dark);
    --fmd-cta-bg: var(--fmd-cta-bg-dark);
    --fmd-cta-text: var(--fmd-cta-text-dark);
    --fmd-shadow: var(--fmd-shadow-dark);
    --fmd-shadow-scrolled: var(--fmd-shadow-scrolled-dark);
    --fmd-dropdown-shadow: var(--fmd-dropdown-shadow-dark);
}

/* =========================================
   LIGHT THEME (Explicit)
   ========================================= */

.floating-minimal-dropdown--light {
    --fmd-bg: var(--fmd-bg-light);
    --fmd-text: var(--fmd-text-light);
    --fmd-text-muted: var(--fmd-text-muted-light);
    --fmd-border: var(--fmd-border-light);
    --fmd-hover-bg: var(--fmd-hover-bg-light);
    --fmd-active-bg: var(--fmd-active-bg-light);
    --fmd-cta-bg: var(--fmd-cta-bg-light);
    --fmd-cta-text: var(--fmd-cta-text-light);
    --fmd-shadow: var(--fmd-shadow-light);
    --fmd-shadow-scrolled: var(--fmd-shadow-scrolled-light);
    --fmd-dropdown-shadow: var(--fmd-dropdown-shadow-light);
}

/* =========================================
   RESPONSIVE / TABLET
   ========================================= */

@media (max-width: 900px) {
    .floating-minimal-dropdown__link {
        padding: 8px 12px;
    }
    
    .floating-minimal-dropdown__logo-link {
        margin-right: 12px;
    }
}

/* =========================================
   RESPONSIVE / MOBILE
   ========================================= */

@media (max-width: 768px) {
    .floating-minimal-dropdown {
        padding: 12px 16px 0;
        justify-content: stretch;
    }
    
    /* Show hamburger */
    .floating-minimal-dropdown__hamburger-label {
        display: flex;
    }
    
    /* Pill adjustments */
    .floating-minimal-dropdown__pill {
        width: 100%;
        padding: var(--fmd-padding-mobile);
        justify-content: space-between;
    }
    
    /* Logo adjustments */
    .floating-minimal-dropdown__logo-link {
        margin-right: 0;
    }
    
    .floating-minimal-dropdown__logo {
        font-size: var(--fmd-logo-size-mobile);
    }
    
    .floating-minimal-dropdown__logo-image {
        height: 28px;
        width: 28px;
    }
    
    /* Navigation transforms into drawer */
    .floating-minimal-dropdown__nav {
        position: absolute;
        top: 100%;
        left: 16px;
        right: 16px;
        margin-top: 8px;
        background: var(--fmd-bg);
        border: 1px solid var(--fmd-border);
        border-radius: 24px;
        padding: 24px;
        box-shadow: var(--fmd-shadow-scrolled);
        z-index: var(--fmd-z-drawer);
        transform: translateY(-10px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: transform var(--fmd-transition-drawer),
                    opacity var(--fmd-transition-drawer),
                    visibility 0s linear 0.4s,
                    background-color var(--fmd-transition-standard);
        flex-direction: column;
        max-height: calc(100vh - 120px);
        overflow-y: auto;
    }
    
    /* Open state */
    .floating-minimal-dropdown__toggle:checked ~ .floating-minimal-dropdown__pill .floating-minimal-dropdown__nav {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: transform var(--fmd-transition-drawer),
                    opacity var(--fmd-transition-drawer),
                    visibility 0s linear 0s,
                    background-color var(--fmd-transition-standard);
    }
    
    /* Hamburger animation */
    .floating-minimal-dropdown__toggle:checked ~ .floating-minimal-dropdown__pill .floating-minimal-dropdown__hamburger {
        background: transparent;
    }
    
    .floating-minimal-dropdown__toggle:checked ~ .floating-minimal-dropdown__pill .floating-minimal-dropdown__hamburger::before {
        transform: translateY(0) rotate(45deg);
    }
    
    .floating-minimal-dropdown__toggle:checked ~ .floating-minimal-dropdown__pill .floating-minimal-dropdown__hamburger::after {
        transform: translateY(0) rotate(-45deg);
    }
    
    /* List stacks vertically */
    .floating-minimal-dropdown__list {
        flex-direction: column;
        gap: 0;
        width: 100%;
    }
    
    .floating-minimal-dropdown__item {
        border-bottom: 1px solid var(--fmd-border);
    }
    
    .floating-minimal-dropdown__item:last-child {
        border-bottom: none;
    }

    /* =========================================
       MOBILE LINK WRAPPER - Split click targets
       ========================================= */
    
    .floating-minimal-dropdown__link-wrapper {
        display: flex;
        align-items: stretch;
        width: 100%;
    }

    .floating-minimal-dropdown__dropdown-link-wrapper {
        display: flex;
        align-items: stretch;
        width: 100%;
    }
    
    /* Link styles in drawer */
    .floating-minimal-dropdown__link {
        font-size: var(--fmd-link-size-mobile);
        color: var(--fmd-text);
        padding: var(--fmd-link-padding-mobile);
        border-radius: 0;
        display: flex;
        width: 100%;
        justify-content: space-between;
    }

    /* Link inside wrapper - flex grow, no right padding for chevron */
    .floating-minimal-dropdown__link-wrapper .floating-minimal-dropdown__link {
        flex: 1;
        padding-right: 8px;
    }

    /* Hide inline chevron on mobile when wrapper is used */
    .floating-minimal-dropdown__link-wrapper .floating-minimal-dropdown__link .floating-minimal-dropdown__chevron {
        display: none;
    }
    
    .floating-minimal-dropdown__link:hover {
        background: transparent;
        color: var(--fmd-text-muted);
    }
    
    .floating-minimal-dropdown__link--active {
        background: transparent;
    }

    /* Mobile chevron toggle button */
    .floating-minimal-dropdown__chevron-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        min-width: 44px;
        background: transparent;
        border: none;
        border-left: 1px solid var(--fmd-border);
        cursor: pointer;
        color: var(--fmd-text);
        padding: 0;
        transition: background var(--fmd-transition-quick);
        border-radius: 0;
    }

    .floating-minimal-dropdown__chevron-toggle:hover {
        background: var(--fmd-hover-bg);
    }

    .floating-minimal-dropdown__chevron-toggle:focus-visible {
        outline: 2px solid var(--fmd-cta-bg);
        outline-offset: -2px;
    }

    .floating-minimal-dropdown__chevron-toggle .floating-minimal-dropdown__chevron {
        width: 12px;
        height: 12px;
        transition: transform var(--fmd-transition-dropdown);
    }

    /* Rotate chevron when open */
    .floating-minimal-dropdown__item--open > .floating-minimal-dropdown__link-wrapper .floating-minimal-dropdown__chevron-toggle .floating-minimal-dropdown__chevron {
        transform: rotate(180deg);
    }
    
    /* Mobile Dropdown - accordion style */
    .floating-minimal-dropdown__dropdown {
        position: static;
        transform: none;
        min-width: 100%;
        border: none;
        border-radius: 0;
        padding: 0;
        padding-left: 16px;
        box-shadow: none;
        margin: 0;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        max-height: 0;
        overflow: hidden;
        transition: max-height var(--fmd-transition-drawer);
        background: transparent;
    }
    
    .floating-minimal-dropdown__item--open > .floating-minimal-dropdown__dropdown {
        max-height: 500px;
        transform: none;
    }
    
    /* Mobile Submenu */
    .floating-minimal-dropdown__submenu {
        position: static;
        transform: none;
        min-width: 100%;
        border: none;
        border-radius: 0;
        padding: 0;
        padding-left: 16px;
        box-shadow: none;
        margin: 0;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        max-height: 0;
        overflow: hidden;
        transition: max-height var(--fmd-transition-drawer);
        background: transparent;
    }
    
    .floating-minimal-dropdown__dropdown-item--open > .floating-minimal-dropdown__submenu {
        max-height: 500px;
        transform: none;
    }
    
    /* Mobile dropdown items */
    .floating-minimal-dropdown__dropdown-link {
        font-size: 15px;
        padding: 12px 0;
        border-radius: 0;
    }

    /* Dropdown link inside wrapper */
    .floating-minimal-dropdown__dropdown-link-wrapper .floating-minimal-dropdown__dropdown-link {
        flex: 1;
        padding-right: 8px;
    }

    /* Hide inline chevron on mobile when wrapper is used */
    .floating-minimal-dropdown__dropdown-link-wrapper .floating-minimal-dropdown__dropdown-link .floating-minimal-dropdown__chevron {
        display: none;
    }

    /* Dropdown chevron toggle */
    .floating-minimal-dropdown__dropdown-link-wrapper .floating-minimal-dropdown__chevron-toggle {
        width: 40px;
        min-width: 40px;
    }

    /* Rotate chevron when open for nested items */
    .floating-minimal-dropdown__dropdown-item--open > .floating-minimal-dropdown__dropdown-link-wrapper .floating-minimal-dropdown__chevron-toggle .floating-minimal-dropdown__chevron {
        transform: rotate(180deg);
    }
    
    .floating-minimal-dropdown__dropdown-link:hover {
        background: transparent;
    }
    
    .floating-minimal-dropdown__dropdown-item {
        border-bottom: 1px solid var(--fmd-border);
    }
    
    .floating-minimal-dropdown__dropdown-item:last-child {
        border-bottom: none;
    }

    .floating-minimal-dropdown__dropdown-item:last-child .floating-minimal-dropdown__dropdown-link-wrapper {
        border-bottom: none;
    }
    
    /* Mobile chevron adjustments for non-wrapper links */
    .floating-minimal-dropdown__dropdown-link .floating-minimal-dropdown__chevron {
        transform: rotate(0deg);
    }
    
    .floating-minimal-dropdown__dropdown-item--open > .floating-minimal-dropdown__dropdown-link .floating-minimal-dropdown__chevron {
        transform: rotate(180deg);
    }
    
    /* CTA in drawer */
    .floating-minimal-dropdown__cta {
        font-size: var(--fmd-cta-size-mobile);
        padding: var(--fmd-cta-padding-mobile);
        margin-left: 0;
        margin-top: 24px;
        text-align: center;
        width: 100%;
    }
    
    /* Scrolled state on mobile */
    .floating-minimal-dropdown--scrolled {
        padding-top: 8px;
    }
    
    .floating-minimal-dropdown--scrolled .floating-minimal-dropdown__pill {
        padding: 10px 14px;
    }
}

/* =========================================
   ACCESSIBILITY ENHANCEMENTS
   ========================================= */

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .floating-minimal-dropdown,
    .floating-minimal-dropdown *,
    .floating-minimal-dropdown *::before,
    .floating-minimal-dropdown *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .floating-minimal-dropdown__pill {
        border-width: 2px;
    }
    
    .floating-minimal-dropdown__dropdown,
    .floating-minimal-dropdown__submenu {
        border-width: 2px;
    }
    
    .floating-minimal-dropdown__link:focus-visible,
    .floating-minimal-dropdown__logo-link:focus-visible,
    .floating-minimal-dropdown__cta:focus-visible,
    .floating-minimal-dropdown__skip-link:focus,
    .floating-minimal-dropdown__dropdown-link:focus-visible,
    .floating-minimal-dropdown__chevron-toggle:focus-visible {
        outline-width: 3px;
    }
}

/* =========================================
   PRINT STYLES
   ========================================= */

@media print {
    .floating-minimal-dropdown {
        display: none;
    }
}

/* =========================================================================
   NESTED MENU FIX (repo-hosted) — added by Midas
   Open on CSS :hover, map the markup's "__sub-dropdown*" classes onto the
   template's existing submenu styles, remove stray list markers, hide the raw
   toggle buttons, and add hover bridges across the panel gaps so the menu does
   not close before the cursor can reach the (nested) items.
   ========================================================================= */

.floating-minimal-dropdown__dropdown,
.floating-minimal-dropdown__sub-dropdown,
.floating-minimal-dropdown__dropdown-item,
.floating-minimal-dropdown__sub-dropdown-item { list-style: none; }

.floating-minimal-dropdown__dropdown-toggle,
.floating-minimal-dropdown__sub-dropdown-toggle { display: none; }

.floating-minimal-dropdown__link--has-dropdown::after,
.floating-minimal-dropdown__dropdown-link--has-dropdown::after {
    content: '';
    width: 6px; height: 6px;
    border: solid currentColor;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
    transform-origin: center;
    opacity: .6;
    margin-top: -2px;
    flex-shrink: 0;
    transition: transform .2s ease;
}
.floating-minimal-dropdown__dropdown-link--has-dropdown::after { transform: rotate(-45deg); margin-top: 0; }

.floating-minimal-dropdown__sub-dropdown {
position: absolute;
    top: 0;
    left: 100%;
    /*
     * Overlap the parent panel by 1px instead of leaving a transparent gap. A
     * transparent hover-bridge across a real gap loses the hit-test to page
     * content painted in a transformed stacking context (e.g. a hero slider),
     * so the flyout would close as the cursor crossed. Touching opaque panels
     * never expose that seam. The widened ::before below is a second safety net.
     */
    margin-left: -1px;
    min-width: var(--fmd-dropdown-min-width);
    background: var(--fmd-bg);
    border: 1px solid var(--fmd-border);
    border-radius: var(--fmd-dropdown-border-radius);
    padding: var(--fmd-dropdown-padding);
    box-shadow: var(--fmd-dropdown-shadow);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--fmd-transition-dropdown),
                transform var(--fmd-transition-dropdown),
                visibility 0s linear 0.2s;
    z-index: var(--fmd-z-dropdown);
    transform: translateX(-8px);
}
.floating-minimal-dropdown__sub-dropdown-item {
position: relative;
}
.floating-minimal-dropdown__sub-dropdown-link {
font-size: var(--fmd-link-size);
    font-weight: var(--fmd-link-weight);
    color: var(--fmd-text-muted);
    text-decoration: none;
    padding: var(--fmd-dropdown-item-padding);
    border-radius: var(--fmd-dropdown-item-radius);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    transition: all var(--fmd-transition-quick);
    font-family: var(--fmd-font-main);
    cursor: pointer;
    white-space: nowrap;
}
.floating-minimal-dropdown__sub-dropdown-link:hover {
color: var(--fmd-text);
    background: var(--fmd-hover-bg);
}

.floating-minimal-dropdown__dropdown-item--open > .floating-minimal-dropdown__sub-dropdown {
    opacity: 1; visibility: visible; pointer-events: auto; transform: none;
}

@media (min-width: 769px) {
    .floating-minimal-dropdown__item:hover > .floating-minimal-dropdown__dropdown {
        opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
    }
    .floating-minimal-dropdown__item:hover > .floating-minimal-dropdown__link-wrapper > .floating-minimal-dropdown__link--has-dropdown::after {
        transform: rotate(225deg); margin-top: 2px;
    }
    .floating-minimal-dropdown__dropdown-item:hover > .floating-minimal-dropdown__sub-dropdown {
        opacity: 1; visibility: visible; pointer-events: auto; transform: none;
    }
    /* Hover bridge: first-level dropdown (fills the gap below the trigger) */
    .floating-minimal-dropdown__dropdown::before {
        content: '';
        position: absolute;
        left: 0; right: 0;
        bottom: 100%;
        height: calc(var(--fmd-dropdown-offset) + 8px);
    }
    /*
     * Hover bridge: second-level flyout. Reaches ~10px back into the parent
     * panel's opaque area (which itself wins the hit-test over page content) so
     * the cursor path from row to flyout is continuously backed and never falls
     * through onto whatever sits behind the menu.
     */
    .floating-minimal-dropdown__sub-dropdown::before {
        content: '';
        position: absolute;
        top: 0; bottom: 0;
        left: -10px;
        width: 14px;
    }
}


/* =========================================================================
   STOREFRONT: pull the page content up behind the floating bar (see the
   ".floating-minimal-dropdown + .is-section" rule). The .ecommerce-header
   wrapper breaks that adjacency; re-apply it to the wrapper's sibling. This
   sheet only loads when this menu is active, so the scoping is safe.
   ========================================================================= */
.ecommerce-header:has(.floating-minimal-dropdown) + * { margin-top: -78px !important; }


/* MIDAS first-level hover bridge */
/*
 * The gap between a top-level item and its dropdown sits inside the nav bar/pill,
 * where the item's own hover box does not reach (and a backdrop-filter pill paints
 * over any bridge placed on the panel). This pseudo-element fills that gap with a
 * z-index above the bar, and — being part of the item — keeps the item hovered so
 * the dropdown stays open while the cursor crosses to it. Only present while the
 * item is hovered/open, so it never intercepts the page otherwise.
 */
@media (min-width: 769px) {
    .floating-minimal-dropdown__item { position: relative; }
    .floating-minimal-dropdown__item:hover::after,
    .floating-minimal-dropdown__item--open::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        height: 22px;
        z-index: 2000;
    }
}