/* Hallmark · checked: 2026-10-26 · genre: modern-minimal (inferred)
 * floor: 0 FAIL · fixed: 71 (4, 19, 34, 39a, 48, 50, 54, 62, 63, 67) · structural: 2 printed (42, 58) · 8 and 9 settled at the owner's request
 * nav: product first at the owner's request, a company topbar, a search bar and a category bar with an all-products mega-menu · footer: four link columns, contact details last (kept)
 * finish-review: subagent · recapture once (web fonts had not loaded) · 5 findings · 4 resolved · 1 printed (8, 9) · gap: none
 * built: the project · redesign: polish · v2.0.0 */
/* Hallmark · dismissed 3 · .grid--3 cards now carry a line icon inline with each heading, no tile; .site-footer__grid holds link columns, not tiles */
/* Hallmark · dropped why-title ·the owner merged the home Why YK section into the trust strip, and the steps-to-customers seam is now a ruled line */
/* Hallmark · answered F20 · the hero lists six real searches; between 1024 and 1279 the sixth chip, Soy sauce, wraps alone and the list stays whole */
/* ==========================================================================
   YK (UK) Limited · 全站样式（设计系统 + 全部组件）
   --------------------------------------------------------------------------
   规则：
   1. 这是唯一的全站样式。后续页面只用已有组件；确需新样式，写到各自的
      assets/css/page-<名字>.css，不要改本文件。
   2. 颜色 / 字号 / 间距 / 圆角只用 :root 变量，不写散值。
   3. BEM-lite 命名：.block / .block__el / .block--mod；状态类 .is-open .is-active
      .is-added .is-invalid；JS 只认 data-* 属性，不靠样式类选元素。
   4. mobile-first，断点 min-width：560 / 768 / 1024 / 1280（页头导航另用 1180 / 1360）。
   组件用法见 docs/components.md。

   目录
   01 Tokens        02 Base / 排版 / 工具类        03 按钮 / 徽章 / 标签
   04 页头 / 导航 / 搜索面板                         05 页脚
   06 卡片（占位图 / 产品卡 / 分类卡 / feature / info-card / biz-card）
   07 首页（hero / trust / steps / client / split / cta）
   08 内页（page-hero / breadcrumb / info-table / checklist / timeline / faq / gallery / prose）
   09 产品列表 / 详情（catalog / filter / results / grid / pd / spec / qty）
   10 表单   11 浮层（drawer / eq-item / toast / fab）
   ========================================================================== */

/* 01 Tokens ---------------------------------------------------------------- */
:root {
  --c-brand-900:#0B2E22; --c-brand-800:#0F3D2E; --c-brand-700:#145A41; --c-brand-600:#1B6E50;
  --c-brand-100:#E3EFE8; --c-brand-50:#F1F7F3;
  --c-accent-700:#A63914; --c-accent-600:#C8461D; --c-accent-100:#FBE9E1;
  --c-ink-900:#16201B; --c-ink-700:#3A4741; --c-ink-500:#66736C;
  --c-line:#E3E0D7; --c-line-strong:#CFCBC0; --c-cream:#F7F4EC; --c-white:#FFFFFF;
  --c-wa:#25D366; --c-wa-ink:#06301B;
  --c-wa-glyph:#128C7E;                          /* WhatsApp 图标在浅色底上的颜色（对白底约 4.1:1，图标要求 3:1）；深色底上的图标用 --c-wa */
  --c-fresh:#2E7D32; --c-fresh-bg:#E8F3E8;  --c-chilled:#1565A8; --c-chilled-bg:#E5EFF9;
  --c-frozen:#3F51B5; --c-frozen-bg:#ECEEFB; --c-ambient:#8A5A00; --c-ambient-bg:#FBF0D9;
  /* 字体栈：品牌字体 → 拉丁系统字体 → 中文字体。拉丁系统字体必须排在中文字体之前：谷歌字体加载失败时，
     弯引号 ’ “ ” 否则会落到中文字体，变成一个汉字宽（出现 "We’  ll" 这样的空隙）。
     "Segoe UI" 放在 system-ui 前面，因为中文 Windows 上 system-ui 会解析成微软雅黑 UI。 */
  --font-head:"Manrope","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
  --font-body:"Inter","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
  --fs-display:clamp(2.25rem,1.55rem + 2.9vw,3.75rem); --fs-h2:clamp(1.75rem,1.4rem + 1.4vw,2.5rem);
  --fs-h3:1.25rem; --fs-lead:clamp(1.0625rem,1rem + .3vw,1.25rem); --fs-body:1rem; --fs-sm:.875rem; --fs-xs:.8125rem;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;
  --section-y:clamp(56px,7vw,96px);
  --r-sm:6px; --r-md:8px; --r-lg:14px; --r-xl:20px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(11,46,34,.06); --sh-2:0 12px 32px -14px rgba(11,46,34,.22); --sh-3:0 24px 60px -20px rgba(11,46,34,.35);
  --container:1400px; --texture-opacity:.05; --header-h:72px; --navbar-h:0px; --sticky-h:calc(var(--header-h) + var(--navbar-h)); --ease:cubic-bezier(.2,.7,.2,1);
  --measure:65ch;

  /* 以下为设计系统补充（来自 CLAUDE.md 第 5 节的占位图底色 + 层级 + 派生色） */
  --c-ph-meat:#F6E6E1; --c-ph-veg:#E5F1E3; --c-ph-frozen:#E6EEF8;
  --c-ph-rice:#F4EDDD; --c-ph-sauce:#F7E5D9; --c-ph-specialty:#ECE8F4;
  --c-overlay:rgba(11,46,34,.5);
  --c-focus:rgba(27,110,80,.22);
  --z-fab:40; --z-header:50; --z-nav-backdrop:60; --z-nav:65; --z-backdrop:90; --z-drawer:100; --z-toast:120;

  /* 按用途命名的派生色：全站颜色只走 token，三个 CSS 文件里不写颜色字面值 */
  --c-on-dark:rgba(255,255,255,.86);             /* 深色底上的正文、链接 */
  --c-on-dark-muted:rgba(255,255,255,.76);       /* 深色底上的次要文字、图标 */
  --c-on-dark-line:rgba(255,255,255,.16);        /* 深色底上的分隔线 */
  --c-on-dark-line-strong:rgba(255,255,255,.55); /* 深色底上描边按钮的边框 */
  --c-on-dark-fill:rgba(255,255,255,.14);        /* 深色底上的悬停 / 标记底色 */
  --c-on-dark-fill-strong:rgba(255,255,255,.26); /* 深色底上小按钮的悬停底色 */
  --c-wa-hover:#1FBE5B;                          /* WhatsApp 按钮悬停 */
  --c-fresh-ink:#266729;                         /* Fresh 徽章文字（--c-fresh 加深，保证对比度） */
  --c-scrim:rgba(11,46,34,.74);                  /* 压在照片上的说明条底色 */
  --c-scrim-strong:rgba(11,46,34,.92);           /* 照片背景上压文字的深绿遮罩（文字一侧） */
  --c-scrim-soft:rgba(11,46,34,.8);              /* 同上，照片露得多一点的一侧（按钮仍可读） */
  --c-scrim-light:rgba(11,46,34,.45);            /* 页头照片右侧（那一侧没有文字和按钮）*/
  --c-danger-ring:rgba(166,57,20,.18);           /* 出错输入框的聚焦光圈 */
  --c-disabled-bg:#E9E6DD; --c-disabled-ink:#5A665F;            /* 禁用按钮：底色 + 文字色（对比度 4.8:1）+ not-allowed 光标 */

  /* 内联 SVG 图形（颜色写在这里，样式里只引用变量） */
  --icon-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23145A41' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --icon-chevron-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2366736C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --mask-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 12h14M12 5v14'/%3E%3C/svg%3E");

  /* 浏览器自带外观上主题色 */
  caret-color:var(--c-brand-700);
  scrollbar-color:var(--c-brand-600) var(--c-cream);
}
@media (max-width:767.98px) { :root { --header-h:64px; } }
/* ≥1180 分类栏随主栏吸顶（48px + 1px 分隔线）：吸顶元素的 top、锚点 scroll-padding 都按 --sticky-h 算 */
@media (min-width:1180px) { :root { --navbar-h:49px; } }

/* 02 Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--sticky-h) + 16px); }
html, body { overflow-x:clip; }
html.is-locked, body.is-locked { overflow:clip; }
body {
  margin:0; min-width:320px; font-family:var(--font-body); font-size:var(--fs-body); line-height:1.6;
  color:var(--c-ink-900); background:var(--c-white); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
[hidden] { display:none !important; }
img, svg, video { display:block; max-width:100%; }
img { height:auto; }
button, input, select, textarea { font:inherit; color:inherit; }
button { cursor:pointer; }
ul, ol { margin:0; padding:0; }
h1, h2, h3, h4 { min-width:0; margin:0 0 .5em; overflow-wrap:break-word; font-family:var(--font-head); font-weight:800; line-height:1.15; letter-spacing:-.015em; color:var(--c-ink-900); text-wrap:balance; }
h1 { font-size:var(--fs-display); letter-spacing:-.02em; line-height:1.08; }
h2 { font-size:var(--fs-h2); }
h3 { font-size:var(--fs-h3); font-weight:700; letter-spacing:-.01em; line-height:1.25; }
h4 { font-size:1.0625rem; font-weight:700; letter-spacing:0; line-height:1.3; }
p { max-width:var(--measure); margin:0 0 1em; text-wrap:pretty; }
a { color:inherit; }
a:not([class]) { color:var(--c-brand-700); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
a:not([class]):hover { color:var(--c-brand-800); text-decoration-thickness:2px; }
hr { border:0; border-top:1px solid var(--c-line); margin:var(--s-6) 0; }
strong { font-weight:600; }
:lang(zh-Hans), [lang="zh-Hans"] { font-family:var(--font-head); letter-spacing:0; }

::selection { background:var(--c-brand-100); color:var(--c-brand-900); }

:focus-visible { outline:3px solid var(--c-brand-600); outline-offset:2px; border-radius:var(--r-sm); }
.section--dark :focus-visible, .site-footer :focus-visible, .topbar :focus-visible { outline-color:var(--c-white); }
.skip-link {
  position:absolute; left:var(--s-4); top:-80px; z-index:200; padding:12px 18px; border-radius:var(--r-md);
  background:var(--c-brand-900); color:var(--c-white); font-weight:600; text-decoration:none;
}
.skip-link:focus { top:var(--s-4); }
.visually-hidden {
  position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; border:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* 布局 */
.container { width:100%; max-width:var(--container); margin-inline:auto; padding-inline:20px; }
@media (min-width:768px) { .container { padding-inline:28px; } }
@media (min-width:1024px) { .container { padding-inline:32px; } }
.section { padding-block:var(--section-y); }
.section--sm { padding-block:clamp(36px,5vw,56px); }
.section--cream { background:var(--c-cream); }
/* 区块之间不必每处都换底色：.section--ruled 与上一块同底，用一条内容宽的细线隔开；
   .section--joined 与上一块同底且不分隔，只留上一块的下边距 */
.section--ruled, .section--joined { padding-top:0; }
.section--ruled > .container::before { content:""; display:block; height:1px; margin-bottom:var(--section-y); background:var(--c-line); }
.section--tint { background:var(--c-brand-50); }
.section--dark { background:var(--c-brand-800); color:var(--c-on-dark); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color:var(--c-white); }
.section--dark .lead { color:var(--c-on-dark); }
.section--dark a:not([class]) { color:var(--c-white); }

/* 区块标题：h2 在上，导语在下，没有引导小标签；只有 h2 时去掉它的下边距，间距由 .section__head 统一给 */
.section__head { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:var(--s-4) var(--s-6); margin-bottom:clamp(28px,4vw,44px); }
.section__intro { max-width:46rem; }
.section__head h2 { margin-bottom:var(--s-3); }
.section__head .lead { margin-bottom:0; }
.section__intro > :last-child { margin-bottom:0; }
.section__head--center { justify-content:center; text-align:center; }
.section__head--center .section__intro { margin-inline:auto; }
.section__head--center .lead { margin-inline:auto; }

.lead { margin:0 0 var(--s-5); max-width:min(40rem,var(--measure)); font-size:var(--fs-lead); line-height:1.55; color:var(--c-ink-700); text-wrap:pretty; }

/* 工具类（页面作者只靠这些排版，不要自己加 CSS） */
.text-center { text-align:center; }
.text-muted { color:var(--c-ink-500); }
.mt-0 { margin-top:0 !important; } .mt-3 { margin-top:var(--s-3) !important; } .mt-4 { margin-top:var(--s-4) !important; }
.mt-5 { margin-top:var(--s-5) !important; } .mt-6 { margin-top:var(--s-6) !important; } .mt-7 { margin-top:var(--s-7) !important; }
.mb-0 { margin-bottom:0 !important; } .mb-4 { margin-bottom:var(--s-4) !important; } .mb-5 { margin-bottom:var(--s-5) !important; } .mb-6 { margin-bottom:var(--s-6) !important; }
.stack > * + * { margin-top:var(--s-4); }
.cluster { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-3); }
.prose { max-width:var(--measure); }
.prose > * + * { margin-top:1em; }
.prose h2, .prose h3 { margin-top:1.6em; }
.prose p, .prose li { color:var(--c-ink-700); }
.prose ul, .prose ol { padding-left:1.25em; }
.prose li + li { margin-top:.4em; }

/* 响应式网格：1 列 → 2 列 → n 列 */
.grid { display:grid; gap:var(--s-5); }
@media (min-width:560px) { .grid--2, .grid--3, .grid--4 { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px) {
  .grid--3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .grid--4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .grid--gap-lg { gap:var(--s-6); }
}

/* 图标 */
.icon { display:inline-block; flex:none; width:1.25em; height:1.25em; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; vertical-align:-.22em; }
.icon--sm { width:1em; height:1em; }
.icon--lg { width:1.75em; height:1.75em; }

/* 圆角图片容器（比例用 --ratio，如 style="--ratio:4/3"） */
.media { position:relative; overflow:hidden; border-radius:var(--r-xl); background:var(--c-cream); aspect-ratio:var(--ratio,4/3); }
.media img, .media .ph { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* 03 按钮 / 徽章 / 标签 ------------------------------------------------------ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 22px;
  border:1.5px solid transparent; border-radius:var(--r-md); background:transparent;
  font-family:var(--font-head); font-size:.9375rem; font-weight:700; line-height:1.2; text-align:center; text-decoration:none;
  white-space:nowrap; cursor:pointer; transition:background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.btn .icon { width:1.2em; height:1.2em; vertical-align:0; }
.btn:active { transform:translateY(1px); }
.btn--primary { background:var(--c-brand-700); color:var(--c-white); }
.btn--primary:hover { background:var(--c-brand-800); }
.btn--primary:active { background:var(--c-brand-900); }
.btn--accent { background:var(--c-accent-600); color:var(--c-white); }
.btn--accent:hover, .btn--accent:active { background:var(--c-accent-700); }
/* 次要按钮：与主按钮同高同边框宽（1.5px），底色透明（不是实心按钮），描边用 brand-700，悬停 / 按下逐级加深 */
.btn--outline { background:transparent; border-color:var(--c-brand-700); color:var(--c-brand-700); }
.btn--outline:hover { background:var(--c-brand-50); border-color:var(--c-brand-800); color:var(--c-brand-800); }
.btn--outline:active { background:var(--c-brand-100); border-color:var(--c-brand-800); color:var(--c-brand-800); }
.btn--ghost { color:var(--c-brand-700); padding-inline:14px; }
.btn--ghost:hover { background:var(--c-brand-50); }
.btn--ghost:active { background:var(--c-brand-100); }
.btn--wa { background:var(--c-wa); color:var(--c-wa-ink); }
.btn--wa:hover, .btn--wa:active { background:var(--c-wa-hover); }
/* WhatsApp 描边按钮（旁边已有实心主按钮时用）：按钮本身是 btn--outline / btn--outline-light，只有图标单独着色。
   浅色底用 --c-wa-glyph（图标对比度 ≥ 3:1），深色底用 --c-wa；文字颜色仍跟随按钮，悬停时图标颜色不变。 */
.btn__icon--wa { color:var(--c-wa-glyph); }
.btn--outline-light .btn__icon--wa { color:var(--c-wa); }
.btn--light { background:var(--c-white); color:var(--c-brand-900); }
.btn--light:hover { background:var(--c-cream); }
.btn--outline-light { border-color:var(--c-on-dark-line-strong); color:var(--c-white); }
.btn--outline-light:hover { background:var(--c-on-dark-fill); border-color:var(--c-white); }
.btn--outline-light:active { background:var(--c-on-dark-fill-strong); border-color:var(--c-white); }
.btn--sm { min-height:40px; padding:0 16px; font-size:.875rem; }
.btn--lg { min-height:56px; padding:0 30px; font-size:1rem; }
.btn--block { display:flex; width:100%; }
.btn--icon { width:48px; min-width:48px; padding:0; }
.btn--icon.btn--sm { width:40px; min-width:40px; }
.btn--icon.btn--lg { width:56px; min-width:56px; }
/* 禁用：底色、文字色、光标三个通道一起变（不能只靠透明度）；原生 disabled 属性由 <button> 自带（:disabled）。
   链接没有原生禁用，.is-disabled 的 <a> 额外关掉指针事件。 */
.btn:disabled, .btn.is-disabled, .btn:disabled:hover, .btn.is-disabled:hover {
  border-color:var(--c-disabled-bg); background:var(--c-disabled-bg); color:var(--c-disabled-ink); cursor:not-allowed; transform:none;
}
a.btn.is-disabled { pointer-events:none; }
@media (max-width:767.98px), (pointer:coarse) { .btn--sm { min-height:44px; } .btn--icon.btn--sm { width:44px; min-width:44px; } }

/* 文字链接（section__head 右侧、卡片底部）：不加箭头，静止时就带下划线，悬停加粗下划线 */
.link-arrow { display:inline-flex; align-items:center; gap:var(--s-2); min-height:44px; font-family:var(--font-head); font-weight:700; color:var(--c-brand-700); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; white-space:nowrap; }
.link-arrow:hover { color:var(--c-brand-800); text-decoration-thickness:2px; }
.section--dark .link-arrow { color:var(--c-white); }

/* 徽章（保存方式）：彩色文字 + 同色浅底，不带圆点 */
.badge {
  display:inline-flex; align-items:center; padding:3px 9px; border-radius:var(--r-sm);
  font-family:var(--font-head); font-size:.75rem; font-weight:700; line-height:1.3; letter-spacing:.01em; white-space:nowrap;
  background:var(--c-cream); color:var(--c-ink-700);
}
.badge--fresh { background:var(--c-fresh-bg); color:var(--c-fresh-ink); }
.badge--chilled { background:var(--c-chilled-bg); color:var(--c-chilled); }
.badge--frozen { background:var(--c-frozen-bg); color:var(--c-frozen); }
.badge--ambient { background:var(--c-ambient-bg); color:var(--c-ambient); }
.badge--neutral { background:var(--c-cream); color:var(--c-ink-700); }

/* 标签 / 筛选 / 热门搜索 */
.chips { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2); }
.chip {
  display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 16px; border:1px solid var(--c-line-strong); border-radius:var(--r-pill);
  background:var(--c-white); color:var(--c-ink-700); font-size:.875rem; font-weight:500; line-height:1; text-decoration:none; white-space:nowrap; cursor:pointer;
  transition:background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.chip:hover { border-color:var(--c-brand-600); color:var(--c-brand-700); }
.chip.is-active, .chip[aria-pressed="true"], .chip[aria-current="true"] { background:var(--c-brand-700); border-color:var(--c-brand-700); color:var(--c-white); }
.chip .icon { width:1em; height:1em; }
.chip__count { font-size:var(--fs-xs); opacity:.75; }
@media (min-width:768px) and (pointer:fine) { .chip { min-height:38px; } }
@media (max-width:767.98px) {
  .chips--scroll { position:relative; flex-wrap:nowrap; overflow-x:auto;margin-inline:-20px; padding:2px 20px 6px; scroll-padding-inline:20px; scrollbar-width:none; scroll-snap-type:x proximity; }
  .chips--scroll::-webkit-scrollbar { display:none; }
  .chips--scroll .chip { flex:none; scroll-snap-align:start; }
}

/* TBC 标记 / 原型提示 */
.tbc {
  display:inline-block; padding:0 6px; border-radius:4px; background:var(--c-accent-100); color:var(--c-accent-700);
  font-size:max(11px,.75em); font-weight:700; letter-spacing:0; line-height:1.6; vertical-align:baseline; cursor:help;
  text-decoration:underline dotted; text-underline-offset:2px;
}
.proto-note {
  display:flex; align-items:flex-start; gap:10px; max-width:none; margin:var(--s-5) 0 0; padding:10px 14px; border:1px dashed var(--c-line-strong); border-radius:var(--r-md);
  background:var(--c-cream); color:var(--c-ink-700); font-size:var(--fs-xs); line-height:1.5;
}
.proto-note .icon { width:16px; height:16px; margin-top:1px; color:var(--c-accent-700); }
.section--cream .proto-note { background:var(--c-white); }
/* 不加框的一行小字（客户名墙下面等处） */
.proto-note.proto-note--plain { padding:0; border:0; background:none; }

/* 04 页头 / 导航 / 搜索面板 ---------------------------------------------------- */
/* 页头三层，产品优先：
   1. 顶栏 .topbar（≥768，不吸顶）：左边公司栏目（UK Wholesale / International Trade / About Us / Contact），右边 WhatsApp 和邮箱。
      深绿细栏、小号字，公司介绍类栏目在这里弱化。
   2. 主栏 .site-header__inner（吸顶）：Logo、产品搜索（≥1024 常驻，更窄时用放大镜打开搜索面板）、询价清单、Request a Quote。
   3. 分类栏 .nav（≥1180，随主栏吸顶）：All products（大菜单：六类 + 子类）+ 六个分类直达。
      <1180 有 JS（html.js）时 .nav 是右侧抽屉：大菜单里带图的六个分类常展开排在最前，公司栏目和按钮在后；
      没有 JS 时是页头下方的普通链接列表。关闭态只写在 .js 下，脚本失败也不会丢导航。 */
.topbar { display:none; background:var(--c-brand-900); color:var(--c-on-dark); font-size:var(--fs-xs); }
@media (min-width:768px) { .topbar { display:block; } }
.topbar__inner { display:flex; align-items:center; justify-content:space-between; gap:var(--s-5); min-height:38px; }
.topbar__nav, .topbar__links { display:flex; align-items:center; gap:var(--s-5); }
.topbar a { display:inline-flex; align-items:center; gap:6px; min-height:38px; color:var(--c-white); text-decoration:none; text-underline-offset:3px; }
.topbar__nav a { color:var(--c-on-dark); }
.topbar__nav a[aria-current] { color:var(--c-white); }
/* 顶栏链接没有 class，会被全站的 a:not([class]):hover（深绿）盖掉，这里显式写回白色 */
.topbar a:hover, .topbar__nav a[aria-current] { color:var(--c-white); text-decoration:underline; }
.topbar .icon { width:15px; height:15px; }

.site-header { position:sticky; top:0; z-index:var(--z-header); background:var(--c-white); border-bottom:1px solid var(--c-line); transition:box-shadow .2s var(--ease); }
.site-header.is-scrolled { box-shadow:var(--sh-2); }
.site-header__inner { display:flex; align-items:center; gap:var(--s-4); height:var(--header-h); }

.brand { display:inline-flex; align-items:center; flex:none; min-height:44px; color:var(--c-ink-900); text-decoration:none; }
/* Logo：YK 正式 logo 图片（assets/img/logo/yk-food-wholesale.webp，透明底、已裁切）。高度定大小，宽度按比例 */
.brand__logo { display:block; width:auto; height:44px; }
@media (min-width:768px) { .brand__logo { height:52px; } }
/* 页脚深色底：同一个文件转成白色单色；滤镜只改颜色，透明的镂空保留 */
.brand--light .brand__logo { height:72px; filter:brightness(0) invert(1); }

/* 主栏里的产品搜索：沿用首屏搜索框 .hero-search 的样式，矮一档；≥1024 常驻 */
.site-header .header-search { display:none; }
@media (min-width:1024px) {
  .site-header .header-search { display:flex; flex:1 1 auto; max-width:40rem; min-height:46px; margin-inline:auto; }
  .site-header .header-search input { padding-block:var(--s-2); font-size:.9375rem; }
  .site-header .header-search .hero-search__btn { min-height:0; padding-inline:var(--s-4); font-size:.875rem; }
  .site-header .search-toggle { display:none; }
}

.nav { padding:0 20px var(--s-4); background:var(--c-white); }
@media (max-width:1179.98px) {
  .js .nav {
    position:fixed; top:0; right:0; bottom:0; z-index:var(--z-nav); width:min(380px,100%); padding:0 20px 28px; overflow-y:auto; overscroll-behavior:contain;
    box-shadow:var(--sh-3); transform:translateX(100%); visibility:hidden;
    transition:transform .3s var(--ease), visibility 0s linear .3s;
  }
  .js .nav.is-open { transform:none; visibility:visible; transition:transform .3s var(--ease); }
  .nav__inner { padding-inline:0; }
  /* 抽屉里：文字分类链接和 "All products" 一行隐藏，直接展开大菜单（带图的六个分类，底部 View all products） */
  .js .nav__item--cat, .js .has-menu > .nav__link, .js .has-menu > .nav__caret { display:none; }
  .js .has-menu > .nav__menu { display:grid; }
  .nav .nav__subs { display:none; }
  html:not(.js) .site-header { position:static; }
  html:not(.js) .nav__head, html:not(.js) .nav__caret, html:not(.js) .nav-toggle { display:none; }
}
.nav__head { display:flex; align-items:center; justify-content:space-between; height:var(--header-h); margin:0 -20px 4px; padding:0 12px 0 20px; border-bottom:1px solid var(--c-line); font-family:var(--font-head); font-size:1.0625rem; font-weight:800; }
.nav__list { display:flex; flex-direction:column; margin:0; padding:0; list-style:none; }
.nav__item { position:relative; }
.nav__link {
  position:relative; display:flex; align-items:center; gap:10px; width:100%; min-height:54px; padding:0 4px; border-bottom:1px solid var(--c-line);
  font-size:1.0625rem; font-weight:600; color:var(--c-ink-900); text-decoration:none; white-space:nowrap;
}
.nav__link:hover { color:var(--c-brand-700); }
.nav__link[aria-current] { color:var(--c-brand-700); }
.nav__link--all .icon { flex:none; width:18px; height:18px; }
.nav__item.has-menu { display:flex; flex-wrap:wrap; align-items:stretch; }
.nav__item.has-menu > .nav__link { flex:1 1 0; width:auto; }
.nav__caret { display:grid; place-items:center; flex:none; width:48px; min-height:54px; border:0; border-bottom:1px solid var(--c-line); background:transparent; color:var(--c-ink-700); }
.nav__caret .icon { width:20px; height:20px; transition:transform .2s var(--ease); }
.has-menu.is-open > .nav__caret .icon { transform:rotate(180deg); }
.nav__menu { display:none; flex:0 0 100%; grid-template-columns:minmax(0,1fr); gap:2px; padding:6px 0 12px; }
.has-menu.is-open > .nav__menu { display:grid; }
/* 大菜单的分类项：分类照片缩略图 + 英文名 + 一行英文说明；桌面下面再列子类链接。不垫底色，悬停只变文字颜色（照片不缩放） */
.nav__cat { min-width:0; }
.nav__cat > a, .nav__menu-all { display:flex; align-items:center; gap:12px; min-height:52px; padding:6px 8px; border-radius:var(--r-md); color:var(--c-ink-900); text-decoration:none; }
.nav__cat > a:hover, .nav__menu-all:hover { color:var(--c-brand-700); }
.nav__menu-media { flex:none; width:48px; height:48px; overflow:hidden; border-radius:var(--r-md); background:var(--c-cream); }
.nav__menu-media img { display:block; width:100%; height:100%; object-fit:cover; }
.nav__menu-text { display:flex; flex-direction:column; gap:2px; min-width:0; line-height:1.25; }
.nav__menu-text strong { font-size:.9375rem; font-weight:600; }
.nav__menu-text small { font-size:.8125rem; line-height:1.35; color:var(--c-ink-500); }
.nav__menu-all { grid-column:1/-1; margin-top:4px; font-family:var(--font-head); font-size:.9375rem; font-weight:700; color:var(--c-brand-700); }
.nav__subs { display:flex; flex-wrap:wrap; gap:0 14px; margin:0; }
.nav__subs a { display:inline-flex; align-items:center; min-height:30px; font-size:var(--fs-sm); color:var(--c-ink-700); text-decoration:none; transition:color .15s var(--ease); }
.nav__subs a:hover { color:var(--c-brand-700); }
/* 抽屉里的公司栏目：排在分类后面，字号小一档、颜色浅一档 */
.nav__company { margin:var(--s-3) 0 0; padding:var(--s-2) 0 0; border-top:1px solid var(--c-line); list-style:none; }
.nav__company a { display:flex; align-items:center; min-height:44px; padding:0 4px; color:var(--c-ink-700); font-size:1rem; font-weight:500; text-decoration:none; }
.nav__company a:hover, .nav__company a[aria-current] { color:var(--c-brand-700); }
.nav__extra { display:grid; gap:var(--s-3); margin-top:var(--s-5); }
.nav-backdrop { position:fixed; inset:0; z-index:var(--z-nav-backdrop); background:var(--c-overlay); opacity:0; visibility:hidden; transition:opacity .25s var(--ease), visibility 0s linear .25s; }
.nav-backdrop.is-open { opacity:1; visibility:visible; transition:opacity .25s var(--ease); }

.header-actions { display:flex; align-items:center; gap:2px; margin-left:auto; }
.icon-btn {
  position:relative; display:inline-grid; place-items:center; flex:none; width:44px; height:44px; padding:0; border:0; border-radius:var(--r-md);
  background:transparent; color:var(--c-ink-900); text-decoration:none; transition:background-color .15s var(--ease), color .15s var(--ease);
}
.icon-btn:hover { background:var(--c-brand-50); color:var(--c-brand-700); }
.icon-btn .icon { width:22px; height:22px; vertical-align:0; }
.icon-btn[aria-expanded="true"] { background:var(--c-brand-50); color:var(--c-brand-700); }
/* 页头里的图标按钮（搜索、询价清单、菜单）和导航一样不用底色：悬停和展开只变颜色 */
.site-header .icon-btn:hover, .site-header .icon-btn[aria-expanded="true"] { background:transparent; color:var(--c-brand-700); }
.count-badge {
  position:absolute; top:2px; right:0; min-width:19px; height:19px; padding:0 5px; border-radius:var(--r-pill);
  background:var(--c-accent-600); color:var(--c-white); font-family:var(--font-head); font-size:.6875rem; font-weight:800; line-height:19px; text-align:center;
  font-variant-numeric:tabular-nums; box-shadow:0 0 0 2px var(--c-white);
}
/* 询价清单按钮：窄屏只显示图标（文字仅供读屏），≥1280 显示 "Enquiry list" + 数量 */
.icon-btn__label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media (min-width:1280px) {
  .icon-btn--labelled { grid-auto-flow:column; gap:8px; width:auto; padding:0 12px 0 10px; }
  .icon-btn--labelled .icon-btn__label { position:static; width:auto; height:auto; overflow:visible; clip:auto; font-family:var(--font-head); font-size:var(--fs-sm); font-weight:700; }
  .icon-btn--labelled .count-badge { position:static; box-shadow:none; }
}
.header-quote { display:none; margin-left:var(--s-1); }
@media (min-width:768px) { .header-quote { display:inline-flex; } }
.nav-toggle { margin-left:2px; }
/* 320 到 359：品牌名 + 三个 44px 图标按钮放不下，收紧页头间距，菜单按钮不会被 overflow-x:clip 裁掉 */
@media (max-width:359.98px) {
  .site-header__inner { gap:var(--s-2); padding-inline:12px; }
  .brand__logo { height:40px; }
}

@media (min-width:1180px) {
  .nav { padding:0; border-top:1px solid var(--c-line); background:var(--c-white); }
  .nav__head, .nav__company, .nav__extra, .nav-backdrop, .nav-toggle { display:none; }
  .nav__inner { position:relative; }
  /* 分类栏不用底色：悬停文字变绿，下方滑出 2px 下划线（落在页头底线上）；当前分类常驻同样的下划线 */
  .nav__list { flex-direction:row; align-items:stretch; height:48px; }
  .nav__item { position:static; display:flex; }
  .nav__link { width:auto; min-height:0; padding:0 14px; border-bottom:0; font-size:.9375rem; color:var(--c-ink-700); transition:color .15s var(--ease); }
  .nav__link::after { content:""; position:absolute; left:14px; right:14px; bottom:-1px; height:2px; background:currentColor; transform:scaleX(0); transform-origin:left center; transition:transform .2s var(--ease); }
  .nav__link:hover, .nav__link[aria-current], .has-menu.is-open > .nav__link { color:var(--c-brand-700); }
  .nav__link:hover::after, .nav__link:focus-visible::after, .nav__link[aria-current]::after, .has-menu.is-open > .nav__link::after { transform:scaleX(1); }
  .nav__item.has-menu { flex-wrap:nowrap; align-items:stretch; margin-right:var(--s-2); }
  .nav__item.has-menu::after { content:""; align-self:center; width:1px; height:20px; margin-left:var(--s-3); background:var(--c-line-strong); }
  .nav__link--all { padding-left:0; padding-right:4px; color:var(--c-ink-900); font-weight:700; }
  .nav__link--all::after { left:0; right:4px; }
  .nav__caret { width:24px; min-height:0; border:0; color:var(--c-ink-700); transition:color .15s var(--ease); }
  .nav__caret:hover, .has-menu.is-open > .nav__caret { color:var(--c-brand-700); }
  .nav__caret .icon { width:16px; height:16px; }
  /* 大菜单：分类栏下方、和内容同宽，三列两行：缩略图 + 分类名 + 说明，下面一行子类链接 */
  .nav__menu {
    position:absolute; top:100%; left:32px; right:32px; z-index:2; display:grid; flex:none; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s-3) var(--s-5);
    margin-top:1px; padding:var(--s-4) var(--s-5) var(--s-3); border-radius:0 0 var(--r-lg) var(--r-lg);
    background:var(--c-white); box-shadow:var(--sh-3);
    opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .18s var(--ease), transform .18s var(--ease), visibility 0s linear .18s;
  }
  .has-menu.is-open > .nav__menu { opacity:1; visibility:visible; transform:none; transition:opacity .18s var(--ease), transform .18s var(--ease); }
  .nav__cat { padding:var(--s-2) 0; }
  .nav__cat > a { min-height:72px; gap:var(--s-4); padding:4px 0; }
  .nav__menu-media { width:64px; height:64px; }
  .nav__menu-text strong { font-size:1rem; font-weight:700; }
  .nav__subs { padding-left:calc(64px + var(--s-4)); }
  .nav__menu-all { justify-content:flex-start; min-height:48px; margin-top:var(--s-1); padding:0; border-top:1px solid var(--c-line); border-radius:0; }
}
@media (min-width:1180px) and (hover:hover) {
  .has-menu:hover > .nav__menu { opacity:1; visibility:visible; transform:none; transition:opacity .18s var(--ease), transform .18s var(--ease); }
}

/* 页头搜索面板（<1024 由放大镜按钮打开） */
.search-panel { position:absolute; top:100%; left:0; right:0; padding:20px 0 24px; border-bottom:1px solid var(--c-line); background:var(--c-white); box-shadow:var(--sh-2); }
.search-panel__inner { max-width:760px; margin-inline:auto; }
.search-panel .try-links { margin-top:var(--s-3); }
.search-form { position:relative; display:flex; align-items:stretch; gap:var(--s-2); }
.search-form__field { position:relative; flex:1; min-width:0; }
.search-form__field > .icon { position:absolute; left:16px; top:50%; width:20px; height:20px; margin-top:-10px; color:var(--c-ink-500); pointer-events:none; }
.search-form .input { padding-left:46px; }

/* 05 页脚 -------------------------------------------------------------------- */
.site-footer { background:var(--c-brand-900); color:var(--c-on-dark-muted); font-size:var(--fs-sm); }
.site-footer__main { padding-block:clamp(44px,6vw,72px) clamp(32px,4vw,48px); }
.site-footer a { color:var(--c-on-dark); text-decoration:none; }
.site-footer a:hover { color:var(--c-white); text-decoration:underline; text-underline-offset:3px; }
.site-footer__grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-6) var(--s-5); }
.site-footer__brand { grid-column:1/-1; }
.site-footer__brand p { max-width:30rem; margin:var(--s-4) 0 var(--s-5); }
.site-footer__brand .cluster { gap:var(--s-2); }
.site-footer__brand .btn { color:var(--c-ink-900); }
.site-footer__brand .btn--wa { color:var(--c-wa-ink); }
.site-footer__brand .btn--outline-light { color:var(--c-white); }
.site-footer__contact { grid-column:1/-1; }
.site-footer h3 { margin:0 0 var(--s-3); font-size:.9375rem; font-weight:700; letter-spacing:0; color:var(--c-white); }
.site-footer__list { display:grid; gap:0; margin:0; padding:0; list-style:none; }
.site-footer__list a, .site-footer__list span.site-footer__row { display:inline-flex; align-items:center; gap:10px; min-height:44px; }
.site-footer__list .icon { width:18px; height:18px; color:var(--c-on-dark-muted); }
.site-footer__bottom { border-top:1px solid var(--c-on-dark-line); }
.site-footer__bottom-inner { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s-2) var(--s-5); padding-block:var(--s-5); font-size:var(--fs-xs); color:var(--c-on-dark-muted); }
.site-footer__bottom p { margin:0; }
.site-footer__legal { display:flex; flex-wrap:wrap; gap:0 var(--s-5); margin:0; padding:0; list-style:none; }
.site-footer__legal a { display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:44px; }
.site-footer__proto { flex-basis:100%; max-width:none; padding-top:var(--s-2); border-top:1px dashed var(--c-on-dark-line); color:var(--c-on-dark-muted); }
.site-footer .tbc { background:var(--c-on-dark-fill); color:var(--c-accent-100); }
@media (min-width:768px) {
  .site-footer__grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .site-footer__contact { grid-column:auto; }
  .site-footer__list a, .site-footer__list span.site-footer__row { min-height:34px; }
  .site-footer__legal a { min-height:34px; }
}
@media (min-width:1024px) {
  .site-footer__grid { grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.25fr); gap:var(--s-7) var(--s-6); }
  .site-footer__brand { grid-column:auto; }
}

/* 06 卡片 --------------------------------------------------------------------- */
/* 分类着色占位图（无图时用）：.ph + .ph--meat|veg|frozen|rice|sauce|specialty */
.ph {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; width:100%; height:100%; min-height:96px; padding:var(--s-3);
  background:var(--ph-bg,var(--c-ph-rice)); color:var(--c-ink-700); text-align:center;
}
.ph .icon { width:38px; height:38px; stroke-width:1.5; opacity:.7; }
.ph__label { font-size:var(--fs-xs); font-weight:500; line-height:1.3; color:var(--c-ink-700); }
.ph--meat { --ph-bg:var(--c-ph-meat); } .ph--veg { --ph-bg:var(--c-ph-veg); } .ph--frozen { --ph-bg:var(--c-ph-frozen); }
.ph--rice { --ph-bg:var(--c-ph-rice); } .ph--sauce { --ph-bg:var(--c-ph-sauce); } .ph--specialty { --ph-bg:var(--c-ph-specialty); }
.ph--sm { min-height:0; padding:0; gap:0; }
.ph--sm .icon { width:45%; height:45%; max-width:28px; max-height:28px; }
.ph--sm .ph__label { display:none; }

/* "待 YK 提供真实照片" 虚线框 */
.photo-placeholder {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--s-3); width:100%; aspect-ratio:var(--ratio,4/3); min-height:200px; padding:var(--s-5);
  border:2px dashed var(--c-line-strong); border-radius:var(--r-xl); background:var(--c-cream); color:var(--c-ink-700); text-align:center;
}
.photo-placeholder .icon { width:36px; height:36px; stroke-width:1.5; color:var(--c-ink-500); }
.photo-placeholder p { max-width:22rem; margin:0; font-size:var(--fs-sm); line-height:1.5; }
.section--cream .photo-placeholder { background:var(--c-white); }

/* 产品卡（统一由 YK.productCard() 输出） */
.product-card {
  position:relative; display:flex; flex-direction:column; min-width:0; overflow:hidden; border:1px solid var(--c-line); border-radius:var(--r-lg); background:var(--c-white);
  transition:border-color .2s var(--ease);
}
/* 悬停只有一个信号：容器边框变色；图片不缩放，卡片不上浮、不加阴影 */
@media (hover:hover) { .product-card:hover { border-color:var(--c-brand-600); } }
.product-card:has(a:focus-visible) { outline:3px solid var(--c-brand-600); outline-offset:2px; }
.product-card__media { aspect-ratio:4/3; overflow:hidden; background:var(--c-cream); }
.product-card__media img { width:100%; height:100%; object-fit:cover; }
.product-card__body { display:flex; flex:1; flex-direction:column; min-width:0; padding:14px 16px 16px; }
.product-card__meta { display:flex; align-items:center; justify-content:space-between; gap:var(--s-2); margin-bottom:var(--s-2); }
.product-card__sku { font-size:var(--fs-xs); color:var(--c-ink-500); letter-spacing:.02em; font-variant-numeric:tabular-nums; }
.product-card__title { margin:0; font-size:1rem; font-weight:700; line-height:1.3; letter-spacing:-.005em; }
.product-card__title a { color:inherit; text-decoration:none; }
.product-card__title a::after { content:""; position:absolute; inset:0; z-index:1; }
.product-card__spec { margin:6px 0 0; font-size:var(--fs-xs); line-height:1.45; color:var(--c-ink-500); }
.product-card__actions { position:relative; z-index:2; margin-top:auto; padding-top:14px; }
.product-card__actions .btn { width:100%; }
.product-card.is-added { border-color:var(--c-brand-600); }
.product-card .btn.is-added, .pd .btn.is-added { background:var(--c-brand-50); border-color:var(--c-brand-700); color:var(--c-brand-700); }
.product-card .btn.is-added:hover, .pd .btn.is-added:hover { background:var(--c-brand-100); }

/* 手机：横向卡片（左 104px 方图 + 右信息），便于快速浏览 */
@media (max-width:559.98px) {
  .product-card { display:grid; grid-template-columns:104px minmax(0,1fr); column-gap:12px; padding:10px; align-items:start; }
  .product-card__media { width:104px; height:104px; aspect-ratio:1; border-radius:var(--r-md); }
  .product-card__media .ph { min-height:0; }
  .product-card__media .ph__label { display:none; }
  .product-card__media .ph .icon { width:36px; height:36px; }
  .product-card__body { padding:0; min-height:104px; }
  .product-card__meta { justify-content:flex-start; margin-bottom:4px; }
  .product-card__title { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; font-size:.9375rem; }
  .product-card__spec { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; overflow:hidden; margin-top:4px; }
  .product-card__actions { padding-top:10px; }
  .product-card__actions .btn { width:auto; min-width:0; padding-inline:14px; }
}

/* 分类卡 */
.category-card {
  display:flex; flex-direction:column; min-width:0; overflow:hidden; border:1px solid var(--c-line); border-radius:var(--r-lg); background:var(--c-white); color:inherit; text-decoration:none;
  transition:border-color .2s var(--ease);
}
@media (hover:hover) { .category-card:hover { border-color:var(--c-brand-600); } }
.category-card__media { aspect-ratio:3/2; overflow:hidden; background:var(--c-cream); }
.category-card__media img { width:100%; height:100%; object-fit:cover; }
.category-card__body { display:flex; flex:1; flex-direction:column; padding:12px 14px 14px; }
.category-card__title { font-family:var(--font-head); font-size:.9375rem; font-weight:800; line-height:1.25; letter-spacing:-.005em; }
.category-card__text { display:none; margin:10px 0 0; font-size:var(--fs-sm); line-height:1.5; color:var(--c-ink-700); }
.category-card__meta { margin-top:auto; padding-top:12px; font-size:var(--fs-xs); font-weight:600; color:var(--c-brand-700); }
@media (min-width:560px) {
  .category-card__body { padding:18px 20px 20px; }
  .category-card__title { font-size:1.125rem; }
  .category-card__text { display:block; }
  .category-card__meta { font-size:var(--fs-sm); }
}
.category-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-3); }
@media (min-width:560px) { .category-grid { gap:var(--s-5); } }
@media (min-width:1024px) { .category-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }

/* 特点 / 信息卡：小号线性图标与标题同行（无色块），正文在下方通栏。
   DOM 仍是 图标 → h3 → p → 操作；第 2 行（正文）吃掉多余高度，等高卡片里底部的操作自然对齐到底。 */
.feature, .info-card { display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto 1fr; align-content:start; column-gap:var(--s-3); row-gap:var(--s-3); }
.feature > *, .info-card > * { grid-column:1 / -1; min-width:0; }
.feature__icon, .info-card__icon { grid-column:1; grid-row:1; align-self:start; display:grid; place-items:center; width:1.375rem; height:1.375rem; color:var(--c-brand-700); }
.feature__icon + *, .info-card__icon + * { grid-column:2; grid-row:1; }
.feature__icon .icon, .info-card__icon .icon { width:100%; height:100%; vertical-align:0; }
.feature h3, .info-card h3 { margin:0; font-size:1.125rem; }
.feature p, .info-card p { margin:0; font-size:.9375rem; line-height:1.6; color:var(--c-ink-700); }
.info-card { padding:var(--s-5); border:1px solid var(--c-line); border-radius:var(--r-lg); background:var(--c-white); }
.info-card > :last-child { margin-bottom:0; }
.info-card--soft { border-color:transparent; background:var(--c-cream); }
.section--cream .info-card:not(.info-card--soft) { background:var(--c-white); }

/* 业务线卡（首页两条业务线；UK Wholesale 用 --lg） */
.biz-grid { display:grid; gap:var(--s-5); }
@media (min-width:1024px) { .biz-grid { grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); } }
.biz-card { position:relative; display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--c-line); border-radius:var(--r-xl); background:var(--c-white); transition:border-color .2s var(--ease); }
@media (hover:hover) { .biz-card:hover { border-color:var(--c-brand-600); } }
.biz-card__media { aspect-ratio:16/10; overflow:hidden; background:var(--c-cream); }
.biz-card--lg .biz-card__media { aspect-ratio:16/9; }
.biz-card__media img { width:100%; height:100%; object-fit:cover; }
.biz-card__body { display:flex; flex:1; flex-direction:column; gap:var(--s-3); padding:var(--s-5); }
@media (min-width:768px) { .biz-card__body { padding:var(--s-6); } }
.biz-card h3 { margin:0; font-size:1.375rem; }
.biz-card--lg h3 { font-size:clamp(1.5rem,1.25rem + .8vw,1.875rem); }
.biz-card p { margin:0; color:var(--c-ink-700); }
.biz-card__list { display:flex; flex-wrap:wrap; gap:var(--s-2); margin:0; padding:0; list-style:none; }
.biz-card__list li { padding:5px 12px; border-radius:var(--r-pill); background:var(--c-brand-50); color:var(--c-brand-800); font-size:var(--fs-sm); font-weight:500; }
.biz-card .link-arrow { align-self:flex-start; margin-top:auto; }
.biz-card .link-arrow::after { content:""; position:absolute; inset:0; z-index:1; }

/* 07 首页 ---------------------------------------------------------------------- */
/* Hero：左文案 + 右三图拼贴。DOM 顺序 intro → media → cta（手机上图片紧跟标题） */
/* 首屏底纹（2026-10-26）：六个分类线条图标平铺在暖白底上，品牌深绿 5%（正文下限），底部渐隐，不和下面的信任条硬接。
   只用 CSS 遮罩，不请求图片，不做动画，pointer-events:none */
.hero { position:relative; isolation:isolate; padding-block:clamp(24px,4vw,56px) clamp(32px,4vw,56px); background:var(--c-cream); }
.hero::before {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:var(--c-brand-900); opacity:var(--texture-opacity);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='currentColor' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(40 40) rotate(-12) scale(1.2) translate(-12 -12)'%3E%3Cellipse cx='14.700' cy='9.300' rx='7.200' ry='5' transform='rotate(-45 14.700 9.300)'/%3E%3Cpath d='m9.700 14.300-5 5'/%3E%3Ccircle cx='4' cy='17.800' r='1.700'/%3E%3Ccircle cx='6.200' cy='20' r='1.700'/%3E%3C/g%3E%3Cg transform='translate(160 28) rotate(14) scale(1.2) translate(-12 -12)'%3E%3Cpath d='M11 20.5A7 7 0 0 1 9.8 6.6C15.5 5.5 17 5 19 2.5c1 2 2 4.2 2 8 0 5.500-4.800 10-10 10Z'/%3E%3Cpath d='M2.5 21.500c0-3 1.900-5.400 5.100-6C10 15 12.500 13.500 13.500 12.500'/%3E%3C/g%3E%3Cg transform='translate(206 130) rotate(0) scale(1.2) translate(-12 -12)'%3E%3Cpath d='M2 12h20M12 2v20'/%3E%3Cpath d='m20 16-4-4 4-4M4 8l4 4-4 4M16 4l-4 4-4-4M8 20l4-4 4 4'/%3E%3C/g%3E%3Cg transform='translate(92 120) rotate(-6) scale(1.2) translate(-12 -12)'%3E%3Cpath d='M12 21a9 9 0 0 0 9-9H3a9 9 0 0 0 9 9Z'/%3E%3Cpath d='M7 21h10'/%3E%3Cpath d='m19.500 12 2.500-6'/%3E%3Cpath d='M16.200 3.200c.3.100.8.500.8 1.300s-.9 1.200-1 2c0 .8.300 1.200.7 1.600'/%3E%3Cpath d='M11.200 3.200c.3.100.8.500.7 1.300-.1.800-.9 1.200-1 2 0 .8.300 1.200.7 1.600'/%3E%3Cpath d='M6.200 3.200c.3.100.8.500.8 1.300s-.9 1.200-1 2c0 .8.400 1.200.7 1.600'/%3E%3C/g%3E%3Cg transform='translate(36 190) rotate(10) scale(1.2) translate(-12 -12)'%3E%3Cpath d='M9.500 2.500h5'/%3E%3Cpath d='M10 2.500v4L8 9.500v10a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-10l-2-3v-4'/%3E%3Cpath d='M8 13.500h8'/%3E%3C/g%3E%3Cg transform='translate(150 180) rotate(-10) scale(1.2) translate(-12 -12)'%3E%3Cpath d='m7.500 4.300 9 5.200'/%3E%3Cpath d='M21 8a2 2 0 0 0-1-1.700l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.700l7 4a2 2 0 0 0 2 0l7-4a2 2 0 0 0 1-1.700Z'/%3E%3Cpath d='m3.300 7 8.700 5 8.700-5M12 22V12'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 0 0 / 240px 240px repeat, linear-gradient(currentColor 40%, transparent);
  -webkit-mask-composite:source-in;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='currentColor' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(40 40) rotate(-12) scale(1.2) translate(-12 -12)'%3E%3Cellipse cx='14.700' cy='9.300' rx='7.200' ry='5' transform='rotate(-45 14.700 9.300)'/%3E%3Cpath d='m9.700 14.300-5 5'/%3E%3Ccircle cx='4' cy='17.800' r='1.700'/%3E%3Ccircle cx='6.200' cy='20' r='1.700'/%3E%3C/g%3E%3Cg transform='translate(160 28) rotate(14) scale(1.2) translate(-12 -12)'%3E%3Cpath d='M11 20.5A7 7 0 0 1 9.8 6.6C15.5 5.5 17 5 19 2.5c1 2 2 4.2 2 8 0 5.500-4.800 10-10 10Z'/%3E%3Cpath d='M2.5 21.500c0-3 1.900-5.400 5.100-6C10 15 12.500 13.500 13.500 12.500'/%3E%3C/g%3E%3Cg transform='translate(206 130) rotate(0) scale(1.2) translate(-12 -12)'%3E%3Cpath d='M2 12h20M12 2v20'/%3E%3Cpath d='m20 16-4-4 4-4M4 8l4 4-4 4M16 4l-4 4-4-4M8 20l4-4 4 4'/%3E%3C/g%3E%3Cg transform='translate(92 120) rotate(-6) scale(1.2) translate(-12 -12)'%3E%3Cpath d='M12 21a9 9 0 0 0 9-9H3a9 9 0 0 0 9 9Z'/%3E%3Cpath d='M7 21h10'/%3E%3Cpath d='m19.500 12 2.500-6'/%3E%3Cpath d='M16.200 3.200c.3.100.8.500.8 1.300s-.9 1.200-1 2c0 .8.300 1.200.7 1.600'/%3E%3Cpath d='M11.200 3.200c.3.100.8.500.7 1.300-.1.800-.9 1.200-1 2 0 .8.300 1.200.7 1.600'/%3E%3Cpath d='M6.200 3.200c.3.100.8.500.8 1.300s-.9 1.200-1 2c0 .8.400 1.200.7 1.600'/%3E%3C/g%3E%3Cg transform='translate(36 190) rotate(10) scale(1.2) translate(-12 -12)'%3E%3Cpath d='M9.500 2.500h5'/%3E%3Cpath d='M10 2.500v4L8 9.500v10a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-10l-2-3v-4'/%3E%3Cpath d='M8 13.500h8'/%3E%3C/g%3E%3Cg transform='translate(150 180) rotate(-10) scale(1.2) translate(-12 -12)'%3E%3Cpath d='m7.500 4.300 9 5.200'/%3E%3Cpath d='M21 8a2 2 0 0 0-1-1.700l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.700l7 4a2 2 0 0 0 2 0l7-4a2 2 0 0 0 1-1.700Z'/%3E%3Cpath d='m3.300 7 8.700 5 8.700-5M12 22V12'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 0 0 / 240px 240px repeat, linear-gradient(currentColor 40%, transparent);
  mask-composite:intersect;
}
.hero__inner { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s-5); }
.hero__intro .lead { max-width:34rem; margin-bottom:0; }
.hero h1 { margin-bottom:var(--s-4); }
.hero__actions { display:flex; flex-wrap:wrap; gap:var(--s-3); }
.hero__actions .btn { flex:1 1 200px; }
.hero__media { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s-2); }
.hero__tile { position:relative; display:block; overflow:hidden; border-radius:var(--r-lg); background:var(--c-brand-100); aspect-ratio:3/4; isolation:isolate; text-decoration:none; }
.hero__tile img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* 悬停只有一个信号：压在照片上的内缘白色描边（伪元素盖在图片之上）；照片本身不缩放 */
.hero__tile::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; transition:box-shadow .2s var(--ease); }
@media (hover:hover) { .hero__tile:hover::after { box-shadow:inset 0 0 0 3px var(--c-white); } }
.hero__label {
  position:absolute; left:8px; bottom:8px; z-index:1; display:inline-block; max-width:calc(100% - 16px); padding:6px 9px;
  border-radius:var(--r-sm); background:var(--c-white); color:var(--c-ink-900); font-family:var(--font-head); font-size:.75rem; font-weight:800; line-height:1.2;
}
.hero__search { margin-top:var(--s-5); }
.hero__cta { margin-top:var(--s-2); }

/* 首屏搜索：普通的方角输入框（左侧放大镜），右侧是不填底色的文字按钮 "Search"，首屏只保留一个实心主按钮 */
.hero-search {
  display:flex; align-items:center; gap:var(--s-3); min-height:56px; padding-left:var(--s-4); border:1.5px solid var(--c-line-strong); border-radius:var(--r-md); background:var(--c-white);
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.hero-search:focus-within { border-color:var(--c-brand-600); box-shadow:0 0 0 3px var(--c-focus); }
.hero-search > .icon { flex:none; width:20px; height:20px; color:var(--c-ink-500); }
.hero-search input { flex:1; min-width:0; padding:var(--s-3) 0; border:0; outline:0; background:transparent; font-size:1rem; color:var(--c-ink-900); text-overflow:ellipsis; }
.hero-search input::placeholder { color:var(--c-ink-500); opacity:1; }
.hero-search__btn {
  flex:none; align-self:stretch; min-height:44px; padding:0 var(--s-5); border:0; border-left:1px solid var(--c-line); border-radius:0 var(--r-md) var(--r-md) 0;
  background:transparent; color:var(--c-brand-700); font-family:var(--font-head); font-size:.9375rem; font-weight:700; cursor:pointer; transition:color .15s var(--ease);
}
.hero-search__btn:hover { color:var(--c-brand-800); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px; }
.hero-search__btn:active { color:var(--c-brand-900); }
/* 搜索示例写成一句话里的文字链接（不用"Popular"胶囊：没有搜索数据，不说热门） */
.try-links { margin:0; font-size:var(--fs-sm); line-height:1.6; color:var(--c-ink-500); }
.try-links a { color:var(--c-ink-700); text-decoration:underline; text-decoration-color:var(--c-line-strong); text-decoration-thickness:1px; text-underline-offset:3px; transition:color .15s var(--ease); }
.try-links a:hover { color:var(--c-brand-700); text-decoration-color:currentColor; }
.hero__try { margin-top:var(--s-3); }
@media (max-width:559.98px) {
  .hero-search { gap:var(--s-2); padding-left:var(--s-3); }
  .hero-search__btn { padding:0 var(--s-4); }
}
/* 320 宽的小屏：右边已有 "Search" 文字按钮，去掉左侧放大镜，给占位文字留出位置 */
@media (max-width:359.98px) { .hero-search > .icon { display:none; } }

@media (min-width:560px) {
  .hero__media { grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); grid-template-rows:minmax(0,1fr) minmax(0,1fr); height:clamp(340px,56vw,460px); gap:var(--s-3); }
  .hero__tile { aspect-ratio:auto; }
  .hero__tile--lg { grid-row:1 / span 2; }
  .hero__label { left:14px; bottom:14px; padding:8px 12px; font-size:.875rem; }
  .hero__actions .btn { flex:0 0 auto; }
}
@media (min-width:560px) and (max-width:1279.98px) { .hero__label { padding:6px 10px; font-size:.8125rem; } }
@media (min-width:1024px) {
  .hero__inner { grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); grid-template-rows:minmax(0,1fr) auto auto minmax(0,1fr); column-gap:clamp(40px,5vw,72px); row-gap:0; }
  .hero__intro { grid-column:1; grid-row:2; }
  .hero__cta { grid-column:1; grid-row:3; margin-top:var(--s-5); }
  .hero__media { grid-column:2; grid-row:1 / -1; height:clamp(460px,40vw,580px); }
  .hero__search { margin-top:var(--s-6); }
}

/* 信任条：接在首屏暖白底上的四条事实（dl > div > dt + dd），上方一条内容宽细线，读起来像首屏的落款；
   不放图标、不加竖线。手机 1 列，≥560 2 列，≥1024 4 列 */
.trust-strip { padding-bottom:clamp(40px,5vw,64px); background:var(--c-cream); }
.trust-strip__list { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s-5) var(--s-6); margin:0; padding-top:clamp(24px,3vw,36px); border-top:1px solid var(--c-line-strong); }
.trust-strip__item { min-width:0; }
.trust-strip dt { font-family:var(--font-head); font-size:1.125rem; font-weight:800; line-height:1.25; letter-spacing:-.01em; color:var(--c-brand-800); }
.trust-strip dd { max-width:34ch; margin:var(--s-1) 0 0; font-size:var(--fs-sm); line-height:1.55; color:var(--c-ink-700); text-wrap:pretty; }
@media (min-width:560px) { .trust-strip__list { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:var(--s-6); } }
@media (min-width:1024px) {
  .trust-strip__list { grid-template-columns:repeat(4,minmax(0,1fr)); column-gap:var(--s-7); }
  .trust-strip dt { font-size:1.25rem; }
  .trust-strip dd { font-size:.9375rem; }
}

/* 精选产品橱窗（首页 data-range，page-home.js 生成）：分类标签 + 每类一页，写法同普通食品站的分类产品区。
   标签是一行 Manrope 大字：未选中浅色，悬停和选中变深，选中再加 3px 品牌绿下划线；没有底线、没有底色，窄屏横向滚动、不换行。
   一页 = 产品网格（≥1024 4 列：有图的够 7 个放两行 8 个，不够放一行 4 个；<1024 只显示前 4 个，560 到 1023 两列，手机横向卡片）
   + 下面一行：按子类浏览的文字链接（同 .try-links 写法）和 View all。不做深色说明栏、不做带数字的细线列表 */
.range__fallback { display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-5); margin:0; padding:0; list-style:none; }
.range__fallback a { display:inline-flex; align-items:center; min-height:44px; font-family:var(--font-head); font-weight:700; color:var(--c-brand-700); }
.range__tabs { position:relative; display:flex; gap:var(--s-3); margin:0 -20px var(--s-6); padding:var(--s-1) 20px; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; }
.range__tabs::-webkit-scrollbar { display:none; }
/* 标签是带分类小圆图的胶囊：未选中白底细边框，悬停边框变绿（只有这一个信号），选中深绿底白字、小图加一圈白边 */
.range__tab {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-3); flex:none; min-height:52px; padding:6px var(--s-5); border:1px solid var(--c-line-strong); border-radius:var(--r-pill);
  background:var(--c-white); color:var(--c-ink-700); font-family:var(--font-head); font-size:.9375rem; font-weight:700; line-height:1.2; white-space:nowrap; cursor:pointer;
  transition:border-color .15s var(--ease), background-color .15s var(--ease), color .15s var(--ease);
}
/* 有小图时左边只留 6px，小图贴着胶囊的圆边；没有小图时左右对称、文字居中 */
.range__tab:has(.range__tab-img) { padding-left:6px; }
.range__tab-img { flex:none; width:40px; height:40px; overflow:hidden; border-radius:50%; background:var(--c-cream); }
.range__tab-img img { display:block; width:100%; height:100%; object-fit:cover; }
.range__tab:hover { border-color:var(--c-brand-600); }
.range__tab[aria-selected="true"] { border-color:var(--c-brand-800); background:var(--c-brand-800); color:var(--c-white); }
.range__tab[aria-selected="true"] .range__tab-img { box-shadow:0 0 0 2px var(--c-white); }
.range__tab:focus-visible { outline-offset:2px; }
.range__panel[hidden] { display:none; }
/* 产品下面的工具条：白底圆角一条，左 "Browse by type"，中间子类胶囊链接（悬停只变边框），右边描边按钮 View all；手机竖排、按钮占满一行 */
.range__foot { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-3) var(--s-5); margin-top:var(--s-6); padding:var(--s-4) var(--s-5); border:1px solid var(--c-line); border-radius:var(--r-lg); background:var(--c-white); }
.range__types-label { flex:none; margin:0; font-family:var(--font-head); font-size:.9375rem; font-weight:700; color:var(--c-ink-900); }
.range__types { display:flex; flex:1 1 20rem; flex-wrap:wrap; gap:var(--s-2); margin:0; padding:0; list-style:none; }
.range__type {
  display:inline-flex; align-items:center; min-height:40px; padding:0 var(--s-4); border:1px solid var(--c-line-strong); border-radius:var(--r-pill);
  color:var(--c-ink-700); font-size:var(--fs-sm); font-weight:600; text-decoration:none; white-space:nowrap; transition:border-color .15s var(--ease);
}
.range__type:hover { border-color:var(--c-brand-600); }
.range__foot .range__all { flex:none; margin-left:auto; }
@media (max-width:559.98px) {
  .range__foot { padding:var(--s-4); }
  .range__foot .range__all { width:100%; margin-left:0; }
}
@media (max-width:1023.98px) { .range__grid > :nth-child(n+5) { display:none; } }
@media (min-width:768px) { .range__tabs { margin-inline:-28px; padding-inline:28px; } }
@media (min-width:1024px) {
  .range__tabs { margin-inline:0; padding-inline:0; }
  .range__grid.product-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
}

/* 产品专题横幅（首页，精选产品下面）：大图一张 + 小图两张，照片铺满，底部深绿渐变上压白字。
   不写价格、折扣和促销（CLAUDE.md 第 3 节），只是分类 / 主题入口。整张可点（文字链接的 ::after 盖满整张），
   悬停只有一个信号：一圈内白边（同首屏拼图），照片不缩放。≥1024 大图占左 7/12、两张小图上下叠在右边；768 到 1023 大图通栏、小图两列；手机竖排 */
.promo { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s-4); }
.promo__item { position:relative; isolation:isolate; display:flex; align-items:flex-end; min-height:300px; margin:0; overflow:hidden; border-radius:var(--r-xl); background:var(--c-brand-900); color:var(--c-white); }
.promo__item img { position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; }
.promo__item::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg,var(--c-scrim-strong) 0%,var(--c-scrim) 38%,transparent 78%); }
.promo__item::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; transition:box-shadow .2s var(--ease); }
@media (hover:hover) { .promo__item:hover::after { box-shadow:inset 0 0 0 3px var(--c-white); } }
.promo__item:has(a:focus-visible) { outline:3px solid var(--c-brand-600); outline-offset:3px; }
.promo__body { display:flex; flex-direction:column; align-items:flex-start; gap:var(--s-2); max-width:34rem; padding:var(--s-5); }
.promo__title { margin:0; font-size:clamp(1.375rem,1.15rem + .8vw,1.875rem); line-height:1.15; color:var(--c-white); text-wrap:balance; }
.promo__text { margin:0; font-size:var(--fs-sm); line-height:1.55; color:var(--c-on-dark); }
.promo__link { margin-top:var(--s-2); font-family:var(--font-head); font-weight:700; color:var(--c-white); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; }
.promo__link::after { content:""; position:absolute; inset:0; z-index:1; }
.promo__link:focus-visible { outline:0; }
@media (min-width:768px) {
  .promo { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-5); }
  .promo__item--lg { grid-column:1 / -1; min-height:400px; }
}
@media (min-width:1024px) {
  .promo { grid-template-columns:minmax(0,7fr) minmax(0,5fr); grid-template-rows:repeat(2,minmax(268px,auto)); }
  .promo__item--lg { grid-column:1; grid-row:1 / span 2; min-height:560px; }
  .promo__item--lg .promo__body { padding:var(--s-7); }
  .promo__item--lg .promo__title { font-size:clamp(2rem,1.4rem + 1.6vw,2.75rem); }
  .promo__item--lg .promo__text { font-size:var(--fs-lead); }
  .promo__body { padding:var(--s-6); }
}

/* 询价步骤（不编号）：每步 h3 + 一句说明，步骤之间一条通长细线；先后顺序由 <ol> 和上下次序表达。
   .steps-split：标题与按钮一行（桌面按钮靠右），下面左边步骤、右边询价清单示例 .enq-sample；
   手机依次为标题、步骤、示例、按钮。--across：没有示例时（国际贸易页）四步横排，平板 2 × 2，手机竖排 */
.steps-split { display:grid; grid-template-columns:minmax(0,1fr); grid-template-areas:"head" "list" "visual" "actions"; row-gap:var(--s-6); }
.steps-split__head { grid-area:head; }
.steps-split__head h2 { margin:0; }
.steps-split > .steps { grid-area:list; }
.steps-split > .enq-sample { grid-area:visual; }
.steps-split__actions { grid-area:actions; }
.steps { margin:0; padding:0; list-style:none; border-top:1px solid var(--c-line); }
.steps__item { padding-block:var(--s-5); border-bottom:1px solid var(--c-line); }
.steps__item h3 { margin:0 0 var(--s-1); font-size:1.1875rem; line-height:1.3; }
.steps__item p { max-width:var(--measure); margin:0; color:var(--c-ink-700); }
@media (min-width:768px) {
  .steps--across { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:var(--s-6); border-top:0; }
  .steps--across .steps__item { padding-block:var(--s-5) var(--s-6); border-top:1px solid var(--c-line-strong); border-bottom:0; }
}
@media (min-width:1024px) {
  .steps-split { grid-template-columns:minmax(0,5fr) minmax(0,7fr); grid-template-areas:"head actions" "list visual"; column-gap:var(--s-8); row-gap:var(--s-7); align-items:start; }
  .steps-split__actions { justify-self:end; align-self:end; }
  .steps-split > .enq-sample { align-self:stretch; }
  .steps-split--across { grid-template-columns:minmax(0,1fr); grid-template-areas:"head" "list"; }
  .steps--across { grid-template-columns:repeat(4,minmax(0,1fr)); column-gap:var(--s-6); }
  .steps__item { padding-block:var(--s-6); }
  .steps--across .steps__item { padding-block:var(--s-5) 0; }
}

/* 询价清单示例（静态示意，不可操作）：暖白底板上一张白色清单卡，照抄清单抽屉的信息（图、英文名、中文名、SKU、箱数）。
   不放按钮，避免被当成真的清单去点；下方一行小字说明是示例 */
.enq-sample { display:flex; flex-direction:column; justify-content:center; margin:0; padding:clamp(16px,3.5vw,48px); border-radius:var(--r-xl); background:var(--c-cream); }
.enq-sample__card { width:100%; max-width:36rem; margin-inline:auto; overflow:hidden; border:1px solid var(--c-line); border-radius:var(--r-lg); background:var(--c-white); box-shadow:var(--sh-2); }
.enq-sample__head { display:flex; align-items:baseline; justify-content:space-between; gap:var(--s-3); margin:0; padding:var(--s-4) var(--s-5); border-bottom:1px solid var(--c-line); }
.enq-sample__title { font-family:var(--font-head); font-size:1.0625rem; font-weight:800; }
.enq-sample__count { font-size:var(--fs-sm); color:var(--c-ink-500); }
.enq-sample__list { margin:0; padding:0 var(--s-5); list-style:none; }
.enq-sample__item { display:grid; grid-template-columns:48px minmax(0,1fr) auto; align-items:center; column-gap:var(--s-3); padding-block:var(--s-3); }
.enq-sample__item + .enq-sample__item { border-top:1px solid var(--c-line); }
.enq-sample__item img { width:48px; height:48px; border-radius:var(--r-md); object-fit:cover; background:var(--c-cream); }
.enq-sample__name { min-width:0; }
.enq-sample__name strong { display:block; overflow:hidden; font-family:var(--font-head); font-size:.9375rem; font-weight:700; line-height:1.3; text-overflow:ellipsis; white-space:nowrap; }
.enq-sample__name small { display:block; font-size:var(--fs-xs); line-height:1.35; color:var(--c-ink-500); font-variant-numeric:tabular-nums; }
.enq-sample__qty { font-family:var(--font-head); font-size:.9375rem; font-weight:700; white-space:nowrap; color:var(--c-brand-800); }
.enq-sample__cap { margin:var(--s-3) auto 0; font-size:var(--fs-xs); color:var(--c-ink-500); text-align:center; }
@media (max-width:559.98px) { .enq-sample__name strong { white-space:normal; } }
@media (min-width:560px) {
  .enq-sample__item { grid-template-columns:64px minmax(0,1fr) auto; column-gap:var(--s-4); padding-block:var(--s-4); }
  .enq-sample__item img { width:64px; height:64px; }
}

/* 客户区块（纯文字品牌名，上线前须客户授权）：中餐菜品照片做底、压深绿遮罩（只烘托餐厅氛围，不代表这些客户的菜）。
   内容居中：标题、一句说明；品牌名白色大字排成一行（上下各一条细线框住，窄屏自动换行、名字内部不断开），
   下面浅色 "and many independent restaurants"、描边按钮和授权说明。不做格子墙、不模仿各家 logo 字体 */
.section--clients {
  background-color:var(--c-brand-900); color:var(--c-on-dark);
  background-image:linear-gradient(var(--c-scrim-soft),var(--c-scrim-strong)),url("https://images.unsplash.com/photo-1780375578961-ef93d67592a8?auto=format&fit=crop&w=1800&h=760&q=70");
  background-position:center; background-size:cover;
}
.clients { max-width:64rem; margin-inline:auto; text-align:center; }
.clients h2 { margin:0 0 var(--s-3); }
.clients .lead { margin:0 auto var(--s-6); }
.clients__list { display:flex; flex-wrap:wrap; justify-content:center; gap:var(--s-3) var(--s-7); margin:0; padding:var(--s-5) 0; border-block:1px solid var(--c-on-dark-line-strong); list-style:none; }
.clients__list li { font-family:var(--font-head); font-size:clamp(1.375rem,1.05rem + 1.2vw,2.25rem); font-weight:800; line-height:1.2; letter-spacing:-.02em; color:var(--c-white); white-space:nowrap; }
.clients__more { margin:var(--s-4) auto 0; font-family:var(--font-head); font-size:var(--fs-lead); font-weight:600; color:var(--c-on-dark-muted); }
/* 有授权 logo 时（config.js 的 clientLogos）：统一 40px 高、白色单色，在深色照片底上整齐 */
.clients__list .is-logo { display:flex; align-items:center; }
.clients__logo { display:block; width:auto; max-width:180px; height:40px; object-fit:contain; filter:brightness(0) invert(1); opacity:.92; }
.clients__foot { display:flex; justify-content:center; margin-top:var(--s-6); }
.clients__note { justify-content:center; margin:var(--s-4) 0 0; }
.section--dark .proto-note { color:var(--c-on-dark-muted); }
.section--dark .proto-note .icon { color:var(--c-on-dark-muted); }
@media (max-width:559.98px) { .clients__list { gap:var(--s-3) var(--s-5); } }

/* 图文左右分栏（默认文左图右；--reverse 图左文右） */
.split { display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(28px,5vw,56px); align-items:center; }
.split__body > :last-child { margin-bottom:0; }
.split__photo { overflow:hidden; border-radius:var(--r-xl); background:var(--c-cream); }
.split__photo img { display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; }
@media (min-width:1024px) {
  .split { grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(48px,6vw,88px); }
  .split--reverse .split__media { order:-1; }
}

/* 行动号召条（放在 .section--dark 里） */
.cta-band { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s-5); align-items:center; }
.cta-band h2 { margin-bottom:var(--s-3); }
.cta-band p { max-width:40rem; margin:0; color:var(--c-on-dark); }
.cta-band__actions { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-3) var(--s-4); }
.cta-band__actions .btn { flex:1 1 200px; }
.cta-band__link { display:inline-flex; align-items:center; gap:8px; min-height:44px; color:var(--c-white); font-weight:600; text-decoration:underline; text-underline-offset:4px; }
@media (min-width:768px) { .cta-band__actions .btn { flex:0 0 auto; } }
@media (min-width:1024px) { .cta-band { grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:var(--s-8); } .cta-band__actions { justify-content:flex-end; } }
/* 底部询价条加背景图：深绿遮罩压在一张火锅俯拍上（照片只作底纹，原型占位，正式站换 YK 自己的照片）；文字一侧遮罩更深 */
.section--cta { 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) 40%,var(--c-scrim-soft) 100%),url("https://images.unsplash.com/photo-1614104030967-5ca61a54247b?auto=format&fit=crop&w=1800&h=640&q=70"); background-position:center; background-size:cover; }
@media (max-width:1023.98px) { .section--cta { background-image:linear-gradient(var(--c-scrim-strong),var(--c-scrim-strong)),url("https://images.unsplash.com/photo-1614104030967-5ca61a54247b?auto=format&fit=crop&w=1000&h=900&q=70"); } }

/* 08 内页组件 ------------------------------------------------------------------ */
.page-hero { padding-block:clamp(28px,4.5vw,64px) clamp(32px,5vw,72px); border-bottom:1px solid var(--c-line); background:var(--c-cream); }
.page-hero h1 { margin-bottom:var(--s-3); font-size:clamp(2rem,1.45rem + 2.2vw,3.25rem); }
.page-hero .lead { margin-bottom:0; }
.page-hero__actions { display:flex; flex-wrap:wrap; gap:var(--s-3); margin-top:var(--s-5); }
.page-hero__media { overflow:hidden; border-radius:var(--r-xl); background:var(--c-brand-100); aspect-ratio:4/3; }
.page-hero__media img { width:100%; height:100%; object-fit:cover; }
.page-hero--split .page-hero__inner { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s-6); align-items:center; }
@media (min-width:1024px) { .page-hero--split .page-hero__inner { grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:var(--s-8); } }

.breadcrumb { display:flex; flex-wrap:wrap; align-items:center; gap:0 var(--s-2); margin:0 0 var(--s-4); padding:0; list-style:none; font-size:var(--fs-sm); color:var(--c-ink-500); }
.breadcrumb li { display:inline-flex; align-items:center; gap:var(--s-2); }
.breadcrumb li + li::before { content:""; width:6px; height:6px; margin-right:2px; border-top:1.5px solid var(--c-line-strong); border-right:1.5px solid var(--c-line-strong); transform:rotate(45deg); }
.breadcrumb a { display:inline-flex; align-items:center; min-height:32px; min-width:44px;color:var(--c-ink-700); text-decoration:none; }
.breadcrumb a:hover { color:var(--c-brand-700); text-decoration:underline; text-underline-offset:3px; }
.breadcrumb [aria-current] { color:var(--c-ink-900); font-weight:600; }
@media (max-width:767.98px) { .breadcrumb a { min-height:44px; } }

/* 左右两列定义表：<dl class="info-table"><div class="info-table__row"><dt/><dd/></div>… */
.info-table { margin:0; border-top:1px solid var(--c-line); }
.info-table__row { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s-1) var(--s-6); padding:var(--s-4) 0; border-bottom:1px solid var(--c-line); }
.info-table dt { font-weight:600; color:var(--c-ink-900); }
.info-table dd { margin:0; color:var(--c-ink-700); }
@media (min-width:768px) { .info-table__row { grid-template-columns:minmax(160px,.8fr) minmax(0,2fr); } }

/* 清单：只有一个裸的线性勾号（没有底色圆），勾号对齐第一行文字的垂直中线 */
.checklist { display:grid; gap:var(--s-3); margin:0; padding:0; list-style:none; }
.checklist li { position:relative; padding-left:var(--s-5); color:var(--c-ink-700); }
.checklist li::before { content:""; position:absolute; left:0; top:.3em; width:16px; height:16px; background:var(--icon-check) center / contain no-repeat; }
.checklist strong { color:var(--c-ink-900); }
@media (min-width:768px) { .checklist--cols { grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:var(--s-6); } }

.timeline { position:relative; margin:0; padding:0 0 0 32px; list-style:none; }
.timeline::before { content:""; position:absolute; left:8px; top:8px; bottom:8px; width:2px; background:var(--c-line-strong); }
.timeline__item { position:relative; padding-bottom:var(--s-6); }
.timeline__item:last-child { padding-bottom:0; }
.timeline__item::before { content:""; position:absolute; left:-32px; top:4px; width:18px; height:18px; border:4px solid var(--c-brand-700); border-radius:50%; background:var(--c-white); }
.timeline__time { margin:0 0 2px; font-family:var(--font-head); font-size:var(--fs-sm); font-weight:700; letter-spacing:0; font-variant-numeric:tabular-nums; color:var(--c-accent-700); }
.timeline__item h3 { margin:0 0 var(--s-1); font-size:1.125rem; }
.timeline__item p { margin:0; color:var(--c-ink-700); }

.faq { border-top:1px solid var(--c-line); }
.faq details { border-bottom:1px solid var(--c-line); }
.faq summary { display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); min-height:60px; padding:var(--s-4) 0; font-family:var(--font-head); font-size:1.0625rem; font-weight:700; line-height:1.35; list-style:none; cursor:pointer; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary:hover { color:var(--c-brand-700); }
.faq summary::after {
  content:""; flex:none; width:22px; height:22px; background:var(--c-brand-700); transition:transform .25s var(--ease);
  -webkit-mask:var(--mask-plus) center / contain no-repeat;
  mask:var(--mask-plus) center / contain no-repeat;
}
.faq details[open] summary::after { transform:rotate(45deg); }
.faq__body, .faq details > :not(summary) { max-width:var(--measure); padding-bottom:var(--s-5); margin-bottom:0; color:var(--c-ink-700); }

.gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-3); }
.gallery__item { position:relative; margin:0; overflow:hidden; border-radius:var(--r-lg); background:var(--c-cream); aspect-ratio:4/3; }
.gallery__item img { width:100%; height:100%; object-fit:cover; }
.gallery__item--wide { grid-column:span 2; aspect-ratio:auto; }
.gallery__caption { position:absolute; left:0; right:0; bottom:0; padding:var(--s-2) var(--s-3); background:var(--c-scrim); color:var(--c-white); font-size:var(--fs-xs); line-height:1.4; }
@media (min-width:768px) {
  .gallery { grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s-4); }
  .gallery__item--tall { grid-row:span 2; aspect-ratio:auto; }
}

/* 09 产品列表 / 详情 ------------------------------------------------------------ */
/* 列表页骨架：≥1024 左筛选栏 + 右结果；以下变为顶部 chips + Filters 抽屉 */
.catalog { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s-5); }
.catalog__top { display:flex; align-items:center; gap:var(--s-3); min-width:0; }
.catalog__cats { flex:1; min-width:0; }
@media (max-width:767.98px) { .catalog__cats.chips--scroll { margin-right:0; padding-right:var(--s-2); } }
.catalog__filter-btn { flex:none; }
.catalog__main { min-width:0; }
/* 筛选栏：默认是结果上方的普通区块（没有 JS 也能看到）；<1024 且有 JS（html.js）时才收成左侧抽屉 */
.catalog__filters { display:flex; flex-direction:column; background:var(--c-white); }
@media (max-width:1023.98px) {
  .js .catalog__filters {
    position:fixed; top:0; bottom:0; left:0; z-index:var(--z-drawer); width:min(340px,100%); box-shadow:var(--sh-3);
    transform:translateX(-100%); visibility:hidden; transition:transform .3s var(--ease), visibility 0s linear .3s;
  }
  .js .catalog__filters.is-open { transform:none; visibility:visible; transition:transform .3s var(--ease); }
  html:not(.js) .catalog__filter-btn, html:not(.js) .catalog__filters-head .icon-btn, html:not(.js) .catalog__filters-foot { display:none; }
}
.catalog__filters-head { display:flex; flex:none; align-items:center; justify-content:space-between; height:var(--header-h); padding:0 12px 0 20px; border-bottom:1px solid var(--c-line); }
.catalog__filters-head h2 { margin:0; font-size:1.125rem; }
.catalog__filters-body { flex:1; padding:0 20px; overflow-y:auto; overscroll-behavior:contain; }
.catalog__filters-foot { display:flex; flex:none; gap:var(--s-3); padding:var(--s-4) 20px; border-top:1px solid var(--c-line); }
.catalog__filters-foot .btn { flex:1; }
@media (min-width:1024px) {
  .catalog { grid-template-columns:268px minmax(0,1fr); gap:clamp(32px,4vw,56px); align-items:start; }
  .catalog__top, .catalog__filters-head, .catalog__filters-foot { display:none; }
  .catalog__filters { position:sticky; top:calc(var(--sticky-h) + 24px); max-height:calc(100vh - var(--sticky-h) - 48px); background:transparent; }
  .catalog__filters-body { padding:0 var(--s-2) 0 0; }
}

.filter-group { padding:var(--s-4) 0 var(--s-3); border-top:1px solid var(--c-line); }
.filter-group:first-child { border-top:0; }
.filter-group__title { margin:0 0 var(--s-2); font-family:var(--font-head); font-size:var(--fs-sm); font-weight:700; letter-spacing:0; color:var(--c-ink-700); }
.filter-group__list { display:grid; margin:0; padding:0; list-style:none; }
.filter-group .checkbox { margin-inline:calc(-1 * var(--s-2)); padding-inline:var(--s-2); border-radius:var(--r-md); }
.filter-group .checkbox:hover { background:var(--c-brand-50); }

.results-bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s-3) var(--s-5); margin-bottom:var(--s-4); }
.results-bar__count { margin:0; font-size:var(--fs-sm); color:var(--c-ink-700); }
.results-bar__count strong { font-family:var(--font-head); font-size:1.0625rem; font-weight:800; color:var(--c-ink-900); }
.results-bar__sort { display:flex; align-items:center; gap:var(--s-2); font-size:var(--fs-sm); color:var(--c-ink-700); }
.results-bar__sort .select { width:auto; min-height:44px; padding-block:0; font-size:.9375rem; }
.results-bar__active { flex-basis:100%; display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2); }
.chip--removable { padding-right:10px; background:var(--c-brand-50); border-color:var(--c-brand-100); color:var(--c-brand-800); }
.chip--removable .icon { width:16px; height:16px; }

/* 产品网格：3 列 → 2 列 → 手机横向卡片单列（--4：首页精选，桌面 4 列） */
.product-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s-3); }
@media (min-width:560px) { .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-4); } }
@media (min-width:1024px) {
  .product-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s-5); }
  .product-grid--4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (min-width:1024px) and (max-width:1279.98px) { .catalog .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }

.empty-state { display:flex; flex-direction:column; align-items:center; gap:var(--s-3); padding:var(--s-8) var(--s-5); border:1px dashed var(--c-line-strong); border-radius:var(--r-xl); background:var(--c-cream); text-align:center; }
.empty-state > .icon { width:40px; height:40px; color:var(--c-ink-500); } /* 只管顶部大图标，不影响按钮/搜索框里的图标 */
.empty-state h3, .empty-state p { margin:0; }
.empty-state p { max-width:30rem; color:var(--c-ink-700); }
.empty-state .cluster { justify-content:center; margin-top:var(--s-2); }

/* 产品详情：左图右信息 */
.pd { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s-6); }
.pd__media { overflow:hidden; border-radius:var(--r-xl); background:var(--c-cream); aspect-ratio:var(--ratio,4/3); }
.pd__media img { width:100%; height:100%; object-fit:cover; }
.pd__media .ph .icon { width:56px; height:56px; }
.pd__meta { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-3); margin-bottom:var(--s-3); }
.pd__sku { font-size:var(--fs-sm); color:var(--c-ink-500); font-variant-numeric:tabular-nums; }
.pd h1 { margin-bottom:var(--s-2); font-size:clamp(1.75rem,1.35rem + 1.6vw,2.5rem); }
.pd__desc { max-width:36rem; color:var(--c-ink-700); }
.pd__buy { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-3); margin:var(--s-5) 0 var(--s-4); }
.pd__buy .btn { flex:1 1 200px; }
.pd__note { margin:var(--s-3) 0 0; font-size:var(--fs-xs); color:var(--c-ink-500); }
@media (min-width:1024px) {
  .pd { grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:var(--s-8); align-items:start; }
  .pd__media { position:sticky; top:calc(var(--sticky-h) + 24px); }
}

.spec-list { margin:0; border-top:1px solid var(--c-line); }
.spec-list__row { display:grid; grid-template-columns:minmax(104px,38%) minmax(0,1fr); gap:var(--s-4); padding:12px 0; border-bottom:1px solid var(--c-line); font-size:.9375rem; }
.spec-list dt { color:var(--c-ink-500); }
.spec-list dd { margin:0; font-weight:500; color:var(--c-ink-900); }

.price-note { display:flex; align-items:flex-start; gap:var(--s-3); padding:var(--s-3) var(--s-4); border:1px solid var(--c-brand-100); border-radius:var(--r-md); background:var(--c-brand-50); color:var(--c-brand-800); font-size:var(--fs-sm); line-height:1.5; font-variant-numeric:tabular-nums; }
.price-note .icon { width:20px; height:20px; margin-top:1px; color:var(--c-brand-700); }
.price-note strong { display:block; font-family:var(--font-head); font-size:.9375rem; font-weight:800; font-variant-numeric:tabular-nums; }

/* 数量步进器：− 输入框 + */
.qty { display:inline-flex; align-items:stretch; overflow:hidden; border:1.5px solid var(--c-line-strong); border-radius:var(--r-md); background:var(--c-white); }
.qty__btn { display:grid; place-items:center; width:44px; min-height:44px; padding:0; border:0; background:transparent; color:var(--c-ink-900); transition:background-color .15s var(--ease); }
.qty__btn:hover { background:var(--c-brand-50); color:var(--c-brand-700); }
.qty__btn .icon { width:18px; height:18px; vertical-align:0; }
.qty__input { width:56px; min-height:44px; padding:0; border:0; border-inline:1px solid var(--c-line); border-radius:0; background:transparent; font-family:var(--font-body); font-size:1rem; font-weight:600; text-align:center; -moz-appearance:textfield; appearance:textfield; }
.qty__input::-webkit-outer-spin-button, .qty__input::-webkit-inner-spin-button { margin:0; -webkit-appearance:none; }
.qty__input:focus-visible { outline-offset:-3px; }
.qty--sm .qty__btn { width:36px; min-height:36px; }
.qty--sm .qty__input { width:44px; min-height:36px; font-size:1rem; } /* ≥16px，避免 iOS 聚焦时自动放大 */
@media (max-width:767.98px), (pointer:coarse) { .qty--sm .qty__btn { width:44px; min-height:44px; } .qty--sm .qty__input { min-height:44px; } }

/* 10 表单 ----------------------------------------------------------------------- */
.form { display:grid; gap:var(--s-5); }
.form-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s-4) var(--s-5); }
.form-grid .field--full { grid-column:1 / -1; }
@media (min-width:768px) { .form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.field { display:flex; flex-direction:column; gap:6px; min-width:0; margin:0; padding:0; border:0; }
.field__label { padding:0; font-size:var(--fs-sm); font-weight:600; color:var(--c-ink-900); }
.field__req { margin-left:2px; color:var(--c-accent-700); }
.field__hint { margin:0; font-size:var(--fs-xs); color:var(--c-ink-500); }
.field__error { margin:0; font-size:var(--fs-xs); font-weight:600; color:var(--c-accent-700); }

.input, .select, .textarea {
  display:block; width:100%; min-height:48px; padding:10px 14px; border:1.5px solid var(--c-line-strong); border-radius:var(--r-md); background:var(--c-white);
  font-family:var(--font-body); font-size:16px; line-height:1.4; color:var(--c-ink-900); transition:border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.input::placeholder, .textarea::placeholder { color:var(--c-ink-500); opacity:1; }
.input:hover, .select:hover, .textarea:hover { border-color:var(--c-ink-500); }
.input:focus, .select:focus, .textarea:focus { outline:0; border-color:var(--c-brand-600); box-shadow:0 0 0 3px var(--c-focus); }
.textarea { min-height:120px; resize:vertical; }
.select {
  padding-right:42px; cursor:pointer; -webkit-appearance:none; appearance:none;
  background-image:var(--icon-chevron-down);
  background-repeat:no-repeat; background-position:right 14px center; background-size:16px;
}
.is-invalid .input, .is-invalid .select, .is-invalid .textarea, .input.is-invalid, .select.is-invalid, .textarea.is-invalid { border-color:var(--c-accent-700); background-color:var(--c-accent-100); }
.is-invalid .input:focus, .is-invalid .select:focus, .is-invalid .textarea:focus { box-shadow:0 0 0 3px var(--c-danger-ring); }

.checkbox { display:flex; align-items:center; gap:10px; min-height:44px; font-size:.9375rem; line-height:1.4; color:var(--c-ink-900); cursor:pointer; }
.checkbox input { flex:none; width:20px; height:20px; margin:0; accent-color:var(--c-brand-700); cursor:pointer; }
.checkbox--top { align-items:flex-start; padding-top:10px; }
.checkbox__count { margin-left:auto; font-size:var(--fs-xs); color:var(--c-ink-500); font-variant-numeric:tabular-nums; }

.radio-pills { display:flex; flex-wrap:wrap; gap:var(--s-2); margin:0; padding:0; border:0; }
.radio-pill { position:relative; display:inline-flex; }
.radio-pill input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.radio-pill span {
  display:inline-flex; align-items:center; min-height:44px; padding:0 18px; border:1.5px solid var(--c-line-strong); border-radius:var(--r-pill); background:var(--c-white);
  font-size:.9375rem; font-weight:600; color:var(--c-ink-700); transition:background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.radio-pill:hover span { border-color:var(--c-brand-600); color:var(--c-brand-700); }
.radio-pill input:checked + span { background:var(--c-brand-700); border-color:var(--c-brand-700); color:var(--c-white); }
.radio-pill input:focus-visible + span { outline:3px solid var(--c-brand-600); outline-offset:2px; }

.form__actions { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-3) var(--s-4); }
.form__legal { margin:0; font-size:var(--fs-xs); color:var(--c-ink-500); }
.form-success { display:flex; align-items:flex-start; gap:var(--s-4); padding:var(--s-5); border:1px solid var(--c-fresh); border-radius:var(--r-lg); background:var(--c-fresh-bg); color:var(--c-brand-900); }
.form-success > .icon { width:28px; height:28px; margin-top:2px; color:var(--c-fresh); }
.form-success h3 { margin:0 0 var(--s-1); }
.form-success p { margin:0; }

/* 11 浮层：询价清单抽屉 / toast / 悬浮按钮 ----------------------------------------- */
.drawer-backdrop { position:fixed; inset:0; z-index:var(--z-backdrop); background:var(--c-overlay); opacity:0; visibility:hidden; transition:opacity .25s var(--ease), visibility 0s linear .25s; }
.drawer-backdrop.is-open { opacity:1; visibility:visible; transition:opacity .25s var(--ease); }
.drawer {
  position:fixed; top:0; right:0; bottom:0; z-index:var(--z-drawer); display:flex; flex-direction:column; width:min(420px,100%); background:var(--c-white); box-shadow:var(--sh-3);
  transform:translateX(100%); visibility:hidden; transition:transform .3s var(--ease), visibility 0s linear .3s;
}
.drawer.is-open { transform:none; visibility:visible; transition:transform .3s var(--ease); }
.drawer__head { display:flex; flex:none; align-items:center; justify-content:space-between; gap:var(--s-3); padding:var(--s-3) var(--s-3) var(--s-3) var(--s-5); border-bottom:1px solid var(--c-line); }
.drawer__title { margin:0; font-size:1.1875rem; }
.drawer__count { font-weight:600; color:var(--c-ink-500); }
.drawer__body { flex:1; padding:0 var(--s-5); overflow-y:auto; overscroll-behavior:contain; }
.drawer__list { margin:0; padding:0; list-style:none; }
.drawer__empty { display:flex; flex-direction:column; align-items:center; gap:var(--s-3); padding:var(--s-8) var(--s-3); text-align:center; }
.drawer__empty .icon { width:44px; height:44px; color:var(--c-ink-500); }
.drawer__empty h3, .drawer__empty p { margin:0; }
.drawer__empty p { color:var(--c-ink-700); font-size:var(--fs-sm); }
.drawer__notes { padding:var(--s-4) 0 var(--s-5); }
.drawer__foot { flex:none; padding:var(--s-4) var(--s-5) var(--s-5); border-top:1px solid var(--c-line); background:var(--c-cream); }
.drawer__actions { display:grid; gap:var(--s-2); }
.drawer__actions .btn--ghost { justify-self:center; }
.drawer__note { margin:var(--s-3) 0 0; font-size:var(--fs-xs); line-height:1.5; color:var(--c-ink-700); text-align:center; }

.eq-item { display:grid; grid-template-columns:56px minmax(0,1fr) auto; gap:var(--s-2) var(--s-3); align-items:start; padding:var(--s-4) 0; border-bottom:1px solid var(--c-line); }
.eq-item__thumb { grid-row:1 / span 2; width:56px; height:56px; overflow:hidden; border-radius:var(--r-md); background:var(--c-cream); }
.eq-item__thumb img { width:100%; height:100%; object-fit:cover; }
.eq-item__info { min-width:0; }
.eq-item__name { margin:0; font-size:.9375rem; font-weight:600; line-height:1.3; }
.eq-item__name a { color:inherit; text-decoration:none; }
.eq-item__name a:hover { color:var(--c-brand-700); text-decoration:underline; }
.eq-item__sku { margin:2px 0 0; font-size:var(--fs-xs); color:var(--c-ink-500); }
.eq-item__remove { margin:-6px -8px 0 0; color:var(--c-ink-500); }
.eq-item__remove:hover { color:var(--c-accent-700); background:var(--c-accent-100); }
.eq-item__qty { grid-column:2 / -1; display:flex; align-items:center; gap:var(--s-3); font-size:var(--fs-xs); color:var(--c-ink-500); }

.toast {
  position:fixed; left:50%; top:calc(var(--sticky-h) + 12px); z-index:var(--z-toast); display:flex; align-items:center; gap:var(--s-3); width:max-content; max-width:calc(100% - 32px);
  padding:10px 10px 10px 16px; border-radius:var(--r-md); background:var(--c-ink-900); color:var(--c-white); font-size:var(--fs-sm); line-height:1.4; box-shadow:var(--sh-3);
  opacity:0; visibility:hidden; transform:translate(-50%,-10px); transition:opacity .22s var(--ease), transform .22s var(--ease), visibility 0s linear .22s;
}
.toast.is-show { opacity:1; visibility:visible; transform:translate(-50%,0); transition:opacity .22s var(--ease), transform .22s var(--ease); }
.toast .icon { width:18px; height:18px; color:var(--c-wa); }
.toast__action { flex:none; min-height:36px; padding:0 12px; border:0; border-radius:var(--r-sm); background:var(--c-on-dark-fill); color:var(--c-white); font-family:var(--font-head); font-size:.8125rem; font-weight:700; }
.toast__action:hover { background:var(--c-on-dark-fill-strong); }
@media (min-width:768px) {
  .toast { top:auto; bottom:24px; transform:translate(-50%,10px); }
  .toast.is-show { transform:translate(-50%,0); }
}

.fab-stack {
  position:fixed; right:max(16px,env(safe-area-inset-right)); bottom:max(16px,env(safe-area-inset-bottom)); z-index:var(--z-fab);
  display:flex; flex-direction:column; align-items:flex-end; gap:12px; pointer-events:none;
}
.fab-stack > * { pointer-events:auto; }
.fab-wa {
  display:grid; place-items:center; width:56px; height:56px; border-radius:50%; background:var(--c-wa); color:var(--c-wa-ink);
  box-shadow:var(--sh-2); transition:transform .2s var(--ease);
}
.fab-wa:hover { transform:scale(1.06); }
.fab-wa .icon { width:30px; height:30px; vertical-align:0; }
.fab-enquiry {
  display:inline-flex; align-items:center; gap:8px; min-height:48px; padding:0 18px 0 14px; border:0; border-radius:var(--r-pill);
  background:var(--c-brand-700); color:var(--c-white); font-family:var(--font-head); font-size:.9375rem; font-weight:700;
  box-shadow:var(--sh-2); transition:background-color .15s var(--ease);
}
.fab-enquiry:hover { background:var(--c-brand-800); }
.fab-enquiry .icon { width:20px; height:20px; vertical-align:0; }
/* 手机端页头已有带数量的清单图标，浮动胶囊会遮挡内容，只保留 WhatsApp 按钮 */
@media (max-width:767.98px) { .fab-enquiry { display:none; } .site-footer__bottom-inner { padding-bottom:96px; } }
@media (min-width:768px) and (max-width:1359.98px) { .site-footer__legal { margin-right:56px; } }

/* END style.css */