/* 購買流程移動端-start */
@media screen and (max-width: 992px) {
    .faq-banner-section {
        padding: 0 16px;
        height: 180px;
        margin-top: 12px;
    
        .my-container {
            width: 100%;
            height: 100%;

            .banner-title {
                font-size: 30px;
                margin-bottom: 6px;
            }

            .faq-banner__desc {
                font-size: 15px;
                line-height: 24px;
                text-align: center;
            }
        }
    }

    .purchase-process-section {
        padding: 56px 0 30px;

        &--returns {
            padding-top: 56px;
            padding-bottom: 72px;
        }

        .purchase-process__bg-blob--1,
        .purchase-process__bg-blob--3 {
            width: 200px;
            height: 200px;
        }

        .purchase-process__bg-blob--2,
        .purchase-process__bg-blob--4 {
            width: 220px;
            height: 220px;
        }

        .purchase-process__bg-ring--1 {
            width: 90px;
            height: 90px;
            top: 6%;
            right: 2%;
        }

        .purchase-process__bg-ring--2 {
            width: 72px;
            height: 72px;
            bottom: 10%;
            left: 1%;
        }

        .purchase-process__head {
            max-width: none;
            margin-bottom: 36px;
            text-align: left;
        }

        .purchase-process__label {
            margin-bottom: 4px;
        }

        .purchase-process__title {
            font-size: 28px;
        }

        .purchase-process__intro {
            font-size: 14px;
        }

        .purchase-process__steps {
            --pp-marker-size: 56px;
            --pp-marker-gap: 14px;
            --pp-rail-x: calc(var(--pp-marker-size) / 2);
            position: relative;
            flex-direction: column;
            gap: 0;
            padding-left: 0;
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
        }

        .purchase-process__step {
            position: relative;
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
            padding-bottom: 28px;
            min-width: 0;

            .purchase-process__step-body {
                padding-left: calc(var(--pp-marker-size) + var(--pp-marker-gap));
            }

            /* 時間軸豎線：對齊 marker 中心 */
            /* &::before {
                content: "";
                position: absolute;
                top: var(--pp-marker-size);
                bottom: 0;
                left: var(--pp-rail-x);
                width: 2px;
                margin-left: -1px;
                background: linear-gradient(
                    180deg,
                    rgba(30, 140, 230, 0.35) 0%,
                    rgba(30, 140, 230, 0.12) 100%
                );
                pointer-events: none;
            } */

            &:last-child {
                padding-bottom: 0;

                &::before {
                    display: none;
                }
            }
        }

        .purchase-process__step-arrow {
            top: auto;
            right: auto;
            left: var(--pp-rail-x);
            bottom: 19px;
            width: 24px;
            height: 24px;
            color: rgba(30, 140, 230, 0.45);
            transform: translate(-50%, 0) rotate(90deg);
            background: #ffffff;
            border-radius: 50%;
            z-index: 1;

            svg {
                width: 100%;
                height: 100%;
            }
        }

        .purchase-process__step:hover .purchase-process__step-arrow {
            transform: translate(-50%, 2px) rotate(90deg);
        }

        .purchase-process__step-card {
            align-items: flex-start;
            width: 100%;
            max-width: 100%;
            min-width: 0;
            padding: 0;
            text-align: left;
            box-sizing: border-box;

            &:hover {
                transform: none;
            }
        }

        .purchase-process__step-marker {
            position: absolute;
            top: 0;
            left: 0;
            width: var(--pp-marker-size);
            height: var(--pp-marker-size);
            margin-bottom: 0;
            border-radius: 14px;
            flex-shrink: 0;
            z-index: 1;
        }

        .purchase-process__step-icon svg {
            width: 22px;
            height: 22px;
        }

        .purchase-process__step-index {
            top: -5px;
            right: -5px;
            min-width: 24px;
            height: 24px;
            padding: 0 5px;
            font-size: 11px;
            line-height: 24px;
        }

        .purchase-process__step-body {
            width: 100%;
            min-width: 0;
            max-width: 100%;
            box-sizing: border-box;
        }

        .purchase-process__step-title {
            font-size: clamp(15px, 4.2vw, 17px);
            margin-bottom: 6px;
            word-break: break-word;
        }

        .purchase-process__step-desc {
            font-size: clamp(13px, 3.6vw, 14px);
            line-height: 1.65;
            word-break: break-word;
            overflow-wrap: anywhere;
        }

        .purchase-process__note {
            margin-top: 16px;
            padding: 12px;

            p {
                font-size: 14px;
                line-height: 26px;
            }
        }
    }

    /* 小屏手機（約 ≤480px）：再收緊時間軸與字級 */
    @media screen and (max-width: 480px) {
        .purchase-process-section {
            padding-top: 24px;

            .purchase-process__steps {
                --pp-marker-size: 48px;
                --pp-marker-gap: 12px;
            }

            .purchase-process__step {
                padding-bottom: 24px;
            }

            .purchase-process__step-marker {
                border-radius: 12px;
            }

            .purchase-process__step-icon svg {
                width: 20px;
                height: 20px;
            }

            .purchase-process__step-index {
                top: -4px;
                right: -4px;
                min-width: 22px;
                height: 22px;
                font-size: 10px;
                line-height: 22px;
            }
        }
    }

    /* 超小屏（約 ≤360px）：避免內容被擠壓 */
    @media screen and (max-width: 360px) {
        .purchase-process-section {
            .purchase-process__steps {
                --pp-marker-size: 44px;
                --pp-marker-gap: 10px;
            }

            .purchase-process__step-title {
                font-size: 14px;
            }

            .purchase-process__step-desc {
                font-size: 12px;
                line-height: 1.6;
            }
        }
    }
}
/* 購買流程移動端-end */