/*  ------  local   ------  */
.ds__page { 
    --CLARINS-FONT: ClarinsRegular, Clarins, "Microsoft Jhenghei";
    --GOTHAM-LIGHT: "Gotham_Light", "Microsoft Jhenghei";
    --GOTHAM-BOOK: "Gotham SSm book A", "Gotham SSm book B", "Gotham Book",Helvetica, Arial, "Microsoft Jhenghei", sans-serif;
    --GOTHAM-MEDIUM: "Gotham SSm medium A", "Gotham SSm medium B", "Gotham Medium",Helvetica, Arial, "Microsoft Jhenghei", sans-serif;
}

.ds__cta .button--primary:not(.cba-button-style),
.ds__cta i-button .button--secondary, .ds__cta .i-button .button--secondary,
.ds__sets-product i-button .button--primary, .ds__sets-product .i-button .button--primary {
    font-family: var(--GOTHAM-MEDIUM);
}

.ds__page .ds__expert-logo {
    max-width: 188px;
}

.ds__page .ds__product-media-text {
    font-size: calc(22 * var(--collectionRatio));
}

.ds__product[data-item="2"] sup {
    font-size: 19%;
    top: -3.2em;
}

@media only screen
and (min-device-width : 834px)
and (max-device-width : 1112px)
and (-webkit-min-device-pixel-ratio: 2) {
    .ds__page .ds__expert-content {
        width: 85%;
    }
}

@media only screen
and (min-device-width : 834px)
and (max-device-width : 1112px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) {

}

@media (orientation: portrait) {
    i-gototop {
        top: -12.5%;
    }

    .ds__page .ds__quickview-btn.ds__only-desktop {
        display: none;
    }

    .ds__page .ds__cta-btn.ds__only-mobile{
        display: inline-flex;
    }
}

@media only screen
and (min-device-width : 834px)
and (max-device-width : 1112px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2) {
    .ds__page .ds__header-content {
        left: calc(46% + calc(64 * var(--headerRatio)));
        width: calc(450 * var(--headerRatio));
    }
}

@media (max-width: 761px) {

}

/*iPhone 11, 12, 13, 13 Min, and 13 Pro Max*/
@media (max-width: 480px) {
    .ds__page .ds__header-content {
        width: 90%;
    }

    .ds__page .ds__product[data-item="1"] .ds__product-media-text {
        font-size: calc(14 * var(--collectionRatio));
    }

    .ds__page .ds__product[data-item="1"]  .ds__product-media-number {
        left: calc(50% -  ( 223 * var(--collectionRatio)) );
    }

    .ds__page .ds__faq-title {
        font-size: 33px;
    }

    .ds__page .ds__compare-items .ds__cta {
        max-width: max-content;
    }
}