/** Shopify CDN: Minification failed

Line 119:10 Expected ":"

**/
.header__icon--menu {
  position: initial;
}

.js menu-drawer > details > summary::before,
.js menu-drawer > details[open]:not(.menu-opening) > summary::before {
  content: '';
  position: absolute;
  cursor: default;
  width: 100%;
  height: calc(100vh - 100%);
  height: calc(var(--viewport-height, 100vh) - (var(--header-bottom-position, 100%)));
  top: 100%;
  left: 0;
  background: rgba(var(--color-foreground), 0.5);
  opacity: 0;
  visibility: hidden;
  z-index: 2;
  transition: opacity 0s, visibility 0s;
}

menu-drawer > details[open] > summary::before {
  visibility: visible;
  opacity: 1;
  transition: opacity var(--duration-default) ease, visibility var(--duration-default) ease;
}

.menu-drawer {
  position: absolute;
  transform: translateX(-100%);
  visibility: hidden;
  z-index: 3;
  left: 0;
  top: 100%;
  width: 100%;
  padding: 0;
  background-color: rgb(var(--color-background));
  overflow-x: hidden;
  filter: drop-shadow(
    var(--drawer-shadow-horizontal-offset) var(--drawer-shadow-vertical-offset) var(--drawer-shadow-blur-radius)
      rgba(var(--color-shadow), var(--drawer-shadow-opacity))
  );
}

.js .menu-drawer {
  height: calc(100vh - 100%);
  height: calc(var(--viewport-height, 100vh) - (var(--header-bottom-position, 100%)));
}

.js details[open] > .menu-drawer,
.js details[open] > .menu-drawer__submenu {
  transition: transform var(--duration-default) ease, visibility var(--duration-default) ease;
}

.js details[open].menu-opening > .menu-drawer,
details[open].menu-opening > .menu-drawer__submenu {
  transform: translateX(0);
  visibility: visible;
}

.js .menu-drawer__navigation .submenu-open {
  visibility: hidden; /* hide menus from screen readers when hidden by submenu */
}

@media screen and (min-width: 750px) {
  .menu-drawer {
    width: 40rem;
    border-width: 0 var(--drawer-border-width) 0 0;
    border-style: solid;
    border-color: rgba(var(--color-foreground), var(--drawer-border-opacity));
  }
}

.menu-drawer__inner-container {
  position: relative;
  height: 100%;
}

.menu-drawer__navigation-container {
  display: grid;
  grid-template-rows: 1fr auto;
  align-content: space-between;
  overflow-y: auto;
  height: 100%;
}

.menu-drawer__navigation {
  padding: 3rem 0;
}

.menu-drawer__inner-submenu,
.menu-drawer__inner-submenu .menu-drawer__submenu {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 2rem 2rem 2rem;
  display: flex;
  flex-direction: column;
}

.js .menu-drawer__menu li {
  margin-bottom: 0.2rem;
}

.menu-drawer__menu-item {
  padding: 1.1rem 2rem;
  text-decoration: none;
}
.drawer-submenu-con.list-menu,
.menu-drawer__submenu .list-menu {
  background-color: #f7f7f7;
  border-radius: 8px;
  padding: 2rem;
  flex:1;p
}
.drawer-submenu-con .menu-drawer__menu-item {
  padding: 1.1rem 0;
}
.menu-drawer summary.menu-drawer__menu-item {
  padding-right: 5.2rem;
}

.menu-drawer__menu-item--active,
.menu-drawer__menu-item:focus,
.menu-drawer__close-button:focus,
.menu-drawer__menu-item:hover,
.menu-drawer__close-button:hover {
  color: rgb(var(--color-foreground));
}

.menu-drawer__menu-item--active:hover {
}

.js .menu-drawer__menu-item .icon-caret {
  display: none;
}

.menu-drawer__menu-item > .svg-wrapper {
  width: 15px;
  position: absolute;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
}

.js .menu-drawer__submenu {
  position: absolute;
  top: 0;
  width: 100%;
  bottom: 0;
  left: 0;
  background-color: rgb(var(--color-background));
  z-index: 1;
  transform: translateX(100%);
  visibility: hidden;
}

.js .menu-drawer__submenu .menu-drawer__submenu {
  overflow-y: auto;
}

.menu-drawer__close-button {
  margin-top: 1.5rem;
  padding: 1.2rem 2.6rem 1.2rem 0;
  text-decoration: none;
  display: flex;
  align-items: center;
  width: 100%;
  background-color: transparent;
  text-align: left;
}

.menu-drawer__close-button .svg-wrapper {
  transform: rotate(180deg);
  margin-right: 1rem;
  width: 15px;
}

.menu-drawer__utility-links {
  padding: 0;
  position: relative;
}

.header--has-social .menu-drawer__utility-links {
  padding: 2rem;
}
.mega-banner-container.drawer-banner-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  row-gap: 1.5rem;
  padding: 3.5rem 2rem 0;
}
.menu-drawer__navigation-container {
   -ms-overflow-style: none;
}
.menu-drawer__navigation-container::-webkit-scrollbar {
  display: none;
}

.drawer-banner-container .mega-banner-title {
  text-align: left;
  margin-top: 1.5rem;
}
.drawer-banner-container .megamenu-banner-block {
  flex: 0 0 100%;
  max-width: 100%;
}
@media screen and (max-width: 749px) {
  .header--has-account:where(:not(.header--has-social):not(.header--has-localizations)) .menu-drawer__utility-links {
    padding: 2rem 2rem;
  }
}

@media screen and (max-width: 989px) {
  .header--has-localizations:where(:not(.header--has-social)) .menu-drawer__utility-links {
    padding: 2rem 2rem;
  }
}

.menu-drawer__account {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  padding: 1rem 0;
  margin-bottom: 0;
}

.menu-drawer__utility-links:has(.menu-drawer__localization) .menu-drawer__account {
  margin: 0;
}

.menu-drawer__account account-icon > .svg-wrapper {
  height: 2rem;
  width: 2rem;
  margin-right: 1rem;
}

.menu-drawer__account shop-user-avatar {
  --shop-avatar-size: 2.4rem;
  margin-right: 0.55rem;
  margin-left: -0.45rem;
}

.menu-drawer__account:hover account-icon > .svg-wrapper {
  transform: scale(1.07);
}

.menu-drawer .list-social {
  justify-content: flex-start;
  margin-left: -1.25rem;
}

.menu-drawer .list-social:empty {
  display: none;
}

.menu-drawer .list-social__link {
  padding: 1.1rem 1.1rem;
}

@media screen and (max-width: 749px) {
  .menu-drawer.country-selector-open {
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* === CISL header v2: logo left; cluster order = hamburger, search, account, cart (mobile) -- 2026-07-31 === */
@media screen and (max-width: 749px) {
  .header {
    grid-template-areas: "heading left-icons icons" !important;
    grid-template-columns: 1fr auto auto !important;
    column-gap: 0.6rem !important;
    align-items: center !important;
  }
  .header header-drawer {
    grid-area: left-icons !important;
    justify-self: end !important;
    margin-left: 0 !important;
  }
  .header .header__heading {
    grid-area: heading !important;
    justify-self: start !important;
    text-align: left !important;
    margin: 0 !important;
  }
  .header .header__heading-link {
    justify-self: start !important;
    text-align: left !important;
    padding-left: 0 !important;
  }
  .header .header__icons {
    grid-area: icons !important;
    justify-self: end !important;
    align-items: center !important;
  }
  .header .header__icons .desktop-localization-wrapper { order: 0 !important; }
  .header .header__icons .header__search { order: 1 !important; }
  .header .header__icons .header__icon--account { order: 2 !important; display: inline-flex !important; }
  .header .header__icons .header__icon--cart { order: 3 !important; }
}

/* === CISL: mobile hamburger = LEFT side drawer ~80% (U Beauty style, page peeks on right) -- 2026-07-31 === */
@media screen and (max-width: 749px) {
  .menu-drawer {
    width: 80% !important;
    max-width: 400px !important;
    left: 0 !important;
    right: auto !important;
    filter: drop-shadow(8px 0 24px rgba(0,0,0,0.12));
  }
}


/* CISL: global Graphik Compact webfont (Regular/Medium/Bold, Shopify Files CDN) 2026-08-01
   theme.liquid sets every font var to "Graphik Compact" but its font-face pointed at theme
   assets that don't exist (404 -> system-sans fallback). This file loads on every page, so
   redeclaring the family from the working CDN URLs (later in cascade) overrides the broken
   faces and the whole site renders in Graphik. Dual Serum PDP is self-contained
   (snippets/cisl-dpdp-font.liquid) and left untouched. */
@font-face{font-family:'Graphik Compact';src:url('/cdn/shop/files/GraphikCompact-Regular-Web_f2e41834-da25-4417-b1a2-4153ad3ec484.woff2?v=1781411669') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Graphik Compact';src:url('/cdn/shop/files/GraphikCompact-Medium-Web_b8cbef8a-9d27-4835-9aea-ae8a864a3860.woff2?v=1781411669') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Graphik Compact';src:url('/cdn/shop/files/GraphikCompact-Bold-Web.woff2?v=1785501678') format('woff2');font-weight:700;font-style:normal;font-display:swap;}

/* CISL: display headings -> bold + UPPERCASE, tight tracking (match Dual PDP tone) 2026-08-01
   .txt_style_one/two are the theme's primary/secondary heading styles (already weight 700, mixed-case).
   Uppercasing + tightening tracking gives the big, punchy PDP feel across home/collections/pages.
   Dual PDP is unaffected: it uses its own .cisl-dpdp heading classes, not these. */
.txt_style_one, .txt_style_two {
  text-transform: uppercase;
  font-weight: 700 !important;
}
.txt_style_one { letter-spacing: -0.01em; line-height: 1.05; }
.txt_style_two { letter-spacing: -0.005em; }