/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./deps/sfra-webpack-builder/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./deps/sfra-webpack-builder/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./deps/sfra-webpack-builder/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[3]!./src/app_schaffrath/cartridges/app_page_designer/cartridge/client/default/scss/experience/components/commerceAssets/shopTheLook.scss ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* 1820px */
/* 1180px */
/* 1820px */
/* 1180px */
.shop-the-look-container {
  overflow: hidden;
}
.shop-the-look-container.rounded-corners .image-fluid {
  border-radius: 2rem;
}
@media (max-width: 991.98px) {
  .shop-the-look-container.rounded-corners .image-fluid {
    border-radius: 0.5rem;
  }
}
.shop-the-look-container .shop-the-look-header h3 {
  font-size: 2rem;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: 0.01em;
}
@media (min-width: 992px) {
  .shop-the-look-container .shop-the-look-header h3 {
    font-size: 2.5rem;
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: 0.01em;
  }
}
.shop-the-look-container .shop-the-look-header:has(h3) h4 {
  margin-top: 0.75rem;
}
@media (max-width: 991.98px) {
  .shop-the-look-container .shop-the-look-header:has(h3) h4 {
    margin-top: 0.5rem;
  }
}
.shop-the-look-container .shop-the-look-header h4 {
  font-size: 1.5rem;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: 0.01em;
}
@media (max-width: 991.98px) {
  .shop-the-look-container .shop-the-look-header h4 {
    font-size: 1.25rem;
    line-height: 1.3;
    font-weight: 400;
    letter-spacing: 0.01em;
  }
}
.shop-the-look-container .image-fluid {
  width: 100%;
  max-width: 100%;
}
.shop-the-look-container .shop-the-look-content {
  position: relative;
  overflow: hidden;
}
.shop-the-look-container .shop-the-look-content_spots {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.shop-the-look-container .shop-the-look-content_spots-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  visibility: visible;
}
.shop-the-look-container .shop-the-look-content_spot {
  position: absolute;
  top: var(--top-position);
  left: var(--left-position);
  transform: translate(-50%, -50%);
  z-index: 1;
}
.shop-the-look-container .shop-the-look-content_spot:has(.m-active) {
  z-index: 2;
}
.shop-the-look-container .shop-the-look-content_spot-btn {
  width: 2.875rem;
  height: 2.875rem;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background-color: rgba(255, 255, 255, 0.4196078431);
  border: none;
  border-radius: 100%;
  z-index: 2;
  cursor: pointer;
}
@media (max-width: 991.98px) {
  .shop-the-look-container .shop-the-look-content_spot-btn {
    width: 1.5625rem;
    height: 1.5625rem;
  }
}
.shop-the-look-container .shop-the-look-content_spot-btn::after {
  transition: transform 0.15s ease-in-out;
  content: "";
  width: 1.5rem;
  height: 1.5rem;
  background-color: var(--hotspot-background);
  border-radius: 100%;
}
@media (prefers-reduced-motion: reduce) {
  .shop-the-look-container .shop-the-look-content_spot-btn::after {
    transition: none;
  }
}
@media (max-width: 991.98px) {
  .shop-the-look-container .shop-the-look-content_spot-btn::after {
    width: 1rem;
    height: 1rem;
  }
}
.shop-the-look-container .shop-the-look-content_spot-btn:is(:hover, .m-active)::after {
  transform: scale(1.3);
}
.shop-the-look-container .shop-the-look-content_spot-popup {
  background-color: rgba(135, 135, 135, 0.2);
  backdrop-filter: blur(1.25rem);
  outline: 0.0625rem solid rgba(255, 255, 255, 0.3);
  outline-offset: -0.0625rem;
  border-radius: 2rem;
  padding: 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  position: absolute;
  visibility: hidden;
  color: #fff;
  z-index: 2;
}
@media (max-width: 991.98px) {
  .shop-the-look-container .shop-the-look-content_spot-popup {
    padding: 0.625rem 0.75rem;
    border-radius: 1.5rem;
  }
}
.shop-the-look-container .shop-the-look-content_spot-popup[aria-hidden=false] {
  visibility: visible;
}
.shop-the-look-container .shop-the-look-content_spot-popup_content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 3.5rem;
  white-space: nowrap;
}
@media (max-width: 991.98px) {
  .shop-the-look-container .shop-the-look-content_spot-popup_content {
    gap: 1.25rem;
  }
}
.shop-the-look-container .shop-the-look-content_spot-popup_content .shop-the-look-product-name {
  font-size: 1.25rem;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: 0.01em;
}
@media (max-width: 991.98px) {
  .shop-the-look-container .shop-the-look-content_spot-popup_content .shop-the-look-product-name {
    font-size: 1rem;
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: 0.01em;
    display: flex;
    flex-flow: column;
    max-width: 7.5rem;
  }
}
.shop-the-look-container .shop-the-look-content_spot-popup_content .shop-the-look-product-name span {
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 991.98px) {
  .shop-the-look-container .shop-the-look-content_spot-popup_content .shop-the-look-product-name_separator {
    display: none;
  }
}
.shop-the-look-container .shop-the-look-content_spot-popup_content .shop-the-look-product-dimensions {
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0.01em;
  margin-top: 0.25rem;
}
@media (max-width: 991.98px) {
  .shop-the-look-container .shop-the-look-content_spot-popup_content .shop-the-look-product-dimensions {
    font-size: 0.875rem;
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: 0.01em;
  }
}
.shop-the-look-container .shop-the-look-content_spot-popup_content .m-link_regular {
  color: #fff !important;
}
.shop-the-look-container .shop-the-look-content_spot-popup_content .m-link_regular:hover {
  text-decoration-color: #fff !important;
}
@media (max-width: 991.98px) {
  .shop-the-look-container .shop-the-look-content_spot-popup_content .m-link_regular {
    min-width: auto;
  }
}

/*# sourceMappingURL=shopTheLook.css.map*/