/* ProductGroup —— 产品教程页的分组列表（Figma 1861:9707 / 1861:9711）。
   结构：白字分组标题 + 白卡（卡内若干行 + 分隔线）。

   行结构：缩略图 52×53（灰底圆角 4，内图按各行尺寸居中）+ 文字列 128
           （标题 16/24 Medium #222，副标题 12/20 tertiary）。

   尺寸按设计稿固定 px（与小程序 px 语义一致）；卡宽随容器走，
   行右侧留白是设计稿本来的样子（319 行宽里内容只占 188）。 */

.mzh-product-group {
  display: flex;
  flex-direction: column;
  gap: var(--tutorial-group-gap);
  width: 100%;
}

.mzh-product-group__title {
  width: 100%;
  font-size: var(--typography-body-font-size);
  line-height: var(--typography-body-line-height);
  font-weight: var(--typography-weight-medium);
  color: var(--tutorial-title-fg-group);
}

.mzh-product-group__card {
  width: 100%;
  background: var(--tutorial-card-bg);
  border-radius: var(--tutorial-card-radius);
  padding: var(--tutorial-card-pad-y) var(--tutorial-card-pad-x);
  display: flex;
  flex-direction: column;
  gap: var(--tutorial-card-gap);
}

.mzh-product-group__row {
  display: flex;
  align-items: flex-start;
  gap: var(--tutorial-row-gap);
  width: 100%;
  padding: var(--tutorial-row-pad-y) 0;
  border: 0;
  border-radius: var(--tutorial-card-radius);
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

.mzh-product-group__thumb {
  flex: none;
  width: var(--tutorial-thumb-w);
  height: var(--tutorial-thumb-h);
  border-radius: var(--tutorial-thumb-radius);
  background: var(--color-bg-thumb);
  overflow: clip;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mzh-product-group__thumb-img {
  /* 内图尺寸按行不同（设计 53/45/48/36）→ 由 JS 逐行覆盖这两个局部变量 */
  --thumb-img-w: var(--tutorial-thumb-img-w);
  --thumb-img-h: var(--tutorial-thumb-img-h);
  display: block;
  width: var(--thumb-img-w);
  height: var(--thumb-img-h);
  object-fit: contain;
}

.mzh-product-group__text {
  flex: none;
  width: var(--tutorial-text-col-w);
  display: flex;
  flex-direction: column;
  gap: var(--tutorial-text-col-gap);
}

.mzh-product-group__row-title {
  font-size: var(--typography-subtitle-font-size);
  line-height: var(--typography-subtitle-line-height);
  font-weight: var(--typography-weight-medium);
  color: var(--color-text-primary);
  /* 设计稿是 whitespace-nowrap：长标题不换行、直接溢出到右侧留白（如「趣森活防霉抗菌补墙漆」）
     换成换行会把行高从 69 撑到 92，与设计稿不符 */
  white-space: nowrap;
}

.mzh-product-group__row-sub {
  --row-sub-opacity: var(--tutorial-sub-opacity);
  font-size: var(--typography-caption-font-size);
  line-height: var(--typography-caption-line-height);
  color: var(--color-text-tertiary);
  opacity: var(--row-sub-opacity);
}

/* 设计稿里「趣森活屋顶补漏防水」那行的副标题是 opacity-50（配空缩略图，形似未上架） */
.mzh-product-group__row-sub[data-opacity="50"] {
  color: var(--color-text-primary);
  --row-sub-opacity: 0.5;
}

.mzh-product-group__divider {
  flex: none;
  position: relative;
  width: var(--tutorial-divider-w);
  /* 0 高容器：线画在它上方 1px（复刻设计稿的 inset: -1px 0 0 0）
     —— 若做成 1px 实体，每个行间距会多出 1px，整列逐行累积偏移 */
  height: 0;
}

.mzh-product-group__divider-line {
  position: absolute;
  inset: calc(-1 * var(--border-width-default)) 0 0 0;
  background: var(--tutorial-divider-color);
}