/* =============================================================================
 * restore-catalog.css —— Track 3 设计稿还原（独立写集，避免并行冲突）
 *
 * 为什么单独一个文件：
 *   components.css 是所有 page-*.php 共用的。多个还原任务同时改它必然互相覆盖。
 *   所以每个还原单元独占一个 CSS 文件，互不干扰；出问题也能单独回滚。
 *
 * 归属：page-shop.php + woocommerce/single-product.php（产品列表与详情）
 * 约束：本文件只服务该单元自己的模板，不要往里塞全局样式（放 components.css）。
 *
 * 作用域纪律
 * ---------------------------------------------------------------------------
 * 所有规则都限制在下面三个宿主之一，避免影响首页/关于/博客/联系页：
 *   body.post-type-archive-product   —— 英文 /shop/（WooCommerce 商品归档）
 *   body.page-template-page-shop     —— /de/produkte/ 等 9 个译文商店页
 *   .sv-pd                           —— 产品详情页的 main 容器
 *
 * 依据：.stitch/figma-verify/fig-products.png（1526×3246）
 *       .stitch/figma-verify/fig-product.png （1499×4860）
 *       由 tools/parity/figma-parity.mjs 逐区块量测。
 * ========================================================================== */

/* =============================================================================
 * 1) 产品列表页 —— 页头
 *    设计稿页头 = 面包屑 + eyebrow + H1 + 导语 + 右侧两枚操作按钮。
 *    线上只有 面包屑 + H1 + 导语，没有 eyebrow、也没有操作按钮。
 * ========================================================================== */
body.post-type-archive-product .sv-pagehead,
body.page-template-page-shop .sv-pagehead{
  padding:44px 0 34px;
}

/* eyebrow：设计稿是 12px 大写宽字距的小标签，位于 H1 之上 */
body.post-type-archive-product .sv-pagehead .sv-eyebrow,
body.page-template-page-shop .sv-pagehead .sv-eyebrow{
  display:block;
  margin:0 0 6px;
  font-size:.75rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--sv-ink-400);
}

body.post-type-archive-product .sv-pagehead h1,
body.page-template-page-shop .sv-pagehead h1{
  margin:10px 0 14px;
}

body.post-type-archive-product .sv-pagehead .sv-lead,
body.page-template-page-shop .sv-pagehead .sv-lead{
  max-width:62ch;
  margin:0 0 22px;
}

/* 操作按钮组（设计稿：Download full catalog / Request a Quote） */
.sv-pagehead__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
}

/* =============================================================================
 * 2) 产品列表页 —— 筛选条
 *    设计稿筛选条高 108px：第一行「搜索 + 排序 + 清除」，第二行分类/材质 facets。
 *    线上是一条 76px 的分类 chips，明显偏薄。
 *    这里只调整间距与行高，让它的体量与设计稿一致；不伪造不存在的 facet 数据。
 * ========================================================================== */
body.post-type-archive-product .sv-filterbar,
body.page-template-page-shop .sv-filterbar{
  padding:18px 0;
  background:var(--sv-sand-100);
}

body.page-template-page-shop .sv-filterbar__row{
  display:flex;
  flex-wrap:wrap;
  gap:14px 16px;
  align-items:center;
}

body.post-type-archive-product .sv-filterbar__row{
  min-height:72px;
}

/* 搜索框 —— 两个商店页都有（英文归档 + 9 个译文页），样式保持一致。
   与设计稿的浅底圆角输入框对齐。 */
body.post-type-archive-product .sv-shopsearch,
body.page-template-page-shop .sv-shopsearch{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
  flex:0 1 300px;
}

body.post-type-archive-product .sv-shopsearch .sv-input,
body.page-template-page-shop .sv-shopsearch .sv-input{
  width:100%;
  min-height:42px;
  padding:0 14px;
  border:1px solid var(--sv-line);
  border-radius:var(--sv-r-btn);
  background:var(--sv-white);
  font-size:.875rem;
}

/* =============================================================================
 * 3b) 分页 —— 英文归档页走 WooCommerce 原生 woocommerce_pagination()，
 *     输出的结构是 <nav class="woocommerce-pagination"><ul>…</ul></nav>；
 *     译文页走 .sv-pager。两者视觉必须一致，否则同一站点两套分页长相。
 * ========================================================================== */
body.post-type-archive-product .woocommerce-pagination,
body.page-template-page-shop .woocommerce-pagination{
  margin-top:48px;
}

body.post-type-archive-product .woocommerce-pagination ul,
body.page-template-page-shop .woocommerce-pagination ul{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
  border:0;
}

body.post-type-archive-product .woocommerce-pagination ul li,
body.page-template-page-shop .woocommerce-pagination ul li{
  border:0;
  margin:0;
}

body.post-type-archive-product .woocommerce-pagination .page-numbers,
body.page-template-page-shop .woocommerce-pagination .page-numbers{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:42px;
  height:42px;
  padding:0 12px;
  border:1px solid var(--sv-line);
  border-radius:var(--sv-r-btn);
  background:var(--sv-white);
  font-size:.9375rem;
  font-weight:600;
  color:var(--sv-forest-700);
  text-decoration:none;
}

body.post-type-archive-product .woocommerce-pagination .page-numbers.current,
body.page-template-page-shop .woocommerce-pagination .page-numbers.current{
  background:var(--sv-clay-500);
  border-color:var(--sv-clay-500);
  color:var(--sv-white);
}

body.post-type-archive-product .woocommerce-pagination .page-numbers:hover,
body.page-template-page-shop .woocommerce-pagination .page-numbers:hover{
  border-color:var(--sv-forest-700);
}

/* =============================================================================
 * 3) 产品列表页 —— 卡片
 *    设计稿卡片：图片是**内缩的方图**（卡片四周留 12px 白边），
 *    卡片底部是一条独立的「Wholesale MOQ / Specs / RFQ」操作条。
 *    线上图片是通铺到边的方图，缺少内缩与操作条的分隔感。
 *    只改比例与留白，不动 DOM，也不改列数（列数差异见交付说明）。
 * ========================================================================== */
body.post-type-archive-product .sv-prod,
body.page-template-page-shop .sv-prod{
  border:1px solid var(--sv-line);
  border-radius:var(--sv-r-card);
  background:var(--sv-white);
}

body.post-type-archive-product .sv-prod__media,
body.page-template-page-shop .sv-prod__media{
  margin:12px 12px 0;
  border-radius:10px;
  background:var(--sv-sand-100);
}

/* 卡片文字区节奏：压到设计稿的密度
 * 设计稿单卡 458px（图 272 + 文字 84 + 操作条 64）；线上原为 539px。
 * 差额 81px 全在文字区：padding 过大 + 行间距过大。
 * 这里只收内边距与间距，不动字号与 DOM。 */
body.post-type-archive-product .sv-prod__body,
body.page-template-page-shop .sv-prod__body{
  padding:8px 14px 0;
}

body.post-type-archive-product .sv-prod__body .sv-eyebrow,
body.page-template-page-shop .sv-prod__body .sv-eyebrow{
  margin:0 0 4px;
  line-height:1.2;
}

body.post-type-archive-product .sv-prod__body h3,
body.page-template-page-shop .sv-prod__body h3{
  margin:0 0 4px;
}

body.post-type-archive-product .sv-prod__sku,
body.page-template-page-shop .sv-prod__sku{
  line-height:1.3;
}

body.post-type-archive-product .sv-prod__mat,
body.page-template-page-shop .sv-prod__mat{
  margin-top:6px;
  line-height:1.35;
}

/* 卡片底部操作条：与上方内容之间加一条分隔线（设计稿是 border-t） */
body.post-type-archive-product .sv-prod__row,
body.page-template-page-shop .sv-prod__row{
  margin:8px -14px 0;
  padding:8px 14px 10px;
  border-top:1px solid rgb(220 213 199 / .6);
}

/* =============================================================================
 * 4) 产品列表页 —— 底部「定制能力」双卡区
 *    设计稿的收尾是一条 509px 的 sand 色带：eyebrow + H2 + 两张白卡
 *    （OEM & Private Label Division / Project Procurement & Contract Bids），
 *    线上只有一张居中的 CTA 卡。
 *    H3/段落全部取自已经进 Sunvale 字符串组、10 语言都有译文的目录 key。
 * ========================================================================== */
.sv-catalog-band .sv-band__head{
  max-width:70ch;
  margin:0 0 40px;
}

.sv-catalog-band .sv-band__head h2{
  margin:10px 0 12px;
}

.sv-catalog-band .sv-band__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:32px;
}

.sv-catalog-band .sv-band__card{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:24px;
  padding:32px;
  background:var(--sv-white);
  border:1px solid var(--sv-line);
  border-radius:var(--sv-r-card);
  box-shadow:var(--sv-shadow-sm);
}

.sv-catalog-band .sv-band__card h3{
  margin:0 0 12px;
  font-family:var(--sv-font-body);
  font-size:1.25rem;
  font-weight:600;
}

.sv-catalog-band .sv-band__card p{
  margin:0;
  font-size:.9375rem;
  line-height:1.75;
  color:var(--sv-ink-600);
}

.sv-catalog-band .sv-band__card a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.9375rem;
  font-weight:600;
  color:var(--sv-forest-700);
}

@media(max-width:834px){
  .sv-catalog-band .sv-band__grid{grid-template-columns:1fr;gap:20px}
}

/* 产品展示媒体位（Track 4.5）：图片或视频二选一，未设置时不渲染 */
.sv-catalog-showcase__media{
  display:block;
  width:100%;
  height:auto;
  border-radius:var(--sv-r-img);
  background:var(--sv-sand-100);
}

/* =============================================================================
 * 5) 产品详情页 —— 关键交易条件卡
 *    设计稿把 MOQ 与工厂交期做成两张并排的信息卡（label 在上、值在下）。
 *    线上是两个没有标签的裸 chip —— 交货期那个连标签都没有。
 * ========================================================================== */
.sv-pd-dealinfo{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin:2px 0 20px;
  padding:16px;
  background:rgb(237 230 217 / .7);
  border:1px solid var(--sv-line);
  border-radius:var(--sv-r-card);
}

.sv-pd-dealinfo__cell{
  min-width:0;
}

.sv-pd-dealinfo__k{
  display:block;
  margin-bottom:4px;
  font-family:var(--sv-font-mono);
  font-size:.6875rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--sv-ink-400);
}

.sv-pd-dealinfo__v{
  display:block;
  font-size:1rem;
  font-weight:600;
  color:var(--sv-ink-900);
  overflow-wrap:anywhere;
}

@media(max-width:520px){
  .sv-pd-dealinfo{grid-template-columns:1fr}
}

/* =============================================================================
 * 6) 产品详情页 —— RFQ 深色横幅
 *    设计稿该条带 570px：eyebrow / H2 / 3 行长正文 / 两枚按钮 / 一行 3 条信任标签。
 *    线上只有 373px，且没有底部信任标签行。
 * ========================================================================== */
.sv-pd-rfq{
  padding:80px 0;
}

.sv-pd-rfq__inner{
  max-width:768px;
}

.sv-pd-rfq p{
  max-width:62ch;
  margin-left:auto;
  margin-right:auto;
}

/* 第二段（产能说明），字号略小、颜色略淡，避免与主文案抢层级 */
.sv-pd-rfq__sub{
  margin-top:-16px;
  font-size:.9375rem;
  color:rgb(220 213 199 / .78);
}

.sv-pd-rfq__trust{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px 32px;
  margin-top:32px;
  padding-top:26px;
  border-top:1px solid rgb(255 255 255 / .16);
  font-size:.875rem;
  color:rgb(220 213 199 / .9);
}

.sv-pd-rfq__trust span{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.sv-pd-rfq__trust .sv-dot{
  background:var(--sv-moss-300);
}

/* =============================================================================
 * 7) 产品详情页 —— 定制参数卡
 *    设计稿的卡片是「参数号 + 徽标 / H3 / 说明 / 选项区 / Selected 页脚」。
 *    线上只有前三段，卡片因此只有 132px（设计稿 318~405px）。
 *    这里给卡片补上与设计稿一致的内边距与最小高度比例，让版式不再塌成一条；
 *    选项区的内容缺口单独在交付说明里列出（需要新增可翻译文案，不属于本次写集）。
 * ========================================================================== */
.sv-pd-param{
  min-height:172px;
  padding:26px 24px;
}

.sv-pd-param h3{
  font-size:1.0625rem;
  margin:0 0 8px;
}

.sv-pd-param p{
  font-size:.875rem;
}

/* 定制区块底部的说明行（设计稿有类似的 footnote 行） */
.sv-pd-custom__note{
  max-width:70ch;
  margin:26px auto 0;
  text-align:center;
  font-size:.875rem;
  line-height:1.75;
  color:var(--sv-ink-400);
}