/* Zhanzheng Pets — B2B product-detail refinement (2026-10-09).
 * Page-scoped CSS only. Existing product data, images, quote modal and other
 * pages are untouched. Supports production zzpd and Vue-source np templates.
 */
main.zzpd-page,main.np-page.np-detail{color:#193a2e;background:#fdfcf9}
main.zzpd-page .zzpd-breadcrumb,main.np-page.np-detail .np-breadcrumb{
  font-size:13px;line-height:1.55;overflow-wrap:anywhere;color:#7d877c
}
main.zzpd-page .zzpd-breadcrumb a,main.np-page.np-detail .np-breadcrumb a{color:#566b5e}
main.zzpd-page .zzpd-summary .zzpd-category,main.np-page.np-detail .np-detail-summary .np-kicker{
  display:block;font-size:12px;font-weight:750;letter-spacing:.11em;
  color:#6a7969;margin-bottom:13px
}
main.zzpd-page .zzpd-summary h1,main.np-page.np-detail .np-detail-summary h1{
  font-family:Arial,Helvetica,sans-serif!important;
  font-weight:750!important;line-height:1.15!important;
  font-size:clamp(29px,2.7vw,42px)!important;letter-spacing:-.027em!important;
  color:#18392d!important;margin:0 0 17px!important;overflow-wrap:anywhere
}
main.zzpd-page .zzpd-lead,main.np-page.np-detail .np-detail-summary>p{
  font-size:15px!important;line-height:1.72!important;color:#5b6a60!important;
  margin-bottom:20px!important;max-width:66ch
}
/* Production bundle: use available desktop width without cropping product photos. */
@media(min-width:1240px){
  main.zzpd-page .zzpd-hero{
    width:100%!important;max-width:100%!important;
    grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr)!important;
    gap:38px!important;align-items:start!important
  }
  main.zzpd-page .zzpd-gallery{
    width:100%!important;max-width:none!important;
    grid-template-columns:76px minmax(0,1fr)!important;gap:12px!important
  }
  main.zzpd-page .zzpd-main-wrap{width:100%!important;max-width:none!important;min-width:0!important}
  main.zzpd-page .zzpd-main-image{
    width:100%!important;max-height:none!important;min-height:0!important;
    height:auto!important;aspect-ratio:1/1!important
  }
  main.zzpd-page .zzpd-summary{
    width:100%!important;max-width:none!important;
    padding-top:8px!important
  }
}
main.zzpd-page .zzpd-main-image,main.np-page.np-detail .np-gallery-main{
  background:#f9f8f5!important;border:1px solid #ecece5!important;
  border-radius:15px!important;overflow:hidden!important;cursor:zoom-in
}
main.zzpd-page .zzpd-main-image img,main.np-page.np-detail .np-gallery-main img{
  object-fit:contain!important;object-position:center!important
}
main.zzpd-page .zzpd-thumbs button,main.np-page.np-detail .np-thumbs button{
  background:#fff!important;border:1px solid #e2e6dd!important;
  border-radius:9px!important;overflow:hidden!important
}
main.zzpd-page .zzpd-thumbs button.active,main.np-page.np-detail .np-thumbs button.active{
  border:2px solid #1e5942!important;box-shadow:0 0 0 2px #1e59421a!important
}
main.zzpd-page .zzpd-thumbs button:focus-visible,
main.zzpd-page .zzpd-main-image:focus-visible,
main.np-page.np-detail .np-gallery button:focus-visible{
  outline:3px solid #d6996a!important;outline-offset:3px
}
/* Only show verified stroller specifications, read from that product's table. */
main.zzpd-page .zzpd-purchase-facts{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;margin:18px 0 19px
}
main.zzpd-page .zzpd-purchase-fact{
  display:flex;flex-direction:column;gap:6px;min-width:0;
  padding:13px 12px;border:1px solid #e2e8dd;border-radius:10px;background:#f4f7f1
}
main.zzpd-page .zzpd-purchase-fact small{
  font-size:11px;line-height:1.4;color:#65766a;letter-spacing:.025em
}
main.zzpd-page .zzpd-purchase-fact strong{
  font-size:15px;line-height:1.35;font-weight:750;color:#1d4531;overflow-wrap:anywhere
}
main.zzpd-page .zzpd-top-facts{border-top:1px solid #e8e8e0;padding-top:16px!important}
main.zzpd-page .zzpd-actions{margin-top:19px!important;max-width:400px!important}
main.zzpd-page .zzpd-actions .zzpd-btn,main.np-page.np-detail .np-detail-actions .np-btn{
  min-height:50px!important;border-radius:9px!important;
  font-size:14px!important;font-weight:750!important;
  box-shadow:none!important;justify-content:center
}
main.zzpd-page .zzpd-actions .zzpd-btn{background:#214b37!important;border-color:#214b37!important}
main.zzpd-page .zzpd-actions .zzpd-btn:hover{background:#31664a!important}
/* Give detail sections a consistent, readable B2B rhythm. */
main.zzpd-page .zzpd-description-card,main.zzpd-page .zzpd-product-spec-card,
main.zzpd-page .zzpd-service-card,main.zzpd-page .zzpd-faq-card,
main.zzpd-page .zzpd-related-card{
  background:#fff!important;border:1px solid #e9ebe4!important;
  border-radius:13px!important;box-shadow:none!important
}
main.zzpd-page .zzpd-spec-table-row{
  grid-template-columns:minmax(155px,.35fr) minmax(0,1fr)!important
}
main.zzpd-page .zzpd-spec-table-row span{
  background:#f8faf6!important;color:#53695b!important;font-weight:650!important
}
main.zzpd-page .zzpd-spec-table-row strong{font-weight:600!important;color:#243d31!important}
main.zzpd-page .zzpd-detail-paragraph{
  line-height:1.78!important;color:#53655b!important
}
main.zzpd-page .zzpd-final-cta{
  background:#edf3ed!important;border-color:#dce9dd!important;
  border-radius:13px!important;padding:24px!important
}
/* Vue development-source details: match information hierarchy and avoid fake
 * selected Overview tab state; keep all section links usable. */
main.np-page.np-detail .np-detail-hero{
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:42px;align-items:start
}
main.np-page.np-detail .np-gallery-main{aspect-ratio:1/1}
main.np-page.np-detail .np-facts{gap:10px;margin:23px 0}
main.np-page.np-detail .np-facts article{
  border:1px solid #e1e9de;background:#f4f7f1;
  border-radius:10px;padding:13px 12px
}
main.np-page.np-detail .np-facts strong{font-size:15px;color:#1f4934}
main.np-page.np-detail .np-facts small{font-size:11px;line-height:1.4}
main.np-page.np-detail .np-detail-actions{margin-top:20px}
main.np-page.np-detail .np-detail-tabs{
  background:#f3f4ef;border:1px solid #e9ece5;border-radius:11px;
  gap:6px;justify-content:flex-start;flex-wrap:wrap
}
main.np-page.np-detail .np-detail-tabs a,
main.np-page.np-detail .np-detail-tabs a:first-child{
  border-radius:7px;background:transparent;color:#46604d;
  font-size:13px;padding:10px 15px
}
main.np-page.np-detail .np-detail-tabs a:hover,
main.np-page.np-detail .np-detail-tabs a:focus-visible{
  background:#dfe9df;color:#1f4934
}
main.np-page.np-detail .np-section[id]{scroll-margin-top:110px}
main.np-page.np-detail #specifications{scroll-margin-top:110px}
main.np-page.np-detail .np-overview{gap:35px}
main.np-page.np-detail .np-specs th{width:38%;background:#f8faf6;color:#566c5d}
main.np-page.np-detail .np-specs th,main.np-page.np-detail .np-specs td{
  padding:13px!important;font-size:14px;line-height:1.55
}
main.np-page.np-detail .np-custom-grid{gap:18px}
main.np-page.np-detail .np-custom-grid .np-custom-card{
  border:1px solid #e6e8df;border-radius:12px;overflow:hidden;background:#fff
}
main.np-page.np-detail .np-custom-grid .np-custom-card img{
  width:100%;aspect-ratio:1.75;object-fit:cover;display:block
}
main.np-page.np-detail .np-custom-grid .np-custom-card h3{
  color:#213d30!important;font-size:16px!important;margin:16px 16px 8px!important
}
main.np-page.np-detail .np-custom-grid .np-custom-card p{
  color:#647268;font-size:13px;line-height:1.6;margin:0 16px 18px
}
@media(max-width:1239px){
  main.zzpd-page .zzpd-hero{width:100%!important;max-width:100%!important;gap:25px!important}
  main.zzpd-page .zzpd-gallery,main.zzpd-page .zzpd-main-wrap,
  main.zzpd-page .zzpd-summary{min-width:0!important;max-width:none!important}
}
@media(max-width:899px){
  main.zzpd-page .zzpd-hero,main.np-page.np-detail .np-detail-hero{
    grid-template-columns:1fr!important;gap:22px!important;align-items:start!important
  }
  main.zzpd-page .zzpd-gallery{display:flex!important;flex-direction:column!important;width:100%!important}
  main.zzpd-page .zzpd-main-wrap{order:1!important;width:100%!important}
  main.zzpd-page .zzpd-main-image{
    width:100%!important;height:auto!important;min-height:0!important;
    aspect-ratio:1/1!important
  }
  main.zzpd-page .zzpd-thumbs{
    order:2!important;display:flex!important;flex-direction:row!important;
    width:100%!important;overflow-x:auto!important;overflow-y:hidden!important
  }
  main.zzpd-page .zzpd-summary{width:100%!important}
  main.np-page.np-detail .np-overview{grid-template-columns:1fr;gap:25px}
}
@media(max-width:600px){
  main.zzpd-page .zzpd-summary h1,main.np-page.np-detail .np-detail-summary h1{
    font-size:clamp(27px,7.6vw,34px)!important
  }
  main.zzpd-page .zzpd-purchase-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  main.zzpd-page .zzpd-purchase-fact{padding:11px 10px}
  main.zzpd-page .zzpd-purchase-fact strong{font-size:14px}
  main.zzpd-page .zzpd-description-card,main.zzpd-page .zzpd-product-spec-card,
  main.zzpd-page .zzpd-service-card,main.zzpd-page .zzpd-faq-card,
  main.zzpd-page .zzpd-related-card{border-radius:11px!important}
  main.zzpd-page .zzpd-spec-table-head,main.zzpd-page .zzpd-spec-table-row{
    grid-template-columns:minmax(115px,.38fr) minmax(0,1fr)!important
  }
  main.zzpd-page .zzpd-spec-table-head span,main.zzpd-page .zzpd-spec-table-head strong,
  main.zzpd-page .zzpd-spec-table-row span,main.zzpd-page .zzpd-spec-table-row strong{
    padding:11px 10px!important;font-size:13px!important
  }
  main.np-page.np-detail .np-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  main.np-page.np-detail .np-detail-tabs{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start}
  main.np-page.np-detail .np-detail-tabs a{white-space:nowrap;flex:none;padding:10px 12px}
  main.np-page.np-detail .np-custom-grid{grid-template-columns:1fr;gap:12px}
}
@media(prefers-reduced-motion:reduce){
  main.zzpd-page *,main.np-page.np-detail *{scroll-behavior:auto!important}
}

/* V1.1 — product-detail CTA hierarchy and accessible contrast.
   The secondary sample action is inserted by approved-design.js.
   Keep both existing data-zzquote-open handlers and contexts. */
body[data-zp-design="public"] main.zzpd-page .zzpd-actions{
  display:flex!important;flex-direction:row!important;align-items:stretch!important;
  flex-wrap:nowrap!important;gap:12px!important;
  width:100%!important;max-width:520px!important;
  margin-top:19px!important
}
body[data-zp-design="public"] main.zzpd-page .zzpd-actions .zzpd-btn{
  width:auto!important;min-width:0!important;min-height:50px!important;
  height:auto!important;max-width:none!important;flex:1 1 0!important;
  padding:12px 14px!important;border-radius:10px!important;
  font:700 14px/1.35 Arial,Helvetica,sans-serif!important;
  text-decoration:none!important;white-space:normal!important;
  box-shadow:none!important;text-align:center!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important
}
body[data-zp-design="public"] main.zzpd-page .zzpd-actions .zzpd-btn-primary{
  background:#214b37!important;border:1px solid #214b37!important;
  color:#fff!important
}
body[data-zp-design="public"] main.zzpd-page .zzpd-actions .zzpd-btn-primary>span{
  color:#fff!important
}
body[data-zp-design="public"] main.zzpd-page .zzpd-actions .zzpd-btn-primary .zzpd-wa-icon{
  display:none!important
}
body[data-zp-design="public"] main.zzpd-page .zzpd-actions .zzpd-btn-primary:hover{
  background:#306749!important;border-color:#306749!important;color:#fff!important
}
body[data-zp-design="public"] main.zzpd-page .zzpd-actions .ap-samples{
  background:#fff!important;border:1px solid #8da797!important;
  color:#26523d!important
}
body[data-zp-design="public"] main.zzpd-page .zzpd-actions .ap-samples:hover{
  background:#f0f6f1!important;border-color:#265b40!important;
  color:#204935!important
}
body[data-zp-design="public"] main.zzpd-page .zzpd-actions .zzpd-btn:focus-visible{
  outline:3px solid #dc9a65!important;outline-offset:3px!important
}
@media(max-width:1100px){
  body[data-zp-design="public"] main.zzpd-page .zzpd-actions{
    flex-direction:column!important;max-width:100%!important;gap:10px!important
  }
  body[data-zp-design="public"] main.zzpd-page .zzpd-actions .zzpd-btn{
    width:100%!important;flex:0 0 auto!important;min-height:47px!important
  }
}

/* V1.2 — Fix Model / Color value wrapping in icon-free specification facts.
 * approved-design.js adds .ap-spec-fact with only one text div.
 * The base .zzpd-fact icon+value grid otherwise confines that div to 30px.
 */
body[data-zp-design="public"] main.zzpd-page .zzpd-top-facts .zzpd-fact.ap-spec-fact{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:center!important;
  min-width:0!important;
  min-height:0!important;
}
body[data-zp-design="public"] main.zzpd-page .zzpd-top-facts .zzpd-fact.ap-spec-fact>div{
  display:block!important;
  width:100%!important;
  min-width:0!important;
}
body[data-zp-design="public"] main.zzpd-page .zzpd-top-facts .zzpd-fact.ap-spec-fact strong{
  display:block!important;
  width:100%!important;
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:break-word!important;
  line-height:1.5!important;
}