/* ==================================================
   ORIGINAL PRODUCT BUY BUTTON
   ================================================== */

.block-product-buy-button {
    white-space: normal !important;
}

.block-product-buy-button-wrapper {
    padding: var(--button-border-thickness, 1px);
}


/* ==================================================
   CUSTOM ADD TO CART BUTTON
   ================================================== */

.custom-product-buy-buttons .custom-main-add-button {
    width: 100% !important;
    min-height: 48px !important;

    background-color: #ffffff !important;
    color: #000000 !important;

    border: 1px solid #000000 !important;
    border-radius: 0 !important;

    font-weight: 600 !important;

    cursor: pointer !important;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease !important;
}


/* Add to cart 里面所有文字继承按钮颜色 */

.custom-product-buy-buttons .custom-main-add-button span {
    color: inherit !important;
}


/* 默认：白底黑字 */

.custom-product-buy-buttons .custom-main-add-button:not(:hover) {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: #000000 !important;
}


/* 鼠标碰到：黑底白字 */

.custom-product-buy-buttons .custom-main-add-button:hover:not(:disabled) {
    background-color: #000000 !important;
    color: #ffffff !important;
    border-color: #000000 !important;
}

.custom-product-buy-buttons .custom-main-add-button:hover:not(:disabled) span {
    color: #ffffff !important;
}


/* 键盘 Focus */

.custom-product-buy-buttons .custom-main-add-button:focus-visible {
    background-color: #000000 !important;
    color: #ffffff !important;
    border-color: #000000 !important;

    outline: none !important;
}


/* 售罄 */

.custom-product-buy-buttons .custom-main-add-button:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}


/* ==================================================
   PAYMENT AREA
   ================================================== */

.custom-payment-area {
    width: 100% !important;
}


/* 同时兼容之前使用过的 class */

.custom-express-payment-layout {
    width: 100% !important;
}


/* ==================================================
   BUY NOW
   ================================================== */

.custom-payment-area .shopline-payment-button,
.custom-express-payment-layout .shopline-payment-button {
    width: 100% !important;
}


/* ==================================================
   PAYPAL + PAY LATER CONTAINER
   强制横向排列
   ================================================== */

.custom-payment-area .shopline-payment-button__button-container,
.custom-payment-area .shopline-payment-button__more-options,
.custom-payment-area .shopline-payment-button__express-checkout,
.custom-payment-area .shopline-payment-button-wrapper,

.custom-express-payment-layout .shopline-payment-button__button-container,
.custom-express-payment-layout .shopline-payment-button__more-options,
.custom-express-payment-layout .shopline-payment-button__express-checkout,
.custom-express-payment-layout .shopline-payment-button-wrapper {
    display: flex !important;

    flex-direction: row !important;
    flex-wrap: nowrap !important;

    align-items: stretch !important;

    width: 100% !important;

    gap: 8px !important;
}


/* ==================================================
   PAYPAL + PAY LATER
   各占 50%
   ================================================== */

.custom-payment-area .shopline-payment-button__button-container>*,
.custom-payment-area .shopline-payment-button__more-options>*,
.custom-payment-area .shopline-payment-button__express-checkout>*,
.custom-payment-area .shopline-payment-button-wrapper>*,

.custom-express-payment-layout .shopline-payment-button__button-container>*,
.custom-express-payment-layout .shopline-payment-button__more-options>*,
.custom-express-payment-layout .shopline-payment-button__express-checkout>*,
.custom-express-payment-layout .shopline-payment-button-wrapper>* {
    flex: 1 1 0 !important;

    width: 50% !important;
    max-width: none !important;
    min-width: 0 !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* 支付按钮内部撑满 */

.custom-payment-area iframe,
.custom-payment-area button,
.custom-express-payment-layout iframe,
.custom-express-payment-layout button {
    width: 100% !important;
    max-width: 100% !important;
}


/* ==================================================
   MOBILE
   手机也保持 PayPal / Pay Later 左右排列
   ================================================== */

@media screen and (max-width: 749px) {

    .custom-payment-area .shopline-payment-button__button-container,
    .custom-payment-area .shopline-payment-button__more-options,
    .custom-payment-area .shopline-payment-button__express-checkout,
    .custom-payment-area .shopline-payment-button-wrapper,

    .custom-express-payment-layout .shopline-payment-button__button-container,
    .custom-express-payment-layout .shopline-payment-button__more-options,
    .custom-express-payment-layout .shopline-payment-button__express-checkout,
    .custom-express-payment-layout .shopline-payment-button-wrapper {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }


    .custom-payment-area .shopline-payment-button__button-container>*,
    .custom-payment-area .shopline-payment-button__more-options>*,
    .custom-payment-area .shopline-payment-button__express-checkout>*,
    .custom-payment-area .shopline-payment-button-wrapper>*,

    .custom-express-payment-layout .shopline-payment-button__button-container>*,
    .custom-express-payment-layout .shopline-payment-button__more-options>*,
    .custom-express-payment-layout .shopline-payment-button__express-checkout>*,
    .custom-express-payment-layout .shopline-payment-button-wrapper>* {
        flex: 1 1 0 !important;

        width: 50% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

}
/* =========================================================
   FREQUENTLY BOUGHT TOGETHER
   Horizontal / Reference Style
   ========================================================= */


/* 只影响组合销售 App，避免污染其他区域 */
.sales-bundle-root .bundle-products.sales-bundle-manual {
    width: 100% !important;
    max-width: 1320px !important;

    margin-left: auto !important;
    margin-right: auto !important;
}


/* =========================================================
   主布局：
   左边商品 + 右边 Total
   ========================================================= */

.sales-bundle-root .bundle-products.sales-bundle-manual [class*="_products_"] {

    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr) minmax(250px, 320px) !important;

    align-items: start !important;

    gap: 36px !important;

    width: 100% !important;

    justify-content: initial !important;
}


/* =========================================================
   左侧商品列表
   ========================================================= */

.sales-bundle-root [class*="bundle-product-items__list"] {

    display: flex !important;

    flex-direction: row !important;
    flex-wrap: nowrap !important;

    justify-content: flex-start !important;
    align-items: flex-start !important;

    width: 100% !important;
    max-width: 100% !important;

    gap: 22px !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   每个真正的商品卡
   用 :has(img) 避开中间的 “+”
   ========================================================= */

.sales-bundle-root [class*="bundle-product-items__list"]>*:has(img) {

    flex: 1 1 0 !important;

    width: 0 !important;

    min-width: 180px !important;
    max-width: 240px !important;

    margin: 0 !important;
}


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

.sales-bundle-root [class*="bundle-product-items__list"]>*:has(img) img {

    display: block !important;

    width: 100% !important;
    max-width: 220px !important;

    aspect-ratio: 1 / 1 !important;

    object-fit: cover !important;

    height: auto !important;

    margin: 0 0 12px 0 !important;
}


/* =========================================================
   中间 + 号
   ========================================================= */

.sales-bundle-root [class*="bundle-product-items__list"]>*:not(:has(img)) {

    flex: 0 0 26px !important;

    width: 26px !important;
    min-width: 26px !important;

    align-self: flex-start !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin-top: 90px !important;

    font-size: 26px !important;
    line-height: 1 !important;

    opacity: 0.55 !important;
}


/* =========================================================
   商品标题
   ========================================================= */

.sales-bundle-root [class*="bundle-product-items__list"] a {

    line-height: 1.4 !important;
}


/* =========================================================
   下拉规格
   ========================================================= */

.sales-bundle-root [class*="bundle-product-items__list"] select {

    max-width: 100% !important;

    margin-top: 8px !important;
}


/* =========================================================
   商品价格区域
   ========================================================= */

.sales-bundle-root [class*="bundle-product-items__list"] [class*="price"] {

    margin-top: 8px !important;
}


/* =========================================================
   右侧 Total / Save / Buy Together
   ========================================================= */

.sales-bundle-root .bundle-product-subtotal {

    width: 100% !important;
    max-width: 320px !important;

    min-height: 0 !important;

    margin: 0 !important;
    padding: 24px 20px !important;

    align-self: start !important;

    display: flex !important;
    flex-direction: column !important;

    align-items: stretch !important;
    justify-content: center !important;

    text-align: center !important;
}


/* 右侧内部元素不要被写死窄宽 */
.sales-bundle-root .bundle-product-subtotal>* {

    width: 100% !important;
    max-width: 100% !important;

    margin-left: auto !important;
    margin-right: auto !important;
}


/* =========================================================
   Buy Together 按钮
   ========================================================= */

.sales-bundle-root .bundle-product-subtotal button {

    width: 100% !important;
    max-width: 100% !important;

    min-height: 42px !important;

    margin-top: 14px !important;
}


/* =========================================================
   去掉造成“大白块”的多余高度
   ========================================================= */

.sales-bundle-root .bundle-product-subtotal,
.sales-bundle-root .bundle-product-subtotal div {

    min-height: 0 !important;
}


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

.sales-bundle-root [data-e2e="bundle_title"] {

    margin-bottom: 22px !important;

    font-size: 24px !important;
    line-height: 1.3 !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media screen and (max-width: 1100px) {

    .sales-bundle-root .bundle-products.sales-bundle-manual [class*="_products_"] {

        grid-template-columns:
            minmax(0, 1fr) minmax(220px, 280px) !important;

        gap: 24px !important;
    }


    .sales-bundle-root [class*="bundle-product-items__list"] {

        gap: 14px !important;
    }


    .sales-bundle-root [class*="bundle-product-items__list"]>*:has(img) {

        min-width: 150px !important;
    }


    .sales-bundle-root [class*="bundle-product-items__list"]>*:not(:has(img)) {

        margin-top: 70px !important;
    }

}


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

@media screen and (max-width: 749px) {

    .sales-bundle-root .bundle-products.sales-bundle-manual [class*="_products_"] {

        display: flex !important;

        flex-direction: column !important;

        gap: 20px !important;
    }


    .sales-bundle-root [class*="bundle-product-items__list"] {

        display: flex !important;

        flex-direction: row !important;
        flex-wrap: nowrap !important;

        align-items: flex-start !important;

        gap: 8px !important;

        overflow-x: auto !important;

        padding-bottom: 8px !important;
    }


    .sales-bundle-root [class*="bundle-product-items__list"]>*:has(img) {

        flex: 0 0 44% !important;

        width: 44% !important;

        min-width: 145px !important;
        max-width: none !important;
    }


    .sales-bundle-root [class*="bundle-product-items__list"]>*:has(img) img {

        width: 100% !important;

        max-width: none !important;

        aspect-ratio: 1 / 1 !important;
    }


    .sales-bundle-root [class*="bundle-product-items__list"]>*:not(:has(img)) {

        flex: 0 0 24px !important;

        width: 24px !important;
        min-width: 24px !important;

        margin-top: 60px !important;

        font-size: 20px !important;
    }


    .sales-bundle-root .bundle-product-subtotal {

        width: 100% !important;
        max-width: 100% !important;

        padding: 18px 14px !important;
    }


    .sales-bundle-root .bundle-product-subtotal button {

        width: 100% !important;
    }

}