/* Add custom CSS styles below */ 
.s-block--hero-slider .swiper-slide {
  min-height: 97vh !important;
}
.s-block--hero-slider {
  position: relative;
  z-index: 1;
}
/*Header*/
/* Overlay header on hero */
.store-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

/* Glassy effect */
#mainnav {
  background: rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: none !important;
}

/* Make nav links white since it's over a dark hero */
#mainnav a,
#mainnav .s-user-menu-login-btn,
#mainnav .s-cart-summary-wrapper {
  color: #000 !important;
}

#mainnav svg path {
  fill: #fff;
}

/* Top navbar strip — hide or match */
.top-navbar {
  background: rgba(0, 0, 0, 0.2);
}
.store-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}
.s-block--hero-slider {
  margin-top: -84px; /* cancels the push since hero is full-screen anyway */
}
body:not(.home) .s-layout-content,
body:not(.home) main {
  padding-top: 84px;
}

/*Product image*/
.s-product-card-image {
  background-color: white !important;
  transition:1s;
}
.s-product-card-image a {
  display: block;
  overflow: hidden;
}

.s-product-card-image-contain {
  display: block;
  width: 100%;
  transform: scale(1);
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.s-product-card-image a:hover .s-product-card-image-contain {
  transform: scale(1.2);
  transition: 1s;
}

.content--single-page {width:100%;}
body:not(.home) .s-layout-content, body:not(.home) main {padding-top: 0!important;}

.has-overlay:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.85) 100%);
  pointer-events: none;
}