/* === tokens.css === */
/* tokens.css —— 设计令牌
   视觉基线对齐 kakobuy.com 渲染态：暖橙主色 #ff5000（hover #e5152c）、#333 深色导航条、
   白底 + #f5f5f5 分区、4px 小圆角、33px 胶囊按钮、Ant 式细边框与浅阴影。
   目的：从官方站跳过来的用户不应感到"换了一个世界"。 */
:root {
  /* 主色（kakobuy.com :root 自定义变量） */
  --color-brand: #ff5000;
  --color-brand-hover: #e5152c;
  --color-brand-dark: #e5152c;      /* 兼容旧名：hover/深色态 */
  --color-brand-strong: #a8071a;
  --color-brand-light: #ff7a45;     /* 兼容旧名：浅一档的橙 */
  --color-brand-bg: #fff2ec;
  --color-brand-line: #ffd6c2;

  /* 语义色（Ant 默认） */
  --color-accent: #faad14;
  --color-success: #52c41a;
  --color-warn: #faad14;
  --color-danger: #f5222d;
  --color-info: #1890ff;

  /* 文本（kakobuy 文本阶：#333 / #666 / #999） */
  --color-ink: #333333;
  --color-ink-soft: #666666;
  --color-ink-mute: #999999;

  /* 背景与分隔线 */
  --color-bg: #ffffff;
  --color-bg-soft: #f5f5f5;
  --color-bg-mute: #fafafa;
  --color-dark: #333333;
  --color-dark-2: #3d3d3d;
  --color-line: #e8e8e8;
  --color-line-strong: #d9d9d9;

  /* 字体：与 kakobuy.com 一致的系统字体栈优先，不加载外部字体（省一次 RTT，利 CWV） */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --fs-xs: 12px; --fs-sm: 14px; --fs-md: 16px; --fs-lg: 20px;
  --fs-xl: 28px; --fs-2xl: 32px; --fs-3xl: 40px;
  --fw-regular: 400; --fw-medium: 500; --fw-bold: 600;
  --lh-tight: 1.25; --lh-normal: 1.6;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* 圆角：kakobuy 组件 4px 为主，卡片 4–8px，CTA 一律 33px 胶囊 */
  --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-pill: 33px;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 3px rgba(0, 0, 0, .06);
  --shadow-2: 0 2px 8px rgba(0, 0, 0, .09);
  --shadow-3: 0 6px 16px rgba(0, 0, 0, .12);
  --container: 1200px; --container-narrow: 760px;
  --header-h: 65px; --nav-h: 40px; --strip-h: 40px; --touch-min: 40px;
  --dur: 200ms; --ease: cubic-bezier(.645, .045, .355, 1);
}

/* === base.css === */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-sans);font-size:var(--fs-sm);line-height:var(--lh-normal);color:var(--color-ink);background:var(--color-bg);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--color-brand);text-decoration:none;transition:color var(--dur) var(--ease)}
a:hover{color:var(--color-brand-hover);text-decoration:none}
h1,h2,h3,h4{line-height:var(--lh-tight);margin:0 0 var(--sp-4);color:var(--color-ink);font-weight:var(--fw-bold);letter-spacing:-.01em}
h1{font-size:clamp(28px,3.6vw,var(--fs-3xl))}
h2{font-size:clamp(22px,2.6vw,var(--fs-2xl));margin-top:var(--sp-7)}
h3{font-size:var(--fs-lg);font-weight:var(--fw-bold)}
p{margin:0 0 var(--sp-4)}
ul,ol{margin:0 0 var(--sp-4);padding-left:1.2em}
code{font-family:var(--font-mono);background:var(--color-bg-soft);padding:0 .3em;border-radius:var(--radius-sm)}
strong,b{font-weight:var(--fw-bold)}
::selection{background:var(--color-brand);color:#fff}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--color-brand);color:#fff;padding:var(--sp-3);z-index:60}
.skip-link:focus{left:var(--sp-3);top:var(--sp-3)}
.kicker{text-transform:uppercase;letter-spacing:.12em;font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--color-brand);margin:0 0 var(--sp-2)}
.lede{font-size:var(--fs-md);color:var(--color-ink-soft);line-height:1.7}
.section-note,.table-note,.grid-note{font-size:var(--fs-xs);color:var(--color-ink-mute)}
.status-banner{display:flex;gap:var(--sp-2);align-items:center;font-size:var(--fs-xs);color:var(--color-ink-soft);background:var(--color-brand-bg);border:1px solid var(--color-brand-line);border-radius:var(--radius-md);padding:10px var(--sp-3);margin:0 0 var(--sp-5)}
.status-banner::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--color-success);flex:0 0 auto}
.count{display:inline-block;min-width:2.4em;text-align:right;color:var(--color-ink-mute);font-size:var(--fs-xs);font-variant-numeric:tabular-nums}
.tag{display:inline-block;background:var(--color-bg-soft);border:1px solid var(--color-line);border-radius:var(--radius-sm);padding:0 6px;font-size:var(--fs-xs);color:var(--color-ink-soft);margin:0 var(--sp-1) var(--sp-1) 0;line-height:1.8}
.tag--brand{background:var(--color-brand-bg);border-color:var(--color-brand-line);color:var(--color-brand-strong)}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}

/* === layout.css === */
/* layout.css —— 顶部三层（活动条 / 白底头部 / 深色导航）+ 页脚 + 栅格
   结构与 kakobuy.com 一致：promo strip 40px → header 65px → nav 40px，内容容器 1200px。 */
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--sp-4)}
main{padding-bottom:var(--sp-8)}
section{margin:var(--sp-6) 0}
.grid{display:grid;gap:var(--sp-4)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.dual-nav{display:grid;gap:var(--sp-5);grid-template-columns:1fr 1fr;align-items:start}

/* ---------- 活动条 ---------- */
.promo-strip{background:linear-gradient(90deg,#1b0b2e 0%,#451340 42%,#a3301a 76%,var(--color-brand) 100%);color:#fff;font-size:13px;height:var(--strip-h);display:flex;align-items:center}
.promo-strip__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);width:100%}
.promo-strip__msg{display:flex;align-items:center;gap:8px;margin:0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.promo-strip__spark{width:6px;height:6px;border-radius:50%;background:#ffd666;box-shadow:0 0 8px #ffd666;flex:0 0 auto}
.promo-strip__msg b{font-weight:var(--fw-bold)}
.promo-strip__link{color:#fff;font-size:12px;white-space:nowrap;opacity:.9;text-decoration:underline;text-underline-offset:3px}
.promo-strip__link:hover{color:#ffd666;opacity:1}

/* ---------- 头部 ---------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--color-bg);border-bottom:1px solid var(--color-line)}
.site-header.is-scrolled{box-shadow:0 2px 8px rgba(0,0,0,.08)}
.site-header__bar{display:flex;align-items:center;gap:var(--sp-5);height:var(--header-h)}
.site-header__brand{display:flex;align-items:center;gap:10px;flex:0 0 auto;color:var(--color-ink)}
.site-header__brand:hover{text-decoration:none}
.brand-mark{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;color:#fff;font-size:19px;font-weight:700;line-height:1;background:linear-gradient(135deg,#ff8a3d,#ff5000 58%,#e5152c);box-shadow:0 2px 6px rgba(255,80,0,.28)}
.site-header__brandtext{display:flex;flex-direction:column;line-height:1.1;white-space:nowrap}
.site-header__brandtext strong{font-size:15px;font-weight:var(--fw-bold);color:var(--color-ink)}
.site-header__brandtext small{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-ink-mute);margin-top:3px}
.site-search{display:flex;align-items:stretch;flex:1 1 300px;max-width:420px;height:40px;border:1px solid var(--color-line);border-radius:var(--radius-md);overflow:hidden;background:var(--color-bg-mute);transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.site-search:focus-within{border-color:var(--color-brand);background:#fff;box-shadow:0 0 0 2px rgba(255,80,0,.10)}
.site-search input{border:0;background:transparent;padding:0 var(--sp-3);font-size:var(--fs-sm);width:100%;min-width:0;color:var(--color-ink)}
.site-search input::placeholder{color:var(--color-ink-mute)}
.site-search input:focus{outline:none}
.site-search button{display:flex;align-items:center;justify-content:center;gap:6px;border:0;background:var(--color-brand);color:#fff;width:56px;flex:0 0 auto;cursor:pointer;font-size:0}
.site-search button:hover{background:var(--color-brand-hover)}
.site-search button svg{width:18px;height:18px}
.site-search--mobile{max-width:none;flex:1 1 auto;margin-bottom:var(--sp-3)}
.site-header__quick{display:flex;align-items:center;gap:18px;font-size:13px;color:var(--color-ink-soft);white-space:nowrap}
.site-header__quick a{color:var(--color-ink-soft)}
.site-header__quick a:hover{color:var(--color-brand)}
.site-header__promo{margin-left:auto}
.site-header__promo .promo-btn{height:36px;min-height:36px;padding:0 20px;font-size:13px}

/* ---------- 深色主导航 ---------- */
.mainnav{background:var(--color-dark)}
.mainnav__inner{display:flex;align-items:stretch;height:var(--nav-h);overflow-x:auto;scrollbar-width:none}
.mainnav__inner::-webkit-scrollbar{display:none}
.mainnav a{display:flex;align-items:center;padding:0 22px;color:#fff;font-size:14px;white-space:nowrap;transition:background var(--dur) var(--ease)}
.mainnav a:hover{background:var(--color-brand);color:#fff}
.mainnav a.is-active{background:var(--color-brand);color:#fff;font-weight:var(--fw-medium)}
.mainnav__spacer{flex:1}
.mainnav__aside{display:flex;align-items:center;padding-right:var(--sp-4);color:rgba(255,255,255,.55);font-size:12px;white-space:nowrap}
.mainnav__aside a{color:rgba(255,255,255,.75);padding:0 10px}
.mainnav__aside a:hover{background:transparent;color:#fff;text-decoration:underline}

/* ---------- 页脚 ---------- */
.site-footer{margin-top:var(--sp-8);background:var(--color-dark);color:#bfbfbf;padding:var(--sp-7) 0 var(--sp-5)}
.site-footer__grid{display:grid;gap:var(--sp-6);grid-template-columns:2fr 1fr 1fr 1fr}
.site-footer__brand{color:#fff;font-size:18px;font-weight:var(--fw-bold);margin:0 0 var(--sp-2)}
.site-footer__note{font-size:12px;line-height:1.7;color:#999;margin:0;max-width:38ch}
.site-footer__note a{color:#ff9a6a}
.site-footer__head{color:#fff;font-size:14px;font-weight:var(--fw-medium);margin:0 0 var(--sp-3)}
.site-footer__col a{display:block;padding:5px 0;font-size:13px;color:#bfbfbf}
.site-footer__col a:hover{color:#ff7a45}
.site-footer__bottom{display:flex;justify-content:space-between;gap:var(--sp-4);align-items:center;margin-top:var(--sp-6);padding-top:var(--sp-4);border-top:1px solid rgba(255,255,255,.12);font-size:12px;color:#8c8c8c;flex-wrap:wrap}
.site-footer__bottom p{margin:0}
.site-footer .promo-footer__note{color:#8c8c8c}

/* ---------- 面包屑 / 侧栏 ---------- */
.breadcrumb ol{display:flex;gap:6px;list-style:none;padding:0;margin:var(--sp-4) 0;font-size:var(--fs-xs);color:var(--color-ink-mute);flex-wrap:wrap;align-items:center}
.breadcrumb a{color:var(--color-ink-mute)}
.breadcrumb a:hover{color:var(--color-brand)}
.breadcrumb li[aria-hidden]{color:var(--color-line-strong)}
.filter-sidebar{float:none}
.toc-sidebar{display:none}
.mobile-nav{display:block;padding:var(--sp-4);border-top:1px solid var(--color-line);background:#fff}
.mobile-nav a{display:block;padding:var(--sp-3) 0;border-bottom:1px solid var(--color-line);color:var(--color-ink)}
.mobile-nav a:hover{color:var(--color-brand)}
.nav-toggle{display:inline-flex;flex-direction:column;gap:4px;background:none;border:0;padding:10px 6px;cursor:pointer}
.nav-toggle span{width:20px;height:2px;background:var(--color-ink);transition:transform var(--dur) var(--ease)}

@media (max-width:1199px){
  .site-header__quick{display:none}
  .site-search{max-width:340px}
}
@media (max-width:1023px){
  .site-search{display:none}
}
@media (max-width:900px){
  .grid--3,.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dual-nav{grid-template-columns:1fr}
  .site-footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
  .site-header__bar{gap:var(--sp-2);height:56px}
  .site-header__brandtext strong{font-size:13px}
  .site-header__brandtext small{font-size:9px;letter-spacing:.08em}
  .brand-mark{width:30px;height:30px;font-size:16px;border-radius:7px}
  .site-header__promo .promo-btn{height:34px;min-height:34px;padding:0 12px;font-size:12px}
  .mainnav a{padding:0 14px;font-size:13px}
  .mainnav__aside{display:none}
  .promo-strip{height:auto;font-size:11px;padding:6px 0}
  .promo-strip__inner{gap:var(--sp-2)}
  .promo-strip__link{font-size:11px}
  main{padding-bottom:var(--sp-6)}
  .site-footer__grid{grid-template-columns:1fr 1fr;gap:var(--sp-5)}
  .site-footer__bottom{flex-direction:column;align-items:flex-start}
}
@media (min-width:769px){
  .nav-toggle,.mobile-nav{display:none}
}
@media (min-width:1024px){
  /* 两栏布局只作用于 main > .container，避免 body 变成网格把 header/footer 挤成一列 */
  .layout--cat-grid main > .container{display:grid;grid-template-columns:260px minmax(0,1fr);column-gap:var(--sp-6);row-gap:var(--sp-6);align-items:start}
  .layout--cat-grid main > .container > *{grid-column:1 / -1;margin-top:0;margin-bottom:0}
  .layout--cat-grid main > .container > .filter-sidebar{grid-column:1}
  .layout--cat-grid main > .container > .product-grid-wrap{grid-column:2}
  .layout--guide-article main > .container{display:grid;grid-template-columns:minmax(0,1fr) 260px;column-gap:var(--sp-6);row-gap:var(--sp-6);align-items:start}
  .layout--guide-article main > .container > *{grid-column:1;margin-top:0;margin-bottom:0}
  .layout--guide-article main > .container > .breadcrumb,
  .layout--guide-article main > .container > .guide-hero,
  .layout--guide-article main > .container > .cta-bar{grid-column:1 / -1}
  .layout--guide-article main > .container > .toc-sidebar{grid-column:2;grid-row:3 / span 3;align-self:start}
  .toc-sidebar{display:block;position:sticky;top:calc(var(--header-h) + var(--nav-h) + 16px);align-self:start}
  .filter-sidebar{position:sticky;top:calc(var(--header-h) + var(--nav-h) + 16px);height:max-content}
}

/* ---------- 窄屏头部与活动条 ---------- */
@media (max-width:640px){
  .promo-strip{font-size:12px}
  .promo-strip__inner{justify-content:flex-start}
  .promo-strip__msg span:not(.promo-strip__spark){display:none}
  .promo-strip__msg b{overflow:hidden;text-overflow:ellipsis}
  .promo-strip__link{display:none}
  .site-header__quick{display:none}
  .site-header__promo{margin-left:auto}
  .site-header__promo .promo-btn{height:34px;min-height:34px;padding:0 12px;font-size:12px;white-space:nowrap}
  .site-header__brandtext strong{font-size:13px;white-space:nowrap}
  .site-search{flex:1 1 80px;max-width:none;height:36px}
}

/* === components.css === */
/* components.css —— 按钮 / 卡片 / 表格 / 筛选器 / CTA 带
   视觉对齐 kakobuy.com：橙色胶囊 CTA、白卡片 + #e8e8e8 细边、浅阴影、4px 圆角。 */

/* ---------- 按钮 ---------- */
.promo-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:var(--touch-min);padding:0 var(--sp-5);border-radius:var(--radius-pill);background:var(--color-brand);color:#fff;font-weight:var(--fw-medium);font-size:var(--fs-sm);border:1px solid var(--color-brand);box-shadow:0 2px 0 rgba(0,0,0,.02);transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.promo-btn:hover{background:var(--color-brand-hover);border-color:var(--color-brand-hover);color:#fff;text-decoration:none}
.promo-btn:active{background:var(--color-brand-strong);border-color:var(--color-brand-strong)}
.promo-btn--ghost{background:transparent;color:var(--color-brand);border-color:var(--color-brand-line)}
.promo-btn--ghost:hover{background:var(--color-brand-bg);border-color:var(--color-brand);color:var(--color-brand)}
.promo-btn--footer{background:var(--color-brand);color:#fff}
.promo-link{display:inline-block;padding:var(--sp-2) 0;font-weight:var(--fw-medium)}
.btn--ghost{display:inline-flex;align-items:center;justify-content:center;min-height:var(--touch-min);padding:0 var(--sp-5);border-radius:var(--radius-pill);border:1px solid var(--color-line-strong);color:var(--color-ink);background:#fff;font-size:var(--fs-sm);transition:all var(--dur) var(--ease)}
.btn--ghost:hover{border-color:var(--color-brand);color:var(--color-brand);background:var(--color-brand-bg)}

/* ---------- 商品卡 ---------- */
.product-card{border:1px solid var(--color-line);border-radius:var(--radius-md);overflow:hidden;background:var(--color-bg);transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease),border-color var(--dur) var(--ease);display:flex;flex-direction:column}
.product-card:hover{box-shadow:var(--shadow-3);transform:translateY(-2px);border-color:#f0f0f0}
.product-card__media{position:relative;display:block;overflow:hidden;background:var(--color-bg-soft)}
.product-card__media img{aspect-ratio:1/1;object-fit:cover;width:100%;height:auto;display:block;opacity:0;transition:transform .5s var(--ease),opacity .35s var(--ease)}
.product-card__media img.is-loaded{opacity:1}
.product-card:hover .product-card__media img{transform:scale(1.04)}
.product-card__hover{position:absolute;inset-inline:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:6px;padding:8px 10px;font-size:var(--fs-xs);color:#fff;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.55));opacity:0;transition:opacity var(--dur) var(--ease)}
.product-card:hover .product-card__hover,.product-card__media:focus-visible .product-card__hover{opacity:1}
.product-card__body{padding:10px 12px 14px;display:flex;flex-direction:column;gap:4px;flex:1}
.product-card__title{font-size:13px;margin:0;line-height:1.45;font-weight:var(--fw-regular)}
.product-card__title a{color:var(--color-ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.product-card__title a:hover{color:var(--color-brand)}
.product-card__meta{margin:0;font-size:var(--fs-xs);color:var(--color-ink-mute);display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.product-card__meta a{color:var(--color-ink-soft)}
.product-card__meta a:hover{color:var(--color-brand)}
.product-card__price{margin:auto 0 0;padding-top:6px;display:flex;align-items:baseline;gap:6px;font-size:var(--fs-xs);color:var(--color-ink-mute);flex-wrap:nowrap;white-space:nowrap;overflow:hidden}
.product-card__price strong{color:var(--color-brand);font-size:17px;font-weight:var(--fw-bold);letter-spacing:-.01em}
.product-card__price em{margin-left:auto;font-style:normal;font-size:10px;line-height:1.6;letter-spacing:.04em;text-transform:uppercase;color:var(--color-ink-mute);border:1px solid var(--color-line);border-radius:var(--radius-sm);padding:0 5px;background:var(--color-bg-mute)}

/* ---------- QC 卡 ---------- */
.qc-card{border:1px solid var(--color-line);border-radius:var(--radius-md);overflow:hidden;background:var(--color-bg);display:flex;flex-direction:column;transition:box-shadow var(--dur) var(--ease)}
.qc-card:hover{box-shadow:var(--shadow-2)}
.qc-card__thumb{position:relative;display:block;padding:0;border:0;background:var(--color-bg-soft);cursor:zoom-in;width:100%;overflow:hidden}
.qc-card__thumb img{aspect-ratio:1/1;object-fit:cover;width:100%;height:auto;display:block;opacity:0;transition:transform .5s var(--ease),opacity .35s var(--ease)}
.qc-card__thumb img.is-loaded{opacity:1}
.qc-card__thumb:hover img{transform:scale(1.04)}
.qc-card__zoom{position:absolute;top:8px;right:8px;padding:2px 8px;border-radius:var(--radius-pill);background:rgba(0,0,0,.55);color:#fff;font-size:10px;letter-spacing:.04em;text-transform:uppercase;opacity:0;transition:opacity var(--dur) var(--ease)}
.qc-card__thumb:hover .qc-card__zoom,.qc-card__thumb:focus-visible .qc-card__zoom{opacity:1}
.qc-card__body{padding:var(--sp-3);display:flex;flex-direction:column;gap:var(--sp-2);flex:1}
.qc-card__title{font-size:13px;margin:0}
.qc-card__meta{margin:0;font-size:var(--fs-xs);color:var(--color-ink-soft)}

/* ---------- 列表 / 矩阵 / 优惠券 ---------- */
.tool-card{border:1px solid var(--color-line);border-radius:var(--radius-md);padding:var(--sp-4);background:var(--color-bg-soft);transition:box-shadow var(--dur) var(--ease),background var(--dur) var(--ease)}
.tool-card:hover{background:#fff;box-shadow:var(--shadow-2)}
.chip-list{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.chip-list a{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--color-line);border-radius:var(--radius-pill);padding:6px 12px;font-size:13px;background:var(--color-bg);color:var(--color-ink-soft)}
.chip-list a:hover{border-color:var(--color-brand);color:var(--color-brand);background:var(--color-brand-bg)}
.chip-list .count{color:var(--color-ink-mute);font-size:11px}
.cat-list{list-style:none;padding:0;margin:0}
.cat-list li{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--color-line);padding:9px 0}
.cat-list li:last-child{border-bottom:0}
.cat-list a{color:var(--color-ink);font-size:14px}
.cat-list a:hover{color:var(--color-brand)}
.cat-cards{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.cat-card{display:block;border:1px solid var(--color-line);border-radius:var(--radius-md);padding:var(--sp-4);background:var(--color-bg);color:inherit;transition:all var(--dur) var(--ease)}
.cat-card:hover{border-color:var(--color-brand);box-shadow:var(--shadow-2);color:var(--color-brand)}
.cat-card__name{display:block;font-weight:var(--fw-bold);font-size:15px}
.brand-matrix__grid{display:grid;gap:var(--sp-2);grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.brand-tile{display:flex;justify-content:space-between;align-items:center;gap:8px;border:1px solid var(--color-line);border-radius:var(--radius-md);padding:10px 12px;background:var(--color-bg);color:var(--color-ink)}
.brand-tile:hover{border-color:var(--color-brand);color:var(--color-brand);box-shadow:var(--shadow-1)}
.coupon-cards{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.coupon-card{border:1px solid var(--color-brand-line);border-left:4px solid var(--color-brand);border-radius:var(--radius-md);padding:var(--sp-4);background:linear-gradient(180deg,var(--color-brand-bg),#fff 70%)}
.coupon-card__code{font-weight:var(--fw-bold);font-size:var(--fs-lg);color:var(--color-brand);margin:0;letter-spacing:.02em}
.coupon-card__scope{font-size:var(--fs-xs);color:var(--color-ink-soft);margin:var(--sp-2) 0 0}

/* ---------- 步骤 / 时间线 / FAQ ---------- */
.steps__list{list-style:none;padding:0;margin:0;display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.steps__list li{border:1px solid var(--color-line);border-radius:var(--radius-md);background:#fff;padding:var(--sp-5) var(--sp-4);transition:box-shadow var(--dur) var(--ease)}
.steps__list li:hover{box-shadow:var(--shadow-2)}
.steps__list h3{font-size:15px;margin:var(--sp-3) 0 var(--sp-1)}
.steps__list p{font-size:13px;color:var(--color-ink-soft);margin:0;line-height:1.65}
.steps__n{display:inline-flex;width:32px;height:32px;border-radius:50%;background:var(--color-brand);color:#fff;align-items:center;justify-content:center;font-size:14px;font-weight:var(--fw-bold)}
.timeline{list-style:none;padding:0}
.timeline li{border-left:2px solid var(--color-brand-line);padding:0 0 var(--sp-4) var(--sp-4);position:relative}
.timeline li::before{content:"";position:absolute;left:-6px;top:5px;width:10px;height:10px;border-radius:50%;background:var(--color-brand)}
.faq__list details{border:1px solid var(--color-line);border-radius:var(--radius-md);margin-bottom:var(--sp-2);background:var(--color-bg);transition:box-shadow var(--dur) var(--ease)}
.faq__list details[open]{box-shadow:var(--shadow-2);border-color:var(--color-brand-line)}
.faq__list summary{cursor:pointer;padding:14px var(--sp-4);font-weight:var(--fw-medium);font-size:14px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq__list summary::-webkit-details-marker{display:none}
.faq__list summary::after{content:"+";color:var(--color-brand);font-size:18px;line-height:1;font-weight:400}
.faq__list details[open] summary::after{content:"–"}
.faq__a{padding:0 var(--sp-4) var(--sp-4);color:var(--color-ink-soft);font-size:14px}
.faq__a p{margin:0}

/* ---------- 表格 ---------- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--color-line);border-radius:var(--radius-md)}
table{width:100%;border-collapse:collapse;font-size:13px;background:#fff}
th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--color-line)}
thead th{background:var(--color-bg-mute);font-weight:var(--fw-bold);color:var(--color-ink);white-space:nowrap}
tbody tr:hover{background:var(--color-brand-bg)}
tbody tr:last-child td{border-bottom:0}
.fee-breakdown details{margin-bottom:var(--sp-2);border:1px solid var(--color-line);border-radius:var(--radius-md);padding:var(--sp-3)}
.fee-breakdown details[open]{background:var(--color-bg-mute)}

/* ---------- 表单 / 工具 ---------- */
.calculator{display:grid;gap:var(--sp-4);border:1px solid var(--color-line);border-radius:var(--radius-lg);padding:var(--sp-5);background:#fff;box-shadow:var(--shadow-2)}
.calculator__field{display:grid;gap:6px}
.calculator__field label{font-size:13px;color:var(--color-ink-soft)}
.calculator select,.calculator input,.qc-finder input,.link-converter textarea{min-height:40px;padding:8px 12px;border:1px solid var(--color-line);border-radius:var(--radius-md);font-size:14px;width:100%;font-family:inherit;color:var(--color-ink);background:#fff;transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.calculator select:focus,.calculator input:focus,.qc-finder input:focus,.link-converter textarea:focus{outline:none;border-color:var(--color-brand);box-shadow:0 0 0 2px rgba(255,80,0,.12)}
.calculator__error{color:var(--color-danger);margin:0;font-size:13px}
.result-panel__out{border:1px solid var(--color-line);border-radius:var(--radius-md);padding:var(--sp-4);background:var(--color-bg-mute);min-height:72px}
.evidence__card{border:1px solid var(--color-line);border-radius:var(--radius-md);padding:var(--sp-4);background:#fff}
.verdict{border-left:4px solid var(--color-brand);background:var(--color-brand-bg);padding:var(--sp-5);border-radius:var(--radius-md)}
.prose--guide{max-width:var(--container-narrow)}
.mini-block{border:1px solid var(--color-line);border-radius:var(--radius-md);padding:var(--sp-4);background:var(--color-bg-soft)}

/* ---------- CTA 带（整幅橙色） ---------- */
.cta-bar{margin-inline:calc(50% - 50vw);background:linear-gradient(100deg,#c81e0a 0%,var(--color-brand) 55%,#ff7a45 100%);color:#fff;padding:var(--sp-7) 0;position:relative;overflow:hidden}
.cta-bar::after{content:"";position:absolute;inset:0;background:url("/assets/pattern-dots.svg") repeat;opacity:.55;pointer-events:none}
.cta-bar__inner{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);flex-wrap:wrap;max-width:var(--container);margin:0 auto;padding:0 var(--sp-4)}
.cta-bar__text{font-size:20px;font-weight:var(--fw-bold);margin:0;max-width:52ch}
.cta-bar .promo-link{color:#fff;text-decoration:underline;text-underline-offset:3px}
.cta-bar .promo-btn{background:#fff;border-color:#fff;color:var(--color-brand);min-height:42px;padding:0 26px}
.cta-bar .promo-btn:hover{background:#fff2ec;border-color:#fff2ec;color:var(--color-brand-hover)}
.promo-footer{margin-top:var(--sp-3)}
.promo-footer__note{font-size:12px;color:#8c8c8c}

/* ---------- 辅助 ---------- */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
[hidden]{display:none!important}
.lang-switch{display:flex;gap:var(--sp-1);font-size:var(--fs-xs);text-transform:uppercase}
.lang-switch a{padding:6px;color:var(--color-ink-soft)}
.nav-more{position:relative}
.nav-more summary{cursor:pointer;list-style:none}
.nav-more__panel{position:absolute;background:var(--color-bg);border:1px solid var(--color-line);border-radius:var(--radius-md);padding:var(--sp-3);min-width:200px;box-shadow:var(--shadow-3);z-index:20}
.nav-more__panel a{display:block;padding:var(--sp-1) 0}
[dir="rtl"] .site-header__bar{flex-direction:row-reverse}
[dir="rtl"] .timeline li,[dir="rtl"] .steps__list li{border-left:0;border-right:2px solid var(--color-brand-line);padding:0 var(--sp-4) var(--sp-4) 0}

/* ---------- 返回顶部 / 焦点 ---------- */
.back-top{position:fixed;right:var(--sp-5);bottom:var(--sp-6);z-index:40;width:44px;height:44px;border-radius:50%;border:1px solid var(--color-line);background:#fff;color:var(--color-brand);font-size:18px;box-shadow:var(--shadow-3);cursor:pointer;opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.back-top.is-visible{opacity:1;pointer-events:auto;transform:none}
.back-top:hover{background:var(--color-brand);color:#fff;border-color:var(--color-brand)}
:focus-visible{outline:2px solid var(--color-brand);outline-offset:2px}

/* ---------- Finds 筛选器 ---------- */
.finder{border:1px solid var(--color-line);border-radius:var(--radius-lg);padding:var(--sp-4);background:#fff;margin:var(--sp-5) 0;box-shadow:var(--shadow-2)}
.finder__row{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.finder__form{flex:1 1 240px;margin:0;display:flex}
.finder__input{flex:1;min-height:40px;border:1px solid var(--color-line);border-radius:var(--radius-md);padding:0 var(--sp-3);font-size:14px;background:#fff;font-family:inherit}
.finder__input:focus{outline:none;border-color:var(--color-brand);box-shadow:0 0 0 2px rgba(255,80,0,.12)}
.finder__reset{background:#fff;border-color:var(--color-line-strong);color:var(--color-ink-soft);min-height:40px;border-radius:var(--radius-md);padding:0 16px}
.finder__reset:hover{border-color:var(--color-brand);color:var(--color-brand)}
.finder__chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--sp-3)}
.finder__chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--color-line);background:#fff;border-radius:var(--radius-pill);padding:6px var(--sp-3);font-size:13px;cursor:pointer;color:var(--color-ink-soft);transition:all var(--dur) var(--ease);font-family:inherit}
.finder__chip span{font-size:11px;color:var(--color-ink-mute)}
.finder__chip:hover{border-color:var(--color-brand);color:var(--color-brand)}
.finder__chip.is-active{background:var(--color-brand);border-color:var(--color-brand);color:#fff}
.finder__chip.is-active span{color:rgba(255,255,255,.85)}
.finder__count{margin:var(--sp-3) 0 0;font-size:13px;color:var(--color-ink-soft)}
.finder__controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.finder__select{min-height:40px;padding:0 10px;border:1px solid var(--color-line);border-radius:var(--radius-md);background:#fff;font-size:13px;color:var(--color-ink-soft);max-width:220px;font-family:inherit}
.finder__select:focus{outline:none;border-color:var(--color-brand);box-shadow:0 0 0 2px rgba(255,80,0,.12)}
.finder__empty{margin:var(--sp-2) 0 0;font-size:13px;color:var(--color-ink-soft)}

@media (max-width:900px){
  .steps__list{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
  .product-card__body{padding:8px 10px 12px}
  .product-card__price strong{font-size:15px}
  .finder__row{flex-wrap:wrap}
  .finder__controls{width:100%}
  .finder__select{flex:1;max-width:none}
  .cta-bar{padding:var(--sp-6) 0;text-align:center}
  .cta-bar__inner{justify-content:center}
  .cta-bar__text{font-size:17px;text-align:center}
}
@media (max-width:520px){
  .product-card__price em{display:none}
  .steps__list{grid-template-columns:1fr}
  .product-card__title{font-size:12px}
}

/* === pages.css === */
/* pages.css —— 页面配方视觉：首页大图 hero、分区标题、分类/品牌/指南/工具各自的头部
   全部沿用 tokens 的橙 + #333 + #f5f5f5 语言，只改组合方式，保证每个布局仍然不同。 */

/* ---------- 首页 hero（整幅大图 + 搜索 + 三步） ---------- */
.hero{position:relative;margin-inline:calc(50% - 50vw);padding:clamp(48px,6vw,84px) 0 clamp(40px,4vw,60px);color:#fff;background:#231208;overflow:hidden;isolation:isolate}
.hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero__scrim{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(95deg,rgba(18,9,4,.88) 0%,rgba(18,9,4,.62) 46%,rgba(18,9,4,.22) 100%),
  radial-gradient(120% 90% at 50% 0%,rgba(255,122,26,.22),transparent 60%)}
.hero__inner{max-width:820px;margin:0 auto;text-align:center;position:relative}
.hero .kicker{color:#ffb27a;text-shadow:0 1px 8px rgba(0,0,0,.3)}
.hero h1{color:#fff;font-size:clamp(28px,3.8vw,44px);letter-spacing:-.015em;margin-bottom:var(--sp-3);text-shadow:0 2px 18px rgba(0,0,0,.25)}
.hero__sub{color:rgba(255,255,255,.88);font-size:var(--fs-md);line-height:1.7;max-width:64ch;margin:0 auto var(--sp-5)}
.hero__search{display:flex;align-items:stretch;height:56px;max-width:560px;margin:0 auto var(--sp-5);background:#fff;border-radius:var(--radius-pill);overflow:hidden;box-shadow:0 12px 32px rgba(0,0,0,.28)}
.hero__search input{flex:1;min-width:0;border:0;padding:0 22px;font-size:15px;font-family:inherit;color:var(--color-ink)}
.hero__search input::placeholder{color:var(--color-ink-mute)}
.hero__search input:focus{outline:none}
.hero__search button{display:flex;align-items:center;gap:8px;border:0;background:var(--color-brand);color:#fff;font-size:15px;font-weight:var(--fw-medium);padding:0 30px;cursor:pointer;font-family:inherit;transition:background var(--dur) var(--ease)}
.hero__search button:hover{background:var(--color-brand-hover)}
.hero__search button svg{width:18px;height:18px}
.hero__actions{display:flex;gap:var(--sp-3);flex-wrap:wrap;justify-content:center;margin-top:var(--sp-2)}
.hero .promo-btn{min-height:44px;padding:0 28px;font-size:15px}
.hero .btn--ghost{min-height:44px;padding:0 26px;font-size:15px;background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.55);color:#fff;backdrop-filter:blur(2px)}
.hero .btn--ghost:hover{background:#fff;color:var(--color-brand);border-color:#fff}
.hero__steps{list-style:none;display:flex;margin:clamp(28px,4vw,44px) auto 0;padding:0;max-width:720px;counter-reset:step}
.hero__steps li{flex:1;position:relative;padding-top:24px;text-align:center;color:rgba(255,255,255,.82);font-size:var(--fs-xs)}
.hero__steps li::before{content:"";position:absolute;top:3px;left:50%;width:11px;height:11px;border-radius:50%;background:#fff;transform:translateX(-50%);box-shadow:0 0 0 4px rgba(255,255,255,.16)}
.hero__steps li::after{content:"";position:absolute;top:8px;left:50%;width:100%;height:1px;background:rgba(255,255,255,.35)}
.hero__steps li:last-child::after{display:none}
.hero__steps b{display:block;color:#fff;font-size:14px;font-weight:var(--fw-bold);margin-bottom:2px}

/* ---------- 通用页头 ---------- */
.page-head{padding:var(--sp-5) 0 0;max-width:860px}
.page-head .kicker{margin-bottom:var(--sp-2)}
.page-head h1{font-size:clamp(26px,3.2vw,36px);margin-bottom:var(--sp-3)}
.page-head .lede{font-size:var(--fs-md);color:var(--color-ink-soft);max-width:70ch;margin:0}
.layout--home section > h2{text-align:center}
.layout--home section > .section-note{text-align:center;margin:-8px auto var(--sp-5);max-width:70ch}

/* ---------- 首页分区 ---------- */
.dual-nav__col{background:#fff;border:1px solid var(--color-line);border-radius:var(--radius-lg);padding:var(--sp-5);transition:box-shadow var(--dur) var(--ease)}
.dual-nav__col:hover{box-shadow:var(--shadow-2)}
.dual-nav__col h2{font-size:20px;margin:0 0 var(--sp-4);padding-bottom:var(--sp-3);border-bottom:1px solid var(--color-line)}
.dual-nav__col--brands{border-top:3px solid var(--color-brand)}
.dual-nav__col--cats{border-top:3px solid var(--color-dark)}
.dual-nav{align-items:start}
.dual-nav__more{margin:var(--sp-4) 0 0}
.dual-nav__more a{font-size:13px;font-weight:var(--fw-medium)}
.trending h2{font-size:clamp(24px,2.8vw,32px)}
.steps h2{font-size:clamp(24px,2.8vw,32px);text-align:center}
.faq h2{font-size:clamp(24px,2.8vw,32px)}

/* ---------- 分类 / 品牌 ---------- */
.layout--cat-grid .product-grid-wrap{margin-top:0}
.filter-sidebar{background:#fff;border:1px solid var(--color-line);border-radius:var(--radius-md);padding:var(--sp-4)}
.filter-sidebar h2{font-size:14px;margin:0 0 var(--sp-3);padding-bottom:8px;border-bottom:1px solid var(--color-line);color:var(--color-ink)}
.filter-sidebar h2:not(:first-child){margin-top:var(--sp-4)}
.filter-sidebar ul{list-style:none;padding:0;margin:0 0 var(--sp-4)}
.filter-sidebar li{display:flex;justify-content:space-between;align-items:center;padding:7px 0;font-size:13px}
.filter-sidebar li a{color:var(--color-ink-soft)}
.filter-sidebar li a:hover{color:var(--color-brand)}
.filter-sidebar li.is-current a{font-weight:var(--fw-bold);color:var(--color-brand)}
.filter-sidebar li.is-current::before{content:"";width:3px;height:14px;background:var(--color-brand);border-radius:2px;margin-right:-3px}
.brand-banner{border-bottom:1px solid var(--color-line);padding-bottom:var(--sp-5);margin-bottom:var(--sp-4)}
.brand-banner h1{font-size:clamp(30px,4vw,44px);letter-spacing:-.02em}
.hot-list{margin-top:var(--sp-5)}
.brand-tile:hover{background:var(--color-brand-bg)}

/* ---------- 指南 ---------- */
.guide-hero{border-bottom:1px solid var(--color-line);padding-bottom:var(--sp-4);margin-bottom:var(--sp-4)}
.guide-hero h1{font-size:clamp(26px,3.4vw,38px);margin:var(--sp-2) 0 var(--sp-3)}
.guide-hero .lede{max-width:72ch}
.layout--guide-article .prose{max-width:none}
.related-links ul{list-style:none;padding:0}
.related-links li{padding:6px 0;border-bottom:1px dashed var(--color-line)}
.related-links li:last-child{border-bottom:0}
.toc{background:var(--color-bg-mute);border:1px solid var(--color-line);border-radius:var(--radius-md);padding:var(--sp-4);font-size:13px}
.toc__head{font-weight:var(--fw-bold);margin:0 0 var(--sp-2);color:var(--color-ink)}
.toc ol{padding-left:18px;margin:0}
.toc li{padding:4px 0}
.toc a{color:var(--color-ink-soft)}
.toc a:hover{color:var(--color-brand)}

/* ---------- 正文 ---------- */
.prose h2{margin-top:var(--sp-6);padding-bottom:8px;border-bottom:1px solid var(--color-line);font-size:24px}
.prose h3{margin-top:var(--sp-5);font-size:18px}
.prose p,.prose li{font-size:15px;line-height:1.8;color:var(--color-ink-soft)}
.prose ul,.prose ol{padding-left:20px}
.prose blockquote{margin:var(--sp-4) 0;border-left:3px solid var(--color-brand);background:var(--color-brand-bg);padding:var(--sp-3) var(--sp-4);border-radius:0 var(--radius-md) var(--radius-md) 0}
.prose blockquote p{margin:0;color:var(--color-ink)}

/* ---------- 工具 ---------- */
.layout--tool-dark .tool-mount{background:linear-gradient(160deg,#001529,#00284d);border-radius:var(--radius-lg);padding:var(--sp-6);color:#fff}
.layout--tool-dark .tool-mount h2{color:#fff}
.layout--tool-dark .qc-finder input{color:var(--color-ink)}
.tool-grid .grid{gap:var(--sp-4)}
.qc-grid{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.qc-gallery{margin-top:var(--sp-5)}
.layout--calculator .calculator{max-width:640px;margin:0 auto}
.layout--calculator .result-panel__cta{margin-top:var(--sp-4);text-align:center}

/* ---------- 运费表 / 优惠券 / 博客 ---------- */
.layout--shipping-table .quote-table table{min-width:640px}
.layout--shipping-table .fee-breakdown details[open]{background:var(--color-bg-mute)}
.layout--coupons .coupon-cards{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.layout--blog .blog-list ul{list-style:none;padding:0}
.layout--blog .blog-list li{border-bottom:1px solid var(--color-line);padding:var(--sp-3) 0}
.layout--blog .blog-list li:last-child{border-bottom:0}
.blog-list h3{font-size:17px;margin:0 0 4px}

/* ---------- 法务 / 信任 / 索引页 ---------- */
.layout--legal .prose{max-width:var(--container-narrow)}
.layout--verdict .verdict{font-size:var(--fs-md)}
.layout--verdict .evidence__card{border-left:3px solid var(--color-success)}
.layout--verdict .disclosure{border:1px solid var(--color-line);border-radius:var(--radius-md);padding:var(--sp-4);background:var(--color-bg-mute)}
.layout--cat-index .category-nav{margin-top:var(--sp-5)}
.layout--brand-index .brand-matrix__grid{gap:var(--sp-3)}
.layout--guide-index .guide-list ul{list-style:none;padding:0}
.layout--guide-index .guide-list li{border:1px solid var(--color-line);border-radius:var(--radius-md);padding:var(--sp-4);margin-bottom:var(--sp-3);background:#fff;transition:box-shadow var(--dur) var(--ease)}
.layout--guide-index .guide-list li:hover{box-shadow:var(--shadow-2)}
.layout--hub .brand-matrix{background:#fff;border:1px solid var(--color-line);border-radius:var(--radius-lg);padding:var(--sp-5)}
.layout--tool-index .tool-card h3{margin-top:0}
.layout--tool-compact section{margin:var(--sp-5) 0}

@media (max-width:768px){
  .hero{padding:40px 0 34px}
  .hero__search{height:48px;border-radius:24px}
  .hero__search button{padding:0 18px;font-size:14px}
  .hero__steps li{font-size:11px}
  .hero__steps b{font-size:12px}
  .page-head{padding-top:var(--sp-4)}
  .prose h2{font-size:20px}
  .prose p,.prose li{font-size:14px}
  .dual-nav__col{padding:var(--sp-4)}
}
@media (max-width:420px){
  .hero__steps{display:none}
  .hero__search button span{display:none}
  .hero__search button{padding:0 16px}
}