/* ===========================================================================
   cards.v1.css — 全站产品卡片对齐组件（指南 B 的五条规则）

   指南给出的类名（product-grid / universal-product-card / product-card-*）在本
   站 0 命中：真实选择器是 .slab-grid > .swatch 与 .related-grid > .card。
   这里按指南的五条铁律实现同一套规则，映射到真实选择器：

     1 图片锁死     .card__imgwrap / .swatch__imgwrap 固定 aspect-ratio + overflow
     2 纵向 flex    .related-grid > .card / .slab-grid > .swatch { display:flex; column }
     3 标题锁 2 行  .card__sku / .swatch__sku { -webkit-line-clamp:2; min-height }
     4 标签保底     .card__tags { min-height }（多数 SKU 卡无标签，规则仍保留）
     5 底部基线     .card__price { margin-top:auto }  ← 指南的核心杀招

   比例说明：指南举例 4/3。缩略图网格沿用 1/1（.swatch__img 原本就是 1:1，
   且 SKU 源图为方形缩略图），锁比例这个目的完全达成；系列主卡仍用 4/3。

   这是一份新的版本化文件：cards.v1.css 之后改内容必须换名。旧的 .related-grid
   定义散在 1,623 个页面的内联 <style> 里，各写各的 grid-template-columns；
   本文件只管卡片内部，不碰栅格列数，因此不会与那些内联规则打架。
   =========================================================================== */

/* --- 1/2. 卡片容器：纵向 flex，继承栅格行高实现同排等高 ------------------ */
.related-grid > .card,
.slab-grid > .swatch {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  text-decoration: none;
  color: var(--ink);
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  overflow: hidden;
  padding: 0;
  font-size: 13px;
  text-align: left;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.related-grid > .card:hover,
.slab-grid > .swatch:hover {
  border-color: #C5A880;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(20, 21, 24, .08);
}

/* --- 1. 图片锁死：容器固定比例，图片填充裁切 -------------------------- */
.card__imgwrap,
.slab-grid > .swatch > .swatch__imgwrap {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #F1F5F9;
  flex: 0 0 auto;
}

.slab-grid > .swatch > .swatch__imgwrap {
  aspect-ratio: 1 / 1;      /* 方形缩略图，沿用该组件原有比例 */
  background: #101215;
  border-bottom: 1px solid #E2E8F0;
}

/* Target the image by STRUCTURE, not by a class on the img.
   The v39 markup wrapper puts a bare <img> inside .card__imgwrap (no
   .card__img class was ever added), so `.card__imgwrap > .card__img` matched
   nothing and every image kept its width="120" height="120" attributes:
   120px wide, auto height, object-fit fill. Same for .swatch-card > img. */
.card__imgwrap > img,
.slab-grid > .swatch > .swatch__imgwrap > img,
.swatch-grid > .swatch-card > img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;        /* ratio is owned by the wrapper, not the img */
  object-fit: cover;         /* metal thin strips use contain, see below */
  transition: transform .35s cubic-bezier(.2, .7, .3, 1);
}

.related-grid > .card[data-kind="trim"] .card__imgwrap > img {
  object-fit: contain;
  padding: 6px;
  background: #F8FAFC;
}

.related-grid > .card:hover .card__imgwrap > img,
.slab-grid > .swatch:hover .swatch__img {
  transform: scale(1.04);
}

/* --- 2. 内容区：flex:1 吃掉图片以下的全部高度 ------------------------- */
.card__body,
.slab-grid > .swatch > .swatch__meta {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 10px 10px 12px;
  min-width: 0;
}

/* --- 3. 标题锁死 2 行：无论 SKU 文字长短，占位完全一致 ------------------
   两套类名并存：.sku-name 是站内已有的约定（670 张卡在用），.card__sku 是本
   组件新增的规范化写法。两者同样处理，避免为统一命名去动 1,600 多个页面。 */
.card__sku,
.sku-name,
.slab-grid > .swatch > .swatch__meta > .swatch__sku {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;         /* 2 行 × 1.35 line-height */
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 13px;
  line-height: 1.35;
  letter-spacing: .04em;
  color: var(--ink);
  word-break: break-word;
}

/* --- 4. 标签保底高度：没有标签也不塌 ---------------------------------- */
.card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 20px;
  margin-top: 6px;
}

.card__tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  color: #475569;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  border-radius: 3px;
  padding: 2px 6px;
  white-space: nowrap;
}

/* --- 5. 底部价格：margin-top:auto 强行贴底，形成水平基线 -------------- */
.card__price,
.sku-price,
.slab-grid > .swatch > .swatch__meta > .swatch__price {
  margin-top: auto;          /* 指南的核心一条 */
  padding-top: 8px;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: .01em;
}

.slab-grid > .swatch > .swatch__meta > .swatch__spec {
  margin-top: 4px;
  font-size: 10.5px;
  color: #5B6779;
}

/* --- 分类卡（带 h2/h3 的那 15 张）：同一套容器规则，内容结构不同 ------- */
.related-grid > .card--category {
  padding: 20px;
  text-align: left;
}

.related-grid > .card--category > h2,
.related-grid > .card--category > h3 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.5em;
}

.related-grid > .card--category > p {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.6;
  color: #5B6779;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 3.9em;
}

.related-grid > .card--category > span {
  margin-top: auto;
  font-size: 13px;
  font-weight: 600;
  color: #8C6A3F;
}

/* ===========================================================================
   第四套卡家族：.swatch-grid > .swatch-card（color-cards 三页，1,668 张）。
   结构与指南的 .universal-product-card 完全对应：图 / SKU / 系列 / 底部信息，
   但同样是 display:block、无 line-clamp、无 margin-top:auto，所以按同一套
   五条规则处理。页面内联 <style> 里的 .swatch-card 是 (0,1,0)，这里的
   .swatch-grid > .swatch-card 是 (0,2,0)，同特异性下靠后者取胜。
   =========================================================================== */
.swatch-grid > .swatch-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.swatch-grid > .swatch-card > img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
  flex: 0 0 auto;
}

.swatch-grid > .swatch-card > .swatch-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  border-top-color: #E2E8F0;
}

.swatch-grid > .swatch-card > .swatch-info > .swatch-sku {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
  line-height: 1.35;
  color: var(--ink);
}

.swatch-grid > .swatch-card > .swatch-info > .swatch-series {
  margin-top: auto;          /* 同一条基线规则 */
  padding-top: 6px;
  color: #5B6779;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 1.3em;
}

/* --- 响应式 ------------------------------------------------------------ */@media (max-width: 860px) {
  .card__body { padding: 8px 8px 10px; }
  .card__sku { font-size: 12px; min-height: 2.7em; }
  .related-grid > .card--category { padding: 14px; }
  .related-grid > .card--category > h2,
  .related-grid > .card--category > h3 { font-size: 16px; }
}

@media (max-width: 520px) {
  .card__imgwrap { aspect-ratio: 16 / 9; }
  .card__sku { -webkit-line-clamp: 1; line-clamp: 1; min-height: 1.35em; }
}