/** Shopify CDN: Minification failed

Line 361:3 Unexpected ","
Line 685:2 Expected identifier but found "."

**/
:root {
  font-size: clamp(55%, min(.5vw, .8vh), 62.5%);
  /* GLOBAL TRANSITIONS */
  --TransitionDuration: 500ms;
  --TransitionType: ease-in-out;
  --MainTransition: all var(--TransitionDuration) var(--TransitionType);

  /* GLOBAL CONSTRAINT */
  --Constraint: 'unset';
  @media screen and (max-width: 769px){
    --Constraint: 'unset';
  }

  --ProductAspectRatio: 75/100;
  @media screen and (max-width: 769px){
    --ProductAspectRatio: 75/100;
  }

  /*  GLOBAL PADDINGS */
  --PaddingXS: 4px;
  --PaddingXSMobile: 2px;
  --PaddingS: 8px;
  --PaddingSMobile: 8px;
  --PaddingM: 16px;
  --PaddingMMobile: 8px;
  --PaddingL: 20px;
  --PaddingLMobile: 12px;
  --PaddingXL: 32px;
  --PaddingXLMobile: 16px;
  
  --PaddingTop:
    
        var(--PaddingXL)
        
  ;
  --PaddingRight:
    
        var(--PaddingXL)
        
  ;
  --PaddingBottom:
    
        var(--PaddingXL)
        
  ;
  --PaddingLeft:
    
        var(--PaddingXLMobile)
        
  ;
  
  @media screen and (max-width: 769px) {
    --PaddingTop:
      
          var(--PaddingXLMobile)
          
    ;
    --PaddingRight:
      
          var(--PaddingXLMobile)
          
    ;
    --PaddingBottom:
      
          var(--PaddingXLMobile)
          
    ;
    --PaddingLeft:
      
          var(--PaddingXLMobile)
          
    ;
  }
  
  --GlobalPadding: var(--PaddingTop) var(--PaddingRight) var(--PaddingBottom) var(--PaddingLeft);

  --OverlayWidth: 40vw;
}

.Icon-Loader {
  --TransitionDuration: 1000ms;
}


.Spacer {
  background-color: #F9FCFB; /* This adds the requested background color */
  height: var(--SpacerHeight); /* Ensures the height variable is applied */
  width: 100%;

  &.None{
    --SpacerHeight: 0px;
    @media (max-width: 769px) {
      --SpacerHeight: 0px;
    }
  }
  &.One {
    --SpacerHeight: 70px;
    @media (max-width: 769px) {
      --SpacerHeight: 40px;
    }
  }
  &.Two {
    --SpacerHeight: 140px;
    @media (max-width: 769px) {
      --SpacerHeight: 80px;
    }
  }
  &.Three {
    --SpacerHeight: 210px;
    @media (max-width: 769px) {
      --SpacerHeight: 120px;
    }
  }
  &.Four {
    --SpacerHeight: 280px;
    @media (max-width: 769px) {
      --SpacerHeight: 160px;
    }
  }
  &.Five {
    --SpacerHeight: 350px;
    @media (max-width: 769px) {
      --SpacerHeight: 200px;
    }
  }
}
.SizeGuide {
  --Gap: 20px;
  --GlobalPadding: 20px 0px;
  @media screen and (max-width: 769px) {
    --Gap: 8px;
    --GlobalPadding: ;
  }
}

.Accordion {
  --GlobalPadding: 0px 0px 10px 0px;
  @media screen and (max-width: 769px) {
    --GlobalPadding: ;
  }
  
  .AccordionTitle {
    --GlobalPadding: ;
    @media screen and (max-width: 769px) {
      --GlobalPadding: 0px 0px 16px 0px;
    }
    
  }
  .AccordionContent {
    .ContentWrapper {
      --GlobalPadding: 10px 10px 0px 10px;
      @media screen and (max-width: 769px) {
        --GlobalPadding: 0px 16px 16px 16px;
      }
    }
    
  }

}
.Accordion.Secondary {
  --GlobalPadding: 0px 0px 10px 0px;
  @media screen and (max-width: 769px) {
    --GlobalPadding: ;
  }
  
  .AccordionTitle {
    --GlobalPadding: ;
    @media screen and (max-width: 769px) {
      --GlobalPadding: 0px 0px 16px 0px;
    }
    
  }
  .AccordionContent {
    --GlobalPadding: 10px 0px 0px 0px;
    @media screen and (max-width: 769px) {
      --GlobalPadding: 16px 0px 0px 0px;
    }
    
  }

}
.DropDown {
  --GlobalPadding: 10px 0px 0px 0px;
  @media screen and (max-width: 769px) {
    --GlobalPadding: 10px 0px 0px 0px;
  }
  
  .DropDownTitle {
    --GlobalPadding: 0px 0px 10px 0px;
    @media screen and (max-width: 769px) {
      --GlobalPadding: 0px 0px 10px 0px;
    }
    
  }
  .DropDownContent {
    border-radius: 0;
    @media screen and (max-width: 769px) {
      border-radius: 0;
    }
    
    border-radius: 0;
  }
  .DropDownContentWrapper {
    --GlobalPadding: 15px;
    @media screen and (max-width: 769px) {
      --GlobalPadding: 10px;;
    }
  }
}

/*  FORM SETTINGS */
.FormWrapper {
  --Alignment: flex-start;
}
.Form {
  
    --Constraint: 50vw;
    @media screen and (max-width: 769px) {
      --Constraint: 'unset';
    }
  
  --Gap: 10px;
  @media screen and (max-width: 769px) {
    --Gap: 16px;
  }
  --GlobalPadding: 20px 0px;
  @media screen and (max-width: 769px) {
    --GlobalPadding: 16px 0px 16px 0px;
  }
  --BorderRadius: ;
  @media screen and (max-width: 769px) {
    --BorderRadius: ;
  }
}
.FormRow {
  --GlobalPadding: ;
  @media screen and (max-width: 769px) {
    --GlobalPadding: ;
  }
  &.Buttons {
    --Gap: 10px;
    @media screen and (max-width: 769px) {
      --Gap: 10px;
    }
    
      .Button {
        min-width: 100%;
        width: 100%;
      }
    
  }
}
.FormField input {
  --GlobalPadding: 0px 0px 10px 0px;
  @media screen and (max-width: 769px) {
    --GlobalPadding: 0px 0px 8px 0px;
  }
}

/* ICON SETTINGS */
.Icon {
  --IconSize: 50px;
  @media screen and (max-width: 769px) {
    --IconSize: 15px;
  }
  &.Icon-Header {
    --IconSize: 180px;
    @media screen and (max-width: 769px) {
      --IconSize: 150px;
    }
  }
  &.Icon-LowerMark {
    --IconSize: 90px;
    @media screen and (max-width: 769px) {
      --IconSize: 55px;
    }
  }
  &.Icon-Loader {
    --IconSize: 20px;
    @media screen and (max-width: 769px) {
      --IconSize: 16px;
    }
  }
  &.Icon-Logout {
    --IconSize: 16px;
    @media screen and (max-width: 769px) {
      --IconSize: 16px;
    }
  }
  &.Icon-Close {
    --IconSize: 16px;
    @media screen and (max-width: 769px) {
      --IconSize: 15px;
    }
  }
  &.Icon-Close-Small {
    --IconSize: 30px;
    @media screen and (max-width: 769px) {
      --IconSize: ;
    }
  }
  &.Icon-Cart {
    --IconSize: 16px;
    @media screen and (max-width: 769px) {
      --IconSize: 20px;
    }
  }
  &.Icon-Search {
    --IconSize: 16px;
    @media screen and (max-width: 769px) {
      --IconSize: 20px;
    }
  }
  &.Icon-Hamburger {
    --IconSize: 16px;
    @media screen and (max-width: 769px) {
      --IconSize: 18px;
    }
  }
  &.Icon-Arrow {
    --IconSize: 20px;
    @media screen and (max-width: 769px) {
      --IconSize: 20px;
    }
  }
  &.Icon-Discount {
    --IconSize: 16px;
    @media screen and (max-width: 769px) {
      --IconSize: 16px;
    }
  }
  &.Icon-Minus {
    --IconSize: 16px;
    @media screen and (max-width: 769px) {
      --IconSize: 30px;
    }
  }
  &.Icon-Plus {
    --IconSize: 20px;
    @media screen and (max-width: 769px) {
      --IconSize: 16px;
    }
  }
  &.Icon-Radio {
    --IconSize: 16px;
    @media screen and (max-width: 769px) {
      --IconSize: 14px;
    }
  }
  &.Icon-Checkbox {
    --IconSize: 16px;
    @media screen and (max-width: 769px) {
      --IconSize: 14px;
    }
  },
  &.Icon-SizeGuide {
    --IconSize: 20px;
    @media screen and (max-width: 769px) {
      --IconSize: 10px;
    }
  }
  &.Icon-BreadCrumb {
    --IconSize: 20px;
    @media screen and (max-width: 769px) {
      --IconSize: 10px;
    }
  }
}


/* ANIMATION TIMINGS *//* IN VIEW */.FadeIn {
    transition-duration: 0ms;
    transition-timing-function: linear;
  }

  .SlideUp,
  .SlideDown,
  .SlideLeft,
  .SlideRight {
    transition-duration: 0ms;
    transition-timing-function: linear;
  }

  .AnimateInView {
    --AnimationStagger: 100;
  }/* GLOBAL CONTAINERS */

/* HEIGHT CONSTRIANTS */
.HeroHeightConstraint {
  max-height: 80vh;
  @media screen and (max-width: 769px) {
    max-height:  80vh;
  }
}
.HeightConstraint {
  max-height: 1000px;
  @media screen and (max-width: 769px) {
    max-height:  'unset';
  }
}

/* DEFAULT CONTAINER */
.DefaultConstraint {
  --Constraint: 'unset';
  @media screen and (max-width: 769px){
    --Constraint: 'unset';
  }
}
/* HERO CONTAINER */
.HeroConstraint {
  
    --GlobalPadding: 0px;
    @media screen and (max-width: 769px) {
      --GlobalPadding: 0px;
    }
  
  
    --Constraint: 'unset';
    @media screen and (max-width: 769px) {
      --Constraint: 'unset';
    }
  
}

/* SMALL CONTAINER */
.SmallConstraint {
  
    --GlobalPadding: 0px;
    @media screen and (max-width: 769px) {
      --GlobalPadding: 0 20px 0 20px;
    }
  
  
    --Constraint: 750px;
    @media screen and (max-width: 769px) {
      --Constraint: 'unset';
    }
  
}

/* LARGE CONTAINER */
.LargeConstraint {
  
    --GlobalPadding: 0px;
    @media screen and (max-width: 769px) {
      --GlobalPadding: 0 10px 0 10px;
    }
  
  
    --Constraint: 1500px;
    @media screen and (max-width: 769px) {
      --Constraint: 'unset';
    }
  
}

/* CAROUSEL UI SIZES */ 
.CarouselComponent {
  .Numbers {
    --Gap: 10px;
    @media screen and (max-width: 769px) {
      --Gap: 10px;
    }
  }
  .Bars {
    --Gap: 4px;
    @media screen and (max-width: 769px) {
      --Gap: 4px;
    }
  }
  .Bar {
    --BarHeight: 1px;
    @media screen and (max-width: 769px) {
      --BarHeight: 1px;
    }
    
      --MaxWidth: unset;
    
    --BorderRadius: 0px;
    @media screen and (max-width: 769px) {
      --BorderRadius: 0px;
    }
  }
}

/* PRIMARY BUTTON */
.Button, .BuyButtons .shopify-payment-button__button, #NotifyButton .btn, .cc-btn, .shopify-challenge__button {
  
    --PaddingTop: 12px;
    --PaddingRight: 12px;
    --PaddingBottom: 12px;
    --PaddingLeft: 12px;
    @media screen and (max-width: 769px) {
      --PaddingTop: 10px;
      --PaddingRight: 10px;
      --PaddingBottom: 10px;
      --PaddingLeft: 10px;
    }
    --GlobalPadding: var(--PaddingTop) var(--PaddingRight) var(--PaddingBottom) var(--PaddingLeft);
  

  --MaxWidth: 500px;
  --MinWidth: 500px;
  --TextAlignment: center;
  --DisabledOpactiy: 50%;
  --ActiveOpactiy: 100%;
  --InActiveOpactiy: 70%;

  --HoverTextOpacity: 1;
  --HoverBorderOpacity: 1;
  --HoverBackgroundOpacity: 1;

  --BorderRadius: 0px;
  @media screen and (max-width: 769px) {
    --BorderRadius: 0px;
  }
  --BorderWidth: 1px;
  @media screen and (max-width: 769px) {
    --BorderWidth: 1px;
  }

  
    --PaddingTop: 12px;
    --PaddingRight: 12px;
    --PaddingBottom: 12px;
    --PaddingLeft: 12px;
    @media screen and (max-width: 769px) {
      --PaddingTop: 10px;
      --PaddingRight: 10px;
      --PaddingBottom: 10px;
      --PaddingLeft: 10px;
    }
    --GlobalPadding: var(--PaddingTop) var(--PaddingRight) var(--PaddingBottom) var(--PaddingLeft);
  
}
.Button.Secondary, .cc-btn.cc-settings,  .cc-btn.cc-btn-accept-selected {
  
    --PaddingTop: 12px;
    --PaddingRight: 12px;
    --PaddingBottom: 12px;
    --PaddingLeft: 12px;
    @media screen and (max-width: 769px) {
      --PaddingTop: 10px;
      --PaddingRight: 10px;
      --PaddingBottom: 10px;
      --PaddingLeft: 10px;
    }
    --GlobalPadding: var(--PaddingTop) var(--PaddingRight) var(--PaddingBottom) var(--PaddingLeft);
  

  --MaxWidth: 450px;
  --MinWidth: 450px;
  --TextAlignment: center;
  --DisabledOpactiy: 70%;
  --ActiveOpactiy: 100%;
  --InActiveOpactiy: 70%;
  
  --HoverTextOpacity: 1;
  --HoverBorderOpacity: 1;
  --HoverBackgroundOpacity: 1;

  --BorderRadius: 0px;
  @media screen and (max-width: 769px) {
    --BorderRadius: 0px;
  }
  --BorderWidth: 1px;
  @media screen and (max-width: 769px) {
    --BorderWidth: 1px;
  }

  
    --PaddingTop: 12px;
    --PaddingRight: 12px;
    --PaddingBottom: 12px;
    --PaddingLeft: 12px;
    @media screen and (max-width: 769px) {
      --PaddingTop: 10px;
      --PaddingRight: 10px;
      --PaddingBottom: 10px;
      --PaddingLeft: 10px;
    }
    --GlobalPadding: var(--PaddingTop) var(--PaddingRight) var(--PaddingBottom) var(--PaddingLeft);
  
}

/* BANNER */
.Banner {
  
    --GlobalPadding: 20px;
    @media screen and (max-width: 769px) {
      --GlobalPadding: 16px;
    }
  
  --Gap: 20px;
  @media screen and (max-width: 769px) {
    --GlobalPadding: 16px;
  }
}

/* Grid Containers */
.GridContainer {
  --AspectRatio: 75/100;
  @media screen and (max-width: 769px) {
    --AspectRatio: 75/100;
  }
  --GridGap:0px 4px;
  @media screen and (max-width: 769px) {
    --GridGap: 0px 4px;
  }

  grid-template-columns: repeat( 4, 1fr);
  @media screen and (max-width: 769px) {
    grid-template-columns: repeat( 2, 1fr);
  }

}
/* Grid Cards */
@media screen and (min-width: 770px) {
  .GridItem:nth-child(4n+1), .SplitContainer {
    .GridCard {
      .CardDetails {
        --GlobalPadding: 20px;
      }
    }
  }
}
@media screen and (max-width: 769px) {
  .GridItem:nth-child(2n+1), .SplitContainer {
    .GridCard {
      .CardDetails {
        @media screen and (max-width: 769px) {
          --GlobalPadding: 16px;
        }
      }
    }
  }
}
.GridCard {
  --DetailsGap:2;
  @media screen and (max-width: 769px) {
    --DetailsGap: 2;
  }
  
    .CardDetails{
      --GlobalPadding: 20px;
      @media screen and (max-width: 769px) {
        --GlobalPadding: 16px;
      }
    }
  
  
    .CardUI {
      --GlobalPadding: 20px;
      @media screen and (max-width: 769px) {
        --GlobalPadding: 16px;
      }
    }
  
  
    .Bars {
      --GlobalPadding: 20px;
      @media screen and (max-width: 769px) {
        --GlobalPadding: 16px;
      }
      --Alignment: flex-start;
      @media screen and (max-width: 769px) {
        --Alignment: flex-start;
      }
    }
  
  .PLPBadgeWrapper {
    .CardBadge {
      --GlobalPadding: 4px 6px;
      @media screen and (max-width: 769px) {
        --GlobalPadding: 4px 6px;
      }
    }
  }
  .Carousel
}

/* GridHeadings */
.GridHeading {
  
    --PaddingTop: 0px;
    --PaddingRight: 20px;
    --PaddingBottom: 20px;
    --PaddingLeft: 20px;
    @media screen and (max-width: 769px) {
      --PaddingTop: 0px;
      --PaddingRight: 16px;
      --PaddingBottom: 16px;
      --PaddingLeft: 16px;
    }
    --GlobalPadding: var(--PaddingTop) var(--PaddingRight) var(--PaddingBottom) var(--PaddingLeft);
  
}

/* OVERLAY */
.Overlay {
  
    --PaddingTop: 56px;
    --PaddingRight: 20px;
    --PaddingBottom: 20px;
    --PaddingLeft: 20px;
    @media screen and (max-width: 769px) {
      --PaddingTop: 44px;
      --PaddingRight: 16px;
      --PaddingBottom: 16px;
      --PaddingLeft: 16px;
    }
    --GlobalPadding: var(--PaddingTop) var(--PaddingRight) var(--PaddingBottom) var(--PaddingLeft);
  
}
.OverlayClose {
  --GlobalPadding: 16px 20px;
  @media screen and (max-width: 769px) {
    --GlobalPadding: 16px;
  }
}
.OverlayTitle {
  --GlobalPadding: 0px 0px 20px 0px;
  @media screen and (max-width: 769px) {
    --GlobalPadding: 0px 0px 16px 0px;
  }
  
}

#OverlayBackgroundDiv {
  --BackdropOpacity: 0%;
  
  /*  */
  
    backdrop-filter: contrast(65%);
  
  
}

#Notifications { 
  --Justify: center;
  --Alignment: center;

  --Gap: 15px;
  @media screen and (max-width: 769px) {
    --Gap: 15px;
  }
  --Constraint: 'unset';
  @media screen and (max-width: 769px) {
    --Constraint: 'unset';
  }
}

/* FILTERSORT OVERLAY */ 
.OverlayFilterSort {
  .Buttons {
    --GlobalPadding: 0;
    @media screen and (max-width: 769px) {
      --GlobalPadding: 0;
    }
  }
}

/* COLLECTIONS LIST */
.CollectionsList {
  
    --PaddingTop: 0px;
    --PaddingRight: 0px;
    --PaddingBottom: 0px;
    --PaddingLeft: 0px;
    @media screen and (max-width: 769px) {
      --PaddingTop: 0px;
      --PaddingRight: 0px;
      --PaddingBottom: 0px;
      --PaddingLeft: 0px;
    }
    --GlobalPadding: var(--PaddingTop) var(--PaddingRight) var(--PaddingBottom) var(--PaddingLeft);
  
  
    --Constraint: 'unset';
    @media screen and (max-width: 769px) {
      --Constraint: 'unset';
    }
  
}

/* COLLECTION PREVIEW */
.CollectionsContainer {
  --AspectRatio: 4/5;
  @media screen and (max-width: 769px) {
    --AspectRatio: 4/5;
  }
  --CollectionPreviewGap:px;
  @media screen and (max-width: 769px) {
    --CollectionPreviewGap: px;
  }
  grid-template-columns: repeat( 2, 1fr);
  @media screen and (max-width: 769px) {
    grid-template-columns: repeat( 1, 1fr);
  }
}

/* PRODUCT SECTION */
.NotFoundPage {
  
  
    --Constraint: 'unset';
    @media screen and (max-width: 769px) {
      --Constraint: 'unset';
    }
  
  --Alignment: flex-start;
  @media screen and (max-width: 769px) {
    --Alignment: flex-start;
  }
  --Justify: center;
  @media screen and (max-width: 769px) {
    --Justify: center;
  }
  
}

/* PRODUCT SECTION */
.ProductDisplay {
  
    --GlobalPadding: ;
    @media screen and (max-width: 769px) {
      --GlobalPadding: ;
    }
  
  
    --Constraint: 'unset';
    @media screen and (max-width: 769px) {
      --Constraint: 'unset';
    }
  
}
.ProductInfo {
  --GlobalPadding: 0px 20px;
  @media screen and (max-width: 769px) {
    --GlobalPadding: 20px 16px 0px 16px;
  }
  .Block:nth-of-type(1) {
    --GlobalPadding: 20px 0px 20px 0px;
    @media screen and (max-width: 769px) {
      --GlobalPadding: 0px 0px 16px 0px;
    }
    --Gap: ;
    @media screen and (max-width: 769px) {
      --Gap: ;
    } 
  }
  .Block:nth-of-type(2) {
    --GlobalPadding: 0px 0px 20px 0px;
    @media screen and (max-width: 769px) {
      --GlobalPadding: 0px 0px 16px 0px;
    }
    --Gap: ;
    @media screen and (max-width: 769px) {
      --Gap: ;
    } 
  }
  .Block:nth-of-type(3) {
    --GlobalPadding: 0px 0px 8px 0px;
    @media screen and (max-width: 769px) {
      --GlobalPadding: 0px 0px 22px 0px;
    }
    --Gap: 20px;
    @media screen and (max-width: 769px) {
      --Gap: 16px;
    } 
  }
  .Block:nth-of-type(4) {
    --GlobalPadding: 20px 0px 0px 0px;
    @media screen and (max-width: 769px) {
      --GlobalPadding: 0px 0px 16px 0px;
    }
    --Gap: ;
    @media screen and (max-width: 769px) {
      --Gap: ;
    } 
  }
  .Block:nth-of-type(5) {
    --GlobalPadding: 20px 0px 0px 0px;
    @media screen and (max-width: 769px) {
      --GlobalPadding: ;
    }
    --Gap: ;
    @media screen and (max-width: 769px) {
      --Gap: ;
    } 
  }
  .Block:nth-of-type(6) {
    --GlobalPadding: 20px 0px 0px 0px;
    @media screen and (max-width: 769px) {
      --GlobalPadding: 20px 0px 0px 0px;
    }
    --Gap: 20px;
    @media screen and (max-width: 769px) {
      --Gap: 16px;
    } 
  }
}
.SelectorOption {
  --OptionSize: 0px;
  
    --OutlineSize: 1px;
  
  --Direction: Row;
  --Gap: 1em;
  @media screen and (max-width: 769px) {
    --Gap: 1em;
  }
  .OptionValues {
    --Gap: 16px;
    @media screen and (max-width: 769px) {
      --Gap: 16px;
    } 
  }
  &:not(.VaraintSwatches) {
    --OptionSize: ;
    @media screen and (max-width: 769px) {
      --OptionSize: ;
    }
    --BorderRadius: 0px;
    @media screen and (max-width: 769px) {
      --BorderRadius: 0px;
    }
  }
}
.ProductOptionValueWrapper {
  
}

.VariantSwatches {
  .OptionValues {
    --SwatchSize: 24px;
    --Gap: 16px;
    --BorderRadius: 0px;
    @media screen and (max-width: 769px) {
      --SwatchSize: 20px;
      --Gap: 16px;
      --BorderRadius: 0px;
    }
  }
}

.ProductDropDownContainer, .VariantOptionsLayer {
  .OptionValue {
    justify-content: flex-start;
    @media screen and (max-width: 769px) {
      justify-content: flex-start;
    }
  }
  
}

.PDPBreadcrumbs {
  --Gap: 10px;
  @media screen and (max-width: 769px) {
    --Gap: 4px;
  }
}

/* ANNOUNCEMENT SECTION */
.Announcement-Bar {
  z-index: 2;
  
    --PaddingTop: 8px;
    --PaddingRight: 20px;
    --PaddingBottom: 8px;
    --PaddingLeft: 20px;
    @media screen and (max-width: 769px) {
      --PaddingTop: 8px;
      --PaddingRight: 16px;
      --PaddingBottom: 8px;
      --PaddingLeft: 16px;
    }
    --GlobalPadding: var(--PaddingTop) var(--PaddingRight) var(--PaddingBottom) var(--PaddingLeft);
  
  
  .Announcement-Message {
    --Alignment: center;
    @media screen and (max-width: 769px) {
      --Alignment: center;
    }
  }
}

/* HEADER SECTION */ 

/* TODO MOVE Preset Specific Code Into its own .Liquid File */
.Header {
  
    --PaddingTop: 20px;
    --PaddingRight: 20px;
    --PaddingBottom: 20px;
    --PaddingLeft: 20px;
    @media screen and (max-width: 769px) {
      --PaddingTop: 16px;
      --PaddingRight: 16px;
      --PaddingBottom: 16px;
      --PaddingLeft: 16px;
    }
    --GlobalPadding: var(--PaddingTop) var(--PaddingRight) var(--PaddingBottom) var(--PaddingLeft);
  
  
    --Constraint: 'unset';
    @media screen and (max-width: 769px) {
      --Constraint: 'unset';
    }
  
  &.DrawerMenu {
    --BorderWidth: 0px;
    
    --DrawerWidth: 100px;
    .SubDrawer {
      --SubDrawerWidth: 100px;
      &.Deep {
        --DeepDrawerWidth: 100px;
        .MediaLink {
          --GlobalPadding: ;
          @media screen and (max-width: 769px) {
            --GlobalPadding: ;
          }
        }
      }
    }
    .Cover {
      --BackdropOpacity: 10%;
      
        backdrop-filter: none;
      
      
      
      
    }
    .Drawer, .HeaderNavigation {
      --Gap: 0px;
      @media screen and (max-width: 769px) {
        --Gap: 0px;
      }
    }
    .SubDrawer {
      --Gap: 5px;
      @media screen and (max-width: 769px) {
        --Gap: 15px;
      }
      [data-sub-closer] {
        --GlobalPadding: ;
        @media screen and (max-width: 769px) {
          --GlobalPadding: ;
        }
      }
    }
    .Tier3 {
      --Gap: 0px;
      @media screen and (max-width: 769px) {
        --Gap: 0px;
      }
    }
  }
  .Wrapper.LogoWrapper {
    --Alignment: center;
    @media screen and (max-width: 769px) {
      --Alignment: center;
    }
    
  }
  .HeaderLogo{
    --TransformOrigin: center center;
    @media screen and (max-width: 769px){
      --TransformOrigin: top center;
    }
  }
}
.MenuLayer {
  .HeaderDrawerLinks {
    --Gap: 5px;
  }
}

/* STICKY MARK */


/* VARIANT SWATCHES */
.VariantSwatches {
  --SwatchSize: 16px;
  --Gap: 8px;
  --BorderRadius: 0px;
  @media screen and (max-width: 769px) {
    --SwatchSize: 12px;
    --Gap: 6px;
    --BorderRadius: 0px;
  }
}

/* RICHTEXT SECTION */
.RichText {
  
    --PaddingTop: 60px;
    --PaddingRight: 20px;
    --PaddingBottom: 60px;
    --PaddingLeft: 20px;
    @media screen and (max-width: 769px) {
      --PaddingTop: 40px;
      --PaddingRight: 16px;
      --PaddingBottom: 60px;
      --PaddingLeft: 16px;
    }
    --GlobalPadding: var(--PaddingTop) var(--PaddingRight) var(--PaddingBottom) var(--PaddingLeft);
  
  
    --Constraint: 'unset';
    @media screen and (max-width: 769px) {
      --Constraint: 'unset';
    }
  
  --LayoutGap:20px;
  @media screen and (max-width: 769px) {
    --LayoutGap: 0px;
  }

  --Alignment: flex-start;
  @media screen and (max-width: 769px) {
    --Alignment: flex-start;
  }
  .LinkList {
    --FlexStyle: row;
    @media screen and (max-width: 769px) {
      --FlexStyle: column;
    }
  }
}

.CustomerAccountWrapper {
  
    --GlobalPadding: 20px;
    @media screen and (max-width: 769px) {
      --GlobalPadding: 0px 16px;
    }
  

  .Navigation {
    
      --GlobalPadding: 20px 0px 0px 20px;
      @media screen and (max-width: 769px) {
        --GlobalPadding: 16px 0px 16px 0px;
      }
    

    @media screen and (max-width: 769px) {
      .ResizeReporter {
        display: flex;
        flex-direction: row;
      }
    }
    [data-option-opener] {
      --InActiveOpacity: ;
      @media screen and (max-width: 769px) {
        --InActiveOpacity: ;
      }
    }
  }
}
.CustomerAccount {
  
    --GlobalPadding: ;
    @media screen and (max-width: 769px) {
      --GlobalPadding: ;
    }
  
  .ConfirmLogout {

    --GlobalPadding: ;
    @media screen and (max-width: 769px) {
      --GlobalPadding: ;
    }

    --Gap: 20px;
    @media screen and (max-width: 769px) {
      --Gap: 16px;
    }
  }
  .NoOrders {
    --GlobalPadding: ;
    @media screen and (max-width: 769px) {
      --GlobalPadding: 16px 0px 0px 0px;
    }
    --Gap: ;
    @media screen and (max-width: 769px) {
      --Gap: ;
    }
  }
  .AddressItem {
    border-bottom: ;
    @media screen and (max-width: 769px) {
      border-bottom: ;
    }

    .AddressButtons {
      
        --GlobalPadding: 20px 0px 20px 0px;
        @media screen and (max-width: 769px) {
          --GlobalPadding: 16px 0px 16px 0px;
        }
      

      --Gap: 20px;
      @media screen and (max-width: 769px) {
        --Gap: 16px;
      }

      flex-direction: row;
      @media screen and (max-width: 769px) {
        flex-direction: column;
      }

      * {
        width: 100%;
      }
      
    }
    .DefaultLabel {
      --GlobalPadding: 0px 0px 20px 0px;
      @media screen and (max-width: 769px) {
        --GlobalPadding: 0px 0px 16px 0px;
      }
      justify-content: flex-start;
      @media screen and (max-width: 769px) {
        justify-content: flex-start;
      }
    }
  }
}
.AccountFormButtons {
  --GlobalPadding: 10px 0px 0px 0px;
  @media screen and (max-width: 769px) {
    --GlobalPadding: 16px 0px 0px 0px;
  }
  --Position: static;
  @media screen and (max-width: 769px) {
    --Position: static;
  }
}
.AccountTitle {
  --TextAlign: left;
  @media screen and (max-width: 769px) {
    --TextAlign: left;
  }
}

/* CUSTOM LIQUID SECTION */
.CustomLiquid {
  
  
    --Constraint: 'unset';
    @media screen and (max-width: 769px) {
      --Constraint: 'unset';
    }
  
}

/* CUSTOM LIQUID SECTION */
.CustomApp {
  
  
    --Constraint: 'unset';
    @media screen and (max-width: 769px) {
      --Constraint: 'unset';
    }
  
}

/* PAGE SECTION */
.PageSection {
  
    --PaddingTop: 0px;
    --PaddingRight: 0px;
    --PaddingBottom: 20px;
    --PaddingLeft: 0px;
    @media screen and (max-width: 769px) {
      --PaddingTop: 60px;
      --PaddingRight: 16px;
      --PaddingBottom: 16px;
      --PaddingLeft: 16px;
    }
    --GlobalPadding: var(--PaddingTop) var(--PaddingRight) var(--PaddingBottom) var(--PaddingLeft);
  
  
  .Title {
    --TextAlign: center;
    @media screen and (max-width: 769px) {
      --TextAlign: center;
    }
  }
}
/* INFORMATIONS SECTION */
.InformationSection {
  
    --GlobalPadding: 20px;
    @media screen and (max-width: 769px) {
      --GlobalPadding: 16px;
    }
  
  
    --Constraint: 50vw;
    @media screen and (max-width: 769px) {
      --Constraint: 'unset';
    }
  
  .InformationContent {
    --Gap: 20px;
    @media screen and (max-width: 769px) {
      --Gap: 16px;
    }
  }
  .Navigation.Links {
    --Gap: 0px;
  }
  .Accordions {
    --Gap: 0px;
    @media screen and (max-width: 769px) {
      --Gap: 0px;
    }
  }
  .Navigation {
    
      --GlobalPadding: ;
      @media screen and (max-width: 769px) {
        --GlobalPadding: ;
      }
    
  }
}
.OverlayContent {
  .Navigation.Links {
    @media screen and (max-width: 769px) {
      --Gap: 16px;
    }
  }
}

/* CONTACT SECTION */
.ContactSection {
  
    --PaddingTop: 0px;
    --PaddingRight: 20px;
    --PaddingBottom: 0px;
    --PaddingLeft: 20px;
    @media screen and (max-width: 769px) {
      --PaddingTop: 16px;
      --PaddingRight: 10px;
      --PaddingBottom: 16px;
      --PaddingLeft: 16px;
    }
    --GlobalPadding: var(--PaddingTop) var(--PaddingRight) var(--PaddingBottom) var(--PaddingLeft);
  
  
    --Constraint: 15vw;
    @media screen and (max-width: 769px) {
      --Constraint: 'unset';
    }
  
}

/* FEATURED COLLECTION SECTION */
.FeaturedCollection {
  
    --GlobalPadding: ;
    @media screen and (max-width: 769px) {
      --GlobalPadding: ;
    }
  
  
  
    --Constraint: 'unset';
    @media screen and (max-width: 769px) {
      --Constraint: 'unset';
    }
  

  .FeaturedCollectionViewAll {
    --Alignment: flex-start;
    
      --GlobalPadding: ;
      @media screen and (max-width: 769px) {
        --GlobalPadding: ;
      }
    
  }
}

/* MAIN COLLECTION SECTION */
.CollectionSection {
  
    --GlobalPadding: ;
    @media screen and (max-width: 769px) {
      --GlobalPadding: ;
    }
  
  
    --Constraint: 'unset';
    @media screen and (max-width: 769px) {
      --Constraint: 'unset';
    }
  
  .OverlayFilters {
    --Alignment: flex-start;
  }
  .CollectionOptionsRow {
    --GlobalPadding: 20px;
    @media screen and (max-width: 769px) {
      --GlobalPadding: 16px;
    }
  }
}
.NoProducts {
  
    --GlobalPadding: 0px 20px 0px 20px;
    @media screen and (max-width: 769px) {
      --GlobalPadding: 0px 16px 0px 16px;
    }
  
}

/* MAIN COLLECTION MENU */
.CollectionMenu {
  
  
    --Constraint: 'unset';
    @media screen and (max-width: 769px) {
      --Constraint: 'unset';
    }
  
}

/* RELATED PRODUCTS SECTION */
.RelatedProducts {
  
    --PaddingTop: 0px;
    --PaddingRight: 0px;
    --PaddingBottom: 0px;
    --PaddingLeft: 0px;
    @media screen and (max-width: 769px) {
      --PaddingTop: 0px;
      --PaddingRight: 0px;
      --PaddingBottom: 0px;
      --PaddingLeft: 0px;
    }
    --GlobalPadding: var(--PaddingTop) var(--PaddingRight) var(--PaddingBottom) var(--PaddingLeft);
  
  
    --Constraint: 'unset';
    @media screen and (max-width: 769px) {
      --Constraint: 'unset';
    }
  
}

/* SEARCH PAGE */
.SearchPage {
  
    --GlobalPadding: 0;
    @media screen and (max-width: 769px) {
      --GlobalPadding: 0;
    }
  
  
    --Constraint: 'unset';
    @media screen and (max-width: 769px) {
      --Constraint: 'unset';
    }
  
  .FormWrapper {
    
      --GlobalPadding: 0px 20px;
      @media screen and (max-width: 769px) {
        --GlobalPadding: 0px 16px;
      }
    
  }
}

/* Cart Section */
.CartSection {
  
    --GlobalPadding: 0px 20px;
    @media screen and (max-width: 769px) {
      --GlobalPadding: 0px 16px;
    }
  
  
    --Constraint: 40vw;
    @media screen and (max-width: 769px) {
      --Constraint: 'unset';
    }
  
}
.CartItem {
  --GlobalPadding: 20px 0px 0px 0px;
  @media screen and (max-width: 769px) {
    --GlobalPadding: ;
  }
  
  .CartItemQuantity {
    
      flex-grow: 2;
      justify-content: flex-end;
    
    --QuantityHeight:  2em;
    --GlobalPadding: 0;
    --BorderRadius: 0px;
    @media screen and (max-width: 769px) {
      --QuantityHeight:  2em;
      --GlobalPadding: ;
      --BorderRadius: 0px;
    }
  }
}
.CartItems {
  --Gap: 20px;
  @media screen and (max-width: 769px) {
    --Gap: 16px;
  }
}
.CartFooter {
  --GlobalPadding: 20px 0px 0px 0px;
  @media screen and (max-width: 769px) {
    --GlobalPadding: 16px 0px 0px 0px;
  }
  --Gap: 16px;
  @media screen and (max-width: 769px) {
    --Gap: 16px;
  }
  
}

/* FOOTER PROMOTION SECTION */
.FooterPromotion {
  
    --PaddingTop: 8px;
    --PaddingRight: 20px;
    --PaddingBottom: 8px;
    --PaddingLeft: 20px;
    @media screen and (max-width: 769px) {
      --PaddingTop: 8px;
      --PaddingRight: 16px;
      --PaddingBottom: 8px;
      --PaddingLeft: 16px;
    }
    --GlobalPadding: var(--PaddingTop) var(--PaddingRight) var(--PaddingBottom) var(--PaddingLeft);
  
  
    --Constraint: 'unset';
    @media screen and (max-width: 769px) {
      --Constraint: 'unset';
    }
  
  --Alignment: ;
  @media screen and (max-width: 769px) {
    --Alignment: ;
  }
}

/* FOOTER SECTION */
.Footer {
  
    --GlobalPadding: 20px;
    @media screen and (max-width: 769px) {
      --GlobalPadding: 16px;
    }
  
  
    --Constraint: 'unset';
    @media screen and (max-width: 769px) {
      --Constraint: 'unset';
    }
  
  --Alignment: center;
  @media screen and (max-width: 769px) {
    --Alignment: center;
  }
  .FooterLinkLists {
    --Constraint: 'unset';
    @media screen and (max-width: 769px) {
      --Constraint: 'unset';
    }
  }
  .FooterCopyright {
    --GlobalPadding: 20px 0px 0px 0px;
    @media screen and (max-width: 769px) {
      --GlobalPadding: 16px 0px 0px 0px;
    }
  }
  .LinkList {
    --GlobalPadding: ;
    @media screen and (max-width: 769px) {
      --GlobalPadding: ;
    }
  }
}

/* CAROUSEL CONTAINER */
.CarouselContainer {
  --AspectRatio: 4/5;
  @media screen and (max-width: 769px) {
    --AspectRatio: 4/5;
  }
  .Bars {
    
  }
  .Banner {
    --Constraint: 'unset';
    @media screen and (max-width: 769px) {
      --Constraint: 'unset';
    }
  }
}

/* STICKY MEDIA CONTAINER  */
.StickyMediaContainer {
  
    --GlobalPadding: 0;
    @media screen and (max-width: 769px) {
      --GlobalPadding: 0;
    }
  
  --Alignment: flex-start;
  @media screen and (max-width: 769px) {
    --Alignment: flex-start;
  }
  .Banner {
    --Constraint: 64%;
    @media screen and (max-width: 769px) {
      --Constraint: ;
    }
  }
  max-height: 100vh;
  @media screen and (max-width: 769px) {
    max-height:  300vh;
  }
}

/* SPLIT CONTAINER */
.SplitContainer .StickyWrapper {
  top: 0;
  
    top:var(--HeaderHeight);
  
  .Banner {
    --Constraint: 'unset';
    @media screen and (max-width: 769px) {
      --Constraint: 'unset';
    }
  }
  .TextWrapper {
    --GlobalPadding: 20px;
    @media screen and (max-width: 769px) {
      --GlobalPadding: 16px;
    }
  }
}

/* SPLIT PRODUCT */
.SplitProductContainer{
  
  
  .StickyWrapper {
    
      top: 0;
    
  }
}

.StickyRowContainer {
  --Height: 65vh;
  .StickyWrapper {
    --RowHeight: 30vh;
  }
  @media screen and (max-width: 769px) {
    --Height: 60vh;
    .StickyWrapper {
      --RowHeight: auto;
    }
  }

  
    --GlobalPadding: ;
    @media screen and (max-width: 769px) {
      --GlobalPadding: 10px;
    }
  
  
    --Constraint: 'unset';
    @media screen and (max-width: 769px) {
      --Constraint: 'unset';
    }
  
  .StickyWrapper {
    --GlobalPadding: 20px;
    @media screen and (max-width: 769px) {
      --GlobalPadding: 0px;
    }
    --Gap: 10px;
    @media screen and (max-width: 769px) {
      --Gap: 15px;
    }
  }
  .TextWrapper {
    --Gap: 10px;
    @media screen and (max-width: 769px) {
      --Gap: 10px;
    }
    --Constraint: 'unset';
    @media screen and (max-width: 769px) {
      --Constraint: 'unset';
    }
  }
}

#preview-bar-iframe {
  display: none !important;
}
#Footer.Preset-Media .FooterLinks .LinkGroup{
  gap:10px !important
}
@media(max-width:720px){
  svg.Icon.Icon-Cart.Link, svg.Icon.Icon-Search.Link{
    width: 32px !important;
  }
  #Footer.Preset-Media .FooterLinks .LinkGroup{
  gap:20px !important
}
 footer {
    padding-bottom: 90px !important;
  }
  #BuyButton{
    width: 100%;
    min-width: 310px;
  }
 .HeaderNavigation .IconHolder {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    /* width: 70% !important; */
    /* height: 90% !important; */
    pointer-events: auto !important;
  }
  #Footer.Preset-Media .FooterMedia {
    max-width: 100%;
    height: 50vh !important;
}
#Footer.Preset-Media .FooterMedia .Media {
    width: inherit;
    max-height: 50vh !important;
}
.Banner.Hel-Reg-S.BottomRight.ColorScheme-scheme-d85f578a-7814-48a7-9103-9b83ce2e1eec {
    height: 90vh;
}
img.Image.AnimateInView.FadeIn.InView {
    height: 90vh;
}
}
#Footer.Preset-Media .FooterMedia .Media {
    width: inherit;
    max-height: 50vh !important;
}

/* ------------------------30-01-26 */

/* .Label.Pointer {
    color: #F7070C;
} */
#CartLayer .CartFooter {
    background: #F9FCFB !important;
}

.FormRow.Buttons.AddressButtons {
    margin-bottom: 30px;
}
.CustomerAccount .CustomerSection {
    display: grid !important;
    position: absolute;
    top: 0;
    gap: 15px;
    left: 0;
    opacity: 0;
    flex-direction: row;
}
div#Header .ClickDrawer:hover .Link {
    /* color: #b8b8b8; */
}

div#Header .ClickDrawer .Link:hover {
    /* color: #0c0c0c!important; */
    transition: color .4s ease;
    text-decoration: none;
}
.Link{
      color: #0c0c0c;
}




/* Default link color */
.crystal-ashtray-page .Link {
  color: #F7070C;
}

/* When hovering on menu wrapper, fade all links */
.crystal-ashtray-page div#Header .ClickDrawer:hover .Link {
  color: #b8b8b8;
  transition: color 0.4s ease;
}

/* Hovered link stays dark */
.crystal-ashtray-page div#Header .ClickDrawer .Link:hover {
  color:#F7070C !important;
  text-decoration: none;
}
.Banner.Hel-Reg-S.BottomRight.ColorScheme-scheme-d85f578a-7814-48a7-9103-9b83ce2e1eec .Hel-Reg-S.Link:hover {
    color: var(--LinkTextColorHover) !important;
}
.crystal-ashtray-page .Link:hover {
    color: #000000 !important;
}


#Header:has(.Hel-Reg-S.Link.AnimateInView.FadeIn.InView:hover) .Link {
  color: #b8b8b8 !important;
}

/* Default: all links black */
#MenuLayer .HeaderDrawerLinks .Link {
  color: #000 !important;
  transition: color .4s ease;
}

/* When menu is hovered, dim all links */
#MenuLayer .HeaderDrawerLinks:hover .Link {
  color: #bfbfbf !important;
}

/* Keep hovered link black */
#MenuLayer .HeaderDrawerLinks .Link:hover {
  color: #000 !important;
}
@media (max-width: 767px) {

  .Banner.Hel-Reg-S.BottomRight.ColorScheme-scheme-d85f578a-7814-48a7-9103-9b83ce2e1eec {
    height: 100vh;     /* fallback */
    height: 100svh;    /* iOS Safari safe */
    height: 100dvh;    /* modern browsers */
  }

  img.Image.AnimateInView.FadeIn.InView {
    height: 100vh;     /* fallback */
    height: 100svh;    /* iOS Safari safe */
    height: 100dvh;    /* modern browsers */
    object-fit: cover;
  }
.Hel-Reg-S.Link.AnimateInView.FadeIn.InView {
    color: #000;
}

image-element.ImageWrapper.Mobile-Hide {
    display: block;
    height: 100vh;
    height: 100dvh;
}
 
img.Image.AnimateInView.FadeIn.InView {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
}