/*!*************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[3]!./cartridges/app_custom_ptdf/cartridge/client/default/scss/experience/storePage.scss ***!
  \*************************************************************************************************************************************************************************************************************************************/
body {
  font-family: "Helvetica Neue";
}

html {
  font-size: 0.875rem;
  font-family: "Helvetica Neue";
}

@media (min-width: 544px) {
  html {
    font-size: 1rem;
  }
}
@media (min-width: 769px) {
  html {
    font-size: 1.125rem;
  }
}
h1 {
  font-size: 4rem;
  font-weight: 900;
  font-family: "Helvetica Neue";
}

h2 {
  font-size: 3rem;
  font-weight: 900;
  font-family: "Helvetica Neue";
}

h3 {
  font-size: 1.67rem;
  font-weight: 900;
  font-family: "Helvetica Neue";
  text-align: center;
}

h4 {
  font-size: 1.5rem;
  font-weight: 600;
  font-family: "Helvetica Neue";
}

h5 {
  font-weight: 600;
  font-family: "Helvetica Neue";
}

/**
 * Design System - Constants
 */
/*
   DO NOT TOUCH NOR REPLACE THIS FILE
*/
/**
 * Design System - Functions
 */
/*
   DO NOT TOUCH NOR REPLACE THIS FILE
*/
/**
 * Design System - Mixins
 */
/**
 * Design System - Grid Breakpoints
 *
 * Define the minimum dimensions at which your layout will change, adapting to different screen sizes.
 * Intended to be used in media queries: @include media-breakpoint-up
 */
/* stylelint-disable scss/dollar-variable-colon-space-after */
/**
 * Design System - Colors
 */
/**
 * Design System - Typography
 *
 * Collection of font, text appearence and structure styles.
 */
h1 {
  font-weight: 300;
  font-size: 2.1875rem;
  line-height: 2.5rem;
  font-family: "Sofia Pro Light", sans-serif;
}
@media (min-width: 1200px) {
  h1 {
    font-weight: 300;
    font-size: 3.4375rem;
    line-height: 3.4375rem;
    font-family: "Sofia Pro Light", sans-serif;
  }
}

h2 {
  font-weight: 300;
  font-size: 1.875rem;
  line-height: 2.5rem;
  font-family: "Sofia Pro Regular", sans-serif;
}
@media (min-width: 1200px) {
  h2 {
    font-weight: 300;
    font-size: 2.5rem;
    line-height: 2.5rem;
    font-family: "Sofia Pro Regular", sans-serif;
  }
}

h3 {
  font-weight: 300;
  font-size: 1.3125rem;
  line-height: 2.5rem;
  font-family: "Sofia Pro Semi Bold", sans-serif;
}
@media (min-width: 1200px) {
  h3 {
    font-weight: 300;
    font-size: 2.1875rem;
    line-height: 2.5rem;
    font-family: "Sofia Pro Semi Bold", sans-serif;
  }
}

h4 {
  font-weight: 300;
  font-size: 1.125rem;
  line-height: 2.5rem;
  font-family: "Sofia Pro Semi Bold", sans-serif;
}
@media (min-width: 1200px) {
  h4 {
    font-weight: 300;
    font-size: 1.875rem;
    line-height: 2.5rem;
    font-family: "Sofia Pro Semi Bold", sans-serif;
  }
}

/**
 * Design System - Index
 */
/**
 * Page Designer - Banner
 *
 * Define the styling to the Banner component.
 */
.com-banner__container {
  width: 100%;
  height: 12.5rem;
  display: flex;
  padding: 1.25rem;
  position: relative;
  border-radius: 0.9375rem;
  align-items: center;
  background-size: cover;
  justify-content: flex-end;
  background-repeat: no-repeat;
  background-position: var(--focal-point-x, center) var(--focal-point-y, center);
}
@media (min-width: 1200px) {
  .com-banner__container {
    height: 25rem;
    padding-right: 7.875rem;
  }
}

.com-banner__text {
  --title-color: $color-grey-black;
  --description-color: $color-grey-black;
  width: 10.1875rem;
  display: flex;
  position: relative;
  flex-direction: column;
  padding-right: 0;
  margin-right: 0;
}
.com-banner__text span:nth-child(1) {
  color: var(--title-color);
}
.com-banner__text span:nth-child(1) p {
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.5625rem;
  font-family: "Sofia Pro Semi Bold", sans-serif;
  width: 100%;
  margin-bottom: 0;
}
@media (min-width: 1200px) {
  .com-banner__text span:nth-child(1) p {
    font-weight: 400;
    font-size: 3.125rem;
    line-height: 3.4375rem;
    font-family: "Sofia Pro Semi Bold", sans-serif;
  }
}
.com-banner__text span:nth-child(2) {
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.125rem;
  font-family: "Sofia Pro Regular", sans-serif;
  color: var(--description-color);
  margin-top: 1.125rem;
}
@media (min-width: 1200px) {
  .com-banner__text span:nth-child(2) {
    margin-top: 2.1875rem;
  }
}
.com-banner__text span:nth-child(2) p {
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.125rem;
  font-family: "Sofia Pro Regular", sans-serif;
  width: 100%;
}
@media (min-width: 1200px) {
  .com-banner__text span:nth-child(2) p {
    font-weight: 400;
    font-size: 1.5625rem;
    line-height: 2.1875rem;
    font-family: "Sofia Pro Regular", sans-serif;
  }
}
@media (min-width: 1200px) {
  .com-banner__text {
    width: 35.25rem;
    margin: 0 3.75rem 0.9375rem 0;
  }
}

/**
 * Page Designer - Information Card
 * Set image on the left and the text on the right
*/
.com-information-card {
  display: flex;
  height: fit-content;
  min-width: 21.5625rem;
  width: 100%;
  overflow: hidden;
  background-color: #fff;
  align-items: stretch;
  justify-content: left;
  border: 1px solid #dbe0e9;
  border-radius: 1.5625rem;
  max-height: 10rem;
}
@media (min-width: 1200px) {
  .com-information-card {
    min-height: 14.0625rem;
    max-height: 14.0625rem;
  }
}
.com-information-card .com-banner-img {
  justify-content: left;
  align-items: start;
  width: 7.8125rem;
  object-fit: cover;
  object-position: var(--focal-point-x, center) var(--focal-point-y, center);
}
@media (min-width: 1200px) {
  .com-information-card .com-banner-img {
    width: 18.75rem;
  }
}
.com-information-card__content {
  width: 100%;
  display: flex;
  align-self: center;
  flex-direction: column;
  padding: 1.3125rem;
  padding-right: 2.5rem;
}
@media (min-width: 1200px) {
  .com-information-card__content {
    padding-left: 1.3125rem;
  }
}
.com-information-card__content span:nth-child(1) {
  font-size: calc(1.125rem / 16px)rem;
  font-family: "Sofia Pro Semi Bold", sans-serif;
  color: #313232;
}
@media (min-width: 1200px) {
  .com-information-card__content span:nth-child(1) {
    font-size: 1.5625rem;
  }
}
.com-information-card__content span:nth-child(2) {
  font-size: calc(0.875rem / 16px)rem;
  font-family: "Sofia Pro Regular", sans-serif;
  color: #63666a;
  width: 10.9375rem;
}
@media (min-width: 1200px) {
  .com-information-card__content span:nth-child(2) {
    font-size: 1.25rem;
    width: 21.375rem;
  }
}

/**
 * Page Designer - Main Banner
 *
 * Defines the Main Banner Page Designer component styles.
 */
.com-main-banner__container {
  width: 100%;
  display: flex;
  position: relative;
  align-items: center;
  background-size: cover;
  height: 12.5rem;
  padding: 1.25rem;
  justify-content: flex-start;
  background-repeat: no-repeat;
  border-radius: 0.9375rem;
  background-position: var(--focal-point-x, center) var(--focal-point-y, center);
}
@media (min-width: 1200px) {
  .com-main-banner__container {
    height: 29.0625rem;
  }
}

.com-main-banner__text {
  --text-color: $color-grey-black;
  margin-left: 2.25rem;
}
.com-main-banner__text h1 {
  font-size: 3.125rem;
  font-family: "Sofia Pro Bold", sans-serif;
}
@media (min-width: 1200px) {
  .com-main-banner__text h1 {
    font-size: 7.5rem;
    line-height: 6.25rem;
  }
}
.com-main-banner__text h2 {
  font-size: 1.25rem;
  font-family: "Sofia Pro Light", sans-serif;
}
@media (min-width: 1200px) {
  .com-main-banner__text h2 {
    font-size: 3.125rem;
    line-height: 6.25rem;
  }
}
.com-main-banner__text p {
  line-height: 0;
}
.com-main-banner__text h1,
.com-main-banner__text h2,
.com-main-banner__text h3,
.com-main-banner__text h4,
.com-main-banner__text p {
  text-align: left;
  color: var(--text-color);
}
@media (min-width: 1200px) {
  .com-main-banner__text {
    margin-left: 5.5625rem;
  }
}

/**
 * Page Designer - Category Card
 * Set image and text
 */
.com-category-card {
  display: flex;
  height: 12.5rem;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 1.5625rem;
  position: relative;
  align-items: start;
  background-position: var(--focal-point-x, center) var(--focal-point-y, center);
}
@media (min-width: 1200px) {
  .com-category-card {
    height: 18.75rem;
  }
  .com-category-card.is-large {
    height: 26.125rem;
  }
}
.com-category-card span {
  font-size: calc(0.875rem / 16px)rem;
  font-family: "Sofia Pro Semi Bold", sans-serif;
  height: 2.8125rem;
  background-color: #fff;
  border-radius: 1.5625rem;
  color: #313232;
  padding: 0 1rem;
  max-width: calc(100% - 1.25rem);
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 1.25rem;
  left: 1.25rem;
}
@media (min-width: 1200px) {
  .com-category-card span {
    font-size: calc(1.25rem / 16px)rem;
    font-family: "Sofia Pro Semi Bold", sans-serif;
    padding: 0 1.625rem;
  }
}

/**
 * Page Designer - Separator
 *
 * Sets the vertical separation between two elements in a Page Designer page.
*/
.com-separator {
  height: var(--separator-phone-size);
}
@media (min-width: 1200px) {
  .com-separator {
    height: var(--separator-desktop-size);
  }
}

/**
 * Page Designer - Content Title
 *
 * Define the styling to the content title component.
 */
.com-pd__grid__content-title {
  margin: 0 auto;
  max-width: 59.375rem;
}
.com-pd__grid__content-title > section > .region {
  display: flex;
  grid-gap: 0.625rem;
  flex-direction: column;
}

.com-pd__grid__content-title-text {
  font-weight: 40;
  font-size: 2.5rem;
  font-family: "Sofia Pro Light", sans-serif;
  display: flex;
  text-align: center;
  height: 5.3125rem;
  align-items: center;
  justify-content: center;
  color: #313232;
}
@media (min-width: 1200px) {
  .com-pd__grid__content-title-text {
    height: 10.25rem;
    font-size: 3.4375rem;
    line-height: 2.875rem;
  }
}

.page-container {
  max-width: 1200px;
}

.region {
  position: relative;
  margin-bottom: 0.75rem;
}

.region::before {
  display: block;
  content: "";
  width: 100%;
}

/*
    padding-top in percentages refers to parent width
    this allows us to specify an aspect-ratio
*/
/* stylelint-disable selector-class-pattern */
.region_landscape-large::before {
  padding-top: 39.0625%;
}

.region_square::before {
  padding-top: 100%;
}

.region_landscape-small::before {
  padding-top: 50%;
}

.region_portrait-small::before {
  padding-top: 200%;
}

div.sf-interactions-proxyHoverContainer a {
  overflow: visible;
}

/* stylelint-enable selector-class-pattern */
.storepage {
  width: 100%;
  padding: 0 0 12.3125rem;
}
@media (min-width: 1200px) {
  .storepage {
    padding: 0 0 12.875rem;
  }
}
.storepage .region {
  margin-bottom: 0;
}
.storepage .row {
  margin-left: -0.625rem !important;
  margin-right: -0.625rem !important;
}
.storepage .row [class*=col-] {
  padding-right: 0.625rem !important;
  padding-left: 0.625rem !important;
}

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