/* ============================================================
 * REYBO 前端补丁样式 - custom.css
 * 修复三个问题：导航栏换行、商品行自适应、评论返回
 * ============================================================ */

/* ---------- 问题1：顶部导航栏支持自定义行数/字体大小/加粗 ---------- */
/* 原始：.brand-top-bar height:200px; overflow:hidden */
/* 修复：改为 min-height + auto，允许内容撑开高度 */
.brand-top-bar {
  height: auto !important;
  min-height: 200px;
  padding: 20px 0 !important;
  overflow: visible !important;
}

/* 原始：.brand-top-intro -webkit-line-clamp:3; max-width:400px; overflow:hidden */
/* 修复：行数/字体大小/加粗通过 CSS 变量动态控制（由 custom.js 设置） */
.brand-top-intro {
  -webkit-line-clamp: var(--topbar-intro-lines, 3) !important;
  line-clamp: var(--topbar-intro-lines, 3) !important;
  font-size: var(--topbar-intro-font-size, 13px) !important;
  font-weight: var(--topbar-intro-font-weight, 400) !important;
  max-width: 500px !important;
  white-space: pre-wrap !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

/* ---------- 问题2：商品行自适应（与顶部轮播一致） ---------- */
/* 轮播图用 width:80%, min-height:70vh, object-fit:cover 自适应不变形 */
/* 商品行原始：.grid-card height:380px(固定), width:var(--v2153cb5d)=280px(固定) */
/* 修复：高度改为响应式，宽度保持但添加 min-width 防压缩 */

/* 商品卡片高度响应式（与轮播图 min-height 思路一致） */
.grid-card {
  height: auto !important;
  min-height: 380px;
}

/* 商品卡片图片区域高度响应式 */
.card-image {
  height: 40vh !important;
  min-height: 280px;
  max-height: 400px;
}

/* 商品卡片图片保持比例不变形 */
.card-image img,
.card-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* 商品行容器保持与轮播图一致的宽度策略 */
.category-row {
  width: 80% !important;
  max-width: var(--container-max, 1200px) !important;
}

/* 商品区域确保不压缩 */
.category-products {
  min-width: 0;
  box-sizing: border-box;
}

/* 小屏幕适配 */
@media (max-width: 768px) {
  .category-row {
    width: 95% !important;
    flex-direction: column !important;
    min-height: auto !important;
  }
  .category-products {
    width: 100% !important;
    padding: 16px 0 !important;
  }
  .card-image {
    height: 30vh !important;
    min-height: 200px;
  }
  .grid-card {
    min-height: 300px;
  }
}