.img-icon {
    width: 30px !important;
    height: 30px !important;
    max-width: none !important;
    max-height: none !important;
    display: inline-block !important;
    object-fit: contain !important;
    vertical-align: middle;
    -webkit-border-radius: 0 !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    mask-image: none !important;
}

.img-icon,
.img-icon-wrapper,
a > span,
a > span.img-icon-wrap {
    overflow: visible !important;
    border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
}

a span > img.img-icon,
.img-icon {
    border-radius: 0 !important;
}

.menu_cat_droapdown {
    height: 502px;
}

    .menu_cat_droapdown li a {
        justify-content: normal;
    }

.sub-li-img-icon {
    width: 22px !important;
    height: 22px !important;
}

/* .menu_cat_item > li.no-after > a::after {
            content: none !important;
            display: none !important;
        }*/

 
/* 更强覆盖，保证图片不会被全局 .w-100 或 img{width:100%} 影响 */
.recommended_brands .brand_img_wrap {
    width: 100%;
    height: 140px; /* 卡片高度，按需调整 */
    display: flex;
    align-items: center;
    justify-content: center;
    /*background: #f7f7f7;*/
    position: relative;
    overflow: hidden;
}

  /* 关键：用 max- 而不是强制 width:100%，并用 !important 覆盖全局样式 */
  .recommended_brands .brand_img_wrap img{
    max-width:100% !important;
    max-height:100% !important;
    width:auto !important;
    height:auto !important;
    display:block !important;
    object-fit:contain; /* 辅助；现代浏览器适用 */
  }

  /* 遮罩层位置保持不变（确保绝对定位在容器内） */
  .recommended_brands .brand_overlay{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    background:rgba(0,0,0,0.22);
    color:#fff;
    transition:opacity .18s;
  }
 
  /* 其余样式略（保留之前的标题与 grid 样式） */
  .section_heading--rail{ display:flex; align-items:center;  }
  .section_heading--rail::before{ content:""; width:6px; height:28px; background:#e53935; border-radius:2px; flex:0 0 auto; }
  .section_heading--rail h2{ margin:0; font-size:26px; font-weight:700; color:#222; }

  .brands_grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; align-items:start; }
  .brand_card{ background:#fff; border-radius:8px; overflow:hidden; box-shadow:0 6px 18px rgba(0,0,0,.06); transition:transform .18s,.box-shadow .18s; }
  .brand_card:hover{ transform:translateY(-6px); box-shadow:0 12px 28px rgba(0,0,0,.12); }
  @media (max-width:1400px){ .brands_grid{ grid-template-columns:repeat(4,1fr); } }
  @media (max-width:992px){ .brands_grid{ grid-template-columns:repeat(3,1fr); } }
  @media (max-width:768px){ .brands_grid{ grid-template-columns:repeat(2,1fr); } }



/* 场景推荐整体 */
.scene-section {
    margin-top: 40px;
}

/* 标题和 Tabs */
.scene-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.section_heading--rail h2 {
    font-size: 22px;
    font-weight: bold;
    position: relative;
    padding-left: 5px;
}

    /*.section_heading--rail h2::before {
        content: '';
        position: absolute;
        left: 0;
        top: 4px;
        width: 4px;
        height: 80%;
        background-color: red;
        border-radius: 2px;
    }*/

.scene-tabs {
    display: flex;
    gap: 10px;
}

    .scene-tabs .tab-btn {
        transition: background-color .18s ease, color .18s ease, transform .12s ease;
        padding: 6px 14px;
        background: #f5f5f5;
        border: none;
        cursor: pointer;
        border-radius: 4px;
        font-size: 14px;
    }
        .scene-tabs .tab-btn:focus {
            
            outline-offset: 2px;
            transform: translateY(-1px);
        }

        .scene-tabs .tab-btn.active {
            background: #ac010a;
            color: white;
        }

/* 外层内容区域，加白色卡片风格 */
.scene-content {
    display: flex;
    gap: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
    padding: 20px;
}

/* 左侧固定宣传图 */
.scene-left img {
    width: 305px;
    height: 406px;
    object-fit: cover;
    border-radius: 6px;
}

/* 右侧占满剩余空间，等高布局 */
.scene-right {
    flex: 1;
    display: flex;
}

/* grid 高度与左侧图一致，2 行 × 3 列 */
.scene-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 15px;
    width: 100%;
    height: 406px; /* 与左侧对齐 */
}

/* 每个小卡片独立，内部纵向排列 */
.scene-item {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
}

    /* 小图高度根据总高度自动分摊 */
    .scene-item img {
        width: 100%;
        height: 70%; /* 图片占卡片大部分高度 */
        object-fit: cover;
    }

    /* 文字区域 */
    .scene-item h4 {
        font-size: 14px;
        font-weight: bold;
        margin: 6px 8px 0 8px;
    }

    .scene-item p {
        font-size: 12px;
        color: #777;
        margin: 2px 8px 8px 8px;
    }





.progress-wrap svg.progress-circle path {
    stroke: #ac010a!important;
}
.progress-wrap::after {
    color: #ac010a !important;
}



/* —— loader 样式 —— */
#scene-left-img-container {
    position: relative;
    min-height: 260px; /* 必要时根据实际调整，避免空白高度过小 */
    overflow: hidden;
}

    /* 覆盖层 */
    #scene-left-img-container .loader-overlay {
        position: absolute;
        inset: 0; /* top:0; right:0; bottom:0; left:0; */
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255,255,255,0.75);
        z-index: 9999;
        pointer-events: auto;
    }

        /* 转圈 spinner */
        #scene-left-img-container .loader-overlay .spinner {
            width: 48px;
            height: 48px;
            border: 5px solid rgba(0,0,0,0.12);
            border-top-color: rgba(0,0,0,0.7);
            border-radius: 50%;
            animation: loader-spin 1s linear infinite;
        }

        /* 屏幕阅读器可见文本 */
        #scene-left-img-container .loader-overlay .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            overflow: hidden;
            clip: rect(0,0,0,0);
        }

@keyframes loader-spin {
    to {
        transform: rotate(360deg);
    }
}

.scene-error {
    padding: 18px;
    text-align: center;
    color: #666;
}