.cart {
    .sec-main {
        overflow: hidden;

        &__con0 {
            border-top-width: var(--headerHeight);
            padding-top: $spacing1 * 0.5;
        }

        &__con1 {
            align-items: start;

            @include lg-wmax {
                margin-bottom: 0;
            }
        }

        &__sumr {
            order: -1;
        }

        @include lg-wmin {
            &__con0 {
                padding-bottom: $spacing1;
            }

            &__flds {
                flex: 0 0 50%;
                width: 50%;
                max-width: 50%;
            }

            &__sumr {
                order: initial;
                flex: 0 0 50%;
                width: 50%;
                max-width: 50%;
            }
        }

        @include xl-wmin {
            &__con1,
            &__con1 > .col {
                --sus-f-gtt: #{$spacing1 * 0.5};
            }
        }

        @include xxl-wmin {
            &__flds {
                flex: 0 0 52.5%;
                width: 52.5%;
                max-width: 52.5%;
            }

            &__sumr {
                flex: 0 0 47.5%;
                width: 47.5%;
                max-width: 47.5%;
            }
        }

        @include xxxl-wmin {
            &__flds {
                flex: 0 0 60%;
                width: 60%;
                max-width: 60%;
            }

            &__sumr {
                flex: 0 0 40%;
                width: 40%;
                max-width: 40%;
            }
        }

        &__flds {
            & > .row {
                @include lg-wmin {
                    padding-top: $spacing1 * 0.75;
                }
            }

            @include xl-wmin {
                & > .row,
                & > .row > .col {
                    --sus-f-gtt: #{$spacing1 * 0.4};
                }
            }

            &-bx {
                padding: var(--sus-f-gtt);
                border: 1px solid $accentClear2;
                border-radius: 5px;
                box-shadow: 0 0 2px 2px rgba($accentClear3, 0.7);
            }

            &-hdr {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                margin-bottom: $spacing2 * 2;
                font-size: $text-30;
                font-weight: 700;

                &-idx {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-shrink: 0;
                    width: 1.5em;
                    height: 1.5em;
                    margin-right: 0.5em;
                    font-size: 0.6em;
                    font-weight: 400;
                    border-radius: 50%;
                    background-color: $secondaryClear;
                    color: #fff;
                }

                &--sm {
                    font-size: $text-22;
                }
            }

            &-fldset,
            &-fldset > .col {
                --sus-fx-gtt: 0.25rem;
                --sus-fy-gtt: 0.5rem;
            }

            &-fldset--mt {
                margin-top: var(--sus-fy-gtt);
            }

            &-cb--lg {
                font-size: 1rem;
            }
        }

        &__box {
            &--schedule {
                .sas-date {
                    .icon {
                        margin-right: 1rem;
                        font-size: $text-30;
                    }

                    span {
                        font-size: $text-18;
                        font-weight: 700;
                    }
                }
            }
        }

        &__sumr {
            &::before {
                bottom: 0;
                right: 0;
                width: var(--sbw-s-1);
                height: var(--sbw-s-1);
                border-width: var(--sbw-t-1);
                transform: translate3d(50%, 75%, 1px);
            }

            &-con0 {
                width: 100%;
                height: 100%;

                &::before {
                    content: none;
                    width: 9999px;
                    border-radius: 90px 0 0 90px;
                    background-color: $accentClear3;

                    @include lg-wmin {
                        content: "";
                    }
                }

                @include lg-wmin {
                    padding: $spacing1 * 0.75 0 $spacing1 * 0.75 $spacing1;
                }
            }

            &-hdr {
                margin-bottom: $spacing2 * 2;
            }

            &-lis,
            &-ite {
                --sus-fx-gtt: 0;
                --sus-fy-gtt: #{$spacing2};
            }

            &-ite:not(:last-child) {
                // border-bottom: 1px solid rgba($duller2, .2);

                &::after {
                    content: "";
                    display: block;
                    position: absolute;
                    right: 0;
                    left: 0;
                    height: 1px;
                    margin-top: calc(var(--sus-fy-gtt));
                    background-color: rgba($duller2, 0.2);

                    @include sm-wmin {
                        left: calc((15px + 0.5rem) * 3 + 0.5rem);
                    }
                }
            }

            &-ftr {
                margin-top: $spacing2 * 2;
            }

            &-box {
                padding: $spacing2 * 2 0;
                border-bottom: 1px solid rgba($duller2, 0.2);

                &:first-child {
                    border-top: 1px solid rgba($duller2, 0.2);
                }

                &--emp {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                }

                &--nb {
                    border-bottom: none;
                }
            }

            &-tit {
                font-size: $text-30;
                margin-bottom: 0.5em;
                font-weight: 700;
            }

            &-dat {
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-size: $text-15;
                font-weight: 700;
                color: $duller2;

                &:not(:last-child) {
                    padding-bottom: $spacing2;
                }

                &--strong {
                    font-size: $text-20;
                    font-weight: 800;
                }
            }

            &-mbtns {
                .sxs-btn {
                    width: 100%;

                    &:not(:first-child) {
                        margin-top: 0.5rem;
                    }
                }

                &--dek {
                    display: none;

                    @include lg-wmin {
                        display: block;
                    }
                }

                &--mob {
                    position: fixed;
                    bottom: 0;
                    width: 100%;
                    background-color: #fff;
                    padding-bottom: $spacing2;
                    box-shadow: 0px 0px 4px 1px rgba($accentClear6, 0.25);

                    @include lg-wmin {
                        display: none;
                    }
                }

                &--shadow {
                    position: static;
                    margin-top: 0;
                    opacity: 0;
                    visibility: hidden;
                }
            }
        }

        @include xxxl-wmin {
            &__con1,
            &__con1 > .col {
                --sus-f-gtt: #{$spacing1 * 0.75};
            }

            &__sumr-con0 {
                padding: $spacing1 * 0.75 0 $spacing1 * 0.75 $spacing1 * 1.5;
            }
        }
    }

    .sas-pmethods {
        display: flex;
        gap: 0.5rem;
        margin-left: 1rem;

        img {
            aspect-ratio: 23 / 17;
            width: clamp(40px, calc(16px + 1.25rem + 1vw), 80px);
        }
    }
}

// .skeleton {
//     background: linear-gradient(90deg, #eee, #f5f5f5, #eee);
//     background-size: 200% 100%;
//     animation: skeleton-loading 1.2s ease-in-out infinite;
//     border-radius: 4px;
// }

// .skeleton-select {
//     height: 40px;
//     padding: 8px;
//     display: flex;
//     align-items: center;
// }

// .skeleton-text {
//     height: 12px;
//     background-color: #e0e0e0;
//     border-radius: 4px;
// }

// @keyframes skeleton-loading {
//     0% {
//         background-position: -200% 0;
//     }
//     100% {
//         background-position: 200% 0;
//     }
// }

.skeleton-select {
    width: 100%;
    height: 46px;
    border-radius: 2px;
    background-color: #f2f2f2;
    border: 1px solid #e5e7eb;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
}

.skeleton-select::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shimmer 1.5s infinite;
}

.skeleton-text {
    width: calc(100% - 30px);
    height: 14px;
    background-color: #e0e0e0;
    border-radius: 4px;
}

.skeleton-arrow {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid #d1d5db;
}

.openpay {
    margin-top: 1rem;
    &__text {
        font-size: 0.8rem;
    }
    &__logo {
        max-width: 120px;
        width: 100%;
    }
}

@keyframes shimmer {
    100% {
        left: 100%;
    }
}