@keyframes slideUp {
    from { opacity: 0; transform: translateY(50px); }
    to { opacity: 1; transform: translateY(0); }
}
.da { width: 100%; background:#F4EFE9; }
.wrap{width:1200px;margin:0 auto;padding:40px 20px;display:flex;gap:35px;}

/* ========== 左侧筛选栏 ========== */
.left-box{width:240px;}
.left-box{font-size:14px;color:#666;margin-bottom:25px;line-height:1.6;}

.title-tip{font-size:24px;color:#666;margin-bottom:25px;line-height:1.6; border-bottom:3px solid #2F3060; font-weight:bold}
.filter-item{margin-bottom:28px;}
.filter-item h3{
    font-size:17px;
    color:#222;
    padding-bottom:10px;
    cursor:pointer;
    display:flex;
    justify-content:space-between;
    align-items:center;
    transition: all 0.3s ease;
    position: relative;
}
.filter-item h3:hover{
    color:#BA7656;
    padding-left: 5px;
}
.filter-item h3 i{
    font-style:normal;
    color:#999;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-block;
    font-size: 14px;
}
.filter-item h3:hover i{
    transform: translateX(3px) scale(1.1);
    color: #BA7656;
}
.filter-ul{display:none;list-style:none;margin-top: 8px;}
.filter-ul.open{display:block;}
.filter-ul li{
    padding:10px 0 10px 8px;
    font-size:15px;
    color:#555;
    cursor:pointer;
    transition:all 0.2s;
    border-bottom: 1px solid #ddd;
}
.filter-ul li:last-child{
    border-bottom: none;
}
.filter-ul li:hover{
    color:#BA7656;
    padding-left:12px;
    background:#f5f0ea;
}
.filter-ul li.active{
    color:#BA7656 !important;
    font-weight:500;
    border-left:3px solid #BA7656;
    padding-left:12px;
    background:#f5f0ea;
    border-bottom: 1px solid #ddd;
}
.filter-ul li.active:last-child{
    border-bottom: none;
}

/* ========== 右侧区域 ========== */
.right-box{flex:1;position:relative;}
.sort-bar{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}
.sort-icons{
    display: flex;
    gap: 8px;
    align-items: center;
}
.sort-icons a{
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    transition: all 0.3s ease;
    background: #fff;
    border: 1px solid #e0d8d0;
}
.sort-icons a span.icon{
    font-size: 22px;
    font-weight: bold;
    color: #888;
    transition: all 0.3s ease;
}
.sort-icons a.active{
    background: #BA7656;
    border-color: #BA7656;
}
.sort-icons a.active span.icon{
    color: #fff;
}
.sort-icons a:hover:not(.active){
    background: #f5f0ea;
    border-color: #BA7656;
    transform: translateY(-2px);
}
.sort-icons a:hover:not(.active) span.icon{
    color: #BA7656;
}

.tag-bar{margin-bottom:30px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-height:42px;}
.tag-item{display:flex;align-items:center;background:#fff;border:1px solid #c9c2b6;padding:6px 14px;border-radius:30px;transition:all 0.2s;}
.tag-item span{margin-right:8px;font-size:14px;color:#333;}
.tag-item .del-x{width:20px;height:20px;border:1px solid #999;border-radius:50%;text-align:center;line-height:18px;font-size:13px;cursor:pointer;transition:all 0.3s;color:#777;background:#fff;}
.tag-item .del-x:hover{background:#BA7656;color:#fff;transform:rotate(90deg);border-color:#BA7656;}

/* ========== 卡片样式 - 统一图片尺寸 ========== */
.card-wrap{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}
.card-item{
    background:#fff;
    padding:20px;
    border-radius:12px;
    transition:all 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    cursor:pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    display: flex;
    flex-direction: column;
}
.card-item:hover{
    background:#BA7656 !important;
    color:#fff !important;
    transform: translateY(-6px);
    box-shadow: 0 15px 30px rgba(186,118,86,0.2);
}

/* 统一图片容器尺寸 - 固定宽高比 */
.card-item .img-box{
    width: 100%;
    height: 380px;
    overflow: hidden;
    margin-bottom:18px;
    border-radius:8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f0ea;
}

/* 图片统一尺寸：宽度100%，高度100%，覆盖裁剪 */
.card-item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition:transform 0.5s ease;
    display: block;
}
.card-item:hover img{
    transform:scale(1.05);
}
.card-item h4{
    font-size:18px;
    color:#222;
    margin-bottom:10px;
    transition:0.3s;
    font-weight: 600;
}
.card-item .desc{
    font-size:13px;
    color:#666;
    line-height:1.6;
    margin-bottom:12px;
    transition:0.3s;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.card-item .info{
    font-size:12px;
    color:#888;
    margin-bottom:14px;
    transition:0.3s;
}
.card-item .price{
    font-size:24px;
    color:#945c3e;
    margin-bottom:16px;
    transition:0.3s;
    font-weight:600;
}
.card-item button{
    padding:8px 28px;
    border:1px solid #945c3e;
    background:#fff;
    color:#945c3e;
    border-radius:40px;
    cursor:pointer;
    transition:0.3s;
    font-size:14px;
    width: fit-content;
}
.card-item:hover h4,
.card-item:hover .desc,
.card-item:hover .info,
.card-item:hover .price{
    color:#fff !important;
}
.card-item:hover button{
    background:#fff;
    color:#BA7656;
    border-color:#fff;
    transform: scale(1.02);
}

/* 空状态 */
.empty-state{
    grid-column: span 2;
    text-align:center;
    padding:50px;
    background:#fff;
    border-radius:12px;
    font-size:16px;
    color:#999;
}

/* 响应式 */
@media (max-width: 1250px){
    .wrap{width:95%;}
    .card-wrap{
        grid-template-columns: 1fr;
        gap: 25px;
    }
    .card-item .img-box{
        height: 320px;
    }
    .empty-state{grid-column:span 1;}
}

@media (max-width: 768px){
    .wrap{
        flex-direction: column;
        gap: 30px;
    }
    .left-box{
        width: 100%;
    }
    .card-item .img-box{
        height: 260px;
    }
}




.banner-overlay {
    position: absolute; top:0; left:0; width:100%; height:100%;
    display: flex; flex-direction:column; justify-content:center; align-items:center; text-align:center;
}
.banner-title {
    font-size: 38px; font-weight:normal; color:#fff; margin-bottom:10px;
    opacity:0; animation: slideUp 2.8s ease forwards;
}
.banner-subtitle {
    font-size:15px; color:#fff; opacity:0; animation: slideUp 2.8s ease 0.5s forwards;
}
/* 分页样式（不破坏你原有CSS） */
.pagination{display:flex;justify-content:center;align-items:center;gap:8px;margin:40px 0 20px;flex-wrap:wrap;}
.pagination a{display:inline-block;padding:8px 14px;border:1px solid #ddd;border-radius:4px;background:#fff;color:#333;text-decoration:none;transition:0.2s;}
.pagination a:hover{border-color:#BA7656;background:#BA7656;color:#fff;}
.pagination .active{border-color:#BA7656;background:#BA7656;color:#fff;}
.pagination .disabled{pointer-events:none;color:#ccc;border-color:#eee;}
.dazi {
    font-size: 16px; 
    font-weight: bold; 
    color: #000000;
    text-align: left;
    transition: all 0.3s ease;
}
.filter-item {
   border-bottom:1px solid #D3D3D3; 
   cursor: pointer;
   transition: all 0.3s ease;
}
/* 默认图标黑色靠行内样式，hover强制变色 */
.filter-item:hover .dazi,
.filter-item:hover .dazi i {
    color: #BA7656 !important;
}



*{
    -webkit-tap-highlight-color: rgba(0,0,0,0);/*全局去除Safari点击灰底*/
    box-sizing:border-box;
}
.news-banner {
    width:100%; height:600px;
    background:url("<?=$zp1?>") center/cover no-repeat;
    position:relative;
}

/* 管理按钮 红色背景 */
.manage-btn{
    background:#ff0000; 
    color:#fff; 
    border:none; 
    padding:6px 12px;
    border-radius:4px; 
    cursor:pointer; 
    font-size:14px; 
    margin-top:10px;
}

/* 弹窗 */
.modal-overlay{
    position:fixed; left:0; top:0; width:100%; height:100%;
    background:rgba(0,0,0,0.5); z-index:9999; display:none;
    align-items:center; justify-content:center;
}
.modal-box{
    width:1200px; height:600px; background:#fff; border-radius:8px;
    position:relative; overflow:hidden; display:-webkit-flex;display:flex;
  
}
.modal-left{
    width:250px; background:#f5f5f5; padding:20px; border-right:1px solid #ddd;
}
.modal-right{
    -webkit-flex:1;flex:1; padding:30px; overflow-y:auto;
}
.modal-close{
    position:absolute; right:20px; top:15px; font-size:24px;
    cursor:pointer; color:#666;
}
.menu-item{
    padding:10px; cursor:pointer; border-radius:4px; margin-bottom:6px;
    margin-top:10px;
}
.menu-item.active{
    background:#BA7656; color:#fff;
}

/* 筛选头部h3兼容Safari点击 */
.filter-item h3{
    width:100%;
    padding:8px 0;
    margin:0;
    cursor:pointer;
    display:block;
}
/* 下拉菜单核心兼容Safari动画 */
.filter-ul{
    max-height:0;
    overflow:hidden;
    -webkit-transition:max-height 0.3s ease;
    transition:max-height 0.3s ease;
    will-change:max-height;/*开启Safari硬件加速动画*/
    padding-left:5px;
}
.filter-ul.open{
    max-height:2200px;
}
/* 左右布局修复右侧贴边【重点】 */
.da .wrap{
    display:-webkit-flex;
    display:flex;
    gap:30px;
    padding:0 20px;/*左右留白，彻底解决贴边*/
    width:100%;
}
.left-box{
    -webkit-flex:0 0 230px;
    flex:0 0 230px;
    min-width:0;/*Safari宽度bug修复*/
}
.right-box{
    -webkit-flex:1;
    flex:1;
    min-width:0;
    padding-right:15px;
}
.card-wrap{
    padding:10px 0;
}

/* 编辑样式 */
.editable-text {
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s;
}
.editable-text:hover {
    background: #f5f5f5;
}
.edit-input {
    width: 100%;
    padding: 4px 8px;
    border: 1px solid #BA7656;
    border-radius: 4px;
    font-size:14px;
}

/* 管理员按钮 */
.admin-btn{
    display:inline-flex;
    padding:4px 8px;
    font-size:12px;
    background:#666;
    color:#fff;
    border-radius:4px;
    margin-left:6px;
    cursor:pointer;
    border:none;
}

.admin-btn.red{background:#dc3545}
.admin-btn.red:hover{background:#b02a37; color:#fff;}
/* ==========编辑弹窗【横向双栏CSS】========== */
#editModal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.6);z-index:99999;display:none;align-items:center;justify-content:center}
.editModalBox{width:90%;max-width:850px;background:#fff;border-radius:10px;padding:30px;position:relative;max-height:90vh;overflow-y:auto}
.editModalBox h3{margin-top:0;margin-bottom:25px;font-size:26px}
.editForm{display:grid;grid-template-columns:1fr 1fr;gap:18px 25px;}
.editForm .row{display:flex;flex-direction:column;margin:0}
.editForm label{display:block;margin-bottom:6px;font-weight:bold;font-size:15px}
.editForm input,.editForm select{width:100%;padding:11px;border:1px solid #ddd;border-radius:6px;font-size:15px}
/* 保存按钮跨两列 */
.edit-submit-box{grid-column:1/-1;margin-top:12px}
.edit-submit-box button{padding:12px 30px;background:#007bff;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:15px}

/* 上传弹窗 */
#uploadModal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.6);z-index:99999;display:none;align-items:center;justify-content:center}
.uploadModalBox{width:1200px;background:#fff;border-radius:10px;padding:30px;position:relative}
.progress{width:100%;height:20px;background:#eee;border-radius:10px;margin:15px 0;overflow:hidden}
.progress .bar{height:100%;background:#28a745;width:0%;transition:.3s}
#uploadInput{padding:10px;border:1px solid #ddd;border-radius:6px;width:100%}
.uploadBtn{padding:10px 20px;background:#28a745;color:#fff;border:none;border-radius:6px;cursor:pointer;margin-top:10px}
.uploadClose{position:absolute;right:20px;top:15px;font-size:24px;cursor:pointer}

/* 上传预览条目样式，匹配截图布局 */
.preview-item{
    display:flex;
    align-items:center;
    gap:15px;
    margin-bottom:22px;
    position:relative;
}
.preview-thumb{
    width:110px;
    height:110px;
    position:relative;
}
.preview-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:4px;
}
.preview-thumb .del-x{
    position:absolute;
    right:-8px;
    top:-8px;
    width:26px;
    height:26px;
    background:#f53838;
    color:#fff;
    border-radius:50%;
    text-align:center;
    line-height:26px;
    font-size:15px;
    cursor:pointer;
}
.progress-row{
    flex:1;
    height:12px;
    background:#dddddd;
    border-radius:6px;
    overflow:hidden;
    position:relative;
}
.progress-row .bar{
    height:100%;
    background:#28a745;
    width:0%;
    transition:0.2s;
}
.progress-percent{
    position:absolute;
    left:50%;
    top:-35px;
    transform:translateX(-50%);
    font-size:42px;
    color:#28a745;
    font-weight:500;
}






/* 管理按钮 红色背景 */
.manage-btn{
    background:#ff0000; 
    color:#fff; 
    border:none; 
    padding:6px 12px;
    border-radius:4px; 
    cursor:pointer; 
    font-size:14px; 
    margin-top:10px;
}

/* 弹窗 */
.modal-overlay{
    position:fixed; left:0; top:0; width:100%; height:100%;
    background:rgba(0,0,0,0.5); z-index:9999; display:none;
    align-items:center; justify-content:center;
}
.modal-box{
    width:1200px; height:600px; background:#fff; border-radius:8px;
    position:relative; overflow:hidden; display:-webkit-flex;display:flex;
  
}
.modal-left{
    width:250px; background:#f5f5f5; padding:20px; border-right:1px solid #ddd;
}
.modal-right{
    -webkit-flex:1;flex:1; padding:30px; overflow-y:auto;
}
.modal-close{
    position:absolute; right:20px; top:15px; font-size:24px;
    cursor:pointer; color:#666;
}
.menu-item{
    padding:10px; cursor:pointer; border-radius:4px; margin-bottom:6px;
    margin-top:10px;
}
.menu-item.active{
    background:#BA7656; color:#fff;
}

/* 筛选头部h3兼容Safari点击 */
.filter-item h3{
    width:100%;
    padding:8px 0;
    margin:0;
    cursor:pointer;
    display:block;
}
/* 下拉菜单核心兼容Safari动画 */
.filter-ul{
    max-height:0;
    overflow:hidden;
    -webkit-transition:max-height 0.3s ease;
    transition:max-height 0.3s ease;
    will-change:max-height;/*开启Safari硬件加速动画*/
    padding-left:5px;
}
.filter-ul.open{
    max-height:2200px;
}
/* 左右布局修复右侧贴边【重点】 */
.da .wrap{
    display:-webkit-flex;
    display:flex;
    gap:30px;
    padding:0 20px;/*左右留白，彻底解决贴边*/
    width:100%;
}
.left-box{
    -webkit-flex:0 0 230px;
    flex:0 0 230px;
    min-width:0;/*Safari宽度bug修复*/
}
.right-box{
    -webkit-flex:1;
    flex:1;
    min-width:0;
    padding-right:15px;
}
.card-wrap{
    padding:10px 0;
}

/* 编辑样式 */
.editable-text {
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s;
}
.editable-text:hover {
    background: #f5f5f5;
}
.edit-input {
    width: 100%;
    padding: 4px 8px;
    border: 1px solid #BA7656;
    border-radius: 4px;
    font-size:14px;
}

/* 管理员按钮 */
.admin-btn{
    display:inline-flex;
    padding:4px 8px;
    font-size:12px;
    background:#666;
    color:#fff;
    border-radius:4px;
    margin-left:6px;
    cursor:pointer;
    border:none;
}

.admin-btn.red{background:#dc3545}
.admin-btn.red:hover{background:#b02a37; color:#fff;}
/* ==========编辑弹窗【横向双栏CSS】========== */
#editModal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.6);z-index:99999;display:none;align-items:center;justify-content:center}
.editModalBox{width:90%;max-width:850px;background:#fff;border-radius:10px;padding:30px;position:relative;max-height:90vh;overflow-y:auto}
.editModalBox h3{margin-top:0;margin-bottom:25px;font-size:26px}
.editForm{display:grid;grid-template-columns:1fr 1fr;gap:18px 25px;}
.editForm .row{display:flex;flex-direction:column;margin:0}
.editForm label{display:block;margin-bottom:6px;font-weight:bold;font-size:15px}
.editForm input,.editForm select{width:100%;padding:11px;border:1px solid #ddd;border-radius:6px;font-size:15px}
/* 保存按钮跨两列 */
.edit-submit-box{grid-column:1/-1;margin-top:12px}
.edit-submit-box button{padding:12px 30px;background:#007bff;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:15px}

/* 上传弹窗 */
#uploadModal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.6);z-index:99999;display:none;align-items:center;justify-content:center}
.uploadModalBox{width:1200px;background:#fff;border-radius:10px;padding:30px;position:relative}
.progress{width:100%;height:20px;background:#eee;border-radius:10px;margin:15px 0;overflow:hidden}
.progress .bar{height:100%;background:#28a745;width:0%;transition:.3s}
#uploadInput{padding:10px;border:1px solid #ddd;border-radius:6px;width:100%}
.uploadBtn{padding:10px 20px;background:#28a745;color:#fff;border:none;border-radius:6px;cursor:pointer;margin-top:10px}
.uploadClose{position:absolute;right:20px;top:15px;font-size:24px;cursor:pointer}

/* 上传预览条目样式，匹配截图布局 */
.preview-item{
    display:flex;
    align-items:center;
    gap:15px;
    margin-bottom:22px;
    position:relative;
}
.preview-thumb{
    width:110px;
    height:110px;
    position:relative;
}
.preview-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:4px;
}
.preview-thumb .del-x{
    position:absolute;
    right:-8px;
    top:-8px;
    width:26px;
    height:26px;
    background:#f53838;
    color:#fff;
    border-radius:50%;
    text-align:center;
    line-height:26px;
    font-size:15px;
    cursor:pointer;
}
.progress-row{
    flex:1;
    height:12px;
    background:#dddddd;
    border-radius:6px;
    overflow:hidden;
    position:relative;
}
.progress-row .bar{
    height:100%;
    background:#28a745;
    width:0%;
    transition:0.2s;
}
.progress-percent{
    position:absolute;
    left:50%;
    top:-35px;
    transform:translateX(-50%);
    font-size:42px;
    color:#28a745;
    font-weight:500;
}

/* 上传预览条目样式，匹配截图布局 */
.preview-item{
    display:flex;
    align-items:center;
    gap:15px;
    margin-bottom:22px;
    position:relative;
}
.preview-thumb{
    width:110px;
    height:110px;
    position:relative;
}
.preview-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:4px;
}
.preview-thumb .del-x{
    position:absolute;
    right:-8px;
    top:-8px;
    width:26px;
    height:26px;
    background:#f53838;
    color:#fff;
    border-radius:50%;
    text-align:center;
    line-height:26px;
    font-size:15px;
    cursor:pointer;
}
.progress-row{
    flex:1;
    height:12px;
    background:#dddddd;
    border-radius:6px;
    overflow:hidden;
    position:relative;
}
.progress-row .bar{
    height:100%;
    background:#28a745;
    width:0%;
    transition:0.2s;
}
/* 优化百分比：下移、加大字号，不再遮挡进度条 */
.progress-percent{
    position:absolute;
    left:50%;
    top:-32px;
    transform:translateX(-50%);
    font-size:26px;
    color:#28a745;
    font-weight:bold;
    white-space:nowrap;
}