/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[3]!./cartridges/org_marykay/cartridge/client/default/scss/experience/components/commerce_assets/pxpMultiRowCollection.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* *** MIXINS *** */
/* ******** Set Line Clamp ******** */
.clamp {
  -webkit-line-clamp: 3;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.clamp--1 {
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.clamp--2 {
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.clamp--3 {
  -webkit-line-clamp: 3;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.clamp--4 {
  -webkit-line-clamp: 4;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.clamp--5 {
  -webkit-line-clamp: 5;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.clamp--9 {
  -webkit-line-clamp: 9;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

/**
  @mixin aspect-ratio
  Use CSS aspect-ratio rule where possible, but fall back to
  padding-top hack iff needed (i.e. iOS 14)
*/
:root {
  /** ==================================================================== **/
  /** Create Custom CSS Variables from "sfra bootstrap override" variables **/
  /** ==================================================================== **/
  --color-white: #fff;
  --color-black: #000;
  --color-blue: #0070d2;
  --color-green: #008827;
  --color-primary: #00a1e0;
  --color-red: #c00;
  --color-success: var(--color-green);
  --color-danger: var(--color-red);
  --color-light-blue: #7ed0ee;
  --color-grey1: #f9f9f9;
  --color-grey2: #eee;
  --color-grey3: #ccc;
  --color-grey4: #999;
  --color-grey5: #666;
  --color-grey6: #444;
  --color-grey7: #222;
  --color-grey8: #333;
  --color-grey-transparent-1: rgba(0, 0, 0, 65%);
  --color-grey-transparent-2: rgba(0, 0, 0, 25%);
  --color-light-gray: var(--color-grey1);
  --color-slightly-darker-gray: var(--color-grey4);
  --color-dark-gray: var(--color-grey6);
  --color-darker-gray: var(--color-grey7);
  --color-horizontal-rule-grey: var(--color-grey3);
  --color-product-number-grey: var(--color-grey3);
  --color-horizontal-border-grey: var(--color-grey4);
  --color-menu-link: var(--color-grey6);
  --color-close-menu-bg: var(--color-grey2);
  --color-link-color: var(--color-dark-gray);
  --color-hr-border-color: var(--color-grey3);
  /** ==================================================================== **/
  /** Define skin named variables here                                    **/
  /** ==================================================================== **/
  --skin-background-color-1: var(--color-gray1);
  --skin-border-color-1: var(--color-white);
  --skin-main-text-color-1: var(--color-gray7);
  --skin-main-text-color-2: var(--color-gray7);
  --skin-menu-color-1: #444;
  --skin-menu-color-1-invert: var(--color-white);
  --skin-menu-color-2: #222;
  --skin-link-color-1: #444;
  --skin-link-color-2: var(--color-blue);
  --skin-primary-color-1: var(--color-primary);
  --skin-primary-color-2: var(--color-primary);
  --skin-primary-color-invert-1: var(--color-white);
  --skin-selectbox-background-color-1: var(--color-white);
  --skin-selectbox-text-color-1: var(--skin-main-text-color-1);
  --skin-banner-background-color-1: #444;
  --skin-banner-background-color-2: #222;
  --skin-banner-text-color-1: var(--color-white);
  --skin-heading-color-1: var(--color-primary);
  --skin-heading-color-1-invert: var(--color-white);
  --skin-price-1: var(--color-gray7);
  --skin-header-font: "Dosis";
  --skin-body-font: var(--font-family-sans-serif);
}

:root {
  --color-primary: #d00070;
  --color-seconday: #ac0058;
  --color-success: #0b662f;
  --color-warning: #fdc767;
  --color-info: #3f2a56;
  --color-danger: #b21026;
  --color-success-light: #c2d9cb;
  --color-warning-light: #fff1d9;
  --color-info-light: #cfcad5;
  --color-danger-light: #ecc3c9;
  --color-light-gray: #f0f0f0;
  --color-ash-gray: #b9bdbd;
  --color-stardust: #d9d9d6;
  --color-backstage: #101820;
  --color-pastel-pink: #ffd6e6;
  --color-slate: #808586;
  --color-graphite: #363e47;
  --color-dark-raspberry: #990045;
  --color-midnight-plum: #36234d;
  --color-near-black-indigo: #18002d;
  --color-steel-gray: #5c6060;
  --color-pearl-gray: #ececeb;
  --color-grey-violet: #49454f;
  --color-snow-pink: #fff7fa;
  --color-lavender-gray: #cac4d0;
  --color-coral-tree: #a76266;
  --color-silver-gray: #a8a8a5;
  --color-alert-light-rose: #f8dbe0;
  --color-alert-goldenrod: #f6c667;
  --color-alert-burnt-orange: #c73d23;
  --color-alert-steel-strong: #545859;
  --color-alert-jungle-green: #387e61;
  --color-breadcrum: #898d8d;
  --color-breadcrum-active: var(--color-backstage);
  --color-button-primary-bg: var(--color-primary);
  --color-button-primary-border: var(--color-primary);
  --color-button-primary-text: var(--color-white);
  --color-button-primary-disabled-bg: var(--color-light-gray);
  --color-button-primary-disabled-border: var(--color-light-gray);
  --color-button-primary-disabled-text: var(--color-backstage);
  --color-button-secondary-bg: var(--color-white);
  --color-button-secondary-border: var(--color-ash-gray);
  --color-button-secondary-text: var(--color-primary);
  --color-button-secondary-disabled-bg: var(--color-backstage);
  --color-button-secondary-disabled-border: var(--color-backstage);
  --color-button-secondary-disabled-text: var(--color-backstage);
  --color-button-tonal-bg: var(--color-pastel-pink);
  --color-button-tonal-border: var(--color-pastel-pink);
  --color-button-tonal-text: var(--color-backstage);
  --color-button-tonal-disabled-bg: var(--color-light-gray);
  --color-button-tonal-disabled-border: var(--color-light-gray);
  --color-button-tonal-disabled-text: var(--color-backstage);
  --color-button-primary-dark-bg: var(--color-pastel-pink);
  --color-button-primary-dark-border: var(--color-pastel-pink);
  --color-button-primary-dark-text: var(--color-seconday);
  --color-button-secondary-dark-bg: transparent;
  --color-button-secondary-dark-border: var(--color-slate);
  --color-button-secondary-dark-text: var(--color-pastel-pink);
  --color-button-tonal-dark-bg: var(--color-graphite);
  --color-button-tonal-dark-border: var(--color-graphite);
  --color-button-tonal-dark-text: var(--color-pastel-pink);
  --skin-header-font: Noto Sans, sans-serif;
  --skin-body-font: Noto Sans, sans-serif;
  --skin-menu-color-1: #545859;
  --skin-menu-color-1-invert: #fff;
  --skin-menu-color-2: var(--color-primary);
  --skin-menu-background-color: #fff;
  --skin-banner-background-color-1: #fff;
  --skin-selectbox-text-color-1: #545859;
}

/* *** MIXINS *** */
/* ******** Set Line Clamp ******** */
.clamp {
  -webkit-line-clamp: 3;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.clamp--1 {
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.clamp--2 {
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.clamp--3 {
  -webkit-line-clamp: 3;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.clamp--4 {
  -webkit-line-clamp: 4;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.clamp--5 {
  -webkit-line-clamp: 5;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.clamp--9 {
  -webkit-line-clamp: 9;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

/**
  @mixin aspect-ratio
  Use CSS aspect-ratio rule where possible, but fall back to
  padding-top hack iff needed (i.e. iOS 14)
*/
/* *** MIXINS *** */
/* ******** Set Line Clamp ******** */
.clamp {
  -webkit-line-clamp: 3;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.clamp--1 {
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.clamp--2 {
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.clamp--3 {
  -webkit-line-clamp: 3;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.clamp--4 {
  -webkit-line-clamp: 4;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.clamp--5 {
  -webkit-line-clamp: 5;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.clamp--9 {
  -webkit-line-clamp: 9;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

/**
  @mixin aspect-ratio
  Use CSS aspect-ratio rule where possible, but fall back to
  padding-top hack iff needed (i.e. iOS 14)
*/
.icon--sm {
  width: 1rem;
  height: 1rem;
}
.icon--md {
  width: 1.5rem;
  height: 1.5rem;
}
.icon--lg {
  width: 2rem;
  height: 2rem;
}

body {
  container-type: inline-size;
}

div[class*=experience-commerce_assets-pxpMultiRowCollection] {
  background: #FFF7FA;
}
div[class*=experience-commerce_assets-pxpMultiRowCollection]:first-child {
  padding-top: 48px;
}

:not(div[class*=experience-commerce_assets-pxpMultiRowCollection]):has(+ div[class*=experience-commerce_assets-pxpMultiRowCollection]) + div[class*=experience-commerce_assets-pxpMultiRowCollection] {
  padding-top: 48px;
}

.pxp-multi-row-collection {
  width: 100%;
  font-family: "Noto Sans", sans-serif;
  background: #FFF7FA;
  padding: 0 24px 48px;
}
.pxp-multi-row-collection__section-title {
  color: #000;
  font-family: "Noto Sans", sans-serif;
  font-size: 34.1px;
  font-style: normal;
  font-weight: 300;
  line-height: 120%;
  text-align: left;
  width: 100%;
  margin-bottom: 48px;
  padding: 0 16px;
}
@media (min-width: 768px) {
  .pxp-multi-row-collection__section-title {
    font-size: 56px;
    letter-spacing: 1.68px;
    padding: 0;
    padding-top: 0;
  }
}
.pxp-multi-row-collection__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 24px;
  max-width: 100%;
  margin: 0;
  padding: 0 16px;
}
@media (min-width: 768px) {
  .pxp-multi-row-collection__container {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 24px;
    margin: 0 auto;
    padding: 0;
  }
}
.pxp-multi-row-collection__container--no-image {
  gap: 0;
}
.pxp-multi-row-collection__content {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 16px;
  text-align: left;
  width: 100%;
}
@media (min-width: 768px) {
  .pxp-multi-row-collection__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 47.5vw;
            flex: 0 0 47.5vw;
    width: 47.5vw;
    width: 47.5cqw;
  }
}
.pxp-multi-row-collection__container--no-image .pxp-multi-row-collection__content {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  width: 100%;
}
.pxp-multi-row-collection__image-container {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 43.8vw;
  width: 43.8cqw;
  height: 43.8vw;
  height: 43.8cqw;
  position: relative;
}
@media (min-width: 768px) {
  .pxp-multi-row-collection__image-container {
    width: 6.5vw;
    width: 6.5cqw;
    height: 6.5vw;
    height: 6.5cqw;
  }
}
.pxp-multi-row-collection__picture {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.pxp-multi-row-collection__image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  border-radius: 4px;
}
.pxp-multi-row-collection__headline-text {
  font-family: "Noto Sans", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 23.1px;
  line-height: 120%;
  color: #101820;
  text-align: left;
  margin: 0;
}
@media (min-width: 768px) {
  .pxp-multi-row-collection__headline-text {
    font-size: 28px;
    letter-spacing: 0.03em;
  }
}
.pxp-multi-row-collection__body {
  font-family: "Noto Sans", sans-serif;
  font-style: normal;
  font-size: 16px;
  line-height: 150%;
  letter-spacing: 0.03em;
  color: #101820;
  margin: 0;
}
.pxp-multi-row-collection__divider {
  border-top: 1px solid #898D8D;
  width: 100%;
  margin: 0 0 16px;
  border-bottom: none;
  border-left: none;
  border-right: none;
}
.pxp-multi-row-collection__accordion {
  width: 100%;
}
.pxp-multi-row-collection__accordion-item {
  border: none;
  background-color: transparent;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  padding: 0;
  isolation: isolate;
}
.pxp-multi-row-collection__accordion-header {
  padding: 0;
  margin-bottom: 0;
  width: 100%;
}
.pxp-multi-row-collection__accordion-button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 8px 24px 8px 16px;
  gap: 16px;
  width: 100%;
  height: 56px;
  background-color: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: "Noto Sans", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 120%;
  letter-spacing: 0.03em;
  color: #101820;
  -webkit-transition: background-color 0.3s ease;
  transition: background-color 0.3s ease;
  position: relative;
}
.pxp-multi-row-collection__accordion-title {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  text-align: left;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  font-weight: inherit;
}
.pxp-multi-row-collection__accordion-icon {
  width: 24px;
  height: 24px;
  font-size: 24px;
  line-height: 1;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.pxp-multi-row-collection__accordion-button:not(.collapsed) .pxp-multi-row-collection__accordion-icon {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.pxp-multi-row-collection__accordion-collapse {
  border: none;
  background-color: transparent;
}
.pxp-multi-row-collection__accordion-collapse.show {
  background-color: transparent;
}
.pxp-multi-row-collection__accordion-body {
  padding: 16px;
  font-family: "Noto Sans", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  letter-spacing: 0.03em;
  color: #545859;
}
.pxp-multi-row-collection .container-fluid {
  padding: 0;
  max-width: none;
}
.pxp-multi-row-collection .row {
  margin: 0;
}
.pxp-multi-row-collection .row [class*=col-] {
  padding: 0;
}
.pxp-multi-row-collection__accordion-body p {
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0 0 1em;
}
.pxp-multi-row-collection__body p {
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0 0 1em;
}
.pxp-multi-row-collection__accordion-body p:last-child {
  margin-bottom: 0;
}
.pxp-multi-row-collection__body p:last-child {
  margin-bottom: 0;
}

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