:root {
  --primary:#0f6fff; --dark:#111; --muted:#666; --bg:#f7f9fc;
  --green:#16a34a; --yellow:#eab308; --blue:#2563eb; --gray:#9ca3af;

  /* 全站默认（可由站点设置注入） */
  --font-base: 16px;                 /* html 基础字号 */
  --container-max: 1100px;           /* 桌面最大内容宽 */
  --body-line-height: 1.75;          /* 正文行高 */
  --p-spacing: 12px;                 /* 段落间距 */

  /* 颜色（站点或页面覆盖） */
  --body-color:#222;
  --heading-color:#111;
  --link-color:#0f6fff;
  --hero-title-color:#fff;
  --hero-subtitle-color: rgba(255,255,255,.95);

  /* 正文字号/对齐（站点或页面覆盖） */
  --content-font-size: 1rem;  /* 页面/站点可覆盖为 px */
  --content-align: left;

  /* Hero 默认（站点或页面可覆盖） */
  --hero-title-size: 44px;
  --hero-subtitle-size: 18px;
  --hero-h-desktop: 420px;
  --hero-h-mobile: 260px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { font-size: var(--font-base); }
body {
  margin:0; color: var(--body-color); background:#fff;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","PingFang SC","Hiragino Sans GB","Microsoft Yahei",sans-serif;
}

/* 布局与容器（页脚贴底） */
html, body { height: 100%; }
body { display:flex; flex-direction:column; min-height:100vh; }
main { flex: 1 0 auto; display:flex; flex-direction: column; }

a { color: var(--link-color); text-decoration: none; }
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 16px; }

/* 顶部导航 */
.site-header { background:#fff; border-bottom:1px solid #eee; position: sticky; top:0; z-index:10; }
.header-inner { display:flex; align-items:center; justify-content: space-between; height:64px; gap:10px; }
.brand { display:flex; align-items:center; gap:10px; color:#111; min-width: 140px; }
.logo { width:36px; height:36px; object-fit:cover; border-radius:6px; }

/* 桌面导航 */
.nav { display:flex; align-items:center; gap:8px; white-space:nowrap; }
.nav a { margin: 0 6px; color:#333; }

/* 移动：变为可横向滚动的简易导航 */
@media (max-width: 900px) {
  .header-inner { height:56px; }
  .nav { overflow-x:auto; -webkit-overflow-scrolling:touch; max-width: 60vw; }
  .nav::-webkit-scrollbar { display:none; }
  .right-actions a { font-size: 13px; }
}

/* Hero：最小高度 + 自动高度，避免大字号/多行被裁剪 */
.hero {
  position: relative;
  background:#ccc center/cover no-repeat; /* 具体模式由内联 style 覆盖（cover/contain/stretch） */
  min-height: var(--hero-h-desktop, 420px);
  height: auto;
  color:#fff;
}
@media (max-width: 900px) {
  .hero { min-height: var(--hero-h-mobile, 260px); height: auto; }
  /* 移动端禁用 fixed，避免 iOS 抖动 */
  .hero, .content-wrap { background-attachment: scroll !important; }
}
.hero-inner {
  position: relative; min-height: inherit;
  padding: 28px 0 32px;
  display:flex; flex-direction:column; justify-content:flex-end;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}
/* clamp 自适应：小屏自动缩放，保留站点/页面设置为上限 */
.hero h1 {
  margin:0 0 8px;
  color: var(--hero-title-color);
  font-size: clamp(22px, 6.2vw, var(--hero-title-size, 44px));
  line-height:1.15;
}
.hero .subtitle {
  color: var(--hero-subtitle-color);
  font-size: clamp(14px, 3.8vw, var(--hero-subtitle-size, 18px));
  opacity:.95;
}

/* 内容区：背景铺满由内联 style 控制；撑满剩余高度，去底部白条 */
.content-wrap { position: relative; background: #fff center/cover no-repeat; flex: 1 0 auto; }
.content { position: relative; padding: 20px 0 22px; font-size: var(--content-font-size); }
.rich { text-align: var(--content-align); }
.rich img { max-width:100%; height:auto; border-radius:6px; }
/* 标题/段落 */
.rich p { line-height: var(--body-line-height); margin: 0 0 var(--p-spacing); color: var(--body-color); }
.rich { text-align: var(--content-align); color: var(--body-color); }
.rich li, .rich td, .rich th, .rich span { color: inherit; }
.rich a { color: var(--link-color); }
.rich h1, .rich h2, .rich h3 { color: var(--heading-color); }
.rich h2 { font-size: clamp(20px, 2vw, 28px); margin: 16px 0 10px; }
.rich h3 { font-size: clamp(18px, 1.6vw, 22px); margin: 12px 0 8px; }

/* 小屏正文排版适配：略微收紧行距与间距，减小左右内边距 */
@media (max-width: 900px) {
  .container { padding: 0 12px; }
  .content { padding: 16px 0 18px; }
  .rich p { line-height: 1.7; margin-bottom: 10px; }
}

/* 产品卡片 */
.product-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap:16px; margin-top: 12px; }
.card { border:1px solid #eee; border-radius:10px; overflow:hidden; background:#fff; display:block; color:#111; }
.card-img { height:160px; background:#f2f2f2 center/cover no-repeat; }
.card-body { padding:12px; }
.card-title { font-weight:600; margin-bottom:6px; }
.card-meta { display:flex; align-items:center; justify-content: space-between; color:#666; }
.card .price { color:#16a34a; font-weight:600; }

/* 产品网格在小屏做一列/两列自适应 */
@media (max-width: 900px) {
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap:12px; }
}
@media (max-width: 480px) {
  .product-grid { grid-template-columns: 1fr; }
  .card-img { height: 180px; }
}

/* 产品详情 */
.product-detail { display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 24px; }
.product-detail .main-img { width:100%; border-radius:8px; object-fit:cover; }
.product-detail .gallery { display:grid; grid-template-columns: repeat(auto-fill,minmax(100px,1fr)); gap:10px; margin-top: 10px; }
.price-badge { display:inline-block; padding:6px 10px; background:#e6f3ff; color:#0f6fff; border-radius:6px; font-weight:600; margin-bottom: 10px; }
@media (max-width: 900px) {
  .product-detail { grid-template-columns: 1fr; gap: 16px; }
  .product-detail .gallery { grid-template-columns: repeat(auto-fill,minmax(90px,1fr)); }
}

/* 联系我们 */
.contact-wrap { display:grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.contact-form input, .contact-form textarea { width:100%; padding:10px; border:1px solid #ddd; border-radius:6px; margin:6px 0 12px; }
.contact-info { background:#fff; border:1px solid #eee; border-radius:8px; padding:16px; }
@media (max-width: 900px) {
  .contact-wrap { grid-template-columns: 1fr; gap: 14px; }
}

/* 页脚（不抬空白） */
.site-footer { background: var(--bg); border-top:1px solid #eee; margin-top: 0; }
.site-footer .container { display:flex; align-items:center; justify-content: space-between; padding: 16px 12px; }
.copy { color:#888; font-size: 14px; }

/* 按钮/表格/提示 */
.btn { display:inline-block; padding:8px 14px; border:1px solid #ccc; border-radius:6px; color:#222; background:#fff; cursor:pointer; }
.btn.primary { background: var(--primary); color:#fff; border-color: var(--primary); }
.table { width:100%; border-collapse: collapse; margin-top: 12px; }
.table th, .table td { border:1px solid #eee; padding:8px; text-align:left; }
.table.narrow td, .table.narrow th { padding:6px; }
.badge { display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; color:#fff; }
.badge.green { background: var(--green); } .badge.yellow { background: var(--yellow); color:#111; }
.badge.blue { background: var(--blue); } .badge.gray { background: var(--gray); }
.alert { padding:10px 12px; background:#fff3cd; border:1px solid #ffeeba; border-radius:6px; margin: 10px 0; }
.alert.success { background:#e6ffec; border-color:#b7f5c5; }
.muted { color: var(--muted); font-size: 13px; }

/* 后台（保持不变） */
.admin .login-box { max-width:360px; margin: 80px auto; padding: 24px; border:1px solid #eee; border-radius:8px; background:#fff; }
.login-box input { width:100%; padding:10px; margin:8px 0 16px; }
.login-box button { width:100%; padding:10px; }
.admin-wrap h2 { margin-top: 20px; }
.form-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.form-block { background:#fff; border:1px solid #eee; border-radius:8px; padding:16px; }
.form-block input[type=text], .form-block input[type=email], .form-block input[type=number], .form-block textarea, .form-block select { width:100%; padding:10px; border:1px solid #ddd; border-radius:6px; margin:6px 0 12px; }
.form-actions { grid-column: 1 / -1; }

/* 顶部品牌与导航在小屏的适配 */
.header-inner { gap: 8px; }
.brand {
  display:flex; align-items:center; gap:8px;
  flex: 0 1 auto;               /* 允许被压缩 */
  max-width: 50vw;              /* 最大占一半宽 */
  overflow:hidden;
}
.brand-name {
  display:block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;      /* 单行省略 */
  font-weight: 600;
}
.brand-full { display:inline; }
.brand-short { display:none; }  /* 桌面隐藏短名，显示全称 */

.nav { display:flex; align-items:center; gap:8px; white-space:nowrap; flex: 1 1 auto; min-width: 0; }
.right-actions { flex: 0 0 auto; }

/* 移动端：只显示短名，缩小 logo，导航可滑动 */
@media (max-width: 900px) {
  .logo { width:28px; height:28px; }
  .brand { max-width: 46vw; }
  .brand-name { font-size: 14px; }
  .brand-full { display:none; }
  .brand-short { display:inline; }   /* 移动显示短名 */
  .nav { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .nav::-webkit-scrollbar { display:none; }
}

/* 联系我们页：单列表单居中显示 */
.contact-wrap.contact-single { display:block; max-width: 760px; margin: 0 auto; }
@media (max-width: 900px) {
  .contact-wrap.contact-single { max-width: 100%; }
}