/* ==========================================================================
   程思智能水电表独立站 · 设计令牌与样式
   风格：白色为主 + 浅蓝点缀，工业物联网产品目录质感
   ========================================================================== */

:root {
  --bg: #f4faff;
  --surface: #ffffff;
  --surface-2: #f8fcff;
  --line: #e4eef8;
  --line-strong: #cfe3f4;
  --ink: #0c2233;
  --ink-2: #47627a;
  /* 次要文字：#587089 在 #f4faff 底上对比度 4.88:1，满足 WCAG AA */
  --ink-3: #587089;
  --blue: #1a8fe3;
  /* 主色：#0c76c1 配白字对比度 4.80:1，满足 AA */
  --blue-600: #0c76c1;
  --blue-700: #0a5f9e;
  --blue-50: #eaf5fe;
  --blue-100: #d7ecfd;
  /* 有货：#0a7154 在 #e7f8f2 底上 5.45:1 */
  --ok: #0a7154;
  --ok-bg: #e7f8f2;
  /* 缺货：#566e80 在 #eef3f8 底上 4.78:1 */
  --off: #566e80;
  --off-bg: #eef3f8;
  --danger: #dc4b4b;
  --shadow-sm: 0 6px 18px -12px rgba(12, 60, 100, 0.4);
  --shadow: 0 24px 48px -28px rgba(12, 60, 100, 0.45);
  --shadow-lg: 0 40px 80px -40px rgba(10, 50, 90, 0.5);
  --radius: 16px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --font: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  /* 动效曲线：统一放这里，避免各处 cubic-bezier 各写各的 */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-soft: cubic-bezier(0.65, 0, 0.35, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }

/* 移动端手感：去掉 iOS 点击高亮灰闪，按钮消除双击缩放延迟 */
html { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }

button { font: inherit; color: inherit; cursor: pointer; }

input, textarea, select { font: inherit; color: inherit; }

a { color: var(--blue-600); text-decoration: none; }
a:hover { color: var(--blue-700); }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 6px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--blue-700);
  color: #fff;
  padding: 10px 16px;
  border-radius: 0 0 10px 0;
  z-index: 200;
}
.skip-link:focus { left: 0; color: #fff; }

.shell { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 20px; }

/* ---------------- 顶部导航 ---------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  /* 毛玻璃：通栏直边（同页脚），保留模糊/饱和特效，底部细分隔 */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.66) 100%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 8px 28px rgba(15, 45, 90, 0.1);
}

.site-header .shell {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 64px;
}

/* 不支持 backdrop-filter 的浏览器：退回近纯白底 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header {
    background: rgba(255, 255, 255, 0.94);
  }
}

.brand { display: flex; align-items: center; gap: 11px; color: var(--ink); }
.brand:hover { color: var(--ink); }
/* 品牌标志：透明底横版 PNG（对应 assets/misc/chengsilogo.png），换 logo 只需替换那个文件 */
.brand-logo { display: block; height: 38px; width: auto; aspect-ratio: 1127 / 176; }

.site-nav { display: flex; align-items: center; gap: 4px; margin-left: 12px; }
.site-nav a {
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  color: var(--ink-2);
}
.site-nav a:hover { background: rgba(255, 255, 255, 0.65); color: var(--blue-700); }

.header-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.lang-switch {
  display: inline-flex;
  padding: 3px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(12, 60, 100, 0.12);
  border-radius: var(--radius-pill);
}
.lang-switch button {
  border: 0;
  background: transparent;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-size: 12.5px;
  color: var(--ink-2);
  transition: background 0.18s, color 0.18s;
}
.lang-switch button[aria-pressed="true"] { background: #fff; color: var(--blue-700); font-weight: 600; box-shadow: var(--shadow-sm); }

.cart-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid rgba(12, 60, 100, 0.12);
  background: rgba(255, 255, 255, 0.5);
  color: var(--blue-700);
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 600;
  transition: background 0.18s, border-color 0.18s, transform 0.18s;
}
.cart-btn:hover { background: rgba(255, 255, 255, 0.85); border-color: rgba(12, 60, 100, 0.25); }
.cart-btn .badge {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--blue-600);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
}
.cart-btn .badge[data-empty="true"] { background: var(--line-strong); color: var(--ink-2); }

/* ---------------- Hero ----------------
   素材是 16:9 的设计横幅（左侧约一半是留给文字的留白区，右侧是产品图），
   这里按原比例整张展示，不做裁切。 */

.hero {
  position: relative;
  /* 纯白底：宽屏时横幅居中，两侧留出的就是纯白，与页面衔接无缝 */
  background: #fff;
  border-bottom: 1px solid var(--line);
  /* 横幅宽度：窄屏撑满；宽屏最大 1240px；同时限制高度约 80vh，保证一屏放得下 */
  --hero-w: min(100%, 1240px, 142vh);
}

/* 图片区：严格按素材的 16:9，宽度由 --hero-w 决定，因此整张图始终完整且不留空条 */
.hero-media {
  position: relative;
  width: var(--hero-w);
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.hero-slides { position: absolute; inset: 0; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; }
.hero-slide[data-active="true"] { opacity: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: contain; }

/* 只在左右两侧做向纯白的过渡，让图片边缘融进白色页面（上下不做） */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.8) 24%, rgba(255, 255, 255, 0) 50%),
    linear-gradient(270deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.68) 5%, rgba(255, 255, 255, 0) 14%);
}

/* 文案压在图片左侧的留白区：宽度与图片一致，保证始终对齐 */
.hero-copy-wrap {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--hero-w);
  z-index: 2;
  display: flex;
  align-items: center;
  pointer-events: none;
}
.hero-copy-wrap .shell { width: 100%; }
.hero-copy { max-width: 470px; pointer-events: auto; }

.hero-dots {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}
.hero-dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(12, 60, 100, 0.24);
  cursor: pointer;
  transition: width 0.2s, background 0.2s;
}
.hero-dots button[aria-selected="true"] { width: 28px; background: var(--blue-600); }

.hero h1 {
  margin: 0;
  font-size: clamp(30px, 4.4vw, 46px);
  line-height: 1.16;
  letter-spacing: -0.02em;
  font-weight: 800;
  max-width: 20ch;
}
.hero h1 em { font-style: normal; color: var(--blue); }

.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-size: 14.5px;
  font-weight: 600;
  transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.15s, box-shadow 0.18s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--blue-600); color: #fff; box-shadow: var(--shadow); }
.btn-primary:hover { background: var(--blue-700); color: #fff; }
.btn-ghost { background: #fff; border-color: var(--line-strong); color: var(--ink); }
.btn-ghost:hover { border-color: var(--blue); color: var(--blue-700); background: var(--blue-50); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; }

/* ---------------- 产品目录 ---------------- */

.catalog { padding: 56px 0 8px; }

.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.section-head h2 { margin: 0; font-size: 26px; letter-spacing: -0.015em; }
.section-head p { margin: 8px 0 0; color: var(--ink-2); font-size: 14.5px; max-width: 60ch; }

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.filters button {
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--ink-2);
  font-size: 13.5px;
  transition: all 0.18s;
}
.filters button:hover { border-color: var(--blue); color: var(--blue-700); }
.filters button[aria-pressed="true"] {
  background: var(--blue-600);
  border-color: var(--blue-600);
  color: #fff;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

.cat-block { margin-top: 40px; }
.cat-block > header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 22px;
}
.cat-block h3 { margin: 0; font-size: 17px; letter-spacing: -0.01em; }
.cat-block header span { font-size: 12.5px; color: var(--ink-3); }
.cat-block header .count { margin-left: auto; font-size: 12px; color: var(--ink-3); }

/* 分区内的小节（如电表下的「壁挂式 / 导轨式」） */
.sub-block { margin-top: 18px; }
.sub-block h4 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding-left: 10px;
  border-left: 3px solid var(--blue-600);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-2);
}
.sub-block h4 .count { font-size: 12px; font-weight: 500; color: var(--ink-3); }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  /* 所有行等高，保证卡片大小统一 */
  grid-auto-rows: 1fr;
  gap: 20px;
}

/* ---------------- 产品卡片 ---------------- */

.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.24s, box-shadow 0.24s var(--ease-out-quart), transform 0.24s var(--ease-out-quart);
}
/* 入场动画只在目录首次渲染时挂上：切筛选、切语言、换规格都会重绘卡片，
   如果动画常驻在 .card 上，新节点会一遍遍重播，看起来就是「跳」 */
.catalog-intro .card {
  /* backwards 让首帧只作用于延迟期间，动画结束后把 transform 交还给 :hover；
     整段是纯 CSS 且收尾在可见态，脚本报错也不会留下一片空白 */
  animation: card-in 520ms var(--ease-out-quart) backwards;
  animation-delay: calc(min(var(--i, 0), 7) * 45ms);
}
@keyframes card-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
.card:hover { border-color: var(--line-strong); box-shadow: var(--shadow); transform: translateY(-3px); }
.card[data-out="true"] { opacity: 0.86; }
.card[data-out="true"]:hover { transform: none; }

.card-media {
  position: relative;
  /* 产品素材以竖图为主（宽高比 0.5~0.8），用 3:4 竖框留白最少 */
  aspect-ratio: 3 / 4;
  /* 图片改为绝对定位后不再参与内容高度计算，保证所有卡片图片区比例一致 */
  min-height: 0;
  background: linear-gradient(180deg, #ffffff 0%, #f4faff 100%);
  border-bottom: 1px solid var(--line);
  display: grid;
  place-items: center;
}
/* inset 与宽高同时给：图片框正好等于内边距以内的内容区 */
.card-media img {
  position: absolute;
  inset: 18px;
  width: calc(100% - 36px);
  height: calc(100% - 36px);
  object-fit: contain;
}
.card-media button.zoom {
  position: absolute;
  inset: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}
.card-media .sim-art { width: 84px; height: 84px; }

.tag {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.tag-in { background: var(--ok-bg); color: var(--ok); }
.tag-out { background: var(--off-bg); color: var(--off); }

.card-body { display: flex; flex-direction: column; gap: 10px; padding: 16px 16px 18px; flex: 1; }
.card-title { margin: 0; font-size: 15.5px; font-weight: 700; line-height: 1.35; }
.card-title a { color: inherit; }
.card-title a:hover { color: var(--blue-700); }
.card-sub { margin: 0; font-size: 12.5px; color: var(--ink-3); line-height: 1.45; }
.card-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* 卡内规格切换（4分/6分/一寸、60A/80A/100A）：每个规格一个独立小胶囊，选中的填品牌蓝 */
.spec-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.spec-label { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.spec-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.spec-options button {
  /* 描边用 ink 的浅色调：比 --line-strong 更实一点，胶囊才不像纯文字 */
  border: 1px solid rgba(12, 60, 100, 0.16);
  background: #fff;
  padding: 5px 13px;
  border-radius: var(--radius-pill);
  font-size: 12.5px;
  color: var(--ink-2);
  transition: background 0.2s var(--ease-out-quart), border-color 0.2s, color 0.2s,
    box-shadow 0.2s, transform 0.14s var(--ease-out-quart);
  white-space: nowrap;
}
.spec-options button:hover {
  border-color: var(--blue);
  color: var(--blue-700);
  background: var(--blue-50);
  transform: translateY(-1px);
}
.spec-options button:active { transform: scale(0.96); }
.spec-options button[aria-checked="true"] {
  background: var(--blue-600);
  border-color: var(--blue-600);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 4px 12px -5px rgba(12, 118, 193, 0.6);
}
/* 缺货规格：灰字 + 删除线，边框也更淡 */
.spec-options button[data-out="true"],
.spec-options button[data-out="true"]:hover {
  color: var(--ink-3);
  background: #fff;
  border-color: rgba(12, 60, 100, 0.12);
  transform: none;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
/* 缺货又被选中：用浅灰底表示「正在看它」，不填品牌蓝，免得看起来能买 */
.spec-options button[data-out="true"][aria-checked="true"] {
  background: var(--off-bg);
  border-color: rgba(12, 60, 100, 0.12);
  color: var(--off);
  font-weight: 600;
  box-shadow: none;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* 规格书入口 */
.spec-doc {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  background: #fff;
  border-radius: var(--radius-pill);
  font-size: 12.5px;
  color: var(--ink-2);
  transition: all 0.18s;
}
.spec-doc:hover { border-color: var(--blue); color: var(--blue-700); background: var(--blue-50); }

/* 规格书阅读器：铺满视口，内嵌 PDF */
.spec-panel {
  width: min(1180px, 96vw);
  height: 92vh;
  max-height: 92vh;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.spec-viewer-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--line);
}
.spec-viewer-title { min-width: 0; flex: 1; }
.spec-viewer-title h2 { margin: 0; font-size: 16px; }
.spec-viewer-title p { margin: 4px 0 0; font-size: 12px; color: var(--ink-3); word-break: break-all; }
.spec-viewer-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.spec-tabs { display: flex; gap: 6px; padding: 10px 20px 0; flex-wrap: wrap; }
.spec-tabs button {
  border: 1px solid var(--line-strong);
  background: #fff;
  padding: 6px 13px;
  border-radius: var(--radius-pill);
  font-size: 12.5px;
  color: var(--ink-2);
}
.spec-tabs button[aria-selected="true"] { background: var(--blue-600); border-color: var(--blue-600); color: #fff; font-weight: 600; }
.spec-frame { flex: 1; min-height: 0; padding: 12px 20px 20px; }
.spec-frame iframe { width: 100%; height: 100%; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.model-chip {
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.01em;
  color: var(--blue-700);
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  border-radius: 7px;
  padding: 3px 8px;
}
.card-foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 4px; }

.stock-note { font-size: 12px; color: var(--ink-3); }

.stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: #fff;
  height: 38px;
}
.stepper button {
  width: 30px;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1;
  display: grid;
  place-items: center;
}
.stepper button:hover:not(:disabled) { background: var(--blue-50); color: var(--blue-700); }
.stepper button:disabled { opacity: 0.4; cursor: not-allowed; }
.stepper input {
  width: 42px;
  height: 100%;
  border: 0;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  background: transparent;
}
.stepper input:focus { outline: none; background: var(--blue-50); }

.btn-add {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 38px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--blue-600);
  background: var(--blue-600);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.18s, border-color 0.18s, transform 0.14s var(--ease-out-quart), box-shadow 0.2s;
}
.btn-add:hover:not(:disabled) { background: var(--blue-700); border-color: var(--blue-700); box-shadow: 0 8px 18px -9px rgba(12, 118, 193, 0.8); }
.btn-add:active:not(:disabled) { transform: scale(0.97); }
.btn-add:disabled {
  background: var(--off-bg);
  border-color: var(--off-bg);
  color: var(--off);
  cursor: not-allowed;
}
.btn-add[data-added="true"] { background: #fff; color: var(--ok); border-color: var(--ok); }

/* ---------------- 优势 / 联系 ---------------- */

.edge { padding: 56px 0; }
.edge-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 28px; }
.edge-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
}
.edge-item .icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--blue-50);
  color: var(--blue-600);
  margin-bottom: 14px;
}
.edge-item h4 { margin: 0 0 6px; font-size: 15px; }
.edge-item p { margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.6; }

.contact-band { padding: 0 0 64px; }
.contact-card {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 28px;
  align-items: center;
  background: linear-gradient(135deg, #ffffff 0%, #eef7ff 100%);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  padding: 34px 36px;
}
.contact-card h2 { margin: 0; font-size: 24px; letter-spacing: -0.015em; }
.contact-card p { margin: 10px 0 0; color: var(--ink-2); font-size: 14.5px; max-width: 52ch; }
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.contact-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.contact-list svg { flex: none; margin-top: 3px; color: var(--blue-600); }
.contact-list strong { font-weight: 600; }

.site-footer { border-top: 1px solid var(--line); background: #fff; }
.site-footer .shell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
  justify-content: space-between;
  padding: 22px 20px;
  font-size: 12.5px;
  color: var(--ink-3);
}
/* 左侧版权 + 备案号，右侧友情链接；窄屏时自动换行堆叠 */
.footer-legal, .footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.site-footer a { color: var(--ink-3); transition: color 0.18s; }
.site-footer a:hover { color: var(--blue-600); }

/* ---------------- 购物车抽屉 ---------------- */

.scrim {
  position: fixed;
  inset: 0;
  background: rgba(11, 45, 74, 0.42);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.24s, visibility 0.24s;
  z-index: 80;
}
.scrim[data-open="true"] { opacity: 1; visibility: visible; }

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(430px, 100%);
  height: 100%;
  background: var(--surface);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  transform: translateX(102%);
  /* visibility 参与过渡：关闭时在动画结束后移出无障碍树与 Tab 序列 */
  visibility: hidden;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s;
  z-index: 90;
  display: flex;
  flex-direction: column;
}
.cart-drawer[data-open="true"] { transform: translateX(0); visibility: visible; }

.drawer-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}
.drawer-head h2 { margin: 0; font-size: 17px; }
.drawer-head .muted { font-size: 12.5px; color: var(--ink-3); }
.icon-btn {
  margin-left: auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 10px;
  color: var(--ink-2);
}
.icon-btn:hover { border-color: var(--line-strong); background: var(--blue-50); color: var(--blue-700); }

.drawer-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
.drawer-foot { border-top: 1px solid var(--line); padding: 16px 20px 20px; background: var(--surface-2); }

.cart-line { display: flex; gap: 13px; padding: 13px 0; border-bottom: 1px dashed var(--line); }
.cart-line:last-child { border-bottom: 0; }
/* 购物车缩略图：用 3:4 的比例，和 assets/thumbs 里那套统一画布的小图对齐，
   这样每张产品图占的位置都一样大。图片用绝对定位铺满 —— 
   之前写 height: 100% 在 grid 容器里不生效，图片会按原始比例纵向戳出框外 */
.cart-line .thumb {
  position: relative;
  width: 54px;
  height: 72px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
.cart-line .thumb img,
.cart-line .thumb .sim-art {
  position: absolute;
  inset: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  object-fit: contain;
}
.cart-line .info { flex: 1; min-width: 0; }
.cart-line .name { font-size: 14px; font-weight: 600; line-height: 1.4; }
.cart-line .model { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); margin-top: 3px; }
.cart-line .row { display: flex; align-items: center; gap: 10px; margin-top: 9px; }
.cart-line[data-invalid="true"] .name { color: var(--danger); }
.cart-line[data-invalid="true"] .stepper { border-color: #f0c9c9; }
.cart-line .warn {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--danger);
}
.cart-line .warn svg { flex: none; margin-top: 2px; }
.cart-line .stepper { height: 32px; }
.cart-line .stepper button { width: 30px; }
.cart-line .stepper input { width: 42px; font-size: 13px; }
.link-danger { border: 0; background: transparent; color: var(--ink-3); font-size: 12.5px; padding: 4px 2px; }
.link-danger:hover { color: var(--danger); }

.empty-state { text-align: center; padding: 56px 12px; color: var(--ink-3); }
.empty-state svg { color: var(--line-strong); }
.empty-state p { margin: 14px 0 0; font-size: 14px; }

.summary-row { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--ink-2); padding: 3px 0; }
.summary-row strong { color: var(--ink); }
.hint { margin: 12px 0 0; font-size: 12px; color: var(--ink-3); line-height: 1.55; }
.hint-danger { color: var(--danger); font-weight: 600; }
.drawer-foot .btn { width: 100%; margin-top: 14px; }

/* ---------------- 弹窗 ---------------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal[data-open="true"] { display: flex; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(11, 45, 74, 0.45); backdrop-filter: blur(3px); }
.modal-panel {
  position: relative;
  width: min(620px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  background: #fff;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  padding: 26px 28px 28px;
}
.modal-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 6px; }
.modal-head h2 { margin: 0; font-size: 19px; }
.modal-head p { margin: 6px 0 0; font-size: 13px; color: var(--ink-3); }
.modal-head .icon-btn { margin-left: auto; }

/* 弹窗内的语言切换（顶栏被遮罩挡住时的替代入口） */
.modal-lang {
  flex: none;
  padding: 6px 13px;
  border: 1px solid var(--blue-100);
  background: var(--blue-50);
  color: var(--blue-700);
  border-radius: var(--radius-pill);
  font-size: 12.5px;
  font-weight: 600;
  transition: background 0.18s, border-color 0.18s;
}
.modal-lang:hover { background: var(--blue-100); border-color: var(--blue); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 20px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.field label .req { color: var(--danger); margin-left: 4px; font-weight: 500; }
/* 「二选一」标记：用蓝色小胶囊，和红色的 *必填项 明显区分开 ——
   它表示这一组字段里至少填一个，单独一项留空是允许的 */
.field label .req-alt {
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: var(--blue-50);
  color: var(--blue-700);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
}
.field-hint { font-size: 11.5px; color: var(--ink-3); line-height: 1.4; }
.field-error { font-size: 12px; color: var(--danger); line-height: 1.4; }
.field-error[hidden] { display: none; }
.form-legend { margin: 16px 0 0; font-size: 12.5px; color: var(--ink-3); }
.field input, .field textarea, .field select {
  width: 100%;
  padding: 10px 13px;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  background: #fff;
  font-size: 14px;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.field textarea { resize: vertical; min-height: 76px; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(26, 143, 227, 0.16);
}
.form-note { margin-top: 16px; font-size: 12.5px; color: var(--ink-3); background: var(--blue-50); border: 1px solid var(--blue-100); border-radius: 12px; padding: 12px 14px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; }

.order-preview {
  margin-top: 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.order-preview .head { padding: 10px 14px; background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2); }
.order-preview ul { margin: 0; padding: 12px 14px; list-style: none; display: grid; gap: 8px; max-height: 190px; overflow-y: auto; }
.order-preview li { display: flex; gap: 10px; align-items: baseline; font-size: 13.5px; }
.order-preview li .qty { margin-left: auto; font-weight: 700; color: var(--blue-700); font-family: var(--mono); font-size: 13px; }
.order-preview li .m { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }

.result-box { text-align: center; padding: 12px 0 4px; }
.result-box .tick {
  width: 62px;
  height: 62px;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ok-bg);
  color: var(--ok);
}
.result-box h2 { margin: 0; font-size: 20px; }
.result-box .order-no { font-family: var(--mono); font-size: 15px; color: var(--blue-700); background: var(--blue-50); border: 1px dashed var(--blue-100); border-radius: 11px; padding: 10px; margin: 16px 0 0; }
.result-box p { color: var(--ink-2); font-size: 14px; margin: 14px 0 0; }

/* ---------------- 产品详情二级页面 ---------------- */

.product-page { padding-bottom: 72px; }

.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 22px;
  font-size: 12.5px;
  color: var(--ink-3);
}
.breadcrumb a { color: var(--blue-700); }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .sep { color: var(--line-strong); }
.breadcrumb strong { color: var(--ink); font-weight: 600; }
.breadcrumb .crumb-link {
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  color: var(--blue-700);
  cursor: pointer;
}
.breadcrumb .crumb-link:hover { text-decoration: underline; }

.product-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 40px;
  margin-top: 24px;
  align-items: start;
}

/* 图集卡片：产品图与尺寸图同住一张卡，左右翻页 */
.product-gallery {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #ffffff 0%, #f4faff 100%);
  overflow: hidden;
}
.gallery-stage { position: relative; aspect-ratio: 1 / 1; }
.gallery-page {
  position: absolute;
  inset: 0;
  margin: 0;
  display: none;
  padding: 40px;
}
.gallery-page[data-active="true"] { display: block; }
/* 图片铺满内边距以内的区域，用 contain 等比缩放并居中：
   任何长宽比的图都不会溢出卡片、也不会被拉变形（百分比 max-height 在格子里不可靠）。 */
.gallery-page img { display: block; width: 100%; height: 100%; object-fit: contain; }
.gallery-page figcaption {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--line);
  font-size: 11.5px;
  color: var(--ink-2);
}
.gallery-nav {
  position: absolute;
  top: calc(50% - 22px);
  transform: translateY(-50%);
  z-index: 2;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink-2);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: border-color 0.18s, color 0.18s;
}
.gallery-nav:hover { border-color: var(--blue); color: var(--blue-700); }
.gallery-nav.prev { left: 12px; }
.gallery-nav.next { right: 12px; }
.gallery-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  background: #fff;
}
.gallery-dots { display: flex; gap: 7px; }
.gallery-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--line-strong);
  cursor: pointer;
  transition: width 0.2s, background 0.2s;
}
.gallery-dots button[aria-selected="true"] { width: 22px; background: var(--blue-600); }
.gallery-count { margin-left: auto; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.product-info h1 { margin: 0; font-size: 25px; line-height: 1.3; }
.product-model {
  margin: 10px 0 0;
  display: inline-block;
  padding: 5px 13px;
  border-radius: var(--radius-pill);
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  color: var(--blue-700);
  font-size: 13px;
  font-weight: 600;
}
.product-info .spec-row { margin-top: 20px; }
.product-dl {
  margin: 22px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 11px 20px;
  font-size: 14px;
}
.product-dl dt { color: var(--ink-3); white-space: nowrap; }
.product-dl dd { margin: 0; }
.buy-row { display: flex; align-items: center; gap: 14px; margin-top: 26px; flex-wrap: wrap; }
.buy-row .stepper { flex: none; }
.buy-row .btn { min-width: 168px; }
.back-link { display: inline-block; margin-top: 22px; font-size: 13px; color: var(--blue-700); }
.back-link:hover { text-decoration: underline; }

/* 详情页内嵌的规格书预览 */
.spec-embed { margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--line); }
.spec-embed-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.spec-embed-title { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; color: var(--ink); }
.spec-embed-title em {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  color: var(--blue-700);
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
}
.spec-embed-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 14px; }
.spec-embed-file { margin-top: 6px; font-size: 12px; color: var(--ink-3); word-break: break-all; }
/* 规格书是 A4 竖版（210×297）：保持纸张比例，同时把宽度控制在顺手的大小
   （A4 在 100% 显示下约 794px 宽，这里给 860px，约 105% 缩放，字看得清又不过分占屏）。 */
.spec-embed-frame {
  width: min(100%, 860px);
  aspect-ratio: 210 / 297;
  margin: 14px auto 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.spec-embed-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.spec-embed-empty {
  margin: 34px 0 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--ink-3);
  font-size: 13px;
  text-align: center;
}

.link-btn {
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--blue-700);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.link-btn:hover { color: var(--blue-600); }

/* ---------------- Toast ---------------- */

.toast-host { position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 200; display: grid; gap: 10px; width: min(420px, calc(100% - 32px)); }
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 13px;
  background: #fff;
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow);
  font-size: 13.5px;
  animation: toast-in 0.24s ease-out;
}
.toast[data-type="ok"] { border-color: #b7e7d6; }
.toast[data-type="ok"] .mark { color: var(--ok); }
.toast[data-type="err"] { border-color: #f3c7c7; }
.toast[data-type="err"] .mark { color: var(--danger); }
.toast .mark { flex: none; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.skeleton { background: linear-gradient(90deg, #eef5fb 25%, #f7fbfe 50%, #eef5fb 75%); background-size: 200% 100%; animation: shimmer 1.3s infinite; border-radius: 12px; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.card-skeleton { height: 330px; }

/* ---------------- 响应式 ---------------- */

/* 窄屏：文案叠回图上并保持垂直居中，左侧加渐晕保证可读；轮播点固定在右下角 */
@media (max-width: 1024px) {
  .hero-copy-wrap {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: var(--hero-w);
    display: flex;
    align-items: center;
    padding: 0 20px;
  }
  .hero-copy { max-width: none; }
  .hero-media::after {
    background-image:
      linear-gradient(90deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.72) 24%, rgba(255, 255, 255, 0) 48%),
      linear-gradient(270deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 16%),
      linear-gradient(0deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0) 30%);
  }
  .hero-dots { top: auto; bottom: 12px; left: auto; right: 14px; transform: none; }
}

@media (max-width: 900px) {
  .contact-card { grid-template-columns: 1fr; padding: 26px 22px; }
  .product-layout { grid-template-columns: 1fr; gap: 26px; }
}

@media (max-width: 720px) {
  .site-nav { display: none; }
  .catalog { padding-top: 40px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(164px, 1fr)); gap: 14px; }
  .card-body { padding: 13px 13px 15px; gap: 8px; }
  .card-title { font-size: 14px; }
  .card-sub { display: none; }
  .card-foot { flex-direction: column; align-items: stretch; gap: 8px; }
  .card-foot .stepper { width: 100%; justify-content: space-between; }
  .card-foot .stepper button { width: 42px; }
  .card-foot .btn-add { width: 100%; }
  .form-grid { grid-template-columns: 1fr; }
  .modal-panel { padding: 20px 18px 22px; }
  .spec-panel { padding: 0; height: 94vh; max-height: 94vh; }
  .spec-frame { padding: 10px 12px 14px; }
  .spec-viewer-head { padding: 14px 14px 12px; }
  .spec-viewer-title h2 { font-size: 15px; }
  .spec-embed-frame { width: 100%; }
  .product-info h1 { font-size: 21px; }
  .gallery-page { padding: 20px; }
  .spec-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .spec-options { width: 100%; }
  .spec-options button { flex: 1 1 auto; text-align: center; }
  .brand-logo { height: 26px; }
  .lang-switch button { padding: 5px 9px; }
  .cart-btn .label { display: none; }
  .cart-btn { padding: 9px 12px; }

  /* ---- 移动端整体优化 ---- */
  /* 导航条更紧凑，360px 小屏也不挤 */
  .site-header .shell { height: 54px; gap: 10px; padding: 0 16px; }

  /* 产品卡片固定两列：再多的宽度也不挤第三列 */
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

  /* 分类筛选横滑（隐藏滚动条），省纵向空间 */
  .filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 20px -20px 0;
    padding: 2px 20px 6px;
  }
  .filters::-webkit-scrollbar { display: none; }
  .filters button { flex: none; }

  /* Hero 文案块收窄靠左、按钮竖排且按内容收缩：右侧产品图不被按键遮挡，视觉上更轻巧 */
  .hero-copy-wrap { padding: 0 16px; }
  .hero-copy { max-width: 250px; }
  .hero h1 { font-size: 21px; line-height: 1.22; letter-spacing: -0.01em; }
  .hero-cta { flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 12px; }
  .hero-cta .btn { width: auto; padding: 7px 15px; font-size: 13px; gap: 6px; }
  .hero-cta .btn svg { width: 13px; height: 13px; flex: none; }

  /* iOS Safari：输入框字号 <16px 聚焦时会自动放大页面，这里统一提到 16px */
  .field input, .field textarea, .field select { font-size: 16px; }
  .stepper input { font-size: 16px; }

  /* 购物车抽屉底部避开 iPhone Home 指示条 */
  .drawer-foot { padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)); }
  .drawer-head, .drawer-body { padding-left: 16px; padding-right: 16px; }

  /* 表单弹窗改为底部上拉的半屏操作单（移动端通用手势） */
  .modal { padding: 0; align-items: flex-end; }
  .modal-panel {
    width: 100%;
    max-height: 92vh;
    max-height: 92dvh;
    border-radius: 18px 18px 0 0;
    border-bottom: 0;
    padding: 22px 18px calc(20px + env(safe-area-inset-bottom, 0px));
  }
  .modal-actions { flex-direction: column; gap: 8px; }
  .modal-actions .btn { width: 100%; justify-content: center; }
}

/* ---------------- 左下角常驻购物车 ---------------- */

.cart-fab {
  position: fixed;
  left: 22px;
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  z-index: 58;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--blue-600);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 12px 28px -10px rgba(12, 118, 193, 0.65);
  transition: transform 0.24s var(--ease-out-quart), box-shadow 0.24s, background 0.2s;
}
.cart-fab:hover {
  background: var(--blue-700);
  transform: translateY(-3px);
  box-shadow: 0 18px 34px -12px rgba(12, 118, 193, 0.75);
}
.cart-fab:active { transform: translateY(0) scale(0.94); }
.cart-fab:focus-visible { outline: 3px solid var(--blue-100); outline-offset: 3px; }
.cart-fab svg { width: 23px; height: 23px; }

.cart-fab-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--blue-700);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(12, 60, 100, 0.28);
  transition: transform 0.22s var(--ease-out-quart), opacity 0.22s;
}
.cart-fab-badge[data-empty="true"] { opacity: 0; transform: scale(0.55); }
.badge.is-pop,
.cart-fab-badge.is-pop { animation: badge-pop 460ms var(--ease-out-quart); }

/* 收到商品时购物车轻轻弹一下：幅度克制，只用来确认「东西进去了」 */
.cart-fab.is-bump { animation: cart-bump 560ms var(--ease-out-quart); }

@keyframes cart-bump {
  0% { transform: scale(1); }
  25% { transform: scale(1.13) rotate(-5deg); }
  52% { transform: scale(0.97) rotate(3deg); }
  76% { transform: scale(1.04) rotate(-1deg); }
  100% { transform: scale(1); }
}
@keyframes badge-pop {
  0% { transform: scale(1); }
  38% { transform: scale(1.45); }
  100% { transform: scale(1); }
}

/* 从点击处飞向购物车的小圆点（位置与轨迹由 JS 的 Web Animations 控制） */
.fly-dot {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 70;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--blue-600);
  box-shadow: 0 4px 14px -2px rgba(12, 118, 193, 0.8);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}