/* =========================================================
   CART DRAWER 新结构
   ========================================================= */

.cart-drawer__main {
    display: flex;
    flex: 1;
    flex-direction: column;

    width: 100%;
    min-width: 0;
    min-height: 0;

    overflow: hidden;
}


/* =========================================================
   PC：
   左侧 CUSTOMERS ALSO BOUGHT
   右侧原 Cart
   ========================================================= */

@media (min-width: 960px) {

    .cart-drawer__body--with-upsell {
        display: grid;

        grid-template-columns:
            320px 500px;

        width: 820px;
        max-width: 100vw;

        height: 100%;
    }


    .cart-drawer__body--with-upsell .cart-drawer__main {
        grid-column: 2;

        height: 100%;
    }


    .cart-upsell--desktop {
        grid-column: 1;

        display: flex;

        flex-direction: column;

        width: 320px;
        height: 100%;

        min-width: 0;

        overflow: hidden;

        background:
            rgb(var(--color-background));

        border-inline-end:
            1px solid rgb(var(--color-entry-line));
    }


    .cart-upsell--mobile {
        display: none !important;
    }

}



/* =========================================================
   标题
   ========================================================= */

.cart-upsell__header {
    flex-shrink: 0;

    padding:
        20px 16px;

    border-block-end:
        1px solid rgb(var(--color-entry-line));
}


.cart-upsell__heading {
    margin: 0;

    font-size: 15px;
    font-weight: 600;

    line-height: 1.3;

    letter-spacing: 0.03em;
}



/* =========================================================
   PC 商品列表
   ========================================================= */

.cart-upsell--desktop .cart-upsell__list {
    flex: 1;

    padding:
        16px;

    overflow-x: hidden;
    overflow-y: auto;

    -webkit-overflow-scrolling:
        touch;
}



/* =========================================================
   商品卡
   ========================================================= */

.cart-upsell__item {
    display: grid;

    grid-template-columns:
        96px minmax(0, 1fr);

    gap: 12px;

    padding-block-end:
        16px;

    margin-block-end:
        16px;

    border-block-end:
        1px solid rgb(var(--color-entry-line));
}


.cart-upsell__item:last-child {
    margin-block-end: 0;
}


.cart-upsell__image {
    display: block;

    width: 96px;

    aspect-ratio: 2 / 3;

    overflow: hidden;

    background:
        rgb(var(--color-image-background));

    text-decoration: none;
}


.cart-upsell__image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


.cart-upsell__info {
    display: flex;

    flex-direction: column;

    min-width: 0;
}


.cart-upsell__title {
    display: -webkit-box;

    overflow: hidden;

    color:
        rgb(var(--color-text));

    font-size: 13px;
    font-weight: 500;

    line-height: 1.35;

    text-decoration: none;

    -webkit-box-orient:
        vertical;

    -webkit-line-clamp:
        2;
}


.cart-upsell__price {
    margin-block-start:
        7px;

    color:
        rgb(var(--color-sale));

    font-size:
        13px;

    font-weight:
        600;
}



/* =========================================================
   ADD TO CART
   ========================================================= */

.cart-upsell__quick-view-button {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;

    min-height: 34px;

    margin-block-start:
        auto;

    padding:
        8px 10px;

    color:
        #ffffff;

    background:
        #111111;

    border:
        1px solid #111111;

    border-radius: 0;

    font-family:
        inherit;

    font-size:
        11px;

    font-weight:
        600;

    line-height:
        1;

    cursor:
        pointer;

    box-sizing:
        border-box;
}


.cart-upsell__quick-view-button:hover {
    opacity: 0.8;
}


.cart-upsell__quick-view-button .icon-loading {
    display: none;

    width: 16px;
    height: 16px;

    margin-inline-start:
        6px;
}


.cart-upsell__quick-view-button.loading {
    pointer-events: none;

    opacity: 0.7;
}


.cart-upsell__quick-view-button.loading .icon-loading {
    display: block;

    animation:
        animation-button-loading linear 1.5s infinite;
}



/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 959px) {

    .cart-upsell--desktop {
        display: none !important;
    }


    .cart-upsell--mobile {
        display: block;

        width: 100%;

        margin-block-start:
            24px;

        padding-block-start:
            20px;

        border-block-start:
            1px solid rgb(var(--color-entry-line));
    }


    .cart-upsell--mobile .cart-upsell__header {
        padding:
            0 0 14px;

        border:
            0;
    }


    .cart-upsell--mobile .cart-upsell__heading {
        font-size: 14px;
    }


    /**
     * 横向滑动
     */
    .cart-upsell--mobile .cart-upsell__list {
        display: flex;

        gap: 12px;

        width: 100%;

        overflow-x: auto;
        overflow-y: hidden;

        padding-block-end:
            10px;

        scroll-snap-type:
            x proximity;

        -webkit-overflow-scrolling:
            touch;

        scrollbar-width:
            none;
    }


    .cart-upsell--mobile .cart-upsell__list::-webkit-scrollbar {
        display: none;
    }


    /**
     * Mobile 商品卡
     */
    .cart-upsell--mobile .cart-upsell__item {
        display: flex;

        flex:
            0 0 44%;

        flex-direction:
            column;

        gap: 0;

        min-width: 0;

        padding: 0;

        margin: 0;

        border: 0;

        scroll-snap-align:
            start;
    }


    .cart-upsell--mobile .cart-upsell__image {
        width: 100%;

        aspect-ratio:
            2 / 3;
    }


    .cart-upsell--mobile .cart-upsell__info {
        flex: 1;

        padding-block-start:
            8px;
    }


    .cart-upsell--mobile .cart-upsell__title {
        font-size: 12px;
    }


    .cart-upsell--mobile .cart-upsell__price {
        margin-block-start:
            5px;

        font-size: 12px;
    }


    .cart-upsell--mobile .cart-upsell__quick-view-button {
        min-height: 34px;

        margin-block-start:
            8px;

        font-size: 10px;
    }

}



/* =========================================================
   QUICK VIEW
   ========================================================= */

.cart-upsell-quick-view__details {
    --z-index: 1000000 !important;
}


.cart-upsell-modal__trigger {
    display: none !important;
}


.cart-upsell-modal__panel {
    position: fixed;

    width: 80vw;
    max-width: 1200px;

    height: auto;
    max-height: 80vh;

    overflow: hidden;

    background:
        rgb(var(--color-background, 255, 255, 255));

    box-sizing:
        border-box;
}


.cart-upsell-modal__content {
    width: 100%;

    max-height: 80vh;

    overflow-x: hidden;
    overflow-y: auto;

    box-sizing:
        border-box;

    -webkit-overflow-scrolling:
        touch;
}


.cart-upsell-modal__content theme-product-detail {
    --page-padding: 40px;

    width: 100%;

    padding:
        var(--page-padding);

    box-sizing:
        border-box;
}



/**
 * Quick View 中不显示 Complete The Set
 */
.cart-upsell-modal__content .block-related-products,

.cart-upsell-modal__content .product-detail__related-products {
    display: none !important;
}



/**
 * 关闭按钮
 */
.cart-upsell-modal__close {
    position: absolute;

    top: 14px;
    right: 14px;

    z-index: 20;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    padding: 0;

    color: #222222;

    background: #ffffff;

    border:
        1px solid rgba(0, 0, 0, 0.15);

    border-radius: 50%;

    cursor: pointer;
}


.cart-upsell-modal__close svg {
    width: 12px;
    height: 12px;
}



/* =========================================================
   QUICK VIEW MOBILE
   ========================================================= */

@media (max-width: 959px) {

    .cart-upsell-modal__panel {
        position: fixed !important;

        inset:
            auto 0 0 0 !important;

        width:
            100vw !important;

        max-width:
            100vw !important;

        height:
            80vh !important;

        min-height:
            0 !important;

        max-height:
            80vh !important;

        margin:
            0 !important;

        overflow:
            hidden !important;

        border-radius:
            16px 16px 0 0;

        background:
            #ffffff;
    }


    .cart-upsell-modal__content {
        width:
            100% !important;

        height:
            100% !important;

        max-height:
            none !important;

        padding:
            0 !important;

        overflow-x:
            hidden !important;

        overflow-y:
            auto !important;
    }


    .cart-upsell-modal__content theme-product-detail {
        width:
            100% !important;

        max-width:
            100% !important;

        padding:
            0 !important;

        margin:
            0 !important;

        box-sizing:
            border-box !important;
    }


    .cart-upsell-modal__content theme-product-detail .product-detail {
        display:
            flex !important;

        flex-direction:
            column !important;

        width:
            100% !important;

        max-width:
            100% !important;

        min-width:
            0 !important;

        gap:
            20px !important;

        padding:
            20px !important;

        margin:
            0 !important;

        box-sizing:
            border-box !important;
    }


    .cart-upsell-modal__content .product-detail__col--small,

    .cart-upsell-modal__content .product-detail__col--medium,

    .cart-upsell-modal__content .product-detail__col--large {
        width:
            100% !important;

        max-width:
            100% !important;

        min-width:
            0 !important;

        flex:
            none !important;
    }


    .cart-upsell-modal__content .product-detail__info,

    .cart-upsell-modal__content .product-detail__info-container,

    .cart-upsell-modal__content .product-detail__media,

    .cart-upsell-modal__content .product-detail__media-group,

    .cart-upsell-modal__content theme-product-media-gallery {
        width:
            100% !important;

        max-width:
            100% !important;

        min-width:
            0 !important;

        box-sizing:
            border-box !important;
    }


    .cart-upsell-modal__close {
        top:
            10px;

        right:
            10px;
    }

}