.suneng-related-products { padding: 64px 0 80px; background: #fff; color: #171717; }
.suneng-related-products-inner { width: min(1680px, 87.5%); margin-inline: auto; }
main .suneng-related-products h2 { margin: 0 0 32px; color: #171717; text-align: center; font: 600 clamp(28px, 2.5vw, 40px)/1.25 Poppins, "Segoe UI", sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; }
main .suneng-related-products-note { max-width: 80ch; margin: -12px auto 32px; color: #526777; text-align: center; font-size: 15px !important; line-height: 1.65 !important; }
.suneng-related-products-rail { --product-columns: 4; --product-gap: 24px; display: flex; gap: var(--product-gap); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; padding-block: 4px; }
.suneng-related-products-rail::-webkit-scrollbar { display: none; }
.suneng-related-products-rail.is-contained { justify-content: center; }
.suneng-related-product { display: flex; flex: 0 0 calc((100% - (var(--product-columns) - 1) * var(--product-gap)) / var(--product-columns)); min-width: 0; flex-direction: column; align-items: flex-start; color: #171717; text-decoration: none; background: transparent; scroll-snap-align: start; }
.suneng-related-product-media { display: block; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 8px; background: #fff; }
.suneng-related-product-media img { display: block; width: 100%; height: 100%; max-width: 100%; margin: 0; padding: 0; object-fit: contain; object-position: center; background: transparent; mix-blend-mode: normal; filter: none; }
main .suneng-related-product h3 { width: 100%; margin: 20px 0 16px; color: #171717; font: 500 20px/1.4 Poppins, "Segoe UI", sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; min-height: 2.8em; overflow: hidden; }
.suneng-related-product-explore { display: inline-flex; align-items: center; min-height: 44px; color: #082f5c; font: 600 14px/1.4 Poppins, "Segoe UI", sans-serif; text-transform: uppercase; }
.suneng-related-product:hover .suneng-related-product-explore { color: #005e9e; text-decoration: underline; text-underline-offset: 4px; }
.suneng-related-product:focus-visible,.suneng-related-products-rail:focus-visible { outline: 2px solid #087fc2; outline-offset: -2px; }
.suneng-related-products-progress { --product-thumb-width: 25%; display: block; width: 87.5%; height: 28px; margin: 28px auto 0; padding: 0; border: 0; border-radius: 0; appearance: none; background: transparent; cursor: pointer; }
.suneng-related-products-progress[hidden] { display: none; }
.suneng-related-products-progress::-webkit-slider-runnable-track { height: 4px; background: #d9d9d9; border-radius: 2px; }
.suneng-related-products-progress::-webkit-slider-thumb { appearance: none; width: var(--product-thumb-width); height: 4px; background: #087fc2; border-radius: 2px; }
.suneng-related-products-progress::-moz-range-track { height: 4px; background: #d9d9d9; border-radius: 2px; }
.suneng-related-products-progress::-moz-range-thumb { width: var(--product-thumb-width); height: 4px; border: 0; background: #087fc2; border-radius: 2px; }
.suneng-related-products-progress:focus-visible { outline: 2px solid #087fc2; outline-offset: 4px; }
@media (max-width: 1023px) {
  .suneng-related-products-rail { --product-columns: 3; }
}
@media (max-width: 767px) {
  .suneng-related-products { padding-block: 48px 56px; }
  .suneng-related-products-inner { width: calc(100% - 36px); }
  .suneng-related-products-rail { --product-columns: 2; --product-gap: 20px; }
  main .suneng-related-product h3 { font-size: 18px !important; }
}
@media (max-width: 575px) {
  .suneng-related-products-rail { --product-columns: 1.2; --product-gap: 12px; }
  .suneng-related-product:only-child { flex-basis: 100%; }
  main .suneng-related-products h2 { margin-bottom: 24px; }
  main .suneng-related-product h3 { font-size: 18px !important; margin-block: 16px 8px; }
  .suneng-related-products-progress { margin-top: 20px; }
}
