/* ============================================================
   JOLLYSTAR · Jekyll 版补充样式
   1) 移动端导航（原 CMS 无移动导航）
   2) 产品列表筛选 / 卡片
   3) 文章页、参数表、面包屑的排版修正
   ============================================================ */

/* ---------- 移动端汉堡按钮 ---------- */
.nav-toggle { display: none; position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 36px; padding: 0; background: transparent; border: 1px solid rgba(20,83,140,.35);
  border-radius: 6px; cursor: pointer; z-index: 1200; }
.nav-toggle span { display: block; width: 20px; height: 2px; margin: 4px auto; background: #14538c; border-radius: 2px;
  transition: transform .25s, opacity .25s; }
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- 移动端抽屉 ---------- */
#m-nav { position: fixed; top: 0; right: -86%; width: 82%; max-width: 340px; height: 100%;
  background: #fff; box-shadow: -6px 0 24px rgba(0,0,0,.18); z-index: 1300; overflow-y: auto;
  transition: right .28s ease; padding: 64px 0 40px; }
body.nav-open #m-nav { right: 0; }
#m-mask { position: fixed; inset: 0; background: rgba(0,0,0,.45); opacity: 0; visibility: hidden;
  transition: opacity .28s; z-index: 1250; }
body.nav-open #m-mask { opacity: 1; visibility: visible; }
.m-nav-list { list-style: none; margin: 0; padding: 0; }
.m-nav-item { border-bottom: 1px solid #f0f0f0; }
.m-nav-link { display: block; padding: 14px 20px; font-size: 16px; color: #333; text-decoration: none; }
.m-nav-link i { float: right; font-size: 12px; color: #bbb; transition: transform .25s; }
.m-nav-item.open > .m-nav-link i { transform: rotate(180deg); }
.m-sub { list-style: none; margin: 0; padding: 0 0 8px; background: #fafafa; display: none; }
.m-nav-item.open > .m-sub { display: block; }
.m-sub li a { display: block; padding: 10px 34px; font-size: 14px; color: #666; text-decoration: none; }
.m-sub li a:active { background: #f2f2f2; }

/* ---------- 筛选与产品卡片 ---------- */
.filter-nav li { display: inline-block; margin: 0 8px 6px 0; }
.filter-nav a.active { background: #ffc107; color: #fff; }
.product-card.hide { display: none; }
.product-grid-list > .x4 { float: left; }
.product-card .media-body h2 { margin: 10px 0 0; font-size: 15px; line-height: 1.5; }
.product-card .media-body h2 a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 文章 / 参数表 ---------- */
.article-page { padding: 36px 44px; }
.page-title { font-size: 26px; line-height: 1.5; margin: 0 0 16px; }
.post-meta { font-size: 13px; padding-bottom: 12px; border-bottom: 1px solid #eee; margin-bottom: 18px; }
.content img { max-width: 100%; height: auto; }
.content table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.content table td, .spec-table td { border: 1px solid #e2e6ea; padding: 10px 14px; font-size: 14px; }
.spec-table tr:nth-child(odd) td { background: #fafafa; }
.content h2 { font-size: 20px; margin: 22px 0 10px; }
.content h3 { font-size: 17px; margin: 18px 0 8px; }
.content li { line-height: 1.9; }
.post-nav { margin-top: 26px; padding-top: 16px; border-top: 1px dashed #e4e4e4; font-size: 14px; }
.post-nav a { display: block; color: #666; line-height: 2; }

/* ---------- 首页 ---------- */
.home-hero { background: linear-gradient(120deg, #0b2a4a 0%, #14538c 100%); color: #fff; padding: 56px 0; }
.home-hero h1 { font-size: 34px; margin: 0 0 12px; color: #fff; }
.home-hero p { font-size: 16px; line-height: 1.9; color: rgba(255,255,255,.88); margin: 0; }
.home-hero .hero-tags { margin-top: 18px; }
.home-hero .hero-tags span { display: inline-block; padding: 4px 12px; margin: 0 8px 8px 0; font-size: 13px;
  border: 1px solid rgba(255,255,255,.42); border-radius: 14px; }
.home-news-h img { width: 100%; }

/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
  .nav-toggle { display: block; }
  #pc-header .x9, #pc-header .x1 { display: none; }
  #pc-header .x2 { width: 70%; }
  .article-page { padding: 22px 18px; }
  .page-title { font-size: 20px; }
  .home-hero { padding: 34px 0; }
  .home-hero h1 { font-size: 22px; }
  .product-grid-list .x4 { width: 50%; }
}
@media (max-width: 600px) {
  .product-grid-list .x4 { width: 100%; }
  .content table td, .spec-table td { padding: 8px 10px; font-size: 13px; }
}

/* 首页主推新闻卡片 */
.feature-news { display: block; text-decoration: none; }
.feature-news img { width: 100%; }
.feature-news-body { padding: 16px 18px 20px; }
.feature-news-body h3 { font-size: 17px; line-height: 1.6; color: #1a1a1a; margin: 0 0 8px; }
.feature-news-body p { margin: 0; font-size: 13px; line-height: 1.7; }
.nav-x-list { list-style: none; margin: 0; padding: 14px 0 0; }
.nav-x-list li { display: inline-block; margin-right: 18px; }
.nav-x-list li a { font-size: 15px; color: #666; padding-bottom: 6px; }
.nav-x-list li a.active { color: #ffb400; border-bottom: 2px solid #ffb400; }
.tag-cloud { line-height: 2.6; }
.tag-cloud .tag-item { display: inline-block; padding: 4px 14px; margin: 0 8px 8px 0; background: #f5f7fa; border-radius: 14px; font-size: 14px; color: #555; }
.tag-links li { line-height: 2.2; }
.site-search { margin-bottom: 18px; }
.site-search input { width: 320px; max-width: 70%; }
.search-result ul { list-style: none; padding: 0; }
.search-result li { padding: 12px 0; border-bottom: 1px solid #eee; }
.search-result li a { font-size: 16px; color: #14538c; }
.contact-cards { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 22px; }
.contact-item { flex: 1 1 220px; background: #f7f9fc; border-radius: 8px; padding: 16px 18px; }
.contact-item h3 { margin: 0 0 8px; font-size: 15px; color: #14538c; }
.contact-item p { margin: 0; font-size: 14px; line-height: 1.8; color: #444; }

/* 新闻列表：无封面图的整行展示 */
.time-inline { padding: 12px 20px 0; font-size: 13px; }
.list-news .news { padding: 12px 20px 20px; }
.list-news .news h3 { margin: 0 0 8px; font-size: 18px; line-height: 1.6; }
.list-news .news h3 a { color: #1a1a1a; }
.list-news .news p { margin: 0; font-size: 13px; line-height: 1.8; }

/* ---------- 移动端布局（Pintuer 栅格默认不堆叠，这里补上） ---------- */
@media (max-width: 900px) {
  #pc-header .navbar { height: 64px; }
  #pc-header .x2.logo { width: 70%; float: left; }
  #pc-header .x2.logo img { max-height: 44px; }
  .home-hero .x8, .home-hero .x4,
  .home-about .x6,
  .home-news-l, .home-news-r,
  .product-description .x5, .product-description .x7 { float: none !important; width: 100% !important; }
  .product-description .padding-large-top { padding: 10px 0 !important; }
  .product-description .padding-large { padding: 16px 0 !important; }
  .home-news-r .x3, .home-news-r .x7 { float: none !important; width: 100% !important; }
  .home-news-r .x2 { display: none; }
  .home-news-r .home-news-c { padding-bottom: 10px; }
  .product-grid-list > .x4 { width: 50% !important; }
  .filter-box dl dt, .filter-box dl dd { float: none !important; width: 100% !important; }
  .nav-bread { line-height: 1.8; font-size: 13px; }
  .tab-nav li { margin: 0 6px 8px 0; }
  .tab-nav li a { font-size: 13px; padding: 4px 12px; }
  .contact-item { flex: 1 1 100%; }
  .article-page { padding: 16px 14px !important; }
  #m-nav .m-nav-list { padding-bottom: 30px; }
  .list-news > .x4, .list-news > .x1, .list-news > .x7, .list-news > .x12 { float: none !important; width: 100% !important; }
}
@media (max-width: 520px) {
  .product-grid-list > .x4 { width: 100% !important; }
  .home-hero h1 { font-size: 20px !important; }
  .page-title { font-size: 19px !important; }
  .content table td, .spec-table td { padding: 8px 10px !important; font-size: 13px !important; }
}

/* 产品卡片：图片高度统一，网格整齐 */
.product-card .media-y .padding-large { padding: 14px; }
.product-card img.img-responsive { width: 100%; height: 210px; object-fit: contain; background: #fff; }
.product-card .media-body h2 { height: 44px; overflow: hidden; }
.product-card .price-info li.v2-1 { font-size: 15px; }
@media (max-width: 900px) { .product-card img.img-responsive { height: 150px; } }
@media (max-width: 520px) { .product-card img.img-responsive { height: 200px; } }