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

    .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: 8px;
        box-shadow: 0 4px 14px rgba(31, 41, 55, .1);
    }

    .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 {
        padding-bottom: calc(285px + env(safe-area-inset-bottom)) !important;
    }

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

    .purchase-controls {
        position: fixed;
        z-index: 1035;
        right: 0;
        bottom: 0;
        left: 0;
        max-height: 48vh;
        gap: 8px;
        padding: 10px 12px max(10px, env(safe-area-inset-bottom));
        overflow-y: auto;
        background: #fff;
        border-top: 1px solid #e5e7eb;
        box-shadow: 0 -8px 22px rgba(31, 41, 55, .12);
    }

    .mobile-purchase-summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .mobile-purchase-summary > div {
        display: flex;
        align-items: baseline;
        gap: 8px;
    }

    .mobile-purchase-label,
    .mobile-purchase-stock {
        color: #6b7280;
        font-size: 12px;
    }

    .mobile-purchase-price {
        color: var(--acg-danger);
        font-size: 20px;
    }

    .purchase-quantity {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .purchase-quantity .form-label,
    .purchase-captcha .form-label {
        margin: 0 !important;
        flex: 0 0 auto;
    }

    .input-group.qty-group {
        width: 156px;
        gap: 8px;
        padding: 2px 4px;
        box-shadow: none;
    }

    .input-group.qty-group > button {
        width: 44px;
        height: 44px;
    }

    .purchase-captcha {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .captcha-group {
        width: min(100%, 220px);
    }

    .cash-pay {
        padding: 8px 0 0 !important;
        border-radius: 0;
        box-shadow: none;
        background: #fff;
    }

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

    .cash-pay .pay-list {
        flex-wrap: nowrap;
        padding-bottom: 2px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .cash-pay .pay-list .pay {
        flex: 0 0 auto;
        box-shadow: none;
    }

    .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 #e5e7eb;
        border-radius: 8px;
    }
}

@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;
    }
}