/*
 Theme Name:   Noahclean
 Description:  Noahclean — independent Bootstrap 5 theme for noahclean.com (cleaning tools manufacturer).
 Author:       Tianming
 Author URI:   https://noahclean.com
 Version:      1.0.0
 License:      MIT License
 License URI:  https://opensource.org/licenses/MIT
 Text Domain:  noahclean
*/

/* =========================
   Tech Doc Primary Blue
   Used by h3 / alert / emphasis
   ========================= */

/* Light mode */
[data-bs-theme="light"] .post h3,
[data-bs-theme="light"] .alert-tech strong {
  color: #2d5aa0;
}

/* Dark mode */
[data-bs-theme="dark"] .post h3,
[data-bs-theme="dark"] .alert-tech strong {
  color: #6b8fd6;
}


/* =========================
   Headings (Post)
   ========================= */

/* H2 = section heading */
.post h2{
  position: relative;
  display: inline-block;
  font-weight: 600;
  color: var(--bs-emphasis-color);
  padding-bottom: 0.45rem;
  background:
    linear-gradient(
      to right,
      rgba(var(--bs-warning-rgb), 0.9),
      rgba(var(--bs-warning-rgb), 0.9)
    )
    left bottom / 100% 2px no-repeat;
}

.post h2::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(
    to right,
    rgba(var(--bs-warning-rgb), 0.18),
    rgba(var(--bs-warning-rgb), 0)
  );
  pointer-events: none;
}

/* Desktop & Tablet */
@media screen and (min-width: 640px){
  .doc-list{
    font-size: 1.3rem;
    margin: 0.8rem 0 0.8rem ;
    font-weight: 600;
    color: var(--bs-emphasis-color);
    padding-bottom: 0.45rem;
    background:
      linear-gradient(
        to right,
        rgba(var(--bs-warning-rgb), 0.9),
        rgba(var(--bs-warning-rgb), 0.9)
      )
      left bottom / 100% 2px no-repeat;
  }
  .post h2{
    font-size: 1.6rem;
    margin: 1.8rem 0 0.8rem;
  }
  .post h3{
    font-size: 1.3rem;
    font-weight: 600;
    margin: 1.4rem 0 0.8rem;
  }
}

/* Mobile */
@media screen and (max-width: 639.98px){
  .doc-list{
    font-size: 1.2rem ;
    padding-bottom: 0.5rem;
  }
  .post h2{
    font-size: 1.2rem;
    margin: 1rem 0;
    padding-bottom: 0.5rem;
  }
  
  .post h3{
    font-size: 1.3rem;
    font-weight: 600;
    margin: 1.2rem 0 0.8rem;
  }
}


/* =========================
   Typography & Lists (Post)
   ========================= */

@media screen and (min-width: 640px){
  .post p{
    line-height: 1.75;
    max-width: 100%; /* 跟随正文列宽；旧值 850px 在超宽屏下与 col-lg-9 不匹配 */
  }

  .post ul,
  .post ol{
    margin-left: 1.25rem;
    margin-bottom: 0.6rem;
  }

  .post ul li,
  .post ol li{
    margin-bottom: 0.7rem;
    line-height: 1.5;
  }

  .post ul li::marker,
  .post ol li::marker{
    color: currentColor;
  }
}

@media screen and (max-width: 639.98px){
  .post p{
    line-height: 1.65;
  }

  .post ul,
  .post ol{
    margin-left: 1.1rem;
    margin-bottom: 0.9rem;
  }

  .post ul li,
  .post ol li{
    margin-bottom: 0.45rem;
    line-height: 1.55;
  }

  .post ul li::marker,
  .post ol li::marker{
    color: currentColor;
  }
}


/* =========================
   Shortline Heading Utility
   ========================= */

:root{
  --heading-line-color: #6c757d;
}
:root[data-bs-theme="dark"]{
  --heading-line-color: rgba(255,255,255,0.35);
}

.heading-shortline{
  margin-top: 20px;
  font-weight: 500;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--heading-line-color);
  position: relative;
}

.heading-shortline::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 120px;
  height: 3px;
  background-color: #005bac;
  border-radius: 2px;
}


/* =========================
   Category Hero Image Wrapper
   ========================= */

.cat-hero-img-wrapper{
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.cat-hero-img-wrapper img{
  width: 100%;
  height: auto;
  object-fit: contain;
}

@media (min-width: 768px){
  .cat-hero-img-wrapper{
    height: 450px;
    padding: 1rem 0 !important;
  }

  .cat-hero-img-wrapper img{
    height: 100%;
    object-fit: contain;
  }
}

  
  .cat-hero-img-doc{
    min-height: 360px;
    max-height: 500px;
    padding: 1rem 0 !important;
  }
  .cat-hero-img-doc img{
    height: 100%;
    object-fit: cover;
  }

/* =========================
   Theme-based image swap
   ========================= */

.d-td-none{ display: inline-block; }
.d-tl-none{ display: none; }

html[data-bs-theme="dark"] .d-td-none{ display: none !important; }
html[data-bs-theme="dark"] .d-tl-none{ display: inline-block !important; }


/* =========================
   Sidebar list-group
   ========================= */

.widget-area .list-group-item a{
  color: var(--bs-secondary-color);
}
.widget-area .list-group-item a:hover{
  color: var(--bs-primary);
  text-decoration: none;
}
.widget-area .list-group-item{
  color: var(--bs-body-color);
  background-color: transparent;
  border-color: var(--bs-border-color);
}
.widget-area .list-group-item.active{
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: var(--bs-primary-bg-subtle);
}
.widget-area .list-group-item.active a{
  color: inherit;
}


/* =========================
   Updates section UI
   ========================= */

.updates-resources-section{ position: relative; }

.hover-lift{
  transition: all 0.3s ease;
}
.hover-lift:hover{
  transform: translateY(-5px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.list-item-hover{
  transition: background-color 0.2s ease;
  border-radius: 6px;
  margin: 0 -0.5rem;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}
.list-item-hover:hover{
  background-color: rgba(0, 0, 0, 0.02);
}

.hover-link{
  position: relative;
  transition: color 0.2s ease;
}
.hover-link:hover{
  color: var(--bs-primary) !important;
}

.icon-box{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}

@media (max-width: 575.98px){
  .icon-box{
    width: 48px;
    height: 48px;
    padding: 0.75rem !important;
  }
  .icon-box i{
    font-size: 1rem;
  }
}


/* =========================
   Bootscore base helpers
   ========================= */

.wp-post-image{ width: 100%; }
body{
  word-break: break-word;
  overflow-x: hidden;
}
img{ height: auto; max-width: 100%; }
iframe{ max-width: 100%; }

.alignleft{ display: inline; float: left; margin-right: 1.5em; }
.alignright{ display: inline; float: right; margin-left: 1.5em; }
.aligncenter{ clear: both; display: block; margin-left: auto; margin-right: auto; }

.wp-caption{ margin-bottom: 1.5em; max-width: 100%; }
.wp-caption img[class*="wp-image-"]{ display: block; margin-left: auto; margin-right: auto; }
.wp-caption .wp-caption-text{ margin: 0.8075em 0; }
.wp-caption-text{ text-align: center; }

@media (max-width: 680px){
  .navbar img{ height: 40px; }
  .card-title{ font-size: 0.9rem !important; }
  .card-text{ display: none !important; }
  .card-body{ padding: 0.65rem 0.75rem !important; }
}

@media (min-width: 992px){
  .hero-40vh-lg{ min-height: 40vh; }
  .hero-30vh-lg{ min-height: 30vh; }
  .hero-25vh-lg{ min-height: 25vh; }
}


/* =========================
   Layout tweaks
   ========================= */

/* 文章页正文与侧栏的列间距：与分类目录页一致（Bootstrap 默认 1.5rem）。
   旧值 6px 是为已移除的 TOC 紧贴正文而设，现改回默认。 */
.pro-post{ --bs-gutter-x: 1.5rem; }

/* Mobile: disable sticky for sticky elements */
@media (max-width: 991.98px){
  .position-sticky:not(#product-toc){
    position: static !important;
    top: auto !important;
  }
}


/* =========================
   Alert (Tech Doc)
   ========================= */

.alert-tech{
  background: rgba(var(--bs-info-rgb), 0.12);
  border: 0;
  border-left: 4px solid rgba(var(--bs-primary-rgb), 0.85);
  border-radius: 0.5rem;
  margin-right: 10px;
  color: var(--bs-body-color);
}
.alert-tech strong{
  font-weight: 600;
}


/* =========================
   TOC – Clean Background Highlight
   Structure based on .ms-3
   ========================= */

#productTocList{
  list-style: none;
  margin: 0;
  padding: 0;
}

#productTocList li{ margin: .3rem 0; }

#productTocList a{
  display: inline-block;
  text-decoration: none;
  font-size: .875rem;
  line-height: 1.4;
  padding: .1rem .25rem;
  border-radius: .25rem;
  color: var(--bs-secondary-color);
  font-weight: 400;
  transition: background .15s ease, color .15s ease;
}

#productTocList li:not(.ms-3) > a{
  font-weight: 600;
  color: var(--bs-emphasis-color);
}

#productTocList li.ms-3 > a{
  font-weight: 400;
  color: var(--bs-secondary-color);
}

#productTocList a:hover{
  color: var(--bs-emphasis-color);
  background: rgba(var(--bs-primary-rgb), 0.05);
}

#productTocList a.is-active{
  color: var(--bs-emphasis-color);
  background: rgba(var(--bs-primary-rgb), 0.10);
}


/* =========================
   Tables – Tech Doc (Final)
   Scope: .post table
   - Light blue header
   - Solid separators in header
   - Compact cells + grid borders in body
   - Hover always wins over striping
   - Mobile: horizontal scroll when overflow
   ========================= */

.post table{
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: .875rem;
  border: 1px solid var(--bs-border-color);
  border-radius: .5rem;
  overflow: hidden;
}

/* Header: light blue + solid separators */
.post table thead th p{
    margin: 0;
}
.post table thead th{
  background: rgba(var(--bs-info-rgb), 0.35);
  color: var(--bs-emphasis-color);
  padding: .6rem .4rem;
  text-align: center;
  font-weight: 600;
  /* text-transform: uppercase;*/
  white-space: nowrap;
  border-bottom: 1px solid var(--bs-border-color);

  /* Solid grid for header */
  border: 1px solid var(--bs-tertiary-color);
}

/* Header column separators rule (per your requirement) */
.post table thead th:first-child,
.post table thead th:last-child{
  border-right: none;
}

/* Dark mode header */
html[data-bs-theme="dark"] .post table thead th{
  background: rgba(var(--bs-info-rgb), 0.25);
  border-right: 1px solid rgba(255,255,255,0.25);
  border-bottom: 1px solid rgba(255,255,255,0.25);
}

/* Body cells: compact grid */
.post table tbody td{
  padding: .3rem .4rem;
  border: 1px solid var(--bs-border-color);
  color: var(--bs-body-color);
  vertical-align: top;
}

/* Zebra first, hover later so hover always works */
.post table tbody tr:nth-child(even){
  background: rgba(var(--bs-secondary-rgb), .03);
}

.post table tbody tr:hover{
  background: rgba(var(--bs-primary-rgb), .08);
}

/* Links in table */
.post table a{
  color: rgba(var(--bs-primary-rgb), .9);
  text-decoration: none;
}
.post table a:hover{
  text-decoration: underline;
}

/* =========================
   Mobile: horizontal scroll when table overflows
   No wrapper needed
   ========================= */
@media (max-width: 767.98px){

  .post table{
    display: block;                    /* allow overflow scrolling */
    width: 100%;
    max-width: 100%;

    overflow-x: auto;                  /* show horizontal scroll only when needed */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch; /* smooth on iOS */

    white-space: nowrap;               /* prevent columns from wrapping and squeezing */
  }

  .post table th,
  .post table td{
    white-space: nowrap;
  }
}




.top-button{
  right: 5%;
  bottom: 30px;
  z-index: 2000;

  /* bootscore-like shape */
  width: 48px;
  height: 48px;
  border-radius: .5rem !important;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition: visibility 0s linear .3s, opacity .3s;
}

.top-button.visible{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transition: visibility 0s linear 0s, opacity .3s;
}



/* =========================
   Ultra-Compact Accordion Header
   ========================= */

#ctConfigAccordion .accordion-button{
    padding: .5rem;
    align-items: center;
    line-height: .8rem;
}

/* 展开状态不鼓包 */
#ctConfigAccordion .accordion-button:not(.collapsed){
  background-color: rgba(var(--bs-primary-rgb), 0.08);
  box-shadow: none;
}

/* 去掉 focus 厚边 */
#ctConfigAccordion .accordion-button:focus{
  box-shadow: none;
}

/* 箭头缩小 */
#ctConfigAccordion .accordion-button::after{
  transform: scale(.85);
}
/* =========================
   Inline H3 (neutral style)
   ========================= */

.post h3.inline-title{
  display: inline;                     /* 不再占一整行 */
  font-size: 1rem;                     /* 和正文一致 */
  font-weight: 600;                    /* 仅加粗，不强调颜色 */
  color: var(--bs-body-color);         /* 跟普通文字一样 */
  margin: 0;
}



/* =========================
   Tech Doc Alerts (Bootstrap-based)
   - Use Bootstrap .alert for layout
   - Tech skins control color semantics
   - Dark mode uses unified text color
   ========================= */


/* =========================
   Common structure (left bar only)
   ========================= */

.alert.alert-tech-info,
.alert.alert-tech-note,
.alert.alert-tech-danger{
  border: 0;
  border-left-width: 4px;
  border-left-style: solid;
}


/* =========================
   Dark mode – common text color
   ========================= */

html[data-bs-theme="dark"] .alert.alert-tech-info,
html[data-bs-theme="dark"] .alert.alert-tech-note,
html[data-bs-theme="dark"] .alert.alert-tech-danger{
  color: rgb(161 161 161);
}

html[data-bs-theme="dark"] .alert.alert-tech-info strong,
html[data-bs-theme="dark"] .alert.alert-tech-note strong,
html[data-bs-theme="dark"] .alert.alert-tech-danger strong{
  color: rgb(211,211,211);
}


/* =========================
   Info / Compliance (Blue)
   ========================= */

/* Light */
.alert.alert-tech-info{
  background: rgba(var(--bs-info-rgb), 0.14);
  border-left-color: #2d5aa0;
  color: #1a365d;
}

.alert.alert-tech-info strong{
  color: #1a365d;
  font-weight: 700;
}

/* Dark (background + bar only) */
html[data-bs-theme="dark"] .alert.alert-tech-info{
  background: rgba(var(--bs-info-rgb), 0.10);
  border-left-color: rgba(var(--bs-info-rgb), 0.75);
}


/* =========================
   Engineering Note (Orange)
   ========================= */

/* Light */
.alert.alert-tech-note{
  background: rgba(var(--bs-warning-rgb), 0.14);
  border-left-color: rgba(var(--bs-warning-rgb), 0.9);
  color: #7a4a00;
}

.alert.alert-tech-note strong{
  color: #7a4a00;
  font-weight: 700;
}

/* Dark */
html[data-bs-theme="dark"] .alert.alert-tech-note{
  background: rgba(var(--bs-warning-rgb), 0.12);
  border-left-color: rgba(var(--bs-warning-rgb), 0.8);
}


/* =========================
   Safety Warning (Red / Danger)
   ========================= */

/* Light */
.alert.alert-tech-danger{
  background: rgba(var(--bs-danger-rgb), 0.12);
  border-left-color: rgba(var(--bs-danger-rgb), 0.9);
  color: #7a1f1f;
}

.alert.alert-tech-danger strong{
  color: #7a1f1f;
  font-weight: 700;
}

/* Dark */
html[data-bs-theme="dark"] .alert.alert-tech-danger{
  background: rgba(var(--bs-danger-rgb), 0.14);
  border-left-color: rgba(var(--bs-danger-rgb), 0.85);
}


/* =========================
   Header Language Switcher
   ========================= */

/* Language button */


/* Flag icon in button */
.header-language .flag.icon{
  display: inline-block;
  line-height: 1;
}

.header-language .flag.icon img{
  width: 16px;
  height: 11px;
  vertical-align: middle;
}

/* Flag icon in dropdown - use inline styles from Polylang */
.header-language .dropdown-item .flag.icon,
.header-language .dropdown-item .flag.icon img{
  width: 16px;
  height: 11px;
  vertical-align: middle;
}

/* Dark mode dropdown border */
html[data-bs-theme="dark"] .header-language .dropdown-menu{
  border-color: rgba(255,255,255,0.15);
}

/* Language dropdown scroll when screen height is not enough */
.header-language .dropdown-menu{
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
}

/* Mobile: use more available screen height */
@media (max-width: 767.98px){
  .header-language .dropdown-menu{
    max-height: calc(100vh - 80px);
  }
}

/* Chrome / Edge / Safari scrollbar */
.header-language .dropdown-menu::-webkit-scrollbar{
  width: 6px;
}

.header-language .dropdown-menu::-webkit-scrollbar-thumb{
  border-radius: 6px;
  background-color: rgba(108, 117, 125, 0.45);
}

/* Dark mode scrollbar */
html[data-bs-theme="dark"] .header-language .dropdown-menu::-webkit-scrollbar-thumb{
  background-color: rgba(255,255,255,0.35);
}


/* =========================
   Category Navigation - Fixed Width Buttons
   ========================= */

.category-nav-wrapper{
  max-width: 950px;
  margin-left: auto;
  margin-right: auto;
}

.category-nav-wrapper .btn{
  width: 100%;
  min-width: 130px;
  font-weight: 600;
  font-size: 0.875rem;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.3s ease;
}

.category-nav-wrapper .btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

/* Mobile: smaller */
@media (max-width: 767.98px){
  .category-nav-wrapper .btn{
    min-width: 110px;
    font-size: 0.8125rem;
    padding: 0.5rem 0.6rem !important;
  }
}


/* =========================
   Offcanvas - Mobile 3/4 Width
   ========================= */

@media (max-width: 575.98px) {
  .offcanvas.offcanvas-end,
  .category-sidebar-offcanvas {
    width: 70vw !important;
    max-width: 70vw !important;
  }
}


/* =========================
   Contact Page Form Text
   ========================= */

/* 输入后的文字：正常黑色 / 深色模式自动适配 */
.contact-page .wpcf7 .form-control {
  color: var(--bs-body-color);
}

/* 提示文字 placeholder：更淡灰 */
.contact-page .wpcf7 .form-control::placeholder {
  color: #adb5bd;
  opacity: 1;
}

/* textarea 提示文字 */
.contact-page .wpcf7 textarea.form-control::placeholder {
  color: #adb5bd;
  opacity: 1;
}


/* =========================
   Product / Article Inquiry Form（文章页蓝色卡片内询盘表单）
   ========================= */

/* CF7 字段容器块级化，保证 form-control 占满所在列宽 */
.product-inquiry .wpcf7-form-control-wrap {
  display: block;
}

/* textarea 高度：CF7 shortcode 不便设 rows，统一用 CSS 控制 */
.product-inquiry .wpcf7 textarea.form-control {
  min-height: 120px;
}

/* 输入文字与 placeholder 在白色输入框内保持清晰 */
.product-inquiry .wpcf7 .form-control {
  color: var(--bs-body-color);
}

.product-inquiry .wpcf7 .form-control::placeholder {
  color: #adb5bd;
  opacity: 1;
}


/* =========================
   Product Gallery（产品页图库：缩略图 + 大图）
   ========================= */

/* 大图：白底卡片、加高，突出特色图 */
.product-gallery-main img {
  width: 100%;
  height: auto;
  background: #fff;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  padding: 0.75rem;
  object-fit: contain;
}

@media (min-width: 768px) {
  .product-gallery-main img {
    min-height: 420px;
    max-height: 520px;
  }
}

/* 缩略图列（桌面竖排 / 移动横排） */
.product-gallery-thumbs {
  flex: 0 0 auto;
}

.product-gallery-thumb {
  width: 64px;
  height: 64px;
  padding: 2px;
  background: #fff;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.375rem;
  overflow: hidden;
  cursor: pointer;
}

.product-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-gallery-thumb.active {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 1px var(--bs-primary);
}

@media (min-width: 768px) {
  .product-gallery-thumb {
    width: 72px;
    height: 72px;
  }
}


/* =========================
   CF7 Form Styling (Product Inquiry Blue Card)
   ========================= */

.product-inquiry .wpcf7-form label {
  color: rgba(255,255,255,0.85);
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
  display: block;
}

.product-inquiry .wpcf7-form br {
  display: none;
}

.product-inquiry .wpcf7-form p {
  margin-bottom: 0;
}

.product-inquiry .wpcf7-form .wpcf7-submit {
  margin-top: 1rem;
}

/* CF7 validation response */
.product-inquiry .wpcf7 .wpcf7-validation-errors {
  border-color: rgba(255,255,255,0.4);
  color: #fff;
}

.product-inquiry .wpcf7 .wpcf7-not-valid-tip {
  color: rgba(255,255,255,0.8);
  font-size: 0.8rem;
}

.product-inquiry .wpcf7 .wpcf7-response-output {
  margin: 1rem 0 0;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
}

/* Contact page form (white bg) */
.contact-page .wpcf7-form label {
  color: var(--bs-body-color);
  font-size: 0.9rem;
}


/* ============================================================
   HOMEPAGE SECTIONS – front-page.php
   ============================================================ */

/* ── 1. Hero ── */

.hp-hero {
  --hp-hero-h: 62vh;
  height: var(--hp-hero-h);
  min-height: 480px;
  background: linear-gradient(135deg, #001a3d 0%, #003d7a 55%, #005bac 100%);
}

.hp-hero-slides {
  min-height: var(--hp-hero-h);
}

.hp-hero-slides .carousel-item {
  min-height: var(--hp-hero-h);
}

.hp-hero-slide-img {
  height: var(--hp-hero-h);
  object-fit: cover;
  object-position: center;
  filter: brightness(0.95) saturate(1);
}

.hp-hero-fallback .hp-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,20,60,0.55) 0%, rgba(0,91,172,0.45) 100%);
}

[data-bs-theme="dark"] .hp-hero-fallback .hp-hero-overlay {
  background: linear-gradient(135deg, rgba(0,10,30,0.75) 0%, rgba(0,40,100,0.65) 100%);
}

.hp-hero .hp-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,10,30,0.55) 0%, rgba(0,20,50,0.38) 45%, rgba(0,10,30,0.62) 100%);
  z-index: 1;
}

.hp-hero-center {
  position: relative;
  z-index: 2;
  width: min(92%, 900px);
}

.hp-hero-title {
  font-size: clamp(1.8rem, 4vw, 3.1rem);
  text-shadow: 0 2px 18px rgba(0,0,0,0.45);
}

.hp-hero-sub {
  color: rgba(255,255,255,0.9);
  font-size: clamp(0.98rem, 1.4vw, 1.15rem);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.hp-hero-features {
  color: rgba(255,255,255,0.85);
}
.hp-hero-features i { color: #4fd1c5; }

/* badge：两侧白线 */
.hp-hero-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  color: rgba(255,255,255,0.9);
  font-size: 0.85rem;
  letter-spacing: 0.14em;
}
.hp-hero-label-line {
  display: inline-block;
  width: 40px;
  height: 2px;
  background: rgba(255,255,255,0.7);
}

/* 指示点（无左右箭头） */
.hp-hero-dots { margin-bottom: 1.25rem; z-index: 3; }
.hp-hero-dots [data-bs-target] {
  width: 26px;
  height: 4px;
  margin: 0 3px;
  border: 0;
  border-radius: 2px;
  background: rgba(255,255,255,0.5);
  opacity: 1;
  transition: background 0.2s, width 0.2s;
}
.hp-hero-dots .active {
  background: #fff;
  width: 34px;
}

/* ── 首页半透明玻璃导航（dark-glass，与 Hero 融合） ── */
.site-header-float {
  z-index: 1045;
  background-color: rgba(0,0,0,0.25) !important;   /* 半透明黑（更透），透出 hero */
  border-bottom: 1px solid rgba(255,255,255,0.18) !important;
  box-shadow: none;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.site-header-float.is-solid {
  background-color: var(--bs-body-bg) !important;
  border-bottom: 1px solid var(--bs-border-color) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.1);
}

/* 透明态：右侧操作区按钮/图标转白（含搜索/主题/语言/汉堡） */
.site-header-float:not(.is-solid) .header-actions .btn {
  color: #fff;
  border-color: rgba(255,255,255,0.55);
}
.site-header-float:not(.is-solid) .header-actions .btn:hover {
  background: rgba(255,255,255,0.15);
  color: #fff;
}
.site-header-float:not(.is-solid) .header-lang a {
  color: #fff;
}

/* 透明态：显示白色 logo，隐藏深色 logo */
.site-header-float:not(.is-solid) .navbar-brand .d-td-none { display: none !important; }
.site-header-float:not(.is-solid) .navbar-brand .d-tl-none { display: inline-block !important; }

/* ── 导航栏高度参考 daulma.com ──
   daulma：logo 57px + Bootstrap 默认 navbar 内边距 → 实测 header ≈ 78px（移动端 logo 40px）。
   我们同样把导航栏做高：桌面 min-height 78px，logo 按横版字标比例放大到 50px。
   （不动 display，以免破坏 d-td-none/d-tl-none 主题显隐） */
#masthead .navbar { min-height: 78px; }
.navbar-brand img {
  height: 3.125rem;   /* 50px */
  width: auto;
  max-width: none;
}
@media (max-width: 991.98px) {
  #masthead .navbar { min-height: 64px; }
  .navbar-brand img { height: 40px; }   /* 与 daulma 移动端一致 */
}

/* ── 导航排版 + 当前项/悬停下划线（参考 daulma.com）──
   字号 1rem / 字重 600 / 字距 .03em；下划线用 ::before + scaleX 动画
   （Bootstrap 的下拉箭头占用 ::after，故下划线走 ::before，互不冲突）。
   仅桌面内联导航 > li > .nav-link；下拉子项是 .dropdown-item，不受影响。 */
@media (min-width: 992px) {
  .site-header .navbar-nav > li > .nav-link {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .03em;
    position: relative;
    transition: color .2s ease;
  }
  .site-header .navbar-nav > li > .nav-link::before {
    content: "";
    position: absolute;
    left: .5rem;
    right: .5rem;
    bottom: .3rem;
    height: 2px;
    background: var(--bs-emphasis-color);   /* 黑(浅色)/白(暗色)自适应，不用品牌蓝 */
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .2s ease;
  }
  /* hover 显现、active/当前项常亮 */
  .site-header .navbar-nav > li > .nav-link:hover::before,
  .site-header .navbar-nav > li > .nav-link.active::before,
  .site-header .navbar-nav > li.current-menu-item > .nav-link::before {
    transform: scaleX(1);
  }
  /* 当前/实底态：激活项文字不加颜色强调（保持黑/白），仅靠 font-weight:600 加粗 + 下划线区分 */
  .site-header .navbar-nav > li > .nav-link.active,
  .site-header .navbar-nav > li.current-menu-item > .nav-link {
    color: var(--bs-emphasis-color);
  }
}

/* 桌面透明态：一级菜单白字（BS_Nav_Walker 的 li 无 .nav-item，故用 > li > .nav-link）*/
@media (min-width: 992px) {
  /* 直接覆盖 Bootstrap navbar 颜色变量，最彻底 */
  .site-header-float:not(.is-solid) .navbar {
    --bs-navbar-color: rgba(255,255,255,0.88);
    --bs-navbar-hover-color: #ffffff;
    --bs-navbar-active-color: #ffffff;
    --bs-navbar-brand-color: #ffffff;
    --bs-navbar-brand-hover-color: #ffffff;
  }
  /* 命中 Bootstrap 局部变量链（.navbar-nav .nav-link 用 --bs-nav-link-color）*/
  .site-header-float:not(.is-solid) .navbar-nav .nav-link {
    --bs-nav-link-color: rgba(255,255,255,0.88);
    --bs-nav-link-hover-color: #ffffff;
    --bs-nav-link-disabled-color: rgba(255,255,255,0.6);
    color: rgba(255,255,255,0.88) !important;
  }
  /* 双保险：一级菜单链接（含 active / dropdown-toggle）强制白字 */
  .site-header-float:not(.is-solid) .navbar-nav > li > .nav-link,
  .site-header-float:not(.is-solid) .navbar-nav > li > .nav-link.active,
  .site-header-float:not(.is-solid) .navbar-nav > li > .nav-link:focus-visible {
    color: #fff;
  }
  .site-header-float:not(.is-solid) .navbar-nav > li > .nav-link:hover {
    color: #fff;
    opacity: 0.82;
  }
  /* dropdown-toggle 箭头转白 */
  .site-header-float:not(.is-solid) .navbar-nav > li > .nav-link.dropdown-toggle::after {
    filter: invert(1) brightness(2);
  }
  /* 透明态：下划线转白，与白字统一；滚过 hero 变实底后自动恢复品牌色 */
  .site-header-float:not(.is-solid) .navbar-nav > li > .nav-link::before {
    background: rgba(255,255,255,0.92);
  }
  /* 下拉面板为浅色底，内部菜单项保持深色（不受上方影响，因它们是 .dropdown-item）*/
}

.hp-trust-bar {
  background: var(--bs-body-bg);
}

.hp-trust-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  background: rgba(var(--bs-primary-rgb), 0.12);
  font-size: 1.1rem;
}

.hp-trust-val {
  font-size: 1.35rem;
  color: var(--bs-primary);
}

/* ── 3. Section Heading（通用 eyebrow + h2 + desc，官方风格：加宽字距 + 居中短下划线） ── */

.hp-eyebrow {
  color: rgba(var(--bs-primary-rgb), 0.9);
  font-weight: 700;
  letter-spacing: 0.22em;
}

.hp-section-heading .hp-eyebrow {
  color: rgba(var(--bs-primary-rgb), 0.85);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
}

.hp-section-heading h2 {
  color: var(--bs-emphasis-color);
  position: relative;
  padding-bottom: 1rem;
}

/* 居中抬头下的品牌色短下划线（仅居中标题生效，深色 CTA 区块不受影响） */
.hp-section-heading.text-center h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(var(--bs-primary-rgb), 0.25), var(--bs-primary));
}

/* 深色沉浸区块（why-us）的抬头下划线转白，避免与深蓝底糊在一起 */
.hp-why-us .hp-section-heading.text-center h2::after {
  background: linear-gradient(90deg, rgba(255,255,255,0.25), #fff);
}

.hp-section-desc {
  max-width: 620px;
  font-size: 0.98rem;
  color: var(--bs-secondary-color);
}

/* ── 主页各区块纵向留白：加大 section 上下内边距，避免过于紧凑 ──
   选择器 section.hp-xxx（元素+类）特异性高于 Bootstrap 的 .py-5（单类），可靠覆盖。 */
section.hp-products, section.hp-about, section.hp-categories,
section.hp-why-us, section.hp-news, section.hp-partners, section.hp-contact {
  padding-top: clamp(4rem, 9vh, 7rem);
  padding-bottom: clamp(4rem, 9vh, 7rem);
}

/* ── Footer（参考 daulma.com 版式）── */
.site-footer {
  background-color: #1a1f25;   /* 固定深色底，不再用 bg-dark（避免暗色模式与 body 同色融合）*/
}
/* 暗色模式：body 背景为 #212529，footer 用更深的近黑 + 顶部描边，拉开层次、增强识别度 */
[data-bs-theme="dark"] .site-footer {
  background-color: #0b0f14;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.site-footer a { transition: color 0.2s ease; }
.site-footer .footer-main a.text-white-50:hover { color: #fff !important; }
.site-footer h6 { letter-spacing: .04em; }
.site-footer .badge { font-size: .72rem; font-weight: 500; }

/* ── 4. Featured Products ── */

.hp-product-card {
  transition: transform 0.2s, box-shadow 0.2s;
}

.hp-product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.12) !important;
}

.hp-product-card .card-img-top {
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #fff;
  padding: 0.5rem;
}

/* ── 5. About Section（官方企业档案风格）── */

.hp-about {
  background: var(--bs-body-bg);
}

/* 左侧企业实景：圆角 + 阴影描边 + Since 徽标 */
.hp-about-media {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid var(--bs-border-color);
  box-shadow: 0 20px 50px rgba(0, 30, 80, 0.14);
}
.hp-about-media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.hp-about-placeholder {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #001a3d, #005bac);
}
.hp-about-since {
  position: absolute;
  left: 1.1rem;
  bottom: 1.1rem;
  background: rgba(0, 20, 50, 0.82);
  backdrop-filter: blur(6px);
  color: #fff;
  font-weight: 600;
  font-size: 0.88rem;
  padding: 0.5rem 0.95rem;
  border-radius: 0.6rem;
  border-left: 3px solid var(--bs-primary);
}

/* 认证胶囊 */
.hp-about-certs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}
.hp-about-cert {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(var(--bs-primary-rgb), 0.9);
  background: rgba(var(--bs-primary-rgb), 0.06);
  border: 1px solid rgba(var(--bs-primary-rgb), 0.25);
  border-radius: 50rem;
  padding: 0.42rem 0.9rem;
}

/* 右侧标题 + 分隔线 */
.hp-about-title {
  color: var(--bs-emphasis-color);
  line-height: 1.25;
}
.hp-about-divider {
  display: block;
  width: 64px;
  height: 3px;
  border-radius: 3px;
  margin-bottom: 1.25rem;
  background: linear-gradient(90deg, rgba(var(--bs-primary-rgb), 0.25), var(--bs-primary));
}

/* 关键事实网格 */
.hp-fact {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  height: 100%;
  padding: 0.85rem 1rem;
  border-radius: 0.7rem;
  background: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
}
.hp-fact-icon {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--bs-primary-rgb), 0.1);
  color: var(--bs-primary);
  font-size: 1rem;
}
.hp-fact-k {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--bs-secondary-color);
  margin-bottom: 0.15rem;
}
.hp-fact-v {
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--bs-emphasis-color);
}

/* ── 6. Product Categories ── */

.hp-cat-card {
  display: block;
  position: relative;
  height: 100%;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 0.75rem;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.hp-cat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 26px rgba(0,0,0,0.12);
  border-color: rgba(var(--bs-primary-rgb), 0.4);
}

.hp-cat-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(135deg, #eef3f9, #dce8f5);
}
[data-bs-theme="dark"] .hp-cat-media {
  background: linear-gradient(135deg, #16222f, #101a26);
}

.hp-cat-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.hp-cat-card:hover .hp-cat-media img { transform: scale(1.06); }

.hp-cat-ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  color: rgba(var(--bs-primary-rgb), 0.35);
}

.hp-cat-count-badge {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.15rem 0.55rem;
  border-radius: 2rem;
  backdrop-filter: blur(4px);
}

.hp-cat-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
}

.hp-cat-name {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--bs-emphasis-color);
}

.hp-cat-go {
  color: var(--bs-primary);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.2s, transform 0.2s;
}
.hp-cat-card:hover .hp-cat-go {
  opacity: 1;
  transform: translateX(0);
}

/* ── 7. Why Choose Us ── */

.hp-why-us {
  background: transparent;
}

.hp-why-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #00102a 0%, #003060 40%, #005bac 100%);
  z-index: 0;
}

[data-bs-theme="dark"] .hp-why-bg {
  background: linear-gradient(135deg, #000a1a 0%, #001830 40%, #003d7a 100%);
}

.hp-why-eyebrow {
  color: rgba(255,255,255,0.55) !important;
}

.hp-why-desc {
  color: rgba(255,255,255,0.7) !important;
}

.hp-why-card {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(4px);
  transition: background 0.2s, transform 0.2s;
}

.hp-why-card:hover {
  background: rgba(255,255,255,0.14);
  transform: translateY(-4px);
}

.hp-why-icon {
  color: #64b5f6;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(100,181,246,0.15);
}

.hp-why-title {
  color: #fff;
  font-size: 1rem;
}

.hp-why-text {
  color: rgba(255,255,255,0.72);
  line-height: 1.6;
}

/* ── 8. Latest News ── */

.hp-news-thumb-wrap {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bs-body-bg);
}

.hp-news-thumb {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.5rem;
  transition: transform 0.3s;
}

.hp-news-card:hover .hp-news-thumb {
  transform: scale(1.04);
}

.hp-news-thumb-placeholder {
  aspect-ratio: 16 / 9;
  background: rgba(var(--bs-primary-rgb), 0.04);
}

.hp-read-more {
  opacity: 0;
  transition: opacity 0.2s;
}

.hp-news-card:hover .hp-read-more,
.hp-news-card:focus-within .hp-read-more {
  opacity: 1;
}

/* ── 9. Partners 合作伙伴（浅色 logo 网格，版式参考 jiaxin.cc）── */

.hp-partners {
  background: var(--bs-body-bg);
}

/* 品牌 logo 磁贴：白底卡片 + 细边框，悬停上浮；文字标灰阶→品牌色 */
.hp-logo-tile {
  height: 100%;
  min-height: 132px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.75rem 1rem;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 0.9rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.hp-logo-tile:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 36px rgba(0, 30, 80, 0.12);
  border-color: rgba(var(--bs-primary-rgb), 0.35);
}
.hp-logo-media {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
}
/* 将来放真实 logo 图：默认灰阶，悬停恢复彩色 */
.hp-logo-media img {
  max-height: 46px;
  width: auto;
  max-width: 100%;
  filter: grayscale(1);
  opacity: 0.6;
  transition: filter 0.25s ease, opacity 0.25s ease;
}
.hp-logo-tile:hover .hp-logo-media img {
  filter: none;
  opacity: 1;
}
/* 文字标（无真实 logo 时的占位，企业风） */
.hp-logo-wordmark {
  font-weight: 800;
  font-size: 1.12rem;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bs-emphasis-color);
  filter: grayscale(1);
  opacity: 0.45;
  transition: filter 0.25s ease, opacity 0.25s ease, color 0.25s ease;
}
.hp-logo-tile:hover .hp-logo-wordmark {
  filter: none;
  opacity: 1;
  color: var(--brand, var(--bs-primary));
}
.hp-logo-rule {
  display: block;
  width: 30px;
  height: 3px;
  border-radius: 3px;
  margin: 0.7rem auto 0.5rem;
  background: var(--brand, var(--bs-primary));
  opacity: 0.55;
  transition: width 0.25s ease, opacity 0.25s ease;
}
.hp-logo-tile:hover .hp-logo-rule {
  width: 54px;
  opacity: 1;
}
.hp-logo-cn {
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: var(--bs-secondary-color);
}

/* 出口市场标签行 */
.hp-partner-markets {
  align-items: center;
}
.hp-markets-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
  margin-right: 0.25rem;
}
.hp-market-chip {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.45em 1em;
  border-radius: 50rem;
  background: rgba(var(--bs-primary-rgb), 0.06);
  border: 1px solid rgba(var(--bs-primary-rgb), 0.16);
  color: rgba(var(--bs-primary-rgb), 0.9);
}

/* ── 10. Contact CTA ── */

.hp-contact-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #00102a 0%, #003060 40%, #005bac 100%);
  z-index: 0;
}

[data-bs-theme="dark"] .hp-contact-bg {
  background: linear-gradient(135deg, #000a1a 0%, #001830 40%, #003d7a 100%);
}

.hp-contact .container { z-index: 1; }

.hp-contact-eyebrow {
  color: rgba(255,255,255,0.55) !important;
}

.hp-contact-desc {
  color: rgba(255,255,255,0.75);
}

.hp-contact-list li {
  color: rgba(255,255,255,0.85);
  font-size: 0.9rem;
}

.hp-contact-link {
  color: rgba(255,255,255,0.7) !important;
  font-size: 0.85rem;
  text-decoration: none;
  padding: 0.3rem 0.75rem;
  border-radius: 2rem;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  transition: background 0.2s;
}

.hp-contact-link:hover {
  background: rgba(255,255,255,0.18);
  color: #fff !important;
}

/* CF7 表单卡片 */
.hp-contact-card {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(4px);
}

.hp-contact-card .wpcf7-form label {
  color: rgba(255,255,255,0.8);
  font-size: 0.85rem;
  margin-bottom: 0.6rem;
  display: block;
}

.hp-contact-card .wpcf7-form br { display: none; }

.hp-contact-card .wpcf7-form p { margin-bottom: 0; }

.hp-contact-card .wpcf7-form .wpcf7-text,
.hp-contact-card .wpcf7-form .wpcf7-email,
.hp-contact-card .wpcf7-form .wpcf7-textarea,
.hp-contact-card .wpcf7-form .wpcf7-number {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  border-radius: 0.375rem;
  padding: 0.5rem 0.75rem;
  width: 100%;
}

.hp-contact-card .wpcf7-form .wpcf7-text::placeholder,
.hp-contact-card .wpcf7-form .wpcf7-email::placeholder,
.hp-contact-card .wpcf7-form .wpcf7-textarea::placeholder {
  color: rgba(255,255,255,0.45);
}

.hp-contact-card .wpcf7-form .wpcf7-text:focus,
.hp-contact-card .wpcf7-form .wpcf7-email:focus,
.hp-contact-card .wpcf7-form .wpcf7-textarea:focus {
  outline: none;
  border-color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.18);
}

.hp-contact-card .wpcf7-form .wpcf7-submit {
  background: #fff;
  color: #005bac;
  border: none;
  border-radius: 0.375rem;
  padding: 0.6rem 1.5rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  margin-top: 0.75rem;
}

.hp-contact-card .wpcf7-form .wpcf7-submit:hover {
  background: rgba(255,255,255,0.88);
}

.hp-contact-card .wpcf7 .wpcf7-not-valid-tip {
  color: rgba(255,220,220,0.9);
  font-size: 0.78rem;
}

.hp-contact-card .wpcf7 .wpcf7-validation-errors {
  border-color: rgba(255,200,200,0.4);
  color: #fff;
}

.hp-contact-card .wpcf7 .wpcf7-response-output {
  margin: 0.75rem 0 0;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.85rem;
}

/* ── 平滑滚动锚点偏移（防止 sticky header 遮挡） ── */
#hp-contact,
#hp-categories,
#hp-products,
#hp-about {
  scroll-margin-top: 72px;
}

/* ── 响应式微调 ── */
@media (max-width: 767.98px) {
  .hp-hero {
    --hp-hero-h: 56vh;
    min-height: 420px;
  }

  .hp-hero-title {
    font-size: 1.7rem !important;
  }

  .hp-about-title {
    font-size: 1.5rem;
  }

  .hp-fact {
    padding: 0.7rem 0.8rem;
  }

  .hp-why-card {
    padding: 1.25rem !important;
  }

  .hp-contact-card {
    padding: 1rem !important;
  }
}

@media (max-width: 575.98px) {
  .hp-trust-icon {
    width: 36px;
    height: 36px;
    font-size: 0.9rem;
  }

  .hp-trust-val {
    font-size: 1.1rem;
  }

  .hp-cat-name {
    font-size: 0.88rem;
  }

  .hp-cat-ph {
    font-size: 2rem;
  }
}