/* ============================================================
   VoyagerModel — 响应式主样式（mobile-first）
   ============================================================ */
:root{
  --bg:#eef1f4;
  --card:#fff;
  --ink:#22272b;
  --muted:#6b7680;
  --line:#d7dde3;
  --brand:#1d4e79;
  --brand-dark:#143a5b;
  --accent:#c8102e;
  --radius:6px;
  --shadow:0 1px 3px rgba(0,0,0,.10);
  /* --- 老站配色（取自 Website/css/master.css 与 Website/images/*.gif 取样）---
     老站页头信息条 / 导航条 / 页脚 / 搜索按钮共用同一条青蓝渐变 footer.gif，
     底部链接 hover 为深青 #237087。 */
  --bar-top:#53d3f2;
  --bar:#48c9ef;
  --bar-bot:#3fc2ed;
  --bar-hover:#2fb0dd;
  --bar-link-hover:#237087;
  /* 老站首页 Vehicles 栏目标题底色（Catalogo.asp 内联样式的 #46B7FF） */
  --cat-vehicles:#46b7ff;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:14px/1.6 "Segoe UI",Arial,"Microsoft YaHei",sans-serif;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{color:var(--accent)}
h1,h2,h3{line-height:1.25;margin:0 0 .5em}
/* 展示宽度对齐老站：#page 是 900px 内容 + 左右各 28px 内边距 = 总宽 956px。
   窄屏仍旧收到 16px 内边距，不然 360px 的手机上光内边距就吃掉 56px。 */
.wrap{width:100%;max-width:956px;margin:0 auto;padding:0 16px}
@media (min-width:760px){.wrap{padding:0 28px}}

/* ---------- header ---------- */
.site-header{background:#fff;border-bottom:3px solid var(--bar);box-shadow:var(--shadow)}
.header-inner{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding-top:12px;padding-bottom:12px}
.logo img{width:auto;height:52px}
.header-right{margin-left:auto;display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.search{display:flex;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#f7f9fb}
.search input{border:0;background:transparent;padding:8px 10px;font-size:14px;min-width:150px;outline:none}
.search button{border:0;background:linear-gradient(180deg,var(--bar-top),var(--bar-bot));color:#fff;padding:8px 14px;cursor:pointer;font-size:14px}
.search button:hover{background:var(--bar-hover)}
.lang{font-size:13px;color:var(--muted);white-space:nowrap}
.lang a.on{color:var(--accent);font-weight:700}

/* ---------- nav ---------- */
.site-nav{background:linear-gradient(180deg,var(--bar-top),var(--bar-bot))}
.nav-toggle{
  display:block;width:100%;text-align:left;background:transparent;border:0;color:#fff;
  padding:12px 16px;font-size:15px;cursor:pointer
}
.nav-list{list-style:none;margin:0;padding:0;display:none}
.nav-list.open{display:block}
.nav-list a{display:block;color:#fff;padding:11px 16px;border-top:1px solid rgba(255,255,255,.12)}
.nav-list a:hover{background:var(--bar-hover);color:#fff}

/* 老站导航条右侧那行电话/邮箱（menunew.asp 的 .menu-right、
   HEAD.ASP 的 #footer p.right）。原来 .nav-list 自己扛的
   max-width/居中/8px 内边距挪到 .nav-inner 上，链接位置不变。 */
.nav-inner{max-width:956px;margin:0 auto}
.nav-contact{display:none;margin:0;font-size:12px;color:#fff;white-space:nowrap}
.nav-contact .sep{margin:0 6px;opacity:.75}
.nav-contact a{color:#fff}
.nav-contact a:hover{color:var(--bar-link-hover)}

@media (min-width:820px){
  .nav-toggle{display:none}
  .nav-list{display:flex;flex-wrap:wrap;padding:0}
  .nav-list a{padding:12px 14px;border-top:0;font-size:14px}
  .logo img{height:60px}
  .nav-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 8px}
}

/* 电话/邮箱整行 278px，跟 7 个链接并排要 884px 才放得下，.wrap 减掉左右
   28px 内边距后正好是 980px 视口宽度。低于这个宽度就不显示，宁可空着。 */
@media (min-width:980px){
  .nav-contact{display:block;flex:0 0 auto;margin-left:auto}
  /* 只靠 stretch 不够：链接 14px 内边距时整行只剩 3px 余量，
     换个字体/缩放就折行。这里把链接内边距压到 11px（省 42px），
     再 nowrap 锁死单行，浏览器字号差异也吃不掉。 */
  .nav-inner{flex-wrap:nowrap}
  .nav-list{flex:0 0 auto;flex-wrap:nowrap}
  .nav-list a{padding:12px 11px}
}

/* ---------- layout ---------- */
.main{padding-top:20px;padding-bottom:32px}
.section{margin-bottom:28px}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;border-bottom:2px solid var(--line);padding-bottom:8px;margin-bottom:16px}
.section-head h2{margin:0;font-size:18px;color:var(--brand-dark)}
.muted{color:var(--muted)}

/* ---------- slideshow ---------- */
.slideshow{position:relative;background:#111;border-radius:var(--radius);overflow:hidden}
.slideshow .slides{position:relative;aspect-ratio:16/7;min-height:200px}
/* 关键：没显示的那几张必须彻底退出命中测试。
   十张都是 absolute/inset:0 叠在一起，只靠 opacity:0 是「透明但还在」，
   浏览器照样能点中——而叠放顺序按 DOM，最后一张永远在最上面吃点击，
   于是可见的那张配的跳转永远点不到（点上去等于点了最后一张的 href="#"）。
   visibility 顺带把不可见的链接从 Tab 顺序里也摘掉。

   visibility 用 0s 过渡 + 延迟来控时机，别写成 `visibility .6s`：
   那种写法靠的是离散插值语义（哪个端点算 visible），各家实现不一致。
   这里显式写死——显示时零延迟（立刻可点），隐藏时延迟 0.6s（淡出才看得见）。 */
.slideshow .slide{
  position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none;display:block;
  transition:opacity .6s,visibility 0s .6s;
}
.slideshow .slide.on{
  opacity:1;visibility:visible;pointer-events:auto;
  transition:opacity .6s,visibility 0s 0s;
}
.slideshow .slide img{width:100%;height:100%;object-fit:cover}
.slideshow .cap{position:absolute;left:0;right:0;bottom:0;padding:24px 16px 12px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.75))}
.slideshow .cap h3{margin:0;font-size:16px}
.slideshow .cap p{margin:2px 0 0;font-size:13px;opacity:.9}
.slideshow .nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.45);color:#fff;border:0;font-size:20px;width:38px;height:38px;cursor:pointer;border-radius:50%}
.slideshow .nav.prev{left:10px}
.slideshow .nav.next{right:10px}
.slideshow .dots{position:absolute;right:12px;bottom:10px;display:flex;gap:6px}
.slideshow .dots button{width:9px;height:9px;border-radius:50%;border:0;background:rgba(255,255,255,.5);cursor:pointer;padding:0}
.slideshow .dots button.on{background:#fff}

/* ---------- catalog ---------- */
/* 分类栏数量会变（目前只剩「战车改造」一栏），用 auto-fit 让卡片自适应占满，
   免得唯一一栏被固定轨道挤成 1/4 宽。 */
.catalog{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.cat-col{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.cat-col h3{font-size:14px;color:#fff;background:var(--cat-vehicles);margin:-14px -16px 10px;padding:9px 16px;border-radius:var(--radius) var(--radius) 0 0}
.cat-col ul{list-style:none;margin:0 0 10px;padding:0}
.cat-col li{border-bottom:1px dashed var(--line)}
.cat-col li:last-child{border-bottom:0}
.cat-col a{display:block;padding:7px 0;font-size:13px}
/* 宽屏下卡片会占满整行，列表分两列排，避免一行一条拉得太长 */
@media (min-width:760px){.catalog .cat-col ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;align-content:start}}

/* ---------- product grid ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
/* 卡片本身是 <div> 而不是 <a>：卡片里还有「说明书」这个 <a>，而 <a> 套 <a> 是非法
   HTML，解析器会把外层卡片拆成多个锚点（实测 50 张卡片变 150 个 .card）。
   整卡可点靠 .card-link 的拉伸伪元素，说明书链接用 z-index 盖在它上面。 */
.card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .15s,transform .15s}
.card:hover{box-shadow:0 4px 12px rgba(0,0,0,.14);transform:translateY(-2px)}
.card .thumb{background:#fff;padding:8px;display:flex;align-items:center;justify-content:center;height:150px}
.card .thumb img{max-height:134px;width:auto}
.card .body{padding:9px 10px;border-top:1px solid var(--line)}
.card .sku{font-size:11px;color:var(--muted);letter-spacing:.3px}
.card .name{font-size:13px;font-weight:600;margin:2px 0 4px;color:var(--ink)}
.card .card-link{color:inherit}
/* 伪元素铺满整张卡片 → 整卡可点；z-index 低于 .pdf，说明书链接照样点得到 */
.card .card-link::after{content:"";position:absolute;inset:0;z-index:1}
.card .date{font-size:11px;color:var(--muted)}
.card .pdf{position:relative;z-index:2;display:inline-block;margin-top:4px;font-size:11px}
.badge{display:inline-block;background:var(--accent);color:#fff;font-size:10px;padding:1px 6px;border-radius:10px;vertical-align:middle}

/* ---------- table (fallback list) ---------- */
.table-note{background:#fff8e1;border:1px solid #ffe082;border-radius:var(--radius);padding:10px 12px;margin-bottom:14px;font-size:13px}

/* ---------- pagination ---------- */
.pager{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;margin:22px 0}
.pager a,.pager span{border:1px solid var(--line);background:#fff;border-radius:var(--radius);padding:7px 12px;font-size:13px}
.pager span.cur{background:var(--brand);color:#fff;border-color:var(--brand)}

/* ---------- product detail ---------- */
.crumbs{font-size:12px;color:var(--muted);margin-bottom:12px}
.detail{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.detail h1{font-size:20px;color:var(--brand-dark)}
.detail .sku{color:var(--muted);font-size:13px;margin-bottom:12px}
.gallery{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:760px){.gallery{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}}
.gallery .main-img{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:10px;display:flex;align-items:center;justify-content:center;min-height:220px}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:8px;align-content:start}
.thumbs a{border:1px solid var(--line);border-radius:4px;padding:4px;background:#fff}
.thumbs a:hover,.thumbs a.on{border-color:var(--accent)}
.strips{margin-top:18px}
.strips h3{font-size:15px;border-left:4px solid var(--accent);padding-left:8px}
.strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px}
.strip a{border:1px solid var(--line);border-radius:4px;padding:4px;background:#fff}
.desc{margin-top:16px;font-size:13px}
.desc p{margin:.3em 0}

/* ---------- static pages ---------- */
.prose{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.prose h1{font-size:22px;color:var(--brand-dark);border-bottom:2px solid var(--line);padding-bottom:8px}
.prose p{font-size:14px}

/* ---------- partners ---------- */
.partners{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;margin-bottom:18px}
.partners a{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:10px;display:flex;align-items:center;justify-content:center;min-height:78px}
.partners a:hover{border-color:var(--accent)}
.partners img{max-height:58px;width:auto}

/* ---------- contact ---------- */
.contact-list{list-style:none;margin:0 0 18px;padding:0}
.contact-list li{display:flex;flex-wrap:wrap;gap:8px;border-bottom:1px solid var(--line);padding:9px 0}
.contact-list strong{min-width:120px;color:var(--brand-dark)}

/* ---------- footer ---------- */
.site-footer{background:linear-gradient(180deg,var(--bar-top),var(--bar-bot));color:#fff;margin-top:20px}
.footer-inner{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;padding:16px}
.footer-inner p{margin:0;font-size:12px}
.footer-inner a{color:#fff}
.footer-inner a:hover{color:var(--bar-link-hover)}

/* empty state */
.empty{background:var(--card);border:1px dashed var(--line);border-radius:var(--radius);padding:30px;text-align:center;color:var(--muted)}

/* ============================================================
   以下四项效果参照老站（css/master.css、imgbox/、SpryAssets/）
   重写为无依赖、响应式的实现
   ============================================================ */

/* ---------- 1. 列表视图 + 悬停浮出缩略图 ----------
   对标老站 master.css 的 `a:hover span`（3px #888 边框、124x83 预览图）。
   老站靠额外插一个 <span><img> 实现，这里直接复用卡片里已有的 .thumb，
   不额外请求图片、不动 ASP 的循环；JS 只需切换 <html> 上的 .listview。

   只用 HTML 类名开关，不用 :has()——老浏览器（含 IE11）也能正常降级。 */
.viewbtn{border:1px solid var(--line);background:#fff;border-radius:var(--radius);padding:5px 10px;font-size:12px;cursor:pointer;color:var(--brand);white-space:nowrap}
.viewbtn:hover{border-color:var(--brand);color:var(--brand-dark)}

html.listview .grid[data-view-toggle]{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--radius)}
html.listview .grid[data-view-toggle] .card{
  display:flex;flex-direction:row;align-items:center;gap:10px;position:relative;
  padding:5px 12px;border:0;border-bottom:1px solid var(--line);
  border-radius:0;box-shadow:none;transform:none;overflow:visible;
}
html.listview .grid[data-view-toggle] .card:last-child{border-bottom:0}
html.listview .grid[data-view-toggle] .card:hover{background:#f6f9fc;box-shadow:none;transform:none}
/* .body 本来是竖排的三行，这里摊平成「型号 / 名称 / 日期」三列 */
html.listview .grid[data-view-toggle] .card .body{
  display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:10px;
  align-items:baseline;width:100%;border-top:0;padding:0;
}
html.listview .grid[data-view-toggle] .card .sku{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.listview .grid[data-view-toggle] .card .name{margin:0;font-weight:400;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.listview .grid[data-view-toggle] .card .date{font-size:12px;white-space:nowrap}
/* 「编号 / 名称 / 说明书 / 发布日期」——说明书单占固定一格。每张卡片的 .body 各自是
   一个 grid，第三列要是用 auto，有说明书的行会把「名称」列挤窄、整列对不齐。 */
html.listview .grid[data-view-toggle] .card .body.cols3{grid-template-columns:120px minmax(0,1fr) 64px}
html.listview .grid[data-view-toggle] .card .body.cols4{grid-template-columns:120px minmax(0,1fr) 64px 80px}
html.listview .grid[data-view-toggle] .card .doc{font-size:12px;white-space:nowrap}
html.listview .grid[data-view-toggle] .card .doc .pdf{margin-top:0}
/* 预览图：鼠标移到行上才出现，浮在该行下方，盖住后两行（老站也是盖住的）。
   别给它 pointer-events:none —— 它落在卡片盒子外面，去掉命中就脱离了 :hover 链，
   指针一移到图上预览就消失、还会把点击透传给下面那行。 */
html.listview .grid[data-view-toggle] .card .thumb{
  display:none;position:absolute;left:150px;top:100%;z-index:60;
  width:130px;height:89px;padding:0;border:3px solid #888;background:#fff;
  align-items:center;justify-content:center;
}
html.listview .grid[data-view-toggle] .card:hover .thumb{display:flex}
html.listview .grid[data-view-toggle] .card .thumb img{max-width:124px;max-height:83px;width:auto}
/* 触屏没有 hover，退回卡片视图（JS 也会禁掉这个开关） */
@media (hover:none){
  html.listview .grid[data-view-toggle]{display:grid;background:none;border:0}
  html.listview .grid[data-view-toggle] .card{display:flex;flex-direction:column;padding:0;border:1px solid var(--line);border-radius:var(--radius)}
  html.listview .grid[data-view-toggle] .card .body{display:block;padding:9px 10px;border-top:1px solid var(--line)}
  html.listview .grid[data-view-toggle] .card .thumb{display:flex;position:static;width:auto;height:150px;border:0}
  html.listview .grid[data-view-toggle] .card .thumb img{max-height:134px}
}

/* ---------- 2. 图片灯箱 ---------- */
.lb{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.9);display:none;align-items:center;justify-content:center}
.lb.open{display:flex}
body.lb-open{overflow:hidden}
.lb-img{max-width:92vw;max-height:88vh;width:auto;height:auto;box-shadow:0 6px 40px rgba(0,0,0,.6)}
.lb-close,.lb-prev,.lb-next{
  position:absolute;border:0;background:rgba(255,255,255,.14);color:#fff;cursor:pointer;
  line-height:1;border-radius:50%;width:42px;height:42px;font-size:22px;padding:0;
}
.lb-close{top:14px;right:14px}
.lb-prev{left:14px;top:50%;margin-top:-21px}
.lb-next{right:14px;top:50%;margin-top:-21px}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{background:rgba(255,255,255,.3)}
.lb-count{position:absolute;bottom:14px;left:0;right:0;text-align:center;color:#fff;font-size:13px;opacity:.75}
.lb[data-multi="0"] .lb-prev,.lb[data-multi="0"] .lb-next,.lb[data-multi="0"] .lb-count{display:none}
@media (max-width:600px){
  .lb-close,.lb-prev,.lb-next{width:36px;height:36px;font-size:18px}
  .lb-prev{left:6px}
  .lb-next{right:6px}
}

/* ---------- 3. 详情页选项卡 ----------
   默认（无 JS / 窄屏）各区块照旧全部堆叠显示，只有 JS 在宽屏下
   给 .tabs-wrap 加 .tabs-on 才会变成选项卡。这样 SEO 和无 JS 场景都安全。 */
.tabs-wrap > .tabbar{display:none}
.tabs-wrap.tabs-on > .tabbar{display:flex;flex-wrap:wrap;gap:4px;border-bottom:2px solid var(--line);margin:20px 0 0}
.tabbar .tab{
  border:1px solid var(--line);border-bottom:0;background:#f1f4f7;color:var(--muted);
  padding:8px 14px;font-size:13px;cursor:pointer;border-radius:var(--radius) var(--radius) 0 0;
  position:relative;top:2px;
}
.tabbar .tab:hover{color:var(--brand);background:#e8eef4}
.tabbar .tab.on{background:#fff;color:var(--brand-dark);font-weight:600;border-color:var(--line);border-bottom:2px solid #fff}
.tabs-wrap.tabs-on > .panels > .tabpanel{display:none}
.tabs-wrap.tabs-on > .panels > .tabpanel.on{display:block}
.tabs-wrap.tabs-on > .panels > .tabpanel > h3{display:none}
@media (max-width:759px){
  .tabs-wrap.tabs-on > .tabbar{display:none}
  .tabs-wrap.tabs-on > .panels > .tabpanel{display:block}
  .tabs-wrap.tabs-on > .panels > .tabpanel > h3{display:block}
}

/* ---------- 4. 幻灯片缩略图条 ----------
   对标老站 TINY.slideshow 的 #thumbnails/#slider 缩略图条（含当前张高亮）。 */
.slideshow .thumbstrip{display:flex;gap:6px;overflow-x:auto;padding:8px;background:rgba(0,0,0,.55);scrollbar-width:thin}
.slideshow .thumbstrip button{
  flex:0 0 auto;border:2px solid transparent;background:none;padding:0;cursor:pointer;
  border-radius:3px;opacity:.6;transition:opacity .2s,border-color .2s;line-height:0;
}
.slideshow .thumbstrip button:hover{opacity:.9}
.slideshow .thumbstrip button.on{border-color:#fff;opacity:1}
.slideshow .thumbstrip img{width:76px;height:auto;display:block}
.slideshow.has-strip .dots{display:none}
@media (max-width:600px){.slideshow .thumbstrip img{width:58px}}

/* ---------- 5. 首页「新品」表格 ----------
   对标老站 newproducts.asp 的 dataTable：类型 / 编号 / 名称 / 说明书 / 发布日期 五列，
   按发布日期分组、每组前插一条日期横幅，编号悬停浮出缩略图（老站 master.css 的 `a:hover span`）。
   老站是 900px 固定宽度，这里是流式 + 窄屏收起「类型」列。 */
.nptable{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);font-size:13px}
.nptable thead th{background:linear-gradient(180deg,var(--bar-top),var(--bar-bot));color:#fff;font-weight:600;font-size:12px;text-align:left;padding:8px 10px;white-space:nowrap}
.nptable th.c-type,.nptable td.c-type{width:58px}
.nptable th.c-sku,.nptable td.c-sku{width:96px}
.nptable th.c-pdf,.nptable td.c-pdf{width:52px;text-align:center}
.nptable th.c-date,.nptable td.c-date{width:94px;white-space:nowrap}
.nptable td{padding:6px 10px;border-top:1px solid var(--line);vertical-align:middle}
.nptable tbody tr:hover td{background:#f2fbfe}
.nptable .c-pdf img{display:inline-block;width:18px;height:18px}
/* 日期横幅：跨满五列，老站是「2026-07-15 New Products」 */
.nptable tr.dateband td{background:#e4f6fd;color:var(--bar-link-hover);font-weight:700;font-size:12px;letter-spacing:.4px;padding:6px 10px}
.nptable tbody tr.dateband:hover td{background:#e4f6fd}
/* 预览图：鼠标移到行上才出现，浮在该行下方、盖住下一行（老站也是盖住的）。
   #888 3px 边框 + 124x83 与老站一致。 */
.nptable .c-sku{position:relative;white-space:nowrap}
.nptable .peek{
  display:none;position:absolute;left:58px;top:100%;z-index:60;
  width:130px;height:89px;border:3px solid #888;background:#fff;
  align-items:center;justify-content:center;
}
.nptable tr:hover .peek{display:flex}
.nptable .peek img{max-width:124px;max-height:83px;width:auto}
/* 触屏没有 hover，预览图一律不显示 */
@media (hover:none){.nptable .peek{display:none}}
/* 「说明书」表头窄屏换成 PDF 三个字母：Instructions 是个不可折行的长单词，
   光靠它就能把这一列顶到 90px 宽，390px 屏上会把「发布日期」挤出屏幕。 */
.nptable .h-short{display:none}
@media (max-width:600px){
  /* 窄屏收起「类型」列（编号前缀 PE/VBS/PR 已经能看出系列），
     表头也允许折行。别改 table-layout:fixed —— 固定布局下浏览器仍会给
     display:none 的那一列算一个列位，剩下的宽度要和它平分，
     名称列会只剩 76px（实测）。auto 布局 + 允许长词断开就够放进 390px。 */
  .nptable th.c-type,.nptable td.c-type{display:none}
  .nptable th.c-sku,.nptable td.c-sku{width:76px}
  .nptable th.c-pdf,.nptable td.c-pdf{width:44px}
  .nptable th.c-date,.nptable td.c-date{width:70px}
  .nptable thead th{white-space:normal;padding:8px 4px;font-size:11px}
  .nptable td{padding:7px 4px}
  .nptable .c-name{overflow-wrap:anywhere;word-wrap:break-word}
  .nptable .c-pdf img{width:16px;height:16px}
  .nptable .h-long{display:none}
  .nptable .h-short{display:inline}
}
/* 320px 这类超窄屏：发布日期交给上方的日期横幅表达，把宽度让给名称 */
@media (max-width:360px){
  .nptable th.c-date,.nptable td.c-date{display:none}
}

/* ============================================================
   老站式阴影框 .obox
   ------------------------------------------------------------
   完全照老站 Catalogo.asp 那套 portlet 的几何来（图也在老站 images/ 里拷过来的）：
     borders.gif 18x8 —— 只有横向的明暗：
        x0        #CACACA  左描边
        x1..x10   #FFFFFF  白
        x11       #CACACA  右描边
        x12..x17  #E3E3E3→#EFEFEF→#F7F7F7→#FFFFFF  右阴影渐变
        （8 行完全一样，所以 repeat-y 竖着贴即可）

   老站是三个套嵌的 div（.portletcontent > .bi > 内容）各自贴一段图，
   这里用 1 个元素 + 1 个伪元素复刻，免得到处加 div：
     ::before  右阴影   borders.gif 靠右 7px，落在 margin-right 里
   左描边直接用 border-left —— 颜色取 borders.gif 的 x0，省一层伪元素。
   老站没有上投影，这里也没有。

   底投影（box.gif 最底 30px 那条 #BFBFBF 虚线 + 圆角）**已按用户要求去掉**；
   同时 .obox 之间不再留垂直间距，相邻两个框直接贴住，右边的 borders.gif
   和左边的 #CACACA 描边就从上到下连成一条不断的线（原来是每块断开的）。
   区块之间的留白改由各框自己的 18px 上下内边距提供。
   注意：只有相邻的 .obox 才会连起来，中间隔着别的元素时线自然会断，这是对的。
   ============================================================ */
.obox{
  position:relative;
  background:#fff;
  border:0;
  border-left:1px solid #cacaca;
  border-radius:0;
  padding:18px 20px;
  margin:0 7px 0 0;             /* 右侧 7px 给描边阴影；底部不再留投影带 */
  box-shadow:none;
}
.obox::before{
  content:"";position:absolute;top:0;bottom:0;left:100%;width:7px;
  background:url(/images/borders.gif) 100% 0 repeat-y;
}
/* 幻灯片那块整块是深色图，套 20px 白边会像给照片加了个白相框；
   留 0 内边距，让深色块直接顶到描边上（老站 #fullsize 也是顶满的）。 */
.obox-flush{padding:0}
.obox-flush .slideshow{border-radius:0}
/* .section / .prose / .detail 自带的外框让位给 .obox 的这套。
   底部设为 0 是「阴影连成一条」的前提：两个框之间不能有 margin 缝。 */
.section.obox{margin-bottom:0}
.section.obox > .section-head:first-child{margin-top:0}
/* 框里再套一层白底带边框的块（.nptable / .card / .cat-col）会显得重，
   把内层的边框收掉，只留分隔线。 */
.obox .nptable{border:0}
.obox .nptable thead th:first-child{border-top-left-radius:0}
.obox .cat-col{border:0;border-top:1px solid var(--line)}
/* 列表视图本身会给自己画一层白底边框，套在框里就重复了 */
html.listview .obox .grid[data-view-toggle]{border:0}