/**
 * page.css — Site9 内页公共样式
 * Phase 2 | 公共模块
 * 内页布局 / 产品列表 / 新闻列表 / 联系我们 / 下载 / 博客
 */

/* ============================================================
   Inner Page Layout
   ============================================================ */
.inner-layout {
  display: grid;
  padding: 40px 0 60px;
  grid-template-columns: 300px 1fr;
  gap: 40px;
}

.inner-layout.full-width {
  grid-template-columns: 1fr;
}

.inner-content {
  min-width: 0;
}

/* ============================================================
   Product List Grid
   ============================================================ */
.prod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 30px;
}

.prod-card {
  border-radius: var(--border);
  background: var(--white);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
  overflow: hidden;
  transition: box-shadow .3s, transform .3s;
}

.prod-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  transform: translateY(-4px);
}

.prod-card .thumb {
  position: relative;
  overflow: hidden;
}

.prod-card .thumb img {
  width: 100%;
  transition: transform .4s;
}

.prod-card:hover .thumb img {
  transform: scale(1.05);
}

.prod-card .body {
  padding: 16px 20px;
}

.prod-card .name {
  margin-bottom: 8px;
  font-weight: 600;
  font-size: var(--fontsize16);
}

.prod-card .name a {
  color: var(--fontcolor);
}

.prod-card .name a:hover {
  color: var(--color);
}

.prod-card .cat {
  color: var(--summarycolor);
  font-size: var(--fontsize13);
}

.prod-card .read-more {
  display: inline-block;
  margin-top: 10px;
  color: var(--color);
  font-weight: 500;
  font-size: var(--fontsize14);
}

.prod-card .read-more:hover {
  text-decoration: underline;
}

/* ============================================================
   Product Detail
   ============================================================ */
.product-detail-section {
  padding: 50px 0 70px;
}

/* Layout */
.product-detail-layout {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  flex-wrap: nowrap;
}

.product-detail-main {
  flex: 1;
  min-width: 0;
}

.prodetails-sidear {
  flex: 0 0 280px;
  width: 280px;
}

.product-detail-main {
  flex: 1;
  min-width: 0;
}

/* Product Top (Image + Info) */
.product-detail-top {
  display: flex;
  gap: 40px;
  margin-bottom: 40px;
}

.product-detail-gallery {
  flex: 0 0 48%;
  display: flex;
  gap: 15px;
}

.gallery-thumbs {
  display: flex;
  flex-direction: column;
  width: 80px;
  flex-shrink: 0;
}

.gallery-thumbs .thumb-prev,
.gallery-thumbs .thumb-next {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 30px;
  border: 1px solid #eee;
  background: #fff;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 14px;
}

.gallery-thumbs .thumb-prev:hover,
.gallery-thumbs .thumb-next:hover {
  background: var(--color);
  border-color: var(--color);
  color: #fff;
}

.gallery-thumbs .thumb-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}

.gallery-thumbs .thumb-item {
  width: 80px;
  height: 80px;
  object-fit: contain;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.2s;
  background: #fff;
}

.gallery-thumbs .thumb-item:hover,
.gallery-thumbs .thumb-item.active {
  border-color: var(--color);
}

.gallery-main {
  flex: 1;
  border: 1px solid #eee;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #fff;
}

.gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.product-detail-info {
  flex: 1;
}

.product-detail-name {
  font-size: var(--fontsize28);
  font-weight: 700;
  color: var(--fontcolor);
  margin: 0 0 15px;
  line-height: 1.3;
}

.product-detail-divider {
  width: 60px;
  height: 3px;
  background: var(--color);
  margin-bottom: 18px;
}

.product-detail-desc {
  font-size: var(--fontsize15);
  color: var(--summarycolor);
  line-height: 2;
  margin-bottom: 20px;
}

.product-detail-desc p {
  margin: 0;
}

/* Share */
.product-detail-share {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 25px;
  font-size: var(--fontsize14);
  color: #666;
}

.share-icons {
  display: flex;
  gap: 6px;
}

.share-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 3px;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  transition: all .3s;
}

.share-icon:hover {
  transform: translateY(-3px);
  opacity: .85;
}

.share-icon.facebook { background: #1877F2; }
.share-icon.twitter { background: #000; }
.share-icon.linkedin { background: #0A66C2; }
.share-icon.whatsapp { background: #25D366; }
.share-icon.email { background: #F90; }

/* Actions */
.product-detail-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.btn-inquiry {
  background: var(--bgcolor);
  color: #fff;
  border: none;
  padding: 12px 30px;
  font-size: var(--fontsize15);
  font-weight: 500;
  cursor: pointer;
  transition: opacity .3s;
}

.btn-inquiry:hover {
  opacity: .85;
}

.btn-cart {
  background: #fff;
  color: var(--color);
  border: 2px solid var(--color);
  padding: 12px 24px;
  font-size: var(--fontsize15);
  font-weight: 500;
  cursor: pointer;
  transition: all .3s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-cart:hover {
  background: var(--color);
  color: #fff;
}

/* Tabs */
.product-detail-tabs {
  margin-bottom: 40px;
}

.tabs-nav {
  display: flex;
  border-bottom: 2px solid #eee;
  margin-bottom: 30px;
}

.tab-btn {
  padding: 12px 30px;
  border: none;
  background: none;
  font-size: var(--fontsize16);
  font-weight: 600;
  color: #666;
  cursor: pointer;
  position: relative;
  transition: color .3s;
  font-family: inherit;
}

.tab-btn.active {
  color: var(--color);
}

.tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color);
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

/* Description Content */
.product-description h2 {
  font-size: var(--fontsize24);
  font-weight: 600;
  color: var(--fontcolor);
  margin: 0 0 15px;
}

.product-description h3 {
  font-size: var(--fontsize20);
  font-weight: 600;
  color: var(--fontcolor);
  margin: 30px 0 15px;
}

.product-description > p {
  font-size: var(--fontsize15);
  color: var(--summarycolor);
  line-height: 1.8;
  margin: 0 0 20px;
}

/* Feature Grid */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}

.feature-item {
  display: flex;
  gap: 15px;
  padding: 20px;
  border: 1px solid #eee;
  transition: box-shadow .3s;
}

.feature-item:hover {
  box-shadow: 0 4px 15px rgba(0,0,0,.06);
}

.feature-icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  background: #f0f0f0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--color);
}

.feature-info h4 {
  font-size: var(--fontsize15);
  font-weight: 600;
  color: var(--fontcolor);
  margin: 0 0 8px;
}

.feature-info p {
  font-size: var(--fontsize13);
  color: var(--summarycolor);
  line-height: 1.6;
  margin: 0;
}

/* Application Grid */
.application-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.application-item {
  text-align: center;
}

.app-img {
  overflow: hidden;
  margin-bottom: 10px;
}

.app-img img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform .3s;
}

.application-item:hover .app-img img {
  transform: scale(1.05);
}

.application-item p {
  font-size: var(--fontsize14);
  font-weight: 500;
  color: var(--fontcolor);
  margin: 0;
}

/* Specs Table */
.product-specs h2 {
  font-size: var(--fontsize24);
  font-weight: 600;
  color: var(--fontcolor);
  margin: 0 0 20px;
}

.specs-table {
  width: 100%;
  border-collapse: collapse;
}

.specs-table tr:nth-child(odd) {
  background: #fafafa;
}

.specs-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
  font-size: var(--fontsize14);
}

.specs-table .spec-label {
  font-weight: 600;
  color: var(--fontcolor);
  width: 35%;
}

.specs-table .spec-value {
  color: var(--summarycolor);
}

/* Prev / Next */
.product-detail-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 40px 0;
  padding: 20px 0;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

.product-detail-nav a {
  text-decoration: none;
  font-size: var(--fontsize14);
  color: var(--summarycolor);
  transition: color .3s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.product-detail-nav a:hover {
  color: var(--color);
}

.product-detail-nav a.disabled {
  color: #ccc;
  cursor: default;
  pointer-events: none;
}

/* Related Products */
.related-products {
  margin-bottom: 40px;
}

.related-title {
  font-size: var(--fontsize24);
  font-weight: 600;
  color: var(--fontcolor);
  margin: 0 0 20px;
  padding-bottom: 10px;
  border-bottom: 3px solid var(--color);
  display: inline-block;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* Inquiry Form */
.product-inquiry-form {
  max-width: 700px;
}

.inquiry-title {
  font-size: var(--fontsize24);
  font-weight: 600;
  color: var(--fontcolor);
  margin: 0 0 20px;
  padding-bottom: 10px;
  border-bottom: 3px solid var(--color);
  display: inline-block;
}

.inquiry-form-fields .form-row {
  margin-bottom: 18px;
}

.inquiry-form-fields input,
.inquiry-form-fields textarea {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #ddd;
  font-size: var(--fontsize14);
  font-family: inherit;
  outline: none;
  transition: border-color .3s;
  box-sizing: border-box;
}

.inquiry-form-fields input:focus,
.inquiry-form-fields textarea:focus {
  border-color: var(--color);
}

.inquiry-form-fields textarea {
  resize: vertical;
  min-height: 120px;
}

/* Legacy Product Detail (backward compat) */
.prod-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.prod-detail .gallery {
  border-radius: var(--border);
  overflow: hidden;
}

.prod-detail .gallery img {
  width: 100%;
}

.prod-detail .info h1 {
  margin-bottom: 16px;
  font-weight: 600;
  font-size: var(--fontsize28);
}

.prod-detail .info .price {
  margin-bottom: 20px;
  color: var(--color);
  font-weight: 700;
  font-size: var(--fontsize24);
}

.prod-detail .info .desc {
  margin-bottom: 20px;
  color: var(--summarycolor);
  line-height: 1.8;
}

.prod-detail .specs {
  margin-bottom: 24px;
}

.prod-detail .specs li {
  display: flex;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
  font-size: var(--fontsize14);
}

.prod-detail .specs li .key {
  width: 140px;
  font-weight: 600;
  color: var(--fontcolor);
  flex-shrink: 0;
}

.prod-detail .specs li .val {
  color: var(--summarycolor);
}

/* ============================================================
   News List
   ============================================================ */
.news-list .news-item {
  display: flex;
  margin-bottom: 24px;
  border-radius: var(--border);
  background: var(--white);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
  overflow: hidden;
  gap: 24px;
  transition: box-shadow .3s;
}

.news-list .news-item:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, .1);
}

.news-list .thumb {
  width: 300px;
  flex-shrink: 0;
  overflow: hidden;
}

.news-list .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s;
}

.news-list .news-item:hover .thumb img {
  transform: scale(1.05);
}

.news-list .body {
  flex: 1;
  padding: 16px 20px 16px 0;
}

.news-list .body .title {
  margin-bottom: 10px;
  font-weight: 600;
  font-size: var(--fontsize18);
}

.news-list .body .title a {
  color: var(--fontcolor);
}

.news-list .body .title a:hover {
  color: var(--color);
}

.news-list .body .date {
  margin-bottom: 10px;
  color: #999;
  font-size: var(--fontsize13);
}

.news-list .body .excerpt {
  color: var(--summarycolor);
  line-height: 1.7;
  font-size: var(--fontsize14);
}

/* News Detail */
.news-detail h1 {
  margin-bottom: 16px;
  font-weight: 700;
  font-size: var(--fontsize28);
  color: var(--fontcolor);
  line-height: 1.3;
}

.news-detail .meta {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 25px;
  padding-bottom: 18px;
  border-bottom: 1px solid #eee;
  color: #888;
  font-size: var(--fontsize14);
  flex-wrap: wrap;
}

.news-detail .meta .latest-news-time {
  display: flex;
  align-items: center;
  gap: 6px;
}

.news-detail .meta .latest-news-time .iconfont {
  font-size: 16px;
  color: var(--color);
}

.news-detail .content {
  line-height: 1.8;
  font-size: var(--fontsize15);
}

.news-detail .content p {
  margin-bottom: 16px;
  color: var(--summarycolor);
}

.news-detail .content img {
  display: block;
  margin: 20px 0;
  max-width: 100%;
  height: auto;
}

.news-detail .content h2 {
  font-size: var(--fontsize22);
  font-weight: 600;
  color: var(--fontcolor);
  margin: 30px 0 15px;
}

.news-detail .content h3 {
  font-size: var(--fontsize18);
  font-weight: 600;
  color: var(--fontcolor);
  margin: 25px 0 12px;
}

.news-detail .content ul,
.news-detail .content ol {
  margin: 0 0 20px;
  padding-left: 20px;
}

.news-detail .content li {
  margin-bottom: 8px;
  font-size: var(--fontsize15);
  color: var(--summarycolor);
  line-height: 1.7;
}

.news-detail .content table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}

.news-detail .content table td {
  padding: 10px 14px;
  border: 1px solid #ddd;
  font-size: var(--fontsize14);
}

.news-detail .content table tr:nth-child(odd) {
  background: #fafafa;
}

/* Pro button in detail meta */
.pro-btn.send {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bgcolor);
  color: #fff;
  padding: 6px 16px;
  border-radius: 3px;
  cursor: pointer;
  font-weight: 500;
  transition: opacity .3s;
}

.pro-btn.send:hover {
  opacity: .85;
}

/* ============================================================
   Contact Page
   ============================================================ */
.contact-info-grid {
  display: flex;
  gap: 20px;
  margin-bottom: 40px;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

.contact-info-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 30px 20px;
  background: #fafafa;
  border: 1px solid #eee;
  gap: 12px;
  transition: all .3s;
}

.contact-info-card:hover {
  box-shadow: 0 4px 15px rgba(0,0,0,.08);
}

.contact-info-card .icon {
  display: flex;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  color: inherit;
  font-size: inherit;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  margin-bottom: 0;
}

.contact-info-card .icon img {
  width: 36px;
  height: 36px;
}

.contact-info-card .text h4 {
  margin-bottom: 6px;
  font-weight: 600;
  font-size: var(--fontsize16);
  color: var(--fontcolor);
}

.contact-info-card .text p {
  color: var(--summarycolor);
  font-size: var(--fontsize14);
  line-height: 1.6;
}

.contact-detail-intro {
  font-size: var(--fontsize20);
  font-weight: 500;
  color: var(--color);
  margin-bottom: 30px;
  text-align: center;
}

.contact-form-wrap {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 20px;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.contact-form-wrap .form-row {
  display: flex;
  gap: 20px;
}

.contact-form-wrap .form-row .form-group {
  flex: 1;
}

.contact-form-wrap .form-group {
  margin-bottom: 18px;
}

.contact-form-wrap .form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  font-size: var(--fontsize14);
}

.contact-form-wrap .form-group label em {
  color: #e74c3c;
}

.contact-form-wrap .form-group input,
.contact-form-wrap .form-group textarea {
  display: block;
  padding: 12px 15px;
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 0;
  outline: none;
  font-family: inherit;
  font-size: var(--fontsize14);
  transition: border-color .3s;
  box-sizing: border-box;
}

.contact-form-wrap .form-group input:focus,
.contact-form-wrap .form-group textarea:focus {
  border-color: var(--color);
}

.contact-form-wrap .form-group textarea {
  height: 140px;
  resize: vertical;
  min-height: 120px;
}

.contact-form-wrap .submit-btn {
  padding: 12px 40px;
  border-radius: 0;
  background: var(--bgcolor);
  color: var(--white);
  font-weight: 500;
  font-size: var(--fontsize15);
  cursor: pointer;
  transition: opacity .3s;
  border: none;
}

.contact-form-wrap .submit-btn:hover {
  opacity: .85;
}

/* Contact Map */
.contact-map-img {
  margin: 30px 0;
}

.contact-map-img img {
  width: 100%;
  height: auto;
  display: block;
}

/* ============================================================
   Download Page
   ============================================================ */
.download-grid {
  display: flex;
  gap: 25px;
  flex-wrap: wrap;
}

.download-item {
  flex: 0 0 calc(33.33% - 17px);
  background: #fafafa;
  padding: 30px;
  text-align: center;
  border: 1px solid #eee;
  transition: all .3s;
  display: block;
}

.download-item:hover {
  box-shadow: 0 4px 15px rgba(0,0,0,.08);
  transform: none;
}

.download-item .icon {
  display: block;
  margin-bottom: 15px;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  color: inherit;
  font-size: inherit;
}

.download-item .icon img {
  max-width: 120px;
  height: auto;
}

.download-item .info {
  flex: none;
}

.download-item .info .name {
  margin-bottom: 15px;
  font-weight: 600;
  font-size: var(--fontsize16);
  color: var(--fontcolor);
}

.download-item .info .size {
  display: none;
}

.download-item .d-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  border-radius: var(--border);
  background: var(--bgcolor);
  color: var(--white);
  font-weight: 500;
  font-size: var(--fontsize14);
  white-space: nowrap;
  text-decoration: none;
  transition: opacity .3s;
}

.download-item .d-btn:hover {
  opacity: .85;
  color: var(--white);
}

/* Download List (alternate layout) */
.download-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 25px;
  flex-wrap: wrap;
}

.download-list > li {
  flex: 0 0 calc(33.33% - 17px);
  display: block;
  padding: 30px;
  text-align: center;
  border: 1px solid #eee;
  background: #fafafa;
  transition: all .3s;
}

.download-list > li:hover {
  box-shadow: 0 4px 15px rgba(0,0,0,.08);
  border-color: #eee;
}

/* ============================================================
   Blog Page
   ============================================================ */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 30px;
}

.blog-card {
  border-radius: var(--border);
  background: var(--white);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
  overflow: hidden;
  transition: box-shadow .3s, transform .3s;
}

.blog-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  transform: translateY(-4px);
}

.blog-card .thumb {
  overflow: hidden;
}

.blog-card .thumb img {
  width: 100%;
  transition: transform .4s;
}

.blog-card:hover .thumb img {
  transform: scale(1.05);
}

.blog-card .body {
  padding: 20px;
}

.blog-card .body .title {
  margin-bottom: 10px;
  font-weight: 600;
  font-size: var(--fontsize18);
}

.blog-card .body .title a {
  color: var(--fontcolor);
}

.blog-card .body .title a:hover {
  color: var(--color);
}

.blog-card .body .excerpt {
  color: var(--summarycolor);
  line-height: 1.7;
  font-size: var(--fontsize14);
}

.blog-card .body .meta {
  display: flex;
  margin-top: 12px;
  color: #999;
  font-size: var(--fontsize12);
  justify-content: space-between;
}

/* ============================================================
   Search Results
   ============================================================ */
.search-result-header {
  margin-bottom: 30px;
  padding: 16px 0;
  border-bottom: 1px solid #eee;
}

.search-result-header .query {
  color: var(--color);
  font-weight: 600;
}

.search-header {
  margin-bottom: 30px;
}

.search-query {
  font-size: var(--fontsize18);
  color: var(--summarycolor);
}

.search-query strong {
  color: var(--color);
}

.product-search-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.product-search-card {
  border: 1px solid #eee;
  overflow: hidden;
  transition: box-shadow .3s;
}

.product-search-card:hover {
  box-shadow: 0 4px 15px rgba(0,0,0,.08);
}

.product-search-card-img {
  display: block;
  overflow: hidden;
}

.product-search-card-img img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  transition: transform .3s;
  display: block;
}

.product-search-card:hover .product-search-card-img img {
  transform: scale(1.05);
}

.product-search-card-info {
  padding: 15px;
}

.product-search-card-info .card-title {
  font-size: var(--fontsize14);
  font-weight: 500;
  color: var(--fontcolor);
  text-decoration: none;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-search-card-info .card-title:hover {
  color: var(--color);
}

/* ============================================================
   Privacy Policy / Static Pages
   ============================================================ */
.static-content {
  line-height: 1.9;
  font-size: var(--fontsize15);
}

.static-content h2 {
  margin: 30px 0 15px;
  font-weight: 600;
  font-size: var(--fontsize22);
}

.static-content h3 {
  margin: 20px 0 10px;
  font-weight: 600;
  font-size: var(--fontsize18);
}

.static-content p {
  margin-bottom: 16px;
}

.static-content ul {
  margin-bottom: 16px;
  padding-left: 20px;
}

.static-content ul li {
  margin-bottom: 6px;
  list-style-type: disc;
}

/* ============================================================
   Products Category Page
   ============================================================ */
.about-category {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  list-style: none;
  padding: 0;
  margin: 0;
  margin-bottom: 40px;
}

.about-category > li {
  position: relative;
  text-align: center;
  border: 1px solid #eee;
  overflow: hidden;
  transition: box-shadow .3s;
}

.about-category > li:hover {
  box-shadow: 0 4px 15px rgba(0,0,0,.08);
}

.about-category .ca-img {
  display: block;
  overflow: hidden;
}

.about-category .ca-img img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform .4s;
  display: block;
}

.about-category > li:hover .ca-img img {
  transform: scale(1.05);
}

.category-content {
  padding: 0;
}

.category-title {
  display: block;
  font-weight: 600;
  font-size: var(--fontsize18);
  color: var(--fontcolor);
  padding: 14px 10px;
  margin: 0;
  transition: color .2s;
  text-decoration: none;
}

.category-title:hover {
  color: var(--color);
}

.category-icon {
  display: none;
}

/* Section Title (products listing, related, etc.) */
.section-title {
  font-size: var(--fontsize24);
  font-weight: 600;
  color: var(--fontcolor);
  margin: 30px 0 20px;
  padding-bottom: 10px;
  border-bottom: 3px solid var(--color);
  display: inline-block;
}

.page-intro {
  font-size: var(--fontsize15);
  color: var(--summarycolor);
  line-height: 1.8;
  margin-bottom: 25px;
  max-width: 900px;
}

/* Featured content section in Products */
.prod-section-title {
  margin: 40px 0 20px;
  color: var(--fontcolor);
  text-transform: uppercase;
  font-weight: 600;
  font-size: var(--fontsize22);
}

.prod-feature-item {
  display: inline-block;
  margin: 6px 10px 6px 0;
  padding: 8px 20px;
  border-radius: 4px;
  background: var(--bgcolor);
  color: var(--white);
  font-weight: 500;
  font-size: var(--fontsize14);
}

.prod-partner-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin: 20px 0 40px;
}

.prod-partner-item {
  border: 1px solid #eee;
  border-radius: var(--border);
  overflow: hidden;
  transition: border-color .3s;
}

.prod-partner-item:hover {
  border-color: var(--color);
}

.prod-partner-item img {
  width: 100%;
  display: block;
}

/* ============================================================
   Products List / pro-list
   ============================================================ */
.pro-cate-title {
  margin-bottom: 30px;
  font-weight: 600;
  font-size: var(--fontsize24);
  color: var(--fontcolor);
}

.pro-list.list1 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.pro-list.list1 > li {
  border-radius: var(--border);
  background: var(--white);
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  overflow: hidden;
  transition: transform .3s, box-shadow .3s;
}

.pro-list.list1 > li:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

.pro-list.list1 .pr-img {
  position: relative;
  overflow: hidden;
}

.pro-list.list1 .pr-img a {
  display: block;
}

.pro-list.list1 .pr-img img {
  width: 100%;
  transition: transform .4s;
}

.pro-list.list1 > li:hover .pr-img img {
  transform: scale(1.05);
}

.pro-list.list1 .pr-img .iconfont {
  position: absolute;
  top: 12px;
  right: 12px;
  color: #e74c3c;
  font-size: var(--fontsize18);
}

.pro-list.list1 .info {
  padding: 16px;
}

.pro-list.list1 .info .title {
  display: block;
  font-weight: 600;
  font-size: var(--fontsize15);
  color: var(--fontcolor);
  transition: color .2s;
  margin-bottom: 10px;
}

.pro-list.list1 .info .title:hover {
  color: var(--color);
}

.pro-list.list1 .info .bottom {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.pro-list.list1 .info .bottom .icon {
  color: var(--color);
  font-size: var(--fontsize18);
  cursor: pointer;
}

.pro-list.list1 .info .bottom .icon:hover {
  opacity: .7;
}

/* ============================================================
   News/Blog List (reference-compatible)
   ============================================================ */
.news-list .list0,
.news-list .list1,
.blog-list .list1 {
  list-style: none;
  padding: 0;
  margin: 0;
}

.news-list .list1 > li,
.blog-list .list1 > li {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding: 20px 0;
  border-bottom: 1px solid #eee;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  transition: none;
}

.news-list .list1 > li:first-child,
.blog-list .list1 > li:first-child {
  padding-top: 0;
}

.news-list .list1 > li:hover,
.blog-list .list1 > li:hover {
  box-shadow: none;
  transform: none;
}

.news-list .list1 .img,
.blog-list .list1 .img {
  flex: 0 0 280px;
  width: 280px;
  flex-shrink: 0;
  overflow: hidden;
  display: block;
  border-radius: 3px;
}

.news-list .list1 .img img,
.blog-list .list1 .img img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  transition: transform .4s;
  display: block;
}

.news-list .list1 > li:hover .img img,
.blog-list .list1 > li:hover .img img {
  transform: scale(1.05);
}

.news-list .list1 .info {
  flex: 1;
  min-width: 0;
  padding: 0;
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.news-list .list1 .info .inter {
  flex: 0 0 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.news-list .list1 .info .inter .date {
  background: var(--color);
  color: #fff;
  text-align: center;
  line-height: 1.2;
  padding: 10px 12px;
  border-radius: 2px;
  width: 68px;
}

.news-list .list1 .info .inter .date .day {
  display: block;
  font-weight: 700;
  font-size: var(--fontsize24);
  color: #fff;
}

.news-list .list1 .info .inter .date p:last-child {
  font-size: var(--fontsize12);
  color: #fff;
  text-transform: uppercase;
  margin: 0;
  letter-spacing: .5px;
}

.news-list .list1 .info .inter .btn {
  display: inline-block;
  padding: 6px 14px;
  background: var(--bgcolor);
  color: #fff;
  border-radius: 3px;
  font-size: var(--fontsize12);
  text-decoration: none;
  white-space: nowrap;
  text-transform: capitalize;
  transition: opacity .3s;
}

.news-list .list1 .info .inter .btn:hover {
  opacity: .85;
}

.news-list .list1 .info .text {
  flex: 1;
  min-width: 0;
}

.news-list .list1 .info .text .title {
  display: block;
  margin-bottom: 10px;
  font-weight: 600;
  font-size: var(--fontsize18);
  color: var(--fontcolor);
  text-decoration: none;
  line-height: 1.4;
  transition: color .3s;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-list .list1 .info .text .title:hover {
  color: var(--color);
}

.news-list .list1 .info .text p {
  color: var(--summarycolor);
  font-size: var(--fontsize14);
  line-height: 1.7;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

/* Pagination */
.pr-common-page {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 30px;
  font-size: var(--fontsize14);
}

.pr-common-page a,
.pr-common-page span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid #ddd;
  text-decoration: none;
  color: var(--fontcolor);
  border-radius: 3px;
  transition: all .3s;
}

.pr-common-page a:hover,
.pr-common-page .ctxt {
  background: var(--color);
  color: #fff;
  border-color: var(--color);
}

/* Inquiry block (bottom of list) */
#toinquiry { 
  margin-top: 40px; 
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}

#toinquiry .send-inquiry {
  width: 100%;
}
.prodetails-title {
  display: flex;
  margin-top: 50px;
  align-items: center;
}
.prodetails-title-box {
  margin-right: 10px;
  width: 10px;
  height: 10px;
  background-color: var(--color);
}
.prodetails-title p {
  color: #191919;
  font-weight: var(--fontbold7);
  font-size: var(--fontsize24);
}
.pr-inquiry-line {
  margin: 15px 0;
  width: 100%;
  height: 1px;
  background: #e1e1e1;
}

.wmkcfeedback .send-inquiry { margin-bottom: 15px; }
.inquiry-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
  width: 100%;
  max-width: 100%;
}
.inquiry-form textarea { grid-column: 1 / -1; }
.inquiry-form input,
.inquiry-form textarea {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #ddd;
  font-size: var(--fontsize14);
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
  transition: border-color .3s;
  border-radius: 3px;
}
.inquiry-form input:focus,
.inquiry-form textarea:focus { border-color: var(--color); }
.inquiry-form textarea { resize: vertical; min-height: 130px; }
.send-btn {
  display: inline-block;
  background: var(--color);
  color: #fff;
  border: none;
  padding: 12px 35px;
  font-size: var(--fontsize15);
  font-weight: 500;
  cursor: pointer;
  border-radius: 3px;
  transition: opacity .3s;
}
.send-btn:hover { opacity: .85; }

/* News/Blog Detail Page */
.common-news .news-box {
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.common-news .news-box h1 {
  font-weight: 700;
  font-size: var(--fontsize28);
  color: var(--fontcolor);
  margin-bottom: 18px;
  line-height: 1.3;
}

.common-news .news-box .share {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 25px;
  padding-bottom: 18px;
  border-bottom: 1px solid #eee;
  align-items: center;
  color: #888;
  font-size: var(--fontsize14);
}

.common-news .news-box .share a {
  display: inline-flex;
  width: 32px;
  height: 32px;
  border-radius: 3px;
  background: transparent;
  color: #fff;
  font-size: 14px;
  align-items: center;
  justify-content: center;
  transition: transform .3s, opacity .3s;
  text-decoration: none;
}

.common-news .news-box .share a:hover {
  background: inherit;
  color: inherit;
  transform: translateY(-3px);
  opacity: .85;
}

.common-news .news-box .share a.facebook { background: #1877F2; }
.common-news .news-box .share a.twitter { background: #000; }
.common-news .news-box .share a.linkedin { background: #0A66C2; }
.common-news .news-box .share a.pinterest { background: #E60023; }
.common-news .news-box .share a.whatsapp { background: #25D366; }
.common-news .news-box .share a.mail { background: #F90; }

.common-news .news-box .share a:hover.facebook,
.common-news .news-box .share a:hover.twitter,
.common-news .news-box .share a:hover.linkedin,
.common-news .news-box .share a:hover.pinterest,
.common-news .news-box .share a:hover.whatsapp,
.common-news .news-box .share a:hover.mail {
  color: #fff;
  transform: translateY(-3px);
  opacity: .85;
}

.common-news .news-box .content {
  line-height: 1.8;
  font-size: var(--fontsize15);
  color: var(--summarycolor);
}

.common-news .news-box .content p {
  margin-bottom: 16px;
}

.common-news .news-box .content img {
  display: block;
  margin: 20px 0;
  max-width: 100%;
  height: auto;
  border-radius: 0;
}

.common-news .news-box .content h2 {
  font-size: var(--fontsize22);
  font-weight: 600;
  color: var(--fontcolor);
  margin: 30px 0 15px;
  display: block;
}

.common-news .news-box .content h3 {
  font-size: var(--fontsize18);
  font-weight: 600;
  color: var(--fontcolor);
  margin: 25px 0 12px;
  display: block;
}

.common-news .news-box .content strong {
  margin: 0;
  display: inline;
}

/* News detail: content + sidebar width */
.common-news .news-detail-content {
  width: 73%;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.common-news .news-detail-content p {
  white-space: normal !important;
  text-wrap: wrap !important;
  word-break: break-word;
}

.common-news .news-detail-content span {
  white-space: normal !important;
  text-wrap: wrap !important;
}

.common-news .prodetails-sidear {
  width: 22.5%;
}

/* News detail: data + title */
.news-detail-content .news-detail-data {
  display: flex;
  flex-wrap: wrap;
  margin: 10px 0;
}
.news-detail-content .news-detail-data .latest-news-time {
  display: flex;
  margin-right: 20px;
  color: #333;
  font-weight: var(--fontbold4);
  font-size: var(--fontsize14);
  align-items: center;
}
.news-detail-content .news-detail-data .send {
  display: flex;
  color: #333;
  font-weight: var(--fontbold4);
  font-size: var(--fontsize14);
  cursor: pointer;
  align-items: center;
}
.news-detail-content .news-detail-data .latest-news-time .iconfont {
  margin-right: 5px;
}
.news-detail-content .news-detail-title {
  margin-top: 10px;
  color: #191919;
  font-weight: var(--fontbold5);
  font-size: var(--fontsize26);
}
.news-detail-content .news-detail-line {
  margin: 10px 0;
  width: 100%;
  height: 1px;
  background: #e1e1e1;
}

/* News detail prev/next nav */
.news-detail-content .news-box {
  display: flex;
  width: 100%;
  justify-content: space-between;
  flex-wrap: wrap;
}
.news-detail-content .news-box div {
  width: 48.7%;
  border-radius: 3px;
  background: #f2f3f5;
}
.news-detail-content .news-box a {
  display: inline-block;
  padding: 20px;
  width: 100%;
  height: 100%;
  color: #000;
  font-weight: var(--fontbold4);
  font-size: var(--fontsize18);
}
.news-detail-content .news-box div:hover {
  background-color: var(--color);
  color: #fff;
}
.news-detail-content .news-box div:hover a {
  color: #fff;
}

/* Share buttons section (detail) */
.news-share.share-btn-list {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 30px 0;
  padding: 20px 0;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

.share-btn {
  width: 32px;
  height: 32px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  cursor: pointer;
  transition: all .3s;
}

.share-btn:hover {
  transform: translateY(-3px);
  opacity: .85;
}

.share-btn.facebook { background: #1877F2; }
.share-btn.twitter { background: #000; }
.share-btn.linkedin { background: #0A66C2; }
.share-btn.pinterest { background: #E60023; }
.share-btn.whatsapp { background: #25D366; }
.share-btn.mail { background: #F90; }

/* Product Detail Page — FAQs / Prev-Next */
.prodetails-faq {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.prodetails-faq .faq-box {
  display: flex;
  width: 100%;
  max-width: 100%;
  gap: 10px;
  flex-wrap: nowrap;
  box-sizing: border-box;
}

.prodetails-faq .faq-box div {
  flex: 1;
  width: 100%;
  padding: 20px;
  border-radius: 3px;
  background: #f2f3f5;
  color: #000;
  font-weight: var(--fontbold4);
  font-size: var(--fontsize18);
  transition: all 0.2s linear;
  box-sizing: border-box;
}

.prodetails-faq .faq-box div:hover {
  background-color: var(--color);
  color: #fff;
}

/* Product Detail — You Might Also Like */
.prodetails-left .prodetails-like {
  width: 100%;
}

.prodetails-like .pr-like-line {
  margin: 15px 0;
  width: 100%;
  height: 1px;
  background: #e1e1e1;
}

.prodetails-like .pr-like-img {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: space-between;
}

.prodetails-like .pr-like-img a {
  position: relative;
  width: 15.8%;
}

.prodetails-like .pr-like-img a p {
  display: -webkit-box;
  overflow: hidden;
  padding: 5px 15px;
  border: 1px solid #dedee5;
  border-top: none;
  text-overflow: ellipsis;
  font-weight: var(--fontbold5);
  font-size: var(--fontsize18);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.prodetails-like .pr-like-img a img {
  display: block;
  width: 100%;
}

.prodetails-like .pr-like-img a::after {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  width: 100%;
  height: 100%;
  background: #000;
  content: "";
  opacity: 0.2;
}

.prodetails-like .pr-like-img a:hover::after {
  display: block;
}

/* Product Detail spec table */
.common-product table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
}

.common-product table th,
.common-product table td {
  padding: 10px 14px;
  border: 1px solid #eee;
  font-size: var(--fontsize14);
  text-align: left;
}

.common-product table th {
  background: var(--bgcolor);
  color: var(--white);
  font-weight: 600;
}

.common-product table tr:nth-child(even) td {
  background: #f9f9f9;
}

/* Product detail top — image + info side by side */
.common-product .prodetails-top {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 50px;
}

.common-product .singglepic {
  display: flex;
  width: 480px;
  height: 480px;
  align-items: center;
  justify-content: center;
}

.common-product .singglepic img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.prodetails-info {
  padding-left: 30px;
  flex: 1;
}

.prodetails-info .pr-line {
  width: 100%;
  height: 1px;
  background: #e1e1e1;
}

.prodetails-info .prodetails-name {
  padding: 30px 0;
  color: #191919;
  font-weight: var(--fontbold7);
  font-size: var(--fontsize24);
}

.prodetails-info .pr-text {
  padding: 10px 0;
  color: #333;
  font-weight: var(--fontbold4);
  font-size: var(--fontsize16);
}

.prodetails-info .prodetails-btnlist {
  display: flex;
  margin-top: 20px;
  flex-wrap: wrap;
}

.prodetails-info .prodetails-btnlist>* {
  display: inline-flex;
  margin-right: 15px;
  margin-bottom: 10px;
  width: 180px;
  height: 46px;
  border: 1px solid var(--color);
  border-radius: var(--borderradius);
  background: #fff;
  color: var(--color);
  cursor: pointer;
  transition: all .1s linear;
  align-items: center;
  justify-content: center;
}

.prodetails-info .prodetails-btnlist .pro-btn.send:hover {
  border: 1px solid var(--color);
  background-color: var(--color);
  color: #fff;
  transition: all .2s linear;
}

.prodetails-info .prodetails-btnlist .addToCart:hover {
  border: 1px solid var(--color);
  background-color: var(--color);
  color: #fff;
  transition: all .2s linear;
}

/* Product gallery */
.common-product .p_gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: flex-start;
}

.common-product .p_gallery .gallery-main img {
  width: 100%;
  border-radius: var(--border);
}

.common-product .p_gallery .gallery-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.common-product .p_gallery .gallery-thumbs img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color .2s;
}

.common-product .p_gallery .gallery-thumbs img:hover,
.common-product .p_gallery .gallery-thumbs img.active {
  border-color: var(--color);
}

.common-product .p_info {
  padding: 20px;
}

.common-product .p_info h1 {
  font-weight: 600;
  font-size: var(--fontsize22);
  margin-bottom: 16px;
  color: var(--fontcolor);
}

.common-product .p_info .desc {
  color: var(--summarycolor);
  line-height: 1.8;
  font-size: var(--fontsize14);
  margin-bottom: 20px;
}

.common-product .p_info .btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.common-product .p_info .btns a {
  display: inline-flex;
  padding: 10px 24px;
  border-radius: var(--border);
  font-weight: 500;
  font-size: var(--fontsize14);
  align-items: center;
  gap: 6px;
  transition: opacity .2s;
}

.common-product .p_info .btns .inquiry-btn {
  background: var(--bgcolor);
  color: var(--white);
}

.common-product .p_info .btns .whatsapp-btn {
  background: #25D366;
  color: var(--white);
}

.common-product .p_info .btns .cart-btn {
  background: #fff;
  color: var(--color);
  border: 2px solid var(--color);
}

.common-product .p_info .btns .cart-btn:hover {
  background: var(--color);
  color: #fff;
}

.common-product .p_info .btns a:hover {
  opacity: .85;
}

/* Page navigation (prev/next) */
.page-main .page-status {
  display: flex;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #eee;
  flex-wrap: wrap;
  gap: 10px;
  font-size: var(--fontsize14);
}

.page-main .page-status a {
  color: var(--color);
}

.page-main .page-status a:hover {
  text-decoration: underline;
}

/* ============================================================
   Sidebar (prodetails-sidear)
   ============================================================ */
/* Sidebar Search */
.common-product .prodetails-sidear .pr-sidebar-search {
  display: flex;
  overflow: hidden;
  margin-bottom: 20px;
  padding: 15px;
  width: 100%;
  background-color: #f2f3f5;
  border: none;
  border-radius: 0;
  box-sizing: border-box;
}

.pr-sidebar-search {
  display: flex;
  margin-bottom: 24px;
  border: 1px solid #ddd;
  border-radius: 3px;
  overflow: hidden;
}

.prodetails-sidear .pr-sidebar-search .pr-serach-input {
  width: 85%;
}

.pr-serach-input {
  flex: 1;
}

.pr-serach-input input {
  width: 100%;
  border: none;
  padding: 10px 12px;
  font-size: var(--fontsize14);
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
}

.prodetails-sidear .pr-sidebar-search .pr-search-btn {
  width: 48px;
  height: 48px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  background: var(--color);
  cursor: pointer;
  color: #fff;
  border: none;
}

.pr-search-btn {
  background: var(--bgcolor);
  color: #fff;
  border: none;
  padding: 10px 14px;
  cursor: pointer;
  transition: opacity .3s;
  font-size: 16px;
}

.pr-search-btn:hover {
  opacity: .85;
}

/* Sidebar Section Title */
.sidebar-category-title {
  display: flex;
  align-items: center;
}

.category-title-box {
  margin-right:20px;
  width: 8px;
  height: 8px;
  background: var(--color);
}

.sidebar-category-title p {
  font-size: var(--fontsize18);
  font-weight: var(--fontbold7, 700);
  color: #222;
  margin: 0;
  text-transform: capitalize;
}

.pr-category-line {
  margin: 10px 0;
  width: 100%;
  height: 1px;
  background: #e1e1e1;
}

/* Categories / Latest News */
.pr-sidebar-category {
  margin-bottom: 28px;
  padding: 20px;
  border-radius: 3px;
  background: #f2f3f5;
}

.pr-latest-news {
  display: flex;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid #eee;
  align-items: flex-start;
}

.pr-latest-news:first-child {
  padding-top: 0;
}

.latest-news-img {
  flex: 0 0 80px;
  display: block;
  overflow: hidden;
  border-radius: 3px;
}

.latest-news-img img {
  width: 80px;
  height: 60px;
  object-fit: cover;
  display: block;
  transition: transform .3s;
}

.latest-news-img:hover img {
  transform: scale(1.05);
}

.latest-news-content {
  flex: 1;
  min-width: 0;
  text-decoration: none;
  display: block;
}

.latest-news-title {
  font-size: var(--fontsize13);
  font-weight: 500;
  color: var(--fontcolor);
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: 6px;
  transition: color .3s;
}

.latest-news-content:hover .latest-news-title {
  color: var(--color);
}

.latest-news-time {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fontsize12);
  color: #999;
}

.latest-news-time p {
  margin: 0;
}

/* Recommended Products */
.pr-sidebar-recommended { }

.pr-recommended-line {
  height: 1px;
  background: #eee;
  margin: 12px 0;
}

.re-box {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.re-img {
  flex: 0 0 85px;
  display: block;
  overflow: hidden;
}

.re-img img {
  width: 85px;
  height: 85px;
  object-fit: cover;
  display: block;
}

.re-content {
  flex: 1;
  min-width: 0;
  text-decoration: none;
  display: block;
}

.re-title {
  font-size: var(--fontsize13);
  font-weight: 500;
  color: var(--fontcolor);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: 6px;
  transition: color .3s;
}

.re-content:hover .re-title {
  color: var(--color);
}

.re-more {
  display: inline-block;
  font-size: var(--fontsize12);
  color: var(--color);
  text-transform: capitalize;
  transition: opacity .3s;
}

.re-more:hover {
  opacity: .8;
  text-decoration: underline;
}

/* Sidebar Categories */
.sidebar-categories {
  margin-bottom: 30px;
}

.sidebar-cat-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cat-item {
  border-bottom: 1px solid #eee;
}

.cat-item > a {
  display: block;
  padding: 12px 0;
  text-decoration: none;
  font-size: var(--fontsize14);
  font-weight: 500;
  color: var(--fontcolor);
  transition: color .3s;
}

.cat-item > a:hover {
  color: var(--color);
}

.cat-item.has-sub > a::after {
  content: '\f107';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  float: right;
}

.cat-sub {
  list-style: none;
  padding: 0 0 10px 15px;
  margin: 0;
  display: none;
}

.cat-item.has-sub:hover .cat-sub {
  display: block;
}

.cat-sub li {
  padding: 0;
}

.cat-sub a {
  display: block;
  padding: 6px 0;
  text-decoration: none;
  font-size: var(--fontsize13);
  color: var(--summarycolor);
  transition: color .3s;
}

.cat-sub a:hover {
  color: var(--color);
}

/* Sidebar Recommended */
.sidebar-recommended { }

.recommended-list { }

.recommended-item {
  display: flex;
  gap: 12px;
  padding: 15px 0;
  border-bottom: 1px solid #eee;
  align-items: flex-start;
}

.recommended-item:last-child {
  border-bottom: none;
}

.recommended-img {
  flex: 0 0 85px;
  display: block;
}

.recommended-img img {
  width: 85px;
  height: 85px;
  object-fit: cover;
  display: block;
  border: 1px solid #eee;
}

.recommended-info {
  flex: 1;
  min-width: 0;
}

.recommended-name {
  display: block;
  font-size: var(--fontsize13);
  font-weight: 500;
  color: var(--fontcolor);
  text-decoration: none;
  margin-bottom: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recommended-name:hover {
  color: var(--color);
}

.recommended-more {
  display: inline-block;
  font-size: var(--fontsize12);
  color: var(--color);
  text-decoration: none;
  font-weight: 500;
  transition: color .3s;
}

.recommended-more:hover {
  text-decoration: underline;
}

/* ============================================================
   Responsive — Tablet (≤1024px)
   ============================================================ */
@media (max-width: 1024px) {
  .inner-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .prod-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
  }

  .news-list .thumb {
    width: 240px;
  }

  .prod-detail {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .contact-form-wrap .form-row {
    flex-direction: column;
    gap: 0;
  }

  .blog-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
  }

  /* Product Detail responsive */
  .product-detail-sidebar { flex: 1 1 100%; width: 100%; }
  .product-detail-top { flex-direction: column; gap: 25px; }
  .product-detail-gallery { flex: 0 0 100%; }
  .feature-grid { grid-template-columns: 1fr; }
  .application-grid { grid-template-columns: repeat(2, 1fr); }
  .related-grid { grid-template-columns: repeat(2, 1fr); }

  /* 平板端保持侧边栏在右侧 */
  .prodetails-sidear {
    flex: 0 0 280px;
    width: 280px;
    display: flex;
  }

  /* Blog/News: sidebar below */
  .page-main { flex-direction: column; }
  .news-list { width: 100%; }

  /* Contact cards */
  .contact-info-grid { flex-direction: column; gap: 15px; }
  .contact-info-list { flex-direction: column; gap: 15px; }

  /* Downloads */
  .download-item { flex: 0 0 calc(50% - 13px); }
  .download-list > li { flex: 0 0 calc(50% - 13px); }
}

/* ============================================================
   Responsive — Mobile (≤768px)
   ============================================================ */
@media (max-width: 768px) {
  .inner-layout {
    padding: 20px 0 40px;
  }

  /* 产品详情画廊移动端布局 */
  .product-detail-gallery {
    flex-direction: column;
    gap: 15px;
  }

  .gallery-thumbs {
    display: none;
  }

  .gallery-main {
    aspect-ratio: 4 / 3;
  }

  /* 移动端隐藏侧边栏 */
  .prodetails-sidear {
    display: none;
  }

  .prod-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }

  .prod-card .body {
    padding: 12px;
  }

  .prod-card .name {
    font-size: var(--fontsize14);
  }

  .news-list .news-item {
    flex-direction: column;
  }

  .news-list .thumb {
    width: 100%;
    height: 200px;
  }

  .news-list .body {
    padding: 16px;
  }

  .prod-detail .specs li .key {
    width: 100px;
  }

  .blog-grid {
    grid-template-columns: 1fr;
  }

  .download-grid {
    flex-direction: column;
  }

  .download-item {
    flex: 1 1 100%;
  }

  .download-list > li {
    flex: 1 1 100%;
    padding: 20px;
  }

  .contact-info-grid {
    flex-direction: column;
  }

  .contact-info-list {
    flex-direction: column;
  }

  .contact-detail-intro { font-size: var(--fontsize16); }

  .about-category {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .product-search-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Product Detail mobile */
  .product-detail-name { font-size: var(--fontsize22); }
  .product-detail-actions { flex-direction: column; }
  .btn-inquiry, .btn-cart { width: 100%; text-align: center; justify-content: center; }
  .tabs-nav { overflow-x: auto; }
  .tab-btn { padding: 10px 20px; font-size: var(--fontsize14); white-space: nowrap; }
  .application-grid { grid-template-columns: 1fr 1fr; }
  .related-grid { grid-template-columns: repeat(2, 1fr); }

  /* News/Blog list: stack on mobile */
  .news-list .list1 > li,
  .blog-list .list1 > li { flex-direction: column; }
  .news-list .list1 .img,
  .blog-list .list1 .img { flex: 0 0 auto; width: 100%; }
  .news-list .list1 .img img,
  .blog-list .list1 .img img { height: auto; }
  .news-list .list1 .info { flex-direction: column; gap: 12px; padding: 16px 0 0; }
  .news-list .list1 .info .inter {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
  }
  .news-list .list1 .info .inter .date { width: auto; display: flex; gap: 6px; padding: 8px 14px; }
  .news-list .list1 .info .inter .date .day { font-size: var(--fontsize18); }

  /* Detail pages mobile */
  .common-product .singglepic {
    width: 100%;
    height: calc(100vw - 30px);
    margin-top: 15px;
  }
  .common-news .news-box h1 { font-size: var(--fontsize22); }
  .news-detail .meta { gap: 14px; }
  .news-detail-content .news-box { flex-direction: column; gap: 10px; }
  .news-detail-content .news-box div { max-width: 100%; }
  .inquiry-form { grid-template-columns: 1fr; }

  .common-product .p_gallery { grid-template-columns: 1fr; }
  .common-product .p_info { padding: 10px 0; }
  .common-product .p_info h1 { font-size: var(--fontsize18); }
  .common-product table th,
  .common-product table td { padding: 8px 10px; font-size: var(--fontsize12); }
  .specs-table .spec-label { width: 45%; }
}

/* ============================================================
   Inner Page Banner Overlay (pagesbanner)
   ============================================================ */
.pagesbanner {
  position: relative;
}

.innerbanners {
  display: block;
  width: 100%;
  height: auto;
}

.pagesbanner-animate {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  max-width: var(--l-wrap, 1400px);
  padding: 0 20px;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}

.pagesbanner-animate .p1 {
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 3px;
  font-weight: 700;
  font-size: var(--fontsize40);
}

.pagesbanner-animate .p2 {
  margin-top: 10px;
  color: rgba(255, 255, 255, .85);
  font-size: var(--fontsize16);
}

/* Breadcrumb row */
.navlink {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fontsize14);
  text-transform: capitalize;
}

.navlink a.link-home {
  color: var(--fontcolor);
}

.navlink a.link-home em {
  margin-right: 2px;
  color: var(--color);
}

.navlink a.link-home:hover {
  color: var(--color);
}

.navlink span {
  color: var(--summarycolor);
}

/* Send Inquiry button in breadcrumb row */
.wmkcinquirybtn {
  padding: 6px 20px;
  border-radius: 20px;
  background: var(--bgcolor);
  color: var(--white);
  font-weight: 500;
  font-size: var(--fontsize14);
  cursor: pointer;
  transition: opacity .2s;
  white-space: nowrap;
}

.wmkcinquirybtn:hover {
  opacity: .85;
}

/* Inner page main section container */
.common-main {
  padding: 50px 0 60px;
}

.common-main.single-main {
  padding: 0;
}

/* ============================================================
   About Us Page
   ============================================================ */

/* Company Profile */
.common-profile {
  padding: 60px 0;
}

.about-profile .profile-title {
  margin-bottom: 20px;
  color: var(--fontcolor);
  text-align: center;
  font-weight: 600;
  font-size: var(--fontsize28);
}

.about-profile .profile-text {
  margin-bottom: 40px;
  color: var(--summarycolor);
  text-align: center;
  line-height: 1.8;
  font-size: var(--fontsize15);
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.profile-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.profile-left img {
  width: 100%;
  border-radius: var(--border);
}

.profile-right-box {
  padding: 30px;
  border-radius: var(--border);
  background: var(--color);
}

.profile-right-box .purpose {
  margin-bottom: 16px;
  color: #fff;
  font-weight: 600;
  font-size: var(--fontsize20);
}

.profile-right-box .right-textone,
.profile-right-box .right-texttwo,
.profile-right-box .right-texthree {
  margin-bottom: 12px;
  color: #fff;
  line-height: 1.8;
  font-size: var(--fontsize14);
}

/* Advantage Section */
.common-advantage {
  padding: 60px 0;
  background: #efefef;
  color: var(--fontcolor);
}

.about-advantage .advantage-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.advantage-left .pro-ulli1 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.advantage-left .pro-ulli1 li {
  text-align: center;
}

.about-num {
  padding: 30px 20px;
  background: var(--color);
  color: #fff;
  border-radius: var(--border);
  transition: opacity .3s;
}

.about-num:hover {
  opacity: .9;
}

.about-num .ab-num {
  display: block;
  font-weight: 700;
  font-size: var(--fontsize36);
}

.about-num .ab-num sub {
  bottom: 0;
  font-size: var(--fontsize18);
}

.about-num .ab-num-cx {
  display: inline;
}

.about-num p {
  margin-top: 8px;
  color: rgba(255, 255, 255, .85);
  font-size: var(--fontsize14);
}

.ab-advantage-title {
  margin-bottom: 20px;
  font-weight: 600;
  color: #191919;
  font-size: var(--fontsize24);
}

.ab-advantage-text {
  color: var(--summarycolor);
  line-height: 1.8;
  font-size: var(--fontsize14);
}

/* Factory Section */
.common-factory {
  padding: 60px 0;
}

.about-factory {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.ab-factory-left .ab-factory-title {
  margin-bottom: 16px;
  color: var(--fontcolor);
  font-weight: 600;
  font-size: var(--fontsize24);
}

.ab-factory-left .factory-textone {
  margin-bottom: 30px;
  color: var(--summarycolor);
  font-size: var(--fontsize16);
}

.ab-factory-left .pro-ulli1 {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ab-factory-left .pro-ulli1 li {
  display: flex;
  margin-bottom: 20px;
  gap: 14px;
}

.ab-factory-left .pro-ulli1 li .factory-box {
  width: 24px;
  height: 24px;
  min-width: 24px;
  border-radius: 4px;
  background: var(--color);
  flex-shrink: 0;
  transform: translateY(4px);
}

.ab-factory-left .pro-ulli1 li p {
  color: var(--summarycolor);
  line-height: 1.7;
  font-size: var(--fontsize14);
}

.ab-factory-right img {
  width: 100%;
  border-radius: var(--border);
}

/* ============================================================
   FAQ Page — Accordion
   ============================================================ */
.project-list.faqs-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.project-list.faqs-list > li {
  margin-bottom: 12px;
  border: 1px solid #eee;
  border-radius: var(--border);
  background: var(--white);
  overflow: hidden;
  transition: border-color .3s;
}

.project-list.faqs-list > li.active,
.project-list.faqs-list > li:hover {
  border-color: var(--color);
}

.project-info {
  cursor: pointer;
  background: #fafafa;
  transition: background .3s;
}

.project-list.faqs-list > li.active .project-info {
  background: #f0f0f0;
}

.project-name {
  position: relative;
  padding: 18px 50px 18px 20px;
  font-weight: 600;
  font-size: var(--fontsize16);
  color: var(--fontcolor);
  user-select: none;
}

.project-name::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color);
  color: var(--white);
  text-align: center;
  line-height: 22px;
  font-size: var(--fontsize18);
  font-weight: 400;
  transform: translateY(-50%);
  transition: transform .3s;
}

.project-list.faqs-list > li.active .project-name::after {
  content: "-";
}

.project-content {
  display: none;
  padding: 0 20px 20px;
  color: var(--summarycolor);
  line-height: 1.8;
  font-size: var(--fontsize14);
}

.project-list.faqs-list > li.active .project-content {
  display: block;
}

.project-list.faqs-list > li .sidebar-cate-show {
  display: none;
}

/* ============================================================
   Downloads Page — Download List (alternate)
   ============================================================ */
.download-img {
  width: auto;
  height: auto;
  border-radius: 0;
  overflow: visible;
  flex-shrink: 0;
  margin-bottom: 15px;
  text-align: center;
}

.download-img img {
  max-width: 120px;
  height: auto;
  object-fit: contain;
}

.download-info {
  flex: none;
  min-width: 0;
  text-align: center;
}

.download-con {
  margin-bottom: 0;
}

.download-name {
  font-weight: 600;
  font-size: var(--fontsize16);
  color: var(--fontcolor);
  margin-bottom: 15px;
}

.download-btn {
  display: inline-flex;
  padding: 10px 24px;
  border-radius: var(--border);
  background: var(--bgcolor);
  color: var(--white);
  font-weight: 500;
  font-size: var(--fontsize14);
  gap: 8px;
  align-items: center;
  white-space: nowrap;
  text-decoration: none;
  transition: opacity .3s;
  flex-shrink: 0;
}

.download-btn:hover {
  opacity: .85;
  color: var(--white);
}

.download-btn .fa {
  font-size: var(--fontsize14);
}

/* ============================================================
   Inner Page Responsive — Tablet (≤1024px)
   ============================================================ */
@media (max-width: 1024px) {
  .pagesbanner-animate .p1 {
    font-size: var(--fontsize28);
  }

  .profile-content,
  .about-advantage .advantage-content,
  .about-factory {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .profile-right-box {
    padding: 20px;
  }

  .advantage-left .pro-ulli1 {
    gap: 20px;
  }

  .download-list {
    flex-direction: column;
  }

  .download-list > li {
    flex: 1 1 100%;
  }

  .about-category {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .pro-list.list1 {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .prod-partner-list {
    grid-template-columns: repeat(3, 1fr);
  }

  .news-list .list1 .img {
    flex: 0 0 200px;
    width: 200px;
  }

  .common-product .p_gallery {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ============================================================
   Inner Page Responsive — Mobile (≤768px)
   ============================================================ */
@media (max-width: 768px) {
  .pagesbanner {
    height: 250px;
  }

  .pagesbanner .innerbanners {
    height: 250px;
    object-fit: cover;
  }

  .pagesbanner-animate .p1 {
    font-size: var(--fontsize22);
    letter-spacing: 1px;
  }

  .pagesbanner-animate .p2 {
    font-size: var(--fontsize13);
  }

  .common-main {
    padding: 30px 0 40px;
  }

  .common-profile {
    padding: 30px 0;
  }

  .about-profile .profile-title {
    font-size: var(--fontsize22);
  }

  .advantage-left .pro-ulli1 {
    grid-template-columns: 1fr 1fr;
    gap: 15px;
  }

  .about-num {
    padding: 20px 14px;
  }

  .about-num .ab-num {
    font-size: var(--fontsize24);
  }

  .common-advantage {
    padding: 40px 0;
  }

  .common-factory {
    padding: 40px 0;
  }

  .project-name {
    padding: 14px 45px 14px 16px;
    font-size: var(--fontsize14);
  }

  .project-name::after {
    right: 14px;
    width: 22px;
    height: 22px;
    line-height: 20px;
    font-size: var(--fontsize16);
  }

  .download-list {
    flex-direction: column;
  }

  .download-list > li {
    padding: 20px;
    flex: 1 1 100%;
  }

  .download-img {
    width: auto;
    height: auto;
    margin-bottom: 15px;
  }

  .download-btn {
    margin-top: 8px;
    justify-content: center;
  }

  .about-category {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .pro-list.list1 {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .pro-list.list1 .info {
    padding: 12px;
  }

  .pro-list.list1 .info .title {
    font-size: var(--fontsize13);
  }

  .prod-partner-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .pro-cate-title {
    font-size: var(--fontsize20);
  }

  .news-list .list1,
  .blog-list .list1 {
    gap: 16px;
  }

  .news-list .list1 > li,
  .blog-list .list1 > li {
    flex-direction: column;
  }

  .news-list .list1 .img,
  .blog-list .list1 .img {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
  }

  .news-list .list1 .img img,
  .blog-list .list1 .img img {
    height: 200px;
  }

  .news-list .list1 .info {
    flex-direction: column;
    gap: 12px;
    padding: 16px 0 0;
  }

  .news-list .list1 .info .inter {
    flex-direction: row;
    justify-content: flex-start;
    gap: 16px;
  }

  .common-news .news-box {
    padding: 0;
  }

  .common-news .news-box h1 {
    font-size: var(--fontsize22);
  }

  .common-product .p_gallery {
    grid-template-columns: 1fr;
  }

  .common-product .p_info {
    padding: 10px 0;
  }

  .common-product .p_info h1 {
    font-size: var(--fontsize18);
  }

  .common-product table th,
  .common-product table td {
    padding: 8px 10px;
    font-size: var(--fontsize12);
  }
}

/* ============================================================
   Contact Us Page — Additional
   ============================================================ */
.contact-list {
  padding: 40px 0;
}

.contact-divider {
  width: 60px;
  height: 4px;
  background: var(--color);
  margin: 0 auto 20px;
}

.contact-section-title {
  text-align: center;
  font-size: var(--fontsize24);
  color: var(--fontcolor);
  margin: 0 0 32px;
  font-weight: 600;
}

.contact-info-list {
  display: flex;
  gap: 20px;
  margin-bottom: 40px;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

.contact-info-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 30px 20px;
  background: #fafafa;
  border: 1px solid #eee;
  transition: all .3s;
}

.contact-info-item:hover {
  box-shadow: 0 4px 15px rgba(0,0,0,.08);
}

.contact-info-icon {
  margin-bottom: 12px;
}

.contact-info-icon img {
  width: 36px;
  height: 36px;
}

.contact-info-text {
  font-size: var(--fontsize16);
  color: var(--fontcolor);
  font-weight: 600;
}

.contact-form {
  max-width: 1700px;
  margin: 0 auto;
  padding: 0 20px;
}

.contact-form .inquiry-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.contact-form .inquiry-form input,
.contact-form .inquiry-form textarea {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #ddd;
  font-size: var(--fontsize14);
  font-family: inherit;
  box-sizing: border-box;
  outline: none;
  transition: border-color .3s;
  border-radius: 0;
}

.contact-form .inquiry-form input:focus,
.contact-form .inquiry-form textarea:focus {
  border-color: var(--color);
}

.contact-form .inquiry-form textarea {
  resize: vertical;
  min-height: 120px;
}

.contact-form .send-btn {
  display: inline-block;
  padding: 12px 40px;
  background: var(--bgcolor);
  color: #fff;
  border: none;
  font-size: var(--fontsize15);
  font-weight: 500;
  cursor: pointer;
  transition: opacity .3s;
}

.contact-form .send-btn:hover {
  opacity: .85;
}

/* ============================================================
   Search Results Page
   ============================================================ */
.pro-cate-title {
  font-size: var(--fontsize28);
  color: var(--heading);
  margin: 0 0 24px;
  font-weight: var(--fontbold6, 600);
}

/* News detail: page-main flex layout */
.common-news .page-main {
  display: flex;
  justify-content: space-between;
  margin-top: 50px;
  margin-bottom: 50px;
}

.page-main {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 32px;
  padding: 32px 0;
}

/* Products page: sidebar uses percentage width (matches reference) */
.common-product .page-main {
  display: flex;
  margin-top: 20px;
  justify-content: space-between;
}

.common-product .prodetails-sidear {
  width: 22.5%;
  flex-shrink: 0;
}

.common-product .prodetails-left {
  display: flex;
  flex-wrap: wrap;
  width: 73%;
  min-width: 0;
}

.common-product .products-list {
  width: 73%;
  min-width: 0;
}

/* Sidebar */
.pr-sidebar-search {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
}

.pr-serach-input {
  flex: 1;
}

.pr-serach-input input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border, #ddd);
  border-radius: 6px;
  font-size: var(--fontsize14);
}

.pr-search-btn {
  padding: 8px 14px;
  background: var(--color, #fd644f);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

/* ============================================================
   Sidebar Categories — from reference
   ============================================================ */
.pr-sidebar-category ul {
  padding: 0;
  list-style: none;
  font-size: var(--fontsize14);
}

.pr-sidebar-cate .menu-item .sub-menu {
  display: none;
}

.pr-sidebar-cate li {
  position: relative;
}

.pr-sidebar-category .pr-sidebar-cate li a {
  display: flex;
  margin-bottom: 10px;
  font-weight: var(--fontbold5, 500);
  justify-content: space-between;
  padding: 5px;
  width: 100%;
  color: var(--text);
  text-decoration: none;
  transition: color 0.2s;
  box-sizing: border-box;
}

.pr-sidebar-category .pr-sidebar-cate li a:hover {
  color: var(--color);
}

.pr-sidebar-category ul .active > a {
  color: var(--color);
}

.pr-sidebar-category .sub-menu li {
  padding: 2px 10px;
}

.pr-sidebar-category ul .sidebar-cate-show {
  position: absolute;
  top: 5px;
  right: 9px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  text-align: center;
  cursor: pointer;
}

.pr-sidebar-category ul .sidebar-cate-show p {
  font-size: var(--fontsize20);
  line-height: 24px;
}

.pr-sidebar-category ul .sidebar-cate-show p::before {
  content: '+';
}

.pr-sidebar-category ul .active .sidebar-cate-show {
  background-color: var(--color);
  color: #fff;
}

.pr-sidebar-category ul .active .sidebar-cate-show p::before {
  content: '-';
}

.pr-sidebar-recommended {
  margin-top: 20px;
  padding: 20px;
  background-color: #f2f3f5;
  border-radius: 3px;
}

.re-box {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border, #f0f0f0);
}

.re-img img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 6px;
}

.re-title {
  font-size: var(--fontsize14);
  color: var(--heading);
  font-weight: var(--fontbold5, 500);
  margin: 0 0 6px;
}

.re-more {
  font-size: var(--fontsize12);
  color: var(--color, #fd644f);
  background: none;
  border: 1px solid var(--color, #fd644f);
  border-radius: 4px;
  padding: 4px 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.re-more:hover {
  background: var(--color, #fd644f);
  color: #fff;
}

/* ============================================================
   Responsive — Contact Us & Search
   ============================================================ */
@media (max-width: 1024px) {
  .page-main {
    grid-template-columns: 1fr;
  }

  .common-product .prodetails-sidear {
    display: none;
  }

  .common-product .prodetails-left {
    width: 100%;
  }

  .common-product .products-list {
    width: 100%;
  }

  .prodetails-like .pr-like-img a p {
    padding: 5px;
    font-size: var(--fontsize16);
  }

  .pr-sidebar-search,
  .pr-sidebar-category,
  .pr-sidebar-recommended {
    display: none;
  }
}

@media (max-width: 768px) {
  .prodetails-like .pr-like-img a {
    margin-bottom: 10px;
    width: 32.5%;
  }

  .prodetails-faq .faq-box div {
    font-size: var(--fontsize16);
  }

  .contact-info-list {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .contact-form {
    padding: 20px;
  }

  .pro-cate-title {
    font-size: var(--fontsize22);
  }
}

@media (max-width: 500px) {
  .prodetails-faq .faq-box {
    margin-top: 20px;
  }

  .prodetails-faq .faq-box div {
    font-size: var(--fontsize14);
  }

  .prodetails-like .pr-like-img a p {
    padding: 2px;
    font-size: var(--fontsize12);
  }
}

/* ============================================================
   Modular Templates — Products Page (t147-t150)
   ============================================================ */

/* ============================================================
   模块化模板样式 — 完全重写版
   基于视觉效果重新实现
   ============================================================ */

/* ---------- t147 — 关于我们 / 公司介绍 ---------- */
.mod-t147 .mod-t147-top {
  background: #f8f8f8;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.mod-t147 .mod-t147-img {
  border-radius: 5px;
  overflow: hidden;
  text-align: left;
  width: 45%;
}
.mod-t147 .mod-t147-img img {
  border: 1px solid #eee;
  border-radius: 5px;
  display: block;
  height: auto;
  max-width: 100%;
  transition: transform .2s linear;
}
.mod-t147 .mod-t147-img:hover img {
  transform: scale(1.01);
}
.mod-t147 .mod-t147-info {
  box-sizing: border-box;
  padding: 10px 40px;
  width: 55%;
}
.mod-t147 .mod-t147-title {
  color: var(--fontcolor);
  font-size: var(--fontsize20);
  font-weight: 600;
  margin: 0;
  text-transform: capitalize;
}
.mod-t147 .mod-t147-des {
  margin-top: 20px;
}
.mod-t147 .mod-t147-des p {
  color: var(--summarycolor);
  font-size: var(--fontsize16);
  line-height: 1.6;
  margin: 0 0 12px;
}
.mod-t147 .mod-t147-mod {
  background: #fff;
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
  position: relative;
  width: 98%;
}
.mod-t147 .mod-t147-mod .mod-t147-mod-item {
  box-sizing: border-box;
  color: var(--fontcolor);
  font-size: var(--fontsize18);
  padding: 20px 10px;
  text-align: center;
  text-transform: capitalize;
  transition: background .1s linear;
  width: 25%;
}
.mod-t147 .mod-t147-mod .mod-t147-mod-item p {
  margin: 0;
}
.mod-t147 .mod-t147-mod .mod-t147-mod-item:hover {
  background-color: #eee;
}
.mod-t147 .mod-t147-list {
  display: flex;
  flex-wrap: wrap;
}
.mod-t147 .mod-t147-item {
  box-sizing: border-box;
  margin-top: 10px;
  padding: 20px;
  text-align: center;
  transition: transform .1s linear;
  width: 25%;
}
.mod-t147 .mod-t147-item-tit {
  color: var(--fontcolor);
  font-size: var(--fontsize18);
  font-weight: 600;
  margin: 0;
  text-align: center;
  text-transform: capitalize;
}
.mod-t147 .mod-t147-item-icon {
  color: var(--color);
  margin: 16px auto;
  transition: transform .1s linear;
}
.mod-t147 .mod-t147-item-icon em {
  font-size: 36px;
}
.mod-t147 .mod-t147-item-des {
  text-align: center;
}
.mod-t147 .mod-t147-item-des p {
  color: var(--summarycolor);
  font-size: var(--fontsize16);
  line-height: 1.6;
  margin: 0;
}
.mod-t147 .mod-t147-item:hover {
  transform: translateY(-5px);
}
.mod-t147 .mod-t147-item:hover .mod-t147-item-icon {
  transform: rotateY(180deg);
}

/* ---------- t148 — 制造工艺 ---------- */
.mod-t148 {}
.mod-t148 h5 {
  color: var(--fontcolor);
  font-size: var(--fontsize24);
  font-weight: 600;
  margin: 0 0 4px;
  text-align: center;
  text-transform: capitalize;
}
.mod-t148 .mod-t148-des {
  margin-bottom: 30px;
  text-align: center;
}
.mod-t148 .mod-t148-des p {
  color: var(--summarycolor);
  font-size: var(--fontsize16);
  margin: 0;
}
.mod-t148 .mod-t148-list {}
.mod-t148 .mod-t148-item {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  margin-bottom: 30px;
}
.mod-t148 .mod-t148-item:last-child {
  margin-bottom: 0;
}
.mod-t148 .mod-t148-item-img {
  border-radius: 5px;
  flex: 0 0 48%;
  overflow: hidden;
}
.mod-t148 .mod-t148-item-img img {
  border: 1px solid #eee;
  border-radius: 5px;
  display: block;
  height: auto;
  transition: transform .3s;
  width: 100%;
}
.mod-t148 .mod-t148-item-img:hover img {
  transform: scale(1.03);
}
.mod-t148 .mod-t148-item-info {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 30px;
}
.mod-t148 .mod-t148-item-mod {
  align-items: flex-start;
  display: flex;
  gap: 20px;
}
.mod-t148 .mod-t148-item-icon {
  align-items: center;
  background: rgba(197,133,58,.08);
  border-radius: 8px;
  color: var(--color);
  display: flex;
  flex: 0 0 48px;
  font-size: 28px;
  height: 48px;
  justify-content: center;
  width: 48px;
}
.mod-t148 .mod-t148-item-icon em {
  font-size: 28px;
}
.mod-t148 .mod-t148-item-text {
  flex: 1;
}
.mod-t148 .mod-t148-item-tit {
  color: var(--fontcolor);
  font-size: var(--fontsize18);
  font-weight: 600;
  margin: 0 0 8px;
  text-transform: capitalize;
}
.mod-t148 .mod-t148-item-des {}
.mod-t148 .mod-t148-item-des p {
  color: var(--summarycolor);
  font-size: var(--fontsize15);
  line-height: 1.6;
  margin: 0;
}

/* ---------- t149 — 合作伙伴 ---------- */
.mod-t149 h5 {
  color: var(--fontcolor);
  font-size: var(--fontsize24);
  font-weight: 600;
  margin: 0 0 4px;
  text-align: center;
  text-transform: capitalize;
}
.mod-t149 .mod-t149-des p {
  color: var(--summarycolor);
  font-size: var(--fontsize16);
  margin: 0;
  text-align: center;
}
.mod-t149 .mod-t149-list {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center;
  margin-top: 10px;
}
.mod-t149 .mod-t149-item {
  align-items: center;
  background: #fff;
  border: 1px solid #ebebeb;
  border-radius: 5px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  margin-top: 20px;
  padding: 12px 10px;
  transition: all .1s linear;
  width: calc(12.5% - 15px);
}
.mod-t149 .mod-t149-item:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  transform: translateY(-5px);
}
.mod-t149 .mod-t149-icon {
  align-items: center;
  color: var(--color);
  display: flex;
  margin-right: 5px;
}
.mod-t149 .mod-t149-icon em {
  font-size: 24px;
}
.mod-t149 .mod-t149-item .mod-t149-des p {
  color: var(--fontcolor);
  font-size: var(--fontsize14);
  margin: 0;
}

/* ---------- t150 — 产品优势 ---------- */
.mod-t150 {}
.mod-t150 h5 {
  color: var(--fontcolor);
  font-size: var(--fontsize24);
  font-weight: 600;
  margin: 0 0 4px;
  text-align: center;
  text-transform: capitalize;
}
.mod-t150 .mod-t150-des {
  margin-bottom: 30px;
  text-align: center;
}
.mod-t150 .mod-t150-des p {
  color: var(--summarycolor);
  font-size: var(--fontsize16);
  margin: 0;
}
.mod-t150 .mod-t150-list {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(4, 1fr);
}
.mod-t150 .mod-t150-item {
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 30px 20px;
  position: relative;
  text-align: center;
  transition: all .3s;
}
.mod-t150 .mod-t150-item:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  transform: translateY(-4px);
}
.mod-t150 .mod-t150-item-dashed {
  display: none;
}
.mod-t150 .mod-t150-item-icon {
  align-items: center;
  background: rgba(197,133,58,.1);
  border-radius: 50%;
  color: var(--color);
  display: flex;
  font-size: 32px;
  height: 64px;
  justify-content: center;
  margin: 0 auto 16px;
  position: relative;
  width: 64px;
}
.mod-t150 .mod-t150-item-icon em {
  font-size: 32px;
}
.mod-t150 .mod-t150-item-num {
  align-items: center;
  background: var(--color);
  border-radius: 50%;
  color: #fff;
  display: flex;
  font-size: var(--fontsize12);
  font-weight: 700;
  height: 24px;
  justify-content: center;
  position: absolute;
  right: -6px;
  top: -6px;
  width: 24px;
}
.mod-t150 .mod-t150-item-tit {
  color: var(--fontcolor);
  font-size: var(--fontsize16);
  font-weight: 600;
  margin: 0 0 10px;
  text-transform: capitalize;
}
.mod-t150 .mod-t150-item-des {}
.mod-t150 .mod-t150-item-des p {
  color: var(--summarycolor);
  font-size: var(--fontsize14);
  line-height: 1.6;
  margin: 0;
}

/* ========== t147-t150 响应式 ========== */
@media (max-width: 1024px) {
  .mod-t147 .mod-t147-top { flex-direction: column; }
  .mod-t147 .mod-t147-img { width: 100%; }
  .mod-t147 .mod-t147-info { padding: 20px 10px; width: 100%; }
  .mod-t147 .mod-t147-mod { margin-left: 0; width: 100%; }
  .mod-t147 .mod-t147-item { width: 48%; }
  .mod-t148 .mod-t148-item { flex-direction: column; gap: 20px; }
  .mod-t148 .mod-t148-item-img { flex: 0 0 100%; }
  .mod-t149 .mod-t149-item { width: calc(25% - 15px); }
  .mod-t150 .mod-t150-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .mod-t147 .mod-t147-item { width: 50%; }
  .mod-t147 .mod-t147-mod .mod-t147-mod-item { width: 50%; }
  .mod-t148 .mod-t148-item { flex-direction: column; gap: 20px; }
  .mod-t149 .mod-t149-item { width: calc(33.33% - 15px); }
  .mod-t150 .mod-t150-list { gap: 16px; grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
  .mod-t147 .mod-t147-item { margin-top: 0; width: 100%; }
  .mod-t147 .mod-t147-mod .mod-t147-mod-item { width: 50%; }
  .mod-t149 .mod-t149-item { width: calc(50% - 15px); }
  .mod-t150 .mod-t150-list { grid-template-columns: 1fr; }
}

/* ============================================================
   扩展模块 — products 详情页
   ============================================================ */

/* ---------- t207 — 荣誉资质 ---------- */
.mod-t207 {}
.mod-t207 .mod-t207-contant {}
.mod-t207 .mod-t207-title {
  margin-bottom: 30px;
  text-align: center;
}
.mod-t207 .mod-t207-title h5 {
  color: var(--fontcolor);
  font-size: var(--fontsize24);
  font-weight: 600;
  margin: 0 0 4px;
  text-transform: capitalize;
}
.mod-t207 .mod-t207-sub {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 10px;
}
.mod-t207 .mod-t207-sub .mod-t207-div {
  background: var(--color);
  border-radius: 2px;
  height: 3px;
  width: 40px;
}
.mod-t207 .mod-t207-pro p {
  color: var(--summarycolor);
  font-size: var(--fontsize16);
  margin: 0;
}
.mod-t207 .mod-t207-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin-top: 20px;
}
.mod-t207 .mod-t207-item {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 5px;
  min-width: 140px;
  overflow: hidden;
  transition: all .3s;
  width: calc(20% - 20px);
}
.mod-t207 .mod-t207-item:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  transform: translateY(-5px);
}
.mod-t207 .mod-t207-img img {
  display: block;
  height: auto;
  width: 100%;
}
.mod-t207 .mod-t207-text {
  padding: 10px;
}
.mod-t207 .mod-t207-text p {
  color: var(--fontcolor);
  font-size: var(--fontsize14);
  font-weight: 600;
  margin: 0;
}

/* ---------- t208 — 合作伙伴（产品列表页） ---------- */
.mod-t208 {}
.mod-t208 .mod-t208-contant {
  margin-bottom: 20px;
  text-align: center;
}
.mod-t208 .mod-t208-title h5 {
  color: var(--fontcolor);
  font-size: var(--fontsize24);
  font-weight: 600;
  margin: 0 0 4px;
  text-transform: capitalize;
}
.mod-t208 .mod-t208-sub {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 10px;
}
.mod-t208 .mod-t208-sub .mod-t208-div {
  background: var(--color);
  border-radius: 2px;
  height: 3px;
  width: 40px;
}
.mod-t208 .mod-t208-pro p {
  color: var(--summarycolor);
  font-size: var(--fontsize16);
  margin: 0;
}
.mod-t208 .mod-t208-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.mod-t208 .mod-t208-item {
  min-width: 100px;
  transition: all .3s;
  width: calc(20% - 10px);
}
.mod-t208 .mod-t208-item img {
  border: 1px solid #eee;
  border-radius: 5px;
  display: block;
  height: auto;
  width: 100%;
}
.mod-t208 .mod-t208-item:hover {
  transform: translateY(-4px);
}

/* ---------- t213 — 成功案例 ---------- */
.mod-t213 {}
.mod-t213 .mod-t213-title {
  display: flex;
  justify-content: space-between;
}
.mod-t213 .mod-t213-title h5 {
  color: var(--fontcolor);
  flex: 1;
  font-size: 26px;
  font-weight: 600;
  margin: 0;
  text-align: left;
}
.mod-t213 .mod-t213-text {
  color: var(--summarycolor);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  margin: 0 auto 10px;
  max-width: 735px;
  text-align: left;
  width: 100%;
}
.mod-t213 .mod-t213-text p {
  margin: 0;
}
.mod-t213 .mod-t213-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  list-style: none;
  margin-top: 20px;
  padding: 0;
}
.mod-t213 .mod-t213-item {
  border-radius: 5px;
  overflow: hidden;
  position: relative;
  width: 24%;
  z-index: 1;
}
.mod-t213 .mod-t213-item img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}
.mod-t213 .mod-t213-box {
  align-items: flex-start;
  aspect-ratio: 1/1;
  background: var(--color);
  border-radius: 50%;
  bottom: -50px;
  color: #fff;
  display: flex;
  flex-direction: column;
  height: auto;
  justify-content: center;
  left: -70px;
  opacity: .9;
  padding-left: 80px;
  position: absolute;
  transform: scale(0);
  transition: transform .2s linear;
  width: 250px;
  z-index: 1;
}
.mod-t213 .mod-t213-item:hover .mod-t213-box {
  transform: scale(1);
}
.mod-t213 .mod-t213-box em {
  align-items: center;
  background: #fff;
  border-radius: 50%;
  color: #000;
  display: flex;
  font-size: 22px;
  height: 50px;
  justify-content: center;
  position: absolute;
  right: 35px;
  top: 10px;
  width: 50px;
}
.mod-t213 .mod-t213-p1 {
  font-size: 14px;
  margin-bottom: 5px;
}
.mod-t213 .mod-t213-p2 {
  font-size: 18px;
}

@media (max-width: 1280px) {
  .mod-t213 .mod-t213-box {
    margin-top: -20px;
    padding-left: 80px;
    width: 220px;
  }
}
@media (max-width: 1024px) {
  .mod-t213 .mod-t213-title { flex-direction: column; }
  .mod-t213 .mod-t213-text { margin-top: 15px; }
  .mod-t213 .mod-t213-item { margin-bottom: 20px; width: 49%; }
  .mod-t213 .mod-t213-title h5 { font-size: 22px; }
}
@media (max-width: 500px) {
  .mod-t213 .mod-t213-box { display: none; }
}

/* ---------- t214 — 品牌品质 ---------- */
.mod-t214 {}
.mod-t214 h5 {
  color: var(--fontcolor);
  font-size: 26px;
  font-weight: 600;
  margin: 0 0 10px;
  text-align: center;
  text-transform: capitalize;
}
.mod-t214 .mod-t214-des {
  color: var(--summarycolor);
  text-align: center;
}
.mod-t214 .mod-t214-list {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  list-style: none;
  margin-top: 40px;
}
.mod-t214 .mod-t214-item {
  text-align: center;
  width: 22%;
}
.mod-t214 .mod-t214-item img {
  border-radius: 50%;
  height: auto;
  object-fit: cover;
  transition: transform .1s linear;
  width: 220px;
}
.mod-t214 .mod-t214-item:hover img {
  transform: scale(1.02);
}
.mod-t214 .mod-t214-p1 {
  color: var(--color);
  margin-top: 10px;
}
.mod-t214 .mod-t214-p2 {
  font-size: 20px;
  margin-top: 10px;
}
.mod-t214 .mod-t214-p3 {
  color: var(--summarycolor);
  font-size: 14px;
  margin-top: 10px;
}
.mod-t214 .mod-t214-item em {
  align-items: center;
  background: rgba(228,168,83,0);
  border: 1px solid #dcdcdc;
  border-radius: 50%;
  color: #6b6460;
  display: inline-flex;
  font-size: 18px;
  height: 46px;
  justify-content: center;
  margin-top: 20px;
  transition: all .1s linear;
  width: 46px;
}

@media (max-width: 1024px) {
  .mod-t214 .mod-t214-item { margin-bottom: 20px; width: 48%; }
  .mod-t214 .mod-t214-item img { width: 100%; }
}
@media (max-width: 768px) {
  .mod-t214 h5 { font-size: 22px; }
}

/* ---------- t215 — 浴室专家 ---------- */
.mod-t215 {
  padding: 30px 20px;
  position: relative;
  z-index: 1;
}
.mod-t215::after {
  background: var(--color);
  content: '';
  height: 100%;
  left: 0;
  opacity: .08;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}
.mod-t215 h5 {
  color: var(--fontcolor);
  font-size: 26px;
  font-weight: 600;
  margin: 0 0 10px;
  text-align: left;
  text-transform: capitalize;
}
.mod-t215 .mod-t215-des {
  color: var(--summarycolor);
}
.mod-t215 .mod-t215-flex {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.mod-t215 .mod-t215-left {
  padding-right: 5%;
  width: 45%;
}
.mod-t215 .mod-t215-numlist {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin-top: 50px;
  padding: 0;
}
.mod-t215 .mod-t215-li {
  align-items: center;
  aspect-ratio: 1/1;
  background: #fff;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 46%;
  position: relative;
  text-align: center;
  width: 240px;
}
.mod-t215 .mod-t215-li:nth-child(1) {
  margin-right: 5%;
}
.mod-t215 .mod-t215-li::before {
  background: var(--color);
  border-radius: 50%;
  content: '';
  height: 100%;
  left: 50%;
  opacity: .1;
  position: absolute;
  top: -10px;
  transform: translateX(-50%);
  width: 100%;
  z-index: -1;
}
.mod-t215 .mod-t215-p1 {
  color: var(--color);
  font-size: 50px;
}
.mod-t215 .mod-t215-p1 em {
  font-size: 26px;
  font-style: inherit;
}
.mod-t215 .mod-t215-p2 {
  font-size: 20px;
}
.mod-t215 .mod-t215-p3 {
  font-size: 14px;
}
.mod-t215 .mod-t215-more {
  margin-top: 40px;
}
.mod-t215 .mod-t215-more a {
  align-items: center;
  background: rgba(255,255,255,0);
  border: 1px solid #3f0b00;
  border-radius: 27px;
  color: #333;
  display: inline-flex;
  font-size: 14px;
  font-weight: 600;
  height: 50px;
  justify-content: center;
  min-width: 190px;
  padding: 0 20px;
  text-decoration: none;
  transition: all .1s linear;
}
.mod-t215 .mod-t215-more a:hover {
  background: #1a1414;
  color: #fff;
}
.mod-t215 .mod-t215-right {
  display: flex;
  flex: 1;
  justify-content: space-between;
}
.mod-t215 .mod-t215-right1 {
  width: 60%;
}
.mod-t215 .mod-t215-right1 img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}
.mod-t215 .mod-t215-right2 {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  padding-left: 20px;
}
.mod-t215 .mod-t215-right2 img {
  height: 48%;
  object-fit: cover;
  width: 100%;
}

@media (max-width: 1280px) {
  .mod-t215 .mod-t215-numlist { justify-content: space-between; }
  .mod-t215 .mod-t215-li { margin-right: 0 !important; width: 48%; }
}
@media (max-width: 1024px) {
  .mod-t215 .mod-t215-left { padding-bottom: 20px; padding-right: 0; width: 100%; }
  .mod-t215 .mod-t215-right2 { padding-left: 10px; }
  .mod-t215 .mod-t215-p1 { font-size: 30px; }
  .mod-t215 .mod-t215-p2 { font-size: 16px; }
  .mod-t215 h5 { font-size: 22px; }
}

/* ---------- t216 — 常见问题 ---------- */
.mod-t216 {}
.mod-t216 h5 {
  color: var(--fontcolor);
  font-size: 26px;
  font-weight: 600;
  margin: 0 0 10px;
  text-align: center;
  text-transform: capitalize;
}
.mod-t216 .mod-t216-icon {
  color: var(--color);
  margin: 0 0 15px;
  text-align: center;
}
.mod-t216 .mod-t216-list {
  list-style: none;
  margin-top: 30px;
  padding: 0;
}
.mod-t216 .mod-t216-li {
  align-items: center;
  border-top: 1px solid #d9d9d9;
  color: #6b6460;
  display: flex;
  flex-wrap: wrap;
  padding: 3% 0;
}
.mod-t216 .mod-t216-li:last-child {
  border-bottom: 1px solid #d9d9d9;
}
.mod-t216 .mod-t216-left {
  color: #333;
  font-size: 18px;
  transition: all .1s linear;
  width: 30%;
}
.mod-t216 .mod-t216-left p {
  font-size: 18px;
  margin: 0;
}
.mod-t216 .mod-t216-left img {
  max-width: 100%;
  transition: all .1s linear;
}
.mod-t216 .mod-t216-right {
  flex: 1;
  line-height: 1.6;
  padding: 0 30px;
  transition: all .1s linear;
}
.mod-t216 .mod-t216-right p {
  margin: 0;
}
.mod-t216 .mod-t216-more {
  align-items: center;
  display: flex;
  justify-content: center;
  transform: rotate(-45deg);
  width: 70px;
}
.mod-t216 .mod-t216-more a {
  color: #333;
  text-decoration: none;
}
.mod-t216 .mod-t216-more em {
  font-size: 28px;
  transition: all .1s linear;
}
.mod-t216 .mod-t216-li:nth-child(2):hover .mod-t216-left img {
  transform: scale(1.02);
}
.mod-t216 .mod-t216-li:nth-child(2):hover .mod-t216-right {
  color: var(--color);
}
.mod-t216 .mod-t216-li:nth-child(2) .mod-t216-right {
  font-size: 16px;
}
.mod-t216 .mod-t216-li:hover .mod-t216-left {
  color: var(--color);
}
.mod-t216 .mod-t216-li:hover .mod-t216-more em {
  color: var(--color);
}
.mod-t216 .mod-t216-learn-more {
  display: flex;
  justify-content: center;
  margin-top: 3%;
}
.mod-t216 .mod-t216-learn-more a {
  align-items: center;
  background: #332f2c;
  border-radius: 30px;
  color: #fff;
  display: inline-flex;
  font-size: 14px;
  height: 50px;
  justify-content: center;
  min-width: 160px;
  padding: 0 20px;
  text-decoration: none;
  transition: all .1s linear;
}
.mod-t216 .mod-t216-learn-more a em {
  margin-left: 10px;
}
.mod-t216 .mod-t216-learn-more a:hover {
  background: var(--color);
}

@media (max-width: 500px) {
  .mod-t216 h5 { font-size: 22px; }
  .mod-t216 .mod-t216-more { display: none; }
  .mod-t216 .mod-t216-left { color: #000; font-weight: 600; width: 100%; }
  .mod-t216 .mod-t216-right { padding: 10px 0; }
}

/* ---------- t217 — 质量标准 ---------- */
.mod-t217 {
  background: var(--color) url(images/modular-2.webp) no-repeat right;
  box-sizing: border-box;
  padding: 30px 0;
  position: relative;
  z-index: 1;
}
.mod-t217 .mod-t217-flex {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  padding: 0 70px;
}
.mod-t217 .mod-t217-img {
  position: relative;
  width: 30%;
}
.mod-t217 .mod-t217-img img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}
.mod-t217 .mod-t217-img::after {
  background: rgba(0,0,0,.2);
  content: '';
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.mod-t217 .mod-t217-img .mod-t217-icon {
  color: #fff;
  font-size: 24px;
  left: 50%;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  top: 50%;
  transform: translate(-50%,-50%);
  z-index: 1;
}
.mod-t217 .mod-t217-content {
  flex: 1;
  padding-left: 30px;
}
.mod-t217 .mod-t217-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  list-style: none;
  padding: 0;
}
.mod-t217 .mod-t217-li {
  background: #fff;
  border-radius: 5px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  padding: 40px;
  transition: all .1s linear;
  width: 49%;
}
.mod-t217 .mod-t217-li:nth-child(1),
.mod-t217 .mod-t217-li:nth-child(2) {
  margin-bottom: 20px;
}
.mod-t217 .mod-t217-li:hover {
  box-shadow: 1px 2px 10px rgba(0,0,0,.1);
  transform: translateY(-5px);
}
.mod-t217 .mod-t217-li .mod-t217-icon {
  align-items: center;
  background: rgba(230,175,93,0);
  border: 2px solid var(--color);
  border-radius: 10px;
  color: var(--color);
  display: flex;
  flex-shrink: 0;
  font-size: 28px;
  height: 50px;
  justify-content: center;
  width: 50px;
}
.mod-t217 .mod-t217-li .mod-t217-icon em {
  font-size: 28px;
}
.mod-t217 .mod-t217-info {
  flex: 1;
  padding-left: 20px;
}
.mod-t217 .mod-t217-title {
  font-size: 20px;
  margin-bottom: 10px;
}
.mod-t217 .mod-t217-text,
.mod-t217 .mod-t217-text p {
  color: var(--summarycolor);
  margin: 0;
}

@media (max-width: 1024px) {
  .mod-t217 .mod-t217-flex { flex-direction: column; padding: 0 20px; }
  .mod-t217 .mod-t217-content { margin-top: 20px; padding-left: 0; width: 100%; }
  .mod-t217 .mod-t217-img { width: auto; }
  .mod-t217 .mod-t217-li { padding: 20px; }
}
@media (max-width: 768px) {
  .mod-t217 .mod-t217-li { flex-direction: column; margin-bottom: 20px; width: 100%; }
  .mod-t217 .mod-t217-info { padding-left: 0; padding-top: 10px; }
}

/* ============================================================
   Product Detail Page — Responsive (pro-d-main)
   ============================================================ */
@media (max-width: 1024px) {
  .pro-d-main .crumbs .banner-content { display: none; }
  .pro-d-main .common-product .l-wrap { margin: 0 auto; width: 100%; max-width: 1920px; }
  .pro-d-main .common-product .prodetails-sidear { display: none !important; }
  .pro-d-main .common-product .prodetails-left { width: 100%; }
  .pro-d-main .common-product .prodetails-top { max-width: 1600px; margin: 0 auto 50px; }
  .pro-d-main .common-product #toinquiry,
  .pro-d-main .prodetails-left .prodetails-faq,
  .pro-d-main .prodetails-left .prodetails-like { max-width: 1600px; margin: 0 auto; }
}

@media (max-width: 768px) {
  .prodetails-info .prodetails-name { padding: 10px 0; }
  .prodetails-info .pr-text { padding: 5px 0; }
  .prodetails-info .prodetails-btnlist>* { width: 130px; }
}

@media (max-width: 500px) {
  .prodetails-info .prodetails-name { padding: 5px 0; }
  .prodetails-info .pr-text { padding: 5px 0; font-size: var(--fontsize12); }
  .prodetails-info .pr-line { margin: 10px 0; }
  .prodetails-info .prodetails-btnlist { margin-top: 32px; justify-content: space-between; }
  .prodetails-info .prodetails-btnlist>* { width: 49%; font-size: var(--fontsize16); margin-right: 0; }
}