/* ============================================================
   CERYE 韵绿香氛 · 器皿库样式 (vessels.css)
   Aesop 式克制编辑风 · Filterable Grid + Hover Reveal
   仅服务器皿目录契约 class,复用 site.css 的 :root 令牌。
   ============================================================ */

/* —— 双语显隐:与站点 body[data-lang] 规则对齐 ——
   契约用 .vzh/.ven(裸 class)。默认隐藏,按当前语言显示对应一种。
   英文用 Fraunces italic 作次级编辑感(与站点 .ven/.ce 一致)。 */
.vzh,.ven{display:none}
body[data-lang="zh"] .vzh{display:inline}
body[data-lang="en"] .ven{display:inline}
.ven{font-family:var(--en);font-style:italic}

/* ============================================================
   筛选条 .vfilter —— 横向、大留白、克制 chips
   ============================================================ */
.vfilter{
  margin:0 0 26px;
  display:flex;
  flex-direction:column;
  gap:14px;
  background:var(--paper-lt);
  border:1px solid var(--line);
  border-radius:14px;
  padding:18px 22px;
}
.vfilter .vfgroup{
  display:flex;
  align-items:flex-start;
  gap:18px;
  flex-wrap:wrap;
}
/* 分组标签 .gl:mono 小字距 faint */
.vfilter .vfl{
  font-family:var(--cn);
  font-size:12.5px;
  font-weight:500;
  letter-spacing:.04em;
  color:var(--ink);
  min-width:96px;
  padding-top:5px;
  flex-shrink:0;
}
.vfilter .vchips{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  flex:1;
  min-width:240px;
}
/* chip 复用站点基础,这里轻量增强:细描边、克制、tabular 不需要 */
.vfilter .chip{
  font-family:var(--sans);
  font-size:12.5px;
  color:var(--ink);
  background:var(--paper);
  border:1px solid var(--line2);
  padding:6px 15px;
  border-radius:40px;
  cursor:pointer;
  transition:border-color .35s var(--ease),color .35s var(--ease),background .35s var(--ease);
  white-space:nowrap;
}
.vfilter .chip:hover{border-color:var(--g500);color:var(--g700)}
.vfilter .chip:active{transform:scale(.97)}
/* 选中:深绿克制(压过 site.css 的亮 --brand,贴合 Aesop 安静秩序) */
.vfilter .chip.active{
  background:var(--g700);
  border-color:var(--g700);
  color:var(--paper-lt);
}
.vfilter .chip .ven{font-style:italic}

/* 计数行 .pcount —— 克制小字 */
.pcount{
  margin:26px 0 30px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
.pcount .cnt{
  color:var(--g700);
  font-size:13px;
  font-variant-numeric:tabular-nums;
  padding:0 .15em;
}

/* ============================================================
   网格 .vgrid —— CSS Grid 自适应,间距舒展,编辑感
   桌面 ~4 列,平板 2-3,手机 1-2
   ============================================================ */
.vgrid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:56px 36px;
  align-items:start;
}

/* ============================================================
   卡片 .vcard —— 去厚重卡片化:无框、无阴影、透明底
   ============================================================ */
.vcard{
  position:relative;
  display:flex;
  flex-direction:column;
  background:transparent;
  border:none;
  box-shadow:none;
}
.vcard.hide{display:none}

/* 图片框 .vthumb:统一 1:1,浅底衬托,contain 居中防失真(缩略图低分) */
.vthumb{
  position:relative;
  aspect-ratio:1/1;
  overflow:hidden;
  background:var(--card);
  border:1px solid var(--line2);
  border-radius:3px;
}
.vthumb img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  padding:14%;
  display:block;
  transition:transform .55s var(--ease);
}
/* 图片 hover 轻微放大(克制 1.03) */
.vcard:hover .vthumb img{transform:scale(1.035)}

/* 正文 .vbody */
.vbody{padding:16px 2px 0}
.vseries{
  font-family:var(--mono);
  font-size:9.5px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
.vname{
  margin-top:8px;
  font-weight:500;
  line-height:1.35;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:.4em;
}
.vname .vzh{font-family:var(--cn);font-size:16.5px;color:var(--ink)}
.vname .ven{font-family:var(--en);font-style:italic;font-size:15px;color:var(--ink-faint)}
.vsku{
  margin-top:6px;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.04em;
  color:var(--ink-faint);
  font-variant-numeric:tabular-nums;
}
.vspec{
  margin-top:10px;
  font-size:12.5px;
  line-height:1.7;
  color:var(--ink-soft);
}

/* ============================================================
   Hover Reveal .vhover —— 默认半隐,hover 平滑淡入上移
   ============================================================ */
.vhover{
  margin-top:12px;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .38s var(--ease),transform .38s var(--ease);
  pointer-events:none;
}
.vcard:hover .vhover,
.vcard:focus-within .vhover{
  opacity:1;
  transform:none;
  pointer-events:auto;
}
.vdesc{
  font-size:12.5px;
  line-height:1.8;
  color:var(--ink-soft);
  text-wrap:pretty;
}
.vscene{
  margin-top:8px;
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.06em;
  line-height:1.6;
  text-transform:uppercase;
  color:var(--g500);
}
/* 询价:克制文字链接,细下划线(button 也复用,故先重置原生按钮样式) */
.venq{
  display:inline-flex;
  align-items:center;
  gap:.4em;
  margin-top:14px;
  /* button 重置:去掉原生背景/边框/内边距/对齐,保持文字链接外观 */
  background:none;
  border:0;
  border-bottom:1px solid var(--g700);
  cursor:pointer;
  text-align:left;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--g700);
  padding:0 0 3px 0;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.venq:hover{color:var(--g950);border-color:var(--g950)}
.venq .ven{font-style:italic;font-family:var(--en);letter-spacing:.02em;text-transform:none;font-size:13px}

/* ============================================================
   加载更多 .vmore —— 居中,站点 .btn 克制描边风
   ============================================================ */
.vmore{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  margin:64px auto 0;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:15px 34px;
  background:transparent;
  color:var(--g700);
  border:1px solid var(--g700);
  border-radius:40px;
  cursor:pointer;
  transition:.4s var(--ease);
}
.vmore:hover{background:var(--g700);color:var(--paper-lt);border-color:var(--g700)}
.vmore:active{transform:scale(.98)}
.vmore.hide{display:none}
/* 让按钮在网格容器外居中:包它的容器若 text-align:center 即可;
   这里给一个兜底——若直接置于 flex/block,使用 margin auto 需 block 上下文 */
.vmore-wrap{display:flex;justify-content:center}

/* ============================================================
   触屏 / 无 hover:Hover Reveal 内容常显,保证可访问
   ============================================================ */
@media (hover:none){
  .vhover{opacity:1;transform:none;pointer-events:auto}
}

/* ============================================================
   响应式断点
   ============================================================ */
@media(max-width:1080px){
  .vgrid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:46px 30px}
}
@media(max-width:760px){
  .vgrid{grid-template-columns:repeat(2,1fr);gap:38px 22px}
  .vfilter .vfl{min-width:100%;margin-bottom:4px}
  .vfilter .vfgroup{gap:12px}
  /* 窄屏筛选 chips 可横向滚动,避免大量换行挤压 */
  .vfilter .vchips{
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-bottom:4px;
    scrollbar-width:none;
  }
  .vfilter .vchips::-webkit-scrollbar{display:none}
}
@media(max-width:420px){
  .vgrid{grid-template-columns:1fr 1fr;gap:30px 16px}
  .vname .vzh{font-size:15px}
}

/* ============================================================
   尊重"减少动态"偏好:关掉位移/缩放,内容直接显示
   (site.css 已全局压 transition,这里补内容可见性兜底)
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .vthumb img{transition:none}
  .vcard:hover .vthumb img{transform:none}
  .vhover{opacity:1 !important;transform:none !important;pointer-events:auto}
}