/* ========================================================================== JINKA 设计系统 · 工程落地版 方向：Precision Industrial（石墨灰 + 安全橙） 约束：① 全站只用逻辑属性（inline-start / inline-end），禁止 left / right ② 阿拉伯语 RTL 由 驱动，不用 CSS 硬掰 ③ 数字与型号在 RTL 下保持 LTR（靠 dir="ltr" 包裹） ========================================================================== */ :root{ /* 中性 */ --ink-900:#0B1220; --ink-800:#101A2B; --ink-700:#1B2637; --steel-600:#344054; --steel-500:#475467; --steel-400:#667085; --steel-300:#98A2B3; --line-200:#E4E7EC; --line-100:#F2F4F7; --surface:#FFFFFF; --surface-alt:#F8FAFC; /* 品牌 */ --brand-700:#C2410C; --brand-600:#E2540A; --brand-500:#FF6A13; --brand-050:#FFF4ED; /* 状态 */ --success:#12B76A; --success-bg:#ECFDF3; --success-fg:#027A48; --success-line:#A6F4C5; --warning:#F79009; --danger:#F04438; --info:#2E90FA; /* 字体（全部 OFL） */ --font-latin:"Inter","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --font-zh:"Noto Sans SC","Microsoft YaHei","PingFang SC",sans-serif; --font-ar:"IBM Plex Sans Arabic","Noto Sans Arabic","Segoe UI",Tahoma,sans-serif; /* 圆角 / 阴影 / 尺寸 */ --r-sm:4px; --r-md:8px; --r-lg:12px; --r-xl:16px; --sh-sm:0 1px 2px rgba(16,24,40,.06); --sh-md:0 4px 12px rgba(16,24,40,.08); --sh-lg:0 12px 32px rgba(16,24,40,.10); --maxw:1280px; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--surface); color:var(--ink-900); font-family:var(--font-latin); font-size:16px; line-height:1.6; font-variant-numeric:tabular-nums lining-nums; } html[lang="zh"] body{font-family:var(--font-zh),var(--font-latin)} html[lang="ar"] body{font-family:var(--font-ar),var(--font-latin); line-height:1.8} html[lang="vi"] body{line-height:1.65} :focus-visible{outline:2px solid var(--brand-500); outline-offset:2px; border-radius:var(--r-sm)} /* ---------- 模块比例（module ratio） ---------- 约定：可缩放的模块自带变量 --s，基准 1 = 100%；模块内受它管辖的尺寸一律写成 calc(<基准值> * var(--s))。 调用点要换尺寸时只给一个比例，不再散写像素： style="--s:.85"（= 85%） style="--s:1.125"（= 112.5%） ⚠ --s 会同时移动它管辖的**全部**尺寸（内边距 / 间距 / 圆角 / 字号）。这与"只改内边距" 是两回事——只想改其中一项时，直接写那一项，不要动 --s。 ⚠ 每个模块都在自己身上重声明 --s:1，所以父级设的比例不会漏进子模块。 已纳入比例的模块：.muted / .price / .btn / .card / .p-card --------------------------------------------- */ /* ---------- 排版 ---------- */ h1,h2,h3,h4{margin:0; line-height:1.2; letter-spacing:-.01em} h1{font-size:40px; font-weight:700} h2{font-size:32px; font-weight:600} h3{font-size:24px; font-weight:600} h4{font-size:20px; font-weight:600} p{margin:0} .muted{--s:1; color:var(--steel-500); font-size:calc(1em * var(--s))} .small{font-size:14px; line-height:1.55} .linkish{background:none; border:0; padding:0; font-family:inherit; color:inherit; cursor:pointer; text-align:start} .tiny{font-size:12px; line-height:1.5} .overline{font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--brand-700)} html[lang="ar"] .overline{text-transform:none; letter-spacing:0} .num,.model,.price{font-variant-numeric:tabular-nums lining-nums} .price{--s:1; font-size:calc(1em * var(--s))} /* ---------- 布局 ---------- */ .wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:24px} .sec{padding-block:80px} .sec--alt{background:var(--surface-alt); border-block:1px solid var(--line-200)} .sec--dark{background:var(--ink-900); color:#fff} .sec--dark .muted{color:var(--steel-300)} .sec--tight{padding-block:48px} .grid{display:grid; gap:24px} .g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} .row{display:flex; gap:12px; flex-wrap:wrap; align-items:center} .between{display:flex; gap:24px; align-items:flex-end; justify-content:space-between; flex-wrap:wrap} .stack{display:flex; flex-direction:column; gap:8px} /* ---------- 按钮 ---------- */ .btn{ --s:1; display:inline-flex; gap:calc(8px * var(--s)); align-items:center; justify-content:center; min-height:calc(44px * var(--s)); padding-inline:calc(20px * var(--s)); border:1px solid transparent; border-radius:calc(var(--r-md) * var(--s)); font:inherit; font-weight:600; font-size:calc(15px * var(--s)); cursor:pointer; text-decoration:none; transition:background .15s,color .15s,border-color .15s; } .btn--primary{background:var(--brand-700); color:#fff} .btn--primary:hover{background:var(--brand-600)} .btn--ghost{background:#fff; color:var(--ink-900); border-color:var(--line-200)} .btn--ghost:hover{border-color:var(--steel-300)} .btn--on-dark{background:transparent; color:#fff; border-color:#3A4557} .btn--on-dark:hover{border-color:var(--brand-500); color:var(--brand-500)} .btn--paypal{background:#FFC439; color:#0B1220} .btn--paypal:hover{background:#F2B32C} .btn--sm{min-height:calc(36px * var(--s)); padding-inline:calc(14px * var(--s)); font-size:calc(14px * var(--s))} .btn--block{display:flex; inline-size:100%} .btn[disabled],.btn[aria-disabled="true"]{opacity:.45; cursor:not-allowed} /* ---------- 徽标 / 参数 chip ---------- */ .badge{display:inline-flex; align-items:center; gap:6px; padding:3px 8px; border-radius:var(--r-sm); font-size:12px; font-weight:600; border:1px solid var(--line-200); background:#fff; color:var(--steel-600)} .badge--solid{background:var(--ink-900); color:#fff; border-color:var(--ink-900)} .badge--brand{background:var(--brand-050); color:var(--brand-700); border-color:#FDCFB4} .badge--ok{background:var(--success-bg); color:var(--success-fg); border-color:var(--success-line)} .chip{display:inline-flex; align-items:baseline; gap:6px; padding:4px 10px; border-radius:var(--r-sm); background:var(--surface-alt); border:1px solid var(--line-200); font-size:13px; color:var(--steel-600)} .chip b{color:var(--ink-900); font-weight:700} /* ---------- 顶部工具条 / 头部 / 导航 ---------- */ .utility{background:var(--ink-900); color:#C9D2E0; font-size:13px} .utility a{color:inherit; text-decoration:none} .utility a:hover{color:#fff} .utility .wrap{display:flex; gap:20px; align-items:center; justify-content:space-between; min-height:40px; flex-wrap:wrap} .hdr{position:sticky; inset-block-start:0; z-index:30; background:#fff; border-block-end:1px solid var(--line-200)} .hdr .wrap{display:flex; gap:24px; align-items:center; justify-content:space-between; min-height:72px} .logo{display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit} .logo .mark{inline-size:36px; block-size:36px; border-radius:var(--r-sm); background:var(--ink-900); color:var(--brand-500); display:grid; place-items:center; font-weight:800; font-size:15px; letter-spacing:-.02em} .logo .nm{font-weight:800; letter-spacing:.02em} .logo .zh{display:block; font-size:12px; color:var(--steel-400); font-weight:500; letter-spacing:.1em} .nav{display:flex; gap:22px; font-size:15px; font-weight:500} .nav a{color:var(--steel-600); text-decoration:none; padding-block:6px} .nav a:hover{color:var(--ink-900)} .nav a[aria-current]{color:var(--ink-900); box-shadow:inset 0 -2px 0 var(--brand-500)} /* ---------- 语言切换器 ---------- */ /* ⚠ 2026-09-27 甲方决定：**装站阶段先断开多语言**，最后用 WPML 在服务端映射。 所以这里把切换器界面藏起来（markup 保留），`?lang=` 那条代码路径照常可用—— 它既是俄语/阿语溢出与 RTL 的唯一验证手段，也是将来 WPML 的替身。 要恢复切换器：把下面这行的 none 改回 flex 即可。 */ .langs{display:none; gap:2px; flex-wrap:wrap} .langs button{font:inherit; font-size:13px; min-height:32px; padding-inline:10px; background:transparent; border:1px solid transparent; border-radius:var(--r-sm); color:var(--steel-500); cursor:pointer} .utility .langs button{color:#C9D2E0} .langs button:hover{border-color:var(--line-200)} .utility .langs button:hover{border-color:#3A4557} .langs button[aria-pressed="true"]{background:#fff; color:var(--ink-900); border-color:var(--line-200); font-weight:700} .utility .langs button[aria-pressed="true"]{background:var(--brand-500); color:#111; border-color:var(--brand-500)} /* ---------- 面包屑 ---------- */ .crumb{font-size:13px; color:var(--steel-400); padding-block:16px} .crumb ol{display:flex; gap:8px; flex-wrap:wrap; list-style:none; margin:0; padding:0} .crumb li{display:flex; gap:8px; align-items:center} .crumb li:not(:last-child)::after{content:"›"; color:var(--steel-300)} .crumb a{color:var(--steel-500); text-decoration:none} .crumb a:hover{color:var(--brand-700)} .crumb [aria-current]{color:var(--ink-900); font-weight:600} /* ---------- 图片占位（工程图风格） ---------- */ .ph{ position:relative; inline-size:100%; aspect-ratio:4/3; overflow:hidden; border-radius:var(--r-lg); border:1px solid var(--line-200); background: linear-gradient(0deg,transparent 23px,rgba(16,24,40,.06) 24px) 0 0/24px 24px, linear-gradient(90deg,transparent 23px,rgba(16,24,40,.06) 24px) 0 0/24px 24px, linear-gradient(160deg,#E9EDF3,#CFD6E0 55%,#B9C2CF); display:grid; place-items:center; } .ph::after{content:attr(data-label); position:absolute; inset-block-end:10px; inset-inline-start:10px; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--steel-500); background:rgba(255,255,255,.82); padding:3px 8px; border-radius:var(--r-sm)} .ph--sq{aspect-ratio:1/1} .ph--wide{aspect-ratio:16/9} .ph--dark{border-color:#2B3A4C; background: linear-gradient(0deg,transparent 23px,rgba(255,255,255,.05) 24px) 0 0/24px 24px, linear-gradient(90deg,transparent 23px,rgba(255,255,255,.05) 24px) 0 0/24px 24px, linear-gradient(160deg,#22303F,#141E2B)} .ph--dark::after{color:#C9D2E0; background:rgba(11,18,32,.7)} /* ---------- 卡片 ---------- */ .card{--s:1; background:#fff; border:1px solid var(--line-200); border-radius:calc(var(--r-lg) * var(--s)); padding:calc(20px * var(--s)); display:flex; flex-direction:column; gap:calc(12px * var(--s))} .card--pad0{padding:0; overflow:hidden} .card--hover:hover{box-shadow:var(--sh-md)} .card .hd{padding:calc(16px * var(--s)) calc(20px * var(--s)); border-block-end:1px solid var(--line-200); background:var(--surface-alt)} .card .bd{padding:calc(20px * var(--s))} /* ---------- 商品卡 ---------- */ .p-card{--s:1; background:#fff; border:1px solid var(--line-200); border-radius:calc(var(--r-lg) * var(--s)); overflow:hidden; display:flex; flex-direction:column} .p-card:hover{box-shadow:var(--sh-md)} .p-card .ph{border:0; border-radius:0; border-block-end:1px solid var(--line-200)} .p-card .body{padding:calc(16px * var(--s)); display:flex; flex-direction:column; gap:calc(10px * var(--s)); flex:1} .p-card .model{font-size:13px; font-weight:700; color:var(--brand-700); letter-spacing:.02em} .p-card h3,.p-card h4{font-size:16px; line-height:1.35} .p-card .foot{margin-block-start:auto; display:flex; gap:calc(8px * var(--s)); align-items:center; justify-content:space-between} .p-card .price{font-size:calc(18px * var(--s)); font-weight:700} /* ---------- 筛选器 ---------- */ .shop{display:grid; grid-template-columns:260px 1fr; gap:32px; align-items:start} .filters{border:1px solid var(--line-200); border-radius:var(--r-lg); background:#fff} .filters .grp{padding:16px 18px; border-block-end:1px solid var(--line-100)} .filters .grp:last-child{border-block-end:0} .filters h4{font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:var(--steel-600); margin-block-end:10px} html[lang="ar"] .filters h4{text-transform:none; letter-spacing:0} .filters label{display:flex; gap:8px; align-items:center; font-size:14px; padding-block:5px; color:var(--steel-600); cursor:pointer} .filters input[type="checkbox"],.filters input[type="radio"]{accent-color:var(--brand-700); inline-size:16px; block-size:16px} .filters .count{margin-inline-start:auto; font-size:12px; color:var(--steel-300)} .sortbar{display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap; padding-block:12px; border-block-end:1px solid var(--line-200); margin-block-end:24px} .sortbar select{font:inherit; font-size:14px; padding:8px 10px; min-height:40px; border:1px solid var(--line-200); border-radius:var(--r-md); background:#fff} /* ---------- 分页 ---------- */ .pager{display:flex; gap:6px; justify-content:center; margin-block-start:32px} .pager a,.pager span{min-inline-size:40px; min-block-size:40px; display:grid; place-items:center; border:1px solid var(--line-200); border-radius:var(--r-md); text-decoration:none; color:var(--steel-600); font-size:14px} .pager [aria-current]{background:var(--ink-900); color:#fff; border-color:var(--ink-900); font-weight:700} /* ---------- 商品详情：图库 + 购买区 ---------- */ .pdp{display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:start} .gallery{display:grid; gap:12px} .thumbs{display:grid; grid-template-columns:repeat(5,1fr); gap:10px} .thumbs .ph{aspect-ratio:1/1; border-radius:var(--r-md)} .buy{display:flex; flex-direction:column; gap:16px} .buy .sku{font-size:12px; color:var(--steel-400); letter-spacing:.04em} .variation{display:flex; flex-direction:column; gap:8px} .variation .lbl{font-size:13px; font-weight:600; color:var(--steel-600)} .variation .lbl span{font-weight:400; color:var(--steel-400)} .opts{display:flex; gap:8px; flex-wrap:wrap} .opt-btn{font:inherit; font-size:14px; font-weight:600; min-height:42px; padding-inline:16px; cursor:pointer; background:#fff; color:var(--ink-900); border:1px solid var(--line-200); border-radius:var(--r-md)} .opt-btn:hover{border-color:var(--steel-300)} .opt-btn[aria-pressed="true"]{background:var(--brand-050); border-color:var(--brand-500); color:var(--brand-700); box-shadow:inset 0 0 0 1px var(--brand-500)} .opt-btn[disabled]{opacity:.4; cursor:not-allowed; text-decoration:line-through} .qty{display:inline-flex; align-items:center; border:1px solid var(--line-200); border-radius:var(--r-md); overflow:hidden} .qty button{inline-size:40px; block-size:44px; border:0; background:#fff; font:inherit; font-size:17px; cursor:pointer; color:var(--steel-500)} .qty span{min-inline-size:48px; text-align:center; font-weight:600} .trust{display:grid; gap:8px; padding:14px; background:var(--surface-alt); border:1px solid var(--line-200); border-radius:var(--r-md); font-size:13px; color:var(--steel-600)} /* ---------- 表格 ---------- */ .spec{inline-size:100%; border-collapse:collapse; font-size:14px; background:#fff; border:1px solid var(--line-200)} .spec th,.spec td{padding:12px 14px; border-block-end:1px solid var(--line-200); text-align:start} .spec thead th{position:sticky; inset-block-start:0; background:var(--surface-alt); font-size:13px; color:var(--steel-600); font-weight:600} .spec tbody th{font-weight:500; color:var(--steel-600); inline-size:34%} .spec tbody tr:last-child th,.spec tbody tr:last-child td{border-block-end:0} .spec--cmp td,.spec--cmp th{text-align:center} .spec--cmp tbody th{text-align:start} .spec--cmp .diff{background:var(--brand-050)} .table-scroll{overflow-x:auto; border-radius:var(--r-lg)} /* ---------- 手风琴 / 标签页 ---------- */ .acc{border:1px solid var(--line-200); border-radius:var(--r-lg); overflow:hidden; background:#fff} .acc details{border-block-end:1px solid var(--line-100)} .acc details:last-child{border-block-end:0} .acc summary{padding:16px 20px; font-weight:600; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:16px} .acc summary::-webkit-details-marker{display:none} .acc summary::after{content:"+"; color:var(--brand-700); font-weight:700} .acc details[open] summary::after{content:"–"} .acc .ans{padding:0 20px 18px; color:var(--steel-500); font-size:15px} /* ---------- 表单 ---------- */ .field{display:flex; flex-direction:column; gap:6px} .field label{font-size:13px; font-weight:600; color:var(--steel-600)} .field input,.field select,.field textarea{font:inherit; font-size:15px; padding:11px 12px; min-height:44px; border:1px solid var(--line-200); border-radius:var(--r-md); background:#fff; color:var(--ink-900)} .field textarea{min-height:110px; resize:vertical} .field .hint{font-size:12px; color:var(--steel-400)} .opt{display:flex; gap:12px; align-items:flex-start; padding:14px; border:1px solid var(--line-200); border-radius:var(--r-md); cursor:pointer} .opt.sel{border-color:var(--brand-500); background:var(--brand-050)} .opt .radio{inline-size:18px; block-size:18px; border-radius:50%; border:2px solid var(--steel-300); flex:0 0 18px; margin-block-start:2px} .opt.sel .radio{border-color:var(--brand-700); background:radial-gradient(circle,var(--brand-700) 0 4px,transparent 5px)} .note{background:var(--surface-alt); border:1px solid var(--line-200); border-radius:var(--r-md); padding:12px 14px; font-size:13px; color:var(--steel-500)} .note--brand{background:var(--brand-050); border-color:#FDCFB4; color:#7A3110} /* ---------- 统计数字 / 步骤 / 时间轴 ---------- */ .stats{display:grid; grid-template-columns:repeat(4,1fr); gap:24px} .stat b{display:block; font-size:36px; font-weight:800; letter-spacing:-.02em; line-height:1.1} .stat span{font-size:14px; color:var(--steel-500)} .sec--dark .stat span{color:var(--steel-300)} .steps{display:flex; margin-block:24px} .steps .s{flex:1; text-align:center; font-size:12px; color:var(--steel-400)} .steps .s i{display:block; inline-size:26px; block-size:26px; margin:0 auto 8px; border-radius:50%; background:var(--line-100); border:1px solid var(--line-200); line-height:24px; font-style:normal; font-size:12px; font-weight:700} .steps .s.done i{background:var(--success); border-color:var(--success); color:#fff} .steps .s.now i{background:var(--brand-700); border-color:var(--brand-700); color:#fff} .steps .s.now{color:var(--ink-900); font-weight:600} .timeline{border-inline-start:2px solid var(--line-200); padding-inline-start:24px; display:grid; gap:24px} .timeline .t{position:relative} .timeline .t::before{content:""; position:absolute; inset-inline-start:-31px; inset-block-start:6px; inline-size:12px; block-size:12px; border-radius:50%; background:var(--brand-500); border:2px solid #fff} /* ---------- 页脚 ---------- */ .ftr{background:var(--ink-900); color:#C9D2E0; padding-block:64px 28px} .ftr h4{color:#fff; font-size:14px; letter-spacing:.06em; text-transform:uppercase; margin-block-end:14px} html[lang="ar"] .ftr h4{text-transform:none; letter-spacing:0} .ftr a{color:#C9D2E0; text-decoration:none; display:block; padding-block:5px; font-size:14px} .ftr a:hover{color:var(--brand-500)} .ftr .legal{border-block-start:1px solid #26313F; margin-block-start:40px; padding-block-start:20px; font-size:13px; color:#8B98AA} .qr{inline-size:104px; block-size:104px; background:#fff; border-radius:var(--r-md); display:grid; place-items:center; padding:8px} .qr svg{inline-size:100%; block-size:100%} /* ---------- 提示条（样张用） ---------- */ .proto-note{background:var(--brand-050); border-block-end:1px solid #FDCFB4; color:#7A3110; font-size:13px; padding-block:10px} /* ---------- 交易流程页组件（从 flows.html 提上来共享） ---------- */ .screen{background:#fff; border:1px solid var(--line-200); border-radius:var(--r-xl); box-shadow:var(--sh-md); overflow:hidden} .screen .bar{display:flex; align-items:center; gap:10px; padding:10px 16px; background:var(--ink-900); color:#C9D2E0; font-size:12px} .screen .body{padding:28px} .screen--ok{max-width:640px; margin-inline:auto} .dots{display:flex; gap:5px} .dots i{inline-size:9px; block-size:9px; border-radius:50%; background:#3A4557; display:block} .thumb{inline-size:88px; block-size:88px; flex:0 0 88px; border-radius:var(--r-md); border:1px solid var(--line-200); display:grid; place-items:center; font-size:10px; color:var(--steel-400); text-align:center; background:linear-gradient(0deg,transparent 15px,rgba(16,24,40,.06) 16px) 0 0/16px 16px, linear-gradient(90deg,transparent 15px,rgba(16,24,40,.06) 16px) 0 0/16px 16px, linear-gradient(160deg,#E9EDF3,#CFD6E0)} .line-item{display:flex; gap:16px; padding-block:18px; border-block-end:1px solid var(--line-100)} .line-item:last-child{border-block-end:0} .sum{display:flex; justify-content:space-between; padding-block:10px; font-size:14px} .sum.total{border-block-start:1px solid var(--line-200); margin-block-start:8px; padding-block-start:16px; font-size:18px; font-weight:700} .radio{inline-size:18px; block-size:18px; border-radius:50%; border:2px solid var(--steel-300); flex:0 0 18px; margin-block-start:2px} .opt.sel .radio{border-color:var(--brand-700); background:radial-gradient(circle,var(--brand-700) 0 4px,transparent 5px)} .okmark{inline-size:56px; block-size:56px; border-radius:50%; background:var(--success-bg); color:var(--success-fg); display:grid; place-items:center; font-size:28px} /* ---------- 设计令牌样张（从 index.html 提上来共享） ---------- */ .tile{display:flex; flex-direction:column; gap:10px} .sw{block-size:64px; border-radius:var(--r-md); border:1px solid var(--line-200)} /* ---------- 产品线卡（从 index.html 提上来共享） ---------- */ .pl-card .ph{aspect-ratio:16/10} /* ---------- 表格数字与行式列表（从 flows.html 提上来共享） ---------- */ .mono{font-variant-numeric:tabular-nums lining-nums} .line,.line-item{display:flex; gap:16px; padding-block:18px; border-block-end:1px solid var(--line-100)} .line:last-child,.line-item:last-child{border-block-end:0} .line .info{flex:1; display:flex; flex-direction:column; gap:6px} /* ---------- 型号快捷链接（列表卡上的型号，点进商品页并选中该型号） ---------- */ .model-link{display:inline-flex; align-items:center; font-size:13px; font-weight:600; min-height:32px; padding-inline:10px; border:1px solid var(--line-200); border-radius:var(--r-sm); background:#fff; color:var(--ink-900); text-decoration:none} .model-link:hover{border-color:var(--brand-500); color:var(--brand-700); background:var(--brand-050)} .filter-empty{padding:40px 20px; text-align:center; color:var(--steel-500); border:1px dashed var(--line-200); border-radius:var(--r-lg)} /* ---------- 评分与评价 ---------- */ .stars{display:inline-flex; gap:2px; align-items:center; font-size:15px; line-height:1; color:var(--brand-500)} .stars .off{color:var(--line-200)} .rating{display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:center} .rating .big{font-size:46px; font-weight:800; line-height:1; letter-spacing:-.02em} .bars{display:grid; gap:7px; min-inline-size:220px} .bar{display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; font-size:12px; color:var(--steel-500)} .bar i{display:block; block-size:8px; border-radius:999px; background:var(--line-100); overflow:hidden} .bar i b{display:block; block-size:100%; inline-size:var(--w,0%); background:var(--brand-500)} .review{padding-block:20px; border-block-end:1px solid var(--line-100)} .review:last-child{border-block-end:0} /* ---------- 分栏布局：桌面并排、窄屏自动堆叠 ---------- 注意：用内联 style="grid-template-columns:..." 是【无法被媒体查询覆盖】的， 在手机上会造成横向溢出。所以所有分栏统一走这里定义的类。 */ .split{display:grid; gap:40px; align-items:start} .split--1-1{grid-template-columns:1fr 1fr} .split--3-2{grid-template-columns:1.5fr 1fr} .split--2-1{grid-template-columns:2fr 1fr} .split--main-side{grid-template-columns:minmax(0,1fr) 260px} .split--side-main{grid-template-columns:280px minmax(0,1fr)} @media (max-width:1080px){ .split--1-1,.split--3-2,.split--2-1,.split--main-side,.split--side-main{grid-template-columns:minmax(0,1fr)} .split{gap:28px} } .review .who{display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:12px; color:var(--steel-400)} .rv-form{border:1px solid var(--line-200); border-radius:var(--r-lg); padding:20px; background:var(--surface-alt)} .picks{display:inline-flex; gap:4px} .picks button{font-size:22px; line-height:1; background:none; border:0; cursor:pointer; color:var(--line-200); padding:2px} .picks button.on{color:var(--brand-500)} /* ---------- 响应式 ---------- */ @media (max-width:1080px){ .g4{grid-template-columns:repeat(2,1fr)} .nav{display:none} .shop{grid-template-columns:1fr} .pdp{grid-template-columns:1fr; gap:28px} .stats{grid-template-columns:repeat(2,1fr)} } @media (max-width:760px){ .sec{padding-block:40px} h1{font-size:28px} h2{font-size:24px} h3{font-size:20px} .g2,.g3,.g4{grid-template-columns:1fr} .thumbs{grid-template-columns:repeat(4,1fr)} .stats{grid-template-columns:repeat(2,1fr)} .stat b{font-size:28px} } @media (prefers-reduced-motion:reduce){*{transition:none !important; animation:none !important}}