/* 在style顶部新增品牌变量 */
:root {
    --srr-header-h: var(--srr-siteheader-h, 72px); /* ✅跟随全站 fixed header 高度 */
    --primary: #165DFF;
    /* 主色：专业蓝 */
    --primary-light: #E8F3FF;
    /* 主色浅背景 */
    /* 价格/警告色：调整为稍暗红色，避免刺眼 */
    --text-primary: #1D2129;
    /* 主要文字 */
    --text-secondary: #4E5969;
    /* 次要文字 */
    --border: #E5E6EB;
    /* 边框色 */
    --bg-gray: #F2F3F5;
    /* 灰色背景 */
}

body {
    background: #f7f8fa;
}

/* 整页主体宽度：默认适配 1366 / 1440；大屏再放宽一点 */
.page-wrap {
    margin: 0 auto;
    padding: 16px;
    width: 100%;
    max-width: 1560px;
    /* 原来 1360px → 现在 1280px，左右灰边更明显 */
    /* 1366 / 1440 下左右都会留出 40px 左右的灰色空隙，看起来没那么挤 */
}

/* 大屏（1920 及以上）：容器再放宽一点，两列商品更舒展 */
@media (min-width: 1600px) {
    .page-wrap {
        max-width: 1680px;
        /* 1920 下左右大概各留 210px 灰边 */
    }
}

/* 平板 / 手机：占满宽度，避免整体往右“偏一块” */
@media (max-width: 991.98px) {
    .page-wrap {
        max-width: 100%;
        padding: 8px 12px;
        /* 适当缩小内边距，手机上更紧凑 */
    }
}

.card {
    border-radius: 12px;
    /* 圆角放大，更现代 */
    box-shadow: 0 3px 12px rgba(0, 0, 0, .06);
    /* 阴影加深，增加立体感 */
    border: none;
    /* 去掉默认边框，避免双重线条 */
    padding: 20px;
    /* 增加内边距，内容不贴边（原16px/3px过小） */
    margin-bottom: 24px;
    /* 卡片之间增加间距，避免堆叠 */
    background: #fff;
    /* 明确白色背景，与页面灰色背景区分 */
}
/* ===== 热销榜 Header：不换行 + 不裁切 ===== */
#hotRankCard .d-flex.align-items-center.justify-content-between {
    flex-wrap: nowrap !important;          /* 禁止换行 */
    gap: 8px;
}

#hotRankCard .d-flex.align-items-center.justify-content-between > div:first-child {
    white-space: nowrap;                   /* “热销榜”不换行 */
    flex: 0 0 auto;
}

#hotRankCard .btn-group {
    display: inline-flex;
    flex-wrap: nowrap !important;          /* 按钮组不换行 */
    overflow-x: auto;                      /* 空间不够时水平滚动，不裁切 */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

#hotRankCard .btn-group .btn {
    white-space: nowrap;
    padding: 4px 8px;                      /* 稍微瘦一点，避免被挤掉 */
    font-size: 12px;
    line-height: 1.2;
}

/* 防止 card-body/容器把右侧按钮裁切 */
#hotRankCard, #hotRankCard .card-body {
    overflow: visible !important;
}

/* [在 94 行后新增] ✅ 右侧：外文长文本显示全 + 不裁切 + 可断词 */
.right-col .form-check-label,
#hotRankCard .list-group-item,
#hotRankCard .rank-name,
#hotRankCard .hotrank-name{
    white-space: normal;       /* ✅ 允许换行 */
    overflow: visible;
    text-overflow: clip;
    word-break: break-word;    /* ✅ 外文长单词/组合词可断开 */
}

/* ✅ 右侧 checkbox 尺寸统一（解决大小不一致） */
.right-col .form-check-input{
    width: 14px;
    height: 14px;
}
.filter-bar input {
    height: 50px;
    font-size: 18px;
}

.result-badge {
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 10px;
    background: #eef2ff;
    margin-left: 6px;
}
/* ✅ 清除筛选：做小、做轻（避免抢占空间/字号突兀） */
.filter-bar .filter-clear{
    height:34px;
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:0 10px;
    font-size:14px;
    font-weight:600;
    color:#111;

    background:#fff;
    border:1px solid #e5e7eb;     /* 细边，和整体风格一致 */
    border-radius:10px;
    box-shadow:none;
}

.filter-bar .filter-clear:hover{
    background:#f9fafb;
    border-color:#d1d5db;
}
.filter-bar .filter-clear:focus,
.filter-bar .filter-clear:active{
    outline:none;
    box-shadow:none;
}
/* 左侧分类区域固定宽度，并在右侧留一点间距
260px 在 1366 宽度下略显偏宽，这里适当收窄到 230px 左右 */
/* ✅ 左侧分类栏：不再自己加 margin，间距全部交给父容器 gap，保证左右一致 */
.sidebar{
    min-width: 0;
    flex: 0 0 auto;
    max-width: none;
    width: 100%;
    margin-right: 0 !important;
}
/* 分类树 */
.tree ul {
    list-style: none;
    padding-left: 16px;
    margin: 0;
}

.tree li {
    padding: 6px 0;
    /* 从4px放大到6px，每个分类更易点 */
    font-size: 14px;
    /* 从默认12px放大到14px，更易读 */
}

/* 保证“名称 + 数量”单行显示，小屏时多余文字用省略号处理 */
.tree label > span:first-of-type {
    white-space: nowrap;
    /* 不换行 */
    overflow: hidden;
    /* 超出隐藏 */
    text-overflow: ellipsis;
    /* 末尾显示 ... */
    display: inline-block;
    max-width: 100%;
}

.tree-toggle {
    cursor: pointer;
    user-select: none;
    display: inline-block;
    color: #1d2129;
    padding: 2px 0;
}

.tree-toggle:hover {
    text-decoration: underline;
    color: #4666ff;
    /* hover时变品牌色，反馈更清晰 */
}

.tree-children {
    margin-top: 4px;
}

.sticky {
    position: sticky;
    top: 200px;
}

.group-title {
    border-left: 4px solid var(--primary);
    padding: 8px 12px;
    margin: 20px 0 12px;
    font-weight: 700;
    font-size: 16px;
    background: var(--primary-light);
    color: var(--primary);
    border-radius: 0 4px 4px 0;
}

/* 商品行：增加上下间距，左右留白 */
/* 每一条商品行 */
.item-row {
    display: flex;
    padding: 20px 0;
    border-bottom: 1px dashed #f0f0f0;
    align-items: flex-start;   /* 顶部对齐，字段再多也不会堆成一团 */
    column-gap: 32px;          /* 图片和右侧信息之间留出更大的横向空隙 */
}

/* 右侧文字区域整体再向右“挪”一点，防止视觉上贴着图片边缘 */
.item-row > .flex-grow-1 {
    margin-left: 4px;          /* 如果还觉得近，可以改成 8px */
    min-width: 0;              /* 防止内容太多时反向挤压左侧图片 */
}

.item-row:last-child {
    border-bottom: none;
}

/* ✅ 结果卡片里“品牌/车型/适配车型”等值太小：只把商品列表区域抬高字体，不影响其它小字 */
.item-row .muted {
    font-size: 13px;
}

.badge-qty {
    font-size: 12px;
    background: #eef2ff;
    border-radius: 8px;
    padding: 2px 6px;
}

/* 商品行右侧功能区域（价格 + 数量 + 按钮） */
.item-row .item-right {
    max-width: 260px;
    /* 默认最多 260px */
    min-width: 220px;
    /* 但允许在较窄时略微收缩 */
    flex: 0 0 auto;
}

/* 美化右侧快速筛选栏的勾选项布局。默认的 bootstrap form‑check 会让文本靠左
   而复选框在最左边，看起来有些散乱。通过使用 flex 布局让复选框和标签
   水平对齐，并给每个勾选项一些底部间距，让整体看起来更整洁。 */
.right-col .form-check{
    display:flex;
    align-items:center;     /* ✅ 关键：改成居中对齐 */
    gap:8px;
    margin-bottom:6px;
    flex-wrap:wrap;         /* 允许日期区换行 */
}

.right-col .form-check-label{
    margin-bottom:0;        /* ✅ 避免 label 下沉 */
    line-height:1.2;
}
.right-col #purchasedRange,
.right-col #historyRange {
    flex: 0 0 100%;
    max-width: 100%; /* ✅ 日期区独占一行 */
}

.right-col #purchasedRange {
    flex-wrap: wrap;
    row-gap: 6px; /* ✅ 小屏/窄列时自动换行 */
}

.right-col #purchasedRange input {
    flex: 1 1 120px;
    max-width: 100%;
}

.right-col #purchasedRange span {
    flex: 0 0 auto;
}

.right-col .form-check-input {
    margin: 0;
}

.table th,
.table td {
    vertical-align: middle;
}

.btn-sm {
    padding: .25rem .5rem;
}

/* —— 解决搜索后被“横向撑宽”的三板斧 —— */

/* A. 固定纵向滚动条占位，避免出现/消失时整体左右抖动 */
html {
    scrollbar-gutter: stable both-edges;
}

/* B. 允许中间 flex 列收缩（关键！不然长串会把整行撑爆） */
main.flex-grow-1 {
    min-width: 0;
}

/* 主区域本身 */
.item-row .flex-grow-1 {
    min-width: 0;
}

/* 结果行里的中间列 */

.item-row .fw-bold a {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.item-row .muted {
    overflow-wrap: normal;
    word-break: normal;
}

/* （可选，保险）禁用整个页面的横向滚动条，防止偶发抖动 */
body {
    overflow-x: hidden;
}

/* 你的三列容器在 L49 处是 d-flex */

/* —— 搜索工具条（更小号、更紧凑、可收缩） —— */
.search-toolbar {
    gap: .5rem;
    flex-wrap: wrap;
    align-items: center;
}

.search-toolbar .form-control,
.search-toolbar .form-select {
    height: calc(1.5em + .5rem + 2px);
    padding: .25rem .5rem;
    font-size: .875rem;
}

.search-toolbar .btn {
    padding: .25rem .5rem;
    font-size: .875rem;
}

.search-toolbar .field {
    min-width: 280px;
    /* 小屏时最小宽度，保证能输入 */
    flex: 1 1 auto;
    /* 关键：占满查询条剩余空间，搜索框全屏铺展 */
    margin-right: 8px;
    /* 与查询按钮间距，避免贴在一起 */
}

/* 已选分类提示条（放搜索框下方） */
.selected-chips {
    margin-top: 8px;
    padding: 10px 12px;
    background: var(--primary-light, #e8f3ff);
    border: 1px solid #d6e4ff;
    border-radius: 8px;
    font-size: 13px;
    color: #1d2129;
}

.selected-chips .badge {
    background: #165DFF;
    color: #fff;
    font-weight: 500;
    border-radius: 999px;
    padding: 6px 10px;
    margin-right: 6px;
}

.selected-chips .label {
    color: #4e5969;
    margin-right: 8px;
}

/* 分类图标统一尺寸 */
.cat-icon {
    width: 18px;
    height: 18px;
    margin-right: .35rem;
    flex: 0 0 18px;
    object-fit: contain;
    opacity: .9;
}

/* 主区域/结果行中间列允许收缩，长串自动断行 —— 防“右拉” */
main.flex-grow-1 {
    min-width: 0;
}

/* 主内容区（L82 起） */
/* keep */
.item-row .flex-grow-1 {
    min-width: 0;
}

/* 结果行中列（L112 起多处） */
/* keep */
/* 只让标题可任意断行，属性区不要乱拆 */
.item-row .fw-bold a {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* 商品属性（编码/品牌/OE）：调整间距，避免拥挤 */
.item-row .muted {
    color: #6c757d;
    font-size: 13px;
    /* 从12px放大到13px，更易读 */
    margin-top: 6px;
    /* 与商品名称增加间距，层次分明 */
    line-height: 1.5;
    /* 增加行高，避免文字重叠 */
}

/* 固定纵向滚动条占位 + 禁止横向滚动（保险） */
html {
    scrollbar-gutter: stable both-edges;
}

/* keep */
body {
    overflow-x: hidden;
}
/* 三列容器：>=992 保持一行（左分类 + 中结果 + 右筛选）；<992 才允许换行/抽屉 */
.page-wrap > .d-flex{
    flex-wrap: nowrap;
    align-items: flex-start;
}

@media (max-width: 991.98px){
    .page-wrap > .d-flex{
        flex-wrap: wrap;
    }

    /* 小屏时分类区域占满一行，不再右侧留边距，避免挤压 */
    .sidebar{
        min-width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
        margin-right: 0;
    }
}

/* 兜底：>=992 下左右两侧栏都不再额外加 margin，只由 gap 控制 */
@media (min-width: 992px){
    #pageSearch .page-wrap > .d-flex > .sidebar-fixed,
    #pageSearch .page-wrap > .d-flex > .right-col{
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* 搜索区放大一档（更醒目） */
.search-toolbar .form-control,
.search-toolbar .form-select {
    height: 44px;
    padding: 8px 12px;
    font-size: 16px;
}

/* 同时优化查询按钮宽度，避免过窄 */
.search-toolbar .btn {
    height: 50px;
    padding: 8px 24px;
    /* 增加左右内边距，按钮更舒展 */
    font-size: 18px;
    flex: 0 0 auto;
    /* 按钮不收缩，保持固定大小 */
}

/* 关键词输入更宽一些 */
.search-toolbar .field {
    min-width: 320px;
    flex: 1 1 520px;
}

/* 极小屏(<=576px)：工具栏字段不强制最小宽度，允许换行占满 */
@media (max-width: 575.98px) {
    .search-toolbar .field {
        min-width: 0;
        flex: 1 1 100%;
    }
}

/* 价格样式（醒目但不喧宾） */
.price-box {
    line-height: 1.2;
    margin-bottom: 12px;
    /* 与按钮增加间距 */
}

.price-symbol {
    font-size: 16px;
    vertical-align: top;
    color: #ff4d4f;
    /* 红色价格，更醒目（B2B常用） */
}

.price-num {
    font-size: 22px;
    /* 从18px放大到22px，价格最醒目 */
    font-weight: 700;
    color: #ff4d4f;
}
.price-currency{
    font-size:12px;
    color:#6c757d;
    margin-left:6px;
    padding:1px 6px;
    border:1px solid #e9ecef;
    border-radius:10px;
    vertical-align:middle;
    background:#fff;
    white-space:nowrap;
}
/* ====== 三列布局：PC(>=992px) 永远左/中/右，左右间距严格一致 ====== */
#pageSearch{
    /* 左/右栏宽度：13~14寸会自动缩到 220 左右，大屏回到 260 */
    --srr-side-w: clamp(220px, 19vw, 260px);
    --srr-col-gap: 16px; /* 三列之间统一缝隙 */
}

/* =========================
 * [SRR-SEARCH-RESPONSIVE-GUTTER-V2]
 * 目的：让 1280/1366/1440/1536 这些“真实笔记本宽度/缩放等效宽度”下，
 *      左右栏宽 & 三列间距同步收缩，避免“视觉不对称”
 * ========================= */

/* 1440 及以下：稍微收紧侧栏与缝隙 */
@media (min-width: 992px) and (max-width: 1439.98px){
    #pageSearch{
        --srr-side-w: clamp(210px, 18vw, 245px);
        --srr-col-gap: 14px;
    }
}

/* 1366 及以下：再收一点，给中间结果区更多空间 */
@media (min-width: 992px) and (max-width: 1366.98px){
    #pageSearch{
        --srr-side-w: clamp(200px, 17vw, 235px);
        --srr-col-gap: 12px;
    }
}

/* 1280 极限：继续收紧（仍保持三列） */
@media (min-width: 992px) and (max-width: 1280.98px){
    #pageSearch{
        --srr-side-w: 220px;   /* 直接定死更稳定 */
        --srr-col-gap: 12px;
    }
}

/* PC：用 grid 锁死三列，彻底避免 flex 的 margin/padding 叠加导致左右不等距 */
@media (min-width: 992px){
    #pageSearch .page-wrap > .d-flex{
        display: grid !important;
        grid-template-columns: var(--srr-side-w) minmax(0, 1fr) var(--srr-side-w);
        column-gap: var(--srr-col-gap);
        gap: var(--srr-col-gap) !important; /* 覆盖 bootstrap gap-3，防止双重间距导致挤压/遮挡 */
        align-items: start;
        justify-items: stretch;
        min-width: 0;
    }
}

/* =========================
 * [SRR-SEARCH-SYMMETRY-FILL-V1]
 * 目的：grid 三列对称，但内部容器没撑满会造成“看起来不对称”
 * ========================= */
@media (min-width: 992px){
    /* 左/右抽屉外壳在 PC 下就是普通盒子：不要自带任何 padding/margin */
    #pageSearch #drawerCategories,
    #pageSearch #drawerQuick{
        padding: 0 !important;
        margin: 0 !important;
        width: 100%;
    }

    /* 抽屉内部 aside 必须撑满各自列宽 */
    #pageSearch #drawerCategories > aside.sidebar,
    #pageSearch #drawerQuick > aside.right-col{
        width: 100% !important;
        max-width: none !important;
    }

    /* 左右两侧实际卡片容器也要撑满（避免 max-width 造成“假边距”） */
    #pageSearch #leftCategory,
    #pageSearch #rightAside{
        width: 100% !important;
        max-width: none !important;
    }
}

/* ✅ grid 子项允许收缩：避免 1366/1440 下中间区域被左右“挤压遮挡” */
@media (min-width: 992px){
    #pageSearch .page-wrap > .d-flex > *{
        min-width: 0;
    }
}
/* 右侧筛选栏列宽（只作用于右侧抽屉里的 aside.right-col） */
#pageSearch .srr-drawer-right > aside.right-col {
    width: var(--srr-side-w);
    flex: 0 0 var(--srr-side-w);
    position: sticky;
    top: calc(var(--srr-header-h, 64px) + 8px);
    align-self: flex-start;
    max-height: calc(100vh - var(--srr-header-h, 64px) - 16px);
    overflow: auto;
}

/* 左侧分类栏：固定宽度（不要再额外 margin/padding 去“制造间距”，交给 grid gap 统一控制） */
.sidebar-fixed {
    position: sticky;
    top: calc(var(--srr-header-h, 64px) + 8px);
    width: var(--srr-side-w);
    min-width: var(--srr-side-w);
    max-width: var(--srr-side-w);
    align-self: flex-start;
    flex-shrink: 0;
    z-index: 2;

    background: #fff;

    /* ❌ 去掉：padding-right/margin-right 造成左侧比右侧更大空白 */
    padding-right: 0;
    margin-right: 0;

    /* 保留：长文本/多语言下可滚动，不撑爆布局 */
    max-height: calc(100vh - var(--srr-header-h, 64px) - 16px);
    overflow: auto;
    overflow-x: auto;
    overflow-y: auto;
}

/* 右侧功能栏：固定宽度，同样不再加 margin-left */
.right-col {
    width: var(--srr-side-w);
    min-width: var(--srr-side-w);
    max-width: var(--srr-side-w);
    flex-shrink: 0;

    /* ❌ 去掉：margin-left 会让右侧与中间不对称 */
    margin-left: 0;
}

/* 中间内容区：占满剩余空间（不要左右 padding 去干扰三列间距） */
.main-fixed {
    min-width: 0;
    flex: 1 1 auto;

    /* ❌ 去掉：0 16px 会叠加出不一致的缝 */
    padding: 0;
    box-sizing: border-box;
}

/* 搜索条更醒目 */
.search-toolbar .form-control {
    height: 40px;
    font-size: 14px;
}

.search-toolbar .btn {
    height: 40px;
    padding: 0 16px;
    font-weight: 600;
}

/* 列表行留白与对齐 */
.item-row {
    display: flex;
    column-gap: 32px;   /* 图片和右侧信息之间留出更大的横向空隙 */
    row-gap: 0;
    padding: 20px 0;    /* 行高稍微拉高一点，看起来更舒展 */
    border-bottom: 1px dashed #eee;
    align-items: flex-start;   /* 顶部对齐，字段再多也不会堆成一团 */
}

.item-row .muted {
    color: #6c757d;
    font-size: 12px;
}

/* 价格区：降低字号、提升层次 */
.price-box {
    line-height: 1;
}

.price-symbol {
    font-size: 12px;
    vertical-align: top;
}

.price-num {
    font-size: 18px;
    font-weight: 600;
}
/* 商品图片统一底座 */
.item-row .prod-img {
    width: 140px;          /* 拉宽一点 */
    height: 100px;         /* 固定高度，行高统一 */
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
    background: #fff;
    /* 不再裁剪，完整显示整张图，宽图会上下留白 */
    object-fit: contain;
}

/* 当是占位图（SRR LOGO）时，行为保持一致 */
.item-row .prod-img.no-img {
    object-fit: contain;
}


/* 结果区：默认 1 列；仅在超宽屏（≥1920px）才显示两列，避免挤压分类和右侧栏 */
#pageSearch .results-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr;
}

/* 超宽屏：只保留间距，不再改列数 */
@media (min-width: 1920px) {
    #pageSearch .results-grid {
        grid-template-columns: 1fr;
        column-gap: 16px;
    }

    #pageSearch .results-grid .item-row {
        padding: 12px;
        /* 卡片整体也略紧凑一点 */
    }

    #pageSearch .results-grid .item-row .item-right {
        max-width: 200px;
        /* 右侧功能区再缩一点 */
        min-width: 150px;
        flex: 0 0 auto;
    }
}


/* 注意：移除任何会强制子项 50% 宽度的规则，避免与 grid 冲突 */

.filter-bar .input-group .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.filter-bar .input-group .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: 0;
    /* 防止产生“压住”的视觉 */
}

/* 卡片化的单条商品 */
.results-grid .item-row {
    display: flex;
    /* ★关键：作为 flex 容器，子列的 flex 才会生效 */
    align-items: stretch;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 16px;
    margin: 0;
    /* 不额外制造“空带” */
    background: #fff;
    /* 卡片本身白底，外面灰色背景依然可见 */
}

/* 卡片内三列：图片 / 信息 / 操作区 */
.results-grid .item-row > div:first-child {
    flex: 0 0 140px;     /* 和图片宽度保持一致 */
    margin-right: 24px;  /* 图片右边额外腾出 24px 空白 */
}


.results-grid .item-row .flex-grow-1 {
    min-width: 0;
}

.results-grid .item-row .item-right {
    flex: 0 0 180px;
    max-width: 200px;
    min-width: 160px;
    text-align: right;
}

/* 小屏（<=576px）：结果行纵向堆叠，右侧信息改为占满并左对齐 */
@media (max-width: 575.98px) {
    .results-grid .item-row {
        flex-direction: column;
    }

    .results-grid .item-row .item-right {
        flex: 1 0 100%;
        max-width: 100%;
        min-width: 0;
        text-align: left;
        margin-top: 8px;
    }
}

/* 只让标题支持任意断行，属性区不要随便拆 */
.item-row .fw-bold a {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* 属性文字恢复正常换行（按空格/自然断点） */
.item-row .muted {
    overflow-wrap: normal;
    word-break: normal;
}

/* 属性文字按自然断行 */
.item-row .muted {
    overflow-wrap: normal;
    word-break: normal;
}

/* OE/编码：单行 + 省略号，不在中间断开 */
/* 编码仍然单行省略 */
.code-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: keep-all;
}

/* OE 允许多行换行（按任何位置断行），不省略 */
/* OE：单行省略，避免笔记本端难看换行 */
.oe-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: keep-all;
}

/* 属性区：两行布局 */
.attrs {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* 第一行：编码 + 品牌（并排，可折行） */
.attr-top {
    display: flex;
    flex-wrap: wrap;
    column-gap: 16px;
    row-gap: 4px;
    font-size: 12px;
    line-height: 1.2;
}

/* 第二行：OE + 短码（并排，可折行） */
.attr-second {
    display: flex;
    flex-wrap: wrap;
    column-gap: 16px;
    row-gap: 4px;
    font-size: 12px;
    line-height: 1.2;
}

/* 编码、短码：单行省略，不在中间断开 */
.code-text,
.short-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: keep-all;
}

/* OE：允许多行（默认最多两行省略）。想不限行 → 删掉两行 -webkit-line-clamp */
/* OE：单行省略，避免笔记本端难看换行 */
.oe-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: keep-all;
}

/* 标签与值并排：用于 OE/短码所在的第二行每个字段 */
.attr-second > div,
.attr-top > div {
    display: flex;
    align-items: baseline;
    column-gap: 6px;
}
/* 查询页：品牌后面的产品尺寸，和品牌拉开距离 */
.brand-size-wrap {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    column-gap: 6px;
    row-gap: 4px;
}

.brand-size-wrap .size-inline {
    display: inline-flex;
    align-items: baseline;
    margin-left: 14px;   /* ✅ 跟品牌拉开 */
    column-gap: 4px;
    white-space: nowrap;
    color: #666;
}

.brand-size-wrap .size-inline .attr-label {
    color: #666;
    white-space: nowrap;
}
/* 第三行：适配车型 */
.attr-third {
    margin-top: 2px;
    font-size: 12px;           /* 和其他属性行统一字号 */
    color: #666;
    display: flex;             /* 用 flex 保证“适配车型： 值”始终在一行内对齐 */
    align-items: baseline;
    gap: 4px;
}

/* label 不允许拆行，始终贴着前面 */
.attr-third .attr-label {
    white-space: nowrap;
}

/* 值部分超长时用省略号 */
.attr-third .model-text {
    max-width: 420px;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* 查询页卡片：车型品牌与尺寸，字号/颜色统一，不要比别的属性大一号 */
.attr-top .inline-meta,
.attr-top .inline-meta .meta-label,
.attr-top .inline-meta .meta-value,
.attr-second .inline-meta,
.attr-second .inline-meta .meta-label,
.attr-second .inline-meta .meta-value {
    font-size: 12px;
    line-height: 1.2;
    font-weight: 400;
    color: #666;
}

.attr-top .inline-meta,
.attr-second .inline-meta {
    display: inline-flex;
    align-items: baseline;
    column-gap: 4px;
    white-space: nowrap;
    max-width: 260px;
    overflow: hidden;
}

.attr-top .inline-meta .meta-label,
.attr-second .inline-meta .meta-label {
    white-space: nowrap;
    flex: 0 0 auto;
}

.attr-top .inline-meta .meta-value,
.attr-second .inline-meta .meta-value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* 标签本身不换行，贴紧值 */
.attr-label {
    white-space: nowrap;
    color: #6c757d;
}

/* 小屏：同样保持一列，只微调间距 */
@media (max-width: 575.98px) {
    .results-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* 紧缩分类树的左右缩进 */
/* 分类树缩进：按层级递进，让层级更清晰（覆盖模板里的 ms-*） */
.tree .tree-children{
    margin-left: .95rem !important;
    padding-left: .25rem !important;
    border-left: 1px dashed rgba(0,0,0,.10);
}
.tree .tree-children .tree-children{
    margin-left: 1.35rem !important;
}

/* 分类树每行高度 */
.tree li {
    padding: 4px 0;
}

/* 分类 label：名称 + 数量 一行展示，左右对齐 */
#catTree label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
}

/* 分类树容器：允许横向滚动，避免长英文被裁掉 */
#catTree {
    overflow-x: auto;
    /* ★ 出现横向滚动条 */
}

/* 名称部分：完整展示，超出靠滚动查看 */
#catTree label span:first-of-type {
    flex: 0 0 auto;
    /* 宽度按内容撑开 */
    min-width: max-content;
    white-space: nowrap;
    /* 不换行 */
    overflow: visible;
    /* 不再强制隐藏 */
    text-overflow: clip;
    /* 不再显示省略号 */
}

/* 数量（灰色小括号）永远贴在右侧，不换行 */
#catTree label .text-muted {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* 隐藏所有子节点的已选分类 */
.tree .cat-check[data-level="3"]:checked + .tree-children {
    display: none;
}

.selected-chips .child {
    display: none;
    /* 隐藏已选的子节点 */
}

/* Combobox 下拉的条目样式 */
.combo-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .375rem .5rem;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.combo-item:hover,
.combo-item.active {
    background: #f5f5f5;
}

.combo-empty {
    padding: .375rem .5rem;
    color: #999;
}

.selected-chip {
    position: relative;
    padding-right: 18px;
}

.chip-close:hover {
    background: #f5f5f5;
}

/* —— Combobox 视觉与交互（参 FEBEST 风格） —— */
.combo {
    border: 1px solid var(--border, #E5E6EB);
    border-radius: 8px;
    background: #fff;
}

.combo:focus-within {
    box-shadow: 0 0 0 3px rgba(22, 93, 255, .12);
    border-color: #165DFF;
}

.combo-input {
    height: 38px;
    font-size: 14px;
    outline: none;
}

.combo-input::placeholder {
    color: #bfbfbf;
}

.combo-icon {
    color: #98A2B3;
}

.combo-clear,
.combo-caret {
    border: 0;
    background: transparent;
    color: #98A2B3;
}

.combo-clear:hover,
.combo-caret:hover {
    color: #165DFF;
}

.combo-dropdown {
    font-size: 14px;
}

.combo-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .375rem .5rem;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.combo-item .code {
    color: #98A2B3;
    font-size: 12px;
}

.combo-item:hover,
.combo-item.active {
    background: #f5f7ff;
}

.combo-empty {
    padding: .5rem .75rem;
    color: #999;
}

/* 让下拉始终对齐父容器（品牌一栏），不再左右“飘” */
/* 父容器相对定位，子下拉绝对定位 */
/* === Brand Combobox: 单一权威样式（替换其它所有重复/冲突规则） === */
#brandCombo {
    position: relative;
}

/* 外框：自己画边框，不要叠 bootstrap 的 .form-control 外壳 */
#brandCombo .combo,
#mdescCombo .combo , #variantCombo .combo{
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    height: 40px;
    border: 1px solid var(--border, #E5E6EB);
    border-radius: 8px;
    background: #fff;
    overflow: visible;
    /* 允许下拉层溢出显示，避免挤出“白条” */
}

#brandCombo .combo:focus-within {
    box-shadow: 0 0 0 3px rgba(22, 93, 255, .12);
    border-color: #165DFF;
}

#brandCombo .combo-input,
#mdescCombo .combo-input,
#variantCombo .combo-input {
    flex: 1 1 auto;
    height: 38px;
    border: 0;
    outline: none;
    background: transparent;
    padding: 0 8px;
    font-size: 14px;
}

#brandCombo .combo-input::placeholder {
    color: #bfbfbf;
}

#brandCombo .combo-icon {
    color: #98A2B3;
}

#brandCombo .combo-clear,
#brandCombo .combo-caret,
#mdescCombo .combo-clear,
#mdescCombo .combo-caret,
#variantCombo .combo-clear,
#variantCombo .combo-caret {
    border: 0;
    background: transparent;
    color: #98A2B3;

    /* 关键：让 X / 下拉箭头严格垂直水平居中 */
    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: 40px;
    padding: 0 6px;
    line-height: 1;
}

#brandCombo .combo-clear i,
#brandCombo .combo-caret i,
#mdescCombo .combo-clear i,
#mdescCombo .combo-caret i,
#variantCombo .combo-clear i,
#variantCombo .combo-caret i {
    line-height: 1;
}

#brandCombo .combo-clear:hover,
#brandCombo .combo-caret:hover {
    color: #165DFF;
}

/* 下拉层：相对 .combo 定位，宽度“严格等于”输入框 */
#brandCombo .combo-dropdown,
#mdescCombo .combo-dropdown,
#variantCombo .combo-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: 100%;
    max-height: 280px;
    overflow: auto;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid var(--border, #E5E6EB);
    border-radius: 8px;
    z-index: 2000;
    /* 保证浮在上面，但不影响外层布局 */
    display: none;
    /* JS 控制展开/收起 */
}

/* 列表项：不换行，不把下拉层横向撑大 */
#brandCombo .combo-dropdown .combo-item,
#mdescCombo .combo-dropdown .combo-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .375rem .5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

#brandCombo .combo-dropdown .combo-item .code {
    color: #98A2B3;
    font-size: 12px;
}

#brandCombo .combo-dropdown .combo-item:hover,
#brandCombo .combo-dropdown .combo-item.active {
    background: #f5f7ff;
}

#brandCombo .combo-dropdown .combo-empty,
#mdescCombo .combo-dropdown .combo-empty {
    padding: .5rem .75rem;
    color: #999;
}

/* === 统一高亮色：Pantone 1655 C ≈ #FF6A13 === */
:root {
    --highlight-1655c: #FF6A13;
    /* 主色 */
    --highlight-1655c-bg: rgba(255, 106, 19, .18);
    /* 背景铺底（块状） */
    --highlight-1655c-shadow: rgba(255, 106, 19, .30);
    /* 外发光 */
}

/* 关键词高亮（兼容旧输出 <mark class="hkw">）——块状填充而非底纹划线 */
.hkw,
.kw-highlight,
mark.kw-highlight {
    background: var(--highlight-1655c-bg) !important;
    /* 改为实心背景 */
    color: inherit !important;
    padding: 0 .12em;
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px var(--highlight-1655c),
        /* 细描边 */ 0 0 0 2px var(--highlight-1655c-bg);
    /* 柔和外晕 */
}

/* 锚点常亮（OE/车型定位到的块/行） */
.anchor-highlight {
    outline: 2px solid var(--highlight-1655c);
    outline-offset: 2px;
    background-color: rgba(255, 106, 19, .07);
    box-shadow: 0 0 0 3px var(--highlight-1655c-shadow);
}

/* 闪两下的动效（用于进入页面或页内定位时） */
@keyframes flashTwice {

    0%,
    100% {
        box-shadow: none;
    }

    25% {
        box-shadow: 0 0 0 4px var(--highlight-1655c-shadow);
        background: var(--highlight-1655c-bg);
    }

    50% {
        box-shadow: none;
    }

    75% {
        box-shadow: 0 0 0 4px var(--highlight-1655c-shadow);
        background: var(--highlight-1655c-bg);
    }
}

.flash-twice {
    animation: flashTwice 1.2s ease-in-out 1;
}

/* 保证“一行显示” */
#searchSuggestBox .suggestion-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#searchSuggestBox .name,
#searchSuggestBox .oe,
#searchSuggestBox .code {
    max-width: 33%;
    overflow: hidden;
    text-overflow: ellipsis;
}

#searchSuggestBox .suggestion-item:hover {
    background: #f7f7f7;
}

/* —— 左侧分类筛选：紧凑美观版 —— */
#catFilterBar.cat-filter {
    margin-bottom: 8px;
}

#catFilterBar .cat-filter-input {
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid var(--border, #E5E6EB);
    border-radius: 8px;
    padding: 0 36px 0 32px;
    /* 给左图标与右清空预留内边距 */
    height: 36px;
    /* 比 input-group-sm 更低一档，更省空间 */
    background: #fff;
}

#catFilterBar .cat-filter-input .form-control {
    border: 0;
    height: 100%;
    padding: 0;
    font-size: 13px;
    outline: none;
    box-shadow: none;
}

#catFilterBar .cat-filter-input .bi-search {
    position: absolute;
    left: 10px;
    color: #98A2B3;
    font-size: 16px;
}

#catFilterBar .cat-filter-input .clear-btn {
    position: absolute;
    right: 6px;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #98A2B3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#catFilterBar .cat-filter-input .clear-btn:hover {
    background: #f5f7ff;
    color: #165DFF;
}

#catFilterBar .cat-filter-ops {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1;
    /* 行距更紧凑 */
}

#catFilterBar .form-check-input {
    width: 14px;
    height: 14px;
    margin-top: 0;
}

#catFilterBar .small {
    font-size: 12px;
    color: #6b7280;
}

/* 左栏整体留白再优化一点：让“卡片”别显得挤 */
.sidebar .card {
    padding: 14px 14px 12px;
}

/* 比默认 20px 更省空间 */
.tree li {
    padding: 4px 0;
}

/* 分类行间距略收紧，但不拥挤 */
.chip-close {
    position: absolute;
    top: 50%;
    right: -6px;
    transform: translateY(-50%);
    /* 垂直居中 */
    width: 18px;
    height: 18px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #333;
    line-height: 18px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .1);
}

/* 已选项 chip 的关闭按钮：上下居中 */
.selected-chip {
    position: relative;
    padding-right: 18px;
}

.selected-chip .chip-close {
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    border-radius: 50%;
}

.selected-chip .chip-close:hover {
    background: #f5f5f5;
}

/* 让清空 X 按钮上下完全居中 */
#brandCombo .combo-clear,
#mdescCombo .combo-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    /* 与 .combo-input 高度一致 */
    padding: 0 6px;
    line-height: 1;
    /* 防止文字行高影响垂直居中 */
}
/* [替换 1448-1518] ✅ 最终版：左侧目录树——不换行 + 超出横向滚动 + 外文显示全 */
#catTree{
    padding-right: 6px;
    white-space: nowrap;         /* 不换行：树结构更稳定 */
    display: block;
    min-width: max-content;      /* ✅ 内容有多宽就撑多宽，配合 overflow-x 显示全 */
}

/* PC / 笔记本（>=1200）：允许横向滚动（不要 overflow:visible，否则滚动条永远不会出现） */
@media (min-width: 1200px){
    #catTree{
        max-height: none;
        overflow-x: auto;        /* ✅ 必须是 auto 才能出横向滚动条 */
        overflow-y: visible;     /* 高度不限制，避免“卡一截” */
        scrollbar-gutter: stable;
    }
}

/* 平板 + 手机（<1200）：仍然用内部滚动，避免抽屉太长撑不下 */
@media (max-width: 1199.98px){
    #catTree{
        max-height: calc(100vh - 220px);
        overflow: auto;
        scrollbar-gutter: stable;
    }
}

/* 树形元素：箭头/复选框/文字垂直居中 */
#catTree .tree-toggle,
#catTree label{
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
}

/* 箭头图标固定宽高 */
#catTree .tree-toggle > i.bi{
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    margin-right: 6px !important;
    transform: translateY(1px);
}

/* ✅ 统一左侧树 checkbox 尺寸（解决“勾选框大小不一致”） */
#catTree input.cat-check{
    margin-top: 0 !important;
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
}

/* ✅ 叶子节点：不要 ellipsis（外文必须显示全），超出靠横向滚动解决 */
#catTree .tree-children label{
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

#catTree .tree-children label span:nth-of-type(1){
    flex: 0 0 auto;
    min-width: auto;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
}

#catTree .tree-children label .text-muted{
    flex: 0 0 auto;
    white-space: nowrap;
}

/* 标准名称图标统一圆角（与首页风格一致） */
.cat-icon,
.std-icon {
    border-radius: 6px;
}

/* 子车型下拉同高度、同色 */
#selVariant.form-select {
    height: 40px;
    color: #212529;
}

.btn .bi-cart,
.btn .bi-cart-plus,
.btn .bi-bag {
    font-size: 1.15rem !important;
}

/* 子车型与品牌/车型控件高度、颜色一致 */
#selVariant.form-select {
    height: 40px;
    color: #212529;
}

/* 标准名称叶子项：名称与数量同一行，名称溢出省略，数量不换行 */
#catTree label {
    display: flex;
    align-items: center;
    gap: .25rem;
}

#catTree label span:first-child {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#catTree label .text-muted {
    flex: 0 0 auto;
    white-space: nowrap;
}

:root {
    --srr-orange: #FF6A00;
}

/* 左右栏对称（PC：固定 侧栏 + 自适应主栏） */
.page-wrap > .d-flex {
    flex-wrap: nowrap;
    align-items: flex-start;
    column-gap: 24px;
    /* 原来 16px → 现在 24px，左中右之间空隙更明显 */
    /* 左中右之间统一 24px 间距，在 1920 / 1440 / 1366 下都能看出一条清楚的“灰缝” */
}

/* 左侧：商品分类 */
.sidebar-fixed {
    position: sticky;
    top: calc(var(--srr-header-h, 64px) + 12px);
    flex: 0 0 280px;
    /* 比原来的 300px 稍微收窄一点 */
    max-width: 280px;
    min-width: 260px;
    align-self: flex-start;
    padding-right: 0;
    /* 间距交给 column-gap 控制，避免看起来不对称 */
}

/* 中间主体：商品列表 */
.main-fixed {
    flex: 1 1 auto;
    min-width: 0;
    /* 防止被里面内容撑爆导致横向滚动 */
}

/* 右侧：快速筛选栏（只作用于右侧抽屉里的 aside.right-col） */
#pageSearch .srr-drawer-right > aside.right-col {
    width: 260px;
    flex: 0 0 260px;
    position: sticky;
    top: calc(var(--srr-header-h, 64px) + 12px);
    align-self: flex-start;
}

/* —— 中号屏（1366 / 1440 一带）：左右两侧再收窄一点，避免遮挡中间 —— */
@media (min-width: 1200px) and (max-width: 1599.98px) {
    .sidebar-fixed {
        flex-basis: 260px;
        max-width: 260px;
    }

    #pageSearch .srr-drawer-right > aside.right-col {
        flex-basis: 240px;
        max-width: 240px;
    }
}
@media (min-width: 992px){
    #pageSearch .srr-drawer-right > aside.right-col{
        position: sticky;
        top: calc(var(--srr-header-h, 64px) + 12px);
        align-self: flex-start;
    }
}

/* —— 平板 / 小屏（≤ 1199）：三栏改为上下堆叠，彻底避免“挡住中间” —— */
@media (max-width: 1199.98px) {
    #pageSearch .srr-drawer-right > aside.right-col{
        position: static;
        top: auto;
    }
    .page-wrap > .d-flex {
        flex-wrap: wrap;
    }

    .sidebar-fixed,
    .main-fixed,
    #pageSearch .srr-drawer-right > aside.right-col {
        flex: 0 0 100%;
        max-width: 100%;
        min-width: 0;
    }

    .sidebar-fixed {
        position: static;
        /* 不再吸顶，否则容易给人“遮住”错觉 */
        top: auto;
    }
}

/* 防止移动端出现整体往右偏、右侧看不到的横向滚动条 */
@media (max-width: 991.98px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        /* 强制把横向滚动干掉 */
    }
}

html {
    scrollbar-gutter: stable both-edges;
}

/* 宽屏提升主容器的最大宽度 */
@media (min-width: 1600px) {

    .container,
    .container-lg,
    .container-xl,
    .container-xxl {
        max-width: 1440px;
    }
}

/* 子车型下拉与前两个输入统一高度/圆角 */
#selVariant.form-select,
#vTrim.form-select {
    height: 40px;
    border-radius: 8px;
    border: 1px solid var(--border, #E5E6EB);
    font-size: 14px;
    padding: 0 12px;
}

/* 车型三级控件样式统一 */
#selBrand.form-select,
#selMdesc.form-select,
#selVariant.form-select {
    height: 40px;
    border-radius: 8px;
    background-color: #fff;
    color: #212529;
    border: 1px solid var(--border, #E5E6EB);
    font-size: 14px;
}

/* 品牌、车型、子车型长度统一 */
#brandCombo,
#mdescCombo {
    flex: 1 1 auto;
    min-width: 0;
}

#brandCombo .combo-input,
#mdescCombo .combo-input {
    width: 100%;
}

/* === 车型三件套统一高度/圆角 === */
#brandCombo input[role="combobox"],
#mdescCombo input[role="combobox"],
#selVariant.form-select {
    height: 40px;
    border-radius: 8px;
}

/* 移动端：三件套纵向铺开 */
@media (max-width: 767.98px) {

    #brandCombo,
    #mdescCombo,
    #selVariant {
        width: 100%;
    }
}
/* Chips/面包屑条的间距微调 */
#selectedCategories,
#stdBreadcrumbBar {
    margin-top: .25rem;
}

/* ===== 目录面包屑条 =====
 * 是否显示由服务端 th:style 或 JS 控制；不要在 CSS 里默认强制隐藏，
 * 否则“热榜点击后目录不显示”会复现。
 */
#stdBreadcrumbBar {
    background: #F5F7FB;
    border: 1px solid #E6ECF5;
    border-radius: 10px;
    padding: .6rem .8rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* 目录模式：彻底隐藏 chips */
body.dir-mode #selectedCategories {
    display: none !important;
}

.prod-card .oe-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: keep-all;
}
#pageSearch .breadcrumb-bar a.bc-link{
    color:#1d4ed8;
    font-size:13px;
    text-decoration:none;
    padding:0;
    background:transparent;
    border:none;
}
#pageSearch .breadcrumb-bar a.bc-link:hover{ text-decoration:underline; }
#pageSearch .breadcrumb-bar .bc-sep{
    color:#94a3b8;
    margin:0 6px;
    font-size:12px;
}

 :root {
     --srr-bg: #f7f8fa;
     --srr-card: #ffffff;
     --srr-text: #1f2937;
     --srr-muted: #6b7280;
     --srr-brand: #ff6b00;
     /* SRR主色 */
     --srr-brand-weak: #ffe8d9;
     --srr-border: #e5e7eb;
     --srr-radius: 16px;
     --srr-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
 }

body {
    background: var(--srr-bg);
    color: var(--srr-text);
}

/* 页面主容器间距 */
.srr-page {
    padding-top: 18px;
    padding-bottom: 28px;
}

/* 顶部面包屑/标题条 */
.srr-pagehead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.srr-page-title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: .5px;
}

.srr-subtle {
    color: var(--srr-muted);
    font-size: 13px;
}

/* 过滤条：吸顶 + 卡片化 */
.srr-filterbar {
    position: sticky;
    top: 64px;
    z-index: 1020;
    /* 视你 header 高度可微调 */
    background: var(--srr-card);
    border: 1px solid var(--srr-border);
    border-radius: var(--srr-radius);
    box-shadow: var(--srr-shadow);
    padding: 12px 14px;
    margin-bottom: 14px;
}

.srr-filterbar .form-control {
    border-radius: 12px;
}

.srr-filterbar .btn {
    border-radius: 12px;
}

.srr-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--srr-brand-weak);
    color: #8a3a00;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
    margin-right: 8px;
    margin-top: 8px;
}

/* 结果列表区域外框 */
.srr-resultwrap {
    background: var(--srr-card);
    border: 1px solid var(--srr-border);
    border-radius: var(--srr-radius);
    box-shadow: var(--srr-shadow);
    padding: 10px;
}

/* 单条商品行：横向卡片，移动端自动纵向 */
.srr-item {
    display: flex;
    gap: 14px;
    padding: 14px;
    border-bottom: 1px dashed var(--srr-border);
}

.srr-item:last-child {
    border-bottom: none;
}

.srr-item:hover {
    background: #fafafa;
}

.srr-thumb {
    width: 112px;
    min-width: 112px;
    height: 112px;
    border-radius: 12px;
    border: 1px solid var(--srr-border);
    overflow: hidden;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.srr-thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.srr-main {
    flex: 1;
    min-width: 0;
}

.srr-line {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.srr-name {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
}

.srr-oeline,
.srr-attrline {
    color: var(--srr-muted);
    font-size: 13px;
}

.srr-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

.srr-badge {
    font-size: 12px;
    padding: 4px 8px;
    background: #eef2ff;
    color: #1e3a8a;
    border-radius: 8px;
}

/* 确保库存/状态徽章在结果列表中可见，不会被父容器裁切或隐藏 */
#pageSearch .results-grid .badge {
    display: inline-block;
    position: relative;
    z-index: 5;
}

/* 允许中间列和右侧列在需要时显示溢出（避免裁切徽章） */
.item-row .flex-grow-1,
.item-row .text-end {
    overflow: visible;
}

.srr-side {
    width: 180px;
    min-width: 180px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
}

.srr-price {
    font-weight: 800;
    font-size: 18px;
}

.srr-cta .btn {
    border-radius: 12px;
    padding: .45rem .9rem;
}

@media (max-width: 992px) {
    .srr-item {
        flex-direction: column;
    }

    .srr-side {
        width: 100%;
        min-width: auto;
        align-items: flex-start;
    }
}

/* 骨架屏 */
.srr-skeleton .srr-item {
    animation: srrShine 1.2s linear infinite;
    background: linear-gradient(90deg, #f1f2f4 25%, #f7f8fa 37%, #f1f2f4 63%);
    background-size: 400% 100%;
}

.srr-skeleton .srr-thumb {
    background: #e9ecef;
    border-color: #e9ecef;
}

.srr-skeleton .srr-name,
.srr-skeleton .srr-oeline,
.srr-skeleton .srr-attrline,
.srr-skeleton .srr-price {
    background: #e9ecef;
    color: transparent;
    border-radius: 6px;
}

@keyframes srrShine {
    0% {
        background-position: 100% 0
    }

    100% {
        background-position: 0 0
    }
}

/* 分页置中 */
.srr-pagination {
    display: flex;
    justify-content: center;
    margin-top: 14px;
}

/* 页脚粘底（无结果时也在底部） */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.srr-page {
    flex: 1 0 auto;
}

footer {
    margin-top: auto;
}
 :root {
     --srr-bg: #f7f8fa;
     --srr-card: #fff;
     --srr-text: #1f2937;
     --srr-muted: #6b7280;
     --srr-brand: #ff6b00;
     --srr-border: #e5e7eb;
     --srr-radius: 16px;
     --srr-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
 }

html,
body {
    background: var(--srr-bg);
    color: var(--srr-text);
    overflow-x: hidden;
}

/* 通用容器：页面主区与粘底页脚支撑 */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

footer {
    margin-top: auto;
}

/* 顶部吸顶搜索条（手机端样式） */

.srr-search .form-control {
    height: 44px;
    border-radius: 999px;
}

.srr-search .btn {
    height: 44px;
    border-radius: 999px;
    padding: 0 16px;
}


/* 商品行：PC横向三段；手机改为纵向堆叠 */
.srr-thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.srr-cta .btn {
    border-radius: 12px;
    padding: .45rem .9rem;
}

/* 顶部 Banner 16:9 */
.srr-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 详情页底部 CTA（手机固定） */
.srr-fixed-cta .btn {
    height: 44px;
    border-radius: 12px;
}

/* 工具栏字段在极小屏允许换行，不强制 min-width */
@media (max-width: 575.98px) {
    .srr-field {
        min-width: 0 !important;
        flex: 1 1 100% !important;
    }
}

/* === SRR: 小屏下让左侧栏回落为普通流式，并排在列表上面 === */
@media (max-width: 991.98px) {
    .sidebar {
        order: -1;
        width: 100%;
        min-width: 0;
    }

    .sidebar-fixed {
        position: static !important;
        /* 取消 sticky，防遮挡/抖动 */
        top: auto !important;
        width: auto;
        min-width: 0;
        max-width: none;
        padding-right: 0;
    }

    .main-fixed {
        width: 100%;
        min-width: 0;
    }
}

/* === SRR: 结果行移动端纵向堆叠，右侧整行左对齐（强覆盖） === */
@media (max-width: 575.98px) {
    .results-grid .item-row {
        flex-direction: column !important;
    }

    .results-grid .item-row .item-right {
        flex: 1 0 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        text-align: left !important;
        margin-top: 8px;
    }
}

/* === SRR: 搜索条一行不换，输入自适应，按钮定宽 === */
.filter-bar .input-group {
    flex-wrap: nowrap !important;
    /* 关键：不换行 */
    align-items: center;
    max-width: 100%;
    min-width: 0;
}

:root {
    --srr-search-btn-w-desktop: 116px;
    /* “立即查询”按钮在PC更舒展 */
    --srr-search-btn-w-mobile: 96px;
    /* 手机更紧凑 */
}

.filter-bar .input-group .form-control {
    flex: 1 1 auto !important;
    /* 输入框吃剩余空间 */
    min-width: 0 !important;
    /* 允许收缩，防撑爆 */
}

/* 优化：自适应宽度 + 最小宽度，文本不截断 */
.filter-bar .input-group > .btn[type="submit"] {
    flex: 0 0 auto !important;
    /* 关键：宽度由内容决定 */
    width: auto !important;
    min-width: 108px;
    /* PC 给个舒适下限（按你字体大小可改 104~120） */
    padding: 0 12px !important;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .filter-bar .input-group > .btn[type="submit"] {
        min-width: 96px;
        /* 手机下限，保证“立即查询”四字不被裁 */
    }
}

/* ======= SRR Drawer（移动端左右滑出；PC 不变） ======= */

/* 移动端（≤991.98px）：抽屉是 fixed 层，默认隐藏在屏外；显示时滑入 */
@media (max-width: 991.98px) {
    .srr-drawer {
        position: fixed;
        top: 0;
        bottom: 0;
        z-index: 1065;
        width: 80vw;
        max-width: 360px;
        background: #fff;
        box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
        transition: transform .25s ease;
        will-change: transform;
        display: block;
    }

    .srr-drawer[aria-hidden="true"] {
        pointer-events: none;
    }

    .srr-drawer-left {
        left: 0;
        transform: translateX(-105%);
        border-right: 1px solid #e5e7eb;
    }

    .srr-drawer-right {
        right: 0;
        transform: translateX(105%);
        border-left: 1px solid #e5e7eb;
    }

    /* 打开状态：滑入屏幕内 */
    .srr-drawer.is-open.srr-drawer-left {
        transform: translateX(0);
    }

    .srr-drawer.is-open.srr-drawer-right {
        transform: translateX(0);
    }

    .srr-drawer-mask {
        position: fixed;
        inset: 0;
        z-index: 1060;
        background: rgba(0, 0, 0, .35);
        backdrop-filter: blur(1px);
    }

    .srr-drawer-mask[hidden] {
        display: none;
    }

    /* 边缘标签：半隐藏“耳朵”，降低干扰 */
    @media (max-width: 991.98px) {
        .srr-edge-tab {
            position: fixed;
            top: 60vh;
            /* 视口下半，避开搜索区 */
            z-index: 1030;
            /* 低于你的吸顶筛选条/导航 */
            display: inline-flex;
            align-items: center;
            gap: 6px;
            height: 32px;
            padding: 6px 8px;
            border-radius: 0 8px 8px 0;
            border: 1px solid #e5e7eb;
            background: rgba(255, 255, 255, .95);
            color: #1f2937;
            box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
            font-size: 14px;
            line-height: 1;
            cursor: pointer;
            transition: transform .2s ease, opacity .2s ease;
            opacity: .92;
        }

        .srr-edge-tab i {
            font-size: 18px;
        }

        /* 外侧圆角，靠中间那一侧直角 */
        .srr-edge-tab-left {
            left: -8px;
            transform: translateX(0);
            border-radius: 8px 0 0 8px;
        }

        /* 右侧(靠中间)为直角 */
        .srr-edge-tab-right {
            right: -8px;
            transform: translateX(0);
            border-radius: 0 8px 8px 0;
        }

        /* 左侧(靠中间)为直角 */
        /* 抽屉打开时，标签稍微后退，避免和抽屉重叠 */
        .srr-drawer.is-open ~ .srr-edge-tab-left {
            transform: translateX(-6px);
        }

        .srr-drawer.is-open ~ .srr-edge-tab-right {
            transform: translateX(6px);
        }
    }


}
/* PC（≥992px）：抽屉外壳必须是“真实盒子”，并保持三栏正常布局 */
@media (min-width: 992px) {
    .srr-drawer{
        position: static;
        transform: none;
        width: auto;
        max-width: none;
        box-shadow: none;
        display: block !important;
    }

    #drawerCategories,
    #drawerQuick{
        /* 让左右列跟随中间列高度，sticky 才稳定 */
        align-self: stretch;
    }

    /* ❗重要：PC 端吸顶统一由页面底部的 [SRR-STICKY-SIDEBAR-FINAL-V3] 控制。
       这里把历史 sticky 规则清空，避免与 FINAL-V3 互相覆盖导致“空白块/不吸顶”。 */
    #drawerQuick > aside.right-col,
    #leftCategory.sidebar-fixed{
        position: static !important;
        top: auto !important;
        max-height: none !important;
        overflow: visible !important;
        margin-top: 0 !important;
    }

    .srr-edge-tab,
    .srr-drawer-mask{
        display: none !important;
    }
}

/* ==== 标准名称/目录 chips 规范样式 ==== */
.std-selected {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    padding: 8px 10px;
    background: #f5f7fb;
    border: 1px solid #e6e8f0;
    border-radius: 10px;
    font-size: 13px;
    color: #1d2129;
}

.std-selected .label {
    color: #64748b;
    white-space: nowrap;
}

.std-selected .chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 4px 10px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #e5e7eb;
    line-height: 1.2;
    text-decoration: none;
    color: inherit;
}

.std-selected .chip > span {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60vw;
    /* 手机端不把一行撑爆 */
}

.std-selected .chip i {
    font-size: 14px;
    opacity: .65;
}

.std-selected .slash {
    color: #c5cbd6;
    user-select: none;
}

@media (min-width: 992px) {
    .std-selected .chip > span {
        max-width: 420px;
    }
}

/* ==== 分页：横向滚动 + 居中 + 等宽按钮 ==== */
.srr-pager {
    position: relative;
    padding: 8px 0;
    overflow-x: auto;
    overflow-y: hidden;
    /* 允许横向滚动 */
    -webkit-overflow-scrolling: touch;
    text-align: center;
}

.srr-pager .pagination {
    display: inline-flex;
    /* 整体居中 */
    flex-wrap: nowrap;
    gap: 6px;
    margin: 0;
}

.srr-pager .page-item .page-link {
    min-width: 36px;
    height: 36px;
    line-height: 34px;
    text-align: center;
    padding: 0 10px;
}

@media (max-width: 575.98px) {
    .srr-pager .page-item .page-link {
        min-width: 34px;
        height: 34px;
        line-height: 32px;
    }
}

/* 可选：轻微吸附手感（新浏览器） */
.srr-pager {
    scroll-snap-type: x proximity;
}

.srr-pager .page-item {
    scroll-snap-align: center;
}

/* === chips 高对比可读主题 === */
.std-selected {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    padding: 8px 10px;
    background: #f6f8ff;
    /* 比原先更亮的蓝灰底 */
    border: 1px solid #e3e8ff;
    border-radius: 10px;
    font-size: 13px;
    color: #111827;
}

.std-selected .label {
    color: #64748b;
    white-space: nowrap;
}

.std-selected .chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 5px 12px;
    border-radius: 999px;
    background: #eef2ff;
    /* pill 背景 */
    border: 1px solid #c7d2fe;
    /* 边框提亮 */
    color: #0b53b6;
    /* 文本深蓝，提高对比 */
    text-decoration: none;
}

.std-selected .chip:hover {
    background: #e0e7ff;
    border-color: #a5b4fc;
    color: #0a4596;
}

.std-selected .chip > span {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60vw;
}

.std-selected .chip i {
    font-size: 14px;
    opacity: .8;
    margin-left: .25rem;
}

.std-selected .slash {
    color: #9aa4b2;
    user-select: none;
}

@media (min-width: 992px) {
    .std-selected .chip > span {
        max-width: 420px;
    }
}

/* == 手机端“耳朵”标签：更克制、低于分页的层级 == */
@media (max-width: 991.98px) {
    .srr-edge-tab {
        position: fixed;
        top: 60vh;
        /* 避开搜索区 */
        z-index: 1020;
        /* 低于分页(1032) */
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 30px;
        padding: 6px 8px;
        border-radius: 0 8px 8px 0;
        border: 1px solid #e5e7eb;
        background: rgba(255, 255, 255, .95);
        color: #1f2937;
        box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
        font-size: 14px;
        line-height: 1;
        cursor: pointer;
        transform: translateX(0);
        opacity: .92;
        transition: transform .2s ease, opacity .2s ease;
    }

    .srr-edge-tab i {
        font-size: 18px;
    }

    .srr-edge-tab-left {
        left: -8px;
        transform: translateX(0);
        border-radius: 8px 0 0 8px;
    }

    /* 右侧(靠中间)为直角 */
    .srr-edge-tab-right {
        right: -8px;
        transform: translateX(0);
        border-radius: 0 8px 8px 0;
    }

    /* 左侧(靠中间)为直角 */
    /* 抽屉打开时，耳朵略微让位 */
    .srr-drawer.is-open ~ .srr-edge-tab-left {
        transform: translateX(-6px);
    }

    .srr-drawer.is-open ~ .srr-edge-tab-right {
        transform: translateX(6px);
    }
}

/* == 分页容器：手机端横向滚动 + 更高层级，保证可滑动 == */
.srr-pager {
    position: relative;
    padding: 8px 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    text-align: center;
    scroll-snap-type: x proximity;
    /* 轻微吸附（新浏览器） */
    touch-action: pan-x;
    /* 明确允许横向拖动 */
    z-index: 1032;
    /* 高于耳朵(1020) */
}

.srr-pager .pagination {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 6px;
    margin: 0;
    white-space: nowrap;
    /* 绝不换行 */
}

.srr-pager .page-item .page-link {
    min-width: 36px;
    height: 36px;
    line-height: 34px;
    text-align: center;
    padding: 0 10px;
}

@media (max-width: 575.98px) {
    .srr-pager .page-item .page-link {
        min-width: 34px;
        height: 34px;
        line-height: 32px;
    }
}

/* ==== 目录/已选 chips 高对比主题 + 自动换行 ==== */
.std-selected {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    padding: 8px 10px;
    background: #f6f8ff;
    /* 亮底 */
    border: 1px solid #e3e8ff;
    border-radius: 10px;
    font-size: 13px;
    color: #111827;
}

.std-selected .label {
    color: #5f6b7a;
    white-space: nowrap;
}

.std-selected .chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 6px 12px;
    border-radius: 999px;
    background: #eef2ff;
    /* pill */
    border: 1px solid #c7d2fe;
    color: #0b53b6;
    /* 更高对比度 */
    text-decoration: none;
}

.std-selected .chip:hover {
    background: #e0e7ff;
    border-color: #a5b4fc;
    color: #0a4596;
}

.std-selected .chip > span {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60vw;
    /* 手机不把一行撑爆 */
}

.std-selected .chip i {
    font-size: 14px;
    opacity: .85;
    margin-left: .25rem;
}

.std-selected .slash {
    color: #9aa4b2;
    user-select: none;
}

@media (min-width: 992px) {
    .std-selected .chip > span {
        max-width: 420px;
    }
}

/* == 手机端“耳朵”：半隐藏耳朵 + 层级低于分页 == */
@media (max-width: 991.98px) {
    .srr-edge-tab {
        position: fixed;
        top: 58vh;
        /* 避开过滤条与首屏卡片 */
        z-index: 1020;
        /* 分页将是 1032 */
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 30px;
        padding: 6px 8px;
        border-radius: 0 8px 8px 0;
        border: 1px solid #e5e7eb;
        background: rgba(255, 255, 255, .95);
        color: #1f2937;
        box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
        font-size: 14px;
        line-height: 1;
        cursor: pointer;
        transform: translateX(0);
        opacity: .9;
        transition: transform .2s ease, opacity .2s ease;
    }

    .srr-edge-tab i {
        font-size: 18px;
    }

    .srr-edge-tab-left {
        left: -8px;
        transform: translateX(0);
        border-radius: 8px 0 0 8px;
    }

    /* 右侧(靠中间)为直角 */
    .srr-edge-tab-right {
        right: -8px;
        transform: translateX(0);
        border-radius: 0 8px 8px 0;
    }

    /* 左侧(靠中间)为直角 */
    /* 抽屉打开时，耳朵稍微退让 */
    .srr-drawer.is-open ~ .srr-edge-tab-left {
        transform: translateX(-6px);
    }

    .srr-drawer.is-open ~ .srr-edge-tab-right {
        transform: translateX(6px);
    }
}

/* == 分页横向滚动 + 等宽按钮 + 高层级，保证可滑动 == */
.srr-pager {
    position: relative;
    padding: 8px 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    text-align: center;
    scroll-snap-type: x proximity;
    /* 轻微吸附 */
    touch-action: pan-x;
    /* 明确允许横向拖动 */
    z-index: 1032;
    /* 高于耳朵 */
}

.srr-pager .pagination {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 6px;
    margin: 0;
    white-space: nowrap;
    /* 绝不换行 */
}

.srr-pager .page-item .page-link {
    min-width: 36px;
    height: 36px;
    line-height: 34px;
    text-align: center;
    padding: 0 10px;
}

@media (max-width: 575.98px) {
    .srr-pager .page-item .page-link {
        min-width: 34px;
        height: 34px;
        line-height: 32px;
    }
}

/* 让 chip 能承载绝对定位的关闭叉 */
.std-selected .chip {
    position: relative;
    padding-right: 22px;
}

/* 关闭叉的命中/对比度更友好（沿用你现有 .chip-close 定位规则） */
.std-selected .chip .chip-close {
    position: absolute;
    top: 50%;
    right: 2px;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    line-height: 18px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #334155;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    box-shadow: none;
    outline: none;
}
.std-selected .chip .chip-close:hover {
    background: #eef2ff;
}

/* 提升条本身与边框对比度（你原来已是 #f5f7fb/#e6e8f0，这里略增强即可） */
.std-selected {
    background: #F5F7FB;
    border: 1px solid #E6ECF5;
}

/* 小屏更紧凑的多行换行表现 */
@media (max-width: 767.98px) {
    .std-selected {
        gap: 6px 8px;
        padding: 8px;
    }

    .std-selected .chip > span {
        max-width: 70vw;
    }
}

/* === 小屏卡片：方形顶图 + 竖向信息 + 底部按钮（两列卡片更耐看） === */
@media (max-width: 575.98px) {

    /* 覆盖你 HTML 内联的 96/100px 宽度，改成全宽顶图 */
    .results-grid .item-row > div:first-child {
        width: 100% !important;
        flex: 0 0 auto !important;
    }

    .results-grid .item-row > div:first-child a {
        display: block;
    }

    /* 图片按方形展示，LOGO/商品图不裁切（contain），带轻边框与留白 */
    .results-grid .item-row img.prod-img {
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: contain;
        background: #fff;
        border: 1px solid #eee;
        border-radius: 10px;
        padding: 8px;
    }
    /* 信息区与按钮的间距与对齐（商品行右侧已改为 .item-right） */
    .results-grid .item-row {
        flex-direction: column;
        padding: 12px;
    }

    .results-grid .item-row .item-right {
        flex: 1 0 100%;
        max-width: 100%;
        min-width: 0;
        text-align: left;
        margin-top: 8px;
    }

    /* 按钮并排自适应，避免换行难看 */
    .results-grid .item-row .btn-wrap {
        display: flex;
        gap: 8px;
    }

    .results-grid .item-row .btn-wrap .btn {
        flex: 1 1 0;
        min-width: 0;
    }

    /* 标题限制两行，避免把卡片撑高太多 */
    .results-grid .item-row .fw-bold a {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

:root {
    --srr-orange: #FF6A00;
}

/* 若已全站定义可省略 */
#pageSearch #siteHeader .srr-cart {
    color: var(--srr-orange) !important;
}

#pageSearch #siteHeader .nav-link:hover .srr-cart {
    color: #E45A00 !important;
}

#pageSearch .prod-card {
    display: flex;
    flex-direction: column;
}

#pageSearch .prod-card .title {
    min-height: 2.6em;
    line-height: 1.3;
    overflow: hidden;
}

#pageSearch .prod-card .oe-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: keep-all;
}

/* === [SRR-SEARCH-LAYOUT] 统一左右栏 + 结果区布局（覆盖前面零散定义） === */

/* 外层容器：在大屏上稍微放宽，减少“中间太空”的感觉 */
#pageSearch .page-wrap {
    max-width: 1500px;
    /* 原来是 1400，这里稍微放大一点，适配 1920 */
    margin: 0 auto;
    padding: 16px;
}

/* 三列主容器：左分类 + 中结果 +（可选）右栏 */
#pageSearch .page-wrap > .d-flex {
    align-items: stretch;  /* ✅关键：左右两列高度跟随中间主内容，sticky 才有“可滚动边界” */
    gap: 16px;
}
/* ✅ [SRR-STICKY-FIX] 让左右两列容器本身也跟随中间高度（否则 sticky 仍可能失效） */
@media (min-width: 992px){
    #pageSearch .page-wrap > .d-flex > #drawerCategories,
    #pageSearch .page-wrap > .d-flex > #drawerQuick{
        align-self: stretch;
    }

    /* 左侧：sidebar 需要撑满父容器高度，给 sticky 正确边界 */
    #pageSearch #drawerCategories > aside.sidebar{
        height: 100%;
    }
}

/* 1366 笔记本这一档：保留足够空间，左侧适度宽度避免覆盖中间 */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    #pageSearch .page-wrap > .d-flex {
        gap: 12px;
        /* 适度间隙，避免左右内容贴合 */
    }

    #pageSearch .sidebar-fixed {
        flex: 0 0 240px;
        /* 左侧标准名称区域改为 240px（比 300 更适配笔记本） */
        max-width: 240px;
        min-width: 240px;
    }
}

/* 1440 ~ 1599：在更宽的笔记本上适当放宽中间区，避免重叠 */
@media (min-width: 1400px) and (max-width: 1599.98px) {
    #pageSearch .page-wrap {
        max-width: 1520px;
    }

    #pageSearch .page-wrap > .d-flex {
        gap: 20px;
        /* 增大间隙，缓解 1440 下挤压 */
    }

    #pageSearch .sidebar-fixed {
        flex: 0 0 220px;
        /* 适度减小侧栏，让中间更宽 */
        max-width: 220px;
        min-width: 220px;
    }
}

/* 1600 ~ 1919：大屏预留更大左右空白，避免分类与中间区挤在一起 */
@media (min-width: 1600px) and (max-width: 1919.98px) {
    #pageSearch .page-wrap {
        max-width: 1700px;
    }

    #pageSearch .page-wrap > .d-flex {
        gap: 20px;
    }

    #pageSearch .sidebar-fixed {
        flex: 0 0 240px;
        max-width: 240px;
        min-width: 240px;
    }
}

/* 超宽屏（>=1920）：增加间隙并放宽容器，避免左右两侧挤在一起 */
@media (min-width: 1920px) {
    #pageSearch .page-wrap {
        max-width: 1800px;
    }

    #pageSearch .page-wrap > .d-flex {
        gap: 32px;
    }

    #pageSearch .sidebar-fixed {
        flex: 0 0 240px;
        max-width: 240px;
        min-width: 240px;
    }
}

/* 左侧分类：固定宽度，笔记本上不要太占地方（与中间留出外部缝隙） */
#pageSearch .sidebar-fixed{
    position: sticky;
    top: calc(var(--srr-header-h, 64px) + 12px); /* ✅贴在菜单栏下面 */
    flex: 0 0 260px;
    max-width: 260px;
    min-width: 260px;

    /* 不再用 margin 撑缝隙，统一交给 gap */
    margin-right: 0;
    padding-right: 0;

    background: #fff;
    border-radius: 12px;
    z-index: 5;

    /* ✅保证内容多时不把页面顶坏：侧栏内部滚动 */
    max-height: calc(100vh - var(--srr-header-h, 64px) - 20px);
    overflow: auto;
}
/* ✅右侧快速筛选：强制 sticky，始终贴在菜单栏下面 */
@media (min-width: 992px){
    #pageSearch #rightAside{
        position: sticky;
        top: calc(var(--srr-header-h, 64px) + 12px);
        z-index: 5;
        max-height: calc(100vh - var(--srr-header-h, 64px) - 20px);
        overflow: auto;
    }
}
/* =============================
✅ 左侧分类树：树区域单独滚动
目标：展开很多分类时，标题/搜索框固定可见，树内部出现滚动条
============================= */
#pageSearch #leftCategory.sidebar-fixed{
    display: flex;
    flex-direction: column;
    overflow: hidden; /* 关闭整个卡片滚动，避免“双滚动条” */
}
#pageSearch #leftCategory.sidebar-fixed #catFilterBar{
    flex: 0 0 auto;
}
/* [替换 3027-3033] 左侧分类树：树区域单独滚动（纵向+横向都支持） */
#pageSearch #leftCategory.sidebar-fixed #catTree{
    flex: 1 1 auto;
    min-height: 0;                 /* 关键：允许 flex 子项收缩，从而出现滚动 */
    overflow-y: auto;
    overflow-x: auto;              /* ✅ 从 hidden 改成 auto：恢复横向滚动条 */
    padding-right: 6px;            /* 给滚动条留点空隙，不压文字 */
    scrollbar-gutter: stable;      /* ✅ 防止滚动条出现/消失导致宽度抖动 */
}
/* 中间结果区域：自适应宽度 */
#pageSearch .main-fixed {
    flex: 1 1 auto;
    min-width: 0;
}

/* 1366 ~ 1399：整体略放宽一点，减少“中间空白” */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    #pageSearch .page-wrap {
        max-width: 1360px;
        /* 更贴近 1366 视口宽度 */
    }
}

@media (max-width: 1199.98px) {
    #pageSearch .page-wrap > .d-flex {
        flex-wrap: wrap;
    }

    #pageSearch .sidebar-fixed,
    #pageSearch .main-fixed {
        flex: 1 0 100%;
        max-width: 100%;
        min-width: 0;
        padding-right: 0;
        margin-right: 0;
        /* ← 小屏不需要左右缝隙，放满整行 */
    }
}

/* 1920 ~ 2559：两列商品，整体宽度控制在 1900 内，居中显示 */
@media (min-width: 1920px) and (max-width: 2559.98px) {
    #pageSearch .page-wrap {
        max-width: 1900px;
        margin: 0 auto;
    }

    #pageSearch .page-wrap > .d-flex {
        gap: 24px;
    }

    #pageSearch .sidebar-fixed {
        flex: 0 0 260px;
        max-width: 260px;
        min-width: 260px;
    }
}

/* 2560 ~ 3071：更宽一点的显示器（高端显示器），整体再放宽一点点 */
@media (min-width: 2560px) and (max-width: 3071.98px) {
    #pageSearch .page-wrap {
        max-width: 2200px;
        margin: 0 auto;
    }

    #pageSearch .page-wrap > .d-flex {
        gap: 28px;
    }

    #pageSearch .sidebar-fixed {
        flex: 0 0 280px;
        max-width: 280px;
        min-width: 280px;
    }
}

/* 3072 及以上超宽屏：限制在 ~2300 左右，防止页面被拉得太散 */
@media (min-width: 3072px) {
    #pageSearch .page-wrap {
        max-width: 2300px;
        margin: 0 auto;
    }

    #pageSearch .page-wrap > .d-flex {
        gap: 32px;
    }

    #pageSearch .sidebar-fixed {
        flex: 0 0 300px;
        max-width: 300px;
        min-width: 300px;
    }
}


/* 标准名称树：名称单行省略，不再“串行” */
#pageSearch #catTree label {
    display: flex;
    align-items: center;
    gap: .25rem;
}

#pageSearch #catTree label span:first-of-type {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* 名称太长直接省略号，不折行 */
}

#pageSearch #catTree label .text-muted {
    flex: 0 0 auto;
    white-space: nowrap;
    /* 数量永远在一行里 */
}

/* 结果区：默认 1 列，超宽屏（>=1500）变 2 列；手机端保持 2 列卡片 */
#pageSearch .results-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr;
}

/* PC 大屏：1500 开始用两列，1920 全屏时就不会只显示一列太空了 */
@media (min-width: 1500px) {
    #pageSearch .results-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* 手机：继续保持两列小卡片 */
@media (max-width: 575.98px) {
    #pageSearch .results-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
}


/* 1) 桌面端左右两侧缝隙一致：只用 gap 控制列间距，去掉左右额外 margin */
@media (min-width: 1200px) {
    #pageSearch .page-wrap > .d-flex {
        gap: 16px;
        /* 左-中-右 之间统一 16px */
    }

    /* 左边分类卡 + 右边快速筛选都不要额外 margin，只用上面的 gap */
    #pageSearch .sidebar-fixed,
    #pageSearch #rightAside {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* 2) 结果卡片操作区：数量在上、按钮在下，整体靠右 */
#pageSearch .result-actions {
    display: flex;
    flex-direction: column;
    /* 第一行数量，第二行按钮 */
    align-items: flex-end;
    /* 整块贴着卡片右边 */
    gap: 8px;
    /* 数量和按钮之间的竖直缝隙 */
}

/* 当我们把数量输入包一层并加上前缀文字时的样式 */
#pageSearch .result-actions .qty-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

#pageSearch .result-actions .qty-wrap .qty-label {
    font-size: 13px;
    color: var(--srr-muted, #6b7280);
    white-space: nowrap;
    margin-right: 4px;
}

/* 如果页面里使用了 .qty-group（input + 按钮在同一行），保证它们对齐并有间隙 */
#pageSearch .result-actions .qty-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* 按钮行：左右并列，靠右对齐，保持与之前样式一致 */
#pageSearch .result-actions .btn-row {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    align-items: stretch; /* 让两个按钮高度完全一致 */
}

/* 两个按钮高度统一，看起来更工整 */
#pageSearch .result-actions .btn-outline-primary,
#pageSearch .result-actions .btn-primary {
    height: 36px;
    padding-inline: 14px;
}

/* 收藏星星按钮：小方块，和加购/购买同一行对齐 */
#pageSearch .result-actions .btn-fav {
    width: 36px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
#pageSearch .result-actions .btn-fav i {
    font-size: 18px;
    line-height: 1;
}
#pageSearch .result-actions .btn-fav.fav-on i {
    color: #f59e0b; /* 星星高亮 */
}

.filter-clear{
    height: 40px;
    padding: 0 12px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    color: #2563eb;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}
.filter-clear:hover{ background:#f8fafc; }

@media (max-width: 768px){
    .submodel-wrap{ flex-wrap:wrap; row-gap:8px; }
    .submodel-wrap .filter-clear{ margin-left:auto; }
}
/* 品牌/车型筛选：同一行 3 个等宽 + 清除筛选同一行 */
/* 品牌/车型筛选：同一行（桌面端固定一行） 3 个等宽 + 清除筛选同一行（更稳的 Grid 方案） */
.vehicle-filter-row{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    align-items:center;
    gap:10px;
}

/* 每个下拉（品牌/车型/子车型）内部仍然按“图标+输入”布局 */
.vehicle-filter-row .vehicle-col{
    min-width:0;                 /* 允许缩小，避免被 min-width 挤到换行 */
    display:flex;
    flex-direction:column;
}

/* 清除筛选按钮：保证可点击（不被下拉层遮挡） */
.vehicle-filter-row #btn-clear-all{
    height:40px;
    padding:0 12px;
    border-radius:8px;
    position:relative;
    z-index:50;
    justify-self:end;
    white-space:nowrap;
}

/* 小屏：允许换行，保持易用 */
@media (max-width: 767.98px){
    .vehicle-filter-row{
        grid-template-columns: 1fr;
    }
    .vehicle-filter-row #btn-clear-all{
        width:100%;
        justify-self:stretch;
        justify-content:center;
    }
}
/* 热销榜独立模式：中间“目录/已选分类”不显示（上线求稳） */
.hotrank-mode #stdBreadcrumbBar,
.hotrank-mode #selectedCategories{
    display:none !important;
}

/* 热销榜高亮（再次点击退出） */
.hot-std.active{
    background:#fff7ed;
    border-color:#fed7aa;
    color:#c2410c;
    font-weight:700;
}
/* 热销榜模式：为避免“叠加条件”造成状态不一致，先禁用其他筛选区（退出热销榜后自动恢复） */
.hotrank-mode #vehicleFilterRow,
.hotrank-mode #quickFilterCard,
.hotrank-mode #catTree{
    pointer-events:none;
    opacity:.55;
}

/* 热销榜卡片保持可点击 */
.hotrank-mode #hotRankCard{
    pointer-events:auto;
    opacity:1;
}

/* =======================================================================
   SRR-SEARCH-LAYOUT-FINAL-V4  (解决：左右与中间间距不一致、左侧贴边、断点混乱)
   关键：PC(>=992) 只认 grid 三列：#drawerCategories / main / #drawerQuick
   ======================================================================= */
#pageSearch{
    --srr-side-w: clamp(240px, 18vw, 280px); /* 主流13-16寸：240~280自动收缩 */
    --srr-col-gap: 16px;                    /* 左-中 / 中-右 间距严格一致 */
}

/* PC：三列强制 grid，彻底杜绝 flex + 多段margin/padding叠加导致的“不对称缝隙” */
@media (min-width: 992px){
    /* ① 三列骨架 */
    #pageSearch .page-wrap > .d-flex{
        display: grid !important;
        grid-template-columns: var(--srr-side-w) minmax(0, 1fr) var(--srr-side-w) !important;
        gap: var(--srr-col-gap) !important;          /* 覆盖 bootstrap 的 gap-3 */
        align-items: start;
    }

    /* ② 明确三列放置（避免 5 个子元素自动换列造成“巨大空白”） */
    #pageSearch .page-wrap > .d-flex > #drawerCategories{ grid-column: 1 !important; }
    #pageSearch .page-wrap > .d-flex > main.main-fixed{   grid-column: 2 !important; min-width:0 !important; }
    #pageSearch .page-wrap > .d-flex > #drawerQuick{      grid-column: 3 !important; }

    /* ③ edge tab / mask：PC 下不参与布局（再次兜底，防止被历史规则覆盖） */
    #pageSearch .srr-edge-tab,
    #pageSearch .srr-drawer-mask{
        display:none !important;
    }

    /* ④ 左右列宽度交给 grid，不允许内部再用 margin/padding 造“额外缝隙” */
    #pageSearch #leftCategory.sidebar-fixed{
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin-right: 0 !important;
        padding-right: 0 !important;
    }
    #pageSearch #drawerQuick > aside.right-col{
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin-left: 0 !important;
    }
    #pageSearch .main-fixed{
        padding: 0 !important;   /* 中间不再加左右padding，否则会造成视觉不等距 */
        margin: 0 !important;
        min-width: 0 !important;
    }

    /* ⑤ page-wrap：避免“贴边感”，同时兼容 1920 / 1600 / 1366 主流屏幕
          - max-width 不要写死 1280（你现在就是 1280，导致 1920 下视觉偏窄）
          - 采用更稳的 min()：大屏放宽，小屏自动收敛
     */
    #pageSearch .page-wrap{
        max-width: min(1500px, calc(100vw - 48px)) !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* 1366~1440：中间区更舒适一点（防止按钮区挤压导致“看着像有缝隙不一致”） */
@media (min-width: 1280px) and (max-width: 1440px){
    #pageSearch{ --srr-side-w: clamp(240px, 20vw, 280px); }
}

/* 1200~1279：13寸高频区间，左右栏再略收一点给中间 */
@media (min-width: 1200px) and (max-width: 1279.98px){
    #pageSearch{ --srr-side-w: 240px; --srr-col-gap: 14px; }
}

/* ===== SRR PATCH 2026-02-27: search 三栏间距“京东式稳定” =====
   目的：
   1) Edge Tab(移动端抽屉开关) 不再参与桌面端三栏排版，避免出现“左侧多一块空白列”
   2) 桌面端强制三栏 Grid：左右栏宽固定，中间自适应；左右与中间间距始终一致
*/
#pageSearch .srr-edge-tab{
    position: fixed; /* 永远脱离文档流，避免影响三栏间距 */
    z-index: 1060;
}
@media (min-width: 992px){
    #pageSearch .srr-edge-tab{ display:none !important; }

    /* 兜底：强制以 grid 统一三栏（左右固定宽，中间自适应） */
    #pageSearch .page-wrap > .d-flex{
        display:grid !important;
        grid-template-columns: var(--srr-side-w) minmax(0, 1fr) var(--srr-side-w) !important;
        column-gap: var(--srr-col-gap, 16px) !important; /* ✅ 修复：--srr-gap 不存在 */
        row-gap: 0 !important;
        align-items:start !important;
    }

    #pageSearch #drawerCategories,
    #pageSearch #drawerQuick{
        width:auto !important;
        margin:0 !important;
    }
    #pageSearch #drawerCategories > aside,
    #pageSearch #drawerQuick > aside{
        width:100% !important;
        max-width:none !important;
    }
}
/* ===== END PATCH ===== */

/* =========================================================
 * [SRR-SEARCH-LAYOUT-FINAL-20260227-V2]
 * ✅目标：
 * 1) PC端(>=992)始终三列（左/中/右）不遮挡
 * 2) 左右两侧到中间距离始终一致（对称）
 * 3) 按主流屏幕分档：<=1280 / 1366 / 1440 / 1536&1600 / 1920 / >=2560
 * 说明：放文件末尾，使用 !important 作为最终裁决，压住历史规则
 * ========================================================= */

/* 基线：先按“小笔记本极限(<=1280)”设定，往上逐档放大 */
#pageSearch{
    --srr-gap: 14px;
    --srr-side-w: 220px;
    --srr-page-max: 1320px; /* 容器最大宽度：避免超宽屏两边空太大，也避免小屏被写死 */
    --srr-sticky-top: calc(var(--srr-header-h, 64px) + 12px);
}

/* ≤1280：小笔记本极限（ThinkPad/老屏） */
@media (min-width: 992px) and (max-width: 1279.98px){
    #pageSearch{
        --srr-side-w: 220px;
        --srr-gap: 12px;
        --srr-page-max: 1280px;
    }
    /* 小屏稍收紧筛选条内边距（不改HTML class，直接CSS兜底） */
    #pageSearch .filter-bar{ padding: 16px !important; }
}

/* 1280~1365：介于极限与 1366 之间（兼容缩放后常见宽度） */
@media (min-width: 1280px) and (max-width: 1365.98px){
    #pageSearch{
        --srr-side-w: 230px;
        --srr-gap: 14px;
        --srr-page-max: 1360px;
    }
}

/* 1366×768：最常见小笔记本 */
@media (min-width: 1366px) and (max-width: 1439.98px){
    #pageSearch{
        --srr-side-w: 240px;
        --srr-gap: 16px;
        --srr-page-max: 1400px;
    }
}

/* 1440×900：常见办公本 */
@media (min-width: 1440px) and (max-width: 1535.98px){
    #pageSearch{
        --srr-side-w: 250px;
        --srr-gap: 16px;
        --srr-page-max: 1500px;
    }
}

/* 1536×864：缩放后常见 */
@media (min-width: 1536px) and (max-width: 1599.98px){
    #pageSearch{
        --srr-side-w: 260px;
        --srr-gap: 18px;
        --srr-page-max: 1560px;
    }
}

/* 1600×900：缩放后常见 */
@media (min-width: 1600px) and (max-width: 1919.98px){
    #pageSearch{
        --srr-side-w: 260px;
        --srr-gap: 18px;
        --srr-page-max: 1680px;
    }
}

/* 1920×1080：主流大屏 */
@media (min-width: 1920px) and (max-width: 2559.98px){
    #pageSearch{
        --srr-side-w: 280px;
        --srr-gap: 20px;
        --srr-page-max: 1800px;
    }
}

/* ≥2560：2K/3K 大屏扩展 */
@media (min-width: 2560px){
    #pageSearch{
        --srr-side-w: 320px;
        --srr-gap: 24px;
        --srr-page-max: 2200px;
    }
}

/* 页面容器：永远不超过视口（减去左右 padding），保证左右视觉对称 */
#pageSearch .page-wrap{
    max-width: min(var(--srr-page-max), calc(100vw - 32px)) !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
}

/* PC端：三列 Grid（稳定、对称、不会互相遮挡） */
@media (min-width: 992px){
    #pageSearch .page-wrap > .d-flex{
        display: grid !important;
        grid-template-columns:
            minmax(0, var(--srr-side-w))
            minmax(0, 1fr)
            minmax(0, var(--srr-side-w)) !important;
        gap: var(--srr-gap) !important;          /* 覆盖 bootstrap gap-3，避免双重间距 */
        align-items: start !important;
        justify-items: stretch !important;
        min-width: 0 !important;
    }

    /* Grid 子项允许收缩：1366/<=1280 最关键 */
    #pageSearch .page-wrap > .d-flex > *{
        min-width: 0 !important;
        max-width: none !important;
    }

    /* 三列外壳必须参与布局（不要 fixed/absolute） */
    #pageSearch #drawerCategories,
    #pageSearch #drawerQuick{
        position: static !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        align-self: stretch !important;
    }

    /* 关键：把“外壳 aside”宽度限制清掉，避免被旧规则 min-width:260px 撑爆 */
    #pageSearch #drawerCategories > aside.sidebar,
    #pageSearch #drawerQuick > aside.right-col{
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        flex: 0 0 auto !important;
    }

    /* 左右实际侧栏：统一 sticky，并允许内部滚动（列表多时不撑爆） */
    #pageSearch #leftCategory,
    #pageSearch #rightAside{
        position: sticky !important;
        top: var(--srr-sticky-top) !important;
        align-self: start !important;
        max-height: calc(100vh - var(--srr-sticky-top) - 12px) !important;
        overflow: auto !important;
        scrollbar-gutter: stable both-edges;
        width: 100% !important;      /* 让卡片跟随 Grid 列宽，而不是自己定死宽度 */
        min-width: 0 !important;
        max-width: none !important;
    }

    /* 中间主列：允许收缩，避免被内部内容撑爆导致“压到右侧” */
    #pageSearch main.main-fixed{
        min-width: 0 !important;
        max-width: none !important;
    }

    /* =========================
 * [SRR-SEARCH-SYMMETRY-FIX-20260227]
 * 目的：解决“左右列宽一样但视觉不对称”
 * 关键：强制三列里的“卡片/容器”都撑满各自 grid 列宽
 * ========================= */

    /* 1) 左/右侧：卡片必须撑满列宽（避免 max-width 导致看起来离中间不一致） */
    #pageSearch #drawerCategories > aside.sidebar,
    #pageSearch #drawerQuick > aside.right-col,
    #pageSearch #leftCategory,
    #pageSearch #rightAside{
        width: 100% !important;
        max-width: none !important;
    }

    /* 2) 中间列：第一层容器也必须撑满，且不允许左右 margin 造成“视觉偏移” */
    #pageSearch main.main-fixed > *{
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* 3) 某些浏览器/缩放下，结果卡片可能被内部布局挤出“假边距”，这里统一归零 */
    #pageSearch #resultPanel,
    #pageSearch #resultPanel .group{
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* 右侧卡片/多语言：不允许任何子元素把右列撑宽 */
    #pageSearch #drawerQuick,
    #pageSearch #drawerQuick *{
        min-width: 0 !important;
        max-width: 100% !important;
    }
}

/* 移动端抽屉：保持原有移动端行为（≤991.98） */
@media (max-width: 991.98px){
    #pageSearch .page-wrap{
        max-width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* ===== 全站容器 ===== */
.srr-container {
    width: 100%;
    margin: 0 auto;
    padding: 0 12px;
}

/* 电商行业最大宽度 */
@media (min-width: 1920px) {
    .srr-container {
        max-width: 1680px;
    }
}

@media (min-width: 2560px) {
    .srr-container {
        max-width: 1920px;
    }
}

/* =========================================================
 * [SRR-SEARCH-FINAL-SYMMETRY-LOCK-V1]  ✅最终强制：PC三列左右间距永远一致
 * 说明：你文件中后半段存在多套“旧布局覆盖”，会把右列写成 240/260 等导致不对称。
 *      这里在文件末尾做最终覆盖，避免再被后续规则改回去。
 * 影响范围：仅 PC (>=992px)，移动端不动
 * ========================================================= */
@media (min-width: 992px){

    /* 1) 三列：用 grid 锁死左右列同宽、间距同值 */
    #pageSearch .page-wrap > .d-flex{
        display: grid !important;
        grid-template-columns: var(--srr-side-w) minmax(0, 1fr) var(--srr-side-w) !important;
        column-gap: var(--srr-col-gap) !important;
        gap: var(--srr-col-gap) !important;

        align-items: start !important;
        justify-items: stretch !important;
        min-width: 0 !important;
    }

    /* 2) 三个 grid 子项不允许自带 margin/padding 造成“假间距” */
    #pageSearch .page-wrap > .d-flex > #drawerCategories,
    #pageSearch .page-wrap > .d-flex > #drawerQuick,
    #pageSearch .page-wrap > .d-flex > .main-fixed{
        margin: 0 !important;
        padding: 0 !important;
        min-width: 0 !important;
    }

    /* 3) 左右栏：把旧的 240/260/flex-basis/max-width 统统打掉，让其撑满各自列宽 */
    #pageSearch .sidebar-fixed,
    #pageSearch .right-col,
    #pageSearch #rightAside{
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;

        /* 清掉旧的 flex 固定值，避免“右列变窄” */
        flex: unset !important;
        flex-basis: auto !important;
    }

    /* 4) 抽屉容器内部 aside 也必须撑满列宽 */
    #pageSearch #drawerCategories > aside.sidebar,
    #pageSearch #drawerQuick > aside.right-col{
        width: 100% !important;
        max-width: none !important;
    }

    /* 5) 兜底：任何子元素都不允许把右列撑宽或形成额外留白 */
    #pageSearch #drawerCategories *,
    #pageSearch #drawerQuick *{
        min-width: 0 !important;
        max-width: 100% !important;
    }
}

/* =========================================================
 * FINAL OVERRIDE（稳定版）- 左侧分类/右侧榜单长文本 + checkbox 统一
 * 目的：
 * 1) 左侧商品分类：必须能横向滚动显示全（中英文/俄文/日文都不截断）
 * 2) 右侧热销榜：长文本不“缺字”，用两行省略更美观
 * 3) 快速筛选/分类树：checkbox 视觉大小一致
 * ========================================================= */

/* ---------- 左侧分类树：允许横向滚动显示完整 ---------- */
/* 你原文件后面把 #catTree 改成 overflow-x:hidden（导致滚动条消失），这里强制纠正 */
#catTree,
.sidebar-fixed #catTree{
    overflow-x: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px; /* 让横向滚动条不贴边，肉眼更容易看到 */
    scrollbar-gutter: stable both-edges;
}

/* 每一行不换行，内容宽了就靠横向滚动查看 */
#catTree .tree-row,
#catTree label{
    white-space: nowrap !important;
}

/* 取消你原先的 max-width + ellipsis（翻译后才是“必须显示全”的核心） */
#catTree label > span{
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

/* 让树的“内容宽度”真实撑开，从而触发横向滚动 */
#catTree .tree-row{
    min-width: max-content;
}

/* ---------- checkbox 统一尺寸（左侧树 + 右侧快速筛选） ---------- */
#catTree input.cat-check,
#quickFilterCard .form-check-input{
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
    flex: 0 0 auto;
    vertical-align: middle;
}

/* ---------- 右侧热销榜：长文本显示两行，避免“显示不全/被截断难看” ---------- */
/* 你 search.html 里对热销榜标题用了 text-truncate + max-width:160px，这里统一成两行省略 */
#hotRankList .text-truncate{
    max-width: none !important;
    white-space: normal !important;

    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;

    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.25;
}

/* 热销榜每行改为顶部对齐，避免两行时 badge/文字挤歪 */
#hotRankList .list-group-item{
    align-items: flex-start;
}

/* ===== FIX V2（最终稳定）：分类树 “文字 + (数量)” 永远不叠字；行对齐不漂移 ===== */

/* 1) 只管树里真正的 label（一级/二级在 .tree-toggle 里，三级是 li 直接 label） */
#catTree .tree-toggle > label,
#catTree .tree-children > li > label{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    white-space: nowrap !important;
    margin: 0 !important;
}

/* 2) 锁死“箭头/checkbox”的宽度 → 彻底解决某一行右偏 */
#catTree .tree-toggle > i.bi{
    width: 16px !important;
    flex: 0 0 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#catTree input.cat-check{
    width: 14px !important;
    height: 14px !important;
    flex: 0 0 14px !important;
    margin: 0 6px 0 0 !important;  /* 统一所有行 checkbox 后面的距离 */
}

/* 3) “文字 span”用 first-of-type / not(.text-muted) 选中，别再用 first-child（会选到 input） */
#catTree .tree-toggle > label > span:not(.text-muted),
#catTree .tree-children > li > label > span:not(.text-muted){
    flex: 0 0 auto !important;
}

/* 4) 计数永远紧跟文字后面 */
#catTree .tree-toggle > label > span.text-muted,
#catTree .tree-children > li > label > span.text-muted{
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    margin-left: 4px !important;   /* 覆盖 bootstrap 的 ms-1，统一间距 */
}

/* ===== FIX V3：分类树（EN/RU 长文本）名称 + 计数永不重叠 ===== */
#catTree .tree-toggle,
#catTree .tree-children > li{
    min-width: max-content !important; /* 行宽按内容撑开，触发横向滚动，而不是挤压成重叠 */
}

#catTree .tree-toggle > label,
#catTree .tree-children > li > label{
    overflow: visible !important;
    flex-wrap: nowrap !important;
}

/* ===== FIX：分类树“名称 + 计数”最佳体验（不省略、不遮挡、数字永远在最右侧） =====
   目标：
   1) 名称不出现省略号；
   2) 数字不与名称重叠，始终贴在最右侧；
   3) 名称过长时自动换行（行业常见：宁可变高，也不要横向滚动/省略）。
*/

/* A) 整个树不做横向滚动，改为换行展示 */
#catTree{ overflow-x: hidden !important; }

/* B) label 作为一行容器，占满宽度 */
#catTree label{
    display: flex !important;
    align-items: flex-start !important;
    width: 100% !important;
    justify-content: flex-start !important;
    min-width: 0 !important; /* 允许子元素缩放换行 */
}

/* C) “名称+计数”容器：两列网格（左：名称可换行，右：计数固定不换行） */
#catTree .tree-text{
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    column-gap: 6px !important;
    align-items: baseline !important;

    /* 覆盖旧规则 #catTree label span:first-of-type 的 ellipsis/hidden */
    overflow: visible !important;
    text-overflow: unset !important;
    white-space: normal !important;
}

/* D) 名称（tree-text 的第一个 span）：不省略、允许换行 */
#catTree .tree-text > span:first-child{
    min-width: 0 !important;
    overflow: visible !important;
    text-overflow: unset !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}

/* E) 计数：永远在最右侧，不换行 */
#catTree .tree-text .tree-count{
    justify-self: end !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
}

/* 查询页：品牌 + 产品尺寸，真正拆成两个横向块 */
.brand-size-wrap{
    display:inline-flex;
    align-items:baseline;
    flex-wrap:wrap;
    column-gap:0;
    row-gap:2px;
}

.brand-size-wrap .brand-inline{
    display:inline-flex;
    align-items:baseline;
    column-gap:4px;
    white-space:nowrap;
    flex:0 0 auto;
}

.brand-size-wrap .size-inline{
    display:inline-flex;
    align-items:baseline;
    column-gap:4px;
    margin-left:26px;   /* 比原来的 18px 再拉开 */
    padding-left:8px;
    white-space:nowrap;
    flex:0 0 auto;
}

.brand-size-wrap .size-inline .attr-label{
    color:#666;
    white-space:nowrap;
}