/*
* 主题自定义样式。
*
* 为什么单独一个文件：assets/css/main.css 是从原 bundle 逐字节提取的，
* 与原稿完全一致（有脚本校验）。改动写在这里，两边互不干扰，
* 将来重新提取 main.css 也不会覆盖这些。
*
* 加载顺序在 main.css 之后，所以同优先级的规则这里生效。
*
* 目录：
* 1. 产品 tab 面板
* 2. 数量加减器
* 3. 询价车角标
* 4. 侧栏筛选（PC 端选中态重做 + 手机端折叠侧栏）
*/
/* =========================================================================
* 0a. iOS 的默认描边
*
* iOS Safari 点任何链接/按钮都会闪一个灰蓝色半透明方块
* （-webkit-tap-highlight-color 的默认值）。原稿是 React 演示，
* 没人在真 iPhone 上点过，所以一直没处理。
*
* 注意不要顺手把 :focus 的轮廓也干掉 —— 那是键盘用户唯一的定位手段。
* 这里只关点击时的高亮方块。
* ====================================================================== */
html {
-webkit-tap-highlight-color: transparent;
}
/* 不动 button 的 appearance —— 原稿每个按钮都有自己的 background /
* border / border-radius，iOS 的默认外观早被盖住了。
* 加 appearance:none 是多余的，还有把原稿样式弄坏的风险。
*/
/* =========================================================================
* 0b. iOS 的毛玻璃
*
* Safari 直到 18（2024-09）才认无前缀的 backdrop-filter，此前必须写
* -webkit-backdrop-filter。main.css 里 4 处一个前缀都没有 —— 原稿是
* React 演示，没在真 iPhone 上跑过。
*
* 四处底下都垫了半透明纯色，所以在旧 iOS 上的降级是「只是没有模糊」，
* 不会破版。但第一条是移动端导航抽屉的遮罩，属高频路径，值得补。
*
* main.css 要与原 bundle 逐字节一致，不能动，所以补在这里。
*
* ⚠ 取值必须与 main.css 保持同步。将来重新提取 main.css 后核对一次：
* grep -n 'backdrop-filter' assets/css/main.css
* ====================================================================== */
.overlay_662cf3 {
/* main.css:685 —— 移动端抽屉遮罩 */
-webkit-backdrop-filter: blur(2px);
}
.badge_54cea2 {
/* main.css:3001 */
-webkit-backdrop-filter: blur(4px);
}
.qualityBadge_05898b {
/* main.css:3576 —— 首屏质量徽标 */
-webkit-backdrop-filter: blur(4px);
}
.stat_05898b {
/* main.css:3615 —— 首屏统计块 */
-webkit-backdrop-filter: blur(6px);
}
/* =========================================================================
* 0. 手机端溢出兜底
*
* 原稿有几处固定宽度的网格，在窄屏上撑破视口、导致整页能横向拖动：
* .rRow_296a10 (ProductDetail 相关产品) 150px 1fr 130px 128px = 408px
* .row_c0977b (SearchResults 结果行) 140px 1fr 200px 128px = 468px
* 原稿是 React 演示，没人在真手机上翻过，所以一直没暴露。
*
* 这里给全站兜底：任何东西都不许超出视口宽度。
* 长的目录号（RK-APRO-125I）和邮箱地址也在这里断行。
* ====================================================================== */
html,
body {
overflow-x: hidden;
max-width: 100%;
}
@media (max-width: 640px) {
/* 固定列的网格在窄屏改成堆叠 */
.rRow_296a10,
.row_c0977b {
grid-template-columns: 1fr !important;
gap: 4px;
}
/* 表格/网格里的长串（目录号、邮箱）允许断行 */
.rRow_296a10 span,
.row_c0977b span,
.row_eb0795 span,
.row_eb0795 a {
overflow-wrap: anywhere;
word-break: break-word;
}
/* 图片一律不许撑破 */
img {
max-width: 100%;
height: auto;
}
}
/* =========================================================================
* 1. 产品 tab 面板
*
* 不用 [hidden] —— 它的优先级极低（浏览器默认样式），
* 很容易被组件自身的 display 规则盖掉，导致两个 panel 同时显示。
* ====================================================================== */
.phoenix-panel-hidden {
display: none !important;
}
/* =========================================================================
* 2. 数量加减器
*
* 原稿只有一个裸 ，手机上点那两个小箭头几乎点不中。
* 这里做成 [−][ 3 ][+]，触摸目标 40px。
* ====================================================================== */
.phoenix-qty {
display: inline-flex;
align-items: stretch;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-sm);
overflow: hidden;
background: #fff;
}
.phoenix-qty__btn {
width: 40px;
min-height: 40px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.15rem;
line-height: 1;
color: var(--color-text-muted);
background: var(--color-gray-50);
border: 0;
cursor: pointer;
user-select: none;
transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.phoenix-qty__btn:hover:not(:disabled) {
background: var(--color-gray-100);
color: var(--color-accent);
}
.phoenix-qty__btn:active:not(:disabled) {
background: var(--color-border);
}
.phoenix-qty__btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.phoenix-qty__btn:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: -2px;
}
/* 覆盖原 input 的边框/圆角 —— 现在边框由外层容器提供 */
.phoenix-qty .qtyInput_296a10 {
width: 54px;
border: 0;
border-left: 1px solid var(--color-border);
border-right: 1px solid var(--color-border);
border-radius: 0;
padding: 9px 4px;
font-variant-numeric: tabular-nums;
-moz-appearance: textfield;
}
/* 去掉浏览器自带的小箭头 —— 已经有 +/- 了 */
.phoenix-qty .qtyInput_296a10::-webkit-outer-spin-button,
.phoenix-qty .qtyInput_296a10::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.phoenix-qty .qtyInput_296a10:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: -2px;
}
/* 「已加入」反馈 */
.addBtn_296a10.phoenix-added {
background: #1a7f4b;
border-color: #1a7f4b;
}
/* =========================================================================
* 3. 询价车角标
*
* 原稿 cartDot 是个纯装饰的小圆点（永远显示，不表示数量）。
* 改成真实件数，0 件时隐藏。
* ====================================================================== */
.cartDot_662cf3 {
/* 覆盖原来的 8px 圆点尺寸 */
top: 2px;
right: 2px;
width: auto;
height: auto;
min-width: 17px;
padding: 0 4px;
border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.65rem;
font-weight: 700;
line-height: 17px;
color: #fff;
font-variant-numeric: tabular-nums;
box-sizing: border-box;
}
/* =========================================================================
* 4. 侧栏筛选
* ====================================================================== */
/* ---- 4a. 选中态重做（PC + 手机通用）----
*
* 原来是 inset 3px 左侧橙色描边 —— 视觉上像残留的进度条。
* 改成整块淡橙底 + 左侧圆角条，和右侧内容区的卡片语言一致。
* 另：原稿两个侧栏的选中态完全不同（分类=橙描边，主题=navy 实底），
* 统一成同一套。
*/
.railLinkActive_eb0795,
.railLinkActive_8f91be,
.railLinkActive_8f91be:hover,
.railLinkActive_0f5020 {
position: relative;
background: var(--color-accent-soft);
color: var(--color-accent-hover);
font-weight: 600;
box-shadow: none; /* 去掉原来的 inset 描边 */
}
.railLinkActive_eb0795::before,
.railLinkActive_8f91be::before,
.railLinkActive_0f5020::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 18px;
border-radius: 0 2px 2px 0;
background: var(--color-accent);
}
.railLinkActive_eb0795 .count_eb0795,
.railLinkActive_8f91be .count_8f91be,
.railLinkActive_0f5020 .count_0f5020 {
color: var(--color-accent-hover);
background: rgba(224, 90, 24, 0.12);
border-radius: 8px;
padding: 1px 6px;
font-weight: 600;
}
/* ---- 4b. 手机端：折叠侧栏 ----
*
* 三个侧栏，断点跟原稿走，且各不相同：
* 分类页 .rail_eb0795 → max-width: 940px
* 主题页 .rail_8f91be → max-width: 860px
* 新闻页 .rail_0f5020 → max-width: 860px
* （原稿在这些宽度把 layout 塌成单列，抽屉就该在同一刻接管）
*
* 布局要点：
* - 从 header 下方开始，不是 top:0 —— header 是 sticky，抽屉 top:0
* 会钻到它底下，看着像凭空浮着的一块
* - 一直铺到视口底部，内容自己滚
* - 关闭按钮 absolute 定位，不参与 flex 布局（否则会把内容挤上去，
* 下半截留一大片空白）
*
* @media 里不能用 var() 当条件，所以两个断点各写一遍。
*/
:root {
/* 侧栏三件套的层级。
*
* main.css 有自己的一套刻度（--z-header:100 / --z-dropdown:120 /
* --z-overlay:190 / --z-drawer:200），这三个是它的延伸，别再写魔数 ——
* 谁调高了 --z-header 或往中间插一层，得能一眼看见这里。
*
* 三者刻意**低于** --z-header(100)，这不是疏忽：
* - 抽屉的 top 是 rail.js 实测的 header 底边，两者永不重叠
* - 遮罩虽然 inset:0，但被 header 盖住 —— 抽屉打开时 header 保持
* 明亮可点，这跟「抽屉从 header 下沿开始」的设计是自洽的
* 和头部自己的抽屉（--z-drawer:200，盖住 header）是两套不同的东西。
*/
--z-rail-toggle: 60;
--z-rail-overlay: 70;
--z-rail-drawer: 80;
/* 抽屉顶边 = header 的实际底边。
*
* 这个值由 rail.js 实测后写进来（syncTop()）—— 不写死是因为组合太多：
* header 是 sticky，但上面还有 TopBar（860px 才隐藏），
* 而分类页的断点是 940px，所以 861–940px 且没滚动时 header 是被顶下去的；
* 再加上登录时的 WP 管理条（32/46px）。与其穷举，不如让 JS 量。
*
* 这里的 73px 只是 JS 没跑起来时的兜底（= .bar 的 min-height 72 + 1px 边框）。
*/
--phoenix-rail-top: 73px;
}
/* 遮罩
*
* 不用 display 切换，用 pointer-events + visibility。
*
* 之前的写法有个严重 bug：默认 display:none，@media 里 display:block。
* 结果 940px 以下遮罩一直铺在页面上（inset:0、z-index:70），
* opacity:0 看不见但照样吃掉所有点击 —— 整个手机端点不了任何东西，
* 连悬浮按钮（z-index:60）都被盖住。
*
* hidden 属性救不了：[hidden]{display:none} 优先级 (0,1,0)，
* 压不过 media query 里的 (0,2,0)。
*/
.phoenix-rail-overlay {
position: fixed;
inset: 0;
z-index: var(--z-rail-overlay);
background: rgba(7, 27, 51, 0.45);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.24s var(--ease), visibility 0.24s var(--ease);
}
.phoenix-rail-overlay.is-shown {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/* 悬浮拉手 —— 贴左边缘 */
.phoenix-rail-toggle {
display: none;
position: fixed;
left: 0;
top: 50%;
transform: translateY(-50%);
z-index: var(--z-rail-toggle);
align-items: center;
gap: 7px;
padding: 14px 10px 14px 8px;
border: 0;
border-radius: 0 10px 10px 0;
background: var(--color-primary);
color: #fff;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
writing-mode: vertical-rl;
cursor: pointer;
box-shadow: 0 3px 16px rgba(7, 27, 51, 0.3);
transition: opacity var(--dur) var(--ease), background var(--dur) var(--ease);
}
.phoenix-rail-toggle svg {
writing-mode: horizontal-tb;
}
.phoenix-rail-toggle:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
/* 抽屉开着时把拉手藏掉，别和抽屉打架 */
body.phoenix-rail-open .phoenix-rail-toggle {
opacity: 0;
pointer-events: none;
}
/* 关闭按钮 —— absolute，不占 flex 布局 */
.phoenix-rail-close {
display: none;
position: absolute;
top: 10px;
right: 8px;
z-index: 2;
width: 40px;
height: 40px;
align-items: center;
justify-content: center;
border: 0;
border-radius: 50%;
/* 不给底色 —— 抽屉本身就是浅色，灰圆底显得脏。
* 40×40 保证触摸目标够大（WCAG 建议 44，这里靠 padding 补足）。 */
background: transparent;
color: var(--color-text-muted);
cursor: pointer;
transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.phoenix-rail-close:hover {
color: var(--color-primary);
background: rgba(10, 35, 64, 0.06);
}
.phoenix-rail-close:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
/* 抽屉容器聚焦时不画环 —— 它是个