/* ==========================================================================
   HOBIBEAR 设计系统覆盖层  hobi-ds.css
   --------------------------------------------------------------------------
   建立时间：2026-09-26
   作用：把全站的色彩 / 排版 / 间距 / 组件 / 触控 / 无障碍统一到一套令牌上。
   加载位置：各模板 </head> 之前（即所有页面级 <style> 之后），确保优先生效。
   维护约定：所有统一规则集中在本文件；不要再往各模板里散写硬编码色值与字号。
   ========================================================================== */

:root{
  /* ---- 品牌色 ---- */
  --brand:#0069b9;          /* 主色（规范色） */
  --brand-dark:#005a9a;     /* hover / 按下 */
  --brand-light:#eaf3fb;    /* 浅底块 */
  --brand-tint:#f4f9fd;     /* 极浅背景 */

  /* ---- 中性色 ---- */
  --text:#202b36;           /* 标题 */
  --text-body:#4a5560;      /* 正文 */
  --text-muted:#6b7680;     /* 辅助信息 */
  --border:#ececec;         /* 分隔线 */
  --border-strong:#dfe3e8;
  --bg:#ffffff;
  --bg-soft:#f7f8fa;
  --accent:#00a06a;         /* 仅用于"上新/热卖"徽标 */

  /* ---- 字号阶梯 ---- */
  --fs-xs:12px; --fs-sm:14px; --fs-base:16px; --fs-lg:18px;
  --fs-xl:20px; --fs-2xl:24px; --fs-3xl:30px; --fs-4xl:36px;

  /* ---- 间距（4px 网格） ---- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px; --sp-8:32px;
  --sp-12:48px; --sp-20:80px; --sp-30:120px;

  /* ---- 圆角 / 阴影 / 动效 ---- */
  --radius-sm:4px; --radius-md:8px; --radius-lg:12px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.05);
  --shadow-md:0 4px 6px -1px rgba(0,0,0,.08), 0 2px 4px -2px rgba(0,0,0,.06);
  --shadow-lg:0 12px 20px -6px rgba(0,0,0,.12);
  --dur:200ms;
  --ease:cubic-bezier(.4,0,.2,1);

  /* ---- 字体栈（中文优先） ---- */
  --font:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB",
         "Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
}

/* ==========================================================================
   1. 基础排版
   ========================================================================== */
body{
  font-family:var(--font);
  font-size:var(--fs-base);
  line-height:1.8;
  color:var(--text-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4,h5,h6{
  font-family:var(--font);
  line-height:1.35;              /* 标题 1.35，正文 1.8 */
  color:var(--text);
  font-weight:700;
}
h1{font-size:var(--fs-4xl)}
h2{font-size:var(--fs-3xl)}
/* h3~h6 不做全局字号覆盖：正文内容里的 h3 常带自己的排版（含图片上的白字），
   统一字号会造成版面跳动，故只继承上面的行高/颜色规则。 */
p,li,dd,dt,td,th,label,blockquote{line-height:1.8}
img{max-width:100%}

/* 无障碍：仅屏幕阅读器可见 */
.sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
/* 键盘可达性 */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
}

/* ==========================================================================
   2. 区块标题统一（中文主标题 + 蓝色英文小字 + 2px 分隔线）
   ========================================================================== */
.hobi-about__side h2{
  font-size:var(--fs-3xl);
  font-weight:700;
  line-height:1.3;
  letter-spacing:1px;
  color:var(--text);
}
.hobi-about__side .en{
  font-size:var(--fs-xs);
  letter-spacing:3px;
  color:var(--brand);
  font-weight:600;
  text-transform:uppercase;
  line-height:1.6;
}
/* 招聘页 / 导航页页头：统一为同一套规格 */
.gw-head h2,.np-head h2{
  font-size:30px;
  font-weight:700;
  line-height:1.3;
  letter-spacing:.5px;
  color:#111;
}
.hobi-new-section-title{
  font-size:var(--fs-3xl);
  font-weight:700;
  line-height:1.3;
  color:var(--text);
}
.hobi-new-section-title>span{
  display:block;
  font-size:var(--fs-xs);
  font-weight:600;
  letter-spacing:3px;
  color:var(--brand);
  text-transform:uppercase;
  margin-bottom:6px;
}
.hobi-new-section-title::after{
  content:"";
  display:block;
  height:2px;
  background:var(--border);
  margin-top:var(--sp-4);
}
.brand_title,.history_title,.social_title,.newsd_title,.ns_title,.sa-c-title{
  font-size:var(--fs-2xl);
  font-weight:700;
  line-height:1.35;
  color:var(--text);
}
.history_title,.social_title{padding-left:var(--sp-4)}

/* ==========================================================================
   3. 卡片
   注意：产品卡标题（.hobi-product-card h3）在各模板里有自己的配色——
   newlist 是图片渐变上的白字、xinpin 是白底深字，这里【不要】统一它的
   颜色/字号，否则会造成白字变深色而在图片上不可读（2026-09-26 踩过）。
   只做 hover 反馈。
   ========================================================================== */
.hobi-product-card,
.hobi-latest-grid>div{
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.hobi-product-card:hover,
.hobi-latest-grid>div:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-lg);
}

/* ==========================================================================
   4. 按钮组件
   ========================================================================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-2);
  min-height:44px;
  padding:12px var(--sp-6);
  border-radius:var(--radius-md);
  border:0;
  font-family:var(--font);
  font-size:var(--fs-base);
  font-weight:600;
  line-height:1.4;
  text-decoration:none;
  cursor:pointer;
  transition:all var(--dur) var(--ease);
}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-dark)}
.btn-outline{background:transparent;border:2px solid var(--brand);color:var(--brand)}
.btn-outline:hover{background:var(--brand);color:#fff}
.btn-ghost{background:var(--brand-light);color:var(--brand)}
.btn-ghost:hover{background:var(--brand);color:#fff}

/* ==========================================================================
   5. 触控目标（移动端可达性：≥44px）
   ========================================================================== */
/* 手机端顶部 logo：给足 44px 触控高度 */
.sp_logo a{
  display:flex;
  align-items:center;
  min-height:44px;
}
/* PC 顶部 logo：这里**不要**设 min-height。
   .pc_header .logo a 是 display:block，里面的 img 也是 display:block，
   一旦把 <a> 撑到 44px，30px 高的 logo 会贴顶 → 整体上移约 7px（2026-09-26 引入、09-30 修复）。
   垂直居中由 header_home.htm 的 .pc_header .logo{align-items:center} 负责。 */
.logo a{ min-height:0; }
@media (max-width:992px){
  .tab-all,.tab-adult,.tab-kids,.hobi-tab,
  .hobi-new-section-more a,.mx-cta,
  .footer a,.footer-sy a,.hobi-footer a{
    min-height:44px;
    display:flex;
    align-items:center;
  }
  /* 轮播圆点：视觉尺寸不变，仅扩大可点区域 */
  .hobi-hero__dots{position:relative}
  .hobi-hero__dots::after{
    content:"";position:absolute;left:-17px;top:-17px;right:-17px;bottom:-17px;
  }
}

/* ==========================================================================
   6. 移动端字号
   ========================================================================== */
@media (max-width:768px){
  body{font-size:var(--fs-base)}
  .hobi-about__side h2{font-size:var(--fs-2xl)}
  .gw-head h2,.np-head h2{font-size:var(--fs-2xl)}
  .hobi-new-section-title{font-size:var(--fs-2xl)}
  .hobi-product-head h1{font-size:var(--fs-2xl)}
  .brand_title,.history_title,.social_title,.newsd_title,.ns_title{font-size:var(--fs-xl)}
  .hobi-product-card h3,.newlist-card h3,.xinpin-card h3{font-size:var(--fs-base)}
}

/* ==========================================================================
   7. 区块分隔与节奏
   ========================================================================== */
.hobi-about__side{border-right:2px solid var(--border)}
.gw-head,.np-head{border-bottom:2px solid var(--border)}
section.hobi-new-section + section.hobi-new-section{margin-top:var(--sp-20)}
@media (max-width:768px){
  section.hobi-new-section + section.hobi-new-section{margin-top:var(--sp-12)}
}

/* ==========================================================================
   8. 降级保护：尊重用户的减少动效偏好
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .hobi-product-card:hover,.newlist-card:hover,.xinpin-card:hover{transform:none}
}