/* ==========================================================================
Limertech — international storefront front-end
Section order mirrors index.html so it ports 1:1 into the WP theme later.
========================================================================== */
/* ── 0. 字体（自托管）────────────────────────────────────────────────
Montserrat —— 与对标站（seeedstudio.com）同一款几何无衬线。
可变字体一个文件覆盖 100–900 全部字重，标题与正文共用同族，
靠字重拉层次（正文 400、强调 600、标题 700–800）。
latin + latin-ext 两个子集共 103 KB，没有第三方域名 ——
走 Google CDN 国内首屏会明显变慢。OFL 授权，允许自托管。
★ 中文由 TranslatePress 出，而 Montserrat 不含 CJK 字形，
所以后备栈里必须排好中文字体，否则中文页会掉进浏览器默认宋体。 */
@font-face{
font-family:"Montserrat";
src:url("../fonts/montserrat-latin-var.woff2") format("woff2-variations");
font-weight:100 900;font-style:normal;font-display:swap;
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
font-family:"Montserrat";
src:url("../fonts/montserrat-latinext-var.woff2") format("woff2-variations");
font-weight:100 900;font-style:normal;font-display:swap;
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* ── 1. Tokens ─────────────────────────────────────────────────────────── */
:root{
/*
* brand —— 原版配色：强调色柠檬绿 #93c93f、深色面近黑 #050a10。
* ★ 这里的值是「自定义器没配过 / wp_head 调色板没输出」时的兜底。
* 真实生效值由 inc/customizer.php 的 lmt_palette_css() 从两个基色派生，
* 改主题色去 自定义→品牌与颜色，别改这里（改了也会被 wp_head 覆盖）。
* *-rgb 三元组给 rgba(var(--x-rgb),α) 用；--on-accent 是强调色上的前景。
*/
--lime-700:#588220; /* 白底链接/文字用（≥4.5:1） */
--lime-600:#7cb42f;
--lime-500:#93c93f;
--lime-400:#a9dc5a; /* 深色底上的强调 */
--lime-300:#c2ec85;
--on-accent:#0d1607;
--lime-500-rgb:147,201,63;
--lime-400-rgb:169,220,90;
/* ink / dark surfaces */
--ink-950:#050a10;
--ink-900:#0a1119;
--ink-850:#0e1620;
--ink-800:#121c27;
--ink-700:#1b2735;
--ink-600:#2a3847;
--ink-400:#5f7183; /* 深色面次级字 —— 此变量此前被引用但从未定义 */
--ink-200:#9fb0c0; /* 深色面主字 —— 同上 */
--ink-950-rgb:5,10,16;
--ink-900-rgb:10,17,25;
/* light surfaces */
--bg:#fff;
--surface:#f5f6f8;
--surface-2:#fafbfc;
--line:#e5e8ec;
--line-2:#eef0f3;
/* text */
--tx:#0f1720;
--tx-2:#4a5666;
--tx-3:#697381; /* 4.81:1 on #fff、4.64:1 on #fafbfc（浅灰底也要过）—— 原 #7b8798 只有 3.65 */
--tx-inv:#eef3f8;
--tx-inv-2:#9fb0c0;
/* status */
--hot:#d14246; /* 白字在其上 4.59:1，原 #e5484d 只有 3.91 */
--best:#f08c1a;
--amber:#f5b429;
/* shape */
--r-xs:6px; --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:22px; --r-full:999px;
--sh-1:0 1px 2px rgba(15,23,32,.06);
--sh-2:0 4px 14px rgba(15,23,32,.07);
--sh-3:0 14px 40px rgba(15,23,32,.12);
/* ★ 客户反馈"按钮带投影显脏"：品牌绿按钮改为扁平无投影，
hover 仍保留变色/位移反馈。--sh-lime 只挂在按钮类元素上，
置 none 一处生效；需要恢复时改回 0 8px 24px rgba(124,180,47,.32) */
--sh-lime:none;
/* rhythm */
--gut:24px;
--maxw:1480px;
/* 吸顶区总高（促销条+页眉），JS 实测覆写；无 JS 时的兜底按桌面测量值 */
--topfix-h:175px;
/* type */
--f-disp:"Montserrat","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
--f-body:"Montserrat","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
--ease:cubic-bezier(.4,0,.2,1);
--ease-out:cubic-bezier(.16,1,.3,1);
--circuit:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%2393c93f' stroke-width='1'%3E%3Cpath d='M12 0v34h32v28h44v78'/%3E%3Cpath d='M140 24H96v40H62v76'/%3E%3Cpath d='M0 96h30V62h44V22h66'/%3E%3Cpath d='M140 120H108V88'/%3E%3C/g%3E%3Cg fill='%2393c93f'%3E%3Ccircle cx='44' cy='62' r='2.6'/%3E%3Ccircle cx='88' cy='62' r='2.6'/%3E%3Ccircle cx='30' cy='62' r='2.6'/%3E%3Ccircle cx='108' cy='88' r='2.6'/%3E%3C/g%3E%3C/svg%3E");
}
/* ── 2. Reset & base ───────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
/* iOS Safari 只吃 html 级的横向裁剪——body 上的 overflow-x:hidden
拦不住屏外 absolute/fixed 元素（跳过的页面向右偏、左边距视觉消失）。
clip 不建滚动容器，.topfix 的 sticky 不受影响，老浏览器回落 hidden。 */
html{-webkit-text-size-adjust:100%;overflow-x:hidden;overflow-x:clip}
body{
margin:0;background:var(--bg);color:var(--tx);
font:400 15px/1.6 var(--f-body);
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
overflow-x:hidden;overflow-x:clip;
}
h1,h2,h3,h4{margin:0;font-family:var(--f-disp);font-weight:700;letter-spacing:-.02em;line-height:1.14}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button,input,select{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--lime-500);outline-offset:3px;border-radius:4px}
hr{border:0;border-top:1px solid var(--line);margin:14px 0}
s{color:var(--tx-3)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* 往上藏而不是往左——负 left 在 iOS 上会撑出横向可滚区 */
.skip{position:absolute;left:12px;top:-9999px;z-index:200;background:var(--lime-500);color:var(--on-accent);padding:10px 16px;font-weight:700}
.skip:focus{top:12px}
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.ic{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.dv{width:100%;height:100%}
.lime{color:var(--lime-400)}
/* ── 3. Primitives: buttons, tags, links, round ────────────────────────── */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:9px;
height:48px;padding:0 24px;border-radius:var(--r-sm);
font-family:var(--f-disp);font-weight:600;font-size:15px;letter-spacing:-.01em;
transition:transform .18s var(--ease),background-color .18s var(--ease),box-shadow .25s var(--ease),border-color .18s var(--ease);
white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--lime{background:var(--lime-500);color:var(--on-accent);box-shadow:var(--sh-lime)}
.btn--lime:hover{background:var(--lime-400)}
.btn--ghost{background:rgba(255,255,255,.04);color:#fff;border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(6px)}
.btn--ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5)}
.btn--sm{height:40px;padding:0 18px;font-size:14px;border-radius:var(--r-xs)}
.btn--block{width:100%}
.btn .ic{width:17px;height:17px}
:where(span).tag{
display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:4px;
font:700 10.5px/1 var(--f-body);letter-spacing:.03em;text-transform:none;
}
.tag--lime{background:var(--lime-500);color:var(--on-accent)}
.tag--hot{background:var(--hot);color:#fff}
/* 橙底配白字只有 2.48:1。橙色是设计里的重音，不能动 —— 改成深字（5.79:1），
跟 .tag--bundle 一个路子 */
.tag--best{background:var(--best);color:#3b2600}
.tag--bundle{background:var(--amber);color:#3b2600}
.link{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:13.5px;color:var(--lime-700)}
.link .ic{width:15px;height:15px;transition:transform .2s var(--ease)}
.link:hover .ic{transform:translateX(4px)}
.link--muted{color:var(--tx-2)}
.link--muted:hover{color:var(--lime-700)}
.round{
display:grid;place-items:center;width:30px;height:30px;border-radius:var(--r-full);
border:1.4px solid var(--lime-500);color:var(--lime-700);background:#fff;
transition:background-color .2s var(--ease),color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease);
}
.round .ic{width:15px;height:15px}
.round--btn:hover,a:hover>.round{background:var(--lime-500);color:var(--on-accent);transform:scale(1.08);box-shadow:var(--sh-lime)}
/* 真实照片层：![]()
盖在 SVG 插画之上。文件不存在时 ![]()
自我移除，
插画继续兜底 —— 所以「换成真图」= 往 assets/img/ 丢文件，不改标记。
注意：position 由外层类（.art/.cat__img/.sol__scene）覆盖，它们更靠后。 */
.shot{position:relative;display:block}
.shot__img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center}
.shot__img--cover{object-fit:cover}
.ava .shot__img{border-radius:inherit}
/* 真图一到位就撤掉插画/缩写，避免比例不同时插画从图片周围露出来 */
.shot.has-img>.dv{opacity:0}
.ava.has-img::after{opacity:0}
/* 插画是透明底、要留白居中；实拍图自带背景，居中反而像"图里套了个方块"。
所以有真图时改成铺满裁切 —— 跟真实电商的商品图一个处理。 */
.card__media .shot.has-img{inset:0}
.card__media .shot.has-img .shot__img{object-fit:cover;border-radius:0}
/* ── 分类卡：浅色 tint 卡 + 右侧照片列 ─────────────────────────────
照片占右半列、左缘用 mask 化进卡片底色 —— 不是"浅色卡里贴块矩形"，
图和底是一体的。没图的卡靠 tint + 水印字照样成立。 */
.cat .shot.has-img{
position:absolute;top:0;right:0;bottom:0;width:52%;transform:none;border-radius:0;overflow:hidden;
mask-image:linear-gradient(90deg,transparent 0,#000 42%);
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 42%)
}
.cat .shot.has-img .shot__img{object-fit:cover;transition:transform .55s var(--ease-out)}
.cat:has(.shot.has-img):hover .shot__img{transform:scale(1.06)}
/* 无图兜底（静态版/Woo 停用时）：器件插画缩在右下角，深色线条印在 tint 底上 */
.cat .dv.cat__img{position:absolute;right:-6px;bottom:24px;width:108px;height:86px;color:var(--ink-900);opacity:.75;transition:transform .35s var(--ease-out)}
.cat:hover .dv.cat__img{transform:scale(1.08) rotate(-3deg)}
/* 实拍图自带背景色时，圆角让它读起来像缩略图而不是一块灰方块。
透明底 PNG 上看不出差别，所以可以统一加。 */
.card__media .shot__img,.bundle__img .shot__img{border-radius:8px}
/* ── 4. Section furniture ──────────────────────────────────────────────── */
/* 上下间距走 --lmt-sp-* 变量（自定义器「区块间距」可调），var 兜底值 = 原设计值 */
.sec{padding:var(--lmt-sp-sec,76px) 0}
.sec--tight{padding-top:38px}
.sechd{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:28px}
.sechd__h{font-size:clamp(24px,2.4vw,31px)}
.sechd__h--solo{margin-bottom:20px}
/* 方案区副标题：压在主标下方、tabs 上方的一行小字（对齐合作伙伴区 .prt__sub 的灰度） */
.sechd__sub{margin:-12px 0 20px;font-size:13px;color:var(--tx-3)}
/* ── 5. Promo bar ──────────────────────────────────────────────────────── */
.promo{background:var(--lime-500);color:var(--on-accent);font-size:12.5px;font-weight:600}
.promo__in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:34px;padding-block:7px}
.promo__left{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.promo__flame{color:#88281e; /* 4.50:1 on 促销条的柠檬绿 */font-size:10px;transform:translateY(-1px)}
.promo__sep{opacity:.4}
.promo__code{background:rgba(0,0,0,.14);padding:1px 7px;border-radius:4px;letter-spacing:.04em}
/* 跑马灯包装层：桌面 contents 穿透等于没包；循环用的复制品桌面不渲染 */
.promo__mq,.promo__seq{display:contents}
.promo__seq--dup{display:none}
@keyframes promomq{to{transform:translateX(-50%)}}
.promo__right{opacity:.9}
/* ── 6. Header ─────────────────────────────────────────────────────────── */
/* ★ 浅色顶栏（甲方反馈：整条墨底"压抑"）。
深色留给 Hero 当视觉重点 —— 白顶栏 + 深 Hero 的反差反而让它更醒目。
文字色一律走 --tx 系；悬停 lime-700（4.54:1，lime-400 在白底过不了对比度）。 */
/* 促销条+页眉一起吸顶（甲方要促销条常驻）。单容器而不是两个 sticky 元素：
两个 top:0 的 sticky 会互相顶位置，包住才是它们整体钉住。 */
.topfix{position:sticky;top:0;z-index:90}
.hdr{position:relative;background:#fff;box-shadow:0 1px 0 var(--line)}
/* 吸顶区常驻后，#锚点 跳转不能让目标内容顶进页眉底下 */
[id]{scroll-margin-top:calc(var(--topfix-h) + 10px)}
/* 阅读进度条：贴吸顶区底边（页眉下沿）——促销条也吸顶后放顶边会 lime 撞 lime 看不见。
主路径零 JS —— CSS scroll() 时间线驱动 scaleX；减动偏好下全局 animation:none
会让它停在 scaleX(0)，也就是只剩一条淡槽，不会谎报进度。 */
.hdr__prog{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(var(--ink-900-rgb),.08);pointer-events:none;z-index:5}
.hdr__prog::after{
content:"";position:absolute;inset:0;
background:linear-gradient(90deg,var(--lime-500),var(--lime-400));
transform:scaleX(0);transform-origin:0 50%
}
@supports (animation-timeline:scroll()){
.hdr__prog::after{animation:lmt-progress linear both;animation-timeline:scroll(root block)}
@keyframes lmt-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}
/* 老浏览器兜底：main.js 检测到不支持 scroll() 时间线时挂这个类，改 --prog */
.hdr__prog--js::after{transform:scaleX(var(--prog,0))}
@media(max-width:767px){.hdr__prog{height:2px}}
.hdr__main{background:#fff}
.hdr__row{display:flex;align-items:center;gap:26px;min-height:88px;transition:min-height .25s var(--ease)}
.hdr.is-stuck .hdr__row{min-height:64px}
.hdr.is-stuck .hdr__nav{box-shadow:0 8px 24px rgba(15,23,32,.08)}
.brand{display:flex;align-items:center;gap:9px;flex:none}
.brand__mark{width:30px;height:30px;flex:none;color:var(--lime-600)}
.brand__mark svg{width:100%;height:100%;display:block}
.brand__word{font-family:var(--f-disp);font-weight:700;font-size:21px;letter-spacing:-.03em;color:var(--ink-900);white-space:nowrap}
.brand__word>span{color:var(--lime-700)}
.brand__col{display:flex;flex-direction:column;line-height:1.1}
.brand__img{display:block;max-width:none;object-fit:contain;object-position:left center}
/* Seeed 式 lockup：logo 下一行小标语。后台「设置→常规」改，没有就不渲染 */
.brand__sub{margin-top:3px;font-size:9.5px;font-weight:600;letter-spacing:.02em;color:var(--tx-3);white-space:nowrap}
/* 深色底上的 lockup（抽屉/页脚） */
.drawer .brand__mark{color:var(--lime-400)}
.drawer .brand__word{color:var(--tx-inv)}
.drawer .brand__word>span{color:var(--lime-400)}
.drawer .brand__sub{display:none}
/* ★ 用 :where(form) 限定元素，不能直接写 form.search：
WordPress 会把 search / tag 这类词写进 （搜索结果页是
body.search，标签归档是 body.tag），裸类名会让整个 套上组件样式 ——
搜索结果页会变成一个横向 flex 容器，页面直接散架。
而 form.search 又会把权重从 (0,1,0) 抬到 (0,1,1)，压过下面媒体查询里的
.search 覆盖（窄屏那条"搜索框独占一行"就失效了）。:where() 权重为 0，
两个问题一起解决。 */
:where(form).search{
display:flex;align-items:center;flex:1;min-width:0;max-width:640px;height:42px;
background:#fff;border-radius:var(--r-xs);padding:3px;gap:2px;
/* Seeed 式：白底 + 一圈很浅的 lime 描边，搜索框自己就是一块品牌位 */
box-shadow:0 0 0 1px rgba(var(--lime-500-rgb),.55);
}
:where(form).search:focus-within{box-shadow:0 0 0 1.5px var(--lime-500)}
.search__cat{position:relative;display:flex;align-items:center;flex:none;border-right:1px solid var(--line)}
.search__cat select{
appearance:none;border:0;background:none;height:36px;padding:0 26px 0 12px;
font-size:12.5px;font-weight:600;color:var(--tx-2);cursor:pointer;max-width:150px;
}
.search__catic{position:absolute;right:8px;width:14px;height:14px;color:var(--tx-3);pointer-events:none}
:where(form).search input{flex:1;min-width:0;border:0;background:none;height:36px;padding:0 12px;font-size:13.5px}
:where(form).search input::placeholder{color:#9aa5b4}
:where(form).search input:focus{outline:none}
.search__go{
display:grid;place-items:center;width:44px;height:36px;flex:none;border-radius:5px;
background:var(--lime-500);color:var(--on-accent);transition:background-color .18s var(--ease)
}
.search__go:hover{background:var(--lime-400)}
.search__go .ic{width:18px;height:18px;stroke-width:2}
.hdr__acts{display:flex;align-items:center;gap:18px;flex:none;margin-left:auto}
.act{display:flex;align-items:center;gap:9px;color:var(--tx-2);transition:color .18s var(--ease)}
.act:hover{color:var(--lime-700)}
.act__i{width:22px;height:22px}
.act__txt{display:flex;flex-direction:column;line-height:1.25}
.act__txt b{font-size:12.5px;font-weight:600;color:var(--tx)}
.act__txt em{font-style:normal;font-size:10.5px;color:var(--tx-3)}
.act__txt--tight b{font-size:13px}
.act--icon .ic{width:22px;height:22px}
.act__cartwrap{position:relative;display:grid;place-items:center}
.act__cartwrap .ic{width:23px;height:23px}
.act__count{
position:absolute;top:-6px;right:-8px;min-width:17px;height:17px;padding:0 4px;
display:grid;place-items:center;border-radius:var(--r-full);
background:var(--lime-500);color:var(--on-accent);font:700 10.5px/1 var(--f-body);
}
.act__count.is-pop{animation:pop .45s var(--ease-out)}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.55)}100%{transform:scale(1)}}
.burger{display:none;color:var(--ink-900);padding:6px}
.burger .ic{width:24px;height:24px}
/* ── 账号 hover 面板（对标站的 Account 下拉）─────────────────────────
触发器是 .act 链接，面板锚在 .acct 容器右缘，三段分带：
头部（身份卡 / 登录注册 CTA）→ 账户链接列表 → 底部服务承诺灰带。 */
.acct{position:relative;display:flex}
.acct__panel{
position:absolute;top:100%;right:0;z-index:6;width:308px;
padding:0;overflow:hidden;
background:#fff;border:1px solid var(--line);border-radius:var(--r);
box-shadow:var(--sh-3);
opacity:0;visibility:hidden;transform:translateY(8px);
transition:opacity .2s var(--ease),transform .25s var(--ease-out),visibility .2s
}
/* 触发器与面板之间不能有死缝：看不见的下沿把 hover 桥过去 */
.acct__panel::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.acct:hover .acct__panel,.acct:focus-within .acct__panel{opacity:1;visibility:visible;transform:translateY(4px)}
/* 头部带：已登录=身份卡（头像+名+退出），未登录=双 CTA */
.acct__hi{
display:flex;align-items:center;gap:11px;
margin:0;padding:13px 16px;
background:var(--surface-2);border-bottom:1px solid var(--line)
}
.acct__ava{
flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:var(--r-full);
background:rgba(var(--lime-500-rgb),.18);color:var(--lime-700);
font-size:11px;font-weight:800;letter-spacing:.04em
}
.acct__hi-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.acct__hi-t em{font-style:normal;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--tx-3)}
.acct__hi-t b{font-size:14px;font-weight:700;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct__hi a{flex:none;font-size:12px;font-weight:600;color:var(--tx-3)}
.acct__hi a:hover{color:var(--lime-700)}
.acct__cta{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:14px 16px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.acct__cta .btn{border-radius:var(--r-sm)}
.acct__up{background:#fff;color:var(--tx);border:1px solid var(--line)}
.acct__up:hover{border-color:var(--tx-3)}
/* 主区：账户链接列表 —— 左图标 + 标题/说明纵排 + 右侧浮现的箭头 */
.acct__list{list-style:none;margin:0;padding:8px}
.acct__list a{
display:flex;align-items:center;gap:11px;
padding:9px 10px;border-radius:var(--r-xs);
transition:background .15s var(--ease)
}
.acct__list a:hover{background:var(--surface-2)}
.acct__ic{flex:none;width:17px;height:17px;color:var(--tx-3);transition:color .15s var(--ease)}
.acct__list a:hover .acct__ic{color:var(--lime-600)}
.acct__tx{flex:1;min-width:0;display:flex;flex-direction:column}
.acct__lab{font-size:13.5px;font-weight:600;color:var(--tx);line-height:1.3}
.acct__list a:hover .acct__lab{color:var(--lime-700)}
.acct__desc{font-style:normal;font-size:11px;color:var(--tx-3);line-height:1.35}
.acct__go{flex:none;width:14px;height:14px;color:var(--lime-700);opacity:0;transform:translateX(-4px);transition:all .18s var(--ease)}
.acct__list a:hover .acct__go{opacity:1;transform:none}
/* 页脚带：服务承诺 —— 降噪成小字灰区，只做信任背书不抢戏 */
.acct__svc{
display:grid;grid-template-columns:1fr 1fr;gap:2px 10px;
padding:11px 16px;border-top:1px solid var(--line);background:var(--surface-2)
}
.acct__svc-i{
display:flex;align-items:center;gap:7px;padding:5px 4px;border-radius:var(--r-xs);
font-size:11px;font-weight:600;color:var(--tx-3);line-height:1.3;
transition:color .15s var(--ease)
}
a.acct__svc-i:hover{color:var(--lime-700)}
.acct__svc-i .ic{width:14px;height:14px;flex:none;color:var(--lime-600)}
.hdr__nav{background:#fff;border-top:1px solid var(--line)}
.hdr__navrow{display:flex;align-items:center;gap:26px;min-height:50px}
/* 「Shop by Category」留一颗深色药丸当锚点：
浅色顶栏里唯一一块深色，既压住导航行、又和下方深色 Hero 呼应 */
.shopcat{
display:inline-flex;align-items:center;gap:9px;height:34px;padding:0 18px;flex:none;
border-radius:var(--r-full);background:var(--ink-900);color:#fff;
font-family:var(--f-disp);font-size:12.5px;font-weight:600;
transition:background-color .18s var(--ease)
}
.shopcat:hover{background:var(--ink-700)}
.shopcat .ic{width:15px;height:15px}
/* ★ mega 面板挂在 .nav 上而不是挂在导航项上。
挂在项上时面板从项的左边缘往右铺 820px：英文的 Products 起点在 675px，
面板右边缘就到 1495px，比 1440 的视口还宽 55px —— 整页多出一条横向滚动。
中文导航短，起点靠左，所以只有英文站会犯，很容易漏掉。
挂在 .nav 上，面板左边缘就是导航起点，宽度再大也出不了容器。 */
.nav{min-width:0;position:relative}
.nav__list{display:flex;align-items:center;gap:4px}
.nav__item{position:static}
.nav__item>a{
display:inline-flex;align-items:center;gap:5px;height:50px;padding:0 12px;
font-size:13.5px;font-weight:600;color:var(--tx-2);
transition:color .18s var(--ease);white-space:nowrap;
}
.nav__item>a::after{
content:"";position:absolute;left:12px;right:12px;bottom:0;height:2px;
background:var(--lime-500);transform:scaleX(0);transform-origin:left;
transition:transform .25s var(--ease)
}
.nav__item:hover>a{color:var(--ink-900)}
.nav__item:hover>a::after{transform:scaleX(1)}
.nav__chev{width:13px;height:13px;opacity:.65}
/* mega menu */
.mega{
position:absolute;top:100%;left:0;z-index:5;width:min(820px,100%);
display:grid;grid-template-columns:1fr 250px;gap:26px;
padding:24px;background:#fff;border-radius:0 0 var(--r) var(--r);
box-shadow:var(--sh-3);
opacity:0;visibility:hidden;transform:translateY(8px);
transition:opacity .2s var(--ease),transform .25s var(--ease-out),visibility .2s
}
.has-mega:hover .mega,.has-mega:focus-within .mega{opacity:1;visibility:visible;transform:translateY(0)}
/* 走 WP 菜单时没有促销位（walker 不输出），那条 250px 的列就空在那儿，
同时把三列挤到 180px 宽、标题都折行。没有促销位就不留这一列。 */
.mega:not(:has(.mega__promo)){grid-template-columns:1fr;width:min(660px,100%)}
.mega__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.mega h4{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--tx-3);margin-bottom:11px}
.mega h4 a{font-size:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit}
.mega h4 a:hover{color:var(--lime-700)}
.mega li+li{margin-top:8px}
.mega li a{font-size:13.5px;color:var(--tx-2);transition:color .15s var(--ease)}
.mega li a:hover{color:var(--lime-700)}
.mega__promo{
position:relative;display:flex;flex-direction:column;gap:6px;min-height:150px;
padding:16px;border-radius:var(--r);background:var(--ink-900);color:#fff;overflow:hidden
}
.mega__promo::before{
content:"";position:absolute;inset:0;pointer-events:none;
background-image:var(--circuit);background-size:170px 170px;opacity:.12
}
.mega__promo strong{
position:relative;font-family:var(--f-disp);font-size:15.5px;line-height:1.3;
max-width:150px;margin-top:2px
}
.mega__promo em{position:relative;font-style:normal;font-size:12px;color:var(--tx-inv-2);max-width:160px}
.mega__promo em .amount{color:#fff;font-weight:700}
.mega__code{
display:inline-block;padding:0 6px;border-radius:4px;letter-spacing:.05em;font-weight:700;
color:var(--lime-400);box-shadow:inset 0 0 0 1px rgba(var(--lime-500-rgb),.45)
}
.mega__promo .link{position:relative;color:var(--lime-400);margin-top:4px;font-weight:600;font-size:12.5px}
.mega__promo .link:hover{color:var(--lime-300)}
.mega__promoimg{position:absolute;right:-22px;bottom:-14px;width:150px;height:120px;opacity:.9}
.mega__promoimg .shot{position:absolute;inset:0}
.mega__promo .tag{align-self:flex-start}
/* 扁平下拉：菜单项加 CSS 类 "drop" 时，二级项是贴在该项下面的单层列表。
.nav__item 默认 position:static（mega 面板要锚在整条 .nav 上）；
扁平下拉要锚在自己的项下，所以 has-drop 单独改回 relative。 */
.nav__item.has-drop{position:relative}
.nav__drop{
position:absolute;top:100%;left:0;z-index:6;min-width:200px;
margin:0;padding:8px;list-style:none;
background:#fff;border:1px solid var(--line);border-radius:var(--r);
box-shadow:var(--sh-3);
opacity:0;visibility:hidden;transform:translateY(8px);
transition:opacity .2s var(--ease),transform .25s var(--ease-out),visibility .2s
}
.has-drop:hover .nav__drop,.has-drop:focus-within .nav__drop{opacity:1;visibility:visible;transform:translateY(0)}
.nav__drop li a{
display:block;padding:9px 12px;border-radius:var(--r-xs);
font-size:13.5px;font-weight:600;color:var(--tx-2);white-space:nowrap;
transition:background .15s var(--ease),color .15s var(--ease)
}
.nav__drop li a:hover{background:var(--surface-2);color:var(--lime-700)}
/* drawer */
.drawer{position:fixed;inset:0;z-index:120}
.drawer__scrim{position:absolute;inset:0;background:rgba(var(--ink-950-rgb),.6);backdrop-filter:blur(2px);animation:fade .25s var(--ease)}
@keyframes fade{from{opacity:0}}
.drawer__panel{
position:absolute;top:0;right:0;bottom:0;width:min(340px,86vw);
background:var(--ink-900);color:#fff;display:flex;flex-direction:column;
animation:slidein .3s var(--ease-out);z-index:1
}
@keyframes slidein{from{transform:translateX(100%)}}
.drawer__top{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid rgba(255,255,255,.08)}
.drawer__x{color:#fff}
.drawer__x .ic{width:22px;height:22px}
.drawer__nav{padding:12px 20px;overflow:auto;flex:1}
.drawer__nav a{display:block;padding:11px 0;font-size:15px;font-weight:600;color:#dbe4ec;border-bottom:1px solid rgba(255,255,255,.05)}
.drawer__nav a:hover{color:var(--lime-400)}
.drawer__nav hr{border-color:rgba(255,255,255,.09)}
.drawer__deals{display:flex!important;align-items:center;gap:8px}
.drawer__lbl{display:block;padding:14px 0 6px;font:600 11px/1 var(--f-disp);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-400)}
.drawer__nav a.drawer__sub{padding-left:12px;font-weight:500;font-size:14px;color:var(--ink-200)}
.drawer__foot{padding:18px 20px;border-top:1px solid rgba(255,255,255,.08)}
/* 抽屉内语言切换：顶栏胶囊窄屏隐藏后，这里是手机端唯一入口 */
.drawer__langs{display:flex;gap:8px;margin-bottom:14px}
.drawer__lang{
flex:1;text-align:center;padding:9px 0;border-radius:var(--r);
border:1px solid rgba(255,255,255,.14);color:var(--tx-inv-2);
font-size:13.5px;font-weight:600
}
.drawer__lang.is-on{border-color:var(--lime-500);color:var(--lime-300);background:rgba(var(--lime-500-rgb),.12)}
/* ── 7. Hero ───────────────────────────────────────────────────────────── */
.hero{
position:relative;overflow:hidden;isolation:isolate;
background:radial-gradient(78% 120% at 68% 42%,var(--ink-900) 0%,var(--ink-950) 58%,var(--ink-950) 100%)
}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__grid{
position:absolute;inset:0;
background-image:linear-gradient(rgba(var(--lime-500-rgb),.055) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--lime-500-rgb),.055) 1px,transparent 1px);
background-size:46px 46px;
mask-image:radial-gradient(120% 90% at 62% 42%,#000 20%,transparent 78%);
}
.hero__glow{position:absolute;border-radius:50%;filter:blur(70px)}
.hero__glow--a{width:560px;height:460px;right:1%;top:-130px;background:radial-gradient(circle,rgba(var(--lime-500-rgb),.28),transparent 68%)}
.hero__glow--b{width:480px;height:380px;left:36%;bottom:-190px;background:radial-gradient(circle,rgba(var(--lime-400-rgb),.16),transparent 70%)}
.hero__scan{
position:absolute;inset:0;opacity:.16;
background-image:var(--circuit);background-size:180px 180px;
mask-image:radial-gradient(90% 80% at 78% 55%,#000,transparent 72%);
}
/* Hero 底图用真实电路板照片（效果图里那层也是实拍）。
路径写成相对 CSS 文件，效果稿与主题两边都能解析。
压得很暗是故意的：它是质感层不是主体，压不住的话上面的白字会糊。 */
.hero__photo{
position:absolute;inset:0;
background:url(../img/backgrounds/hero.webp) center/cover no-repeat;
opacity:.42;filter:grayscale(.4) contrast(1.05);
mask-image:radial-gradient(115% 95% at 62% 45%,#000 32%,transparent 82%)
}
/* 底图之上再压一层，把左侧文字区压到足够暗 */
.hero__photo::after{
content:"";position:absolute;inset:0;
background:linear-gradient(100deg,rgba(4,9,7,.9) 0%,rgba(4,9,7,.62) 40%,rgba(4,9,7,.25) 75%,transparent 100%)
}
.hero__stage{position:relative;z-index:1;display:grid}
.slide{
grid-area:1/1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);
align-items:center;gap:20px;min-height:var(--lmt-sp-hero,600px);padding:72px 0 84px;
}
.slide[hidden]{display:none}
.slide__copy{max-width:565px}
.slide__h{font-size:clamp(31px,4vw,50px);font-weight:800;color:#fff;letter-spacing:-.035em}
.slide__p{margin-top:16px;font-size:15.5px;color:#b9c7d4;line-height:1.62}
.feat{display:flex;gap:26px;margin-top:24px;flex-wrap:wrap}
.feat li{display:flex;align-items:center;gap:9px;font-size:11.5px;line-height:1.3;color:#c6d3de}
.feat .ic{width:20px;height:20px;color:var(--lime-400)}
.slide__cta{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
/* Entrance: `translate`/`opacity` only — never `transform`, which the art
layer uses for positioning (an animation with fill-mode would clobber it). */
.slide.is-active .slide__copy>*{animation:riseIn .7s var(--ease-out) both}
.slide.is-active .slide__p{animation-delay:.07s}
.slide.is-active .feat{animation-delay:.13s}
.slide.is-active .slide__cta{animation-delay:.19s}
.slide.is-active .art{animation:artIn .85s var(--ease-out) both}
.slide.is-active .slide__halo{animation:justFade 1s var(--ease) both}
@keyframes riseIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes artIn{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}
@keyframes justFade{from{opacity:0}to{opacity:1}}
.slide__art{position:relative;height:480px}
.slide__halo{
position:absolute;left:50%;top:52%;width:420px;height:300px;transform:translate(-50%,-50%);
background:radial-gradient(ellipse,rgba(var(--lime-500-rgb),.22),transparent 66%);filter:blur(24px)
}
.art{position:absolute;filter:drop-shadow(0 22px 30px rgba(0,0,0,.55))}
/* Hero 用实拍图时：不是"贴一张小图"，而是整块占住右侧，靠遮罩把矩形边缘
化进深色背景里。
实拍图没有透明底，直接放上来就是一个硬邦邦的方块；radial 遮罩 + 边缘渐隐
之后才像是从背景里长出来的。选图也要配合 —— 深底带绿色指示灯的最好。 */
.slide__art .shot.art.has-img{
/* 向外扩出可视区：照片的上下右三条边落在 Hero 之外，看不见硬边，
遮罩只负责把左侧和四角化开 */
position:absolute;inset:-24% -22% -24% 2%;width:auto;height:auto;transform:none;
filter:none;overflow:hidden;
/* 两层遮罩取交集：radial 收四周，linear 专门化掉左边那条竖直硬边 ——
只用 radial 的话左侧仍会留一条清晰的照片边界，一眼就看出是贴上去的 */
mask-image:
radial-gradient(118% 104% at 62% 48%,#000 46%,rgba(0,0,0,.45) 74%,transparent 96%),
linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 12%,#000 30%);
mask-composite:intersect;
-webkit-mask-image:
radial-gradient(118% 104% at 62% 48%,#000 46%,rgba(0,0,0,.45) 74%,transparent 96%),
linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 12%,#000 30%);
-webkit-mask-composite:source-in
}
/* 压饱和 + 轻微压暗：图库照片各有色偏（这批里机柜那张偏蓝很重），
不统一处理的话每切一屏色调都在跳，还会跟柠檬绿打架。
降饱和后照片退成背景质感，品牌绿重新主导画面。 */
.slide__art .shot.art.has-img .shot__img{
object-fit:cover;object-position:center;
filter:saturate(.5) contrast(1.06) brightness(.88)
}
/* 压一层墨绿，让照片本身的色偏（偏蓝/偏黄）统一到品牌色调上 */
.slide__art .shot.art.has-img::after{
content:"";position:absolute;inset:0;
background:linear-gradient(115deg,rgba(var(--ink-950-rgb),.86) 0%,rgba(var(--ink-950-rgb),.42) 34%,rgba(var(--ink-950-rgb),.22) 68%,transparent 100%)
}
/* 纯图横幅模式：有特色图的幻灯只放图，不叠遮罩/文案/HUD。
图从 .container 里挣脱到视口全宽（left:50% + translate 的经典 full-bleed 写法）；
高度吃「首屏高度」设置，窄屏按 58vw 收缩、320px 保底。
双类名 .slide.slide--banner：压过窄屏媒体查询里 .slide 的 padding 重置。 */
.slide.slide--banner{position:relative;grid-template-columns:1fr;min-height:0;height:clamp(320px,58vw,var(--lmt-sp-hero,600px));padding:0}
.slide--banner .slide__link,.slide--banner>.slide__img,.slide--banner>.slide__pic{position:absolute;top:0;bottom:0;left:50%;translate:-50% 0;width:100vw}
.slide--banner .slide__link{display:block}
/* 移动端换图时 顶替 ![]()
的位置，本身只是个布局壳 */
.slide__pic{display:block;height:100%}
/* contain 整图展示：图的宽高比和容器对不上时不再裁切，
两侧空区由 .slide__fill 的同图模糊层铺满。 */
.slide--banner .slide__img{width:100%;height:100%;object-fit:contain;object-position:center;display:block}
.slide--banner .slide__link .slide__img{position:relative;z-index:1}
.slide--banner .slide__fill{position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(30px) saturate(1.15) brightness(.88);transform:scale(1.14);z-index:0}
.slide--banner .slide__link:focus-visible{outline:2px solid var(--lime-400);outline-offset:-2px}
.slide.is-active.slide--banner .slide__img{animation:justFade .9s var(--ease) both}
.art--box{width:300px;height:240px;right:2%;top:16%;z-index:2}
.art--cam{width:220px;height:176px;left:6%;top:6%;z-index:3;transform:rotate(-8deg)}
.art--cube{width:172px;height:138px;left:35%;bottom:-1%;z-index:4}
.art--solo{width:340px;height:272px;left:46%;top:50%;transform:translate(-50%,-50%);z-index:3}
.art--sensor.art--solo{transform:translate(-50%,-50%) rotate(-4deg)}
.art--back{width:190px;height:152px;right:1%;top:32%;z-index:1;opacity:.75}
.art--dongle{width:230px;height:184px;right:0;bottom:8%;z-index:4}
.art--sbc.art--solo{width:330px;height:264px}
/* floating spec chips */
/* ── Hero 上的标注 ──────────────────────────────────────────────────
不用带边框的浮动方块：那种卡片会在照片上多出三个"窗口"，跟 Hero 的
整体感打架，照片一换背景色就更明显。
改成标注式：一个发光圆点落在图上，引一条细横线出去接文字。
右侧标注是 点—线—文字；左侧用 row-reverse 镜像成 文字—线—点，
两边的点都指向画面中心的器件。 */
.chip{
position:absolute;z-index:6;display:flex;align-items:center;gap:0;
color:#fff;background:none;border:0;padding:0;box-shadow:none;backdrop-filter:none;
/* 照片明暗不可控，投影保证任何底上都读得清 */
text-shadow:0 1px 10px rgba(0,0,0,.85),0 0 3px rgba(0,0,0,.6)
}
/* 圆点：落点 */
.chip::before{
content:"";order:0;flex:none;width:7px;height:7px;border-radius:50%;
background:var(--lime-400);
box-shadow:0 0 0 4px rgba(var(--lime-500-rgb),.16),0 0 14px 2px rgba(var(--lime-500-rgb),.75)
}
/* 引线：从落点拉向文字，末端渐隐 */
.chip::after{
content:"";order:1;flex:none;width:42px;height:1px;
background:linear-gradient(90deg,rgba(var(--lime-400-rgb),.95),rgba(var(--lime-400-rgb),.2))
}
.chip>*{order:2}
/* 文字：第一行说明、第二行数值 */
.chip__hd,.chip--sm{
display:flex;align-items:center;gap:0;margin-left:10px;
font-size:11.5px;line-height:1.35;color:rgba(255,255,255,.78)
}
.chip__hd b,.chip--sm b{display:block;font-family:var(--f-disp);font-size:15px;color:#fff;margin-top:2px}
/* 标注形态下图标是多余的一层噪点，去掉 */
.chip .ic{display:none}
/* 走势图同理：没有容器托着它就成了一条孤零零的线。留在标记里，
将来想恢复卡片形态时直接放开即可 */
.chip--metric .spark{display:none}
.chip--metric{right:9%;top:9%}
.chip--low{left:2%;bottom:24%;flex-direction:row-reverse;text-align:right}
.chip--low .chip--sm,.chip--low.chip--sm{margin-left:0;margin-right:10px}
.chip--sec{right:11%;bottom:13%}
/* fade in on cue, then drift forever — float is last in the list so it owns
`translate` once its delay elapses */
.chip{opacity:0}
.slide.is-active .chip--metric{animation:chipIn .7s var(--ease-out) .26s both,float 7s ease-in-out .96s infinite}
.slide.is-active .chip--low{animation:chipIn .7s var(--ease-out) .34s both,float 8.5s ease-in-out 1.04s infinite}
.slide.is-active .chip--sec{animation:chipIn .7s var(--ease-out) .42s both,float 9.5s ease-in-out 1.12s infinite}
@keyframes chipIn{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -9px}}
.hero__arw{
position:absolute;top:50%;z-index:3;translate:0 -50%;
display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r-full);
color:#fff;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
transition:background-color .2s var(--ease),transform .2s var(--ease)
}
.hero__arw:hover{background:rgba(var(--lime-500-rgb),.3);transform:translateY(-50%) scale(1.06)}
.hero__arw .ic{width:20px;height:20px}
.hero__arw--prev{left:14px}
.hero__arw--next{right:14px}
.hero__dots{position:absolute;left:50%;bottom:18px;z-index:3;translate:-50% 0;display:flex;gap:8px}
.hero__dot{width:8px;height:8px;border-radius:var(--r-full);background:rgba(255,255,255,.3);transition:all .3s var(--ease)}
.hero__dot.is-on{width:26px;background:var(--lime-500)}
/* ── 8. Category strip ─────────────────────────────────────────────────── */
.cats{background:var(--surface);padding:var(--lmt-sp-cats,44px) 0}
.cats__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
/* 六色 tint 循环：每卡一个柔和底色 + 一枚同色深水印。
色板围着藏青/天蓝品牌调转 —— 参考站是彩虹糖色系，我们收一档更统一。 */
.cat--t1{--cat-bg:#eef6dc;--cat-wm:rgba(88,130,32,.10)}
.cat--t2{--cat-bg:#e7f4ec;--cat-wm:rgba(22,88,58,.10)}
.cat--t3{--cat-bg:#efeafb;--cat-wm:rgba(84,58,152,.10)}
.cat--t4{--cat-bg:#fdf0e3;--cat-wm:rgba(158,88,28,.10)}
.cat--t5{--cat-bg:#fae9ee;--cat-wm:rgba(152,48,80,.10)}
.cat--t6{--cat-bg:#e3f2f2;--cat-wm:rgba(22,98,104,.10)}
.cat{
position:relative;display:flex;flex-direction:column;
min-height:196px;padding:18px 18px 15px;background:var(--cat-bg,#fff);border:1px solid var(--line);
border-radius:var(--r);overflow:hidden;
transition:transform .28s var(--ease-out),box-shadow .28s var(--ease),border-color .2s var(--ease)
}
.cat:hover{transform:translateY(-5px);box-shadow:var(--sh-3);border-color:rgba(var(--lime-500-rgb),.55)}
/* 水印：分类名放大冲淡当底纹，上缘出血 —— 名字再长也不会压到标题，
装饰层不读屏 */
.cat__wm{
position:absolute;top:-12px;right:-10px;z-index:0;
font-size:54px;font-weight:800;line-height:1;letter-spacing:-.03em;white-space:nowrap;
color:var(--cat-wm,rgba(var(--ink-900-rgb),.09));user-select:none;pointer-events:none
}
.cat__txt{position:relative;z-index:1;max-width:56%}
.cat h3{font-size:16px;color:var(--ink-900)}
.cat p{
margin-top:6px;font-size:12px;line-height:1.5;color:rgba(var(--ink-900-rgb),.6);max-width:24ch;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
/* 商品数小章：B2B 客户在意的信息（这行有多少 SKU），压在照片右上角 */
.cat__n{
position:absolute;top:12px;right:12px;z-index:2;
padding:3px 10px;border-radius:var(--r-full);background:rgba(255,255,255,.72);backdrop-filter:blur(4px);
font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-900)
}
.cat .round{margin-top:auto;position:relative;z-index:1;background:rgba(255,255,255,.8);backdrop-filter:blur(4px)}
.cat:hover .round{background:var(--lime-500);border-color:var(--lime-500);color:var(--on-accent)}
/* ── 9. Product cards ──────────────────────────────────────────────────── */
.pgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
/* 图片满宽贴顶、文字区自己带内边距 —— 图片四周留一圈白边会让卡片显得
像"图上贴了张小图"，和分类卡那套铺满的处理也不统一 */
.card{
display:flex;flex-direction:column;padding:0;overflow:hidden;
background:#fff;border:1px solid var(--line);border-radius:var(--r);
transition:transform .28s var(--ease-out),box-shadow .28s var(--ease),border-color .2s var(--ease)
}
.card:hover{transform:translateY(-5px);box-shadow:var(--sh-3);border-color:rgba(var(--lime-500-rgb),.5)}
/* ── 整卡可点 ────────────────────────────────────────────────────────
用"拉伸链接"：把标题里那个真实的 铺满整张卡。
不给卡片绑 JS 点击事件 —— 那样中键/新标签页打开、右键复制链接、
键盘 Tab 聚焦全都会失效，而且屏幕阅读器读不出这是个链接。
这样做语义和焦点仍然落在标题上，只是可点区域扩大到整卡。 */
.card{position:relative}
.card__t a::after{content:"";position:absolute;inset:0;z-index:1}
/* 加购按钮和快速查看要浮在拉伸层之上，否则点击会被整卡链接吃掉 */
.card__quick{z-index:2}
.card__foot .round{position:relative;z-index:2}
.card__media{
position:relative;display:grid;place-items:center;height:172px;margin:0;
background:var(--surface-2);overflow:hidden
}
/* 绝对铺满而不是 width/height 百分比：图位容器是 grid+place-items:center，
子元素的 height:100% 在这种上下文里解析不出来，