/* =========================================================
   Featured Products 区块专用样式（仅首页）
   鼠标悬停效果完全对齐产品总览页 /products/index.html 里
   「Mini Pre-lit Christmas Trees」那张卡：图片 1.16 倍放大、标题变红。
   卡片本身：白底 + 1px 细边框 + 6px 圆角，不做上浮、不加阴影。
   单独成文件，改这里不会影响产品列表页与详情页。
   ========================================================= */

/* ---------- 网格 ---------- */
.picks-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}

/* ---------- 整张卡片（可点击） ---------- */
.pick-item {
  display: flex;
  flex-direction: column;
  background: var(--card-bg, #ffffff);
  border: 1px solid var(--border, #e8e8e8);
  border-radius: 6px;
  overflow: hidden;
  text-decoration: none;
}

/* ---------- 图片框：固定高度 + 裁切，放大时不溢出、不压文字 ---------- */
.pick-item .pick-thumb {
  display: block;
  height: 220px;
  overflow: hidden;
}

.pick-item .pick-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

/* 与产品总览页一致：悬停时图片放大（首页取更大倍数，效果更明显） */
.pick-item:hover .pick-thumb img {
  transform: scale(1.2);
}

/* ---------- 文字区 ---------- */
.pick-item .pick-body {
  padding: 18px 20px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.pick-item h4 {
  color: var(--black, #111111);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 6px;
  transition: color 0.2s;
}

/* 与产品总览页一致：悬停时标题变红 */
.pick-item:hover h4 {
  color: var(--red, #c8102e);
}

.pick-item p {
  color: var(--muted, #777777);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}

/* 「View Detail →」：红色加粗，贴卡片底部，各卡对齐 */
.pick-item .more {
  display: inline-block;
  margin-top: auto;
  padding-top: 12px;
  color: var(--red, #c8102e);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
}

/* ---------- 区块底部「View All」按钮 ---------- */
.more-btn {
  display: block;
  margin: 36px auto 0;
  text-align: center;
  width: fit-content;
}

/* =========================================================
   首页「Curated Decor Collections」四张分类卡
   加 class="home-cat" 做作用域，只影响首页；
   About 页的 .cat-item（带 svg 图标那种）不受影响。
   悬停效果与 Featured 卡片一致：图片放大 + 名称变红，不上浮。
   ========================================================= */

/* 取消 style.css 里 .cat-item:hover 的整卡上浮 */
.home-cat,
.home-cat:hover {
  transform: none;
  transition: none;
}

/* 图片框：固定高度 + 裁切，放大时不溢出、不压到旁边卡片 */
.home-cat .cat-thumb {
  display: block;
  height: 240px;
  overflow: hidden;
  border-radius: 6px;
}

.home-cat .cat-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
  transition: transform 0.5s ease;
}

.home-cat:hover .cat-thumb img {
  transform: scale(1.2);
}

/* 名称：悬停变红 */
.home-cat .name {
  transition: color 0.2s;
}

.home-cat:hover .name {
  color: var(--red, #c8102e);
}

/* ---------- 响应式：992 以下两列，600 以下一列 ---------- */
@media (max-width: 992px) {
  .picks-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .pick-item .pick-thumb { height: 230px; }
}

@media (max-width: 600px) {
  .picks-grid { grid-template-columns: 1fr; gap: 18px; }
  .pick-item .pick-thumb { height: 240px; }
}