/* =========================================================
   ZHANZHENG Homepage Premium Polish V22.5
   Visual-only override for the current homepage.
   No HTML, route, API, product, inquiry or admin changes.
   ========================================================= */

body.zzhome-page{
  --zzp-green:#073f34;
  --zzp-green-2:#0b5141;
  --zzp-ink:#17342c;
  --zzp-muted:#64736d;
  --zzp-ivory:#fbf8f2;
  --zzp-cream:#f4ecdf;
  --zzp-line:#e9dfd2;
  --zzp-copper:#b97635;
  background:var(--zzp-ivory)!important;
  color:var(--zzp-ink)!important;
}

body.zzhome-page .zzhome-shell,
body.zzhome-page .hf-container{
  width:calc(100% - 96px)!important;
  max-width:1480px!important;
}

/* Header V22.5: transparent over the hero, hidden while scrolling down,
   restored as a light glass bar while scrolling up. Desktop only. */
@media (min-width:901px){
  body.zzhome-page .site-header,
  body.zzhome-page .site-header.zz-home-floating-header{
    height:76px!important;
    background:rgba(255,255,255,.16)!important;
    border-bottom:1px solid rgba(255,255,255,.28)!important;
    box-shadow:none!important;
    -webkit-backdrop-filter:blur(7px) saturate(112%)!important;
    backdrop-filter:blur(7px) saturate(112%)!important;
    transform:translate3d(0,0,0);
    transition:transform .30s cubic-bezier(.22,.61,.36,1),background-color .28s ease,box-shadow .28s ease,border-color .28s ease!important;
    will-change:transform;
  }
  body.zzhome-page .site-header.zz-home-header-scrolled{
    background:rgba(255,255,255,.93)!important;
    border-bottom-color:rgba(7,63,52,.11)!important;
    box-shadow:0 8px 28px rgba(20,55,44,.085)!important;
    -webkit-backdrop-filter:blur(15px) saturate(124%)!important;
    backdrop-filter:blur(15px) saturate(124%)!important;
  }
  body.zzhome-page .site-header.zz-home-header-hidden{
    transform:translate3d(0,calc(-100% - 5px),0)!important;
  }
}

@media (prefers-reduced-motion:reduce){
  body.zzhome-page .site-header,
  body.zzhome-page .site-header.zz-home-floating-header{
    transition:none!important;
  }
}

/* Hero: same slider images and copy, more controlled hierarchy. */
@media (min-width:901px){
  body.zzhome-page .zzhome-hero-slider{
    height:clamp(610px,40vw,730px)!important;
    min-height:610px!important;
    background:var(--zzp-cream)!important;
  }
  body.zzhome-page .zzhome-hero-slider::before{
    display:block!important;
    background:linear-gradient(90deg,rgba(250,247,241,.98) 0%,rgba(250,247,241,.95) 20%,rgba(250,247,241,.80) 34%,rgba(250,247,241,.32) 49%,rgba(250,247,241,0) 64%)!important;
  }
  body.zzhome-page .zzhome-hero-inner{
    padding-top:76px!important;
  }
  body.zzhome-page .zzhome-hero-copy{
    width:46%!important;
    max-width:650px!important;
    padding:44px 0 34px!important;
  }
  body.zzhome-page .zzhome-kicker{
    margin:0 0 17px!important;
    color:var(--zzp-green)!important;
    font-size:11px!important;
    font-weight:800!important;
    letter-spacing:1.65px!important;
  }
  body.zzhome-page .zzhome-hero h1{
    max-width:650px!important;
    margin:0 0 22px!important;
    color:var(--zzp-green)!important;
    font-family:Arial,Helvetica,sans-serif!important;
    font-size:clamp(52px,3.6vw,68px)!important;
    font-weight:650!important;
    line-height:1.045!important;
    letter-spacing:-2px!important;
  }
  body.zzhome-page .zzhome-hero p{
    max-width:590px!important;
    margin:0 0 29px!important;
    color:#40524b!important;
    font-size:16px!important;
    line-height:1.7!important;
  }
}

body.zzhome-page .zzhome-btn{
  min-height:46px!important;
  padding:0 21px!important;
  border-radius:5px!important;
  font-size:13px!important;
  font-weight:750!important;
  box-shadow:none!important;
}
body.zzhome-page .zzhome-btn-dark{
  background:var(--zzp-green)!important;
  border-color:var(--zzp-green)!important;
}
body.zzhome-page .zzhome-btn-light{
  background:rgba(255,255,255,.62)!important;
  border-color:#b8ab9b!important;
}
body.zzhome-page .zzhome-btn:hover{
  transform:translateY(-2px)!important;
  box-shadow:0 10px 22px rgba(7,63,52,.12)!important;
}
body.zzhome-page .zzhero-dots-main button{
  width:10px!important;
  height:10px!important;
  border-width:1px!important;
  background:rgba(255,255,255,.86)!important;
}
body.zzhome-page .zzhero-dots-main button.active{
  width:26px!important;
  border-radius:8px!important;
  background:var(--zzp-green)!important;
}

/* Capability strip. */
body.zzhome-page .zzhome-capabilities{
  background:linear-gradient(105deg,#063b31,#0b5141)!important;
  border:0!important;
}
body.zzhome-page .zzhome-cap-grid{
  min-height:112px!important;
}
body.zzhome-page .zzhome-cap-grid article{
  min-height:58px!important;
  border-right-color:rgba(255,255,255,.20)!important;
}
body.zzhome-page .zzhome-cap-icon{
  width:45px!important;
  height:45px!important;
  color:#e1a368!important;
  border-color:rgba(225,163,104,.8)!important;
  background:rgba(255,255,255,.025)!important;
}
body.zzhome-page .zzhome-cap-grid b{
  color:#fff!important;
  font-size:14.5px!important;
}
body.zzhome-page .zzhome-cap-grid small{
  color:rgba(255,255,255,.72)!important;
  font-size:11.5px!important;
}

/* Category section: preserve the current 4 + 3 arrangement and images. */
body.zzhome-page .hf-categories{
  padding:68px 0 76px!important;
  background:var(--zzp-ivory)!important;
}
body.zzhome-page .hf-section-title{
  margin-bottom:35px!important;
}
body.zzhome-page .hf-section-title h2,
body.zzhome-page .zzhome-section-head h2{
  color:var(--zzp-ink)!important;
  font-family:Arial,Helvetica,sans-serif!important;
  font-weight:650!important;
  letter-spacing:-.7px!important;
}
body.zzhome-page .hf-section-title h2{
  font-size:clamp(30px,2.25vw,40px)!important;
}
body.zzhome-page .hf-section-title span{
  width:28px!important;
  background:var(--zzp-copper)!important;
}
body.zzhome-page .hf-category-row{
  gap:20px!important;
}
body.zzhome-page .hf-category-row-bottom{
  margin-top:20px!important;
}
body.zzhome-page .hf-category-card{
  border:1px solid var(--zzp-line)!important;
  border-radius:7px!important;
  background:#fff!important;
  box-shadow:0 7px 22px rgba(25,55,45,.055)!important;
}
body.zzhome-page .hf-category-card:hover{
  transform:translateY(-5px)!important;
  border-color:#d9c6ad!important;
  box-shadow:0 16px 34px rgba(25,55,45,.11)!important;
}
body.zzhome-page .hf-category-image{
  aspect-ratio:4/3!important;
  height:auto!important;
  background:#f3eadf!important;
}
body.zzhome-page .hf-category-name{
  height:58px!important;
  justify-content:flex-start!important;
  position:relative!important;
  padding:0 42px 0 17px!important;
  text-align:left!important;
}
body.zzhome-page .hf-category-name::after{
  content:'→';
  position:absolute;
  right:17px;
  color:var(--zzp-green);
  font-size:18px;
}
body.zzhome-page .hf-category-name b{
  color:#1e342d!important;
  font-size:15px!important;
  font-weight:700!important;
}

/* Existing OEM, why-us, logistics and business modules. */
body.zzhome-page .zzhome-section{
  padding:76px 0!important;
}
body.zzhome-page .zzhome-oem{
  background:#f6efe5!important;
  border-top:1px solid #eee2d4!important;
}
body.zzhome-page .zzhome-oem-grid,
body.zzhome-page .zzhome-logistics-grid{
  gap:22px!important;
}
body.zzhome-page .zzhome-oem-card,
body.zzhome-page .zzhome-logistics-card{
  border:1px solid var(--zzp-line)!important;
  border-radius:8px!important;
  background:#fff!important;
  box-shadow:0 10px 30px rgba(25,55,45,.055)!important;
}
body.zzhome-page .zzhome-oem-card figure img,
body.zzhome-page .zzhome-logistics-card figure img,
body.zzhome-page .zzhome-business-media img{
  transition:transform .55s ease!important;
}
body.zzhome-page .zzhome-oem-card:hover figure img,
body.zzhome-page .zzhome-logistics-card:hover figure img{
  transform:scale(1.025)!important;
}
body.zzhome-page .zzhome-oem-card h3,
body.zzhome-page .zzhome-logistics-card h3,
body.zzhome-page .zzhome-business-copy h2{
  color:var(--zzp-ink)!important;
}
body.zzhome-page .zzhome-card-kicker,
body.zzhome-page .zzhome-eyebrow{
  color:var(--zzp-copper)!important;
}
body.zzhome-page .zzhome-why{
  background:#fff!important;
  border-color:#eee5da!important;
}
body.zzhome-page .zzhome-why-grid{
  border-color:var(--zzp-line)!important;
  border-radius:8px!important;
  box-shadow:0 9px 30px rgba(25,55,45,.045)!important;
}
body.zzhome-page .zzhome-logistics{
  background:var(--zzp-ivory)!important;
}
body.zzhome-page .zzhome-business{
  background:#f2eadf!important;
}

/* Tablet and mobile retain the current responsive structure. */
@media (max-width:900px){
  body.zzhome-page .zzhome-shell,
  body.zzhome-page .hf-container{
    width:calc(100% - 36px)!important;
  }
  body.zzhome-page .hf-category-row{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
  }
  body.zzhome-page .hf-category-row-bottom .hf-category-card{
    width:auto!important;
  }
  body.zzhome-page .zzhome-cap-grid{
    grid-template-columns:1fr 1fr!important;
  }
  body.zzhome-page .zzhome-cap-grid article:nth-child(2){border-right:0!important}
}

@media (max-width:760px){
  body.zzhome-page .zzhome-hero-copy{
    padding:29px 22px 31px!important;
    background:#faf6ef!important;
  }
  body.zzhome-page .zzhome-hero h1{
    color:var(--zzp-green)!important;
    font-family:Arial,Helvetica,sans-serif!important;
    font-size:37px!important;
    font-weight:650!important;
    line-height:1.08!important;
    letter-spacing:-1.1px!important;
  }
  body.zzhome-page .zzhome-hero p{
    font-size:14px!important;
    line-height:1.65!important;
  }
  body.zzhome-page .zzhome-cap-grid article{
    justify-content:flex-start!important;
    padding:18px!important;
  }
  body.zzhome-page .hf-categories,
  body.zzhome-page .zzhome-section{
    padding:48px 0!important;
  }
}

@media (max-width:560px){
  body.zzhome-page .zzhome-shell,
  body.zzhome-page .hf-container{
    width:calc(100% - 28px)!important;
  }
  body.zzhome-page .hf-category-row{
    grid-template-columns:1fr!important;
    gap:15px!important;
  }
  body.zzhome-page .hf-category-row-bottom{
    margin-top:15px!important;
  }
  body.zzhome-page .hf-category-image{
    aspect-ratio:16/10!important;
  }
  body.zzhome-page .zzhome-cap-grid{
    grid-template-columns:1fr!important;
  }
  body.zzhome-page .zzhome-cap-grid article{
    border-right:0!important;
    border-bottom:1px solid rgba(255,255,255,.15)!important;
  }
  body.zzhome-page .zzhome-cap-grid article:last-child{border-bottom:0!important}
  body.zzhome-page .zzhome-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
  }
  body.zzhome-page .zzhome-btn{
    width:100%!important;
    min-width:0!important;
    padding:0 12px!important;
  }
}

@media (prefers-reduced-motion:reduce){
  body.zzhome-page .hf-category-card,
  body.zzhome-page .zzhome-btn,
  body.zzhome-page .zzhome-oem-card img,
  body.zzhome-page .zzhome-logistics-card img{
    transition:none!important;
  }
}

/* =========================================================
   V22.2 stronger visual pass after local review.
   Still CSS-only and uses all current website images.
   ========================================================= */

body.zzhome-page .zzhome-shell,
body.zzhome-page .hf-container{
  max-width:1360px!important;
}

@media (min-width:901px){
  body.zzhome-page .zzhome-hero-slider{
    height:570px!important;
    min-height:570px!important;
  }
  body.zzhome-page .zzhome-hero-slider::before{
    background:linear-gradient(90deg,#fbf8f2 0%,rgba(251,248,242,.99) 20%,rgba(251,248,242,.92) 29%,rgba(251,248,242,.46) 40%,rgba(251,248,242,.08) 52%,rgba(251,248,242,0) 62%)!important;
  }
  body.zzhome-page .zzhome-hero-copy{
    width:35%!important;
    max-width:500px!important;
    padding:34px 0 24px!important;
  }
  body.zzhome-page .zzhome-hero h1{
    max-width:500px!important;
    margin-bottom:20px!important;
    font-size:clamp(45px,3vw,56px)!important;
    line-height:1.06!important;
    letter-spacing:-1.6px!important;
  }
  body.zzhome-page .zzhome-hero p{
    max-width:470px!important;
    margin-bottom:25px!important;
    font-size:14.5px!important;
    line-height:1.65!important;
  }
  body.zzhome-page .zzhome-kicker{
    max-width:450px!important;
    font-size:10px!important;
  }
}

body.zzhome-page .zzhome-cap-grid{
  min-height:96px!important;
}
body.zzhome-page .zzhome-cap-grid article{
  padding:0 22px!important;
}

body.zzhome-page .hf-categories{
  padding-top:76px!important;
  background:#faf7f1!important;
}
body.zzhome-page .hf-section-title{
  margin-bottom:40px!important;
}
body.zzhome-page .hf-category-row{
  gap:18px!important;
}
body.zzhome-page .hf-category-row-bottom{
  margin-top:18px!important;
}
body.zzhome-page .hf-category-image{
  aspect-ratio:1/1!important;
}
body.zzhome-page .hf-category-card{
  border-radius:10px!important;
  box-shadow:0 8px 26px rgba(25,55,45,.065)!important;
}
body.zzhome-page .hf-category-name{
  height:62px!important;
}
@media (min-width:901px){
  body.zzhome-page .hf-category-row-bottom .hf-category-card{
    width:calc((100% - 54px)/4)!important;
  }
}

body.zzhome-page .zzhome-oem{
  padding-top:82px!important;
  padding-bottom:84px!important;
  background:linear-gradient(180deg,#f3eadc 0%,#f8f2e9 100%)!important;
}
body.zzhome-page .zzhome-oem-card{
  min-height:390px!important;
  border-radius:12px!important;
  box-shadow:0 16px 42px rgba(25,55,45,.075)!important;
}
body.zzhome-page .zzhome-oem-copy{
  padding:40px 30px 38px 38px!important;
}
body.zzhome-page .zzhome-oem-card h3{
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:31px!important;
  font-weight:650!important;
  letter-spacing:-.7px!important;
}

body.zzhome-page .zzhome-why{
  padding-top:80px!important;
  padding-bottom:84px!important;
  background:#fff!important;
}
body.zzhome-page .zzhome-why-grid{
  display:grid!important;
  gap:16px!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}
body.zzhome-page .zzhome-why-grid article{
  min-height:176px!important;
  padding:28px 24px!important;
  border:1px solid var(--zzp-line)!important;
  border-radius:10px!important;
  background:#fcfaf6!important;
  box-shadow:0 9px 26px rgba(25,55,45,.045)!important;
}
body.zzhome-page .zzhome-why h3{
  font-size:16px!important;
  line-height:1.35!important;
}
body.zzhome-page .zzhome-why p{
  font-size:13px!important;
  line-height:1.65!important;
}

body.zzhome-page .zzhome-logistics{
  padding-top:82px!important;
  padding-bottom:88px!important;
  background:#f7f1e8!important;
}
body.zzhome-page .zzhome-logistics-card{
  min-height:360px!important;
  border-radius:12px!important;
  box-shadow:0 14px 38px rgba(25,55,45,.065)!important;
}

body.zzhome-page .zzhome-business-grid{
  max-width:1360px!important;
  min-height:520px!important;
  margin:0 auto!important;
}

@media (max-width:900px){
  body.zzhome-page .hf-category-image{
    aspect-ratio:4/3!important;
  }
  body.zzhome-page .zzhome-oem-card{
    min-height:0!important;
  }
  body.zzhome-page .zzhome-why-grid{
    grid-template-columns:1fr 1fr!important;
  }
}

@media (max-width:600px){
  body.zzhome-page .hf-category-image{
    aspect-ratio:16/10!important;
  }
  body.zzhome-page .zzhome-why-grid{
    grid-template-columns:1fr!important;
  }
  body.zzhome-page .zzhome-why-grid article{
    min-height:0!important;
  }
}

/* =========================================================
   V22.4 local/system typography refinement.
   No external font requests, so mobile loading stays unchanged.
   ========================================================= */

body.zzhome-page,
body.zzhome-page button,
body.zzhome-page input,
body.zzhome-page textarea,
body.zzhome-page select{
  font-family:"Aptos","Segoe UI Variable Text","Segoe UI",Arial,sans-serif!important;
  font-synthesis:none;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

body.zzhome-page .zzhome-hero h1,
body.zzhome-page .hf-section-title h2,
body.zzhome-page .zzhome-section-head h2,
body.zzhome-page .zzhome-oem-card h3,
body.zzhome-page .zzhome-logistics-card h3,
body.zzhome-page .zzhome-business-copy h2{
  font-family:"Avenir Next","Segoe UI Variable Display","Aptos Display","Segoe UI",Arial,sans-serif!important;
  font-variation-settings:"wght" 650;
}

body.zzhome-page .zzhome-btn{
  font-family:"Aptos","Segoe UI Variable Text","Segoe UI",Arial,sans-serif!important;
  font-weight:700!important;
  letter-spacing:.05px!important;
}

body.zzhome-page .zzhome-hero h1{
  font-weight:650!important;
}
body.zzhome-page .hf-section-title h2,
body.zzhome-page .zzhome-section-head h2{
  font-weight:650!important;
  line-height:1.12!important;
}
body.zzhome-page .zzhome-hero p,
body.zzhome-page .zzhome-section-head p,
body.zzhome-page .zzhome-oem-card li,
body.zzhome-page .zzhome-logistics-card p,
body.zzhome-page .zzhome-business-copy>p{
  font-weight:400!important;
  letter-spacing:.01em!important;
}

/* =========================================================
   V22.3 product-complete-display fix.
   Product imagery must remain fully visible; decorative crop is secondary.
   ========================================================= */

/* The desktop hero uses the existing images at full height instead of cover. */
@media (min-width:901px){
  body.zzhome-page .zzhome-hero-slider,
  body.zzhome-page .zzhero-slides{
    background:#f4ecdf!important;
  }
  body.zzhome-page .zzhero-slide,
  body.zzhome-page .zzhero-slide:nth-child(1),
  body.zzhome-page .zzhero-slide:nth-child(2),
  body.zzhome-page .zzhero-slide:nth-child(3){
    background-size:auto 100%!important;
    background-position:right center!important;
    background-repeat:no-repeat!important;
    background-color:#f4ecdf!important;
  }
  body.zzhome-page .zzhome-hero-slider::before{
    background:linear-gradient(90deg,#fbf8f2 0%,#fbf8f2 26%,rgba(251,248,242,.96) 35%,rgba(251,248,242,.63) 44%,rgba(251,248,242,.16) 54%,rgba(251,248,242,0) 64%)!important;
  }
}

/* Category sources are 8:5. Match that ratio and never crop the product. */
body.zzhome-page .hf-category-image{
  aspect-ratio:8/5!important;
  background:#f3eadf!important;
}
body.zzhome-page .hf-category-image img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
}

/* OEM cards: use full-width image above the copy instead of a narrow crop. */
@media (min-width:601px){
  body.zzhome-page .zzhome-oem-card{
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:auto 1fr!important;
    min-height:0!important;
  }
  body.zzhome-page .zzhome-oem-card figure{
    order:-1!important;
    width:100%!important;
    height:auto!important;
    aspect-ratio:8/5!important;
    background:#f3eadf!important;
  }
  body.zzhome-page .zzhome-oem-card figure img{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:center!important;
  }
  body.zzhome-page .zzhome-oem-copy{
    padding:34px 36px 38px!important;
  }
}

@media (max-width:600px){
  body.zzhome-page .hf-category-image,
  body.zzhome-page .zzhome-oem-card figure{
    aspect-ratio:8/5!important;
    height:auto!important;
  }
  body.zzhome-page .hf-category-image img,
  body.zzhome-page .zzhome-oem-card figure img{
    object-fit:contain!important;
    object-position:center!important;
  }
}