/** Shopify CDN: Minification failed

Line 308:2 Unexpected "@media"

**/
/* The Modal (background) - used for lookbook links*/

.modal21 {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 99999999999999; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */ 
  align-items: center;
  justify-content: flex-start;
}

 

/* Modal Content */

.modal21-content {
  width: 100%;
  animation: FadeIn1 var(--duration-long) ease-in-out ;
  -webkit-animation: FadeIn1 var(--duration-long) ease-in-out ;
  width: 100%;
  max-width: max-content;
  height: 100%;
}

@media screen and (max-width: 749px) {
.modal21.slide-up .modal21-content {
    width:100vw;
    max-width:unset;
    height:auto;
   
  }
.modal21.slide-up .popupsFormsInIt {
    max-width: 100%;
    gap: var(--spacing_standard);
    flex-direction: column; 
    align-items: flex-start;
    }
}

.modal__header {
  display: flex;
  align-items: center;
}

.modal__header .close21 {
  cursor: pointer;
}

.modal21-content .modal21-body {
  height:100vh;
  margin: auto;
  display: block;
  position: relative;
  overflow: auto;
}

@media screen and (max-width: 749px) {
.modal21-content .modal21-body {
    width: 100vw;
    max-width: 100vw;
    min-width: 100vw;
    min-height: 100dvh;
    height: 100dvh;
    padding: 0;
  }
.modal21-content .modal21-body .modal__header {
  height: 0;
  justify-content: flex-end;
}
.close21 {
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--color-background),.5);
    height: 44px;
    width: 44px;
    position: fixed;
    z-index: 999;
    top: 0;
    right: 0;
    padding: 0;
    margin: 0; 
    }
}

@media screen and (min-width: 750px) {
.modal21-content .modal21-body .modal__header {
  height: 0;
  justify-content: flex-start;
}
.modal21-content .modal21-body {
    width: calc(33vw + var(--spacing_standard)*2);
    max-width: calc(33vw + var(--spacing_standard)*2);
    min-width: calc(33vw + var(--spacing_standard)*2);
    height: 100vh;
    padding: var(--spacing_standard) var(--spacing_standard) 0 var(--spacing_standard);
  }
.close21 {
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--color-background),.5);
    height: 44px;
    width: 44px;
    position: absolute;
    cursor: pointer;
    z-index: 999;
    top: var(--spacing_standard);
    right: var(--spacing_standard);
    padding: 0;
    margin: 0; 
    }
}

.popProdTitle {
  display: block;}

@media screen and (max-width: 749px) {
.popProdTitle {
    margin: var(--spacing_narrow);
  }
}

@media screen and (min-width: 750px) {
.popProdTitle {
    margin: var(--spacing_narrow) 0;
  }
}

.modal21-content .button.button--secondary {
  width: 50%;
  min-width: 50%;
  max-width: 50%;
}

.modal21-content .button_wrapper {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: var(--spacing_narrow);}

@media screen and (max-width: 749px) {
.modal21-content .button_wrapper {
      padding: var(--spacing_narrow);
    }
}

@media screen and (min-width: 750px) {
.modal21-content .button_wrapper {
      padding: var(--spacing_narrow) 0;
    }
}

.modal21-content .button_wrapper .product-form__input {
      min-width: unset;
      width: auto;
      flex: auto;
      max-width: calc(50% - var(--spacing_narrow)/2);
    }

.modal21-content .button_wrapper .quick-add__submit {
      min-width: unset;
      width: auto;
      flex: auto;
    }

.modal21-content .modal21-body video {
  width: 100%;
  height: auto; 
  max-height: 70vh;
  padding: 36px var(--spacing_narrow);
}

span.backSide2 {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--overlay_color);
  backdrop-filter: blur(var(--overlay_blur));
  -webkit-backdrop-filter: blur(var(--overlay_blur));
}

.popupsFormsInIt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: max-content;
  max-width: 100%;
  gap: var(--spacing_standard);
  padding-bottom: var(--spacing_standard);
}

.modal-image-wrap {
  width: auto;
  position: relative;
  overflow: hidden;
  height: auto;
}

@media screen and (min-width: 750px) {
.modal-image-wrap {
  width: auto;
  height: auto;
  }
}

.popupsFormsInIt img.motion-reduce {
  object-fit: contain;
  width: 100%;
  height: auto;
  margin: 0;
  display: flex;
}

.popupsFormsInIt .product-form__input {
  margin: 0;
  width: 50%;
}

.popupsFormsInIt .product-form__input select {
  margin: 0;
  padding-left: var(--spacing_narrow);
}

.popupsFormsInIt ~ a {
  margin-top: var(--spacing_standard) !important;
}

.modal21-content .product-form__input.hidden + .quick-add__submit.button {
  margin-top: var(--spacing_narrow);
}

/* Animations */

@-webkit-keyframes FadeIn1 {
  from {opacity:0}
  to {opacity:1}

}

@keyframes FadeIn1 {
  from {opacity:0}
  to {opacity:1}

}

.text-banner h2 {
max-width: 66%}

/* Hotspot Animation */

.hotspot {
  transition: all 0.5s
}

.hotspot:hover {
  transform:scale(1.25);  
}

/* Hotspot Tooltips */

.banner__hotspots {
  position: absolute;
  height: 100%;
  width: 100%;
}

.tooltip {
  position: relative;
  padding: 0.25rem 0;
  width: fit-content;
  display:flex;
  gap: 0.5rem;
}

.tooltip:before {
  content: attr(data-text); /* here's the magic */
  position:absolute;
  /* vertically center */
  top:50%;
  transform:translateY(-50%);
  /* move to right */
  left: 100%;
  margin-left: 10px; /* and add a small left margin */
  /* basic styles */
  width: auto;
  text-wrap: nowrap;
  padding: 5px 10px;
  background: rgb(var(--color-background));
  color: rgba(var(--color-foreground), 1);;
  font-size: var(--font_smallest_size);
  text-align:center;
  display:none;}

.tooltip:before /* hide by default */
  @media screen and (max-width: 749px) {
    border-radius: calc(var(--media_elements_radius) /2)
  }

@media screen and (min-width: 750px) {
.tooltip:before {
    border-radius: calc(var(--desktop_elements_radius) /2)
  }
}

.tooltip.right-side_mobile:before,
.tooltip.right-side_desktop:before {
  right: 100%;
  left: unset;
  margin-left: unset;
  margin-right: 10px;
}

.tooltip:hover:before {
  display:inline-block;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 100%;
    left: 0;
    text-align: left;
    position: absolute;
    z-index: 1;
    margin: 0 !important;
    top: 0;
    transform: translateY(-0%) translateX(11%);
    font-size: var(--font_smallest_size);
    padding: 0;
    color: rgba(var(--color-foreground), 1);;
    text-wrap: nowrap;
}

/* Show the tooltip text when you mouse over the tooltip container */

.related-product-swatch:hover .tooltiptext {
  visibility: visible;
}