.main-header{}
.main-header-left{flex:1;min-width:300px;display:flex;align-items:center;gap:20px;padding:0 0}
.main-header-left h1{margin:0;text-decoration:none}
.rating-box{display:flex;align-items:center;gap:10px}
.rating-stars{display:flex;gap:5px}
.rating-stars img{width:20px;height:20px}
.rating-count{text-decoration:underline}
.main-header-right{flex:0 0 auto;display: flex;gap: 20px;}
.search-container{position:relative;width:100%}
.search-input{width:100%;padding:16px 40px 16px 15px;border:1px solid #090909;border-radius:6px;outline:none;transition:none}
.search-input:focus{border:1px solid #090909;box-shadow:none}
.search-btn{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;padding:5px;cursor:pointer}
.search-btn .pod-icon{width:20px;height:20px;background-color: var(--icon-color, #6C6C6C);
	mask: url('/images/icon/icon-02.svg') no-repeat center;
	-webkit-mask: url('/images/icon/icon-02.svg') no-repeat center;
}

.search-btn:hover img{opacity:1}
.filter-section{max-width:1840px;margin:0 auto;padding:20px 0;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e0e0e0}
.filter-left{flex:1;display:flex;gap:30px;flex-wrap:wrap}
.filter-item{display:flex;align-items:center;gap:15px;flex-wrap: wrap;}
.filter-options{display:flex;gap:10px;flex-wrap:wrap}
.filter-option{position: relative;font-size:14px;color:#a8a8a8;text-decoration:none;padding:8px 15px;border:1px solid #0A0C29;border-radius:8px;transition:all 0.3s ease}
.filter-option .close-btn {
position: absolute;
right: -6px;
top:-6px;width: 16px;height: 16px;
font-size: 14px;
cursor: pointer;background:#fff url('../images/close.png') no-repeat center center/cover;
border:1px solid #0A0C29;border-radius: 50%;
}
.filter-option:hover{color:#090909;border-color:#090909}
.filter-option.active{color:#090909;border-color:#090909}
.filter-right{display:flex;align-items:center;gap:20px}
.filter-btn{padding:8px 20px;font-size:14px;display:flex;display: none;align-items:center;gap:8px;text-transform:uppercase}
.filter-btn-icon{width:36px;height:36px}
.filter-btn2{}

.Resultsfor{padding: 32px 32px 0;}
.ResultsforList{}


@media screen and (min-width:1440px){
    .search-container{width:340px}
}

@media screen and (max-width:1024px){
    .main-header{padding:0 0}
    .filter-section{padding:20px 0}
}

@media screen and (max-width:768px){
    .main-header-left,.main-header-right{flex:0 0 100%}
    .main-header-left{flex-direction:column;align-items:flex-start;gap:10px}
    .rating-box{margin-bottom:15px}
    .search-container{max-width:100%}
    .filter-section{flex-direction:column;gap:15px}
    .filter-left{flex-direction:column;width:100%}
    .filter-item{flex-direction:column;align-items:flex-start}
    .filter-options{flex-wrap:wrap}
    .filter-right{width:100%;justify-content:space-between}
    .filter-btn-icon{width: 28px;height: 28px;}
}
.leftneav{width: 342px;}
.leftneav-list-item-list {
    padding: 0;display: flex;flex-direction: column;gap: 8px;
}

.leftneav-list-item-list a,
.leftneav-list-item-list .filter-checkbox {
    width: 100%;word-break: break-word;white-space: normal;
}

.leftneav-list-item-list .filter-checkbox label {
    width: calc(100% - 26px);padding: 8px 0;line-height: 1.4;
}

.filter-checkbox {
    display: flex;align-items: center;gap: 10px;margin-bottom: 0;
}

.filter-checkbox input[type="checkbox"] {
    width: 16px;height: 16px;cursor: pointer;accent-color: #000;border: 1px solid #000;
}

.filter-checkbox input[type="checkbox"]:checked {
    background-color: #000;border-color: #000;
}

.filter-checkbox label {
    cursor: pointer;margin: 0;padding: 8px 0;
}

.color-swatches {
    display: flex;flex-wrap: wrap;gap: 12px;padding: 8px 0;
}
.color-swatches .color-swatch:nth-of-type(n+4){display: none;}

.color-swatch {
    position: relative;width:24px;height: 24px;border-radius: 50%;cursor: pointer;transition: all 0.3s ease;
}

/* .color-swatch:hover {
    transform: scale(1.1);
}

.color-swatch::after {
    content: '';position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 24px;height: 24px;border-radius: 50%;background-color: inherit;
} */

.color-swatch.selected::after {
    border: 2px solid #000;box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000;
}

/* 使用JavaScript动态设置颜色 */
.color-swatch label {
    background-color: var(--swatch-color);
}

@media screen and (max-width:1920px){
    .filter-section{margin: 0 32px;}
    
}
.Xbanner-list-item{display: flex;flex-direction: column;}
.Xbanner-list-item-txt{width: 100%;}
.Xbanner-list-item-txt-price{width: 100%;margin-top: auto;padding-top: 8px;}
.Xbanner-list-item-txt-tit{width: 100%;display: block;}
.leftneav-list-item-list{width: 100%;position: relative;}
.Xbanner-list-item-txt-color{padding:20px 0 0;display: flex;justify-content: space-between;}
.leftneav-list-item-list-more{cursor: pointer;display: inline-block;}
/* .leftneav-list-item-list-more{position: absolute;right:4px;top:22px;} */
.Xbanner-list-item-txt-color .color-swatch:nth-of-type(n+6){display: none;}



.class-content2{display: flex;justify-content: space-between;gap:32px;margin: 24px 32px;}
.leftneav2{width: 25%;}
.rightlist2{width: 75%;}
.filtersShowdiv .filter-left{display: none;}
.leftneav-list-btn{display: none;}
.filter-btn2{display: none;padding: 14px;}

.Xbanner-list-item-txt-xing2{display: flex;}




@media screen and (max-width:1024px){
    .leftneav2{display: none;}
    .rightlist2{width: 100%;}
    .rightlist2 .XbannerClass{padding:0;}
    .filter-left{display: none;}
    .filter-btn-icon{width: 24px;height: 24px;}
    .filter-right{justify-content: space-around;width: 100%;}
    .leftneav2{position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: #fff;z-index: 251;overflow-y: auto;}
    .filtersShowdiv{padding: 24px 24px 0;}
    .filter-values-selection-count{display: inline-block;height: 20px;line-height: 20px;    padding: 0 7px;background: rgba(0,0,0,0.2);border-radius: 20px;margin-left: 6px;}
    .leftneav-tit{display: none;}
    .filtersShowdiv{position: relative;}
    .filtersShowdiv .filter-left{display: block;position: relative;}
    .filter-item-x{position: absolute;top: 0;right: 0;}
    .leftneav-list{margin: 24px 0 0;border-top: 1px solid #d0d1d2;}
    .filter-btn2{display: block;}
    .leftneav-list-btn{display: flex;justify-content: space-between;gap: 24px;padding: 24px 0;position:sticky;bottom: 0;left: 0;width: 100%;background: #fff;}
    .leftneav-list-btn >*{width: 100%;height: 24px;line-height: 24px;text-align: center;}
}
@media screen and (max-width:768px){
    .rightlist2 .XbannerClass .Xbanner-list{gap:4%;}
    .rightlist2 .XbannerClass .Xbanner-list-item{width: 48%;}
}
@media screen and (max-width:480px){
  .class-content2{margin: 24px;}
}

/* .page-select-wrapper {
    align-items: center;border: 1px solid #090909;border-radius:8px;overflow: hidden;
}

.page-select {
    padding:0 12px;line-height: 46px;height: 46px;border: none;font-size: 14px;background-color: #fff;
}

.page-select-label {
    font-size: 14px;color: #666;
} */

/* .page-select-dropdown {
    position: absolute;top: 100%;left: 0;right: 0;background-color: #fff;border: 1px solid #ddd;border-top: none;border-radius: 0 0 4px 4px;box-shadow: 0 2px 8px rgba(0,0,0,0.1);z-index: 1000;display: none;max-height: 200px;overflow-y: auto;
} */