/** Shopify CDN: Minification failed

Line 402:0 Unexpected "}"

**/
#HeaderGroup[data-color=Dark] {
    .ClickDrawer {            
        @media screen and (min-width: 770px){
            .HeaderLogo,.HeaderNavigation[data-state=InActive],.Icon,.CartIconTracker{
                --Text: var(--DarkText) ;
                --LinkTextColor: var(--DarkText);
                color: var(--Text);
            }
        }
    }
    &[data-drawer=InActive] {
        .ClickDrawer {
            @media screen and (max-width: 769px){
                .HeaderLogo, .HeaderNavigation[data-state=InActive],.Icon,.CartIconTracker{
                    --Text: var(--DarkText) ;
                    --LinkTextColor: var(--DarkText);
                    color: var(--Text);
                }
            }
        }
    }
}
#HeaderGroup[data-color=Light] {
    .ClickDrawer { 
        @media screen and (min-width: 770px){
            .HeaderLogo,.HeaderNavigation[data-state=InActive],.Icon,.CartIconTracker{
                color: var(--Text);
            }
        }
    }
    &[data-drawer=InActive] {
        .ClickDrawer {
            @media screen and (max-width: 769px){
                .HeaderLogo,.HeaderNavigation[data-state=InActive],.Icon,.CartIconTracker{
                    color: var(--Text);
                }
            }
        }
    }
}


.ClickDrawer {
    pointer-events: none;
    background: transparent;
    padding: 0;
    .Wrappers {
        padding: var(--GlobalPadding);
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        max-width: 100vw;
        width: 100%;
    }
    .Wrapper {
        width: 100%;
        display: flex;
        flex-direction: column;
        pointer-events: none;
        &.LogoWrapper {
            justify-content: var(--Alignment);
            translate: var(--Translate);
        }
        .Icon:not(.Icon-Header) {
            @media screen and (max-width: 769px){
                height: var(--IconSize);
            }
        }
        .Icon-Header {
            @media screen and (max-width: 769px){
                .Logo {
                    width: 100%;
                }
            }
        }
        &:nth-of-type(2) {
            align-items: center;
        }
        &:nth-of-type(3) {
            align-items: flex-end;
            @media screen and (max-width: 769px){
                flex-direction: row;
                justify-content: flex-end;
            }
        }
        &.IconsWrapper {
            gap: 12px;
            /* TODO BUILD CONTROL FOR ICON SPACING*/
        }
    }
    .Announcement-Bar {
        pointer-events: all;
    }
    .HeaderNavigation, .HeaderLogo  {
        display: inline-flex;
        flex-direction: column;
        align-items: var(--Alignment);
        pointer-events: all;
    }
    .HeaderNavigation[data-state="Active"], .HeaderLogo  {
        position: relative;
        z-index: 2;
    }
    .HeaderNavigation {
        width: var(--DrawerWidth);
        position: relative;
        z-index: 1;
        &>.Link:not(.Icon){
            max-width: calc(var(--DrawerWidth) - var(--PaddingLeft));
            overflow: hidden;
        }
    }
    .HeaderNavigation[data-drawer='right'] {
        align-items: flex-end;
    }
    .HeaderNavigation[data-drawer='left'] {
        @media screen and (max-width: 769px){
            width: auto;
            height: 100%;
            flex-direction: row;
            justify-content: flex-start;
        }
    }
    .HeaderNavigation {
        gap: var(--Gap);
        .Drawer {
            width: var(--DrawerWidth);
            height: 100%;
            position: fixed;
            display: flex;
            flex-direction: column;
            gap: var(--Gap);
            background: var(--Background);
            z-index: -1;
            transition: var(--MainTransition);
            @media screen and (max-width: 769px){
                padding: var(--GlobalPadding);
                padding-top: var(--HeaderHeight);
                width: 100%;
            }
        }
        .SubDrawer {
            padding: var(--GlobalPadding);
            background: var(--Background);
            /* border-inline: 1px solid var(--Text); */
            position: fixed;
            height: 100%;
            width: var(--OverlayWidth);
            transition: var(--MainTransition);
            display: flex;
            flex-direction: column;
            z-index: -2;
            gap: var(--Gap);
            padding-top: calc(var(--PaddingTop) + var(--AnnouncementBarHeight));
            @media screen and (max-width: 769px){
                /* max-width: calc(100vw - var(--DrawerWidth)); */
                width: 100%;
                padding-top: var(--HeaderHeight);
                width: 100%;
                z-index: 0;
            }
            [data-sub-closer] {
                height: auto;
                padding: var(--GlobalPadding);
                padding-bottom: 10px;
            }
            .ImageElement {
                height: auto;
            }
            .Image {
                width: 100%;
                height: unset;
            }
            .MediaLink {
                padding: var(--GlobalPadding);
            }
        }
        .Tier3 {
            display: flex;
            flex-direction: column;
            gap: var(--Gap);
            padding-top: var(--Gap);
            @media screen and (max-width: 769px) {
                gap: unset;
                padding-top: unset;
            }
        }
        &[data-drawer='left'] {
            .Drawer{
                top: 0;
                left: 0;
            }
            .SubDrawer {
                left: 0;
                top: 0;
                translate: -100% 0;
                border-left: var(--BorderWidth) solid var(--Text);
                @media screen and (max-width: 769px){                       
                    border: none;
                }
                &[data-state='Active'] {
                    translate: var(--DrawerWidth) 0;
                    @media screen and (max-width: 769px){
                        translate: 0 0;
                    }
                    .SubDrawer {
                        left: unset;
                        right: 0;
                        translate: var(--SubDrawerWidth) 0;
                    }
                }
                &[data-state='InActive'] {
                    translate: -100% 0;
                }
                &[data-state]{
                    .SubDrawer {
                        @media screen and (max-width: 769px){                               
                            position: static;
                            left: unset;
                            right: unset;
                            translate: unset;
                            padding: unset;
                            padding-top: 20px;
                            gap: 10px;
                        }
                    }
                }
                
            }
        }
        &[data-drawer='right'] {
            .Drawer{
                top: 0;
                right: 0;
            }
            .SubDrawer {
                right: 0;
                top: 0;
                translate: 100% 0;
                align-items: flex-end;
                border-right: var(--BorderWidth) solid var(--Text);
                &[data-state='Active'] {
                    translate: calc(-1 * var(--DrawerWidth)) 0;
                    @media screen and (max-width: 769px){
                        translate: 0 0;
                    }
                }
                &[data-state='InActive'] {
                    translate: 100% 0;
                }
                
            }
        }
        &[data-state='InActive'] {
            &[data-drawer='left'] {
                .Drawer{
                    translate: -100% 0;
                }
            }
            &[data-drawer='right'] {
                .Drawer{
                    translate: 100% 0;
                }
            }
        }
        .ToggleOptions {
            display: flex;
            gap: 3px;
            width: 100%;
        }
        .ToggleSwitch {
            &[data-state="InActive"]:not(:hover) {
                color: var(--LinkTextColor);
            }
            &[data-state="Active"] {
                color: var(--LinkTextColorHover);
            }
        }
        .ToggleReceiver {
            width: 100%;
            &[data-state="InActive"] {
                display: none;
            }
            &[data-state="Active"] {
                display: initial;
            }
        }
    }
    .Cover{
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100%;
        opacity: 0;
        pointer-events: none;
        z-index: -3;
        transition: var(--MainTransition);
        &:after {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: inherit;
            transition: inherit;
            content: '';
            display: block;
            --BackdropOpacity: .2;
            opacity: var(--BackdropOpacity);
            background: var(--Background);
        }
        &[data-state='Active'] {
            opacity: 1;
            pointer-events: all;
        }
        &[data-state='InActive'] {
            opacity: 0;
            pointer-events: none;
        }
    }
    .IconHolder {
        height: 100%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        pointer-events: all;
        @media (hover: hover) and (pointer: fine) {
            cursor: pointer;
            z-index: 1;
            justify-content: left;
            flex-direction: unset;
        }
    }
    .Icon {
        pointer-events: all;
    }
    .AboveDrawer {
        @media screen and (max-width: 769px){
            z-index: 2;
        }
    }
}

.ClickDrawer{
    pointer-events: none;
    background: transparent;
    padding: 0;
    display: flex;
    flex-direction: row;
    pointer-events: none;
    justify-content: space-between;
    .Row{
        display: flex;
        flex-direction: row;
        padding: var(--GlobalPadding);
        gap: 60px;
    }
    .HeaderNavigation {
        display: flex;
        flex-direction: row;
        gap: 60px;
    }

    .Drawer {
        width: var(--DrawerWidth);
        height: 100%;
        position: fixed;
        display: flex;
        flex-direction: column;
        gap: var(--Gap);
        background: var(--Background);
        z-index: -1;
        transition: var(--MainTransition);
        @media screen and (max-width: 769px){
            padding: var(--GlobalPadding);
            padding-top: var(--HeaderHeight);
            width: 100%;
        }
    }
}

@media screen and (max-width: 769px) {
  .ClickDrawer .Icon, 
  .ClickDrawer .Icon-Cart-Link,
  .ClickDrawer .CartIconTracker {
    color: #F7070C !important; /* Your specific red hex code */
    fill: #F7070C !important;
  }
}
  /* Targets the logo link specifically within the click drawer header */
  .ClickDrawer .Logo.Link,
  .ClickDrawer .Logo.Link svg {
    color: #F7070C !important; /* Replace with your specific red hex code */
    fill: #F7070C !important;   /* Use fill if the logo is an SVG */
  }
}

.MenuLayer {
    .HeaderDrawerLinks {
        display: flex;
        flex-direction: column;
        gap: var(--Gap);
        .Link {
            color: var(--LinkTextColor);
        }
        .Title {
            margin-bottom: var(--Gap);
        }
        &:hover {
            .Link {
                color: var(--LinkTextColorHover);
                &:hover {
                    color: var(--LinkTextColor);
                }
            }
        }
    }
    padding-top: 76px;
}