body {
    background-color: #ededed;
}

/* -------- product -------- */
.f-product-card {
    position:relative;
    
    display: flex;
    flex-direction: column;

    height: 100%;
    width: 100%;

    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: #ffffff;
    border: 1px #eeeeee solid;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    overflow: hidden;
}
.f-product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
.f-product-card .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}


/* -------- category -------- */
.f-category-card {position:relative; width: 120px;}
.f-category-card img {transition: transform .3s ease;}
.f-category-card:hover img {transform: scale(1.05);}

/* -------- article -------- */
.f-article-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 2px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}

.f-article-card:hover {
    transform: translateY(-5px);
}
 

/* ==================== Checkout 页 （多处使用）====================  */
.selector-item {
    border-radius: 6px;
    padding: 10px;
    cursor: pointer;
}

.selector-item:hover {
    background-color: #f7f7f7;
}

.selector-item.active {
    background-color: #efefef;
}


/* ==================== ProductDetail 页（多处使用） ====================  */
.quantity-decrease {
    margin-left: 10px;
    padding: 8px;
    background-color: #dbdbdb
}

.quantity-increase {
    padding: 8px;
    background-color: #dbdbdb
}

.quantity-input {
    width: 50px;
    padding: 8px;
    border: 0;
    outline: none;
    text-align: center;
    background-color: transparent;
}





/* 
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列 */
/* 大屏幕（lg+） 显示5列 */
@media (min-width: 1280px) {
    .responsive-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 5px !important;
        padding: 0;
        margin: 0 auto;
    }

    .lg-5cols {
        flex-grow: 0;
        max-width: calc(20% - 5px) !important; /* 限制最大宽度 */
        flex-basis: calc(20% - 5px) !important; /* 考虑到间隔 */
        width: 100%;
    }
}