/*!********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/skin/skin.scss ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************/
body,
.card,
.card-header,
.hero {
  background-color: var(--skin-background-color-1);
  font-family: var(--skin-body-font);
  color: var(--skin-main-text-color-1);
}

.hero {
  border-bottom-color: var(--skin-background-color-1);
}

.main-menu {
  background-color: var(--skin-banner-background-color-1);
}

.banner-color {
  background-color: var(--skin-banner-background-color-1);
}

.header-banner {
  background-color: var(--skin-banner-background-color-2);
  color: var(--skin-banner-text-color-1);
}

.header-banner .close-button .close {
  background-color: var(--skin-primary-color-1);
}

h1.header.page-title,
h1.header.page-title::before {
  background-color: var(--skin-heading-color-1);
  color: var(--skin-heading-color-1-invert);
}

.product-tile {
  background-color: var(--skin-background-color-1);
  border: 10px solid var(--skin-border-color-1);
}

.refinements ul li button {
  color: var(--skin-primary-color-1);
}

.custom-select {
  background-color: var(--skin-selectbox-background-color-1);
  color: var(--skin-selectbox-text-color-1);
}

a {
  color: var(--skin-link-color-1);
}

.price {
  color: var(--skin-price-1);
}

.dropdown-menu,
.dropdown-menu a,
.navbar,
.navbar .nav-item,
.navbar .nav-item a,
.navbar .nav-item.dropdown,
.navbar .nav-item.dropdown a {
  color: var(--skin-menu-color-1);
}
@media (min-width: 769px) {
  .dropdown-menu,
  .dropdown-menu a,
  .navbar,
  .navbar .nav-item,
  .navbar .nav-item a,
  .navbar .nav-item.dropdown,
  .navbar .nav-item.dropdown a {
    color: var(--skin-menu-color-1-invert);
  }
}

.navbar .nav-item.dropdown,
.navbar .nav-item.dropdown .dropdown-menu.show {
  color: var(--skin-selectbox-text-color-1);
}

.navbar .nav-item.dropdown .dropdown-menu.show {
  background-color: var(--skin-selectbox-background-color-1);
}
.navbar .nav-item.dropdown .dropdown-menu.show a,
.navbar .nav-item.dropdown .dropdown-menu.show .nav-item {
  color: var(--skin-selectbox-text-color-1);
}

.nav-item .nav-link:hover,
.nav-item .nav-link:focus,
.nav-item.show .nav-link {
  background-color: var(--skin-menu-color-1-invert);
  color: var(--skin-menu-color-1) !important;
}

.btn-primary {
  background-color: var(--skin-primary-color-1);
  border-color: var(--skin-primary-color-1);
  color: var(--skin-primary-color-invert-1);
}

.btn-primary:hover {
  color: var(--skin-primary-color-1);
  border-color: var(--skin-primary-color-1);
  background-color: var(--skin-primary-color-invert-1);
}

.btn-primary.disabled,
.btn-primary:disabled {
  background-color: var(--skin-primary-color-1);
  border-color: var(--skin-primary-color);
  color: var(--skin-primary-color-invert-1);
  opacity: 0.5;
}

.btn-outline-primary {
  color: var(--skin-primary-color-1);
  border-color: var(--skin-primary-color-1);
}

.btn-outline-primary:hover {
  color: var(--skin-primary-color-invert-1);
  background-color: var(--skin-primary-color-1);
  border-color: var(--skin-primary-color-1);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--skin-header-font), sans-serif;
}

header ~ #maincontent .container a:not(.btn-primary, .btn-outline-primary) {
  color: var(--skin-primary-color-1);
}

/* *** 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)
*/
.dropdown-menu,
.dropdown-menu a,
.navbar,
.navbar .nav-item,
.navbar .nav-item a,
.navbar .nav-item.dropdown,
.navbar .nav-item.dropdown a {
  color: var(--skin-menu-color-1);
}

.navbar .nav-item.dropdown,
.navbar .nav-item.dropdown .dropdown-menu.show {
  color: var(--skin-menu-color-1);
}

.navbar .nav-item.dropdown .dropdown-menu.show {
  background-color: var(--skin-menu-background-color);
}
.navbar .nav-item.dropdown .dropdown-menu.show .dropdown.show .link-level-2 {
  color: #000;
}
.navbar .nav-item.dropdown .dropdown-menu.show .dropdown.show .link-level-2 .icon-hover {
  display: block;
}
.navbar .nav-item.dropdown .dropdown-menu.show a,
.navbar .nav-item.dropdown .dropdown-menu.show .nav-item {
  color: var(--skin-menu-color-1);
}
.navbar .nav-item.dropdown .dropdown-menu.show a:hover,
.navbar .nav-item.dropdown .dropdown-menu.show .nav-item:hover {
  color: #000;
}

.nav-item .nav-link:hover,
.nav-item .nav-link:focus,
.nav-item.show .nav-link {
  color: var(--skin-menu-color-1);
}

.btn-primary {
  background-color: var(--color-button-primary-bg);
  border-color: var(--color-button-primary-border);
  color: var(--color-button-primary-text);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--color-button-primary-bg) !important;
  border-color: var(--color-button-primary-border) !important;
  color: var(--color-button-primary-text) !important;
  -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
          box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
}

.btn-primary.disabled,
.btn-primary:disabled {
  background-color: var(--color-button-primary-disabled-bg);
  border-color: var(--color-button-primary-disabled-border);
  color: var(--color-button-primary-disabled-text);
  opacity: 0.6;
}

.btn-secondary {
  background-color: var(--color-button-secondary-bg);
  border-color: var(--color-button-secondary-border);
  color: var(--color-button-secondary-text);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
  background-color: rgba(236, 127, 167, 0.1) !important;
  border-color: var(--color-silver-gray) !important;
  color: var(--color-primary) !important;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
}

.btn-secondary.disabled,
.btn-secondary:disabled {
  background-color: var(--color-button-secondary-disabled-bg);
  border-color: var(--color-button-secondary-disabled-border);
  color: var(--color-button-secondary-disabled-text);
  opacity: 0.6;
}

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