body {
    background-color: #ededed;
}


.page-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.page-main {
    flex: 1;
    margin: 0;
    padding: 0;
}



.product-card {
    width: 100%;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: #ffffff;
    border: 1px #eeeeee solid;
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
    overflow: hidden;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}


.btn-red-transform {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 6px 1rem;
    border: 1px solid var(--color-primary);
    border-radius: .25rem;
    background: linear-gradient(to top,var(--color-primary) 50%, var(--color-yellow) 50%);
    background-size: 100% 200%;
    background-position: bottom;
    transition: all .15s cubic-bezier(.4,0,.2,1);
    font-size: 1.125rem;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    cursor: pointer;
}

.btn-red-transform:hover {
    background-position: top;
    color: var(--color-primary);
}

.btn-red-transform:active {
    transform: scale(1);
}

.btn-red-transform:disabled {
    cursor: not-allowed;
    border-color: #d1d5db;
    background: #d1d5db;
    color: #fff;
}

.btn-red-transform:disabled:active {
    transform: scale(1);
}

/* 
3. MudBlazor 默认：
         手机（Mobile）：xs 0–599px
         平板（Tablet）：sm 600–959px，
                         md 960–1279px
        桌面（Desktop）：lg 1280–1919px，
                         xl 1920px 及以上

4. 纯 CSS（配合 MudBlazor 使用）
        手机 (<= 599px)         xs
            @media (max-width: 599px) {}

        平板 (600px ~ 1279px)   sm、md
            @media (min-width: 600px) and (max-width: 1279px) {}

        桌面 (>= 1280px)        lg、xl
            @media (min-width: 1280px) {}

*/

/* 超小屏幕 (xs): 0px - 599px */
@media (max-width: 599px) {
    .XsOnly-hidden {
        display: none;
    }
}

/* 小屏幕 (sm): 600px - 959px */
@media (max-width: 959px) {
    .SmAndDown-hidden {
        display: none;
    }
}

@media (min-width: 600px) {
    .SmAndUp-hidden {
        display: none;
    }
}

/* 中屏幕 (md): 960px - 1279px */
@media (max-width: 1279px) {
    .MdAndDown-hidden {
        display: none;
    }
}

@media (min-width: 960px) {
    .MdAndUp-hidden {
        display: none;
    }
}

/* 大屏幕 (lg): 1280px - 1919px */
@media (max-width: 1919px) {
    .LgAndDown-hidden {
        display: none;
    }
}

@media (min-width: 1280px) {
    .LgAndUp-hidden {
        display: none;
    }
}

/* 超大屏幕 (xl): 1920px 及以上 */
@media (max-width: 1920px) {
    .XlAndDown-hidden {
        display: none;
    }
}

@media (min-width: 1920px) {
    .XlAndUp-hidden {
        display: none;
    }
}

/* 额外添加：仅在某些断点显示 */
@media (min-width: 600px) and (max-width: 959px) {
    .SmOnly-hidden {
        display: none;
    }
}

@media (min-width: 960px) and (max-width: 1279px) {
    .MdOnly-hidden {
        display: none;
    }
}

@media (min-width: 1280px) and (max-width: 1919px) {
    .LgOnly-hidden {
        display: none;
    }
}



/* 大屏幕（lg+） 显示5列 */
@media (min-width: 1280px) {
}