/* ==========================================================================
   ALUMINIUMGLASS.CO.IN
   PUBLIC MULTI-VENDOR MARKETPLACE

   Component:
   navigation.css

   Path:
   /home/jqkmqvml/public_html/assets/css/components/navigation.css

   IMPORTANT:
   --------------------------------------------------------------------------
   This stylesheet contains presentation only.

   NO fake/demo/sample marketplace data is generated here.

   Dynamic data flow:
   Database
      ↓
   Repository
      ↓
   Service
      ↓
   Controller
      ↓
   API
      ↓
   JavaScript
      ↓
   navigation.html
      ↓
   This CSS

   Dynamic items may include:
   - categories
   - businesses
   - vendors
   - services
   - products
   - locations
   - pricing
   - promotions
   - user/account actions

   All such data must be supplied by the backend/API.
   ========================================================================== */


/* ==========================================================================
   1. NAVIGATION ROOT
   ========================================================================== */

.site-navigation,
.navigation,
[data-component="navigation"] {
    position: relative;

    width: 100%;
    min-width: 0;

    background: var(
        --navigation-bg,
        var(--header-bg, #ffffff)
    );

    color: var(
        --navigation-text,
        var(--text-color, #1f2937)
    );

    border-bottom: 1px solid var(
        --navigation-border,
        var(--border-color, #e5e7eb)
    );

    z-index: var(
        --navigation-z-index,
        900
    );
}


/* ==========================================================================
   2. NAVIGATION INNER
   ========================================================================== */

.site-navigation__inner,
.navigation__inner {
    width: min(
        100%,
        var(--container-max-width, 1440px)
    );

    min-height: var(
        --navigation-height,
        48px
    );

    margin-inline: auto;

    padding-inline: var(
        --container-padding,
        16px
    );

    display: flex;
    align-items: center;

    gap: var(
        --navigation-gap,
        4px
    );

    min-width: 0;
}


/* ==========================================================================
   3. PRIMARY NAVIGATION LIST
   ========================================================================== */

.site-navigation__list,
.navigation__list {
    display: flex;
    align-items: center;

    min-width: 0;

    margin: 0;
    padding: 0;

    list-style: none;

    gap: var(
        --navigation-item-gap,
        2px
    );
}


/* ==========================================================================
   4. NAVIGATION ITEM
   ========================================================================== */

.site-navigation__item,
.navigation__item {
    position: relative;

    display: flex;
    align-items: center;

    min-width: 0;
}


/* ==========================================================================
   5. NAVIGATION LINK
   ========================================================================== */

.site-navigation__link,
.navigation__link {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: var(
        --navigation-control-height,
        44px
    );

    padding: 8px 12px;

    border: 0;

    background: transparent;

    color: inherit;

    font: inherit;

    font-weight: var(
        --navigation-font-weight,
        500
    );

    line-height: 1.2;

    text-align: center;

    text-decoration: none;

    white-space: nowrap;

    border-radius: var(
        --navigation-radius,
        6px
    );

    cursor: pointer;

    transition:
        color 160ms ease,
        background-color 160ms ease,
        border-color 160ms ease;
}


/* ==========================================================================
   6. LINK HOVER
   ========================================================================== */

.site-navigation__link:hover,
.navigation__link:hover {
    background: var(
        --navigation-hover-bg,
        rgba(37, 99, 235, 0.07)
    );

    color: var(
        --navigation-hover-color,
        var(--primary-color, #2563eb)
    );
}


/* ==========================================================================
   7. LINK FOCUS
   ========================================================================== */

.site-navigation__link:focus-visible,
.navigation__link:focus-visible {
    outline: 2px solid var(
        --focus-color,
        #2563eb
    );

    outline-offset: 2px;
}


/* ==========================================================================
   8. ACTIVE NAVIGATION
   ========================================================================== */

.site-navigation__link[aria-current="page"],
.navigation__link[aria-current="page"],

.site-navigation__item.is-active > .site-navigation__link,
.navigation__item.is-active > .navigation__link {
    color: var(
        --navigation-active-color,
        var(--primary-color, #2563eb)
    );

    background: var(
        --navigation-active-bg,
        rgba(37, 99, 235, 0.08)
    );

    font-weight: 600;
}


/* ==========================================================================
   9. ACTIVE INDICATOR
   ========================================================================== */

.site-navigation__link[aria-current="page"]::after,
.navigation__link[aria-current="page"]::after,

.site-navigation__item.is-active > .site-navigation__link::after,
.navigation__item.is-active > .navigation__link::after {
    content: "";

    position: absolute;

    inset-inline: 10px;

    bottom: 2px;

    height: 2px;

    border-radius: 999px;

    background: var(
        --navigation-active-indicator,
        var(--primary-color, #2563eb)
    );
}


/* ==========================================================================
   10. NAVIGATION ICON
   ========================================================================== */

.site-navigation__icon,
.navigation__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 18px;
    height: 18px;

    flex: 0 0 auto;

    margin-inline-end: 6px;

    color: currentColor;
}


.site-navigation__icon svg,
.navigation__icon svg {
    display: block;

    width: 100%;
    height: 100%;

    fill: none;

    stroke: currentColor;
}


/* ==========================================================================
   11. NAVIGATION LABEL
   ========================================================================== */

.site-navigation__label,
.navigation__label {
    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


/* ==========================================================================
   12. DROPDOWN TRIGGER
   ========================================================================== */

.site-navigation__trigger,
.navigation__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: var(
        --navigation-control-height,
        44px
    );

    padding: 8px 10px;

    border: 0;

    background: transparent;

    color: inherit;

    font: inherit;

    font-weight: 500;

    border-radius: var(
        --navigation-radius,
        6px
    );

    cursor: pointer;

    transition:
        background-color 160ms ease,
        color 160ms ease;
}


.site-navigation__trigger:hover,
.navigation__trigger:hover {
    background: var(
        --navigation-hover-bg,
        rgba(37, 99, 235, 0.07)
    );

    color: var(
        --navigation-hover-color,
        var(--primary-color, #2563eb)
    );
}


.site-navigation__trigger:focus-visible,
.navigation__trigger:focus-visible {
    outline: 2px solid var(
        --focus-color,
        #2563eb
    );

    outline-offset: 2px;
}


/* ==========================================================================
   13. DROPDOWN ARROW
   ========================================================================== */

.site-navigation__arrow,
.navigation__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 16px;
    height: 16px;

    margin-inline-start: 4px;

    flex: 0 0 auto;

    transition:
        transform 160ms ease;
}


.site-navigation__arrow svg,
.navigation__arrow svg {
    width: 100%;
    height: 100%;

    fill: none;

    stroke: currentColor;
}


/* Open dropdown */

.site-navigation__item[aria-expanded="true"]
    .site-navigation__arrow,

.navigation__item[aria-expanded="true"]
    .navigation__arrow,

.site-navigation__item.is-open
    .site-navigation__arrow,

.navigation__item.is-open
    .navigation__arrow {
    transform: rotate(180deg);
}


/* ==========================================================================
   14. DROPDOWN CONTAINER
   ========================================================================== */

.site-navigation__dropdown,
.navigation__dropdown {
    position: absolute;

    top: calc(100% + 1px);

    inset-inline-start: 0;

    min-width: var(
        --navigation-dropdown-min-width,
        220px
    );

    max-width: min(
        90vw,
        420px
    );

    padding: 8px;

    margin: 0;

    background: var(
        --navigation-dropdown-bg,
        #ffffff
    );

    border: 1px solid var(
        --navigation-dropdown-border,
        var(--border-color, #e5e7eb)
    );

    border-radius: var(
        --navigation-dropdown-radius,
        10px
    );

    box-shadow: var(
        --navigation-dropdown-shadow,
        0 12px 32px rgba(0, 0, 0, 0.12)
    );

    visibility: hidden;

    opacity: 0;

    pointer-events: none;

    transform: translateY(-4px);

    transition:
        opacity 140ms ease,
        transform 140ms ease,
        visibility 140ms ease;

    z-index: var(
        --navigation-dropdown-z-index,
        950
    );
}


/* JS / accessibility controlled state */

.site-navigation__item[aria-expanded="true"]
    > .site-navigation__dropdown,

.navigation__item[aria-expanded="true"]
    > .navigation__dropdown,

.site-navigation__item.is-open
    > .site-navigation__dropdown,

.navigation__item.is-open
    > .navigation__dropdown {
    visibility: visible;

    opacity: 1;

    pointer-events: auto;

    transform: translateY(0);
}


/* ==========================================================================
   15. DROPDOWN LIST
   ========================================================================== */

.site-navigation__dropdown-list,
.navigation__dropdown-list {
    display: flex;
    flex-direction: column;

    gap: 2px;

    margin: 0;
    padding: 0;

    list-style: none;
}


/* ==========================================================================
   16. DROPDOWN LINK
   ========================================================================== */

.site-navigation__dropdown-link,
.navigation__dropdown-link {
    display: flex;
    align-items: center;

    width: 100%;

    min-height: 40px;

    padding: 8px 10px;

    border-radius: 6px;

    color: var(
        --navigation-dropdown-text,
        var(--text-color, #1f2937)
    );

    text-decoration: none;

    font-weight: 500;

    text-align: start;

    transition:
        background-color 150ms ease,
        color 150ms ease;
}


.site-navigation__dropdown-link:hover,
.navigation__dropdown-link:hover {
    background: var(
        --navigation-dropdown-hover-bg,
        rgba(37, 99, 235, 0.07)
    );

    color: var(
        --navigation-dropdown-hover-color,
        var(--primary-color, #2563eb)
    );
}


.site-navigation__dropdown-link:focus-visible,
.navigation__dropdown-link:focus-visible {
    outline: 2px solid var(
        --focus-color,
        #2563eb
    );

    outline-offset: -2px;
}


/* ==========================================================================
   17. DROPDOWN ICON
   ========================================================================== */

.site-navigation__dropdown-icon,
.navigation__dropdown-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 20px;
    height: 20px;

    flex: 0 0 auto;

    margin-inline-end: 8px;
}


.site-navigation__dropdown-icon svg,
.navigation__dropdown-icon svg {
    width: 100%;
    height: 100%;

    fill: none;

    stroke: currentColor;
}


/* ==========================================================================
   18. DROPDOWN DESCRIPTION
   ========================================================================== */

.site-navigation__dropdown-description,
.navigation__dropdown-description {
    display: block;

    margin-top: 2px;

    color: var(
        --muted-color,
        #6b7280
    );

    font-size: 0.8125rem;

    line-height: 1.4;
}


/* ==========================================================================
   19. MEGA MENU
   ========================================================================== */

.site-navigation__mega-menu,
.navigation__mega-menu {
    position: absolute;

    top: calc(100% + 1px);

    inset-inline: 0;

    width: min(
        100vw,
        var(--navigation-mega-max-width, 1440px)
    );

    margin-inline: auto;

    padding: var(
        --navigation-mega-padding,
        20px
    );

    background: var(
        --navigation-mega-bg,
        #ffffff
    );

    border: 1px solid var(
        --navigation-mega-border,
        var(--border-color, #e5e7eb)
    );

    border-radius: 0 0 12px 12px;

    box-shadow: var(
        --navigation-mega-shadow,
        0 18px 40px rgba(0, 0, 0, 0.12)
    );

    visibility: hidden;

    opacity: 0;

    pointer-events: none;

    transform: translateY(-4px);

    transition:
        opacity 140ms ease,
        transform 140ms ease,
        visibility 140ms ease;

    z-index: var(
        --navigation-mega-z-index,
        940
    );
}


.site-navigation__item[aria-expanded="true"]
    > .site-navigation__mega-menu,

.navigation__item[aria-expanded="true"]
    > .navigation__mega-menu,

.site-navigation__item.is-open
    > .navigation__mega-menu,

.navigation__item.is-open
    > .navigation__mega-menu {
    visibility: visible;

    opacity: 1;

    pointer-events: auto;

    transform: translateY(0);
}


/* ==========================================================================
   20. MEGA MENU GRID
   ========================================================================== */

.site-navigation__mega-grid,
.navigation__mega-grid {
    display: grid;

    grid-template-columns: repeat(
        auto-fit,
        minmax(180px, 1fr)
    );

    gap: var(
        --navigation-mega-gap,
        20px
    );

    min-width: 0;
}


/* ==========================================================================
   21. MEGA MENU COLUMN
   ========================================================================== */

.site-navigation__mega-column,
.navigation__mega-column {
    min-width: 0;
}


/* ==========================================================================
   22. MEGA MENU HEADING
   ========================================================================== */

.site-navigation__mega-heading,
.navigation__mega-heading {
    margin: 0 0 8px;

    color: var(
        --navigation-heading-color,
        var(--text-color, #111827)
    );

    font-size: 0.9375rem;

    font-weight: 700;

    line-height: 1.3;
}


/* ==========================================================================
   23. MEGA MENU LIST
   ========================================================================== */

.site-navigation__mega-list,
.navigation__mega-list {
    display: flex;
    flex-direction: column;

    gap: 2px;

    margin: 0;
    padding: 0;

    list-style: none;
}


/* ==========================================================================
   24. MEGA MENU LINK
   ========================================================================== */

.site-navigation__mega-link,
.navigation__mega-link {
    display: flex;
    align-items: center;

    width: 100%;

    min-height: 36px;

    padding: 7px 8px;

    border-radius: 6px;

    color: var(
        --navigation-mega-link-color,
        var(--text-color, #374151)
    );

    text-decoration: none;

    font-size: 0.875rem;

    line-height: 1.3;

    transition:
        background-color 150ms ease,
        color 150ms ease;
}


.site-navigation__mega-link:hover,
.navigation__mega-link:hover {
    background: var(
        --navigation-mega-link-hover-bg,
        rgba(37, 99, 235, 0.07)
    );

    color: var(
        --primary-color,
        #2563eb
    );
}


.site-navigation__mega-link:focus-visible,
.navigation__mega-link:focus-visible {
    outline: 2px solid var(
        --focus-color,
        #2563eb
    );

    outline-offset: -2px;
}


/* ==========================================================================
   25. "VIEW ALL" / SECONDARY ACTION
   ========================================================================== */

.site-navigation__view-all,
.navigation__view-all {
    display: inline-flex;
    align-items: center;

    margin-top: 8px;

    padding: 7px 8px;

    border-radius: 6px;

    color: var(
        --primary-color,
        #2563eb
    );

    font-size: 0.875rem;

    font-weight: 600;

    text-decoration: none;
}


.site-navigation__view-all:hover,
.navigation__view-all:hover {
    background: var(
        --navigation-hover-bg,
        rgba(37, 99, 235, 0.07)
    );
}


/* ==========================================================================
   26. RIGHT SIDE ACTIONS
   ========================================================================== */

.site-navigation__actions,
.navigation__actions {
    display: flex;
    align-items: center;

    margin-inline-start: auto;

    min-width: 0;

    gap: var(
        --navigation-actions-gap,
        4px
    );
}


/* ==========================================================================
   27. ACTION BUTTON
   ========================================================================== */

.site-navigation__action,
.navigation__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: var(
        --navigation-control-height,
        44px
    );

    padding: 7px 10px;

    border: 1px solid transparent;

    background: transparent;

    color: inherit;

    font: inherit;

    font-weight: 500;

    text-decoration: none;

    border-radius: var(
        --navigation-radius,
        6px
    );

    white-space: nowrap;

    cursor: pointer;

    transition:
        background-color 150ms ease,
        color 150ms ease,
        border-color 150ms ease;
}


.site-navigation__action:hover,
.navigation__action:hover {
    background: var(
        --navigation-hover-bg,
        rgba(37, 99, 235, 0.07)
    );

    color: var(
        --primary-color,
        #2563eb
    );
}


.site-navigation__action:focus-visible,
.navigation__action:focus-visible {
    outline: 2px solid var(
        --focus-color,
        #2563eb
    );

    outline-offset: 2px;
}


/* ==========================================================================
   28. PRIMARY CTA
   ========================================================================== */

.site-navigation__primary-action,
.navigation__primary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: var(
        --navigation-control-height,
        44px
    );

    padding: 8px 14px;

    border: 1px solid var(
        --primary-color,
        #2563eb
    );

    border-radius: var(
        --button-radius,
        7px
    );

    background: var(
        --primary-color,
        #2563eb
    );

    color: var(
        --primary-contrast,
        #ffffff
    );

    font-weight: 600;

    text-decoration: none;

    white-space: nowrap;

    transition:
        background-color 150ms ease,
        border-color 150ms ease,
        transform 150ms ease;
}


.site-navigation__primary-action:hover,
.navigation__primary-action:hover {
    background: var(
        --primary-hover-color,
        #1d4ed8
    );

    border-color: var(
        --primary-hover-color,
        #1d4ed8
    );

    color: var(
        --primary-contrast,
        #ffffff
    );

    transform: translateY(-1px);
}


.site-navigation__primary-action:focus-visible,
.navigation__primary-action:focus-visible {
    outline: 2px solid var(
        --focus-color,
        #2563eb
    );

    outline-offset: 3px;
}


/* ==========================================================================
   29. MOBILE MENU TRIGGER
   ========================================================================== */

.site-navigation__menu-toggle,
.navigation__menu-toggle {
    display: none;

    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    flex: 0 0 auto;

    padding: 0;

    border: 1px solid var(
        --navigation-toggle-border,
        var(--border-color, #e5e7eb)
    );

    border-radius: var(
        --navigation-radius,
        6px
    );

    background: var(
        --navigation-toggle-bg,
        #ffffff
    );

    color: var(
        --navigation-toggle-color,
        var(--text-color, #1f2937)
    );

    cursor: pointer;

    transition:
        background-color 150ms ease,
        color 150ms ease,
        border-color 150ms ease;
}


.site-navigation__menu-toggle:hover,
.navigation__menu-toggle:hover {
    background: var(
        --navigation-hover-bg,
        rgba(37, 99, 235, 0.07)
    );

    color: var(
        --primary-color,
        #2563eb
    );
}


.site-navigation__menu-toggle:focus-visible,
.navigation__menu-toggle:focus-visible {
    outline: 2px solid var(
        --focus-color,
        #2563eb
    );

    outline-offset: 2px;
}


/* ==========================================================================
   30. HAMBURGER ICON
   ========================================================================== */

.site-navigation__menu-icon,
.navigation__menu-icon {
    position: relative;

    width: 20px;
    height: 14px;
}


.site-navigation__menu-icon::before,
.site-navigation__menu-icon::after,
.navigation__menu-icon::before,
.navigation__menu-icon::after {
    content: "";

    position: absolute;

    inset-inline: 0;

    height: 2px;

    border-radius: 999px;

    background: currentColor;

    transition:
        transform 160ms ease,
        top 160ms ease,
        bottom 160ms ease;
}


.site-navigation__menu-icon::before,
.navigation__menu-icon::before {
    top: 0;
}


.site-navigation__menu-icon::after,
.navigation__menu-icon::after {
    bottom: 0;
}


.site-navigation__menu-icon,
.navigation__menu-icon {
    border-top: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
}


/* ==========================================================================
   31. MOBILE OPEN STATE
   ========================================================================== */

.site-navigation__menu-toggle[aria-expanded="true"]
    .site-navigation__menu-icon,

.navigation__menu-toggle[aria-expanded="true"]
    .navigation__menu-icon {
    border-color: transparent;
}


.site-navigation__menu-toggle[aria-expanded="true"]
    .site-navigation__menu-icon::before,

.navigation__menu-toggle[aria-expanded="true"]
    .navigation__menu-icon::before {
    top: 5px;

    transform: rotate(45deg);
}


.site-navigation__menu-toggle[aria-expanded="true"]
    .site-navigation__menu-icon::after,

.navigation__menu-toggle[aria-expanded="true"]
    .navigation__menu-icon::after {
    bottom: 5px;

    transform: rotate(-45deg);
}


/* ==========================================================================
   32. NAVIGATION LOADING STATE
   ========================================================================== */

.site-navigation[aria-busy="true"],
.navigation[aria-busy="true"] {
    cursor: progress;
}


.site-navigation__loading,
.navigation__loading {
    display: inline-flex;
    align-items: center;

    min-width: 80px;
    min-height: 30px;

    border-radius: 5px;

    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.04) 25%,
        rgba(0, 0, 0, 0.09) 50%,
        rgba(0, 0, 0, 0.04) 75%
    );

    background-size: 200% 100%;

    animation: navigation-loading 1.4s ease-in-out infinite;
}


@keyframes navigation-loading {
    from {
        background-position: 200% 0;
    }

    to {
        background-position: -200% 0;
    }
}


/* ==========================================================================
   33. EMPTY NAVIGATION STATE
   ========================================================================== */

.site-navigation[data-state="empty"] .site-navigation__list,
.navigation[data-state="empty"] .navigation__list {
    min-height: 1px;
}


/*
   Important:
   Empty state does not create fallback categories or links.
*/


/* ==========================================================================
   34. ERROR STATE
   ========================================================================== */

.site-navigation[data-state="error"],
.navigation[data-state="error"] {
    border-bottom-color: var(
        --danger-color,
        #dc2626
    );
}


/* ==========================================================================
   35. DISABLED ITEMS
   ========================================================================== */

.site-navigation [aria-disabled="true"],
.navigation [aria-disabled="true"],

.site-navigation :disabled,
.navigation :disabled {
    opacity: 0.55;

    cursor: not-allowed;

    pointer-events: none;
}


/* ==========================================================================
   36. TABLET
   ========================================================================== */

@media (max-width: 1023px) {

    .site-navigation__inner,
    .navigation__inner {
        min-height: 46px;

        padding-inline: var(
            --container-padding-tablet,
            14px
        );
    }

    .site-navigation__link,
    .navigation__link,

    .site-navigation__trigger,
    .navigation__trigger {
        padding-inline: 9px;

        font-size: 0.875rem;
    }

    .site-navigation__mega-grid,
    .navigation__mega-grid {
        grid-template-columns: repeat(
            3,
            minmax(160px, 1fr)
        );
    }

    .site-navigation__dropdown,
    .navigation__dropdown {
        min-width: 200px;
    }
}


/* ==========================================================================
   37. MOBILE
   ========================================================================== */

@media (max-width: 767px) {

    .site-navigation,
    .navigation,
    [data-component="navigation"] {
        border-bottom: 0;
    }

    .site-navigation__inner,
    .navigation__inner {
        min-height: 48px;

        padding-inline: var(
            --container-padding-mobile,
            10px
        );

        justify-content: space-between;
    }

    .site-navigation__menu-toggle,
    .navigation__menu-toggle {
        display: inline-flex;
    }

    .site-navigation__list,
    .navigation__list {
        position: absolute;

        top: 100%;

        inset-inline: 0;

        display: none;

        flex-direction: column;

        align-items: stretch;

        width: 100%;

        max-height: calc(
            100vh - var(--navigation-mobile-top, 100px)
        );

        overflow-y: auto;

        padding: 8px;

        background: var(
            --navigation-mobile-bg,
            #ffffff
        );

        border-top: 1px solid var(
            --border-color,
            #e5e7eb
        );

        box-shadow: var(
            --navigation-mobile-shadow,
            0 12px 28px rgba(0, 0, 0, 0.12)
        );

        z-index: var(
            --navigation-mobile-z-index,
            920
        );
    }


    .site-navigation[data-open="true"]
        .site-navigation__list,

    .navigation[data-open="true"]
        .navigation__list,

    .site-navigation__menu-toggle[aria-expanded="true"]
        ~ .site-navigation__list,

    .navigation__menu-toggle[aria-expanded="true"]
        ~ .navigation__list {
        display: flex;
    }


    .site-navigation__item,
    .navigation__item {
        display: block;

        width: 100%;
    }


    .site-navigation__link,
    .navigation__link,

    .site-navigation__trigger,
    .navigation__trigger {
        width: 100%;

        min-height: 44px;

        justify-content: flex-start;

        padding: 10px 12px;

        text-align: start;
    }


    .site-navigation__link[aria-current="page"]::after,
    .navigation__link[aria-current="page"]::after,

    .site-navigation__item.is-active
        > .site-navigation__link::after,

    .navigation__item.is-active
        > .navigation__link::after {
        inset-inline-start: 2px;
        inset-inline-end: auto;

        top: 8px;
        bottom: 8px;

        width: 3px;
        height: auto;
    }


    .site-navigation__dropdown,
    .navigation__dropdown,

    .site-navigation__mega-menu,
    .navigation__mega-menu {
        position: static;

        width: 100%;

        max-width: none;

        min-width: 0;

        margin: 0;

        padding: 4px;

        border: 0;

        border-radius: 0;

        box-shadow: none;

        transform: none;
    }


    .site-navigation__item[aria-expanded="true"]
        > .site-navigation__dropdown,

    .navigation__item[aria-expanded="true"]
        > .navigation__dropdown,

    .site-navigation__item.is-open
        > .site-navigation__dropdown,

    .navigation__item.is-open
        > .navigation__dropdown,

    .site-navigation__item[aria-expanded="true"]
        > .site-navigation__mega-menu,

    .navigation__item[aria-expanded="true"]
        > .navigation__mega-menu,

    .site-navigation__item.is-open
        > .site-navigation__mega-menu,

    .navigation__item.is-open
        > .navigation__mega-menu {
        transform: none;
    }


    .site-navigation__mega-grid,
    .navigation__mega-grid {
        grid-template-columns: 1fr;

        gap: 4px;
    }


    .site-navigation__mega-heading,
    .navigation__mega-heading {
        padding-inline: 8px;
    }


    .site-navigation__actions,
    .navigation__actions {
        display: none;
    }


    .site-navigation__primary-action,
    .navigation__primary-action {
        width: 100%;

        justify-content: center;
    }
}


/* ==========================================================================
   38. SMALL MOBILE
   ========================================================================== */

@media (max-width: 479px) {

    .site-navigation__inner,
    .navigation__inner {
        padding-inline: 8px;
    }

    .site-navigation__menu-toggle,
    .navigation__menu-toggle {
        width: 40px;
        height: 40px;
    }

    .site-navigation__link,
    .navigation__link,

    .site-navigation__trigger,
    .navigation__trigger {
        min-height: 42px;

        padding-inline: 10px;
    }
}


/* ==========================================================================
   39. LARGE SCREEN
   ========================================================================== */

@media (min-width: 1440px) {

    .site-navigation__inner,
    .navigation__inner {
        padding-inline: var(
            --container-padding-large,
            20px
        );
    }
}


/* ==========================================================================
   40. RTL
   ========================================================================== */

[dir="rtl"] .site-navigation__inner,
[dir="rtl"] .navigation__inner {
    direction: rtl;
}


[dir="rtl"] .site-navigation__link,
[dir="rtl"] .navigation__link {
    text-align: start;
}


[dir="rtl"] .site-navigation__active::after,
[dir="rtl"] .navigation__active::after {
    inset-inline-start: auto;
    inset-inline-end: 0;
}


/* ==========================================================================
   41. FORCED COLORS / HIGH CONTRAST
   ========================================================================== */

@media (forced-colors: active) {

    .site-navigation,
    .navigation {
        background: Canvas;
        color: CanvasText;

        border-color: CanvasText;
    }

    .site-navigation__link,
    .navigation__link,

    .site-navigation__trigger,
    .navigation__trigger,

    .site-navigation__action,
    .navigation__action {
        color: ButtonText;
    }

    .site-navigation__dropdown,
    .navigation__dropdown,

    .site-navigation__mega-menu,
    .navigation__mega-menu {
        background: Canvas;

        color: CanvasText;

        border-color: CanvasText;
    }

    .site-navigation__dropdown-link,
    .navigation__dropdown-link,

    .site-navigation__mega-link,
    .navigation__mega-link {
        color: LinkText;
    }

    .site-navigation__primary-action,
    .navigation__primary-action {
        background: ButtonFace;

        color: ButtonText;

        border-color: ButtonText;
    }

    .site-navigation__menu-toggle,
    .navigation__menu-toggle {
        background: ButtonFace;

        color: ButtonText;

        border-color: ButtonText;
    }
}


/* ==========================================================================
   42. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .site-navigation *,
    .navigation * {
        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

        scroll-behavior: auto !important;
    }
}


/* ==========================================================================
   43. PRINT
   ========================================================================== */

@media print {

    .site-navigation,
    .navigation,
    [data-component="navigation"] {
        position: static;

        border: 0;

        background: transparent !important;

        box-shadow: none !important;

        color: #000 !important;
    }

    .site-navigation__dropdown,
    .navigation__dropdown,

    .site-navigation__mega-menu,
    .navigation__mega-menu,

    .site-navigation__menu-toggle,
    .navigation__menu-toggle {
        display: none !important;
    }
}