/* ============================================================
   三友眼镜官网 · 设计系统 v2.0
   更新：2026-10-16
   品牌色（不变量）：主蓝 #2864A4 ／ 辅橙 #F79527 ／ 文字黑 #2C292A
   规范依据：00-权威源\三友眼镜-视觉与品牌色规范_v1.0_20261003.md
   约束：无渐变；logo 一律完整形态，不简化、不变形、不改色。
   边界：本文件只作用于表现层——不改动任何正文文本、DOM 语义结构、
         URL 与 JSON-LD，因此对 AI 爬虫可见性零影响。
   ============================================================ */

/* ------------------------------------------------------------
   1. 设计令牌
   ------------------------------------------------------------ */
:root {
  /* 品牌色（不得改动） */
  --brand-blue: #2864A4;
  --brand-orange: #F79527;
  --brand-ink: #2C292A;

  /* 主蓝色阶 */
  --blue-800: #17395e;
  --blue-700: #1e4d80;
  --blue-600: #2864A4;      /* = 品牌主蓝 */
  --blue-500: #3b7ec0;
  --blue-200: #c3d8ec;
  --blue-100: #e2edf7;
  --blue-50:  #f3f8fc;

  /* 辅橙色阶（仅装饰与强调；小字橙统一用 --orange-700 以达 AA 对比度） */
  --orange-700: #a35d00;
  --orange-600: #e07c10;
  --orange-500: #F79527;    /* = 品牌辅橙 */
  --orange-100: #fdf1e2;
  --orange-50:  #fef8f0;

  /* 中性色 */
  --ink-900: #2C292A;       /* = 品牌文字黑 */
  --ink-700: #45403f;
  --ink-600: #5b5758;
  --ink-500: #7b7674;
  --ink-300: #b8bec6;

  /* 线与面 */
  --line: #e3e7ec;
  --line-strong: #cfd6de;
  --surface: #ffffff;
  --surface-soft: #f6f8fa;
  --surface-mute: #eef1f5;

  /* 语义色 */
  --focus-ring: #2864A4;

  /* 字体 */
  --font: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB",
          "Source Han Sans SC", system-ui, -apple-system, sans-serif;

  /* 字阶 */
  --fs-12: .75rem;
  --fs-13: .8125rem;
  --fs-14: .875rem;
  --fs-15: .9375rem;
  --fs-16: 1rem;
  --fs-17: 1.0625rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-34: 2.125rem;

  /* 行高 */
  --lh-tight: 1.35;
  --lh-snug: 1.55;
  --lh-base: 1.75;

  /* 间距（4pt 基准） */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px;

  /* 圆角 */
  --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-pill: 999px;

  /* 阴影（仅投影，无渐变） */
  --sh-1: 0 1px 2px rgba(19,34,53,.06), 0 1px 1px rgba(19,34,53,.04);
  --sh-2: 0 4px 14px rgba(19,34,53,.08), 0 1px 3px rgba(19,34,53,.05);
  --sh-3: 0 12px 32px rgba(19,34,53,.12), 0 2px 8px rgba(19,34,53,.06);

  /* 过渡 */
  --t-fast: 140ms ease;
  --t-base: 220ms ease;

  /* 容器 */
  --wrap: 1120px;
}

/* ------------------------------------------------------------
   2. 基础
   ------------------------------------------------------------ */
* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-16);
  line-height: var(--lh-base);
  color: var(--ink-900);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: var(--blue-600); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }

/* 统一焦点环：键盘可达性（WCAG 2.4.7） */
a:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

h1, h2, h3, h4 {
  line-height: var(--lh-tight);
  color: var(--ink-900);
  letter-spacing: -.01em;
}
h1 {
  font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.125rem);
  font-weight: 700;
  margin: 0 0 var(--s-3);
}
h2 {
  font-size: var(--fs-24);
  font-weight: 700;
  margin: var(--s-10) 0 var(--s-4);
}
h3 {
  font-size: var(--fs-18);
  font-weight: 700;
  margin: var(--s-6) 0 var(--s-2);
}
h2:first-child, h3:first-child { margin-top: 0; }

p { margin: 0 0 var(--s-4); }

strong { font-weight: 700; }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--s-5);
}

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--blue-600); color: #fff;
  padding: var(--s-3) var(--s-4); z-index: 200;
  border-radius: 0 0 var(--r-sm) 0; font-weight: 700;
}
.skip-link:focus { left: 0; }

/* ------------------------------------------------------------
   3. 页头
   ------------------------------------------------------------ */
.site-header {
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: saturate(150%) blur(6px);
}
.header-inner {
  display: flex; align-items: center; gap: var(--s-5);
  min-height: 76px; flex-wrap: wrap;
  padding-top: var(--s-2); padding-bottom: var(--s-2);
}
.brand { display: flex; align-items: center; flex: 0 0 auto; order: 1; }
.brand img { height: 46px; width: auto; }

.site-nav { flex: 1 1 auto; order: 3; }
.site-nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0 var(--s-5);
}
.site-nav a {
  display: inline-flex; align-items: center; min-height: 44px;  /* 触控目标 */
  color: var(--ink-700); font-size: var(--fs-15); font-weight: 500;
  border-bottom: 2px solid transparent;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.site-nav a:hover, .site-nav a:focus-visible {
  color: var(--blue-600); text-decoration: none;
  border-bottom-color: var(--orange-500);
}
.site-nav a[aria-current="page"] {
  color: var(--blue-600); font-weight: 700; border-bottom-color: var(--blue-600);
}

.header-tel {
  flex: 0 0 auto; order: 2; margin-left: auto;
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 44px; padding: 0 var(--s-5);
  font-weight: 700; font-size: var(--fs-15); color: var(--blue-600);
  border: 1.5px solid var(--blue-200); border-radius: var(--r-pill);
  background: var(--blue-50);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  white-space: nowrap;
}
.header-tel:hover, .header-tel:focus-visible {
  background: var(--blue-600); color: #fff;
  border-color: var(--blue-600); text-decoration: none;
}

/* ------------------------------------------------------------
   4. 通用节
   ------------------------------------------------------------ */
.section { padding: var(--s-12) 0 var(--s-4); }
.section + .section { padding-top: var(--s-8); }
.section-soft {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-8) var(--s-8) var(--s-6);
  margin: var(--s-8) 0;
}
.lead {
  font-size: var(--fs-17);
  line-height: var(--lh-snug);
  color: var(--ink-600);
}
.src {
  font-size: var(--fs-13);
  color: var(--ink-500);
}

/* 面包屑 */
.crumb { font-size: var(--fs-14); color: var(--ink-500); padding: var(--s-5) 0 0; }
.crumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-1); }
.crumb a { color: var(--ink-600); }
.crumb a:hover { color: var(--blue-600); }
.crumb li + li::before { content: "›"; margin-right: var(--s-1); color: var(--ink-300); }

/* 节标题组 */
.section-head { margin-bottom: var(--s-6); }
.section-head h2 { margin-bottom: var(--s-2); }
.section-head p { color: var(--ink-600); margin: 0; }

/* ------------------------------------------------------------
   5. 按钮
   ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 48px; padding: 0 var(--s-6);
  font-size: var(--fs-15); font-weight: 700; font-family: inherit;
  border-radius: var(--r-pill); border: 2px solid var(--blue-600);
  color: #fff; background: var(--blue-600); cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast),
              color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.btn:hover, .btn:focus-visible {
  background: var(--blue-700); border-color: var(--blue-700);
  box-shadow: var(--sh-2); text-decoration: none; transform: translateY(-1px);
}
.btn:active { transform: translateY(0); box-shadow: var(--sh-1); }

.btn-ghost { background: var(--surface); color: var(--blue-600); }
.btn-ghost:hover, .btn-ghost:focus-visible {
  background: var(--blue-600); color: #fff; border-color: var(--blue-600);
}

.hero-actions {
  display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6);
}

/* ------------------------------------------------------------
   6. 首屏（首页 Hero）
   ------------------------------------------------------------ */
.hero {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: var(--s-12) 0 var(--s-12);
}
.hero-grid {
  display: grid; grid-template-columns: 1.08fr .92fr;
  gap: var(--s-12); align-items: center;
}
.hero-grid--solo { grid-template-columns: 1fr; }   /* 无主视觉图时单栏，避免空列 */
.hero h1 { margin-bottom: var(--s-4); }
.hero .lead { max-width: 620px; }

.hero-visual {
  margin: 0; position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-3);
  background: var(--surface-mute);
}
.hero-visual img {
  width: 100%; height: auto;
  max-height: 420px;
  object-fit: cover;
}

/* ------------------------------------------------------------
   7. 核心数字
   ------------------------------------------------------------ */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4); margin: var(--s-6) 0 var(--s-2);
}
.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--blue-600);
  border-radius: var(--r-md);
  padding: var(--s-5) var(--s-5) var(--s-4);
  box-shadow: var(--sh-1);
  transition: box-shadow var(--t-base), transform var(--t-base);
}
.stat:hover { box-shadow: var(--sh-2); transform: translateY(-2px); }
.stat .k { display: block; font-size: var(--fs-13); color: var(--ink-600); }
.stat .v {
  display: block; margin: var(--s-1) 0 var(--s-2);
  font-size: var(--fs-28); font-weight: 700; color: var(--blue-600);
  line-height: 1.2; letter-spacing: -.02em;
}
.stat .n { display: block; font-size: var(--fs-13); color: var(--ink-500); line-height: var(--lh-snug); }

/* ------------------------------------------------------------
   8. 问答块
   ------------------------------------------------------------ */
.qa { margin: 0 0 var(--s-4); }
.qa h2 {
  display: flex; align-items: flex-start; gap: var(--s-3);
  margin: var(--s-8) 0 var(--s-3);
  font-size: var(--fs-20); line-height: var(--lh-snug);
}
.qa h2 .q-mark {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; margin-top: 1px;
  border-radius: 50%;
  background: var(--blue-600); color: #fff;
  font-size: var(--fs-14); font-weight: 700;
}
.qa p { margin: 0 0 var(--s-2); }
.qa .src { font-size: var(--fs-13); color: var(--ink-500); }
.qa .group-h {
  border-bottom: 2px solid var(--blue-600);
  padding-bottom: var(--s-2); margin-top: var(--s-10);
}
.qa .group-h:first-child { margin-top: 0; }

/* ------------------------------------------------------------
   9. 卡片与网格（门店）
   ------------------------------------------------------------ */
.grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5); margin: var(--s-6) 0 var(--s-2);
}
.card {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-5);
  box-shadow: var(--sh-1);
  transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
}
.card:hover {
  border-color: var(--blue-200);
  box-shadow: var(--sh-2);
  transform: translateY(-2px);
}
.card h3 {
  margin: 0 0 var(--s-3);
  font-size: var(--fs-17);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
}
.card h3 a { color: var(--ink-900); }
.card h3 a:hover { color: var(--blue-600); text-decoration: none; }
.card dl { margin: 0; font-size: var(--fs-14); line-height: var(--lh-snug); }
.card dt { color: var(--ink-500); font-size: var(--fs-13); margin-top: var(--s-3); }
.card dt:first-child { margin-top: 0; }
.card dd { margin: 0; color: var(--ink-700); }
.card .card-foot {
  margin: auto 0 0; padding-top: var(--s-4);
  font-size: var(--fs-14); font-weight: 700;
}

.tag {
  display: inline-block;
  font-size: var(--fs-12); font-weight: 700;
  padding: 2px var(--s-2);
  border-radius: var(--r-xs);
  background: var(--orange-100); color: var(--orange-700);
  border: 1px solid #f4d5ab;
}

/* ------------------------------------------------------------
   10. 门店详情首屏
   ------------------------------------------------------------ */
.store-hero {
  background: var(--surface-soft);
  border-bottom: 1px solid var(--line);
  padding: var(--s-8) 0 var(--s-10);
}
.store-hero-grid {
  display: grid; grid-template-columns: 1.25fr .75fr;
  gap: var(--s-10); align-items: center; margin-top: var(--s-4);
}
.store-hero-grid--solo { grid-template-columns: 1fr; }   /* 无封面图时单栏 */
.store-hero h1 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 1.875rem); }
.store-hero .lead { max-width: 620px; }
.store-hero-media {
  margin: 0; border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--sh-2); background: var(--surface-mute);
}
.store-hero-media img {
  width: 100%; height: auto;
  max-height: 480px;
  object-fit: cover;   /* 按原生比例展示，超高时轻微裁切，横/竖构图门店都完整 */
}

/* 信息表 */
.info-table {
  width: 100%; border-collapse: collapse;
  margin: var(--s-4) 0 var(--s-6); font-size: var(--fs-15);
  border: 1px solid var(--line);
}
.info-table th, .info-table td {
  border-bottom: 1px solid var(--line);
  padding: var(--s-3) var(--s-4);
  text-align: left; vertical-align: top; line-height: var(--lh-snug);
}
.info-table tr:last-child th, .info-table tr:last-child td { border-bottom: 0; }
.info-table th {
  background: var(--surface-soft);
  width: 148px; font-weight: 700; color: var(--ink-700); white-space: nowrap;
}
.info-table tbody tr:hover td { background: var(--blue-50); }

.plain-list { margin: 0 0 var(--s-4); padding-left: var(--s-6); }
.plain-list li { margin-bottom: var(--s-2); }

/* ------------------------------------------------------------
   11. 提示条
   ------------------------------------------------------------ */
.notice {
  border-left: 4px solid var(--orange-500);
  background: var(--orange-50);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: var(--s-4) var(--s-5);
  font-size: var(--fs-15); line-height: var(--lh-snug);
  margin: var(--s-6) 0;
  color: var(--ink-700);
}
.notice strong { color: var(--orange-700); }
.notice a { font-weight: 700; }

/* ------------------------------------------------------------
   12. 沿革时间轴
   ------------------------------------------------------------ */
.timeline { list-style: none; margin: var(--s-6) 0; padding: 0 0 0 var(--s-1); }
.timeline li {
  display: flex; gap: var(--s-4); align-items: baseline;
  padding: 0 0 var(--s-4) 0; position: relative;
}
.timeline li::after {
  content: ""; position: absolute; left: 3px; top: 12px; bottom: -2px;
  width: 2px; background: var(--line); border-radius: 2px;
}
.timeline li:last-child::after { display: none; }
.timeline li::before {
  content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%;
  background: var(--blue-600); position: relative; top: -1px;
  box-shadow: 0 0 0 3px var(--blue-100);
}
.tl-year { flex: 0 0 104px; font-weight: 700; color: var(--blue-600); }
.tl-text { flex: 1 1 auto; }

/* ------------------------------------------------------------
   13. 图像
   ------------------------------------------------------------ */
.heritage {
  display: block; width: 100%; max-width: 380px; height: auto;
  border: 1px solid var(--line); border-radius: var(--r-md);
  margin: var(--s-1) 0 var(--s-3);
}

/* 品牌影像：原图完整展示不裁切，多列错落排布避免留白 */
.gallery { column-count: 2; column-gap: var(--s-4); margin: var(--s-4) 0 var(--s-3); }
.gallery .g-item {
  margin: 0 0 var(--s-4); break-inside: avoid; -webkit-column-break-inside: avoid;
  border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden; background: var(--surface-soft);
  box-shadow: var(--sh-1);
}
.gallery .g-item img { width: 100%; height: auto; }
.gallery .g-item figcaption {
  font-size: var(--fs-13); color: var(--ink-600);
  padding: var(--s-3) var(--s-4); line-height: var(--lh-snug);
}

/* 门店实景组图 */
.photo-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3); margin: var(--s-3) 0;
}
.photo-grid img {
  width: 100%; height: 210px; object-fit: cover;
  border: 1px solid var(--line); border-radius: var(--r-md);
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.photo-grid img:hover { transform: scale(1.015); box-shadow: var(--sh-2); }

/* ------------------------------------------------------------
   14. 商标明细
   ------------------------------------------------------------ */
.tm-table th, .tm-table td, .tm-goods th, .tm-goods td {
  font-size: var(--fs-13); padding: var(--s-2) var(--s-3);
}

/* ------------------------------------------------------------
   15. 页脚
   ------------------------------------------------------------ */
.site-footer {
  background: var(--ink-900); color: #cfd3d8;
  margin-top: var(--s-16); padding: var(--s-12) 0 var(--s-4);
  font-size: var(--fs-14); line-height: var(--lh-snug);
}
.footer-inner {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr;
  gap: var(--s-8);
}
.footer-brand img { height: 42px; width: auto; margin-bottom: var(--s-4); }
.footer-brand p { margin: 0 0 var(--s-2); }
.site-footer a { color: #e8ebef; }
.site-footer a:hover { color: #fff; }
.site-footer h2 { font-size: var(--fs-15); color: #fff; margin: 0 0 var(--s-4); }
.footer-legal { color: #fff; font-weight: 700; }
.footer-nav ul, .footer-meta ul { list-style: none; margin: 0; padding: 0; }
.footer-nav li { display: inline-block; width: 48%; margin-bottom: var(--s-2); }
.footer-meta p { margin: 0 0 var(--s-2); }
.beian-icon { display: inline-block; vertical-align: middle; margin-right: var(--s-1); }
.footer-bottom {
  border-top: 1px solid #4a4748; margin-top: var(--s-8); padding-top: var(--s-4);
  color: #9aa0a6; font-size: var(--fs-13);
}
.footer-bottom p { margin: 0 0 var(--s-1); }

/* ------------------------------------------------------------
   16. 响应式
   ------------------------------------------------------------ */
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--s-8); }
  .hero-visual { max-width: 640px; }
  .store-hero-grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .store-hero-media { max-width: 480px; }
  .store-hero-media img { max-height: 560px; }   /* 单栏时放宽高度上限 */
  .stats { grid-template-columns: repeat(2, 1fr); }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .photo-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .site-header { position: static; }          /* 小屏不吸顶，避免占屏 */
  .header-inner { gap: var(--s-3); }
  .brand img { height: 38px; }
  .site-nav { flex-basis: 100%; }
  .site-nav ul { gap: 0 var(--s-4); }
  .site-nav a { font-size: var(--fs-14); }
  .header-tel { padding: 0 var(--s-4); font-size: var(--fs-14); }

  .section { padding: var(--s-8) 0 var(--s-2); }
  .hero { padding: var(--s-8) 0; }
  .section-soft { padding: var(--s-6) var(--s-5); }

  .stats, .grid, .photo-grid { grid-template-columns: 1fr; }
  .photo-grid img { height: 220px; }
  .gallery { column-count: 1; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-nav li { width: 100%; }
  .info-table th { width: 108px; }
  .info-table th, .info-table td { padding: var(--s-2) var(--s-3); font-size: var(--fs-14); }
  .btn { width: 100%; }
  .hero-actions { gap: var(--s-2); }
  .stat .v { font-size: var(--fs-24); }
  .tl-year { flex: 0 0 84px; }
}

/* ------------------------------------------------------------
   17. 动效偏好（无障碍）
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .card:hover, .stat:hover, .btn:hover, .photo-grid img:hover { transform: none; }
}