/* ============================================================
   TZ-商品描述 · 模块样式（v5.3 独立 assets 文件 · 2026-09-04）
   ────────────────────────────────────────────────────────────
   v5.2 起，样式从 sections/tz-product-desc.liquid 的内联
   stylesheet 块迁出到本文件，被 Shoplazza 装修后台的
   「添加卡片」渲染管线正确识别并加载（截图实证：v5.1 在同一
   商品详情页中，tz-footer 渲染正常而 TZ-商品描述插入位置
   完全空白 — 根因即 inline stylesheet 不被支持）。

   v5.3 修复（v5.2 上传后用户实测反馈）：
   ① free 模式无图条目撑满容器（之前 flex:0 0 auto + 0×0 image =
      宽度坍缩为 0、整段看不见）；
   ② mobile 媒体查询改用 display: block（原 display: revert
      在部分 Shoplazza 编辑器 iframe / 旧浏览器被忽略，导致
      移动端永远空白）。

   命名空间 .tzpd-*，与其它 tz-* 模块完全隔离。
   所有可配置值均走 CSS 变量，默认回退到 TEEZE 视觉基线。

   v5 关键：
   - display_mode = free：模块容器转 flex-wrap，每条目按图片 natural 宽展示，
     多图水平并排（用户当前最常用诉求）。
   - display_mode = contained：模块容器块级（max-width 限制），所有条目 100% 容器宽，
     高度按 ratio 比例（fixed-ratio 时）或图片原比例（free ratio 时）。
   - .tzpd-list-pc / .tzpd-list-mobile 各自承载对应端的条目池，
     show_pc / show_mobile 总开关用 .tzpd-hide-pc / .tzpd-hide-mobile class 控制；
     设备切换由 CSS 媒体查询（max-width: 767px）控制。

   ⚠ 本文件不应包含任何 Liquid 标记，否则
   stylesheet_tag 输出时会丢失字符。所有变量由 liquid 在外层
   通过 `style="--xxx: ..."` 注入到 .tzpd / .tzpd-* 节点。
   ============================================================ */
.tzpd, .tzpd *, .tzpd *::before, .tzpd *::after { box-sizing: border-box; }
.tzpd {
  --tzpd-black: #000;
  --tzpd-white: #fff;
  --tzpd-yellow: #efa333;
  --tzpd-bg: #0b0b0b;
  --tzpd-body: #c8c8c8;
  --tzpd-display: "Arial Narrow", "Helvetica Neue Condensed", "Helvetica Neue", Arial, sans-serif;
  --tzpd-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --tzpd-mono: Consolas, "SFMono-Regular", "Liberation Mono", monospace;
  --tzpd-serif: Georgia, "Times New Roman", serif;
  --tzpd-bg-color: #0b0b0b;
  --tzpd-gap: 24px;
  --tzpd-justify: flex-start;
  --tzpd-max-width: 1280px;
  display: block;
  background: var(--tzpd-bg-color);
  color: var(--tzpd-white);
  font-family: var(--tzpd-sans);
  line-height: 1.55;
}

/* ====== 通用条目列表（两个 list 都遵循） ====== */
.tzpd-list {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: var(--tzpd-justify, flex-start);
  gap: var(--tzpd-gap);
}

/* ====== Mode: free（按图片实际尺寸并排） ====== */
.tzpd.tzpd-mode-free .tzpd-entry { flex: 0 0 auto; max-width: 100%; }
.tzpd.tzpd-mode-free .tzpd-media {
  position: static;
  width: auto;
  max-width: 100%;
  height: auto;
}
/* free + 固定比例：让 .tzpd-media 回到 absolute（容器比例主导高度，图片 cover） */
.tzpd.tzpd-mode-free .tzpd-entry.tzpd-fixed-ratio .tzpd-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* v5.3 修复：free 模式无图条目（.tzpd-noimg）撑满容器宽度。
   原因：flex: 0 0 auto + image 0×0 → entry 宽度坍缩为 0，看不见。
   改为 flex: 1 1 100%（grow + 100% basis）= 占满整行（与 contained 一致），
   有图时不受此规则影响（仍由 image natural width 决定）。*/
.tzpd.tzpd-mode-free .tzpd-entry.tzpd-noimg {
  flex: 1 1 100%;
  max-width: 100%;
}

/* ====== Mode: contained（等宽容器） ====== */
.tzpd.tzpd-mode-contained {
  display: block;
  max-width: var(--tzpd-max-width, 1280px);
  margin-left: 0;
  margin-right: auto;
}
.tzpd.tzpd-mode-contained.tzpd-align-center { margin-left: auto; margin-right: auto; }
.tzpd.tzpd-mode-contained.tzpd-align-right  { margin-left: auto; margin-right: 0; }
.tzpd.tzpd-mode-contained .tzpd-entry { flex: 0 0 100%; max-width: 100%; }
.tzpd.tzpd-mode-contained .tzpd-media { width: 100%; }

/* ====== 单个条目 = 一张图文卡 ====== */
.tzpd-entry {
  position: relative;
  overflow: hidden;
  margin-bottom: 0;
}
.tzpd-entry.tzpd-noimg { min-height: clamp(200px, 30vw, 320px); }

.tzpd-entry.tzpd-fixed-ratio { aspect-ratio: var(--tzpd-ratio, 9 / 16); }
.tzpd-entry.tzpd-ratio-916  { --tzpd-ratio: 9 / 16; }
.tzpd-entry.tzpd-ratio-34   { --tzpd-ratio: 3 / 4; }
.tzpd-entry.tzpd-ratio-45   { --tzpd-ratio: 4 / 5; }
.tzpd-entry.tzpd-ratio-11   { --tzpd-ratio: 1 / 1; }
.tzpd-entry.tzpd-ratio-43   { --tzpd-ratio: 4 / 3; }
.tzpd-entry.tzpd-ratio-169  { --tzpd-ratio: 16 / 9; }
.tzpd-entry.tzpd-fixed-ratio .tzpd-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tzpd-entry.tzpd-fixed-ratio.tzpd-noimg { min-height: 0; }

/* ====== 设备可见性（list 整体切换） ====== */
/* base：PC 上只显示 pc 端 list，mobile 端 list 隐藏 */
.tzpd-list-mobile { display: none; }
@media (max-width: 767px) {
  .tzpd-list-pc    { display: none; }
  /* v5.4 修复：v5.3 用 display: block 解决了「移动端空白」，但 block
     布局会忽略 flex 的 gap，「条目间距」因此对移动端条目失效。
     改回 flex 纵向单列，让 gap 正常生效（同时保留 v5.3 的修复）。 */
  .tzpd-list-mobile {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: var(--tzpd-gap);
  }
}
/* 模块级总开关（show_pc=false 隐藏 pc list；show_mobile=false 隐藏 mobile list） */
.tzpd.tzpd-hide-pc    .tzpd-list-pc { display: none !important; }
.tzpd.tzpd-hide-mobile .tzpd-list-mobile { display: none !important; }

/* ====== 内容组合层（绝对定位叠加） ====== */
.tzpd-content {
  position: absolute;
  top: var(--tzpd-top, auto);
  bottom: var(--tzpd-bottom, 0px);
  left: 0;
  right: 0;
  display: grid;
}
.tzpd-align-left   { text-align: left;   padding-left:  var(--tzpd-side, 0px); padding-right: 0; }
.tzpd-align-center { text-align: center; padding-left: 0; padding-right: 0; }
.tzpd-align-right  { text-align: right;  padding-left: 0; padding-right: var(--tzpd-side, 0px); }

/* ====== 字体家族 ====== */
.tzpd .tz-ff-display { font-family: var(--tzpd-display); }
.tzpd .tz-ff-sans    { font-family: var(--tzpd-sans); }
.tzpd .tz-ff-mono    { font-family: var(--tzpd-mono); }
.tzpd .tz-ff-serif   { font-family: var(--tzpd-serif); }

/* ====== 眉题 / 标题 / 描述 ====== */
.tzpd-eyebrow {
  margin: var(--tzpd-eyebrow-mt, 0px) 0 var(--tzpd-eyebrow-mb, 16px);
  color: var(--tzpd-eyebrow-color, var(--tzpd-yellow));
  font-weight: var(--tzpd-eyebrow-weight, 700);
  font-size: var(--tzpd-eyebrow-size, 11px);
  line-height: 1.3;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.tzpd-title {
  margin: var(--tzpd-title-mt, 0px) 0 var(--tzpd-title-mb, 20px);
  color: var(--tzpd-title-color, var(--tzpd-white));
  font-weight: var(--tzpd-title-weight, 700);
  font-size: var(--tzpd-title-size, clamp(28px, 3.6vw, 52px));
  line-height: 1.04;
  letter-spacing: -.02em;
  text-transform: uppercase;
  overflow-wrap: break-word;
}
.tzpd-desc {
  margin: var(--tzpd-desc-mt, 0px) 0 var(--tzpd-desc-mb, 0px);
  color: var(--tzpd-desc-color, var(--tzpd-body));
  font-weight: var(--tzpd-desc-weight, 400);
  font-size: var(--tzpd-desc-size, clamp(15px, 1.3vw, 18px));
  line-height: 1.6;
  overflow-wrap: break-word;
  white-space: pre-line;
}

/* ====== 移动端覆盖 ====== */
@media (max-width: 767px) {
  .tzpd-entry.tzpd-noimg { min-height: clamp(180px, 56vw, 300px); }
  /* 移动端单列：所有条目 100% 容器宽 + 自然高度。
     纵向 flex 下 flex-basis 不再表示宽度，改用 width，覆盖
     free / contained 两种模式的 flex 规则。 */
  .tzpd .tzpd-list-mobile .tzpd-entry {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
  }
}
.tzpd a:focus-visible { outline: 2px solid var(--tzpd-white); outline-offset: 3px; }