.product-detail-page { color: #0a2e63; overflow-x: hidden; }
.product-detail-page .detail-hero { min-height: 540px; color: #fff; background: #0c3975 url('../images/square-wave-hero-compressed.webp') center/cover no-repeat; }
.detail-hero-inner { position: relative; min-height: 540px; padding-top: 100.08px; }
.detail-breadcrumb { display: flex; align-items: center; gap: 13px; color: rgba(255,255,255,.68); font-size: 11px; letter-spacing: .4px; }
.detail-breadcrumb strong { color: #fff; }
.detail-hero-copy { margin-top: 23.52px; }
.detail-hero-copy h1 { width: 427px; margin: 0; font-size: 54px; font-weight: 800; line-height: 60px; letter-spacing: -2.4px; }
.detail-hero-copy > span { display: block; width: 312px; margin-top: 15px; padding-top: 20px; border-top: 6px solid #ffc727; color: #ffc727; font-size: 32px; font-weight: 700; line-height: 32px; }
.detail-hero-copy .wise-choice { width: 220px; height: auto; margin-top: 86px; object-fit: contain; object-position: left center; }
.detail-hero-inner > img:not(.wise-choice) { position: absolute; right: -58px; bottom: 50px; width: 61%; max-width: 780px; object-fit: contain; filter: drop-shadow(0 24px 22px rgba(0,0,0,.28)); }

@media (min-width: 1024px) {
  .product-detail-page .detail-hero-inner {
    padding-top: 152px !important;
    transform: none;
  }
  .product-detail-page .detail-hero-copy {
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: 0;
    transform: translateY(-50%);
  }
}
.product-header { border-bottom: 1px solid rgba(255,255,255,.16); }
.product-header > .wrap > a:first-child img { height: 58px; width: 110px; object-fit: contain; }

.product-summary { padding: 44.8px 0; background: #f6f7fb; }
.summary-grid { display: grid; grid-template-columns: 470px 360px 360px; align-items: center; gap: 31px; }
.summary-grid h2, .detail-heading h2 { margin: 15px 0 20px; color: #0a2e63; font-size: 38px; font-weight: 800; line-height: 1.08; letter-spacing: -1.3px; }
.summary-grid > div:first-child > p { max-width: 565px; margin: 0; color: #56647b; font-size: 14px; line-height: 1.9; }
.summary-stat { position: relative; display: flex; width: 360px; min-height: 240px; align-items: flex-start; gap: 9px; padding: 25px 20px; overflow: hidden; border: 1px solid #dfdfdf; border-radius: 20px; background: #fff; box-shadow: 0 0 16px 5px rgba(0,0,0,.05); }
.summary-stat::after { position: absolute; right: 0; bottom: 0; left: 0; height: 120px; content: ''; background: url('../images/stat-card-pattern-compressed.webp') center bottom/360px 120px no-repeat; opacity: .5; pointer-events: none; }
.summary-stat:nth-child(3) { margin-left: 19px; }
.summary-stat > img { position: relative; z-index: 1; width: 121px; height: 122px; flex: 0 0 121px; object-fit: contain; }
.summary-stat p { position: relative; z-index: 1; margin: 20px 0 0; color: #db5b13; font-size: 20px; font-weight: 700; line-height: 20px; }
.summary-stat strong { display: block; margin-top: 20px; color: #000; font-size: 32px; font-weight: 800; line-height: 40px; }

.difference { padding: 44.8px 0; background: #fff; }
.detail-heading { text-align: center; }
.detail-heading > span { display: inline-flex; align-items: center; gap: 12px; color: #e15c13; font-size: 12px; font-weight: 700; letter-spacing: 2.64px; text-transform: uppercase; }
.detail-heading > span::before { width: 28px; height: 1px; content: ''; background: currentColor; }
.detail-heading h2 { margin: 20px 0 0; font-size: 42px; line-height: 50px; letter-spacing: -.42px; }
.group-title { display: flex; height: 95px; align-items: flex-start; gap: 20px; margin: 22.4px 0 16.8px; padding-bottom: 30px; border-bottom: 1px solid #dfdfdf; }
.group-title.second { margin-top: 22.4px; }
.group-title > img { width: 64px; height: 64px; flex: 0 0 64px; object-fit: contain; }
.group-title span { display: flex; flex-direction: column; padding-top: 7px; }
.group-title strong { color: #0a2e63; font-size: 28px; font-weight: 800; line-height: 28px; letter-spacing: -.42px; }
.group-title em { margin-top: 6px; color: #db5b13; font-size: 14px; font-style: normal; font-weight: 700; line-height: 20px; }
.feature-grid { display: grid; grid-template-columns: repeat(3,400px); gap: 35px; }
.feature-grid article { position: relative; width: 400px; min-height: 362px; padding: 30px; overflow: hidden; border: 1px solid #dfdfdf; border-radius: 12px; background: #f6f7fb; }
.feature-grid article::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 14px; content: ''; border-radius: 0 0 16px 16px; background: #db5b13; }
.feature-grid img { width: 62px; height: 62px; padding: 12px 13px; border-radius: 50%; background: #fff; object-fit: contain; }
.feature-grid h4 { width: 100%; margin: 30px 0 20px; font-size: 22px; font-weight: 800; line-height: 28px; letter-spacing: .2px; }
.feature-grid p { margin: 0; color: #4c5a72; font-size: 14px; line-height: 22px; }

.benefits { height: auto; padding: 44.8px 0; color: #fff; background: #0e3874; }
.detail-heading.light > span { color: #ffc727; }
.detail-heading.light h2 { color: #fff; }
.benefit-grid { display: flex; gap: 30px; margin-top: 22.4px; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; scrollbar-width: none; }
.benefit-grid::-webkit-scrollbar { display: none; }
.benefit-grid article { display: flex; width: 295px; height: 244px; flex: 0 0 295px; flex-direction: column; align-items: center; padding: 30px; border: 1px solid #dfdfdf; border-radius: 16px; color: #0a2e63; background: #f6f7fb; box-shadow: 0 0 16px 5px rgba(0,0,0,.05); }
.benefit-grid article > span { position: relative; display: grid; width: 96px; height: 96px; flex: 0 0 96px; place-items: center; background: url('../images/benefit-icon-circle.svg') center/contain no-repeat; }
.benefit-grid article > span img { width: 54px; height: 54px; object-fit: contain; }
.benefit-grid p { width: 235px; margin: 36px 0 0; font-size: 18px; font-weight: 800; line-height: 24px; letter-spacing: .2px; text-align: center; }
.benefit-controls { display: grid; height: 42px; grid-template-columns: 1fr auto 1fr; align-items: center; margin-top: 22.4px; }
.benefit-count { display: flex; min-width: max-content; flex-wrap: nowrap; align-items: center; gap: 7px; letter-spacing: .96px; white-space: nowrap; }
.benefit-count strong { color: #fff; font-size: 15px; font-weight: 800; }
.benefit-count span { color: #c2cad5; font-size: 12px; font-weight: 500; }
.benefit-pagination { display: flex; gap: 8px; }
.benefit-pagination i { display: block; width: 26px; height: 2px; background: rgba(255,255,255,.35); }
.benefit-pagination i.active { background: #ffd966; }
.benefit-arrows { display: flex; justify-content: flex-end; gap: 10px; }
.benefit-arrows button { display: grid; width: 42px; height: 42px; cursor: pointer; place-items: center; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; }
.benefit-arrows img { width: 15px; height: 15px; }

.perfect-fit { padding: 53.76px 0 59.36px; text-align: center; background: #f5f6f9; }
.perfect-fit h2 { margin: 0 0 25.2px; font-size: 38px; font-weight: 800; }
.fit-grid { display: grid; max-width: 900px; grid-template-columns: repeat(4,1fr); gap: 30px; margin: auto; }
.fit-grid article { display: flex; min-height: 230px; flex-direction: column; align-items: center; justify-content: center; padding: 30px 20px; border-radius: 8px; color: #fff; background: #0d3976; box-shadow: 0 16px 28px rgba(13,57,118,.15); }
.fit-grid img { width: 82px; height: 82px; object-fit: contain; }
.fit-grid p { margin: 25px 0 0; font-size: 14px; font-weight: 700; }

.downloads { height: auto; padding: 44.8px 0; background: #fff; }
.downloads-inner { width: min(940px,calc(100% - 40px)); margin-inline: auto; padding-inline: 20px; }
.download-grid { display: grid; width: 100%; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: start; gap: 20px; margin-top: 22.4px; }
.download-grid a { display: flex; min-width: 200px; min-height: 103px; align-items: center; gap: 20px; padding: 30px 27px 25px; overflow: hidden; border: 1px solid #dfdfdf; border-radius: 10px; background: #fff; transition: border-color .2s,background .2s,box-shadow .2s; }
.download-grid a:hover { border-color: #d04511; background: #fef9f6; box-shadow: 0 0 16px 5px rgba(0,0,0,.05); }
.download-grid a:nth-child(2),.download-grid a:nth-child(3) { min-height: 113px; }
.download-grid b { display: grid; width: 46px; height: 46px; flex: 0 0 46px; place-items: center; border-radius: 8px; background: #e2e9f4; }
.download-grid b img { width: 14px; height: 17px; object-fit: contain; }
.download-grid p { margin: 0; }
.download-grid strong,.download-grid span { display: block; }
.download-grid strong { color: #0a2e63; font-size: 16px; font-weight: 800; line-height: 14px; letter-spacing: .2px; white-space: nowrap; }
.download-grid span { margin-top: 10px; color: #4c5a72; font-size: 12px; line-height: 16px; white-space: nowrap; }

.detail-faq { min-height: auto; padding: 44.8px 0 56px; background: #e7eef6; }
.detail-faq-list { max-width: 940px; margin: 15px auto 0; }
.detail-faq details { margin-bottom: 15px; overflow: hidden; border: 1px solid #dfdfdf; border-radius: 8px; background: #fff; }
.detail-faq summary { position: relative; min-height: 59px; padding: 16px 64px 16px 25px; cursor: pointer; list-style: none; color: #0a2e63; font-size: 14px; font-weight: 600; line-height: 20px; letter-spacing: .2px; }
.detail-faq summary::-webkit-details-marker { display: none; }
.detail-faq summary::after { position: absolute; top: 16px; right: 25px; width: 27px; height: 27px; content: ''; background: url('../images/faq-plus.svg') center/contain no-repeat; }
.detail-faq details[open] summary { min-height: 36px; padding-bottom: 0; }
.detail-faq details[open] summary::after { background-image: url('../images/faq-minus.svg'); }
.detail-faq details p { margin: 10px 64px 16px 25px; color: #0a2e63; font-size: 14px; line-height: 20px; }

/* Keep every product detail page on the Sino Series spacing rhythm. */
@media (min-width: 1200px) {
  .product-detail-page .product-summary {
    min-height: 0 !important;
    padding-top: 44.8px !important;
    padding-bottom: 44.8px !important;
  }
  .product-detail-page .summary-grid h2 {
    margin-top: 30px !important;
    margin-bottom: 20px !important;
  }
  .product-detail-page .summary-grid h3 { margin-bottom: 20px !important; }
  .product-detail-page .difference {
    min-height: 0 !important;
    padding-top: 44.8px !important;
    padding-bottom: 44.8px !important;
  }
  .product-detail-page .group-title {
    margin-top: 22.4px !important;
    margin-bottom: 16.8px !important;
  }
  .product-detail-page .group-title.second { margin-top: 22.4px !important; }
  .product-detail-page .benefits {
    height: auto !important;
    padding-top: 44.8px !important;
    padding-bottom: 44.8px !important;
  }
  .product-detail-page .benefit-grid { margin-top: 22.4px !important; }
  .product-detail-page .benefit-controls { margin-top: 22.4px !important; }
  .product-detail-page .perfect-fit {
    min-height: 0 !important;
    padding-top: 44.8px !important;
    padding-bottom: 44.8px !important;
  }
  .product-detail-page .perfect-fit h2 { margin-bottom: 40.32px !important; }
  .product-detail-page .downloads {
    min-height: 0 !important;
    height: auto !important;
    padding-top: 44.8px !important;
    padding-bottom: 44.8px !important;
  }
  .product-detail-page .download-grid { margin-top: 22.4px !important; }
  .product-detail-page .detail-faq {
    min-height: 0 !important;
    padding-top: 44.8px !important;
    padding-bottom: 56px !important;
  }
}

@media (max-width: 767px) {
  .product-detail-page .product-summary,
  .product-detail-page .difference,
  .product-detail-page .benefits,
  .product-detail-page .perfect-fit,
  .product-detail-page .downloads,
  .product-detail-page .detail-faq {
    min-height: 0 !important;
    height: auto !important;
    padding-top: 22.4px !important;
    padding-bottom: 22.4px !important;
  }
  .product-detail-page .summary-grid { gap: 40px !important; }
  .product-detail-page .summary-grid h2 { margin: 20px 0 !important; }
  .product-detail-page .summary-stat {
    min-height: 201px !important;
    padding: 20px !important;
    gap: 10px !important;
  }
  .product-detail-page .detail-heading h2 { margin-top: 20px !important; }
  .product-detail-page .group-title {
    height: auto !important;
    min-height: 95px !important;
    gap: 20px !important;
    margin: 22.4px 0 16.8px !important;
    padding-bottom: 30px !important;
  }
  .product-detail-page .feature-grid { gap: 35px !important; }
  .product-detail-page .feature-grid article {
    min-height: 362px !important;
    padding: 30px 30px 40px !important;
  }
  .product-detail-page .feature-grid h4 { margin-top: 30px !important; }
  .product-detail-page .benefit-grid {
    gap: 30px !important;
    margin-top: 22.4px !important;
  }
  .product-detail-page .benefit-grid article {
    width: 295px !important;
    height: 244px !important;
    flex-basis: 295px !important;
    padding: 30px !important;
  }
  .product-detail-page .benefit-controls { margin-top: 22.4px !important; }
  .product-detail-page .perfect-fit h2 { margin-bottom: 16.8px !important; }
  .product-detail-page .fit-grid {
    display: flex !important;
    width: 100% !important;
    max-width: none !important;
    grid-template-columns: none !important;
    justify-content: flex-start !important;
    gap: 20px !important;
    margin-left: 0 !important;
    padding: 0 0 16px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-padding-left: 0;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .product-detail-page .fit-grid::-webkit-scrollbar { display: none; }
  .product-detail-page .fit-grid article {
    width: 195px !important;
    height: 233px !important;
    min-height: 233px !important;
    flex: 0 0 195px !important;
    justify-content: flex-start !important;
    padding: 30px 15px !important;
    scroll-snap-align: start;
  }
  .product-detail-page .fit-grid img { width: 96px !important; height: 96px !important; object-fit: contain; }
  .product-detail-page .fit-grid p { margin-top: 34px !important; font-size: 18px; line-height: 24px; }
  .product-detail-page .download-grid {
    gap: 20px !important;
    margin-top: 16.8px !important;
  }
  .product-detail-page .download-grid a { padding: 30px 20px 25px !important; }
  .product-detail-page .detail-faq-list { margin-top: 15px !important; }
  .product-detail-page .detail-faq summary {
    padding: 16px 64px 16px 25px !important;
    line-height: 20px !important;
  }
}

@media (max-width: 1023px) {
  .product-detail-page .detail-hero { min-height: 600px; }
  .detail-hero-inner { min-height: 600px; padding-top: 86px; }
  .detail-hero-copy { margin-top: 31.36px; }
  .detail-hero-inner > img:not(.wise-choice) { right: -11%; bottom: 70px; width: 65%; }
  .summary-grid { grid-template-columns: 1fr 1fr; }
  .summary-grid > div:first-child { grid-column: 1/-1; }
  .summary-stat { width: 100%; }
  .summary-stat:nth-child(3) { margin-left: 0; }
  .feature-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
  .feature-grid article { width: 100%; padding: 28px 22px; }
}

@media (max-width: 767px) {
  .product-detail-page .detail-hero,.detail-hero-inner { min-height: 650px; }
  .product-detail-page .detail-hero { background-position: 43% center; }
  .detail-hero-inner { padding-top: 83.2px; }
  .detail-breadcrumb { overflow: hidden; white-space: nowrap; font-size: 9px; }
  .detail-hero-copy { margin-top: 26.88px; }
  .detail-hero-copy h1 { width: 330px; font-size: 42px; line-height: 43px; letter-spacing: -2px; }
  .detail-hero-copy > span { width: 235px; margin-top: 14px; padding-top: 16px; border-top-width: 5px; font-size: 22px; line-height: 24px; }
  .detail-hero-copy .wise-choice { width: 190px; height: auto; margin-top: 56px; }
  .detail-hero-inner > img:not(.wise-choice) { right: -28%; bottom: 82px; width: 105%; max-width: 560px; }
  .product-summary,.difference,.detail-faq { padding: 35.84px 0; }
  .summary-grid { grid-template-columns: 1fr; gap: 14px; }
  .summary-grid h2,.detail-heading h2,.perfect-fit h2 { font-size: 29px; }
  .summary-stat { width: 100%; min-height: 190px; padding: 20px 16px; }
  .summary-stat > img { width: 92px; height: 93px; flex-basis: 92px; }
  .summary-stat p { margin-top: 15px; font-size: 16px; }
  .summary-stat strong { margin-top: 13px; font-size: 23px; line-height: 29px; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-grid article { min-height: 0; padding: 34px 28px 38px; }
  .group-title { height: 84px; gap: 15px; margin-top: 21.28px; padding-bottom: 20px; }
  .group-title > img { width: 54px; height: 54px; flex-basis: 54px; }
  .group-title span { padding-top: 4px; }
  .group-title strong { font-size: 20px; line-height: 24px; }
  .group-title em { margin-top: 3px; font-size: 12px; }
  .benefits { height: auto; padding: 33.6px 0; }
  .benefit-grid { gap: 16px; margin-top: 17.92px; }
  .benefit-grid article { width: 250px; height: 220px; flex-basis: 250px; padding: 24px; }
  .benefit-grid article > span { width: 82px; height: 82px; flex-basis: 82px; }
  .benefit-grid article > span img { width: 46px; height: 46px; }
  .benefit-grid p { width: 205px; margin-top: 28px; font-size: 16px; line-height: 22px; }
  .benefit-controls { grid-template-columns: 1fr auto; margin-top: 16.8px; }
  .benefit-pagination { display: none; }
  .perfect-fit { padding: 36.4px 0 42px; }
  .fit-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .fit-grid article { min-height: 175px; padding: 22px 12px; }
  .fit-grid img { width: 62px; height: 62px; }
  .fit-grid p { margin-top: 18px; font-size: 12px; }
  .downloads { height: auto; padding: 35.84px 0; }
  .downloads-inner { padding-inline: 0; }
  .download-grid { grid-template-columns: 1fr; margin-top: 19.04px; }
  .download-grid a { width: 100%; min-width: 0; }
  .detail-faq { min-height: 0; }
  .detail-faq-list { margin-top: 20px; }
  .detail-faq summary { padding: 18px 48px 18px 18px; line-height: 1.55; }
}