/* ============================================================
   TEEZE · 商品展示区样式（Product Showcase）
   ============================================================ */
.tz-products {
  --tz-black: #000;
  --tz-white: #fff;
  --tz-yellow: #efa333;
  --tz-bg: #000000;
  --tz-body: #c8c8c8;
  --tz-muted: #8b8b8b;
  --tz-line: rgba(255, 255, 255, .13);
  --tz-raised: #151515;
  --tz-display: "Arial Narrow", "Helvetica Neue Condensed", "Helvetica Neue", Arial, sans-serif;
  --tz-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --tz-mono: Consolas, "SFMono-Regular", "Liberation Mono", monospace;
  --tz-max: 1220px;
  --tz-gutter: clamp(18px, 3vw, 40px);
  --tz-section: clamp(72px, 9vw, 124px);
  --tz-pad-top: 0px;
  --tz-pad-bottom: 0px;
  --tz-ease: cubic-bezier(.16, 1, .3, 1);
  /* 遮罩层（暗处理）：透明度 0 = 无遮罩 */
  --tz-overlay-color: #000000;
  --tz-overlay-opacity: 93;
  --tz-overlay-stop: 66%;
  --tz-overlay-mid: 0%;
}
.tz-products, .tz-products *, .tz-products *::before, .tz-products *::after { box-sizing: border-box; }
.tz-products {
  background: var(--tz-bg);
  color: var(--tz-white);
  font-family: var(--tz-sans);
  line-height: 1.55;
  padding-block: calc(var(--tz-section) + var(--tz-pad-top)) calc(var(--tz-section) + var(--tz-pad-bottom));
}
.tz-products a { color: inherit; text-decoration: none; }
.tz-products .tz-container { width: min(100% - var(--tz-gutter) * 2, var(--tz-max)); margin: auto; }
/* 小字骨架（眉题 / 卡片标签共用）；字号 / 字重 / 行距 / 字距 / 颜色由下面两条规则接管 */
.tz-products .tz-eyebrow, .tz-products .tz-label { margin: 0; font-family: var(--tz-mono); text-transform: uppercase; }
.tz-products .tz-eyebrow { color: var(--tz-eyebrow-color, var(--tz-yellow)); font-size: var(--tz-eyebrow-size, 11px); font-weight: var(--tz-eyebrow-weight, 700); line-height: var(--tz-eyebrow-lh, 130%); letter-spacing: var(--tz-eyebrow-ls, .1em); }
.tz-products .tz-label { color: var(--tz-label-color, var(--tz-yellow)); font-size: var(--tz-label-size, 11px); font-weight: var(--tz-label-weight, 700); line-height: var(--tz-label-lh, 130%); letter-spacing: var(--tz-label-ls, .1em); }
.tz-products h2, .tz-products h3 { font-family: var(--tz-display); text-transform: uppercase; }
.tz-products h2 { margin: 16px 0 0; color: var(--tz-heading-color, var(--tz-white)); font-size: var(--tz-heading-size, clamp(42px, 5vw, 70px)); font-weight: var(--tz-heading-weight, 600); letter-spacing: var(--tz-heading-ls, -.03em); line-height: var(--tz-heading-lh, 96%); }
.tz-products .tz-section-head { display: grid; grid-template-columns: 1.35fr .65fr; align-items: end; gap: 40px; margin-bottom: 54px; }
.tz-products .tz-section-head > p { max-width: 460px; margin: 0; color: var(--tz-intro-color, var(--tz-body)); font-size: var(--tz-intro-size, 16px); font-weight: var(--tz-intro-weight, 400); line-height: var(--tz-intro-lh, 155%); letter-spacing: var(--tz-intro-ls, normal); }
.tz-products .tz-product-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 300px; gap: 10px; }
.tz-products .tz-product { position: relative; grid-column: span 6; overflow: hidden; border: 1px solid var(--tz-line); background: var(--tz-raised); }
.tz-products .tz-product.tz-wide { grid-column: span 7; grid-row: span 2; }
.tz-products .tz-product.tz-tall { grid-column: span 5; grid-row: span 2; }
.tz-products .tz-product img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.72) brightness(.66); transition: transform .5s var(--tz-ease), filter .5s var(--tz-ease); }
.tz-products .tz-product:hover img { transform: scale(1.03); filter: saturate(.92) brightness(.78); }
.tz-products .tz-product:after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg,
    var(--tz-overlay-color) 0%,
    var(--tz-overlay-color) var(--tz-overlay-mid),
    transparent var(--tz-overlay-stop));
  opacity: calc(var(--tz-overlay-opacity) / 100);
}
.tz-products .tz-num { position: absolute; z-index: 2; top: 20px; right: 20px; color: var(--tz-yellow); font: 700 11px var(--tz-mono); }
/* 内容整体（标签 / 标题 / 描述 / 链接文案 / 按钮）：
   铺满卡片、内容贴底；四边间距与对齐由每个条目的设置注入，
   默认 28px + 左对齐 + 贴底 = 原设计视觉。 */
.tz-products .tz-product-copy {
  position: absolute; z-index: 2; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  align-items: var(--tz-copy-align, flex-start);
  text-align: var(--tz-copy-text, left);
  padding: var(--tz-copy-pad-top, 28px) var(--tz-copy-pad-right, 28px) var(--tz-copy-pad-bottom, 28px) var(--tz-copy-pad-left, 28px);
}
.tz-products .tz-product-copy h3 { margin: 9px 0 8px; color: var(--tz-title-color, var(--tz-white)); font-size: var(--tz-title-size, clamp(27px, 3vw, 45px)); font-weight: var(--tz-title-weight, 700); line-height: var(--tz-title-lh, 100%); letter-spacing: var(--tz-title-ls, normal); }
.tz-products .tz-product-copy > p:not(.tz-label) { max-width: 500px; margin-bottom: 18px; color: var(--tz-desc-color, var(--tz-body)); font-size: var(--tz-desc-size, 14px); font-weight: var(--tz-desc-weight, 400); line-height: var(--tz-desc-lh, 155%); letter-spacing: var(--tz-desc-ls, normal); }
/* 整卡可点击：用 a 撑满整张卡，视觉不变，只加指针与焦点反馈（图片缩放 hover 已有，这里补文字下划线） */
.tz-products .tz-product-card {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.tz-products .tz-text-link { display: inline-flex; gap: 8px; color: var(--tz-link-color, var(--tz-yellow)); font-size: var(--tz-link-size, 11px); font-weight: var(--tz-link-weight, 700); line-height: var(--tz-link-lh, 155%); letter-spacing: var(--tz-link-ls, .08em); text-transform: uppercase; }
.tz-products .tz-product-card:hover .tz-text-link { text-decoration: underline; text-underline-offset: 4px; }
/* 卡片按钮：整卡本身就是链接，所以这里用 span 做视觉按钮，点击随整卡跳转（不再嵌套 a/button） */
.tz-products .tz-card-btn {
  display: inline-flex; align-items: center; justify-content: center;
  align-self: var(--tz-btn-align, flex-start);
  margin-top: 16px;
  padding: 1.15em 2.4em;
  background: var(--tz-btn-bg, var(--tz-yellow));
  color: var(--tz-btn-fg, #000);
  font-size: var(--tz-btn-size, 11px);
  font-weight: var(--tz-btn-weight, 700); line-height: 1; letter-spacing: .08em; text-transform: uppercase;
  border-radius: 2px;
  transition: filter .3s var(--tz-ease), transform .3s var(--tz-ease);
}
.tz-products .tz-product-card:hover .tz-card-btn { filter: brightness(1.12); transform: translateY(-1px); }
.tz-products .tz-product-card:focus-visible { outline: 2px solid var(--tz-yellow); outline-offset: -4px; }
.tz-products .tz-reveal { opacity: 0; transform: translateY(24px); transition: opacity .65s var(--tz-ease), transform .65s var(--tz-ease); }
.tz-products .tz-reveal.tz-visible { opacity: 1; transform: none; }
.tz-products .tz-ph { width: 100%; height: 100%; display: grid; place-items: center; color: var(--tz-muted); background: var(--tz-raised); }
@media (max-width: 1050px) {
  .tz-products .tz-product, .tz-products .tz-product.tz-wide, .tz-products .tz-product.tz-tall { grid-column: span 6; grid-row: span 1; }
  .tz-products .tz-product-grid { grid-auto-rows: 390px; }
}
@media (max-width: 767px) {
  .tz-products .tz-section-head { grid-template-columns: 1fr; gap: 22px; margin-bottom: 38px; }
  .tz-products .tz-product-grid { display: block; }
  .tz-products .tz-product { height: 460px; margin-bottom: 10px; }
  .tz-products .tz-product.tz-wide { height: 540px; }
}
@media (prefers-reduced-motion: reduce) {
  .tz-products .tz-reveal { opacity: 1; transform: none; transition: none; }
}
/* 设备可见性：PC / 移动端分别隐藏整块 */
@media (min-width: 768px) {
  .tz-products.tz-hide-pc { display: none !important; }
}
@media (max-width: 767px) {
  .tz-products.tz-hide-mobile { display: none !important; }
}