:root {

  /** FONTS **/
  --font-body: 'CliniqueHelveticaNeue', Arial, Sans-Serif;
  --font-headline: 'CliniqueHelveticaNeue', Arial, Sans-Serif;
  --font-button: var(--font-secondary);
  --font-light: 'CliniqueHelveticaNeue', Arial, Sans-Serif;
  --font-secondary: 'CliniqueHelveticaNeue', Arial, Sans-Serif;
  --font-regular: 'CliniqueHelveticaNeueRegular', Arial, Sans-Serif;
  --font-classic: 'HelveticaNeueLTStd75Bold',Verdana,Arial,Sans-Serif;
  --font-boldneue: 'CliniqueHelveticaNeueBold','HelveticaNeueBold',Sans-Serif;
  --font-nittistack: 'Nitti','Courier New',ui-monospace;

  --font-size-pdp-title: 3rem;
  --line-height-pdp-title: 2.75rem;

  --text-sm-6:     .625rem;
  --text-sm-5:     .6875rem;
  --text-sm-4:     .75rem;
  --text-sm-3:     .8125rem;
  --text-sm-2:     .875rem;
  --text-sm-1:     .9375rem;

  --text-lg-0_25:  1.063rem;
  --text-lg-0_5:   1.125rem;
  --text-lg-0_75:  1.1875rem;
  --text-lg-1:     1.25rem;
  --text-lg-1_5:   1.375rem;
  --text-lg-2:     1.5rem;
  --text-lg-2_25:  26px;
  --text-lg-2_5:   1.625rem;
  --text-lg-3:     1.75rem;
  --text-lg-3_5:   1.875rem;
  --text-lg-3_65:  2rem;
  --text-lg-3_75:  2.125rem;
  --text-lg-3_85:  2.25rem;
  --text-lg-3_95:  2.375rem;
  --text-lg-4:     2.5rem;
  --text-lg-4_5:   2.625rem;
  --text-lg-4_75:  2.75rem;
  --text-lg-4_85:  3rem;
  --text-lg-5:     3.125rem;
  --text-lg-5_25:  3.25rem;
  --text-lg-6:     3.625rem;
  --text-lg-6_25:  3.75rem;
  --text-lg-6_5:   4rem;
  --text-lg-6_75:  4.125rem;
  --text-lg-7:     4.375rem;
  --text-lg-7_5:   5rem;
  --text-lg-8:     5.5rem;

  /** COLOR **/
  --color-body: #1e1e1e;
  --color-button-sku: #000000;
  --color-primary: #ffffff;
  --color-primary-75: #ffffffbf;
  --color-primary-100: #fafafd;
  --color-primary-200: #f4f2ee;
  --color-primary-250: #F5F5F5;
  --color-primary-300: #F6F6F6;
  --color-primary-550: #666666;
  --color-primary-800: #262626;
  --color-secondary-50: #e6e6e6;
  --color-secondary-100: #FAFAFA;
  --color-secondary-150: #858585;
  --color-secondary-200: #706B6A;
  --color-secondary-300: #515254;
  --color-secondary-350: #cccccc;
  --color-secondary-400: #999;
  --color-secondary-500: #3f3f3f;
  --color-secondary-550: #222222;
  --color-secondary-600: #212121;
  --color-secondary-700: #1A1A1A;
  --color-secondary-800: #050505;
  --color-secondary-900: #666;
  --color-red-50: #ef6ea8;
  --color-red-100: #ba0000;
  --color-red-150: #DD0000;
  --color-gray-50: #525252;
  --color-gray-100: #262626;
  --color-product-card-image-bg: #EEE;
  --color-button-hover: var(--color-gray-100);
  --color-lime: #adddb7;
  --color-body-minimal-bg: #FAFAFA;

  /* input fields */
  --input-disabled-background: var(--color-secondary-100);
  --input-disabled-color:var(--color-secondary-400);
  --input-disabled-border: #a3a3a3;

  /** SETTINGS **/
  --star-size: 1.0rem;
  --star-color: #C4C4C4;
  --star-background: #010101;
  --max-width-screen-3xl: 120rem;
  --live-chat-button-bg: #cadcc2;
  --color-live-chat-button-text: #000000;
  --color-success-text: #22b322;
  --color-error: var(--color-red-150);
  --max-width-collection-grid: 1920px;
  --max-width-quickshop-modal: 1016px;
  --brand-logo-loyalty: url("/tenant-web/brands/clinique/clinique_loyalty_logo.svg");
  --width-logo-header: 6.875rem;
  --width-logo-header-lg: 6.875rem;
  --color-header-fg: #000000;
  --color-footer-bg: var(--color-primary);
  --color-mobile-footer-bg: var(--color-primary);

  /** WIDTH **/
  --width-carousel-image: 85vw;

  /** Minimal Footer **/
  --font-size-footer: 14px;
  --color-footer-text: var(--color-secondary-700);
  --color-copyright: var(--color-primary-550);

  --mobile-minimal-header-height: 56px;

  /** Carousel **/
  --pincer-swiper-padding-bottom: 0;
  --pincer-swiper-margin-bottom: 0;
  --pincer-swiper-slide-margin-bottom: 0;

  --pincer-swiper-navigation-width: 40px;
  --pincer-swiper-navigation-height: 40px;
  --pincer-swiper-navigation-top-offset: 40%;
  --pincer-swiper-navigation-sides-offset: 0.25rem;
  --pincer-swiper-navigation-background-color: transparent;
  --pincer-swiper-navigation-opacity: 1;
  --pincer-swiper-navigation-font-size: 1.3rem;
  --pincer-swiper-navigation-font-color: #000000;
  --pincer-swiper-navigation-prev-side-offset: -2rem;
  --pincer-swiper-navigation-next-side-offset: -1.75rem;
  --product-grid-navigation-prev-side-offset: 1rem;
  --product-grid-navigation-next-side-offset: 1rem;
  --product-grid-arrow-left-mobile: 1rem;
  --product-grid-arrow-right-mobile: 1rem;
  --pincer-swiper-arrow-left-mobile: 1rem;
  --pincer-swiper-arrow-right-mobile: 2.7rem;
  --product-grid-navigation-top-offset: 50%;
  --pincer-swiper-thumbnails-navigation-prev-top: 20px;
  --pincer-swiper-thumbnails-navigation-prev-bottom: unset;
  --pincer-swiper-thumbnails-navigation-prev-left: 2rem;
  --pincer-swiper-thumbnails-navigation-next-top: unset;
  --pincer-swiper-thumbnails-navigation-next-right: unset;
  --pincer-swiper-thumbnails-navigation-next-bottom: 0;
  --pincer-swiper-thumbnails-navigation-next-left: 2rem;

  --swiper-pagination-color: #000;
  --swiper-pagination-left: auto;
  --swiper-pagination-right: 8px;
  --swiper-pagination-bottom: 0;
  --swiper-pagination-top: auto;
  --swiper-pagination-fraction-color: inherit;
  --swiper-pagination-bullet-size: 8px;
  --swiper-pagination-bullet-width: 8px;
  --swiper-pagination-bullet-height: 8px;
  --swiper-pagination-bullet-inactive-color: #CCC;
  --swiper-pagination-bullet-inactive-opacity: 1;
  --swiper-pagination-bullet-opacity: 1;
  --swiper-pagination-bullet-horizontal-gap: 4px;
  --swiper-pagination-bullet-vertical-gap: 6px;
  --checkbox-label-padding-inline-end: 30px;
  --live-person-all-z-index: 11;
  --live-person-proactive-z-index: 12;
}

/* Overwriting global css defined weight bolder, need to make the text bold */
.drupal strong,
strong,
b {
  font-weight: bold;
}

/* Video overlay */
@media only screen and (min-width: 1024px) {
  [data-video-target="modal"] {
    background-color: rgba(0,0,0,0.3);
  }

  [data-video-target="modal"] > button {
    width: 40px;
    height: 40px;
    font-size: 0;
    border-radius: 100%;
    background-color: white;
    position: relative;
    right: 43px;
    top: 3px;
  }

  [data-video-target="modal"] > button:after {
    content: "";
    background-image: url("icons/close-2d45db938409cc850570829e62dddd30.svg?vsn=d");
    background-repeat: no-repeat;
    width: 16px;
    height: 16px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  [data-video-target="modal"] > iframe {
    width: 1024px;
    height: 576px;
    margin: 0 auto;
    position: relative;
    top: 45%;
    transform: translateY(-50%);
  }
}

/* Hide Scroll Bar for Horizonal Shade Slider */
.shades-h-scroll-container {
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
  scrollbar-width: none;  /* Firefox */
}
.shades-h-scroll-container::-webkit-scrollbar {
  display: none;  /* Safari and Chrome */
}

.information-icon:after {
  background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 11"><path d="M5.5 1C8 1 10 3 10 5.5S8 10 5.5 10 1 8 1 5.5 3 1 5.5 1zm0-1C2.5 0 0 2.5 0 5.5S2.5 11 5.5 11 11 8.5 11 5.5 8.5 0 5.5 0z"/><path d="M6 4H5v5h1V4zm0-2H5v1h1V2z"/></svg>');
}

.white-caret {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg version='1.1' width='500px' height='290px' viewBox='0 0 500.0 290.0' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3CclipPath id='57991071145612110310350109'%3E%3Cpath d='M459.7,0 L500,40.2 L250,289.7 L0,40.2 L40.3,0 L250,209.3 L459.7,0 Z'%3E%3C/path%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%2357991071145612110310350109)'%3E%3Cpolygon points='0,0 500,0 500,289.7 0,289.7 0,0' stroke='none' fill='%23FFFFFF'%3E%3C/polygon%3E%3C/g%3E%3C/svg%3E");
  }
  footer .social {
    display: none;
  }
  footer .icon {
    background-repeat: no-repeat;
    background-position: center;
    height: 24px;
    width: 24px;
    display: inline-block;
  }
  .is-sticky {
    border-bottom: none;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
  }
  [type="checkbox"] {
    color: black;
  }
  .email-t-and-c a,
  .mobile-agree-text a {
    color: var(--color-secondary-400);
  }
.product-short-description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

/* LIVECHAT STYLES BEGIN */
.sticky-footer-live-chat__link {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  box-sizing: content-box;
  background-color: var(--live-chat-button-bg);
  z-index: 10;
  padding: 10px 15px;
  position: fixed;
  bottom: 0;
  right: 0;
}

.sticky-footer-live-chat__link .icon--chat {
  display: none;
}

.sticky-footer-live-chat__link-title {
  display: none;
}
@media only screen and (min-width: 1024px) {
  .sticky-footer-live-chat__link {
      padding: 10px 27px;
      width: 91px;
  }
}
@media only screen and (min-width: 1024px) {
  .sticky-footer-live-chat__link-title {
      display: block;
      flex: 0 0 auto;
      color: var(--live-chat-button-text);
      text-transform: uppercase;
      font-family: var(--font-button);
      font-size: 12px;
      padding-left: 32px;
      font-weight: 700;
      line-height: 24px;
  }
}
footer .lp-button-link-div .sticky-footer-live-chat__link {
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><path style="fill:%23414752;" d="M115.008,486.216v-103.76H0V25.784h512v356.672H242.752L115.008,486.216z M32,350.456h115.008V419 l84.352-68.544H480V57.784H32V350.456z"/></svg>');
  background-size: 20px 20px;
  background-repeat: no-repeat;
  background-position: center;
}

@media only screen and (min-width: 1024px) {
  footer .lp-button-link-div .sticky-footer-live-chat__link {
    background-position: 29px 16px;
  }
}

/* LIVECHAT END */
/* START STAR RATING */

.star-ratings::before {
  -webkit-text-stroke: 0.5px #c4c4c470;
  letter-spacing: 0px;
}

[dir="rtl"] .star-ratings::before {
  -webkit-text-stroke: 0.5px #c4c4c470;
  letter-spacing: 0px;
}

/* STAR RATING END*/


.close-button {
  -webkit-mask: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' preserveAspectRatio='none' fill='transparent' stroke='%23000000' stroke-width='1.5px' %3E%3Cpath d='M1,1 L19,19' /%3E%3Cpath d='M19,1 L1,19' /%3E%3C/svg%3E ") center center no-repeat;
  mask: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' preserveAspectRatio='none' fill='transparent' stroke='%23000000' stroke-width='1.5px' %3E%3Cpath d='M1,1 L19,19' /%3E%3Cpath d='M19,1 L1,19' /%3E%3C/svg%3E ") center center no-repeat;
}

/* Inline Touts */

.text-color--white{
  color: white;
}

.title--small{
  font-size: 1.063rem;
  font-family: var(--font-headline);
  letter-spacing: -.01em;
}

.title--med{
  font-size: 1.875rem;
  font-family: var(--font-headline);
  line-height: 1;
}

.title--large{
  font-size: 2.25rem;
  font-family: var(--font-headline);
  line-height: 1;
}

.title--xl {
  font-family: var(--font-headline);
  font-size: 34px;
  letter-spacing: -.02em;
  line-height: 1.05882;
  margin: 0
}

@media only screen and (min-width:540px) {
  .title--med{
    font-size: 1.375rem;
    font-family: var(--font-headline);
    letter-spacing: -.01em;
    line-height: 1.2;

  }

  .title--large{
    font-size: 1.375rem;
    font-family: var(--font-headline);
    letter-spacing: -.01em;
    line-height: 1.2;
  }

  .title--xl {
      font-size: 46px;
      letter-spacing: -.04em;
      line-height: 1.04348
  }

}

@media only screen and (min-width:800px) {
  .title--xl {
      font-size: 58px;
      line-height: 1.03448
  }

}

@media only screen and (min-width:1560px) {
  .title--xl {
      font-size: 88px;
      line-height: 1.04545
  }

}

@media only screen and (min-width: 1024px) {
  .title--small{
    font-size: 1.625rem;
    font-family: var(--font-headline);
    letter-spacing: -.17px;
  }

  .title--med{
    font-size: 2.375rem;
    font-family: var(--font-headline);
    letter-spacing: 0;
    line-height: 1;
  }

  .title--large {
    font-size: 3.25rem;
    letter-spacing: 0;
    line-height: 1;
  }

  .title--xl {
    font-size: 70px;
    line-height: 1.02857
  }
}

p.body-text {
  font-size: 1.125rem;
}

p.special-text--body {
  font-size: 1.125rem;
  font-family: 'Nitti'
}

p.special-bold-text--body {
  font-size: 1.125rem;
  font-family: 'Nitti';
  font-weight: 700;
}

p.text-link--style-1 {
  font-family: 'Nitti';
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: #1A1A1A;
  text-transform: uppercase;
  transition: .3s;
  text-underline-offset: 2px;
}

/* End InLine Touts */

a.text-link--style-1 {
  font-family: var(--font-secondary);
  font-size: 0.875rem;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--color-secondary-700);
  text-transform: uppercase;
  text-underline-offset: 5px;
  letter-spacing: 0.34px;
}

.add-to-bag:after {
    background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" xmlns:v="https://vecta.io/nano"><path d="M0 0h30v30H0z" fill="%23fff"/><path d="M10.7 5.5c.9 0 1.7.3 2.3.8a14.29 14.29 0 0 1 1.4-2c-1-.8-2.3-1.3-3.8-1.3-3.4 0-6 2.7-6 6H7c.1-1.9 1.6-3.5 3.7-3.5zm10.9-2a7.6 7.6 0 1 0 0 15.2c3.4 0 6.3-2.3 7.3-5.4.2-.7.3-1.5.3-2.3 0-4.1-3.4-7.5-7.6-7.5h0zm3.7 8.6h-2.8v2.8h-1.9v-2.8h-2.8v-1.9h2.8V7.4h1.9v2.8h2.8v1.9h0zm-9.4 12.8H5.5L3.8 14h8.4c-.2-.8-.4-1.6-.4-2.4H1l2.4 15.7h14.5l1-6.7c-.8-.2-1.6-.6-2.3-1l-.7 5.3h0z"/></svg>') no-repeat center;
}

/* Country selector */
.form-select {
  background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='-6 0 20 20' stroke-width='1' transform='rotate(180)' stroke='currentColor'%3E%3Cpath stroke-linecap='square' stroke-linejoin='square' d='M4.5 11.75l3.5-3.5 3.5 3.5' /%3E%3C/svg%3E");
  background-position: right -1.8rem center;
  background-size: 4rem 1.5rem;
}

/* Carousel */
.hide-dots .swiper-pagination {
  display: none;
}

.pincer-swiper .swiper-slide {
  padding: 0 0.625rem;
}

.product-grid.pincer-swiper .pincer-button-prev,
.product-grid.pincer-swiper .swiper-rtl .pincer-button-next {
  left: var(--product-grid-arrow-left-mobile);
}

.product-grid.pincer-swiper .pincer-button-next,
.product-grid.pincer-swiper .swiper-rtl .pincer-button-prev {
  right: var(--product-grid-arrow-right-mobile);
}

.pincer-swiper .pincer-button-prev,
.pincer-swiper .swiper-rtl .pincer-button-next {
  left: var(--pincer-swiper-arrow-left-mobile);
}

.pincer-swiper .pincer-button-next,
.pincer-swiper .swiper-rtl .pincer-button-prev {
  right: var(--pincer-swiper-arrow-right-mobile);
}

@media only screen and (min-width:768px) {
  .pincer-swiper .swiper-slide {
    padding: 0;
  }

  .product-grid.pincer-swiper .pincer-button-prev,
  .product-grid.pincer-swiper .swiper-rtl .pincer-button-next {
    left: var(--product-grid-navigation-prev-side-offset);
  }

  .product-grid.pincer-swiper .pincer-button-next,
  .product-grid.pincer-swiper .swiper-rtl .pincer-button-prev {
    right: var(--product-grid-navigation-next-side-offset);
  }

  .pincer-swiper .pincer-button-prev,
  .pincer-swiper .swiper-rtl .pincer-button-next {
    left: var(--pincer-swiper-navigation-prev-side-offset);
  }

  .pincer-swiper .pincer-button-next,
  .pincer-swiper .swiper-rtl .pincer-button-prev {
    right: var(--pincer-swiper-navigation-next-side-offset);
  }
}

/* Transformaions */
.clinique-translate-x-full {
    transform: translateX(100%);
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -o-transform: translateX(100%);

}

.swiper_main .pincer-button-next {
  --pincer-swiper-navigation-sides-offset: -30px;
}

.swiper_main .pincer-button-prev {
  --pincer-swiper-navigation-sides-offset: -30px;
}


.gnav-promo-bar-green{
  background-color: #adddb7;
}

/*****
* PLP HEADERS - OVERRIDE TAILWIND STYLES ON TURNKEY SITES
*****/
.drupal-container .plp-header-container {
  margin-left: 1rem;
  margin-right: 1rem;
  padding-left: 0;
  padding-right: 0;
}
@media only screen and (min-width:768px) {
  .drupal-container .plp-header-container {
    margin-left: 0.75rem;
    margin-right: 0.75rem;
    padding-left: 0;
    padding-right: 0;
  }
}
@media only screen and (min-width:1024px) {
  .drupal-container .plp-header-container {
    gap: 48px;
    margin-left: auto;
    margin-right: auto;
    max-width: 1536px;
    padding-left: 0;
    padding-right: 0;
  }
  .drupal-container .plp-header-container .plp-header {
    padding-left: 2rem;
    padding-right: 0;
    min-width: 18.875rem;
    max-width: 18.875rem;
  }
  .drupal-container .plp-header-container > div:last-child {
    margin-left: 0.75rem;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }
}
/*****
* END PLP HEADERS OVERRIDES
*****/

#blueprint-pdp .ugc-heading,
#blueprint-pdp .ugc-subheading,
.drupal-container .ugc-heading,
.drupal-container .ugc-subheading  {
  text-align: start !important;
}
#blueprint-pdp .ugc-container,
.drupal-container .ugc-container {
  .ugc-heading,
  .ugc-subheading {
    padding: 0 1rem;

  }
  @media (min-width: 640px) {
    padding: 0 2rem;
    .ugc-heading,
    .ugc-subheading {
      padding: 0;
    }
  }
}