/* 购买确认页部件：PC/平板默认隐藏，仅手机端启用 */
.purchase-sheet-shade,
.purchase-sheet-header,
.purchase-sheet-amount {
    display: none;
}

@media (max-width: 575.98px) {
    main.container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .panel-body {
        padding-left: 12px;
        padding-right: 12px;
    }

    .item-list {
        --bs-gutter-x: 10px;
    }

    .item-list > [class*="col-"] {
        margin-bottom: 10px !important;
    }

    .acg-card {
        border-radius: 12px;
        box-shadow: var(--acg-shadow-sm);
    }

    .acg-thumb {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
    }

    .acg-card > .p-3 {
        padding: 10px !important;
    }

    .goods-title {
        min-height: 2.7em;
        font-size: 13px;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .acg-card .price {
        font-size: 18px;
    }

    .acg-card .stat-row,
    .acg-card .text-muted {
        font-size: 12px;
    }

    .item-page .panel:first-child .panel-body {
        padding: 12px;
    }

    .sku-list {
        gap: 14px 10px;
        padding-top: 8px;
    }

    .sku {
        padding: .45rem .8rem;
        font-size: 14px;
    }

    .sku .badge-money,
    .sku .badge-moeny {
        top: -12px;
        right: -8px;
    }

    .wholesale-panel {
        margin-top: 10px;
        padding: 12px;
        font-size: 13px;
    }

    .wholesale-tier {
        font-size: 13px;
    }

    .wholesale-table {
        width: 100%;
        font-size: 13px;
    }

    .wholesale-table thead th,
    .wholesale-table tbody td {
        font-size: 12px !important;
        padding: 4px 8px;
    }

    .order-header {
        gap: 10px;
        margin-bottom: 14px;
        padding-bottom: 14px;
    }

    .order-right {
        align-self: stretch;
        align-items: flex-start;
        text-align: left;
    }

    .order-amount {
        align-items: flex-start;
    }

    .password-form .input-group {
        flex-direction: column;
        gap: 8px;
    }

    .card-password-input,
    .view-card-btn {
        width: 100%;
        border: 1px solid var(--acg-border);
        border-radius: 12px;
    }
}

/* 手机确认订单：与商品卡同宽，默认隐藏，点「去购买」后打开 */
@media (max-width: 767.98px) {
    html, body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        overscroll-behavior-x: none;
    }

    .item-page,
    .item-page .panel,
    .item-page .panel-body,
    .item-page .row,
    .item-page [class*="col-"],
    .item-page .flex-fill,
    .item-page .vstack {
        transform: none !important;
        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        perspective: none !important;
        contain: none !important;
    }

    .item-page {
        padding-bottom: calc(76px + env(safe-area-inset-bottom)) !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .item-page h4 {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .item-page .flex-fill > .d-flex {
        flex-wrap: wrap;
    }

    .item-page .sku-list {
        overflow-x: hidden;
        padding-right: 10px;
        box-sizing: border-box;
    }

    .item-page .row {
        --bs-gutter-x: 0;
        margin-left: 0;
        margin-right: 0;
    }

    .item-page [class*="col-"] {
        padding-left: 0;
        padding-right: 0;
        max-width: 100%;
    }

    .item-page .panel,
    .item-page .panel-body,
    .item-page .flex-fill,
    .item-page .vstack {
        max-width: 100%;
        min-width: 0;
    }

    .mobile-purchase-summary {
        position: fixed !important;
        z-index: 1035;
        left: 12px !important;
        right: 12px !important;
        bottom: 0 !important;
        width: auto !important;
        max-width: none !important;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin: 0;
        padding: 10px 16px max(10px, env(safe-area-inset-bottom));
        background: #fff;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -10px 30px rgba(255, 126, 179, .14);
        box-sizing: border-box;
        transform: none;
    }

    .mobile-purchase-summary::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--acg-gradient);
    }

    .mobile-purchase-summary > div {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 6px 8px;
        min-width: 0;
    }

    .mobile-buy-now {
        appearance: none;
        -webkit-appearance: none;
        flex: 0 0 auto;
        min-height: 44px;
        margin: 0;
        padding: 0 22px;
        border: 0 !important;
        border-radius: 999px;
        background: var(--acg-gradient);
        color: #fff;
        font-size: 15px;
        font-weight: 700;
        line-height: 44px;
        box-shadow: 0 6px 16px rgba(255, 126, 179, .4);
    }

    .purchase-sheet-shade {
        display: none;
        position: fixed !important;
        inset: 0;
        /* 必须盖过 .navbar-acg 的 z-index: 999999 */
        z-index: 1000000;
        background: rgba(43, 35, 48, .45);
        pointer-events: none;
    }

    .purchase-controls {
        display: none;
        position: fixed !important;
        z-index: 1000001;
        top: 12px;
        right: 12px !important;
        bottom: 0;
        left: 12px !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        max-height: calc(100% - 12px) !important;
        flex-direction: column;
        gap: 14px;
        margin: 0;
        padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: #fff;
        border: 0;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -8px 32px rgba(43, 35, 48, .16);
        box-sizing: border-box;
        visibility: hidden;
        pointer-events: none;
        transform: none;
    }

    html.purchase-sheet-open .purchase-sheet-shade,
    body.purchase-sheet-open .purchase-sheet-shade {
        display: block;
        pointer-events: auto;
    }

    html.purchase-sheet-open .purchase-controls,
    body.purchase-sheet-open .purchase-controls {
        display: flex;
        visibility: visible;
        pointer-events: auto;
        transform: none;
    }

    html.purchase-sheet-open,
    body.purchase-sheet-open {
        overflow: hidden;
    }

    html.purchase-sheet-open .mobile-purchase-summary,
    body.purchase-sheet-open .mobile-purchase-summary {
        display: none !important;
    }

    .purchase-sheet-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex: 0 0 auto;
        margin: 0;
        padding: 4px 0 12px;
        border-bottom: 1px solid var(--acg-border);
    }

    .purchase-sheet-title {
        font-size: 17px;
        font-weight: 800;
        color: var(--acg-text-strong);
    }

    .purchase-sheet-close {
        appearance: none;
        -webkit-appearance: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        margin: 0;
        padding: 0;
        border: 0 !important;
        border-radius: 50%;
        background: #fff5f9;
        color: var(--acg-text-muted);
        font-size: 22px;
        line-height: 1;
        box-shadow: none;
    }

    .purchase-sheet-close span {
        display: block;
        margin-top: -2px;
    }

    .purchase-sheet-amount {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 8px;
        padding: 14px 16px;
        border: 1px solid var(--acg-border);
        border-radius: 16px;
        background: #fff7fb;
    }

    .mobile-purchase-label,
    .mobile-purchase-stock {
        color: var(--acg-text-muted);
        font-size: 12px;
    }

    .mobile-purchase-price {
        font-size: 22px;
        font-weight: 800;
        background: var(--acg-gradient);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: var(--acg-danger);
    }

    .mobile-purchase-price i,
    .mobile-purchase-price .icon-spin,
    .mobile-purchase-price [class*="fa-"] {
        background: none;
        -webkit-text-fill-color: currentColor;
        color: var(--acg-primary);
    }

    .purchase-controls .form-label {
        margin-bottom: 6px;
        color: var(--acg-text-strong);
        font-size: 13px;
        font-weight: 600;
    }

    .purchase-controls > * {
        min-width: 0;
        max-width: 100%;
    }

    .purchase-controls .form-control {
        min-height: 44px;
        max-width: 100%;
        font-size: 16px;
    }

    .purchase-controls .optional-card {
        width: 100%;
        min-height: 44px;
        justify-content: center;
    }

    .purchase-quantity {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    .purchase-captcha {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    .input-group.qty-group {
        width: 168px;
        gap: 8px;
        padding: 4px;
        box-shadow: none;
        box-sizing: border-box;
    }

    .input-group.qty-group > button {
        appearance: none;
        -webkit-appearance: none;
        width: 40px;
        height: 40px;
        border: 0;
        flex: 0 0 auto;
    }

    .purchase-captcha .captcha-group,
    .captcha-group {
        display: flex;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        flex: none;
    }

    .purchase-captcha .captcha-input {
        min-height: 44px;
        flex: 1 1 auto;
    }

    .purchase-captcha .captcha-group .input-group-append {
        display: flex;
        flex: 0 0 auto;
    }

    /* 验证码原图 50x24，用 fill 完整显示，不裁切 */
    .purchase-captcha .captcha-img {
        width: 96px;
        min-width: 96px;
        max-width: none;
        min-height: 44px;
        object-fit: fill;
        border-radius: 0 12px 12px 0;
    }

    .cash-pay {
        padding: 14px !important;
        border-radius: 16px;
        background: #fff7fb;
        border: 1px solid var(--acg-border);
        box-shadow: none;
    }

    .cash-pay .form-label {
        margin-left: 0;
        font-size: 14px;
    }

    .cash-pay .pay-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        padding-bottom: 2px;
    }

    .cash-pay .pay-list .pay {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-width: 0;
        min-height: 48px;
        padding: 8px 10px;
        border-radius: 12px;
        box-shadow: none;
        border: 1px solid #fbd9e8;
        background: #fff;
    }

    .cash-pay .pay-list .pay img {
        width: 22px;
        height: 22px;
    }

    .cash-pay .pay-list .pay span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 13px;
    }
}

@media (max-width: 420px) {
    .user-login-box .btn span,
    #userDropdown > div {
        display: none !important;
    }

    .user-login-box .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        min-height: 40px;
        padding: 0;
    }

    .user-login-box .nav-icon {
        margin-right: 0 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}