/* hdhpifa blog pages — hdh-blog-20261016 (matches shop header + graphite palette) */
:root{--hd-ink:#1d2129;--hd-text:#3f4552;--hd-muted:#7b8190;--hd-line:#e2e4e9;--hd-bg:#f3f4f6;--hd-graphite:#1f2530;--hd-blue:#0a6cdf}
body{background:var(--hd-bg)!important;color:var(--hd-ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif!important}
a:focus-visible{outline:2px solid var(--hd-blue);outline-offset:2px}
.blog-masthead{background:#fff!important;border-bottom:1px solid var(--hd-line);box-shadow:none!important;position:sticky;top:0;z-index:50}
.blog-masthead .container{display:flex;align-items:center;gap:28px;height:60px}
.hdh-bloglogo{display:inline-flex;align-items:center;flex:0 0 auto}
.hdh-bloglogo img{height:34px;width:auto;display:block}
.blog-nav{display:flex;gap:4px;margin-left:auto}
.blog-nav .blog-nav-item{color:var(--hd-text)!important;padding:8px 12px!important;border-radius:8px;font-size:14px;font-weight:500;line-height:1.4!important}
.blog-nav .blog-nav-item:hover{background:#f1f2f5;color:var(--hd-ink)!important;text-decoration:none}
.blog-nav .active{color:var(--hd-ink)!important;font-weight:700;background:#f1f2f5}
.blog-nav .active:after{display:none!important}
/* list */
body>.container>h1{font-size:24px!important;font-weight:700;margin:28px 0 18px!important;color:var(--hd-ink)}
body>.container>.row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0!important}
body>.container>.row:before,body>.container>.row:after{display:none}
body>.container>.row>.col-sm-6.col-md-3{width:auto!important;padding:0!important;float:none!important}
.thumbnail{height:100%;margin:0!important;padding:0!important;border:1px solid var(--hd-line)!important;border-radius:12px!important;background:#fff!important;overflow:hidden;transition:border-color .15s ease}
.thumbnail:hover{border-color:#c5ccd8!important}
.thumbnail>a{display:block;height:100%;color:inherit;text-decoration:none!important}
.thumbnail img[src$="article-logo-cover.png"]{display:none!important}
.thumbnail>a>img:not([src$="article-logo-cover.png"]){width:100%;aspect-ratio:16/9;object-fit:cover;border-bottom:1px solid var(--hd-line)}
.thumbnail .caption{padding:16px 18px 18px!important;border-top:3px solid var(--hd-graphite)}
.thumbnail .caption h4{font-size:16px!important;font-weight:700;line-height:1.5;margin:0 0 8px!important;color:var(--hd-ink)}
.thumbnail .caption p{font-size:13.5px;line-height:1.7;color:var(--hd-muted);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pagination{display:flex;flex-wrap:wrap;gap:6px;margin:26px 0!important}
.pagination>li>a,.pagination>li>span{border:1px solid var(--hd-line)!important;border-radius:8px!important;color:var(--hd-text)!important;margin:0!important;min-width:36px;text-align:center}
.pagination>.active>a,.pagination>.active>span{background:var(--hd-graphite)!important;border-color:var(--hd-graphite)!important;color:#fff!important}
/* detail */
.rich_media_title{font-size:26px!important;font-weight:700!important;line-height:1.4!important;color:var(--hd-ink)!important;margin:32px 0 0!important;max-width:820px}
figure[data-article-cover]:has(img[src$="article-logo-cover.png"]){display:none!important}
.content{max-width:820px;background:#fff;border:1px solid var(--hd-line);border-radius:14px;padding:26px 30px!important;margin-top:20px!important;font-size:15.5px;line-height:1.85;color:var(--hd-text)}
.content h2{font-size:19px;font-weight:700;color:var(--hd-ink);margin:28px 0 10px;padding-left:12px;border-left:3px solid var(--hd-graphite);line-height:1.4}
.content h3{font-size:16.5px;font-weight:700;color:var(--hd-ink);margin:22px 0 8px}
.content p{margin:0 0 12px}
.content ul,.content ol{padding-left:22px;margin:0 0 14px}
.content li{margin:4px 0}
.content a{color:var(--hd-blue)}
.content>*:first-child,.content>article>*:first-child{margin-top:0}
.article-linked-products h2{font-size:19px!important}
.article-linked-products strong{color:#d93025!important}
.article-sitemap-footer{background:#fff;border-top:1px solid var(--hd-line)!important}
.footer-sitemap a{color:var(--hd-muted)!important}
@media (max-width:991px){body>.container>.row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){
 .blog-masthead .container{gap:12px}
 .hdh-bloglogo img{height:28px}
 .blog-nav .blog-nav-item{padding:6px 8px!important;font-size:13px}
 body>.container>.row{grid-template-columns:1fr}
 .rich_media_title{font-size:21px!important;margin-top:22px!important}
 .content{padding:18px 16px!important;font-size:15px}
}