/* === 头部购物车图标 + 角标统一样式（所有页面通用） === */
:root{ --srr-orange:#FF6A00; }

/* 图标统一橙色 */
#siteHeader .srr-cart{
    color: var(--srr-orange) !important;
}

/* hover 时稍微变深 */
#siteHeader .nav-link:hover .srr-cart{
    color:#E45A00 !important;
}

/* 如果以后换成 SVG 图标，这里保证描边颜色一致 */
#siteHeader .srr-cart svg path{
    fill: none !important;
    stroke: currentColor !important;
    stroke-width:1.6;
}


/* === 购物车表格：列对齐统一，名称列左对齐 === */
table#cartTable, table.srr-cart-table { width:100%; border-collapse:separate; border-spacing:0; }
table#cartTable th, table#cartTable td,
table.srr-cart-table th, table.srr-cart-table td{
    text-align:center !important; vertical-align:middle !important;
}
table#cartTable th:nth-child(3), table#cartTable td:nth-child(3),
table.srr-cart-table th:nth-child(3), table.srr-cart-table td:nth-child(3){
    text-align:left !important;
}
table#cartTable .form-control, table.srr-cart-table .form-control{ margin:0 auto; }

/* === 搜索页：两列/一列切换（去掉 auto-fill 的不稳定性） === */
#pageSearch .results-grid{
    display:grid;
    gap:16px;
    /* 默认：全部一列，保证左右侧栏存在时中间不被挤爆 */
    grid-template-columns: 1fr;
}

/* 只有真正的大屏（≥1700px，比如完整 1920 / 2K / 3K）才开启两列 */
@media (min-width: 1700px){
    #pageSearch .results-grid{ grid-template-columns: 1fr 1fr; }
}

/* === 搜索页：左右两侧栏统一宽度，避免视觉不对称 === */
#pageSearch .sidebar-fixed,
#pageSearch .right-col{
    position: sticky;
    top:84px;

    width:260px;
    min-width:260px;
    max-width:260px;

    align-self:flex-start;
    flex-shrink:0;
    z-index: 2;
    background:#fff;

    margin-right:0;
    padding-right:0;
}
/* 右侧快速筛选与中间商品之间保持同样缝隙 */
#pageSearch #rightAside{
    margin-left:0;
}

/* 小屏（<= 1200）下左右都不要额外 margin，避免挤压中间 */
@media (max-width: 1199.98px){
    #pageSearch #rightAside{
        margin-left:0;
    }
}
/* 笔记本宽度（1200–1600）：在不影响 1920 布局的前提下，把左右侧栏再放宽一点 */
@media (min-width: 1200px) and (max-width: 1600px){
    /* 左 - 中 - 右 之间缝隙保持一致 */
    #pageSearch .page-wrap > .d-flex{
        gap:10px;
    }

    /* 左边标准名称树 / 右侧快捷筛选：统一使用百分比宽度 + 最小 230 像素 */
    #pageSearch .sidebar-fixed,
    #pageSearch .right-col{
        width:18%;          /* 比原来的 14% 稍微放宽一档 */
        min-width:259px;    /* 1280 / 1366 / 1440 / 1536 下保证树形文字基本都能完整显示 */
        max-width:260px;    /* 不超过 260px，中间结果区域依然足够宽 */
    }
}


/* 移动端 / 平板：不需要左右缝隙，左右侧栏都放满整行 */
@media (max-width: 1199.98px){
    #pageSearch .sidebar-fixed,
    #pageSearch .right-col{
        margin-right:0;
        width:100%;
        max-width:100%;
    }
}

@media (max-width: 1280px){                    /* 更窄时直接单列，彻底避免遮挡 */
    #pageSearch .results-grid{ grid-template-columns: 1fr; }
}

/* === 搜索条：左右图标 & 输入框一律方形 === */
#pageSearch .filter-bar .input-group .input-group-text,
#pageSearch .filter-bar .input-group .form-control{ border-radius:0 !important; }
/* === SRR 通用：搜索框两侧“小方块按钮”统一尺寸（40×40） === */
.btn-filter-square{
    width:40px !important;
    height:40px !important;
    padding:0 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:10px !important;
}

/* 首页 & 详情页的图标字号统一 */
#pageIndex .btn-filter-square i,
#pageDetail .btn-filter-square i{
    font-size:1.15rem !important;
    line-height:1;
}
/* === 首页 & 详情页：搜索输入框 + 蓝色查询按钮统一高度 === */
#pageIndex .search-box .form-control,
#pageIndex .search-box .btn,
#pageDetail #globalSearch .form-control,
#pageDetail #globalSearch .btn{
    height:40px !important;
    font-size:16px;
}

/* === 首页 & 详情页：搜索框输入框 + 蓝色查询按钮统一高度 === */
#pageIndex .search-box .form-control,
#pageIndex .search-box .btn,
#pageDetail #globalSearch .form-control,
#pageDetail #globalSearch .btn{
    height:40px !important;     /* 和小按钮 40 的高度统一 */
    font-size:16px;
}

/* 左右对称：靠近输入框的那一侧为直角 */
#pageIndex .left-filter-btn, #pageDetail .left-filter-btn{
    border-top-right-radius:0 !important;
    border-bottom-right-radius:0 !important;
}
#pageIndex .right-filter-btn, #pageDetail .right-filter-btn{
    border-top-left-radius:0 !important;
    border-bottom-left-radius:0 !important;
}

/* === SRR: 查询页三列布局（PC ≥1200）：左栏 + 结果区 + 右栏 === */
@media (min-width: 1200px){
    /* 保持 Bootstrap 本身的 flex 布局，只调整间距和对齐 */
    #pageSearch .page-wrap > .d-flex{
        /* 不再强制使用 grid，避免把右侧区域“挤”到下一行 */
        align-items: flex-start;
        gap: 24px;                             /* 左 - 中 - 右 统一 24px 缝隙 */
    }

    /* 左边分类 / 中间结果 / 右侧筛选不再额外加左右 margin，只用 gap 控制 */
    #pageSearch .sidebar-fixed,
    #pageSearch .right-col,
    #pageSearch main.main-fixed{
        margin: 0 !important;
        padding-right: 0;
    }

    /* 右侧快速筛选整体紧贴第三列，不左右乱跑 */
    #pageSearch #rightAside{
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* === SRR: 查询页 三大区域柔和更新 & 防抖 === */
#leftCategory, #rightAside, #resultPanel{
    transition: opacity .18s ease, transform .18s ease;
    will-change: opacity, transform;
}
.updating{ opacity:.12; transform: scale(.997); }

/* 树形容器可选的高度过渡，避免瞬间合拢刺眼 */
#leftCategory .tree, #leftCategory .category-tree{
    transition: max-height .18s ease;
    overflow:hidden;
}
/* === SRR Search：结果卡片 操作区统一样式（数量在上，按钮在下，靠右、同宽） === */

/* 操作区整体：数量在上，按钮在下，整体靠右 */
#pageSearch .result-actions{
    display:flex;
    flex-direction:column;       /* 竖着排：先数量，再按钮 */
    align-items:flex-end;        /* 整块贴在卡片最右 */
    gap:6px;
}

/* 数量那一行：文字 + 输入框 横向一行 */
#pageSearch .result-actions .qty-wrap{
    display:flex;
    align-items:center;
    gap:6px;
}

/* 数量输入框：比原来短，和“立即购买”差不多长，靠右 */
#pageSearch .result-actions .visible-qty,
#pageSearch .result-actions .qty-input,
#pageSearch .result-actions input[type="number"][name="qty"]{
    width:90px !important;       /* 和按钮的最小宽度基本一致 */
    min-width:90px !important;
    max-width:90px !important;
    text-align:right;            /* 数值右对齐 */
    margin-left:auto;            /* 在这一行的最右侧 */
}

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

/* 兼容旧模板的 qty-group（如果还有） */
#pageSearch .result-actions .qty-group{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:4px;
}

#pageSearch .result-actions .qty-group input[type="number"][name="qty"]{
    width:90px !important;
    min-width:90px !important;
    max-width:90px !important;
    text-align:right;
    margin-left:auto;
}

/* 两个按钮高度/宽度统一，看起来工整 */
#pageSearch .result-actions .btn-outline-primary,
#pageSearch .result-actions .btn-primary{
    height: 36px;
    min-width: 90px;
    padding-inline: 14px;
}
/* 兼容旧模板：qty-group 里“数量 + 加购”也按数量在上、整体靠右排版 */
#pageSearch .result-actions .qty-group{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:4px;
}

#pageSearch .result-actions .qty-group input[type="number"][name="qty"]{
    width: 90px !important;
    min-width: 90px !important;
    max-width: 90px !important;
    text-align: right;
    margin-left:auto;
}

#pageSearch .result-actions .qty-group .btn{
    min-width: 90px;
    height: 36px;
    align-self:flex-end;
}

/* 统一头部购物车按钮样式 */
#siteHeader :is(a, button).nav-link:has(.bi-cart),
#siteHeader :is(a, button).btn:has(.bi-cart) {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .48rem 1.05rem !important;
    border-radius: 999px;
    background: transparent !important;
    color: inherit !important;
    border: 0;
    box-shadow: none;
    transform: scale(1.25); /* 再大一档 */
    font-weight: 600;
}

/* 放大购物车图标 */
#siteHeader :is(a, button):has(.bi-cart) .bi-cart {
    font-size: 1.6rem; /* 原来 1.3x 左右，略放大 */
}

/* 角标：统一移到购物车图标“右侧中上”，避免被顶部裁掉，所有页面通用 */
#siteHeader :is(a, button):has(.bi-cart) .badge {
    position: absolute;

    /* 以按钮自身为参考，垂直居中稍微偏上、紧贴右侧 */
    top: 50%;
    left: 100%;
    transform: translate(-25%, -65%);

    min-width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    border-radius: 999px;
    background: #fff;
    color: #333;
    border: 1px solid #ddd;
    font-weight: 700;
    font-size: 13px;
    padding: 0 7px;
}


/* 语言切换按钮稍微让出点空间，避免视觉上“顶到购物车” */
#siteHeader .lang-switch {
    margin-left: .8rem;
}
#siteHeader .lang-switch .btn {
    min-width: 42px;
}

/* === SRR 最终统一版购物车角标（小 + 紧贴右上）=== */
#siteHeader :is(a, button):has(.bi-cart) .badge,
    /* === SRR 最终版：购物车角标再贴近一点 === */
#siteHeader :is(a, button):has(.bi-cart) .badge,
    /* === SRR 超贴合版购物车角标（基于你最新截图微调）=== */
#siteHeader :is(a, button):has(.bi-cart) .badge,
#siteHeader .cart-badge {

    position: absolute;

    /* 再往上靠一些（从 36% → 34%） */
    top: 34%;
    left: 100%;

    /* X 从 -62% → -72%，向图标贴近大约 4~5px */
    transform: translate(-72%, -50%);

    /* 维持小角标尺寸 */
    font-size: 0.46rem;
    min-width: 0.70rem;
    height: 0.70rem;
    line-height: 0.70rem;
    padding: 0;

    border-radius: 999px;
    background-color: #dc3545 !important;
    color: #fff !important;
    font-weight: 600;
    z-index: 20;
}