/* Set Common styles for all types of PDP
* - such as Gallery, Description, EAD, Guarantee, etc. 
*/

/* ======= Theme styles - Start ====== */
/* !!! TODO - needs to be moved somewhere outside of PDP */
:root {
    /* Some main colors */
    --color-stius-green: #53ba83;
    --color-stius-green-2: #53ba83;
    --color-stius-green-3: #53ba83;
    --color-stius-dark-indigo: #1F2168;
    --color-stius-dark-indigo-op60: rgba(31, 33, 104, 0.60);
    --color-stius-dark-indigo-op50: #1f216880;
    --color-stius-dark-indigo-op10: rgba(31, 33, 104, 0.10);
    --color-stius-light-indigo: #A4C3EF;
    --color-stius-red: #F16650;
    --color-stius-red-2: #E74040;
    --color-stius-light-blue: #EFF4FB;
    --color-stius-dark-grey: #252B42;
    --color-stius-dark-grey-op40: rgba(37, 43, 66, 0.40);
    --color-stius-very-light-grey: rgba(0, 0, 0, 0.10);
    --color-stius-very-light-grey-2: rgba(0, 0, 0, 0.20);
    --color-stius-light-grey: rgba(0, 0, 0, 0.6);
    --color-stius-light-grey-2: #F4F4F4;
    --color-stius-light-grey-3: #F5F5F5;
    --color-stius-light-grey-4: #F1F1F1;
    --color-stius-light-grey-5: #f3f3f3;
    --color-stius-light-grey-6: #FAFAFA;
    --color-stius-light-grey-7: #EFEFEF;
    --color-stius-light-grey-8: #F6F6F6;
    --color-stius-light-grey-9: #c7cad0;
    --color-stius-light-grey-10: #c0c0c0;
    --color-stius-orange: #f5a21b;

    --color-stius-white: #FFFFFF;
    --color-stius-white-op60: rgba(255, 255, 255, 0.60);
    --color-stius-black: #5E524D;
    --color-stius-gold: #B28D59;
    --text-color-title: #3f505e;
    --color-stius-gold-2: #B8A15F;

    --color-stius-grey: #e3e3e3;
    /* Font Family */
    --font-family: 'Roboto', arial, sans-serif;

    --font-family-heading: var(--font-family);

    /* Font Size */
    --font-size-xxxlarge: 3.2rem;
    --font-size-xxlarge: 2.4rem;
    --font-size-xlarge: 2rem;
    --font-size-large: 1.6rem;
    --font-size-mid: 1.5rem;
    --font-size-base: 1.4rem;
    --font-size-small: 1.3rem;
    --font-size-xs: 1.2rem;
    --font-size-xxs: 1.1rem;
    --font-size-xxxs: 1.0rem;


    /*!* theme override *!*/
    --color-primary: var(--color-stius-green);
    --color-secondary: var(--color-stius-green);

    --btn-primary-bg-color: var(--color-primary);
    --btn-primary-border-color: var(--color-primary);
    --btn-primary-hover-color: #5366a1;
    --btn-primary-hover-border-color: #5366a1;

    --color-error: var(--color-stius-red);
    --color-highlight: var(--color-stius-red);
    --color-highlight-darken: var(--color-stius-red);
    --link-color-highlight: var(--color-secondary);

    --text-color-default: var(--color-stius-black);
    --text-color-item-title: var(--color-stius-dark-grey);
    --text-color-gray: #646565;
    --text-color-highlight: var(--color-highlight);

    --text-color-price-sale: var(--color-stius-red);
    --text-color-price-strike: var(--color-stius-black);
    --text-color-comp-value: var(--color-stius-black);
    --text-color-review-count: var(--color-primary);

    --bg-color-info: var(--color-stius-light-grey-5);

    --border-color-base: #E5E5E5;
    --border-color-banner: var(--color-stius-light-indigo);
    --border-color-stepflow: #e5e5e5;

    --box-shadow-default: 0px 0.6rem 1.2rem -0.2rem rgba(50, 50, 93, 0.25);
    --box-shadow-card: 0.2rem 0.4rem 0.8rem 0 rgba(0, 0, 0, 0.30);

    /* Border Radius */
    --border-radius-base: 0;
    --border-radius-small: 0;
    --border-radius-middle: 0;
    --border-radius-large: 0;
    --border-style-1: 0.1rem solid rgba(0, 0, 0, 0.20);

    /* Layout */
    --pdp-content-max-width: unset;
    --pdp-ucd-content-max-width: unset;
    --pdp-calendar-content-max-width: unset;
    --pdp-stamps-content-max-width: unset;
    
  
    /* Exhibition */
    --exhibition-content-max-width: unset;

    /* preview image background */
    --bg-color-product-preview-pdp: #FFFFFF;

    /* icons */
    --pdp-icon-ead: url("https://cdn3.simplytoimpress.com/images/template/icons/icon-shipping-delivery-v1.png");
    --pdp-icon-arrow: url("https://cdn.simplytoimpress.com/images/pdp/icon-arrow.svg");
}

/* ======= Theme styles - End ====== */


/* ======= Common Price style - Start ====== */
html .sale-price {
    color: var(--text-color-price-sale);
    white-space: nowrap;
}
html .original-price {
    color: var(--text-color-price-strike);
}
html .text-comp-value {
    color: var(--text-color-price-strike);
}
/* ======= Common Price style - End ====== */


/* ======= Common Favorite Button - Start ====== */
html .btn_fav {
    background: url("/templates/images/icons/icon-favorite-thin.svg") no-repeat;
    background-size: 100% 100%;
    position: unset;
    width: 100%;
    height: 100%;
    margin: 0;
}
html .btn_unfav {
    background: url("/templates/images/icons/icon-favorite-thin-selected.svg") no-repeat;
    background-size: 100% 100%;
    animation: scaleUpForFavoriteButton 0.5s ease-in-out;
}
@keyframes scaleUpForFavoriteButton {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}
/* ======= Common Favorite Button - End ====== */

/* ======= WEB upload photo tray - Start ====== */
html .web-upload-photo-dialog .qr-code-section .qr-instructions,
html .web-upload-photo-dialog .sms-section .sms-description,
html .web-upload-photo-dialog .sms-section .sms-disclaimer {
  font-size: 1.2rem;
}
html .phone-upload-body {
  color: var(--color-stius-dark-grey);
}
/* ======= WEB upload photo tray - End ====== */


/* ======= Common Exhibition - Start ====== */
html .exhibition.our-promise {
    /* Style variables for Exhibition UI */
    --exhibition-title-font-size: 5.12vmin;
    --exhibition-title-line-height: 6.15vmin;
    --exhibition-subtitle-font-size: 4.1vmin;
    --exhibition-subtitle-line-height: 4.1vmin;
    --exhibition-item-caption-font-size: 4.1vmin;
    --exhibition-item-caption-line-height: 6.15vmin;
    --exhibition-item-caption-margin: 2.05vmin 0 0;
    --exhibition-item-desc-font-size: 3.84vmin;
    --exhibition-item-desc-line-height: 5.12vmin;
}
html .exhibition.our-promise .exhibition-header .exhibition-title {
    color: #252B42;
    font-weight: var(--font-weight-bold);
    font-family: inherit;
    font-size: var(--exhibition-title-font-size);
    line-height: var(--exhibition-title-line-height);
}
html .exhibition.our-promise .exhibition-header .exhibition-subtitle {
    color: var(--color-stius-gold);
    font-weight: var(--font-weight-semibold);
    font-size: var(--exhibition-subtitle-font-size);
    line-height: var(--exhibition-subtitle-line-height);
}
html .exhibition.our-promise .exhibition-item .exhibition-item-title {
    color: var(--color-stius-gold);
    font-weight: var(--font-weight-semibold);
    font-family: inherit;
    font-size: var(--exhibition-item-caption-font-size);
    line-height: var(--exhibition-item-caption-line-height);
    margin: var(--exhibition-item-caption-margin);
}
html .exhibition.our-promise .exhibition-item .exhibition-item-body {
    color: #252B42;
    font-weight: var(--font-weight-regular);
    font-size: var(--exhibition-item-desc-font-size);
    line-height: var(--exhibition-item-desc-line-height);
}
/* ======= Common Exhibition - End ====== */



/* ======= PDP Main & layout - Start ====== */
html .details_page {
    color: var(--color-stius-dark-grey);
}
/* ======= PDP Main & layout - End ====== */


/* ======= PDP Price - Start ====== */
.details_page .component-price {
    display: inline-flex;
    flex-direction: row-reverse;
    align-items: center;
    flex-wrap: wrap-reverse;
    justify-content: flex-start;
}
.component-price .price-loading {
    width: 2rem;
}
.details_page .product-info .product-price .component-price .org-and-sale-price {
    display: flex;
    flex-direction: row-reverse;
}
/* ======= PDP Price - End ====== */


/* ======= PDP Options Common - Start ====== */
/* - sold out */
html .container-main-options .sold-out>div {
    cursor: default;
}
html .container-main-options .sold-out .option-text,
html .container-main-options .sold-out img {
    opacity: 0.3;
}
html .container-main-options .sold-out>div::after {
    position: absolute;
    content: 'SOLD OUT';
    border: 0.1rem solid var(--color-highlight-darken);
    color: var(--color-highlight-darken);
    font-weight: bold;
    padding: .4rem;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--font-size-sm);
    text-align: center;
}
/* ======= PDP Options Common - End ====== */


/* ======= PDP Gallery Images - Start ====== */
.container-gallery-wrapper .gallery-image-wrapper {
    position: relative;
}
/* - thumnail */
.details_page .product-thumbnails .container-icon-arrow {
    position: unset;
}
/* - arrow */
.details_page .container-product-image .display-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.40);
    opacity: 1;
    width: 10.25vmin;
    height: 10.25vmin;
}
.details_page .container-product-image .display-arrow.display-prev-arrow {
    left: 2.05vmin;
}
.details_page .container-product-image .display-arrow.display-next-arrow {
    right: 2.05vmin;
}
.details_page .image-info-wrapper .container-product-image .display-arrow:before {
    content: '';
    border: none;
    background: url("/templates/images/icons/icon-arrow-white.svg") no-repeat;
    background-size: 100% 100%;
    transform: none;
    left: 0;
}
.details_page .image-info-wrapper .container-product-image .display-arrow.display-prev-arrow:before {
    transform: rotate(180deg);
}
.details_page .container-product-image .g-icon-arrow {
    width: 2rem;
    height: 1rem;
    background: transparent var(--pdp-icon-arrow) center / 100% no-repeat;
}
.details_page .container-product-image .g-icon-arrow.g-icon-arrow-down {
    transform: rotate(0deg);
}
.details_page .container-product-image .g-icon-arrow.g-icon-arrow-up {
    transform: rotate(180deg);
}
.details_page .container-product-image .g-icon-arrow.g-icon-arrow-left {
    transform: rotate(90deg);
}
.details_page .container-product-image .g-icon-arrow.g-icon-arrow-right {
    transform: rotate(-90deg);
}
/* - num indicator */
.details_page .image-num-indicator {
    border: none;
    background: #F3F3F4;
    right: 4.1vmin;
    bottom: unset;
    top: 89.45vmin;
}
.image-num-indicator>p {
    color: #3A444D;
}
/* - gallery label */
.details_page .container-product-image:not(.ucd-editing) .main-gallery-label {
    display: none;
}
/* - zoom background */
.details_page .zoom-preview-outer:hover {
    background: var(--bg-color-product-preview-pdp);
}
/* - favorite */
.details_page .container-favorite-icon {
    position: absolute;
}
.details_page .container-favorite-icon .btn_unfav {
    position: unset;
    margin: 0;
  }
/* ======= PDP Gallery Images - End ====== */


/* ======= PDP Tier Qty Price Common - Start ====== */
.tier_quantity_input {
    font-size: 1.6rem;
    font-weight: var(--font-weight-semibold);
    width: 5.6rem;
    height: 4.8rem;
    border-color: var(--text-color-price-strike);
    padding-left: 0;
    outline: none;
    border: 0.1rem solid rgba(0, 0, 0, 0.20);
    border-radius: 0.4rem;
    text-align: center;
}
.tier_next_level_desc {
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: var(--color-stius-dark-grey);
    font-size: 1.8rem;
    font-weight: var(--font-weight-semibold);
}
.tier_discount_detail {
    font-size: 1.6rem;
    font-weight: normal;
    color: var(--text-color-primary);
    cursor: pointer;
}
.component-price .price-prefix {
    font-size: 1.4rem;
    font-weight: var(--font-weight-regular);
    line-height: 2rem;
    color: var(--text-color-default);
    margin: 0 0.4rem 0 0;
}
html .component-price.show-each .original-price:after {
    content: '';
    display: inline;
}
.tier-product-price .component-price .original-price {
    font-size: 1.8rem;
}
.tier-product-price .component-price .text-comp-value {
    font-size: 1.2rem !important;
}
/* ======= PDP Tier Price Common - End ====== */


/* ======= EAD - Start ====== */
.details_page .product-arrival-date {
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: solid 0.1rem var(--color-stius-light-grey-9);
    border-bottom: solid 0.1rem var(--color-stius-light-grey-9);
    padding: 1.2rem 0.6rem;
    font-size: 1.6rem;
    line-height: 1.9rem;
}
.details_page .product-arrival-date .date-label {
    display: flex;
    align-items: center;
    color: var(--text-color-secondary);
}
.details_page .product-arrival-date .date-value {
    color: var(--text-color-primary);
    font-weight: bold;
}
.details_page .product-arrival-date .ead-icon {
    width: 2.1rem;
    height: 2.1rem;
    margin-right: 0.8rem;
    background: var(--pdp-icon-ead) no-repeat;
}
/* ======= EAD - End ====== */

/* ======= Operate (Qty & CAT button) - Start ====== */
.details_page .product-operate {
    display: flex;
    margin-top: 1.6rem;
    margin-bottom: 1.6rem;
}
.details_page .product-quantity .container-qty,
.details_page .product-personalize {
    height: 5.6rem;
}
/* - qty */
.details_page .product-quantity {
    max-width: 12.8rem;
    margin-right: 1.6rem;
    border: none;
}
.details_page .product-quantity .container-qty {
    border: none;
    border-radius: var(--border-radius-middle);
    background: var(--color-stius-light-grey-8);
    overflow: hidden;
}
/* - perz button */
.details_page .personalize-button {
    width: 100%;
    height: 100%;
    background-color: var(--color-primary);
    border-radius: var(--border-radius-middle);
    border: none;
    color: var(--color-stius-white);
    font-size: 1.6rem;
    font-weight: bold;
    text-transform: uppercase;
    font-family: Nobel;
    letter-spacing: 0.10em;
}
.details_page .product-operate .product-personalize {
    margin-left: 0;
}
/* ======= Operate (Qty & CAT button) - End ====== */


/* ======= PDP Guarantee - Start ====== */
html .details_page .satisfaction-guarantee {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
html .details_page .satisfaction-guarantee p {
    margin: 0;
}
html .details_page .satisfaction-guarantee .guarantee-logo {
    margin: 0 1.6rem;
}
/* ======= PDP Guarantee - End ====== */


/* ======= PDP Related Products (YMAL & Rencent) - Start ====== */
.details_page .product-related-wrapper .design-image {
  margin: 0;
}
.details_page .product-related-wrapper .stackable-image-container {
  aspect-ratio: 1;
}
.details_page .product-related-wrapper .design-image img {
  border-radius: 0;
  max-height: 100%;
  object-fit: cover;
  aspect-ratio: 1;
}
.details_page .product-related-wrapper .design-title {
  color: var(--color-stius-dark-grey);
  font-size: var(--product-card-title-font-size);
  font-weight: var(--font-weight-regular);
  line-height: var(--product-card-title-line-height);
  margin-top: 1.6rem;
  margin-bottom: 0.4rem;
  font-family: inherit;
  overflow-wrap: anywhere;
}
.details_page .product-related-wrapper .design-price-tips {
  font-size: var(--product-card-starting-font-size);
  font-weight: var(--font-weight-regular);
  line-height: var(--product-card-starting-line-height);
  margin-right: 0.4rem;
  color: var(--text-color-price-strike);
}
.details_page .product-related-wrapper .design-price {
  margin-bottom: 0;
}
.details_page .product-related-wrapper .component-price.with_price_comp_value {
  flex-wrap: nowrap;
}
.details_page .product-related-wrapper .sale-price {
  font-size: var(--product-card-DRP-font-size);
  line-height: var(--product-card-DRP-line-height);
  font-weight: var(--font-weight-bold);
  color: var(--text-color-price-sale);
}
.details_page .product-related-wrapper .original-price {
  font-size: var(--product-card-SRP-font-size);
  line-height: var(--product-card-SRP-line-height);
  font-weight: var(--font-weight-medium);
  margin-left: 0.4rem !important;
  color: var(--text-color-price-strike);
}
.details_page .product-related-wrapper .component-price.with_price_comp_value .text-comp-value {
  font-size: var(--product-card-compvalue-font-size);
  line-height: var(--product-card-compvalue-line-height);
  font-weight: var(--font-weight-regular);
  margin-left: 0.4rem;
  color: var(--text-color-comp-value);
}
.details_page .product-related-wrapper .designs-tag-new {
  position: absolute;
  top: 0.8rem;
  left: 0;
}
.details_page .product-related-wrapper .designs-tag-new span {
  border-radius: 0px 0.4rem 0.4rem 0px;
  background: var(--color-stius-white);
  padding: 0.4rem;
  color: var(--color-primary);
  font-weight: 900;
  font-size: 1.4rem;
  line-height: 2rem;
  height: auto;
}
.details_page .product-related-wrapper .designs-tag-new span {
  position: static;
  display: block;
}
/* ======= PDP Related Products (YMAL & Rencent) - End ====== */





/* mobile */
@media (max-width: 575px) {

    /* ======= Common Exhibition - Start ====== */
    html .exhibition.our-promise {
        padding: 0 4.1vmin;
    }
    html .exhibition.our-promise .exhibition-header .exhibition-subtitle {
        margin-top: 1vmin;
    }
    html .exhibition.our-promise .exhibition-content {
        margin-bottom: 6.15vmin;
    }
    html .exhibition.our-promise .exhibition-item {
        margin-top: 4.1vmin;
    }
    html .exhibition.our-promise .exhibition-item .exhibition-item-icon .g-icon {
        width: 12.3vmin;
        height: 12.3vmin;
    }
    /* ======= Common Exhibition - End ====== */



    /* ======= PDP Gallery Images - Start ====== */
    .details_page .container-product-image {
        width: 100%;
        height: auto;
        flex-direction: column-reverse;
        justify-content: flex-end;
    }
    .details_page .image-info-wrapper {
        position: relative;
    }
    /* - thumnnail */
    html .details_page .product-thumbnails .thumbnail-item {
        margin-top: 2.05vmin;
        margin-bottom: 2.05vmin;
    }
    /* - favorite */
    .details_page .container-favorite-icon {
        width: 10.25vmin;
        height: 10.25vmin;
        top: 4.1vmin;
        bottom: unset;
        right: 4.1vmin;
        left: unset;
        padding: 1.025vmin;
        background: var(--color-stius-white-op60);
        border-radius: 50%;
    }
    html .details_page .container-favorite-icon>div {
        width: 8.2vmin;
        height: 8.2vmin;
    }
    /* - new tag */
    .details_page .container-gallery .new-tag {
        left: 4.1vmin;
        top: 4.1vmin;
        padding: 2.05vmin;
        font-size: 4.1vmin;
    }
    /* - num indicator */
    .image-num-indicator >p {
        margin: 0;
    }
    /* ======= PDP Gallery Images - End ====== */

    /* ======= PDP product header - Start ====== */
    html .details_page .product-detail-content.no-thumbnails .product-info-wrapper {
        margin-top: 2.05vmin;
    }
    .details_page .product-info-wrapper>div.product-info {
        padding: 2.05vmin 4.1vmin 3.07vmin;
        border-bottom: solid 0.1rem var(--color-stius-dark-indigo-op10);
    }
    .details_page .product-title {
        font-size: 5.12vmin;
        line-height: 6.15vmin;
        font-weight: var(--font-weight-semibold);
        margin-bottom: 2.05vmin;
        font-family: inherit;
        color: inherit;
        text-align: left;
    }
    /* ======= PDP product header - End ====== */

    /* ======= PDP header price - Start ====== */
    .details_page .product-info .product-price {
        line-height: 5.12vmin;
        height: 5.12vmin;
        margin-bottom: 2.05vmin;
    }
    .details_page .product-info .product-price>.price-caption,
    .details_page .product-info .original-price,
    .details_page .product-info .text-comp-value {
        font-size: 3.58vmin;
        font-weight: var(--font-weight-regular);
        line-height: 5.64vmin;
    }
    .details_page .tier-product-price .product-price>.price-caption {
        flex: 0;
    }
    .details_page .product-info .sale-price {
        font-size: 5.64vmin;
        font-weight: var(--font-weight-bold);
        line-height: 5.64vmin;
    }
    .details_page .product-info .original-price {
        font-size: 4.61vmin;
        font-weight: var(--font-weight-medium);
    }
    .details_page .product-info .text-comp-value {
        font-size: 3.07vmin;
    }
    .details_page .afterpay-wrapper afterpay-placement {
        text-align: left;
        --logo-badge-width: 7rem;
        font-weight: var(--font-weight-regular);
        color: var(--color-black);
    }
    /* ======= PDP header price - End ====== */

    /* ======= PDP Options Common - Start ====== */
    .details_page .container-main-options {
        padding: 0 4.1vmin;
        margin-bottom: 4.1vmin;
    }
    /* ======= PDP Options Common - End ====== */

    /* ======= Operate (Qty & CAT button) - Start ====== */
    .product-operate-wrapper {
        padding: 0 4.1vmin;
    }
    .details_page .product-operate {
        padding: 3.07vmin 4.1vmin;
        margin: 2.05vmin 0 0;
    }
    .details_page .product-info-wrapper>div.product-operate-wrapper.normal-operate .product-operate {
        padding: 0;
        margin: 3.07vmin 0;
    }
    .details_page .product-quantity .container-qty,
    .details_page .product-personalize {
      height: 12.4vmin;
    }
    /* - qty */
    .details_page .product-quantity {
        max-width: 28.9vmin;
        margin-right: 2.05vmin;
        height: auto;
    }
    .details_page .product-operate .container-caption-quantity {
        font-size: 1.4rem;
        font-weight: var(--font-weight-semibold);
        line-height: 1.6rem;
        text-transform: uppercase;
        display: block;
        margin-bottom: 0.4rem;
        text-align: start;
    }
    /* - perz button */
    .details_page .personalize-button {
        text-transform: uppercase;
    }
    /* ======= Operate (Qty & CAT button) - End ====== */


    /* ======= EAD - Start ====== */
    .details_page .product-arrival-date {
        margin-top: 0;
        padding: 1.79vmin;
        font-size: 3.58vmin;
        line-height: 4.1vmin;
    }
    .details_page .product-arrival-date .date-label {
        margin-right: 2.05vmin;
    }
    .details_page .product-arrival-date .date-label span {
        margin-left: 0;
    }
    .details_page .product-arrival-date .ead-icon {
        margin-right: 2.05vmin;
    }
    /* ======= EAD - End ====== */

    /* ======= PDP Guarantee - Start ====== */
    html .details_page .satisfaction-guarantee {
        width: unset;
        background-color: #f3efea;
        padding: 4.1vmin 0.8vmin;
        margin: 0 4.1vmin;
    }
    /* ======= PDP Guarantee - End ====== */


    /* ======= PDP product description - Start ====== */
    .details_page .product-info-wrapper>div.product-desc-wrapper {
        margin-top: 3.07vmin;
        padding: 3.07vmin 4.1vmin 0;
    }
    .details_page .product-desc-wrapper .lessmore-bullets.component-bullets-description {
        padding-bottom: 3.07vmin;
        border-bottom: solid 0.1rem var(--color-stius-dark-indigo-op10);
    }
    .details_page .lessmore-bullets .title {
        padding: 0;
        font-size: 5.12vmin;
        line-height: 1;
        font-weight: var(--font-weight-semibold);
        border-bottom: none;
    }
    .details_page .lessmore-bullets .product-description {
        font-size: 4.61vmin;
        line-height: 5.8vmin;
        font-weight: var(--font-weight-medium);
        padding: 2.05vmin 0 0;
        border: none;
    }
    .details_page .lessmore-bullets.component-bullets-description ul {
        margin-top: 2.05vmin;
        font-weight: var(--font-weight-regular);
    }
    .details_page .lessmore-bullets.component-bullets-description ul li {
        margin-top: 1.025vmin;
    }
    .details_page .lessmore-bullets.component-bullets-description .read-more-link {
        font-size: 4.1vmin;
    }
    /* ======= PDP product description - End ====== */


    /* ======= PDP Exhibition - Start ====== */
    html .details_page .exhibition.our-promise {
        padding: 2.05vmin 4.1vmin;
        margin-top: 7.18vmin;
    }
    html .details_page .exhibition.our-promise .exhibition-header {
        display: flex;
        flex-direction: column-reverse;
        margin: 0;
        padding: 2.05vmin 0;
    }
    html .details_page .exhibition.our-promise .exhibition-header .exhibition-subtitle {
        margin-top: 0;
        margin-bottom: 1.025vmin;
    }
    html .details_page .exhibition.our-promise .exhibition-content {
        padding-bottom: 2.05vmin;
        margin-bottom: 0;
    }
    html .details_page .exhibition.our-promise .exhibition-item {
        margin: 0 0 2.05vmin;
        padding: 2.05vmin 0;
    }
    html .details_page .exhibition.our-promise .exhibition-item .exhibition-item-wrapper {
        display: grid;
        grid-template-areas: "icon title" "icon description";
    }
    html .details_page .exhibition.our-promise .exhibition-item .exhibition-item-icon {
        grid-area: icon;
        margin-right: 4.1vmin;
    }
    html .details_page .exhibition.our-promise .exhibition-item .exhibition-item-title {
        grid-area: title;
        color: var(--color-stius-dark-grey);
        font-size: 4.61vmin;
        margin-top: 0;
        font-weight: var(--font-weight-bold);
        text-align: left;
    }
    html .details_page .exhibition.our-promise .exhibition-item .exhibition-item-body {
        grid-area: description;
        text-align: left;
        margin-top: 1.025vmin;
        font-size: 4.1vmin;
        color: var(--text-color-default);
    }
    /* ======= PDP Exhibition - End ====== */


    /* ======= PDP Related Products (YMAL & Rencent) - End ====== */
    .details_page .product-related-wrapper {
        margin-top: 5.12vmin;
        overflow: hidden;
      }
    
      .details_page .product-related-wrapper .header-wrapper {
        padding: 1.54vmin 4.1vmin;
      }
    
      .details_page .product-related-wrapper .title {
        font-size: 5.12vmin;
        line-height: 7.18vmin;
        font-weight: var(--font-weight-semibold);
      }
    
      .details_page .product-related-wrapper .container-designs {
        display: flex;
        margin: 2.05vmin -0.5vmin 0;
        flex-wrap: nowrap;
        overflow: hidden;
        overflow-x: auto;
        padding-bottom: 6.15vmin;
      }
    
      .details_page .product-related-wrapper .container-design {
        padding: 0 0.5vmin;
        margin-bottom: 0;
        position: relative;
        width: 45.38vmin;
        flex: 0 0 auto;
      }
    .details_page .product-related-wrapper .design-details {
        padding: 0 2.05vmin;
      }
      .details_page .product-related-wrapper .design-title {
        font-size: 3.58vmin;
        line-height: 5.12vmin;
        margin-top: 3.07vmin;
        margin-bottom: 2.05vmin;
      }
      .details_page .product-related-wrapper .design-price-tips {
        font-size: 3.58vmin;
        font-weight: var(--font-weight-regular);
        line-height: 4.1vmin;
        margin-bottom: 0;
        color: var(--text-color-price-strike);
        display: block;
        margin-bottom: 1.025vmin;
      }
      .details_page .product-related-wrapper .sale-price {
        font-size: 4.1vmin;
        line-height: 4.1vmin;
        margin-left: 0;
        color: var(--text-color-price-sale);
      }
      .details_page .product-related-wrapper .original-price{
        font-size: 3.58vmin;
        line-height: 4.1vmin;
        color: var(--text-color-price-strike);
      }
      .details_page .product-related-wrapper .component-price.with_price_comp_value .text-comp-value {
        font-size: 2.82vmin;
        line-height: 4.1vmin;
        font-weight: var(--font-weight-regular);
        color: var(--text-color-comp-value);
      }
      .details_page .product-related-wrapper .designs-tag-new {
        position: absolute;
        top: 2.05vmin;
        left: 0;
      }
      .details_page .product-related-wrapper .designs-tag-new span {
        border-radius: 0 1.025vmin 1.025vmin 0;
        background: var(--color-stius-white);
        padding: 1.025vmin;
        color: var(--color-primary);
        font-weight: 900;
        font-size: 3.58vmin;
        line-height: 5.12vmin;
        height: auto;
      }
      .details_page .product-related-wrapper .designs-tag-new span {
        position: static;
      }
    /* ======= PDP Related Products (YMAL & Rencent) - End ====== */
}

/* desktop */
@media (min-width: 576px) {
    /* ========= (desktop) PDP Main & layout Start ========= */
    :root {
        --pdp-content-max-width: 96rem;
        --exhibition-content-max-width: 90rem;
    }
    html body {
        min-width: 97rem;
    }
    html .details_page {
        --pdp-main-part-gap: 1.6rem;
        --pdp-image-part-width: 51.2rem;
        --pdp-image-part-gap: 1.6rem;
        --pdp-main-image-size: 43rem;
        --pdp-thumbnail-image-size: 6.6rem;
    }
    html .details_page .product-detail-wrapper {
        max-width: var(--pdp-content-max-width);
        margin: 0 auto;
    }
    html .details_page .product-detail-wrapper .container {
        max-width: unset;
    }
    html .details_page .product-detail-content {
        margin-top: 1.6rem;
        display: flex;
        align-items: flex-start;
    }
    html .details_page .product-detail-container {
        padding-bottom: 3.2rem;
        padding-top: 1.6rem;
    }
    html .details_page .product-detail-content .image-info-wrapper {
        margin-right: 0;
        width: var(--pdp-image-part-width);
        flex-basis: unset;
        flex-shrink: 0;
    }
    html .details_page .product-detail-content.no-thumbnails .image-info-wrapper {
        width: var(--pdp-main-image-size);
    }
    html .details_page .product-detail-content .product-info-wrapper {
        flex: 1;
        width: 100%;
        padding-left: var(--pdp-main-part-gap);
    }
    /* ========= (desktop) PDP Main & layout End ========= */


    /* ======= PDP Breadcrumbs - Start ====== */
    /* ======= PDP Breadcrumbs - End ====== */

    /* ======= PDP Gallery Images - Start ====== */
    html .details_page .product-main-image {
        width: var(--pdp-main-image-size);
        height: var(--pdp-main-image-size);
        border: 0.2rem solid rgba(204, 204, 204, 0.20);
    }
    html .container-product-image .container-gallery-wrapper {
        width: var(--pdp-main-image-size);
    }
    /* - thumbnail */
    html .container-product-image .container-carousel {
        width: var(--pdp-thumbnail-image-size);
        height: var(--pdp-main-image-size);
        margin-right: var(--pdp-image-part-gap);
        flex: 0;
    }
    html .container-product-image .container-gallery-wrapper {
        width: var(--pdp-main-image-size);
    }
    html .product-thumbnails .thumbnail-item {
        width: var(--pdp-thumbnail-image-size);
        height: var(--pdp-thumbnail-image-size);
        margin: 0.5rem 0;
    }
    html .product-thumbnails .thumbnail-item:first-child {
        margin-top: 0;
    }
    html .product-thumbnails .thumbnail-item:last-child {
        margin-bottom: 0;
    }
    html .product-thumbnails .thumbnail-item {
        border: 0.1rem solid rgba(55, 50, 50, 0.20);
    }
    html .product-thumbnails .thumbnail-item .stackable-image-container {
        width: 100%;
        height: 100%;
    }
    html .product-thumbnails .thumbnail-item .stackable-image-container img {
        object-fit: contain;
    }
    /* - favorite button  */
    html .container-product-image .container-favorite-icon {
        top: 1.4rem;
        right: min(var(--gap-value-sm), 2rem);
        bottom: unset;
        left: unset;
        width: 4rem;
        height: 4rem;
        background: var(--color-stius-white-op60);
        border-radius: 50%;
        padding: 0.5rem;
    }
    /* - num indicator */
    html .container-product-image .image-indicators,
    html .container-product-image .image-num-indicator {
        display: none;
    }
    /* ======= PDP Gallery Images - End ====== */

    /* ======= PDP product description - Start ====== */
    .details_page .product-desc-wrapper {
        padding-left: calc(var(--pdp-image-part-gap) + var(--pdp-thumbnail-image-size));
        margin-top: 2.4rem;
    }
    html .details_page .product-detail-content.no-thumbnails .product-desc-wrapper {
        padding-left: 0;
    }
    .details_page .lessmore-bullets .title {
        font-size: 2rem;
        line-height: 2.4rem;
        font-weight: var(--font-weight-semibold);
        margin-bottom: 1.6rem;
    }
    .details_page .lessmore-bullets .product-description {
        font-size: 1.6rem;
        line-height: 2rem;
        font-weight: var(--font-weight-medium);
    }
    .details_page .lessmore-bullets.component-bullets-description ul {
        margin-top: 0.4rem;
    }
    .details_page .lessmore-bullets.component-bullets-description ul li {
        line-height: 3.2rem;
        font-weight: var(--font-weight-regular);
    }
    /* ======= PDP product description - End ====== */


    /* ======= PDP product header - Start ====== */
    .details_page .product-info {
        border-bottom: solid 0.1rem var(--color-stius-light-grey-9);
        padding-bottom: 1rem;
    }
    .details_page .product-title-header {
        margin-bottom: 0.8rem;
    }
    .details_page .product-title {
        color: var(--color-stius-dark-grey);
        font-size: 2.4rem;
        font-weight: var(--font-weight-semibold);
        line-height: 1;
        font-family: inherit;
    }
    /* ======= PDP product header - End ====== */


    /* ======= PDP header price - Start ====== */
    .details_page .product-info .product-price {
        line-height: 2rem;
        height: 2rem;
        margin: 1rem 0;
    }
    .details_page .product-info .product-price>.price-caption,
    .details_page .product-info .original-price,
    .details_page .product-info .text-comp-value {
        font-size: 1.4rem;
        font-weight: var(--font-weight-regular);
        line-height: 2rem;
    }
    .details_page .product-info .sale-price {
        font-size: 2rem;
        font-weight: var(--font-weight-medium);
        line-height: 2rem;
    }
    .details_page .product-info .original-price,
    .details_page .product-info .text-comp-value {
        font-size: 1.6rem;
    }
    .details_page .afterpay-wrapper afterpay-placement {
        text-align: left;
        --logo-badge-width: 7rem;
        font-weight: var(--font-weight-regular);
        color: var(--color-black);
    }
    /* ======= PDP header price - End ====== */


    /* ======= PDP Options Common - Start ====== */
    /* ======= PDP Options Common - End ====== */


    /* ======= Operate (Qty & CAT button) - Start ====== */
    .product-operate .container-caption-quantity {
        display: none;
    }
    /* ======= Operate (Qty & CAT button) - End ====== */

    /* ======= Common Exhibition - Start ====== */
    html .exhibition.our-promise {
        /* Style variables for Exhibition UI */
        --exhibition-title-font-size: 2rem;
        --exhibition-title-line-height: 2.4rem;
        --exhibition-subtitle-font-size: 1.6rem;
        --exhibition-subtitle-line-height: 1.8rem;
    
        --exhibition-item-max-width: 26rem;
        --exhibition-item-caption-font-size: 1.6rem;
        --exhibition-item-caption-line-height: 2rem;
        --exhibition-item-caption-margin: 1rem 0 0.4rem;
        --exhibition-item-desc-font-size: 1.4rem;
        --exhibition-item-desc-line-height: 2rem;
    }
    html .exhibition.our-promise {
        padding: 1.6rem 0;
    }
    html .exhibition.our-promise .exhibition-header {
        margin: 0;
    }
    html .exhibition.our-promise .exhibition-header .exhibition-title {
        letter-spacing: 0.1px;
    }
    html .exhibition.our-promise .exhibition-header .exhibition-title>br {
        display: none;
    }
    html .exhibition.our-promise .exhibition-header .exhibition-subtitle {
        letter-spacing: 0.2px;
        margin-top: 0.4rem;
    }
    html .exhibition.our-promise .exhibition-main {
        padding: 3.2rem 0;
        max-width: var(--exhibition-content-max-width);
    }
    html .exhibition.our-promise .exhibition-content {
        justify-content: space-between;
    }
    html .exhibition.our-promise .exhibition-item {
        max-width: var(--exhibition-item-max-width);
        margin-top: 2.4rem;
        flex: unset;
    }
    html .exhibition.our-promise .exhibition-item .exhibition-item-body {
        word-spacing: normal;
    }
    html .exhibition.our-promise .exhibition-item .exhibition-item-icon .g-icon {
        width: 6.4rem;
        height: 6.4rem;
    }
    /* ======= Common Exhibition - End ====== */


    /* ======= PDP Related Products (YMAL & Rencent) - End ====== */
    .details_page .product-related-wrapper {
        border-top: solid 0.8rem var(--color-stius-light-grey-2);
        padding: 2rem 0;
        overflow: hidden;
    }
    .details_page .product-related-wrapper .header-wrapper {
        padding: 0 0.8rem;
    }
    
    .details_page .product-related-wrapper .title {
        font-size: 2.4rem;
        font-weight: var(--font-weight-semibold);
        line-height: 2.8rem;
    }
    
    .details_page .product-related-wrapper .container-designs {
        margin-top: 1.4rem;
        display: flex;
    }
    .details_page .product-related-wrapper .recommend-products-wrapper {
        margin: 0 -0.8rem;
    }
    .details_page .product-related-wrapper .product-recently-wrapper,
    .details_page .product-related-wrapper .product-ymal-wrapper {
        margin-bottom: 2.4rem;
    }
    .details_page .product-related-wrapper .product-recently-wrapper .container-design {
        width: var(--pdp-recently-card-width);
    }
    .details_page .product-related-wrapper .product-ymal-wrapper .container-design {
        width: var(--pdp-ymal-card-width);
    }
    .details_page .product-related-wrapper .container-design {
        padding: 0 0.8rem;
        margin-bottom: 0;
        position: relative;
    }
    
    /* ======= PDP Related Products (YMAL & Rencent) - End ====== */

}


@media (min-width: 576px) and (max-width: 1419px) {
    /* Style For Ipad */
}

@media (min-width: 1200px) {
    /* STI no 1200 breakpoint */
}

@media (min-width: 1420px) {
  /* ========= (desktop>1420px) PDP Main & layout Start ========= */
  :root {
    --pdp-content-max-width: 125.8rem;
  }
  html .details_page {
    --pdp-main-part-gap: 2.4rem;
    --pdp-image-part-width: 77.4rem;
    --pdp-image-part-gap: 2.4rem;
    --pdp-main-image-size: 65rem;
    --pdp-calendar-main-image-size: 65rem;
    --pdp-stamps-main-image-size: 65rem;
    --pdp-thumbnail-image-size: 10rem;
    --pdp-addon-box-max-width: 39rem;
    --pdp-addon-image-size: 10rem;
    --pdp-addon-box-padding: 2.4rem;
    --pdp-addon-content-gap: 2.4rem;
    --pdp-addon-button-width: 17.6rem;
    --pdp-addon-button-height: 4rem;
  }
  html .details_page #main_content_wrapper {
    width: 125.8rem;
  }
  /* ========= (desktop>1420px) PDP Main & layout End ========= */

  /* ======= PDP Tier Qty Price Common - Start ====== */
  html .details_page .tier_quantity_input {
    width: 5.6rem;
  }
  /* ======= PDP Tier Qty Price Common - Start ====== */

}
@media (min-width: 1900px) {
    /* ========= (desktop>1900px) PDP Main & layout Start ========= */
    :root {
    }
    html .details_page #main_content_wrapper {
        /* width: 186rem; */
    }
    /* ========= (desktop>1900px) PDP Main & layout End ========= */

}