/*  ------  fonts   ------  */

@font-face {
font-family: "Gotham_Light", "Kanit Light";
src: url("../fonts/GothamLight.woff2") format("woff2"),
   url("../fonts/GothamLight.woff") format("woff"),
   url("../fonts/GothamLight.ttf") format("truetype");
}


/*  ------  variables   ------  */

.ds9__page { 
   --CLARINS-FONT: ClarinsRegular, Clarins, "Kanit Light";
   --GOTHAM-LIGHT: "Gotham_Light", "Kanit Light";
   --GOTHAM-BOOK: "Gotham SSm book A", "Gotham SSm book B", "Gotham Book", "Kanit Light", Helvetica, Arial, sans-serif, "Kanit Light";
   --GOTHAM-MEDIUM: "Gotham SSm medium A", "Gotham SSm medium B", "Gotham Medium", "Kanit Light", Helvetica, Arial, sans-serif, "Kanit Light";
}

body, html { overflow-x: clip !important; }
.ds9__page .ds9__product-media-text {
   white-space: unset;
}
.ds9__page .ds9__compare-items .ds9__cta {
   max-width: 115px;
}
.ds9__compare-item .ds9__compare-item-group[data-filter-id="4"]:not(.mod__collapse) {
   max-height: 247px;
   height: 100%;
}
p.ds9__product-application-days sup, span.ds9__product-media-value sup {
   font-size: 14px;
   top: -2em;
}
span.ds9__product-media-value sup {
   top: -4.5em;
}
.ds9__product[data-item="1"] .ds9__cta.ds9__product-cta {
   max-width: 140px;
}

@media only screen
and (min-device-width : 834px)
and (max-device-width : 1112px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2) {
   .ds9__page .ds9__header-content {
      left: calc(47% + calc(64 * var(--headerRatio)));
   }
   .ds9__product[data-item="1"] .ds9__cta.ds9__product-cta {
      max-width: 136px;
   }
.ds9__page .ds9__bloc-header {
      margin-top: 25px;
   }
   .ds9__page .ds9__quickview-btn.ds9__only-desktop {
      display: none;
   }
   .ds9__page .ds9__only-mobile {
      display: block;
   }
   span.ds9__product-media-value sup {
      top: -3em;
   }
}
@media only screen
and (min-device-width : 834px)
and (max-device-width : 1112px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) {
   .ds9__page .ds9__compare-title {
      max-width: 20em;
   }
.ds9__page .ds9__bloc-header {
      margin-top: 40px;
   }
}
@media (max-width: 480px) {
   span.ds9__product-media-value sup {
      top: -3em;
   }
   picture.ds9__sets-product-picture {
      width: 80%;
      margin: auto;
  }
}