/*
 * 产品中心页专属样式（products.html）
 * 设计稿：1:6013「产品中心-智能影像类-定」（1920×3535，底色 #F2F2F2）
 * 结构：banner(700) → 二级菜单 6 项(100) → 内容区
 *       左栏 400：产品分类(985) / 联系我们(310) / 报价(446)，间隔 40
 *       右栏 1140：面包屑+搜索 → 产品 4 行×3 卡(364×400，间隔 26/40) → 分页
 * 二级菜单为公共组件（common.css 的 .cat-*）
 */

/* ---------- 内容区两栏布局（左右两栏各自纵向堆叠，行高互不牵扯） ----------
 * 桌面：单行两列 grid（左 400 侧栏栈 / 右 1fr）。左栏三卡与右栏内容不再
 * 共享 grid 行——此前 cat 跨行 + 产品列表跨行，行 2 被右栏高度撑开，
 * 左栏分类卡与联系我们之间会留出不正常空隙（实测 177px）。
 * 移动端：两栏容器 display:contents 拆开，五区块按 order 还原
 * 面包屑 → 分类 → 产品列表 → 联系我们 → 报价 的单列顺序。 */
.prods-layout {
  display: grid;
  gap: 30px;
}
.prods-col-right,
.prods-col-side,
.prods-side-float {
  display: contents;
}
.prods-area-crumbs  { order: 1; }
.prods-area-cat     { order: 2; }
.prods-area-main    { order: 3; }
.prods-area-contact { order: 4; }
.prods-area-quote   { order: 5; }
.prods-side-float   { order: 6; } /* lg+ 排在分类卡(order:2)之后（移动端 display:contents 不取 order） */
@media (min-width: 1024px) {
  .prods-layout {
    grid-template-columns: 400px 1fr;
    grid-template-areas: "side right";
    column-gap: 60px; /* 设计稿左右栏间距（620-560-60） */
  }
  .prods-col-side {
    display: flex;
    flex-direction: column;
    gap: 40px;        /* 设计稿左栏各区块 40 间隔 */
    grid-area: side;
    align-self: start;
  }
  /* 悬浮行程预算：联系/报价组静态位于左栏末尾，其下若无富余空间则 sticky
   * 行程为 0 完全浮不起来。sticky 的约束范围是父级内容盒（padding 不计入），
   * 故用 ::after 占位 flex 项在栏尾预留 400px 行程（可按需调整） */
  .prods-col-side::after {
    content: "";
    height: 400px;
    order: 7; /* 排在悬浮组(order:6)之后，作栏尾行程占位 */
  }
  /* 联系我们 + 报价 悬浮组：lg+ 吸顶于悬浮页头下方（top 由 common.js
   * bindStickyAside 计算，120px 为脚本未执行时兜底）；分类卡不悬浮随页滚动 */
  .prods-side-float {
    display: flex;
    flex-direction: column;
    gap: 40px;
    position: sticky;
    top: 120px;
  }
  .prods-col-right {
    display: flex;
    flex-direction: column;
    gap: 40px;        /* 面包屑与产品列表间隔，同原行距 */
    grid-area: right;
  }
}

/* ---------- 侧栏卡片（.side-card / .side-card-head 为公共组件 common.css） ---------- */

/* ---------- 产品分类列表（设计稿 11 项，槽高 80，首项选中蓝底） ---------- */
.cat-list a {
  display: flex;
  align-items: center;
  height: 56px;
  padding: 0 25px;
  font-size: 16px;
  color: #666666; /* paint_1:3138 */
  transition: color 0.2s;
}
.cat-list a:hover {
  color: #0971CE;
}
.cat-list a.is-active {
  background: #0971CE; /* 设计稿 矩形181 选中态 */
  color: #FFFFFF;
}
@media (min-width: 1024px) {
  .cat-list a {
    height: 80px;
    padding: 0 50px;
    font-size: 24px; /* font_1:3143 / font_1:6181 */
  }
}
/* 卡片高度：头 80 + 11×80 = 960，底部补 25 与设计稿 985 对齐 */
@media (min-width: 1024px) {
  .cat-list {
    padding-bottom: 25px;
  }
}

/* ---------- 联系我们正文（设计稿 组1429：18px #666，x=49） ---------- */
.side-card-body {
  padding: 20px;
  font-size: 14px;
  line-height: 24px;
  color: #666666;
}
.contact-body p + p {
  margin-top: 16px;
}
@media (min-width: 1024px) {
  .side-card-body {
    padding: 33px 49px;
    font-size: 18px; /* font_1:6139 */
    line-height: 27px;
  }
  .contact-body p + p {
    margin-top: 20px;
  }
}

/* ---------- 报价表单（设计稿 组603：标签 66 + 输入 200×40，行距 80；提交 130×40 圆角 80 橙） ---------- */
.quote-form {
  padding: 20px;
}
.quote-field {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}
.quote-field label {
  flex-shrink: 0;
  font-size: 14px;
  line-height: 36px;
  color: #666666;
}
.quote-field label em {
  color: #FF0000; /* 必填红星 */
  font-style: normal;
}
.quote-field input {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #D8D8D8; /* paint_1:3127 */
  border-radius: 5px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}
.quote-field input:focus {
  border-color: #0971CE;
}
.quote-submit {
  display: block;
  margin: 0 auto;
  width: 130px;
  height: 40px;
  border-radius: 80px;
  background: #F18903; /* paint_1:3218 */
  color: #FFFFFF;
  font-size: 14px;
  transition: opacity 0.2s;
}
.quote-submit:hover {
  opacity: 0.9;
}
@media (min-width: 1024px) {
  .quote-form {
    padding: 38px 49px;
  }
  .quote-field {
    margin-bottom: 40px;
  }
  .quote-field label {
    width: 66px;
    font-size: 18px; /* font_1:4586 */
    line-height: 36px;
  }
  .quote-field input {
    font-size: 16px;
  }
  .quote-submit {
    font-size: 18px;
  }
}

/* ---------- 面包屑 + 搜索框 ---------- */
/* 面包屑文字用工具类（14/20px #666），分隔箭头为内联 SVG */
/* 搜索框 .search-box / .search-divider 与分页 .pager 为公共组件（common.css） */

/* ---------- 产品网格（设计稿 4 行×3 卡：364×400，横向 26 / 纵向 40） ---------- */
/* 单卡样式 .prod-card 为公共组件（common.css，产品中心 / 产品详情共用） */
.prods-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 640px) {
  .prods-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 26px;
  }
}
@media (min-width: 1024px) {
  .prods-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 26px;
  }
}

/* ---------- 分页（.pager 为公共组件 common.css；上边距用工具类） ---------- */