/* ==========================================================================
   YK (UK) Limited — page-content.css
   --------------------------------------------------------------------------
   uk-wholesale.html / international-trade.html / about.html / contact.html
   四个内页需要、而 style.css 里没有的少量版式。
   规则：
   1. 只写在本文件，不改 style.css；只在上述四个页面里引用（放在 style.css 之后）。
   2. 只用 :root 里的变量，不写散值；类名 BEM-lite：.page-content__xxx。
   3. mobile-first，断点 min-width：560 / 768 / 1024。
   目录
   01 分类紧凑列表（uk-wholesale）   02 小工具   03 照片占位（about）
   04 FAQ 分栏   05 联系页：询价区块 / 右栏清单摘要 / 提交成功态
   ========================================================================== */

/* 01 分类紧凑列表：图标 + 英文 + 中文 + 产品数（整行可点） ------------------------ */
.page-content__cats { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s-3); margin:0; padding:0; list-style:none; }
@media (min-width:768px) { .page-content__cats { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px) { .page-content__cats { grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s-4); } }
.page-content__cat {
  display:flex; align-items:center; gap:var(--s-3); height:100%; min-height:72px; padding:var(--s-3) var(--s-4);
  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) { .page-content__cat:hover { border-color:var(--c-brand-600); } }
/* 分类图标是裸的线性图标，没有底色块 */
.page-content__cat-icon { display:grid; place-items:center; flex:none; width:1.5rem; height:1.5rem; color:var(--c-brand-700); }
.page-content__cat-icon .icon { width:100%; height:100%; vertical-align:0; }
.page-content__cat-text { display:flex; flex:1; flex-direction:column; min-width:0; line-height:1.3; }
.page-content__cat-text strong { font-family:var(--font-head); font-size:var(--fs-body); font-weight:800; letter-spacing:-.005em; color:var(--c-ink-900); }
.page-content__cat-text small { margin-top:var(--s-1); font-size:var(--fs-sm); color:var(--c-ink-500); }
.page-content__cat-meta { display:flex; align-items:center; gap:var(--s-2); flex:none; font-size:var(--fs-xs); font-weight:600; color:var(--c-brand-700); white-space:nowrap; }

/* 02 小工具 ---------------------------------------------------------------------- */
.page-content__note { margin:var(--s-4) 0 0; font-size:var(--fs-sm); color:var(--c-ink-500); }
.section--trade {
  position: relative;
  isolation: isolate;
  overflow: clip;
  color: var(--c-on-dark);
  background-color: var(--c-brand-900);
}
.section--trade::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--c-brand-900);
  background-image:
    linear-gradient(var(--c-scrim-soft), var(--c-scrim-strong)),
    var(--trade-img);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.section--trade h2 { color: var(--c-white); }
.section--trade .lead {
  margin-inline: auto;
  color: var(--c-on-dark);
}
.terms-sheet__head {
  max-width: 42rem;
  margin-bottom: clamp(28px, 4vw, 40px);
}
.terms-sheet__head h2 { margin: 0 0 var(--s-3); }
.terms-sheet__head p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--c-ink-500);
  text-wrap: pretty;
}
.terms-sheet {
  display: grid;
  gap: var(--s-5);
}
.terms-sheet__col {
  min-width: 0;
  padding: var(--s-5);
  border: 1px solid rgba(22, 32, 27, 0.14);
  border-radius: var(--r-md);
  background: var(--c-white);
}
.terms-sheet__col h3 {
  margin: 0 0 var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid rgba(22, 32, 27, 0.12);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-brand-700);
}
.terms-sheet__list { margin: 0; }
.terms-sheet__row {
  display: grid;
  gap: 4px;
  padding: var(--s-3) 0;
}
.terms-sheet__row + .terms-sheet__row {
  border-top: 1px solid rgba(22, 32, 27, 0.08);
}
.terms-sheet__row dt {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-ink-500);
}
.terms-sheet__row dd {
  margin: 0;
  font-family: var(--font-head);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--c-ink-900);
  text-wrap: pretty;
}
@media (min-width: 768px) {
  .terms-sheet {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-5);
  }
  .terms-sheet__col { padding: var(--s-6); }
}
.page-content__card-action { align-self:start; justify-self:start; }          /* info-card 里的按钮 / 链接：不拉伸，等高卡片里自然落在最后一行（底部） */
.page-content__center { justify-content:center; text-align:center; }           /* 配合 .cluster 让按钮居中 */
.page-content__value { overflow-wrap:anywhere; font-weight:600; color:var(--c-ink-900); }
.info-card p.page-content__value { color:var(--c-ink-900); }
.page-content__narrow { max-width:56rem; }                                     /* 单列信息表不要拉满 1240px */

/* About 页头标题较长（8 个词）：略小一档，桌面端能排成三行而不是四行 */
.page-hero h1.page-content__title-long { font-size:clamp(1.875rem,1.25rem + 2vw,2.875rem); }

/* 03 About：Inside YK 三个"待提供真实照片"占位 --------------------------------------- */
.page-content__photos { grid-template-columns:minmax(0,1fr); }                  /* 手机单列、扁一点；≥768 三列 */
.page-content__photos .photo-placeholder,
.page-content__photos .page-content__photo { --ratio:21/9; min-height:0; }
.page-content__photos .photo-placeholder { padding:var(--s-4); }
.page-content__photos .page-content__photo { margin:0; width:100%; }
@media (min-width:768px) {
  .page-content__photos { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .page-content__photos .photo-placeholder,
  .page-content__photos .page-content__photo { --ratio:4/3; }
  .page-content__photos .photo-placeholder { padding:var(--s-5); }
}

/* 04 左右分栏时顶部对齐（FAQ 展开 / 收起时另一侧不跟着上下跳） ----------------------------- */
.page-content__split--top { align-items:start; }

/* 05 联系页（与静态 contact.html 一致：独立 page-hero + section--sm 四张 info-card） ----- */
@media (max-width:559.98px) {
  .page-content__contact { gap:var(--s-3); }
  .page-content__contact .info-card { padding:var(--s-4); row-gap:var(--s-2); }
  .page-content__contact .info-card .btn { align-self:stretch; justify-self:stretch; margin-top:var(--s-1); }
}

.section--contact-form {
  padding-block:clamp(28px,3.5vw,40px) clamp(48px,6vw,80px);
}
.section--contact-form .section__head--compact {
  margin-bottom:clamp(12px,1.8vw,18px);
}
.section--contact-form .section__head--compact h2 {
  margin-bottom:var(--s-1);
  font-size:clamp(1.25rem,1.05rem + 0.6vw,1.5rem);
}
.section--contact-form .section__head--compact .lead {
  margin:0;
  font-size:var(--fs-sm);
  line-height:1.4;
}
.section--contact-form .page-content__panel {
  padding:var(--s-4);
}
@media (min-width:768px) {
  .section--contact-form .page-content__panel { padding:var(--s-5); }
}

/* 询价区块：手机单列（表单在前、清单摘要在后）；≥1024 左表单右摘要 */
.page-content__enquiry { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s-6); align-items:start; }
@media (min-width:1024px) {
  .page-content__enquiry { grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:var(--s-7); }
  .page-content__enquiry.is-sent { grid-template-columns:minmax(0,56rem); }     /* 提交成功后只剩一栏 */
}
.page-content__main { min-width:0; }
.page-content__panel { padding:var(--s-5); border:1px solid var(--c-line); border-radius:var(--r-xl); background:var(--c-white); }
@media (min-width:768px) { .page-content__panel { padding:var(--s-6); } }
.page-content__panel .form__actions .btn { flex:1 1 100%; }
@media (min-width:560px) { .page-content__panel .form__actions .btn { flex:0 0 auto; } }
/* 表单级错误提示在表单面板（卡片）里：不再套带边框和底色的盒子，只用强调色粗体文字，和字段下的 .field__error 一致 */
.page-content__error-summary { flex-basis:100%; max-width:none; margin:0; font-size:var(--fs-sm); font-weight:600; color:var(--c-accent-700); }
.page-content__consent .field__error { margin-top:var(--s-1); }

/* 右栏："Your enquiry list" 摘要卡（行样式沿用 style.css 的 .eq-item / .qty） */
/* Form-embedded enquiry list (above fields) — mirrors drawer/aside rows */
.page-content__enq-products {
  margin: 0 0 var(--s-5);
  padding: var(--s-4);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-cream, #f7f5f1);
}
.page-content__enq-products-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-2);
}
.page-content__enq-products-title {
  margin: 0;
  font-size: var(--fs-h3, 1.125rem);
}
.page-content__enq-products-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-content__enq-products-list .eq-item:last-child { border-bottom: 0; }
.page-content__enq-products-note {
  margin: var(--s-3) 0 0;
  font-size: var(--fs-sm);
  color: var(--c-ink-500);
}

.page-content__aside { display:grid; gap:var(--s-4); padding:var(--s-5); border:1px solid var(--c-line); border-radius:var(--r-xl); background:var(--c-white); }
@media (min-width:1024px) { .page-content__aside { position:sticky; top:calc(var(--sticky-h) + 24px); } }
.page-content__aside-head { display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); }
.page-content__aside-head h3 { margin:0; font-size:var(--fs-h3); }
.page-content__aside-head h3:focus { outline:0; }
.page-content__aside-head h3:focus-visible { outline:3px solid var(--c-brand-600); outline-offset:4px; }
.page-content__aside-list { max-height:min(60vh,34rem); margin:calc(-1 * var(--s-2)) 0 0; padding:0 var(--s-1); overflow-y:auto; overscroll-behavior:contain; list-style:none; }
/* 桌面端摘要卡是 sticky 的：清单区高度按视口扣掉页头和卡片其余部分，长清单在卡内滚动，WhatsApp 按钮始终可见 */
@media (min-width:1024px) { .page-content__aside-list { max-height:clamp(12rem,calc(100vh - var(--sticky-h) - 23rem),34rem); } }
.page-content__aside-list .eq-item:last-child { border-bottom:0; }
.page-content__aside .qty--sm .qty__input { font-size:var(--fs-body); }          /* 数量框 16px：iOS 聚焦时不会自动放大（style.css 里的 --sm 是 15px） */
/* 摘要卡本身就是一层容器：空状态和价格提示都不再套虚线框 / 带底色的盒子 */
.page-content__aside-empty { margin:0; font-size:var(--fs-sm); line-height:1.5; color:var(--c-ink-700); }       /* 一行普通文字 + 链接 */
.page-content__aside .price-note { padding:0; border:0; border-radius:0; background:transparent; }              /* 图标 + 一行文字 */
.page-content__aside .price-note strong { font-size:inherit; font-weight:700; }

/* 提交成功：独立感谢页（隐藏联系页其它模块） */
html.is-enquiry-thanks,
main.is-enquiry-thanks { scroll-behavior: auto; }
main.is-enquiry-thanks [data-enquiry-chrome][hidden],
[data-enquiry-chrome][hidden] { display: none !important; }

.enquiry-thanks {
  --thanks-max: 40rem;
  min-height: calc(100vh - var(--sticky-h, 72px));
  display: grid;
  align-items: center;
  padding: calc(var(--sticky-h, 72px) + var(--s-6)) 0 var(--s-9);
  background:
    radial-gradient(120% 80% at 50% -10%, var(--c-brand-50) 0%, transparent 55%),
    linear-gradient(180deg, var(--c-cream) 0%, var(--c-white) 72%);
}
.enquiry-thanks[hidden] { display: none !important; }
.enquiry-thanks__inner {
  max-width: var(--thanks-max);
  margin-inline: auto;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: var(--s-4);
}
.enquiry-thanks__brand {
  margin: 0;
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-brand-700);
}
.enquiry-thanks__mark {
  width: 4.5rem;
  height: 4.5rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--c-brand-100);
  color: var(--c-brand-700);
  margin-top: var(--s-2);
}
.enquiry-thanks__mark .icon { width: 2rem; height: 2rem; }
.enquiry-thanks__title {
  margin: var(--s-2) 0 0;
  font-size: var(--fs-h2);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--c-ink-900);
  max-width: 18ch;
}
.enquiry-thanks__title:focus { outline: 0; }
.enquiry-thanks__title:focus-visible { outline: 3px solid var(--c-brand-600); outline-offset: 4px; }
.enquiry-thanks__lead {
  margin: 0;
  max-width: 36ch;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--c-ink-700);
}
.enquiry-thanks__ref {
  margin-top: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--c-line);
  border-radius: var(--r-xl);
  background: var(--c-white);
  display: grid;
  gap: var(--s-1);
  min-width: min(100%, 22rem);
}
.enquiry-thanks__ref-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-ink-500);
}
.enquiry-thanks__ref-code {
  font-family: var(--font-head);
  font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--c-brand-800);
  white-space: nowrap;
}
.enquiry-thanks__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3);
  margin-top: var(--s-3);
  width: 100%;
}
.enquiry-thanks__actions .btn { min-width: min(100%, 14rem); }
.enquiry-thanks__details {
  margin-top: var(--s-5);
  width: 100%;
  text-align: left;
  border-top: 1px solid var(--c-line);
  padding-top: var(--s-4);
}
.enquiry-thanks__details > summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--c-brand-700);
  min-height: 44px;
  display: flex;
  align-items: center;
}
.enquiry-thanks__details > summary::-webkit-details-marker { display: none; }
.enquiry-thanks__details > summary::after {
  content: '';
  margin-left: auto;
  width: 0.55em;
  height: 0.55em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}
.enquiry-thanks__details[open] > summary::after { transform: rotate(-135deg); }
.enquiry-thanks__summary { margin-top: var(--s-3); }
.enquiry-thanks__products-title {
  margin: var(--s-4) 0 var(--s-2);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.enquiry-thanks__summary .spec-list dd { overflow-wrap: anywhere; white-space: pre-line; }
@media (max-width: 559.98px) {
  .enquiry-thanks__summary .spec-list__row { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
  .enquiry-thanks__summary .spec-list dt { font-size: var(--fs-xs); }
  .enquiry-thanks__ref-code { white-space: normal; word-break: break-all; }
  .enquiry-thanks__actions .btn { flex: 1 1 100%; }
}
.enquiry-thanks__again { margin: var(--s-2) 0 0; }
.page-content__lines { margin: 0; padding-left: 1.25em; color: var(--c-ink-700); font-size: var(--fs-body); }
.page-content__lines li + li { margin-top: var(--s-2); }
.page-content__lines strong { color: var(--c-ink-900); }

/* END page-content.css */

/* 联系页地址卡片（原地图占位）：暖白底、细边框，图钉 + Find us + 完整地址 + 营业时间 + Google Maps 链接 */
.map-card { display:flex; flex-direction:column; align-items:flex-start; gap:var(--s-3); padding:var(--s-6); border:1px solid var(--c-line); border-radius:var(--r-xl); background:var(--c-cream); }
.map-card > .icon { width:28px; height:28px; color:var(--c-brand-700); }
.map-card h3 { margin:0; }
.map-card__address { margin:0; font-family:var(--font-head); font-size:1.25rem; font-weight:700; line-height:1.4; color:var(--c-ink-900); text-wrap:balance; }
.map-card__hours { margin:0; color:var(--c-ink-700); }
.map-card .btn { margin-top:var(--s-2); }