/**
 * Clinique Brand Overrides — styles.css
 * ====================================
 * Brand-specific CSS overrides for the Clinique tenant.
 *
 *
 * Dependency chain:
 *   default/vars.css → brands/clinique/vars.css → default/styles.css → styles.css (this file)
 */

/* 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-f80430ad9a3c3d4643085f9d9f5098cc.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;
    }
  }
}

/*****
* MULTILINE TEXT TRUNCATION - CUSTOM STYLES TO LIMIT CONTENT TO 3 LINES
*****/
.truncate-multiline {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
/*****
* END MULTILINE TEXT TRUNCATION
*****/

.content-width {
  max-width: var(--max-width-screen-3xl);
}