/* Style about Personalize Select Upsell (single page version) */


/* =========== Upsell- CSS variables Start ========== */
.personalize_select_upsell {
    /* layout */
    --upsell-max-width: 96rem;
    --upsell-margin: 1.6rem auto 2.4rem;
    --added-summary-padding: 0.8rem;
    /* - upsell content */
    --upsell-content-margin: 1.2rem 0 0;

    /* added summary */
    --added-summary-title-font-size: 2.6rem; /* title */
    --added-summary-title-line-height: 3.2rem;
    --added-summary-subtitle-font-size: 1.7rem; /* subtitle */
    --added-summary-subtitle-line-height: 3.2rem;
    --added-product-margin: 0; /* right side margin */
    --added-product-image-width: 8rem; /* product image */
    --added-product-image-height: 8rem;
    --added-product-info-padding: 0 0 0 1.6rem; /* added product info */
    --added-product-title-font-size: 1.7rem; /* product title */
    --added-product-title-line-height: 2.4rem;
    --tick-icon-size: 2.4rem; /* tick icon */
    --tick-icon-margin: 0 0.8rem 0 0;
    --added-message-margin: 0;
    --added-message-text-font-size: 1.6rem; /* added message text */
    --added-message-text-line-height: 2.4rem;

    /* offer part */
    --upsell-operate-padding: 1.6rem 0.4rem;
    --upsell-offer-text-font-size: 2.1rem; /* offer text */
    --upsell-offer-text-line-height: 3.2rem;
    --upsell-offer-title-font-size: 3.7rem; /* offer title */
    --upsell-offer-title-line-height: 4.0rem;
    --upsell-offer-description-font-size: 2.1rem; /* offer description */
    --upsell-offer-description-line-height: 2.9rem;
    --upsell-offer-description-margin: 1.6rem 0 0;

    /* addon card */
    --addon-card-margin: 2.4rem 0;
    --addon-card-max-width: 35rem;
    --addon-card-name-font-size: 2.1rem; /* name */
    --addon-card-name-line-height: 2.4rem;
    --addon-card-name-margin: 0.3rem 0;
    --addon-star-icon-size: 2.4rem; /* star icon */
    --addon-star-icon-margin: 0.2rem 0;
    --addon-review-count-font-size: 1.4rem; /* review count */
    --addon-review-count-line-height: 2.3rem;
    --addon-review-count-margin: 0 0 0 0.8rem;

    /* price */
    --addon-price-gap: 0.3rem;
    --addon-sale-price-font-size: 2.2rem; /* sale price */
    --addon-sale-price-line-height: 1;
    --addon-original-price-font-size: 2.0rem; /* original price */
    --addon-original-price-line-height: 1;
    --addon-comp-value-font-size: 2.0rem; /* comp value */
    --addon-comp-value-line-height: 1;
    
    /* buttons */
    --addon-button-padding: 0.75rem 1.2rem;
    --addon-button-font-size: 2.0rem;
    --addon-button-line-height: 2.4rem;
    --addon-close-font-size: 1.5rem;
    --addon-close-line-height: 4.0rem;
    --addon-close-margin: 1rem 0;

    /* multi previews */
    --multi-previews-margin: 0.6rem 0 1.6rem;
    --multi-previews-padding: 0.4rem 1.6rem;
    --multi-preview-image-size: 9.8rem;
    --multi-preview-arrow-size: 2.5rem;

    /* same perz */
    --upsell-qty-width: 12.4rem;
    --upsell-qty-height: 4.8rem;
    --upsell-qty-margin: 0 0.8rem 0 0;
}
/* =========== Upsell- CSS variables End   ========== */


/* =========== Upsell - layout Start   ========== */
.personalize_select_upsell {
    max-width: var(--upsell-max-width);
    margin: var(--upsell-margin);
}
/* - upsell content */
.personalize_select_upsell .upsell-content-wrapper {
    display: flex;
    margin: var(--upsell-content-margin);
}

/* =========== Upsell - layout End   ========== */


/* =========== Upsell - Added Summary Info Start ========== */
/* - message */
.personalize_select_upsell .added-summary-wrapper {
    display: flex;
    align-items: center;
    padding: var(--added-summary-padding);
}
.personalize_select_upsell .added-summary-wrapper .added-message > h5{
    color: var(--color-primary);
    text-align: center;
    font-size: var(--added-summary-title-font-size);
    line-height: var(--added-summary-title-line-height);
    font-weight: var(--font-weight-semibold);
}
.personalize_select_upsell .added-summary-wrapper .added-message > p {
    color: var(--color-primary);
    text-align: center;
    font-size: var(--added-summary-subtitle-font-size);
    line-height: var(--added-summary-subtitle-line-height);
    font-weight: var(--font-weight-semibold);
}
/* - product image + added message */
.personalize_select_upsell .added-product-wrapper {
    display: flex;
    align-items: center;
    margin: var(--added-product-margin);
}
.personalize_select_upsell .added-product-wrapper .product-image {
    width: var(--added-product-image-width);
    height: var(--added-product-image-height);
    border: 0.2rem solid rgba(204, 204, 204, 0.20);
    background: var(--color-white);
}
.personalize_select_upsell .added-product-wrapper .product-image .added-product-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.personalize_select_upsell .added-product-wrapper .added-product-info {
    padding: var(--added-product-info-padding);
}
.personalize_select_upsell .added-product-wrapper .product-title {
    color: #252B42;
    font-size: var(--added-product-title-font-size);
    line-height: var(--added-product-title-line-height);
    letter-spacing: 0.4px;
    font-weight: var(--font-weight-medium);
    font-family: inherit;
}
.personalize_select_upsell .added-product-wrapper .added-message {
    display: flex;
    align-items: center;
    margin: var(--added-message-margin);
}
.personalize_select_upsell .added-product-wrapper .added-message .tick-icon {
    width: var(--tick-icon-size);
    height: var(--tick-icon-size);
    margin: var(--tick-icon-margin);
}
.personalize_select_upsell .added-product-wrapper .added-message .tick-icon .svg-finished {
    width: 100%;
    height: 100%;
    display: block;
}
.personalize_select_upsell .added-product-wrapper .added-message .added-message-text {
    color: var(--color-primary);
    font-size: var(--added-message-text-font-size);
    line-height: var(--added-message-text-line-height);
    font-weight: var(--font-weight-regular);
}
/* =========== Upsell - Added Summary Info End ========== */


/* =========== Upsell - Preview Part Start ========== */
.personalize_select_upsell .upsell-preview-container {
    width: 100%;
}
.personalize_select_upsell .upsell-image-container {
    position: relative;
}
.personalize_select_upsell .upsell-main-image {
    width: 100%;
    height: auto;
    display: block;
}
.personalize_select_upsell .upsell-image-container.loading::after,
.personalize_select_upsell .multi-preview-list .preview-item.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--icon-loading-image-white) no-repeat center/30% 30%;
}
.personalize_select_upsell .upsell-image-container.loading::after {
    background-size: 20% 20%;
}
.personalize_select_upsell .multi-preview-list {
    margin: var(--multi-previews-margin);
    padding: var(--multi-previews-padding);
    position: relative;
}
.personalize_select_upsell .multi-preview-list .container-designs .preview-item {
    border-radius: 1px;
    border: 1px solid #D7D7D7;
    padding: 1px;
    background: var(--color-white);
    position: relative;
    flex-basis: var(--multi-preview-image-size);
}

.personalize_select_upsell .multi-preview-list .preview-item img {
    width: var(--multi-preview-image-size);
    height: var(--multi-preview-image-size);
    object-fit: contain;
    display: block;
}
.personalize_select_upsell .multi-preview-list .preview-item::before {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    content: '';
    display: block;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    overflow: hidden;
    border: solid 1px #D7D7D7;
}
.personalize_select_upsell .multi-preview-list .preview-item.selected {
    border: 2px solid #EC5A00;
    padding: 0;
}
.personalize_select_upsell .multi-preview-list .preview-item.selected::before {
    border: none;
    background: transparent url(https://d32u6scf3pzwp7.cloudfront.net/images/icons/checkmark/circle-checkmark_orange.svg) 100% / 100% no-repeat;
}

.personalize_select_upsell .multi-preview-list.container-draggable-list .container-designs .arrow {
    width: var(--multi-preview-arrow-size);
    height: var(--multi-preview-arrow-size);
    position: absolute;
    top: 50%;
    left: 0.6rem;
    transform: translateY(-50%);
    background: transparent url(https://d32u6scf3pzwp7.cloudfront.net/images/icons/arrow/circle-arrow-left_gray.svg) 100% / 100% no-repeat;
    margin: 0;
    z-index: 2;
}
.personalize_select_upsell .multi-preview-list.container-draggable-list .container-designs .arrow.next {
    left: unset;
    right: 0.6rem;
    transform: translateY(-50%) rotate(180deg);
}
.personalize_select_upsell .multi-preview-list.container-draggable-list .container-designs .arrow.disabled {
    display: none;
}
/* =========== Upsell - Preview Part End ========== */

/* =========== Upsell - Operate Part Start ========== */
.personalize_select_upsell .upsell-operate-wrapper {
    padding: var(--upsell-operate-padding);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
/* - offer message */
.personalize_select_upsell .upsell-operate-wrapper .upsell-message-container h6 {
    color: #EC5A00;
    font-size: var(--upsell-offer-text-font-size);
    line-height: var(--upsell-offer-text-line-height);
    font-weight: var(--font-weight-semibold);
}
.personalize_select_upsell .upsell-operate-wrapper .upsell-message-container h5 {
    color: #252B42;
    font-size: var(--upsell-offer-title-font-size);
    line-height: var(--upsell-offer-title-line-height);
    font-weight: 900;
}
.personalize_select_upsell .upsell-operate-wrapper .upsell-message-container p {
    color: #474545;
    font-size: var(--upsell-offer-description-font-size);
    line-height: var(--upsell-offer-description-line-height);
    font-weight: var(--font-weight-bold);
    margin: var(--upsell-offer-description-margin);
}
/* - product card */
.personalize_select_upsell .product-card-container {
    width: 100%;
    margin: var(--addon-card-margin);
    max-width: var(--addon-card-max-width);
    text-align: left;
}
.personalize_select_upsell .product-card-container .card-item-name {
    color: #252B42;
    font-size: var(--addon-card-name-font-size);
    line-height: var(--addon-card-name-line-height);
    font-weight: var(--font-weight-regular);
    margin: var(--addon-card-name-margin);
}
.personalize_select_upsell .product-card-container .card-item-price .sale-price {
    font-size: var(--addon-sale-price-font-size);
    line-height: var(--addon-sale-price-line-height);
    font-weight: var(--font-weight-bold);
}
.personalize_select_upsell .product-card-container .card-item-price .original-price {
    font-size: var(--addon-original-price-font-size);
    line-height: var(--addon-original-price-line-height);
    font-weight: var(--font-weight-medium);
    text-decoration-line: line-through;
    margin-left: var(--addon-price-gap);
    color: rgba(31, 33, 104, 0.60);
}
.personalize_select_upsell .product-card-container .card-item-price .text-comp-value {
    font-size: var(--addon-comp-value-font-size);
    line-height: var(--addon-comp-value-line-height);
    font-weight: var(--font-weight-regular);
    margin-left: var(--addon-price-gap);
    color: rgba(31, 33, 104, 0.60);
}
.personalize_select_upsell .product-card-container .card-item-rate {
    margin: var(--addon-star-icon-margin);
    display: flex;
    align-items: center;
}
.personalize_select_upsell .product-card-container .card-item-rate .g-icon-star {
    width: var(--addon-star-icon-size);
    height: var(--addon-star-icon-size);
    margin: 0;
}
.personalize_select_upsell .product-card-container .card-item-rate .review-count {
    display: inline;
    color: var(--color-primary);
    font-size: var(--addon-review-count-font-size);
    line-height: var(--addon-review-count-line-height);
    font-weight: var(--font-weight-regular);
    margin: var(--addon-review-count-margin);
}
/* -buttons */
.personalize_select_upsell .upsell-buttons-container .upsell-add-button {
    width: 100%;
    background: #EC5A00;
    border: 0.2rem solid #EC5A00;
    border-radius: 0.4rem;
    color: var(--color-white);
    font-size: var(--addon-button-font-size);
    line-height: var(--addon-button-line-height);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    padding: var(--addon-button-padding);
}
.personalize_select_upsell .upsell-buttons-container .upsell-add-button.add-selected-button {
    background: var(--color-white);
    margin-top: 1.2rem;
}
.personalize_select_upsell .upsell-buttons-container .upsell-add-button.add-selected-button .button-text-area {
    color: #EC5A00;
}
.personalize_select_upsell .upsell-close-container {
    margin: var(--addon-close-margin);
    display: flex;
    align-items: center;
}
.personalize_select_upsell .upsell-close-container .close {
    color: rgba(31, 33, 104, 0.70);
    font-size: var(--addon-close-font-size);
    line-height: var(--addon-close-line-height);
    font-weight: var(--font-weight-regular);
    text-decoration-line: underline;
    cursor: pointer;
}
.personalize_select_upsell .upsell-close-container .svg-loading {
    margin-left: 0.4rem;
}
.personalize_select_upsell .upsell-perz-operate {
    width: 100%;
}
.personalize_select_upsell .upsell-close-container .svg-loading .spinner {
    width: 100%;
    height: 100%;
}
.personalize_select_upsell .upsell-close-container .svg-loading .spinner .path {
    stroke: var(--line-color);
}
.personalize_select_upsell .upsell-perz-operate .upsell-buttons-container {
    flex: 1;
}
/* =========== Upsell - Operate Part End ========== */

/* =========== Upsell - Same Perz Start ========== */
.personalize_select_upsell .upsell-perz-operate.same-perz {
    width: 100%;
    display: flex;
    align-items: center;
}
.personalize_select_upsell .upsell-perz-operate.same-perz .upsell-qty-container {
    border: none;
    border-radius: 0.8rem;
    background: #F6F6F6;
    overflow: hidden;
    width: var(--upsell-qty-width);
    height: var(--upsell-qty-height);
    margin: var(--upsell-qty-margin);
}
/* =========== Upsell - Same Perz End ========== */

/* =========== Upsell - Different Perz Start ========== */
.personalize_select_upsell .upsell-perz-operate.diff-perz {
}
/* =========== Upsell - Different Perz End ========== */

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

    /* =========== Upsell- CSS variables Start ========== */
    .personalize_select_upsell {
        /* layout */
        --upsell-max-width: 100%;
        --upsell-margin: 1.025vmin auto 6.15vmin;
        --added-summary-padding: 1.025vmin 4.1vmin;
        /* - upsell content */
        --upsell-content-margin: 1.025vmin 0 0;

        /* added summary */
        --added-summary-title-font-size: 5.33vmin; /* title */
        --added-summary-title-line-height: 1.2;
        --added-summary-subtitle-font-size: 3.77vmin; /* subtitle */
        --added-summary-subtitle-line-height: 1.5;
        --added-product-margin: 2.05vmin 0; /* right side margin */
        --added-product-image-width: 13.3vmin; /* product image */
        --added-product-image-height: 13.3vmin;
        --added-product-info-padding: 0 0 0 2.6vmin; /* added product info */
        --added-product-title-font-size: 3.58vmin; /* product title */
        --added-product-title-line-height: 1.5;

        --tick-icon-size: 5.12vmin; /* tick icon */
        --tick-icon-margin: 0 1.7vmin 0 0;
        --added-message-margin: 1.7vmin 0 0 0;
        --added-message-text-font-size: 3.33vmin; /* added message text */
        --added-message-text-line-height: 1.5;

        /* offer part */
        --upsell-operate-padding: 2.05vmin;
        --upsell-offer-text-font-size: 4.67vmin; /* offer text */
        --upsell-offer-text-line-height: 2;
        --upsell-offer-title-font-size: 6.67vmin; /* offer title */
        --upsell-offer-title-line-height: 1.1;
        --upsell-offer-description-font-size: 3.58vmin; /* offer description */
        --upsell-offer-description-line-height: 1.2;
        --upsell-offer-description-margin: 1.7vmin 0;

        /* addon card */
        --addon-card-margin: 0.8vmin 0 1.7vmin 0;
        --addon-card-max-width: 100%;
        --addon-card-name-font-size: 3.58vmin; /* name */
        --addon-card-name-line-height: 1.25;
        --addon-card-name-margin: 0.8vmin 0;
        --addon-star-icon-size: 4.5vmin; /* star icon */
        --addon-star-icon-margin: 0.8vmin 0;
        --addon-review-count-font-size: 3.11vmin; /* review count */
        --addon-review-count-line-height: 1.5;
        --addon-review-count-margin: 0 0 0 1.7vmin;

        /* price */
        --addon-price-gap: 0.8vmin;
        --addon-sale-price-font-size: 4.44vmin; /* sale price */
        --addon-sale-price-line-height: 1;
        --addon-original-price-font-size: 3.58vmin; /* original price */
        --addon-original-price-line-height: 1;
        --addon-comp-value-font-size: 2.45vmin; /* comp value */
        --addon-comp-value-line-height: 1;
        
        /* buttons */
        --addon-button-padding: 1.7vmin 2.05vmin;
        --addon-button-font-size: 3.58vmin;
        --addon-button-line-height: 1;
        --addon-close-font-size: 3.58vmin;
        --addon-close-line-height: 2;
        --addon-close-margin: 3.33vmin 0;

        /* multi previews */
        --multi-previews-margin: 2.05vmin 0 0;
        --multi-previews-padding: 0.8vmin 0;
        --multi-preview-image-size: 22.2vmin;
        --multi-preview-arrow-size: 0;

        /* same perz */
        --upsell-qty-width: 27.5vmin;
        --upsell-qty-height: 10.6vmin;
        --upsell-qty-margin: 0 2.05vmin 0 0;
    }
    /* =========== Upsell- CSS variables End   ========== */

    /* =========== Upsell - layout Start ========== */
    .personalize_select_upsell {
        font-family: var(--font-family);
        padding: 0 5.33vmin;
    }
    .personalize_select_upsell .upsell-content-wrapper {
        border-top: solid 1px #EFEFEF;
    }
    .personalize_select_upsell .upsell-operate-wrapper {
        width: 100%;
    }
    /* =========== Upsell - layout End ========== */


    /* =========== Upsell - Added Summary Info Start ========== */
    /* - message */
    .personalize_select_upsell .added-summary-wrapper {
        flex-direction: column;
    }
    /* - product image + added message */
    .personalize_select_upsell .added-product-wrapper {
        border-radius: 2.05vmin;
        border: 1px solid var(--color-primary);
        background: var(--color-white);
        padding: 3.58vmin;
        max-width: 74vmin;
    }
    /* =========== Upsell - Added Summary Info End ========== */

    /* =========== Upsell - Different Perz Start ========== */
    .personalize_select_upsell .upsell-perz-operate.diff-perz {
        --addon-button-padding: 0.8vmin 2.05vmin;
    }
    .personalize_select_upsell .upsell-buttons-container .upsell-add-button.add-selected-button {
        margin-top: 0.8vmin;
    }
    /* =========== Upsell - Different Perz End ========== */
}

/* desktop */
@media (min-width: 576px) {

    /* =========== Upsell - layout Start   ========== */
    /* - upsell content */
    .personalize_select_upsell .upsell-content-wrapper {
        border-radius: 2rem;
        border: 0.2rem solid var(--color-primary);
        overflow: hidden;
    }
    .personalize_select_upsell .upsell-content-wrapper >div {
        flex-basis: 50%;
        overflow: hidden;
    }
    /* =========== Upsell - layout End   ========== */

    /* =========== Upsell - Added Summary Info Start ========== */
    .personalize_select_upsell .added-summary-wrapper {
        border-radius: 1rem;
        border: 1px solid rgba(95, 118, 184, 0.60);
        background: var(--color-white);
    }
    /* =========== Upsell - Added Summary Info End ========== */

    /* =========== Upsell - Preview Part Start ========== */
    /* =========== Upsell - Preview Part End ========== */

    /* =========== Upsell - Operate Part Start ========== */
    .personalize_select_upsell .upsell-perz-operate {
        max-width: 41.4rem;
        margin: 0 auto;
    }
    /* =========== Upsell - Operate Part End ========== */

}

@media only screen and (min-width: 1180px) and (max-width: 1199px) {
    /* Adapt to the problem of too small font size on iPad */
}


@media only screen and (min-width: 1200px) {
    /* =========== Upsell- CSS variables Start ========== */
    /* =========== Upsell- CSS variables End   ========== */
}

@media (min-width: 1420px) {
    /* =========== Upsell- CSS variables Start ========== */
    /* =========== Upsell- CSS variables End   ========== */
}

@media (min-width: 1700px) {
    /* =========== Upsell- CSS variables Start ========== */
    /* =========== Upsell- CSS variables End   ========== */
}

@media (min-width: 1900px) {
    /* =========== Upsell- CSS variables Start ========== */
    /* =========== Upsell- CSS variables End   ========== */

}