/* =========================================================
   MYSH PRODUCT BUY BUTTON
   ========================================================= */

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

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


/* =========================================================
   MYSH EXPRESS CHECKOUT
   Apple Pay / Google Pay / Dynamic Checkout
   ========================================================= */

/*
 * SHOPLINE payment_button 是动态加载的。
 *
 * 这里不再提前创建固定高度边框。
 *
 * 只有当 dynamic-checkout-button-container 内部
 * 真正生成支付按钮之后，才显示白色轮廓。
 *
 * 因此：
 * - Apple Pay 未加载：没有白框
 * - Apple Pay 加载：白框同时出现
 * - Google Pay 加载：同样跟随按钮出现
 *
 * 不占额外高度，不改变上下间距。
 */

.product-detail__form .dynamic-checkout-button-container {
    position: relative;
}


/*
 * SHOPLINE 官方快捷支付按钮真正出现以后，
 * 才生成轮廓。
 */
.product-detail__form .dynamic-checkout-button-container:has(.dynamic-checkout-btn)::after,
.product-detail__form .dynamic-checkout-button-container:has(button)::after,
.product-detail__form .dynamic-checkout-button-container:has(iframe)::after,
.product-detail__form .dynamic-checkout-button-container:has([role="button"])::after {

    position: absolute;

    inset: 0;

    z-index: 10;

    content: "";

    pointer-events: none;

    border-radius: var(--button-border-radius, 0);

    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.9);
}


/* =========================================================
   MOBILE STICKY PURCHASE BAR
   ========================================================= */

@media (max-width: 959px) {

    /*
   * 原主题这里是：
   *
   * padding: 20px var(--page-padding);
   *
   * 上下加起来有 40px 黑色留白。
   *
   * 现在压缩到：
   * 上 6px + 下 6px
   *
   * 仅这一项就减少约 28px 高度。
   */
    .is-sticky>.product-detail__buy-buttons {

        padding:
            6px var(--page-padding) 6px var(--page-padding) !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        overflow: visible !important;
    }


    /*
   * 原来的按钮上下间距是 10px。
   * 浮窗状态压缩成 6px。
   *
   * 不删除任何按钮。
   */
    .is-sticky>.product-detail__buy-buttons .product-detail__form {

        gap: 6px !important;
    }


    .is-sticky>.product-detail__buy-buttons .form__buttons {

        gap: 6px !important;

        height: auto !important;
        max-height: none !important;

        overflow: visible !important;
    }


    /*
   * Add to cart 恢复主题原始按钮高度。
   *
   * 上一版强制写死 42 / 44px，
   * 这次全部取消，避免导致浮窗内容计算异常。
   */
    .is-sticky>.product-detail__buy-buttons button[name="add"] {

        width: 100% !important;

        height: auto !important;
        min-height: unset !important;

        margin: 0 !important;
    }


    /*
   * 快捷支付区域完整保留。
   *
   * Apple Pay / Google Pay /
   * More payment options
   * 都允许正常展示。
   */
    .is-sticky>.product-detail__buy-buttons .dynamic-checkout-button-container {

        display: block;

        width: 100%;

        margin: 0;
    }
}


/* =========================================================
   SMALL MOBILE SCREENS
   ========================================================= */

@media (max-width: 959px) and (max-height: 720px) {

    /*
   * 屏幕高度比较小的手机进一步减少黑边，
   * 但仍然不删除任何支付内容。
   */
    .is-sticky>.product-detail__buy-buttons {

        padding:
            4px var(--page-padding) 4px var(--page-padding) !important;
    }


    .is-sticky>.product-detail__buy-buttons .product-detail__form {

        gap: 4px !important;
    }


    .is-sticky>.product-detail__buy-buttons .form__buttons {

        gap: 4px !important;
    }
}