/* ==========================================================================
   YK (UK) Limited — page-products.css
   产品中心 (products.html) 与产品详情 (product.html) 的少量页面专用样式。
   规则：只在这两个页面里引用（放在 style.css 之后）；只用 style.css :root 里的变量；
   类名 .page-products__xxx（BEM-lite）；不覆盖 style.css 里已有组件的外观，只补页面需要的布局。
   ========================================================================== */

/* 紧凑页头（cream 底）：标题 + 导语 + 搜索框 --------------------------------------- */
/* 页头背景图：当前分类的照片（page-products.js 设 --hero-img；没选分类或没有 JS 时用默认的亚洲食材图），深绿遮罩、白字 */
.page-products__hero {
  --hero-img:url("https://images.unsplash.com/photo-1534422298391-e4f8c172dddb?auto=format&fit=crop&w=1800&h=560&q=70");
  padding-block:clamp(28px,4vw,56px) clamp(32px,4.5vw,64px); border-bottom:0; background-color:var(--c-brand-900); color:var(--c-on-dark);
  background-image:linear-gradient(90deg,var(--c-scrim-strong) 0%,var(--c-scrim-strong) 36%,var(--c-scrim-light) 100%),var(--hero-img); background-position:center; background-size:cover;
}
.page-products__hero h1 { color:var(--c-white); }
.page-products__hero .lead { color:var(--c-on-dark); }
.page-products__hero .breadcrumb { color:var(--c-on-dark-muted); }
.page-products__hero .breadcrumb a { color:var(--c-on-dark); }
.page-products__hero .breadcrumb a:hover, .page-products__hero .breadcrumb [aria-current] { color:var(--c-white); }
.page-products__hero .breadcrumb li + li::before { border-color:var(--c-on-dark-line-strong); }
.page-products__hero :focus-visible { outline-color:var(--c-white); }
@media (max-width:767.98px) { .page-products__hero { background-image:linear-gradient(var(--c-scrim-strong),var(--c-scrim-strong)),var(--hero-img); } }
.page-products__hero h1 { margin-bottom:var(--s-2); font-size:clamp(1.875rem,1.5rem + 1.6vw,2.75rem); }
.page-products__hero .lead { margin-bottom:var(--s-5); }
.page-products__search { width:100%; max-width:40rem; }

/* 目录区块 ---------------------------------------------------------------------- */
.page-products__catalog { padding-block:clamp(24px,3vw,40px) clamp(48px,6vw,80px); }

/* 分类组只在桌面侧栏出现（<1024 用顶部 chips）；桌面版 "Clear all" 同理（<1024 在抽屉底部） */
.page-products__cat-group, .page-products__clear-group { display:none; }
.page-products__storage-group { border-top:0; }
/* 子类组（Type）：选了分类才显示（hidden 由 JS 切换），手机抽屉里也要有。
   <1024 分类组不显示，子类组是抽屉里第一个可见的组，不画上边线（抽屉标题栏已有下边线）；它显示时，其后的保存方式组才补上边线 */
.page-products__sub-group { border-top:0; }
.page-products__sub-group:not([hidden]) + .page-products__storage-group { border-top:1px solid var(--c-line); }
@media (min-width:1024px) {
  .page-products__cat-group, .page-products__clear-group { display:block; }
  .page-products__sub-group { border-top:1px solid var(--c-line); }
  .page-products__storage-group { border-top:1px solid var(--c-line); }
}

/* 选项为 0 的禁用态（单选分类、保存方式复选、顶部分类 chips） */
.page-products .checkbox.is-disabled { color:var(--c-ink-500); cursor:not-allowed; }
.page-products .checkbox.is-disabled input { cursor:not-allowed; }
.page-products .filter-group .checkbox.is-disabled:hover { background:transparent; }
.page-products .chip:disabled, .page-products .chip:disabled:hover { border-color:var(--c-line); background:var(--c-disabled-bg); color:var(--c-disabled-ink); cursor:not-allowed; }

/* 没有可清除的条件时，"Clear all" 保持可聚焦（不用 disabled，避免焦点丢失），外观与禁用按钮一致：底色 + 文字色 + not-allowed 光标 */
.page-products button.btn[aria-disabled="true"], .page-products button.btn[aria-disabled="true"]:hover, .page-products button.btn[aria-disabled="true"]:active {
  border-color:var(--c-disabled-bg); background:var(--c-disabled-bg); color:var(--c-disabled-ink); cursor:not-allowed; transform:none;
}

/* 分类简介（正式站分类页 SEO 文案的位置）：图标 + 文字两列，由 style.css 的 .info-card 排版 */
.page-products__intro { row-gap:0; margin-bottom:var(--s-5); padding:var(--s-4) var(--s-5); }
.page-products__intro p { margin:0; }
.page-products__intro .page-products__intro-zh { margin-top:var(--s-1); font-size:var(--fs-sm); font-weight:600; color:var(--c-ink-700); }

/* 结果栏：搜索词很长时允许断行 */
.page-products .results-bar__count { overflow-wrap:anywhere; }

/* 分批加载 / 代采入口卡 */
.page-products__more { display:flex; justify-content:center; margin-top:var(--s-6); }
.page-products__source { row-gap:var(--s-4); margin-top:var(--s-6); }
.page-products__source h3 { margin-bottom:var(--s-1); }
.page-products__source .btn { justify-self:start; }
@media (min-width:768px) {
  /* ≥768：图标 / 文字 / 按钮排成一行 */
  .page-products__source { grid-template-columns:auto minmax(0,1fr) auto; grid-template-rows:auto; align-items:center; column-gap:var(--s-4); row-gap:0; padding:var(--s-5) var(--s-6); }
  .page-products__source .btn { grid-column:3; grid-row:1; }
}

/* 产品详情 ---------------------------------------------------------------------- */
.page-products__pd { padding-block:var(--s-3) clamp(40px,5vw,72px); }
.page-products__catlink {
  display:inline-flex; align-items:center; min-height:44px; font-family:var(--font-head); font-size:var(--fs-sm); font-weight:700;
  color:var(--c-brand-700); text-decoration:none;
}
.page-products__catlink:hover { color:var(--c-brand-800); text-decoration:underline; text-underline-offset:3px; }
.page-products__qty { display:inline-flex; align-items:center; gap:var(--s-3); }
.page-products__unit { font-size:var(--fs-sm); color:var(--c-ink-500); }
.page-products__alt { margin:0 0 var(--s-2); }
.page-products__line { display:block; font-size:var(--fs-sm); font-weight:400; color:var(--c-ink-500); }
.page-products__nf-title { font-size:var(--fs-h2); }

/* 详情页主信息区的包装说明（一行，同产品卡写法；完整规格在下面的 Product information） */
.pd__pack { margin:var(--s-3) 0 var(--s-5); font-weight:600; color:var(--c-ink-900); }

/* 产品资料 Product information（详情页，page-product.js 渲染）：规格书式排版。
   每块一行：≥1024 左边小标题占 3/12、右边内容占 9/12，手机标题在上；块与块之间一条细线，没填的块不出现 */
.page-products__info h2 { margin-bottom:var(--s-5); }
.pd-info { border-top:1px solid var(--c-line-strong); }
.pd-info__row { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s-3); padding-block:var(--s-5); border-bottom:1px solid var(--c-line); }
.pd-info__label { margin:0; font-size:1.0625rem; line-height:1.35; }
.pd-info__body { min-width:0; max-width:48rem; }
.pd-info__body > p { margin:0 0 var(--s-3); color:var(--c-ink-700); }
.pd-info__body > :last-child { margin-bottom:0; }
.pd-info .spec-list { border-top:0; }
.pd-info .spec-list__row:first-child { padding-top:0; }
.pd-info .spec-list__row:last-child { border-bottom:0; padding-bottom:0; }
.pd-info .pd__note { margin-top:var(--s-3); }
.pd-info + .pd__note { margin-top:var(--s-4); }
/* 营养成分表：英国标签的常见写法，"of which" 两行缩进 */
.nutrition { width:100%; max-width:30rem; border-collapse:collapse; font-size:.9375rem; }
.nutrition th, .nutrition td { padding:10px 0; border-bottom:1px solid var(--c-line); text-align:left; font-weight:500; color:var(--c-ink-900); }
.nutrition thead th { border-bottom-color:var(--c-line-strong); font-family:var(--font-head); font-weight:700; }
.nutrition td, .nutrition thead th:last-child { text-align:right; font-variant-numeric:tabular-nums; }
.nutrition th.nutrition__sub { padding-left:var(--s-4); font-weight:400; color:var(--c-ink-500); }
.nutrition tbody tr:last-child th, .nutrition tbody tr:last-child td { border-bottom:0; }
@media (min-width:1024px) {
  .pd-info__row { grid-template-columns:minmax(0,3fr) minmax(0,9fr); gap:var(--s-6); padding-block:var(--s-6); }
}