.list_attribute{
    list-style:none;
    margin:10px 0;
    padding:0;
    display: flex;
    flex-wrap: wrap;
    gap:10px;
}

/* 一行固定6列 修复宽度挤压错位 */
.list_attribute li{
    flex: 1 0 calc(16.6% - 10px);
    max-width: calc(16.6% - 10px);
    min-width: 130px; /* 兜底最小宽度，防止文字挤压换行 */
    border: 1px solid #ddd;
    background:#fff;
    cursor: pointer;
    padding:6px 8px;
    border-radius:6px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap:8px;
    height: auto;
    box-sizing: border-box;
}

/* 选中高亮红色边框 */
.list_attribute li.attr_selected{
    border: 2px solid #ff4400;
}
.list_attribute li:hover{
    border-color:#ff9468;
    box-shadow: 0 1px 4px rgba(255,68,0,0.15);
}

/* 图片容器：45px正方形，靠左，无图自动隐藏 */
.attr-img-box{
    width:45px;
    height:45px;
    flex-shrink: 0;
    overflow:hidden;
    aspect-ratio: 1 / 1;
}
.attr-img-box:empty {
    display: none;
}
.attr-img-box img{
    width:100%;
    height:100%;
    object-fit: cover;
    display:block;
    border-radius:3px;
}

/* 文字区域 */
.attr-name{
    font-size:12px;
    color:#333;
    line-height:1.3;
    flex:1;
}
.tips{
    padding:4px 0;
    clear:both;
    font-size:13px;
}
.green{color:#096;}
.red{color:#f30;}
.valuestyle{font-weight:bold;color:#c40000;padding-left:6px;}

/* 平板：宽度不足1200px自动变为3列，避免挤压 */
@media(max-width:1199px){
    .list_attribute li{
        flex: 1 0 calc(32% - 10px);
        max-width: calc(32% - 10px);
    }
}

/* 移动端自动变回2列 */
@media(max-width:768px){
    .list_attribute li{
        flex: 1 0 calc(48% - 10px);
        max-width: calc(48% - 10px);
        min-width: unset;
    }
    .attr-img-box{
        width:36px;
        height:36px;
    }
    .attr-name{
        font-size:11px;
    }
}


/* ========== 左侧竖排缩略图+箭头布局（不变，对齐修复版） ========== */
@media (min-width: 768px) {
    /* 外层左右分栏容器 对齐修复 */
    .gallery-wrap {
        display: flex !important;
        flex-direction: row !important;
        gap: 14px !important;
        align-items: flex-start !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 缩略图+箭头整体容器 垂直居中对齐 */
    .thumbs-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
        width: 78px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 上下箭头修正：宽高、居中、无偏移 */
    .thumb-arrow-left,
    .thumb-arrow-right {
        display: flex !important;
        visibility: visible !important;
        width: 30px !important;
        height: 30px !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 中间缩略图容器 固定宽度、垂直排列，消除左右溢出错位 */
    .left-thumbs {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        max-height: calc(75px * 6 + 20px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        max-width: 75px !important;
        width: 75px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 单张缩略图统一尺寸，无外边距偏移 */
    .left-thumbs .thumb {
        width: 75px !important;
        height: auto !important;
        flex-shrink: 0 !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* 右侧主图自适应填满剩余区域 */
    .imgmodal {
        flex: 1 !important;
        width: 0 !important;
    }
}

/* 移动端恢复横向布局 */
@media (max-width: 767px) {
    .gallery-wrap {
        flex-direction: column !important;
    }
    .thumbs-container {
        flex-direction: row !important;
        width: 100% !important;
    }
    .left-thumbs {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        max-height: unset !important;
        max-width: 100% !important;
        width: 100% !important;
        display: flex;
        gap:8px;
    }
    .left-thumbs .thumb {
        width: 80px;
        flex-shrink:0;
    }
}