/* ============================================================
   base.css — 重置、排版、页头（四层）、页脚（五段）、通用骨架
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--font-sans);
  font-size:var(--fs-15);
  line-height:var(--lh-base);
  color:var(--c-body);
  background:var(--c-bg);
  -webkit-font-smoothing:antialiased;
}
body.ytd-drawer-open{ overflow:hidden; }

img,svg,video{ max-width:100%; height:auto; display:block; }
a{ color:var(--c-primary); text-decoration:none; transition:color var(--dur) var(--ease); }
a:hover{ color:var(--c-primary-500); }
ul,ol{ margin:0; padding:0; list-style:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
table{ border-collapse:collapse; width:100%; }
hr{ border:0; border-top:1px solid var(--c-line); margin:var(--sp-6) 0; }

/* ---------- 排版 ---------- */
h1,h2,h3,h4,h5{ color:var(--c-ink); font-weight:var(--fw-semibold); margin:0; }
h1{ font-size:clamp(30px,4vw,52px); line-height:var(--lh-tight); letter-spacing:var(--ls-tight); }
h2{ font-size:clamp(24px,3vw,38px); line-height:var(--lh-tight); letter-spacing:var(--ls-tight); }
h3{ font-size:var(--fs-24); line-height:var(--lh-snug); letter-spacing:var(--ls-tight); }
h4{ font-size:var(--fs-18); line-height:var(--lh-snug); }
p{ margin:0 0 var(--sp-4); }
p:last-child{ margin-bottom:0; }

.ytd-h1{ font-size:clamp(30px,4vw,52px); line-height:var(--lh-tight); letter-spacing:var(--ls-tight); font-weight:var(--fw-semibold); color:var(--c-ink); }
.ytd-h2{ font-size:clamp(24px,3vw,38px); line-height:var(--lh-tight); letter-spacing:var(--ls-tight); font-weight:var(--fw-semibold); color:var(--c-ink); }
.ytd-h3{ font-size:var(--fs-20); line-height:var(--lh-snug); font-weight:var(--fw-semibold); color:var(--c-ink); }
.ytd-h3-lg{ font-size:var(--fs-24); line-height:var(--lh-snug); font-weight:var(--fw-semibold); color:var(--c-ink); }

/* eyebrow：商务感的关键一层 */
.ytd-eyebrow{
  display:block; font-size:var(--fs-12); font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-wide); text-transform:uppercase; color:var(--c-accent-600);
}
.ytd-sub{ font-size:var(--fs-16); line-height:var(--lh-base); color:var(--c-body); max-width:62ch; }
.ytd-lead{ font-size:var(--fs-18); line-height:var(--lh-base); color:var(--c-ink-2); max-width:72ch; }
.ytd-prose{ max-width:72ch; font-size:var(--fs-16); line-height:var(--lh-loose); }
.ytd-prose h2{ font-size:var(--fs-24); margin:2em 0 1em; }
.ytd-prose h3{ font-size:var(--fs-20); margin:1.6em 0 .8em; }
.ytd-prose img{ margin:var(--sp-5) 0; border-radius:var(--r-md); }
.ytd-prose blockquote{
  margin:0 0 var(--sp-5); padding-left:var(--sp-5);
  border-inline-start:3px solid var(--c-accent); color:var(--c-ink); font-size:var(--fs-18);
}

/* 数字 / 货号统一等宽表格数字 */
.ytd-num, .ytd-sku, .ytd-tabular{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }
.ytd-sku{ font-family:var(--font-num); font-size:var(--fs-13); color:var(--c-muted); }

/* ---------- 布局 ---------- */
.ytd-container{ width:100%; max-width:var(--w-container); margin-inline:auto; padding-inline:var(--gutter); }
.ytd-container-wide{ width:100%; max-width:var(--w-wide); margin-inline:auto; padding-inline:var(--gutter); }
.ytd-section{ padding-block:var(--section-y); }
.ytd-section--s{ padding-block:calc(var(--section-y) * .72); }
.ytd-section--soft{ background:var(--c-soft); }
.ytd-section--tint{ background:var(--c-tint); }
.ytd-section--dark{ background:var(--c-dark); color:var(--c-on-dark-2); }
.ytd-section--dark .ytd-h1,.ytd-section--dark .ytd-h2,
.ytd-section--dark .ytd-h3,.ytd-section--dark h1,.ytd-section--dark h2,.ytd-section--dark h3{ color:var(--c-on-dark); }
.ytd-section--dark .ytd-eyebrow{ color:var(--c-accent-300); }
.ytd-section--dark a{ color:var(--c-on-dark); }

.ytd-grid{ display:grid; gap:var(--sp-6); }
.ytd-grid--4{ grid-template-columns:repeat(4,1fr); }
.ytd-grid--3{ grid-template-columns:repeat(3,1fr); }
.ytd-grid--2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:1199px){ .ytd-grid--4{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:1023px){
  .ytd-grid--3{ grid-template-columns:repeat(2,1fr); }
  .ytd-grid--4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:767px){
  .ytd-grid--2,.ytd-grid--3,.ytd-grid--4{ grid-template-columns:1fr; }
}

.ytd-skip{
  position:absolute; inset-inline-start:-9999px; top:0; z-index:var(--z-toast);
  background:var(--c-primary); color:#fff; padding:var(--sp-3) var(--sp-5);
}
.ytd-skip:focus{ inset-inline-start:0; color:#fff; }

/* ============================================================
   页头 L0：顶部信息条（深色）
   ============================================================ */
.ytd-topbar{ background:var(--c-dark); color:var(--c-on-dark-2); font-size:var(--fs-12); }
.ytd-topbar__inner{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-5); min-height:36px; }
.ytd-topbar__slogan{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ytd-topbar__links{ display:flex; align-items:center; gap:var(--sp-5); }
.ytd-topbar a{ color:var(--c-on-dark-2); }
.ytd-topbar a:hover{ color:#fff; }
@media (max-width:1023px){ .ytd-topbar{ display:none; } }

/* ============================================================
   页头 L1：主导航（白，吸顶，滚动收缩）
   ============================================================ */
.ytd-header{
  position:sticky; top:0; z-index:var(--z-sticky);
  background:var(--c-bg); border-bottom:1px solid var(--c-line);
  transition:box-shadow var(--dur) var(--ease);
}
.ytd-header.is-stuck{ box-shadow:var(--sh-sm); }
.ytd-nav{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-6); min-height:72px; }
.ytd-nav__menu{ min-width:0; }
.ytd-header.is-stuck .ytd-nav{ min-height:64px; }

.ytd-brand{ display:flex; align-items:center; gap:var(--sp-3); flex:0 0 auto; }
.ytd-brand__logo img{ max-height:40px; width:auto; }
.ytd-brand__name{ font-size:var(--fs-18); font-weight:var(--fw-semibold); color:var(--c-ink); line-height:1.2; }
.ytd-brand__tag{ display:block; font-size:var(--fs-11); color:var(--c-muted); letter-spacing:.06em; text-transform:uppercase; }

.ytd-menu{ display:flex; align-items:center; gap:var(--sp-6); }
.ytd-menu > li{ position:relative; }
.ytd-menu > li > a{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  font-size:var(--fs-14); color:var(--c-ink-2); padding-block:var(--sp-2);
}
.ytd-menu > li > a:hover{ color:var(--c-primary); }
.ytd-menu > li.current-menu-item > a,
.ytd-menu > li.current-menu-parent > a,
.ytd-menu > li.current_page_item > a{ color:var(--c-primary); font-weight:var(--fw-semibold); }
.ytd-menu > li.current-menu-item > a::after,
.ytd-menu > li.current-menu-parent > a::after,
.ytd-menu > li.current_page_item > a::after{
  content:""; position:absolute; inset-inline:0; bottom:-6px; height:2px; background:var(--c-accent);
}
.ytd-menu .sub-menu{
  position:absolute; inset-inline-start:0; top:100%; min-width:220px; z-index:var(--z-sticky);
  background:#fff; border:1px solid var(--c-line); border-radius:var(--r-md);
  box-shadow:var(--sh-md); padding:var(--sp-2); opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur);
}
.ytd-menu > li:hover > .sub-menu,
.ytd-menu > li:focus-within > .sub-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.ytd-menu .sub-menu a{
  display:block; padding:var(--sp-2) var(--sp-3); font-size:var(--fs-14);
  color:var(--c-body); border-radius:var(--r-sm);
}
.ytd-menu .sub-menu a:hover{ background:var(--c-primary-50); color:var(--c-primary); }

.ytd-tools{ display:flex; align-items:center; gap:var(--sp-4); flex:0 0 auto; }
.ytd-tools__link{ font-size:var(--fs-14); color:var(--c-ink-2); }
.ytd-iconlink{
  display:inline-flex; align-items:center; justify-content:center;
  width:var(--ctl-h); height:var(--ctl-h); color:var(--c-ink-2);
  border-radius:var(--r-sm); position:relative;
}
.ytd-iconlink:hover{ background:var(--c-soft); color:var(--c-primary); }
.ytd-cart-count{
  position:absolute; top:4px; inset-inline-end:2px; min-width:18px; height:18px;
  padding-inline:4px; border-radius:var(--r-pill);
  background:var(--c-accent-700); color:#fff;
  font-size:var(--fs-11); font-weight:var(--fw-semibold); line-height:18px; text-align:center;
}
.ytd-cart-count[hidden]{ display:none; }

.ytd-nav-toggle{ display:none; }

/* ---------- L1b：分类快捷条 ---------- */
.ytd-catsbar{ background:var(--c-bg); border-bottom:1px solid var(--c-line); }
.ytd-catsbar__inner{ display:flex; gap:var(--sp-2); overflow-x:auto; padding-block:var(--sp-3); }
.ytd-catsbar__inner::-webkit-scrollbar{ display:none; }
.ytd-catsbar a{
  flex:0 0 auto; padding:var(--sp-2) var(--sp-3); border-radius:var(--r-pill);
  font-size:var(--fs-13); color:var(--c-body); background:var(--c-soft);
}
.ytd-catsbar a:hover,
.ytd-catsbar a.is-current{ background:var(--c-primary); color:#fff; }

/* ---------- L1c：移动抽屉 ---------- */
.ytd-drawer-backdrop{
  position:fixed; inset:0; background:rgba(11,34,55,.44); z-index:var(--z-drawer);
  opacity:0; visibility:hidden; transition:opacity var(--dur-slow) var(--ease),visibility var(--dur-slow);
}
.ytd-drawer-backdrop.is-open{ opacity:1; visibility:visible; }
.ytd-drawer{
  position:fixed; inset-block:0; inset-inline-end:0; width:min(84vw,360px); z-index:var(--z-drawer);
  background:#fff; box-shadow:var(--sh-md);
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform var(--dur-slow) var(--ease);
}
.ytd-drawer.is-open{ transform:translateX(0); }
.ytd-drawer__head{ display:flex; align-items:center; justify-content:space-between; padding:var(--sp-4); border-bottom:1px solid var(--c-line); }
.ytd-drawer__close{ width:var(--ctl-h); height:var(--ctl-h); border:1px solid var(--c-line-2); border-radius:var(--r-sm); background:#fff; cursor:pointer; }
.ytd-drawer__body{ flex:1; overflow-y:auto; padding:var(--sp-4); }
.ytd-drawer__foot{ padding:var(--sp-4); border-top:1px solid var(--c-line); display:grid; gap:var(--sp-2); }
.ytd-drawer__menu > li{ border-bottom:1px solid var(--c-line); }
.ytd-drawer__menu a{ display:block; padding:var(--sp-3) 0; font-size:var(--fs-15); color:var(--c-ink-2); }
.ytd-drawer__menu .sub-menu{ padding-inline-start:var(--sp-4); }
.ytd-drawer__lang{ padding-bottom:var(--sp-4); border-bottom:1px solid var(--c-line); margin-bottom:var(--sp-2); }
.ytd-drawer__contact{ font-size:var(--fs-13); color:var(--c-muted); padding-top:var(--sp-4); display:grid; gap:var(--sp-1); }

@media (max-width:1023px){
  .ytd-menu{ display:none; }
  .ytd-nav-toggle{ display:inline-flex; }
  .ytd-tools__link--desktop{ display:none; }
}
@media (min-width:1024px){
  .ytd-drawer,.ytd-drawer-backdrop{ display:none; }
}

/* ============================================================
   页脚（五段）
   ============================================================ */
.ytd-cta-strip{ background:var(--c-dark-2); padding-block:var(--sp-8); }
.ytd-cta-strip__inner{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-6); flex-wrap:wrap; }
.ytd-footer{ background:var(--c-dark); color:var(--c-on-dark-2); font-size:var(--fs-14); }
.ytd-footer__main{ display:grid; grid-template-columns:1.4fr 1fr 1.2fr 1.4fr; gap:var(--sp-8); padding-block:var(--sp-9) var(--sp-8); }
.ytd-footer h4{ color:#fff; font-size:var(--fs-14); font-weight:var(--fw-semibold); margin-bottom:var(--sp-4); letter-spacing:.02em; }
.ytd-footer a{ color:var(--c-on-dark-2); }
.ytd-footer a:hover{ color:#fff; }
.ytd-footer__list{ display:grid; gap:var(--sp-2); }
.ytd-footer__about p{ max-width:34ch; }
.ytd-footer__social{ display:flex; gap:var(--sp-2); margin-top:var(--sp-4); }
.ytd-footer__social a{
  width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--c-on-dark-line); border-radius:var(--r-sm); color:var(--c-on-dark-2);
}
.ytd-footer__social a:hover{ border-color:var(--c-accent-300); color:var(--c-accent-300); }
.ytd-footer__bottom{ border-top:1px solid var(--c-on-dark-line); padding-block:var(--sp-4); }
.ytd-footer__bottom-inner{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap; font-size:var(--fs-13); }
@media (max-width:1023px){
  .ytd-footer__main{ grid-template-columns:1fr 1fr; gap:var(--sp-6); }
}
@media (max-width:559px){
  .ytd-footer__main{ grid-template-columns:1fr; }
  .ytd-cta-strip__inner{ flex-direction:column; align-items:flex-start; }
}

/* ---------- 返回顶部 ---------- */
.ytd-to-top{
  position:fixed; inset-inline-end:var(--sp-5); bottom:var(--sp-5); z-index:var(--z-sticky);
  width:var(--ctl-h); height:var(--ctl-h); border-radius:var(--r-sm);
  background:#fff; border:1px solid var(--c-line-2); color:var(--c-ink-2);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur);
}
.ytd-to-top.is-on{ opacity:1; visibility:visible; transform:translateY(0); }
.ytd-to-top:hover{ border-color:var(--c-primary-300); color:var(--c-primary); }

/* ---------- 焦点可见（禁止 outline:none 不补偿） ---------- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--c-primary-500); outline-offset:2px; border-radius:var(--r-xs);
}