/* ============================================================
   装修首页（page-decoration-home.php）专用样式
   b2-child / assets / deco-home.css

   所有类名与变量统一 dh- / --dh- 前缀，与父主题零冲突。
   移动优先：320px 起，按 576 / 768 / 992 / 1200 渐进增强。
   配色对比度已按 WCAG 2.2 AA 逐项核验。
   ============================================================ */
:root{
  --dh-p50:#FCF2ED; --dh-p100:#F7DFD2; --dh-p200:#EFBCA3; --dh-p300:#E2966F; --dh-p400:#C97045;
  --dh-p500:#B14E2A; --dh-p600:#9A4020; --dh-p700:#7A321A; --dh-p800:#5C2614; --dh-p900:#3D190D;
  --dh-bg:#F7F5F2; --dh-surface:#FFFFFF;
  --dh-t900:#1F1D1A; --dh-t700:#4A4741; --dh-t500:#6B665E;
  --dh-border:#E8E3DC; --dh-border-strong:#8C857A;
  --dh-accent:#2F6B5B; --dh-success:#2E7D5B;
  --dh-s1:8px; --dh-s2:16px; --dh-s3:24px; --dh-s4:32px; --dh-s6:48px; --dh-s8:64px;
  --dh-r-sm:6px; --dh-r-md:12px; --dh-r-lg:20px;
  --dh-sh1:0 2px 8px rgba(31,29,26,.06);
  --dh-sh2:0 8px 24px rgba(31,29,26,.10);
  --dh-ease:cubic-bezier(.2,.7,.3,1);
}

/* ---- 与 B2 父主题适配 ----
 * 父主题在 Modules/Templates/Main.php 的 :root 注入 --b2color（主题主色）、
 * --b2lightcolor（主色 20% 浅底）、--b2radius（按钮圆角，默认 4px），
 * 并把后台「站点宽度」（默认 1100）写到 .wrapper 的 width。
 * 三期新增组件统一使用下面这组桥接变量：主题改主色 / 圆角 / 宽度时，
 * 新模块的 tab、胶囊、编号榜、CTA 会自动跟随，视觉上与主题原生组件一致。
 * 文字对比度敏感处仍用已核验的陶土红，主题色只用于描边、下划线与浅底。
 */
.deco-home{
  --dh-theme:var(--b2color,#B14E2A);
  --dh-theme-soft:var(--b2lightcolor,rgba(177,78,42,.14));
  --dh-theme-radius:var(--b2radius,4px);
  --dh-container:1100px;
}
/* JS 切换面板：hidden 必须能压过 grid/flex 的 display */
.deco-home [hidden]{display:none !important}

.deco-home{background:var(--dh-bg);padding-block:var(--s3,24px) 0;min-height:60vh}
.deco-home *,.deco-home *::before,.deco-home *::after{box-sizing:border-box}
.deco-home h1,.deco-home h2,.deco-home h3,.deco-home h4,.deco-home p,.deco-home ul,.deco-home figure{margin:0}
.deco-home ul{list-style:none;padding:0}
.deco-home a{color:inherit;text-decoration:none}
.deco-home img{display:block;max-width:100%}
.deco-home button,.deco-home input{font:inherit;color:inherit}
.deco-home button{cursor:pointer;border:0;background:none}
.deco-home :focus-visible{outline:2px solid var(--dh-p600);outline-offset:2px;border-radius:var(--dh-r-sm)}

.dh-wrap{width:calc(100% - 32px);max-width:var(--dh-container,1100px);margin-inline:auto}
.dh-i{width:1em;height:1em;fill:currentColor;vertical-align:-.12em;flex:none}
.dh-card{background:var(--dh-surface);border:1px solid var(--dh-border);border-radius:var(--dh-r-md);box-shadow:var(--dh-sh1)}
.dh-lift{transition:transform .22s var(--dh-ease),box-shadow .22s var(--dh-ease)}
.dh-lift:hover{transform:translateY(-2px);box-shadow:var(--dh-sh2)}

/* 图片 / 占位图（无特色图时不破版） */
.dh-img{width:100%;height:100%;object-fit:cover;display:block}
.dh-ph{width:100%;height:100%;min-height:100%;display:grid;place-items:center;color:#fff;font-size:13px;font-weight:600;letter-spacing:.3px;text-align:center;padding:8px}
.dh-ph span{opacity:.92}
.dh-ph-1{background:linear-gradient(135deg,var(--dh-p400),var(--dh-p300))}
.dh-ph-2{background:linear-gradient(135deg,var(--dh-accent),#7FB09E)}
.dh-ph-3{background:linear-gradient(135deg,#2B6CB0,#8FB4DC)}
.dh-ph-4{background:linear-gradient(135deg,var(--dh-t700),var(--dh-border-strong))}

/* 空态 */
.dh-empty{display:flex;align-items:center;gap:10px;padding:var(--dh-s4) var(--dh-s3);color:var(--dh-t500);
  border:1px dashed var(--dh-border-strong);border-radius:var(--dh-r-md);background:var(--dh-surface);font-size:14px}
.dh-empty .dh-i{font-size:18px;color:var(--dh-p400)}

/* 区块标题行 */
.dh-sec{padding-block:var(--dh-s6);scroll-margin-top:70px}
.dh-sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--dh-s2);margin-bottom:var(--dh-s3)}
.dh-sec-head-l{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px}
.dh-sec-title{font-size:24px;font-weight:800;line-height:1.35;letter-spacing:.2px;color:var(--dh-t900)}
.dh-sec-sub{font-size:14px;color:var(--dh-t500)}
.dh-sec-more{margin-left:auto;font-size:14px;font-weight:600;color:var(--dh-p500);display:inline-flex;align-items:center;gap:4px}
.dh-sec-more:hover{color:var(--dh-p700)}
.dh-sec-more .dh-i{font-size:14px}

/* 按钮 */
.dh-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:0 20px;border-radius:var(--dh-r-sm);font-size:15px;font-weight:600;
  transition:transform .2s var(--dh-ease),background-color .2s var(--dh-ease),box-shadow .2s var(--dh-ease)}
.dh-btn-primary{background:var(--dh-p500);color:#fff}
.dh-btn-primary:hover{background:var(--dh-p600);transform:scale(1.05)}
.dh-btn-primary:active{transform:scale(.95)}
.dh-btn-ghost{background:var(--dh-surface);color:var(--dh-t900);border:1px solid var(--dh-border-strong)}
.dh-btn-ghost:hover{background:var(--dh-p50);border-color:var(--dh-p500);transform:scale(1.05)}
.dh-btn-sm{min-height:36px;padding:0 14px;font-size:14px}

/* ---------- ① Hero ---------- */
.dh-hero{background:linear-gradient(135deg,var(--dh-p50) 0%,#FBF7F2 55%,var(--dh-bg) 100%);
  border:1px solid var(--dh-border);border-radius:var(--dh-r-lg);overflow:hidden;margin-top:var(--dh-s3)}
.dh-hero-in{padding:var(--dh-s4) var(--dh-s3)}
.dh-hero h1{font-size:28px;line-height:1.25;font-weight:800;letter-spacing:.5px;margin-bottom:var(--dh-s2);color:var(--dh-t900)}
.dh-hero h1 em{font-style:normal;color:var(--dh-p500)}
.dh-hero-sub{font-size:15px;color:var(--dh-t700);margin-bottom:var(--dh-s3);max-width:34em}
.dh-hero-search{display:flex;align-items:center;gap:var(--dh-s1);background:var(--dh-surface);
  border:1px solid var(--dh-border-strong);border-radius:var(--dh-r-sm);padding:6px 6px 6px 14px;box-shadow:var(--dh-sh1)}
.dh-hero-search-i{color:var(--dh-t500);font-size:18px}
.dh-hero-search input[type=search]{flex:1;min-width:0;border:0;outline:none;background:transparent;font-size:15px;padding:8px 0}
.dh-hero-search input[type=search]::placeholder{color:var(--dh-t500)}
.dh-hero-search:focus-within{border-color:var(--dh-p500);box-shadow:0 0 0 3px rgba(177,78,42,.12)}
.dh-hero-hot{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--dh-s2);font-size:13px;color:var(--dh-t500);align-items:center}
.dh-hero-hot a{color:var(--dh-t700);background:var(--dh-surface);border:1px solid var(--dh-border);border-radius:999px;padding:3px 10px}
.dh-hero-hot a:hover{color:var(--dh-p500);border-color:var(--dh-p300)}
.dh-hero-cta{display:flex;flex-wrap:wrap;gap:var(--dh-s2);margin-top:var(--dh-s3)}
@media (max-width:575px){
  .dh-hero-cta{flex-direction:column}
  .dh-hero-cta .dh-btn{width:100%}
}
.dh-hero-stats{display:flex;gap:var(--dh-s4);margin-top:var(--dh-s4);padding-top:var(--dh-s3);border-top:1px solid var(--dh-border)}
.dh-hero-stats b{display:block;font-size:22px;font-weight:800;line-height:1.2;color:var(--dh-t900)}
.dh-hero-stats span{font-size:13px;color:var(--dh-t500)}
.dh-hero-art{display:none}

/* ---------- ② 快捷入口 ---------- */
.dh-quick-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--dh-s2)}
.dh-quick{display:flex;flex-direction:column;gap:6px;padding:var(--dh-s3) var(--dh-s2);text-align:left}
.dh-quick-ico{width:40px;height:40px;border-radius:var(--dh-r-sm);background:var(--dh-p50);color:var(--dh-p500);
  display:grid;place-items:center;font-size:20px;margin-bottom:6px}
.dh-quick b{font-size:15px;font-weight:700;color:var(--dh-t900)}
.dh-quick small{font-size:13px;color:var(--dh-t500);line-height:1.5}

/* ---------- ③ 头条资讯 ---------- */
.dh-news-grid{display:grid;gap:var(--dh-s2)}
.dh-news-lead{overflow:hidden}
.dh-news-lead-img{display:block;aspect-ratio:16/9;overflow:hidden}
.dh-news-lead-body{padding:var(--dh-s3)}
.dh-chip{display:inline-block;font-size:12px;font-weight:600;color:var(--dh-p700);background:var(--dh-p100);border-radius:var(--dh-r-sm);padding:2px 8px;margin-bottom:10px}
.dh-news-lead h3{font-size:19px;font-weight:700;line-height:1.45;color:var(--dh-t900)}
.dh-news-lead h3 a:hover{color:var(--dh-p500)}
.dh-news-lead p{font-size:14px;color:var(--dh-t500);margin-top:8px}
.dh-news-list li{border-bottom:1px solid var(--dh-border)}
.dh-news-list li:last-child{border-bottom:0}
.dh-news-list a{display:flex;gap:var(--dh-s2);align-items:flex-start;padding:14px var(--dh-s2)}
.dh-news-list a:hover{background:var(--dh-p50)}
.dh-news-n{color:var(--dh-p400);font-weight:800;font-size:15px;min-width:20px}
.dh-news-t{font-size:15px;line-height:1.5;flex:1;color:var(--dh-t900)}
.dh-news-m{font-size:12px;color:var(--dh-t500);white-space:nowrap}

/* ---------- ④ 装修流程 ---------- */
.dh-flow{display:flex;gap:var(--dh-s2);overflow-x:auto;padding-bottom:var(--dh-s2);scroll-snap-type:x mandatory}
.dh-flow::-webkit-scrollbar{height:6px}
.dh-flow::-webkit-scrollbar-track{background:transparent}
.dh-flow::-webkit-scrollbar-thumb{background:var(--dh-p200);border-radius:3px}
.dh-flow-step{flex:0 0 150px;scroll-snap-align:start;padding:var(--dh-s3) var(--dh-s2);position:relative}
.dh-flow-num{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--dh-p50);color:var(--dh-p600);font-weight:800;font-size:14px;margin-bottom:12px}
.dh-flow-step.is-done .dh-flow-num{background:var(--dh-accent);color:#fff}
.dh-flow-flag{position:absolute;top:12px;right:12px;font-size:11px;color:var(--dh-accent);font-weight:600;display:inline-flex;align-items:center;gap:2px}
.dh-flow-flag .dh-i{font-size:12px}
.dh-flow-step b{font-size:15px;display:block;color:var(--dh-t900)}
.dh-flow-step small{font-size:12px;color:var(--dh-t500)}

/* ---------- ⑤ 科普精选 ---------- */
.dh-post-grid{display:grid;gap:var(--dh-s2)}
.dh-post{overflow:hidden}
.dh-post-img{display:block;aspect-ratio:16/9;overflow:hidden}
.dh-post-body{padding:var(--dh-s3)}
.dh-verified{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--dh-accent)}
.dh-verified .dh-i{font-size:13px}
.dh-post-body h3{font-size:17px;font-weight:700;line-height:1.5;margin:8px 0;color:var(--dh-t900)}
.dh-post-body h3 a:hover{color:var(--dh-p500)}
.dh-post-body p{font-size:14px;color:var(--dh-t500);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dh-post-meta{margin-top:var(--dh-s2);font-size:12px;color:var(--dh-t500);display:flex;gap:12px}

/* ---------- ⑥ 资源分享 ---------- */
.dh-res-grid{display:grid;gap:var(--dh-s3);align-items:start}
.dh-res-box{padding:var(--dh-s3)}
.dh-box-title{font-size:17px;font-weight:700;margin-bottom:12px;color:var(--dh-t900)}
.dh-res-item{display:flex;align-items:center;gap:var(--dh-s2);padding:12px 0;border-bottom:1px solid var(--dh-border)}
.dh-res-item:last-child{border-bottom:0}
.dh-res-ico{width:38px;height:38px;border-radius:var(--dh-r-sm);background:var(--dh-p50);color:var(--dh-p500);display:grid;place-items:center;font-size:18px;flex:none}
.dh-res-info{flex:1;min-width:0}
.dh-res-info b{display:block;font-size:14px;font-weight:600;color:var(--dh-t900)}
.dh-res-info b a:hover{color:var(--dh-p500)}
.dh-res-info small{font-size:12px;color:var(--dh-t500)}
.dh-res-badge{font-size:12px;font-weight:600;color:var(--dh-p700);background:var(--dh-p100);border-radius:var(--dh-r-sm);padding:4px 8px;white-space:nowrap}
.dh-res-badge.is-vip{color:#fff;background:var(--dh-p500)}
.dh-tool-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--dh-s2)}
.dh-tool{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--dh-border);border-radius:var(--dh-r-sm);font-size:14px;color:var(--dh-t900)}
.dh-tool:hover{border-color:var(--dh-p300);background:var(--dh-p50)}
.dh-tool-dot{width:28px;height:28px;border-radius:8px;background:var(--dh-p100);color:var(--dh-p500);display:grid;place-items:center;font-size:13px;font-weight:700;flex:none}
.dh-tool-img{width:28px;height:28px;border-radius:8px;object-fit:cover;flex:none}
.dh-ad{position:relative;margin-top:var(--dh-s3);border:1px dashed var(--dh-border-strong);border-radius:var(--dh-r-md);
  background:var(--dh-surface);padding:var(--dh-s3);text-align:center;color:var(--dh-t500);font-size:13px;overflow:hidden}
.dh-ad-label{position:absolute;top:0;left:0;background:var(--dh-border);color:var(--dh-t700);
  font-size:11px;line-height:1;padding:4px 8px;border-radius:0 0 var(--dh-r-sm) 0}
.dh-ad img{max-width:100%;height:auto}

/* ---------- ⑦ 配件商城 ---------- */
.dh-goods-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--dh-s2)}
.dh-goods{overflow:hidden}
.dh-goods-img{display:block;aspect-ratio:1;overflow:hidden}
.dh-goods-body{padding:var(--dh-s2)}
.dh-goods-body h3{font-size:14px;font-weight:600;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:42px;color:var(--dh-t900)}
.dh-goods-body h3 a:hover{color:var(--dh-p500)}
.dh-price{color:var(--dh-p500);font-weight:800;font-size:17px;margin-top:8px;display:flex;align-items:baseline;flex-wrap:wrap;gap:6px}
.dh-price del{font-size:12px;font-weight:400;color:var(--dh-t500)}
.dh-price small{font-size:12px;font-weight:400;color:var(--dh-t500)}
.dh-price-na{font-size:13px;font-weight:600}

/* ---------- ⑧ 问答 / 社区 ---------- */
.dh-qa-grid{display:grid;gap:var(--dh-s2)}
.dh-qa{padding:var(--dh-s3)}
.dh-qa-tag{font-size:12px;font-weight:600;color:var(--dh-success);display:inline-flex;align-items:center;gap:4px}
.dh-qa-tag .dh-i{font-size:13px}
.dh-qa h3{font-size:16px;font-weight:700;line-height:1.5;margin:8px 0;color:var(--dh-t900)}
.dh-qa h3 a:hover{color:var(--dh-p500)}
.dh-qa p{font-size:14px;color:var(--dh-t500)}
.dh-community{background:var(--dh-p800);color:#fff;border-radius:var(--dh-r-md);padding:var(--dh-s4);
  display:flex;flex-direction:column;justify-content:center;gap:var(--dh-s2)}
.dh-community h3{font-size:22px;font-weight:800}
.dh-community p{font-size:14px;color:var(--dh-p100)}
.dh-community .dh-btn{background:#fff;color:var(--dh-p800);align-self:flex-start}

/* ---------- ⑨ 页脚补充 / 移动底部导航 ---------- */
.dh-footer{background:var(--dh-surface);border-top:1px solid var(--dh-border);margin-top:var(--dh-s6);padding-block:var(--dh-s4)}
/* 移动端默认：品牌说明独占整行，下方 3 个链接列自适应三列 */
.dh-footer-grid{display:grid;gap:var(--dh-s2) var(--dh-s3);grid-template-columns:repeat(3,minmax(0,1fr))}
.dh-footer-brand{grid-column:1/-1;padding-bottom:var(--dh-s1);border-bottom:1px solid var(--dh-border)}
.dh-footer-col{min-width:0}
.dh-footer h4{font-size:13px;font-weight:700;margin-bottom:8px;color:var(--dh-t900)}
.dh-footer p,.dh-footer li{font-size:12px;color:var(--dh-t500);line-height:1.9}
.dh-footer li a{display:inline-block;max-width:100%;overflow-wrap:anywhere}
.dh-footer li a:hover{color:var(--dh-p500)}
/* 超窄屏（≤359px）自动降为两列，防止文字挤压 */
@media (max-width:359px){
  .dh-footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.dh-mnav{position:fixed;bottom:0;left:0;right:0;background:var(--dh-surface);border-top:1px solid var(--dh-border);
  display:flex;justify-content:space-around;padding:6px 0;z-index:90;box-shadow:0 -2px 12px rgba(31,29,26,.06)}
.dh-mnav a{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;color:var(--dh-t500);
  min-width:56px;min-height:44px;justify-content:center}
.dh-mnav a svg{font-size:19px}
.dh-mnav a:hover,.dh-mnav a:focus-visible{color:var(--dh-p500)}

/* ============================ 渐进增强 ============================ */
@media (min-width:576px){
  .dh-quick-grid{grid-template-columns:repeat(3,1fr)}
  .dh-post-grid{grid-template-columns:repeat(2,1fr)}
  .dh-tool-grid{grid-template-columns:repeat(3,1fr)}
  .dh-goods-grid{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:768px){
  .dh-wrap{width:calc(100% - 48px)}
  .dh-hero-in{padding:var(--dh-s6) var(--dh-s4)}
  .dh-hero h1{font-size:36px}
  .dh-news-grid{grid-template-columns:1.1fr 1fr}
  .dh-news-lead-img{aspect-ratio:auto;height:100%;min-height:260px}
  .dh-news-list{display:flex;flex-direction:column;justify-content:space-between}
  .dh-post-grid{grid-template-columns:repeat(3,1fr)}
  .dh-res-grid{grid-template-columns:1fr 1fr}
  .dh-goods-grid{grid-template-columns:repeat(4,1fr)}
  .dh-qa-grid{grid-template-columns:1fr 1fr 1fr 300px}
  .dh-qa-grid .dh-empty{grid-column:1/-1}
  /* PC：品牌 + 3 链接 = 4 列（仅非移动设备的宽屏生效） */
  .deco-home-page:not(.dh-is-mobile) .dh-footer-grid{grid-template-columns:1.5fr repeat(3,1fr);gap:var(--dh-s3)}
  .deco-home-page:not(.dh-is-mobile) .dh-footer-brand{grid-column:auto;padding-bottom:0;border-bottom:0}
  .deco-home-page:not(.dh-is-mobile) .dh-footer h4{font-size:14px;margin-bottom:10px}
  .deco-home-page:not(.dh-is-mobile) .dh-footer p,
  .deco-home-page:not(.dh-is-mobile) .dh-footer li{font-size:13px;line-height:2}
}
@media (min-width:992px){
  .dh-hero{display:grid;grid-template-columns:1.15fr .85fr}
  .dh-hero-art{display:grid;place-items:center;position:relative;padding:var(--dh-s4)}
  .dh-hero-art-in{width:100%;aspect-ratio:1;border-radius:var(--dh-r-lg);
    background:linear-gradient(145deg,var(--dh-p100),var(--dh-p300));position:relative;overflow:hidden;box-shadow:var(--dh-sh2)}
  .dh-hero-art-in::before{content:"";position:absolute;inset:22% 18% 18% 18%;border:8px solid rgba(255,255,255,.65);border-radius:8px}
  .dh-hero-art-in::after{content:"";position:absolute;width:42%;height:42%;left:29%;top:29%;background:rgba(255,255,255,.4);border-radius:50%}
  .dh-hero-art-cap{position:absolute;bottom:14%;left:50%;transform:translateX(-50%);
    background:var(--dh-surface);border-radius:999px;padding:8px 18px;font-size:13px;font-weight:600;box-shadow:var(--dh-sh1);white-space:nowrap;color:var(--dh-t900)}
  .dh-quick-grid{grid-template-columns:repeat(6,1fr)}
  .dh-quick{padding:var(--dh-s3)}
  .dh-flow-step{flex:1 1 0;min-width:0}
}
@media (min-width:1200px){
  .dh-wrap{max-width:var(--dh-container,1100px)}
  .dh-sec{padding-block:var(--dh-s8)}
  .dh-hero h1{font-size:40px}
}
/* 大视口触屏设备（折叠屏 / 平板 / 浏览器「桌面版网站」模式且 UA 未判定为移动端）：
   视口虽 ≥768px，页脚仍保持移动端三列，避免与 PC 端显示一致 */
@media (min-width:768px) and (pointer:coarse){
  .deco-home-page:not(.dh-is-mobile) .dh-footer-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--dh-s2) var(--dh-s3)}
  .deco-home-page:not(.dh-is-mobile) .dh-footer-brand{grid-column:1/-1;padding-bottom:var(--dh-s1);border-bottom:1px solid var(--dh-border)}
  .deco-home-page:not(.dh-is-mobile) .dh-footer h4{font-size:13px;margin-bottom:8px}
  .deco-home-page:not(.dh-is-mobile) .dh-footer p,
  .deco-home-page:not(.dh-is-mobile) .dh-footer li{font-size:12px;line-height:1.9}
}
@media (prefers-reduced-motion:reduce){
  .deco-home .dh-lift,.deco-home .dh-btn{transition:none}
  .deco-home .dh-lift:hover,.deco-home .dh-btn:hover{transform:none}
}

/* ============================================================
 * 三期增强组件
 * 参考中华门窗网：Tab 分层压缩密度 / 编号榜 + 热度 / 频道块模板化 /
 * logo 墙 / 卡片 CTA。交互强调态跟随 B2 主题主色 --b2color。
 * ============================================================ */

/* ---------- 通用 tab ---------- */
.dh-tabs{display:flex;gap:2px;border-bottom:1px solid var(--dh-border);margin-bottom:var(--dh-s2);
  overflow-x:auto;scrollbar-width:thin}
.dh-tabs::-webkit-scrollbar{height:4px}
.dh-tabs::-webkit-scrollbar-thumb{background:var(--dh-p200);border-radius:2px}
.dh-tab{flex:none;appearance:none;background:transparent;border:0;border-bottom:2px solid transparent;
  padding:9px 14px;font-size:14px;font-weight:600;color:var(--dh-t700);white-space:nowrap;cursor:pointer;
  transition:color .2s var(--dh-ease),border-color .2s var(--dh-ease),background-color .2s var(--dh-ease)}
.dh-tab:hover{color:var(--dh-p500);background:var(--dh-p50)}
.dh-tab.is-active{color:var(--dh-p700);border-bottom-color:var(--dh-theme);background:var(--dh-theme-soft)}
.dh-tab:focus-visible{outline:2px solid var(--dh-p600);outline-offset:-2px}
.dh-tabpanes{min-width:0}
.dh-tabs-mini{margin-bottom:8px;border-bottom:0;gap:4px}
.dh-tabs-mini .dh-tab{padding:5px 10px;font-size:12px;border-bottom:0;border-radius:var(--dh-theme-radius)}
.dh-tabs-mini .dh-tab.is-active{border-bottom:0}

/* ---------- 三期 C：Hero 搜索范围 tab ---------- */
.dh-scope{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:10px}
.dh-scope-btn{appearance:none;border:1px solid transparent;background:transparent;color:var(--dh-t700);
  padding:5px 12px;border-radius:var(--dh-theme-radius);font-size:13px;font-weight:600;cursor:pointer;
  transition:background-color .2s var(--dh-ease),color .2s var(--dh-ease)}
.dh-scope-btn:hover{color:var(--dh-p500)}
.dh-scope-btn.is-active{background:var(--dh-theme-soft);border-color:var(--dh-theme);color:var(--dh-p700)}

/* ---------- 一期 A：头条右栏三 tab ---------- */
.dh-news-side{display:flex;flex-direction:column;min-width:0}
.dh-news-side .dh-tabs{margin-bottom:var(--dh-s1)}
.dh-news-side .dh-tabpanes{flex:1;min-height:0}
.dh-news-side .dh-news-list{height:100%;justify-content:flex-start}
.dh-news-none{padding:var(--dh-s4) var(--dh-s2);font-size:14px;color:var(--dh-t500);text-align:center}

/* ---------- 一期 B：科普胶囊筛选 ---------- */
.dh-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--dh-s3)}
.dh-pill{appearance:none;border:1px solid var(--dh-border);background:var(--dh-surface);color:var(--dh-t700);
  border-radius:999px;padding:6px 14px;font-size:13px;font-weight:600;cursor:pointer;
  transition:border-color .2s var(--dh-ease),background-color .2s var(--dh-ease),color .2s var(--dh-ease)}
.dh-pill:hover{border-color:var(--dh-p300);color:var(--dh-p500)}
.dh-pill.is-active{border-color:var(--dh-theme);background:var(--dh-theme-soft);color:var(--dh-p700)}
.dh-pill:focus-visible,.dh-scope-btn:focus-visible{outline:2px solid var(--dh-p600);outline-offset:2px}

/* ---------- 一期 C：热销 / 下载 TOP10 编号榜 ---------- */
.dh-rank .dh-tabs{margin-bottom:var(--dh-s3)}
.dh-rank-list{display:grid;grid-template-columns:1fr;column-gap:var(--dh-s3);
  list-style:none;padding:var(--dh-s1) var(--dh-s2);margin:0;background:var(--dh-surface);
  border:1px solid var(--dh-border);border-radius:var(--dh-r-md);box-shadow:var(--dh-sh1)}
.dh-rank-item{display:flex;align-items:center;gap:10px;min-width:0;padding:10px 0;border-bottom:1px solid var(--dh-border)}
.dh-rank-item:last-child{border-bottom:0}
.dh-rank-n{flex:none;min-width:26px;height:26px;padding:0 5px;border-radius:var(--dh-theme-radius);
  background:var(--dh-p50);color:var(--dh-p600);border:1px solid var(--dh-border);
  display:grid;place-items:center;font-size:12px;font-weight:800}
.dh-rank-item.is-top .dh-rank-n{background:var(--dh-p500);border-color:var(--dh-theme);color:#fff}
.dh-rank-t{flex:1;min-width:0;font-size:14px;color:var(--dh-t900);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dh-rank-t:hover{color:var(--dh-p500)}
.dh-rank-hot{flex:none;font-size:12px;color:var(--dh-t500);white-space:nowrap}

/* ---------- 二期 A：可复用频道块（四栏模板） ---------- */
.dh-channel .dh-tabs-scroll{margin-bottom:var(--dh-s3)}
.dh-channel-grid{display:grid;grid-template-columns:1fr;gap:var(--dh-s2);align-items:start}
.dh-channel-pane{min-width:0}
.dh-ch-col{padding:var(--dh-s2);min-width:0}
.dh-ch-title{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--dh-t900);
  padding-bottom:10px;margin-bottom:8px;border-bottom:1px solid var(--dh-border)}
.dh-ch-title .dh-i{color:var(--dh-p500);font-size:16px}
.dh-ch-list{list-style:none;padding:0;margin:0}
.dh-ch-list li a{display:flex;align-items:center;gap:8px;padding:7px 0;font-size:13px;color:var(--dh-t900);
  border-bottom:1px dashed var(--dh-border)}
.dh-ch-list li:last-child a{border-bottom:0}
.dh-ch-list li a:hover{color:var(--dh-p500)}
.dh-ch-list small{margin-left:auto;flex:none;font-size:11px;color:var(--dh-t500)}
.dh-ch-n{flex:none;color:var(--dh-p400);font-weight:800;font-size:12px;min-width:18px}
.dh-ch-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;list-style:none;padding:0;margin:0}
.dh-ch-tools li a{display:flex;align-items:center;gap:8px;padding:8px;border:1px solid var(--dh-border);
  border-radius:var(--dh-theme-radius);font-size:13px;color:var(--dh-t900)}
.dh-ch-tools li a:hover{border-color:var(--dh-theme);background:var(--dh-theme-soft)}
.dh-ch-ico{width:26px;height:26px;flex:none;border-radius:var(--dh-theme-radius);object-fit:cover}
.dh-ch-dot{display:grid;place-items:center;background:var(--dh-p100);color:var(--dh-p600);font-weight:700;font-size:12px}
.dh-ch-goods{list-style:none;padding:0;margin:0}
.dh-ch-goods li a{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--dh-border)}
.dh-ch-goods li:last-child a{border-bottom:0}
.dh-ch-goods .dh-img,.dh-ch-goods .dh-ph{width:54px;height:54px;min-height:54px;flex:none;
  border-radius:var(--dh-theme-radius);object-fit:cover}
.dh-ch-goods .dh-ph span{font-size:10px;line-height:1.3}
.dh-ch-goods-info{min-width:0}
.dh-ch-goods-info b{display:block;font-size:13px;color:var(--dh-t900);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dh-ch-goods-info em{font-style:normal;font-size:13px;font-weight:700;color:var(--dh-p500)}
.dh-ch-posts .dh-tabs-mini{margin-bottom:6px}

/* ---------- 二期 B：工艺视频 4 列卡 ---------- */
.dh-video-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--dh-s2)}
.dh-video{display:block;overflow:hidden}
.dh-video-cover{position:relative;aspect-ratio:16/9;overflow:hidden}
.dh-video-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:42px;height:42px;
  border-radius:50%;background:rgba(31,29,26,.58);color:#fff;display:grid;place-items:center;font-size:19px;
  transition:transform .22s var(--dh-ease)}
.dh-video:hover .dh-video-play{transform:translate(-50%,-50%) scale(1.08)}
.dh-video-dur{position:absolute;right:8px;bottom:8px;background:rgba(31,29,26,.8);color:#fff;
  font-size:11px;padding:2px 6px;border-radius:var(--dh-theme-radius)}
.dh-video-body{padding:var(--dh-s2)}
.dh-video-body h3{font-size:14px;font-weight:600;line-height:1.5;color:var(--dh-t900);min-height:42px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dh-video:hover .dh-video-body h3{color:var(--dh-p500)}
.dh-video-views{display:inline-flex;align-items:center;gap:4px;margin-top:6px;font-size:12px;color:var(--dh-t500)}
.dh-video-views .dh-i{font-size:13px;color:var(--dh-p400)}

/* ---------- 三期 A：合作品牌 logo 墙 ---------- */
.dh-brands{margin-top:var(--dh-s3);background:var(--dh-surface);border:1px solid var(--dh-border);
  border-radius:var(--dh-r-md);padding:var(--dh-s3)}
.dh-brands .dh-box-title{margin-bottom:var(--dh-s2)}
.dh-brands-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--dh-s1)}
.dh-brand{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  padding:10px 6px;min-height:74px;border:1px solid var(--dh-border);border-radius:var(--dh-theme-radius);
  transition:border-color .2s var(--dh-ease),background-color .2s var(--dh-ease)}
.dh-brand:hover{border-color:var(--dh-theme);background:var(--dh-theme-soft)}
.dh-brand-logo{max-width:100%;max-height:34px;object-fit:contain}
.dh-brand-dot{width:30px;height:30px;border-radius:50%;background:var(--dh-p50);color:var(--dh-p600);
  display:grid;place-items:center;font-weight:700;font-size:13px}
.dh-brand-name{font-size:12px;color:var(--dh-t700);text-align:center;overflow-wrap:anywhere}

/* ---------- 三期 B：商品购买数 + 直达 CTA ---------- */
.dh-buy{display:flex;align-items:center;gap:5px;margin-top:8px;font-size:12px;color:var(--dh-t500)}
.dh-buy .dh-i{font-size:13px;color:var(--dh-p400)}
.dh-cta{display:flex;align-items:center;justify-content:center;gap:4px;min-height:36px;margin-top:10px;
  background:var(--dh-p500);color:#fff;border-radius:var(--dh-theme-radius);font-size:13px;font-weight:600;
  transition:background-color .2s var(--dh-ease),transform .2s var(--dh-ease)}
.dh-cta:hover{background:var(--dh-p600);color:#fff;transform:scale(1.03)}
.dh-cta:active{transform:scale(.97)}
.dh-cta .dh-i{font-size:13px}

/* ---------- 三期增强：渐进增强断点 ---------- */
@media (min-width:576px){
  .dh-rank-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dh-channel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dh-brands-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:768px){
  .dh-video-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .dh-brands-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
}
@media (min-width:992px){
  .dh-channel-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  .dh-tab,.dh-pill,.dh-scope-btn,.dh-brand,.dh-cta,.dh-video-play{transition:none}
  .dh-video:hover .dh-video-play{transform:translate(-50%,-50%)}
  .dh-cta:hover,.dh-cta:active{transform:none}
}