.mb-3, .my-3 {
    margin-bottom: .5rem !important;
}
.main-flex-wrapper {
    gap: 5px !important;
    margin-bottom: .5rem !important;
}
.avatar-sm {
 /* width: 50px;        /* 固定显示宽度 */
 /* height: 80px;        固定显示高度 */
  /*object-fit: contain;/* 保持比例，空白以背景色填充 */
}

.right-content .table.table-centered tbody tr:hover,
.right-content .product-item:hover {
  background-color: #f0f0f0;  /* 你想要的深浅都可以改这个颜色 */
}

@media (min-width: 768px) {
    .main-flex-wrapper { display: flex; gap:15px; }
    .left-sidebar { width:250px; background-color:#f8f9fa; border-radius:6px; overflow-y:auto; padding:15px; }
    .right-content { flex:1; background-color:#ffffff; border-radius:6px; padding:15px; /* 取消 overflow-y 和 height */ }
}

/* 移动端布局 */
@media (max-width: 767.98px) {
    .main-flex-wrapper,
    .left-sidebar,
    .right-content {
        display:block!important;
        width:100%!important;
        height:auto!important;
        padding:0!important;
        overflow:unset!important;
        background:none!important;
    }
            .category { 
    padding:0 0px; 
    margin-left: 2px;
    margin-right: 2px;
    }
    
    .category-pane { 
    padding:0 0px; 
    margin-left: 2px;
    margin-right: 2px;
    }
    .text-dark {
    color: #ffffff !important;
}

    .avatar-sm {
     height: 3.5rem; 
    width: 3.5rem;
     object-fit: contain;  /*如果你想在固定框里让图片完整显示 */
     }
    
html, body {
  overflow-x: hidden;
}

}

.left-sidebar h5 {
    margin-bottom:10px;
    font-weight:bold;
    text-align:center;
}

.list-group-item.active {
    background-color:#17a2b8;
    color:#fff;
    border-color:#17a2b8;
}

.p-3 {
    padding: .3rem !important;
}
.mr-3, .mx-3 {
    margin-right: 1rem !important;
}