/* =========================================================
   CART UPSELL
   CUSTOMERS ALSO BOUGHT
   ========================================================= */


/* =========================================================
   基础结构
   ========================================================= */

.cart-drawer__main {
    display: flex;

    flex: 1;

    flex-direction: column;

    width: 100%;

    min-width: 0;
    min-height: 0;

    overflow: hidden;

    box-sizing: border-box;
}


.cart-upsell {
    min-width: 0;

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

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

    box-sizing: border-box;
}



/* =========================================================
   PC
   左侧推荐区 + 右侧 Cart
   ========================================================= */

@media (min-width: 960px) {

    /**
     * =====================================================
     * 整个 Drawer
     *
     * 左：
     * 300px CUSTOMERS ALSO BOUGHT
     *
     * 右：
     * 500px 原购物车
     *
     * 总宽：
     * 800px
     * =====================================================
     */

    .cart-drawer__body.cart-drawer__body--with-upsell {
        display: flex !important;

        flex-direction: row !important;

        width: 800px !important;

        max-width:
            calc(100vw - 20px) !important;

        height: 100% !important;

        min-width: 0 !important;

        min-height: 0 !important;

        overflow: hidden !important;

        box-sizing: border-box !important;
    }



    /* =====================================================
       左侧推荐区
       ===================================================== */

    .cart-drawer__body--with-upsell>.cart-upsell--desktop {

        display: flex !important;

        flex:
            0 0 300px !important;

        flex-direction: column;

        width:
            300px !important;

        min-width:
            300px !important;

        max-width:
            300px !important;

        height:
            100% !important;

        min-height:
            0 !important;

        overflow:
            hidden !important;

        box-sizing:
            border-box !important;

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

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



    /* =====================================================
       右侧购物车
       ===================================================== */

    .cart-drawer__body--with-upsell>.cart-drawer__main {

        display: flex !important;

        flex:
            0 0 500px !important;

        flex-direction:
            column !important;

        width:
            500px !important;

        min-width:
            500px !important;

        max-width:
            500px !important;

        height:
            100% !important;

        min-height:
            0 !important;

        overflow:
            hidden !important;

        box-sizing:
            border-box !important;

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



    /* =====================================================
       Cart Header
       ===================================================== */

    .cart-drawer__body--with-upsell .cart-drawer__header {

        flex:
            0 0 auto;

        width:
            100%;

        min-width:
            0;

        box-sizing:
            border-box;
    }



    /* =====================================================
       Cart 中间主体
       ===================================================== */

    .cart-drawer__body--with-upsell .cart-drawer__inner {

        flex:
            1 1 auto;

        width:
            100%;

        min-width:
            0;

        min-height:
            0;

        overflow-x:
            hidden;

        overflow-y:
            auto;

        box-sizing:
            border-box;

        -webkit-overflow-scrolling:
            touch;
    }



    /* =====================================================
       Checkout
       ===================================================== */

    .cart-drawer__body--with-upsell .cart-drawer__fixed-checkout {

        flex:
            0 0 auto;

        width:
            100%;

        min-width:
            0;

        box-sizing:
            border-box;
    }



    /* =====================================================
       PC 隐藏 Mobile 推荐
       ===================================================== */

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

}



/* =========================================================
   推荐区域标题
   ========================================================= */

.cart-upsell__header {
    flex-shrink: 0;

    padding:
        20px 20px;

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

    box-sizing:
        border-box;
}


.cart-upsell__heading {
    margin: 0;

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

    font-size:
        18px;

    font-weight:
        600;

    line-height:
        1.3;

    letter-spacing:
        0.02em;
}



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

.cart-upsell--desktop .cart-upsell__list {

    flex:
        1 1 auto;

    min-height:
        0;

    padding:
        20px;

    overflow-x:
        hidden;

    overflow-y:
        auto;

    box-sizing:
        border-box;

    -webkit-overflow-scrolling:
        touch;
}



/* =========================================================
   滚动条
   ========================================================= */

.cart-upsell--desktop .cart-upsell__list::-webkit-scrollbar {

    width:
        6px;
}


.cart-upsell--desktop .cart-upsell__list::-webkit-scrollbar-track {

    background:
        transparent;
}


.cart-upsell--desktop .cart-upsell__list::-webkit-scrollbar-thumb {

    background:
        rgba(0, 0, 0, 0.18);

    border-radius:
        10px;
}



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

.cart-upsell__item {
    display: grid;

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

    gap:
        14px;

    width:
        100%;

    padding-block-end:
        18px;

    margin-block-end:
        18px;

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

    box-sizing:
        border-box;
}


.cart-upsell__item:last-child {

    margin-block-end:
        0;
}



/* =========================================================
   商品图片
   ========================================================= */

.cart-upsell__image {
    display: block;

    width:
        100px;

    height:
        auto;

    aspect-ratio:
        2 / 3;

    overflow:
        hidden;

    text-decoration:
        none;

    background:
        #f7f7f7;
}


.cart-upsell__image img {
    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}



/* =========================================================
   商品右侧信息
   ========================================================= */

.cart-upsell__info {
    display:
        flex;

    flex-direction:
        column;

    width:
        100%;

    min-width:
        0;

    box-sizing:
        border-box;
}



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

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

    width:
        100%;

    overflow:
        hidden;

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

    font-size:
        14px;

    font-weight:
        500;

    line-height:
        1.35;

    text-decoration:
        none;

    -webkit-box-orient:
        vertical;

    -webkit-line-clamp:
        2;

    word-break:
        break-word;
}


.cart-upsell__title:hover {

    text-decoration:
        underline;
}



/* =========================================================
   价格
   ========================================================= */

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

    color:
        #e53b32;

    font-size:
        14px;

    font-weight:
        600;

    line-height:
        1.3;
}



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

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

    align-items:
        center;

    justify-content:
        center;

    width:
        100%;

    min-height:
        38px;

    margin-block-start:
        auto;

    padding:
        9px 10px;

    color:
        #ffffff;

    background:
        #111111;

    border:
        1px solid #111111;

    border-radius:
        0;

    font-family:
        inherit;

    font-size:
        12px;

    font-weight:
        600;

    line-height:
        1;

    text-align:
        center;

    cursor:
        pointer;

    box-sizing:
        border-box;

    transition:
        opacity 0.2s ease;
}


.cart-upsell__quick-view-button:hover {

    opacity:
        0.82;
}


.cart-upsell__quick-view-button:disabled {

    cursor:
        default;

    opacity:
        0.6;
}



/* =========================================================
   Loading
   ========================================================= */

.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.65;
}


.cart-upsell__quick-view-button.loading .icon-loading {

    display:
        block;

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



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

@media (max-width: 959px) {

    /**
     * Mobile：
     * 不改变原 Cart Drawer 宽度
     */

    .cart-drawer__body.cart-drawer__body--with-upsell {

        display:
            flex !important;

        flex-direction:
            column !important;

        width:
            100vw !important;

        max-width:
            100vw !important;

        height:
            100% !important;

        min-width:
            0 !important;

        min-height:
            0 !important;

        overflow:
            hidden !important;

        box-sizing:
            border-box !important;
    }



    /* PC 推荐隐藏 */

    .cart-upsell--desktop {

        display:
            none !important;
    }



    /* =====================================================
       Mobile Cart
       ===================================================== */

    .cart-drawer__body--with-upsell>.cart-drawer__main {

        display:
            flex !important;

        flex:
            1 1 auto !important;

        flex-direction:
            column !important;

        width:
            100% !important;

        max-width:
            100% !important;

        min-width:
            0 !important;

        min-height:
            0 !important;

        overflow:
            hidden !important;

        box-sizing:
            border-box !important;
    }



    .cart-drawer__body--with-upsell .cart-drawer__inner {

        flex:
            1 1 auto;

        min-height:
            0;

        overflow-x:
            hidden;

        overflow-y:
            auto;

        -webkit-overflow-scrolling:
            touch;
    }



    /* =====================================================
       Mobile 推荐区
       ===================================================== */

    .cart-upsell--mobile {

        display:
            block !important;

        width:
            100%;

        margin-block-start:
            24px;

        padding-block-start:
            20px;

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

        box-sizing:
            border-box;
    }



    .cart-upsell--mobile .cart-upsell__header {

        padding:
            0 0 14px;

        border:
            0;
    }



    .cart-upsell--mobile .cart-upsell__heading {

        font-size:
            15px;
    }



    /* =====================================================
       Mobile 横向商品列表
       ===================================================== */

    .cart-upsell--mobile .cart-upsell__list {

        display:
            flex;

        align-items:
            stretch;

        gap:
            12px;

        width:
            100%;

        min-width:
            0;

        padding:
            0 0 10px;

        overflow-x:
            auto;

        overflow-y:
            hidden;

        scroll-snap-type:
            x proximity;

        -webkit-overflow-scrolling:
            touch;

        scrollbar-width:
            none;

        box-sizing:
            border-box;
    }



    .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;

        width:
            auto;

        min-width:
            0;

        padding:
            0;

        margin:
            0;

        border:
            0;

        scroll-snap-align:
            start;

        box-sizing:
            border-box;
    }



    /* Mobile 图片 */

    .cart-upsell--mobile .cart-upsell__image {

        width:
            100%;

        aspect-ratio:
            2 / 3;
    }



    /* Mobile 信息 */

    .cart-upsell--mobile .cart-upsell__info {

        display:
            flex;

        flex:
            1;

        flex-direction:
            column;

        width:
            100%;

        padding-block-start:
            8px;

        box-sizing:
            border-box;
    }



    /* Mobile 标题 */

    .cart-upsell--mobile .cart-upsell__title {

        font-size:
            12px;

        line-height:
            1.35;
    }



    /* Mobile 价格 */

    .cart-upsell--mobile .cart-upsell__price {

        margin-block-start:
            5px;

        font-size:
            12px;
    }



    /* Mobile Add */

    .cart-upsell--mobile .cart-upsell__quick-view-button {

        min-height:
            34px;

        margin-block-start:
            10px;

        padding:
            8px 6px;

        font-size:
            10px;
    }

}



/* =========================================================
   CART UPSELL QUICK VIEW
   ========================================================= */

.cart-upsell-quick-view__details {

    --z-index:
        1000000 !important;
}



/**
 * 用于程序控制 Modal，
 * summary 不需要显示。
 */

.cart-upsell-modal__trigger {

    display:
        none !important;
}



/* =========================================================
   Quick View Panel
   ========================================================= */

.cart-upsell-modal__panel {
    position:
        fixed;

    width:
        80vw;

    max-width:
        1200px;

    height:
        auto;

    max-height:
        80vh;

    overflow:
        hidden;

    background:
        #ffffff;

    box-sizing:
        border-box;
}



/* =========================================================
   Quick View Content
   ========================================================= */

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

    max-height:
        80vh;

    overflow-x:
        hidden;

    overflow-y:
        auto;

    background:
        #ffffff;

    box-sizing:
        border-box;

    -webkit-overflow-scrolling:
        touch;
}



/* =========================================================
   Product Detail
   ========================================================= */

.cart-upsell-modal__content theme-product-detail {

    --page-padding:
        40px;

    display:
        block;

    width:
        100%;

    max-width:
        100%;

    padding:
        var(--page-padding);

    margin:
        0;

    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;
}



/* =========================================================
   Quick View 关闭按钮
   ========================================================= */

.cart-upsell-modal__close {
    position:
        absolute;

    top:
        14px;

    right:
        14px;

    z-index:
        20;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        34px;

    height:
        34px;

    padding:
        0;

    color:
        #222222;

    background:
        #ffffff;

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

    border-radius:
        50%;

    cursor:
        pointer;

    box-sizing:
        border-box;
}


.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;

        background:
            #ffffff;

        border-radius:
            16px 16px 0 0;

        box-sizing:
            border-box !important;
    }



    .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;

        box-sizing:
            border-box !important;
    }



    .cart-upsell-modal__content theme-product-detail {

        width:
            100% !important;

        max-width:
            100% !important;

        min-width:
            0 !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;

        box-sizing:
            border-box !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;
    }

}