.sunsync-product-detail-page {
  --pd-green: #3f5138;
  --pd-green-dark: #263626;
  --pd-text: #111613;
  --pd-muted: #5e665f;
  --pd-line: #dfe3de;
  --pd-paper: #fff;
  --pd-soft: #f5f6f3;
  --pd-anchor-offset: 158px;
  background: var(--pd-paper);
  color: var(--pd-text);
}

.pd-page,
.pd-page * { box-sizing: border-box; }
.pd-page { overflow: clip; background: #fff; font-family: var(--font-body, Inter, Arial, sans-serif); }
.pd-shell { width: min(1320px, calc(100% - 64px)); margin-inline: auto; }
.pd-page figure,
.pd-page dl,
.pd-page ol,
.pd-page ul,
.pd-page p,
.pd-page h1,
.pd-page h2,
.pd-page h3 { margin: 0; }
.pd-page img { max-width: 100%; }
.pd-page a { color: inherit; }
.pd-page h1,
.pd-page h2,
.pd-page h3 { text-transform: none !important; }
.pd-page #overview,
.pd-page #construction,
.pd-page #materials,
.pd-page #customization,
.pd-page #size-fit,
.pd-page #development,
.pd-page #faq,
.pd-page #inquiry { scroll-margin-top: var(--pd-anchor-offset); }
.pd-breadcrumb { min-height: 48px; display: flex; align-items: center; gap: 11px; overflow: hidden; color: #7a817c; font-size: 11px; white-space: nowrap; }
.pd-breadcrumb a { text-decoration: none; }
.pd-breadcrumb strong { color: #4f5651; font-weight: 600; }

.pd-hero { display: grid; grid-template-columns: minmax(0,44fr) minmax(0,56fr); gap: 42px; padding: 8px 0 34px; }
.pd-gallery { min-width: 0; display: grid; grid-template-columns: 76px minmax(0,1fr); gap: 16px; }
.pd-thumbnails { display: flex; flex-direction: column; gap: 10px; }
.pd-thumb { width: 76px; aspect-ratio: 1; border: 1px solid transparent; padding: 0; overflow: hidden; background: #f3f5f2; cursor: pointer; transition: border-color 160ms ease, opacity 160ms ease; }
.pd-thumb:hover,
.pd-thumb:focus-visible,
.pd-thumb.is-active { border-color: var(--pd-green); outline: none; }
.pd-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; }
.pd-primary-image { position: relative; min-height: 0; aspect-ratio: 1 / 1.02; overflow: hidden; background: #f1f3f1; }
.pd-primary-image > img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; transition: opacity 120ms ease; }
.pd-zoom { position: absolute; right: 14px; bottom: 14px; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 50%; padding: 0; color: #1f2922; background: rgba(255,255,255,.92); box-shadow: 0 2px 10px rgba(0,0,0,.1); cursor: pointer; }
.pd-zoom:focus-visible { outline: 2px solid var(--pd-green); outline-offset: 2px; }

.pd-hero-info { min-width: 0; padding: 18px 8px 0 0; }
.pd-eyebrow,
.pd-kicker { margin-bottom: 12px; color: var(--pd-green); font-size: 10px; font-weight: 700; letter-spacing: .08em; line-height: 1.3; text-transform: uppercase; }
.pd-hero-info h1 { max-width: 720px; margin-bottom: 8px; font-family: var(--font-display, Manrope, Arial, sans-serif); font-size: clamp(34px, 3.05vw, 47px); font-weight: 750; letter-spacing: -.035em; line-height: .98; }
.pd-sku { margin-bottom: 14px; color: #333b36; font-size: 13px; }
.pd-intro { max-width: 650px; margin-bottom: 20px; color: #303833; font-size: 14px; line-height: 1.45; }
.pd-snapshot { border-top: 1px solid var(--pd-line); }
.pd-snapshot div { min-height: 36px; display: grid; grid-template-columns: 38% 62%; align-items: center; border-bottom: 1px solid var(--pd-line); padding: 5px 10px; font-size: 12px; }
.pd-snapshot dt { font-weight: 700; }
.pd-snapshot dd { margin: 0; color: #28302b; }
.pd-commercial { display: grid; grid-template-columns: .8fr 1fr 1.15fr; gap: 16px; padding: 22px 0 18px; }
.pd-commercial > div { min-width: 0; display: grid; grid-template-columns: 30px minmax(0,1fr); align-items: start; gap: 8px; color: #4d554f; font-size: 10px; line-height: 1.3; }
.pd-commercial i { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid #8b948d; border-radius: 50%; color: var(--pd-green); font-size: 13px; }
.pd-commercial span,
.pd-commercial strong,
.pd-commercial small { display: block; }
.pd-commercial strong { margin-top: 3px; color: #111613; font-size: 11px; font-weight: 650; }
.pd-commercial small { margin-top: 4px; color: #434b45; font-size: 9px; }
.pd-hero-actions { display: flex; align-items: center; gap: 22px; }
.pd-button { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 2px; padding: 0 28px; font-size: 11px; font-weight: 750; letter-spacing: .02em; text-transform: uppercase; text-decoration: none; cursor: pointer; }
.pd-button-primary { color: #fff !important; background: var(--pd-green); }
.pd-button-primary:hover,
.pd-button-primary:focus-visible { background: var(--pd-green-dark); outline: 2px solid rgba(63,81,56,.28); outline-offset: 2px; }
.pd-button-link { min-height: 32px; padding: 0; border-bottom-color: #303a32; color: #1f2721; background: transparent; }
.pd-button-link i { margin-right: 8px; }

.pd-section-nav { position: sticky; top: 100px; z-index: 900; min-height: 42px; color: #fff; background: var(--pd-green-dark); box-shadow: 0 2px 0 rgba(0,0,0,.05); }
.pd-section-nav .pd-shell { min-height: 42px; display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); }
.pd-section-nav a { display: flex; align-items: center; justify-content: center; border-bottom: 2px solid transparent; color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .03em; text-decoration: none; text-transform: uppercase; }
.pd-section-nav a:hover,
.pd-section-nav a:focus-visible,
.pd-section-nav a.is-active { border-bottom-color: #fff; background: rgba(255,255,255,.08); outline: none; }
.pd-section { border-bottom: 1px solid #edf0ec; padding: 30px 0; }

.pd-engineering { background: #fff; }
.pd-engineering-grid { display: grid; grid-template-columns: 31% 69%; gap: 38px; }
.pd-section-lead { padding-right: 28px; }
.pd-section-lead h2,
.pd-process-title h2,
.pd-inquiry h2 { margin-bottom: 14px; font-family: var(--font-display, Manrope, Arial, sans-serif); font-size: 30px; font-weight: 720; letter-spacing: -.03em; line-height: 1.03; }
.pd-section-lead > p:last-child { margin-bottom: 0; color: #454d47; font-size: 12px; line-height: 1.45; }
.pd-spec-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border-top: 1px solid var(--pd-line); border-left: 1px solid var(--pd-line); }
.pd-spec-grid div { min-height: 54px; display: grid; grid-template-columns: 34% 66%; align-items: center; border-right: 1px solid var(--pd-line); border-bottom: 1px solid var(--pd-line); padding: 10px 16px; font-size: 11px; }
.pd-spec-grid dt { font-weight: 700; }
.pd-spec-grid dd { margin: 0; color: #343c36; line-height: 1.4; }

.pd-customization { border-bottom: 1px solid #edf0ec; background: #f4f5f2; }
.pd-customization-grid { display: grid; grid-template-columns: 38% 62%; }
.pd-customization figure { min-height: 252px; margin: 0; overflow: hidden; }
.pd-customization figure img { width: 100%; height: 100%; min-height: 252px; display: block; object-fit: cover; object-position: 45% 45%; }
.pd-custom-options { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); }
.pd-custom-options article { min-width: 0; border-left: 1px solid #d0d5cf; padding: 28px 18px 20px; }
.pd-custom-options i { width: 32px; height: 32px; display: grid; place-items: center; margin-bottom: 12px; border: 1px solid #6f786f; border-radius: 50%; color: var(--pd-green); font-size: 14px; }
.pd-custom-options span { display: block; margin-bottom: 2px; color: var(--pd-green); font-size: 20px; font-weight: 500; }
.pd-custom-options h3 { min-height: 38px; margin-bottom: 9px; font-size: 15px; font-weight: 700; line-height: 1.12; }
.pd-custom-options p { margin-bottom: 0; color: #4f5751; font-size: 10px; line-height: 1.42; }

.pd-materials .pd-kicker,
.pd-development .pd-kicker,
.pd-bulk .pd-kicker,
.pd-proof .pd-kicker { margin-bottom: 10px; }
.pd-materials-grid { display: grid; grid-template-columns: 240px minmax(0,1fr); gap: 28px; }
.pd-materials-grid figure { height: 132px; margin: 0; overflow: hidden; background: #edf0ec; }
.pd-materials-grid img { width: 100%; height: 100%; display: block; object-fit: cover; }
.pd-material-table { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-top: 1px solid var(--pd-line); border-left: 1px solid var(--pd-line); }
.pd-material-table div { min-height: 38px; display: grid; grid-template-columns: 45% 55%; align-items: center; border-right: 1px solid var(--pd-line); border-bottom: 1px solid var(--pd-line); padding: 6px 12px; font-size: 10px; }
.pd-material-table dt { font-weight: 700; }
.pd-material-table dd { margin: 0; color: #3d453f; }

.pd-development { background: #f7f8f6; }
.pd-route-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 26px; }
.pd-route-grid.has-stock { grid-template-columns: repeat(4,minmax(0,1fr)); }
.pd-route-grid article { min-height: 150px; border: 1px solid var(--pd-line); border-radius: 3px; padding: 22px 24px; background: #fff; }
.pd-route-grid article.is-stock { border-style: dashed; }
.pd-route-grid span { float: left; margin-right: 18px; color: var(--pd-green); font-size: 21px; font-weight: 650; }
.pd-route-grid h3 { margin-bottom: 8px; font-size: 13px; text-transform: uppercase; }
.pd-route-grid p,
.pd-route-grid ul { margin-bottom: 0; color: #475049; font-size: 10px; line-height: 1.5; }
.pd-route-grid ul { padding-left: 18px; }

.pd-process-row { display: grid; grid-template-columns: 235px minmax(0,1fr) auto; align-items: center; gap: 24px; }
.pd-process-title .pd-kicker { margin-bottom: 5px; }
.pd-process-title h2 { margin-bottom: 0; font-size: 24px; }
.pd-fit-flow { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); margin: 0; padding: 0; list-style: none; }
.pd-fit-flow li { position: relative; display: grid; justify-items: center; gap: 8px; padding: 0 12px; text-align: center; }
.pd-fit-flow li:not(:last-child)::after { content: ""; position: absolute; top: 17px; right: -15%; width: 30%; border-top: 1px solid #9aa29b; }
.pd-fit-flow i { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #798279; border-radius: 50%; color: var(--pd-green); font-size: 14px; }
.pd-fit-flow span { font-size: 9px; line-height: 1.25; }
.pd-outline-button { min-height: 34px; display: inline-flex; align-items: center; border: 1px solid #8c958e; padding: 0 16px; font-size: 9px; text-decoration: none; text-transform: uppercase; }

.pd-bulk { background: #f7f8f6; }
.pd-bulk-flow { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); margin: 0; border: 1px solid var(--pd-line); padding: 0; list-style: none; background: #fff; }
.pd-bulk-flow li { position: relative; min-height: 120px; border-right: 1px solid var(--pd-line); padding: 19px 20px; }
.pd-bulk-flow li:last-child { border-right: 0; }
.pd-bulk-flow span { color: #69716b; font-size: 17px; }
.pd-bulk-flow h3 { margin: 8px 0; font-size: 10px; text-transform: uppercase; }
.pd-bulk-flow p { margin-bottom: 0; color: #4d554f; font-size: 9px; line-height: 1.45; }

.pd-proof-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 24px; }
.pd-proof figure { margin: 0; text-align: center; }
.pd-proof img { width: 100%; height: 126px; display: block; object-fit: cover; background: #e9ece8; }
.pd-proof figcaption { padding-top: 7px; color: #363e38; font-size: 9px; }

.pd-faq-related-grid { display: grid; grid-template-columns: 39% 61%; gap: 64px; }
.pd-faq-item { border: 1px solid var(--pd-line); border-bottom: 0; }
.pd-faq-item:last-child { border-bottom: 1px solid var(--pd-line); }
.pd-faq-item h3 { margin: 0; }
.pd-faq-item button { width: 100%; min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 0; padding: 8px 14px; color: #252d27; background: #fff; font: 500 10px/1.35 var(--font-body, Inter, Arial, sans-serif); text-align: left; cursor: pointer; }
.pd-faq-item button:hover,
.pd-faq-item button:focus-visible { background: #f4f6f3; outline: none; }
.pd-faq-item div { border-top: 1px solid var(--pd-line); padding: 10px 14px; }
.pd-faq-item div p { margin: 0; color: #4c554e; font-size: 10px; line-height: 1.5; }
.pd-related-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px; }
.pd-related-grid a { min-width: 0; text-align: center; text-decoration: none; }
.pd-related-grid figure { aspect-ratio: .82; margin: 0 0 9px; overflow: hidden; background: #f0f2ef; }
.pd-related-grid img { width: 100%; height: 100%; display: block; object-fit: cover; }
.pd-related-grid strong { display: block; min-height: 28px; font-size: 10px; line-height: 1.3; }
.pd-related-grid span { display: block; color: #6a726c; font-size: 9px; }

.pd-inquiry { border-top: 1px solid #edf0ec; padding: 30px 0; background: #fafbf9; }
.pd-inquiry-grid { display: grid; grid-template-columns: 235px minmax(0,1fr); gap: 52px; }
.pd-inquiry h2 { margin-bottom: 12px; font-size: 28px; }
.pd-inquiry-grid > div > p { color: #4b544d; font-size: 11px; line-height: 1.45; }
.pd-inquiry-grid > div > small { color: #727a74; font-size: 8px; }
.pd-inquiry-form { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 13px 16px; }
.pd-inquiry-form label { min-width: 0; color: #313a33; font-size: 9px; font-weight: 650; }
.pd-inquiry-form input,
.pd-inquiry-form select,
.pd-inquiry-form textarea { width: 100%; min-height: 36px; display: block; margin-top: 5px; border: 1px solid #d5dad5; border-radius: 0; padding: 7px 10px; color: #182019; background: #fff; font: 400 10px/1.35 var(--font-body, Inter, Arial, sans-serif); }
.pd-inquiry-form textarea { min-height: 65px; resize: vertical; }
.pd-inquiry-form input:focus,
.pd-inquiry-form select:focus,
.pd-inquiry-form textarea:focus { border-color: var(--pd-green); outline: 2px solid rgba(63,81,56,.13); outline-offset: 0; }
.pd-inquiry-form .pd-field-wide { grid-column: span 1; }
.pd-inquiry-form input[type="file"] { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.pd-inquiry-form label > span { min-height: 36px; display: block; margin-top: 5px; border: 1px solid #d5dad5; padding: 10px; overflow: hidden; color: #8a928c; background: #fff; text-overflow: ellipsis; white-space: nowrap; }
.pd-inquiry-form .pd-button { grid-column: 4 / 6; align-self: end; }
.pd-inquiry-form .form-state { grid-column: 1 / 4; align-self: center; margin: 0; font-size: 10px; }
.pd-confidential { grid-column: 4 / 6; color: #667069; font-size: 8px; text-align: right; }

.pd-canonical-links { margin-top: 0; }
.pd-canonical-links .vanrd-links-grid { grid-template-columns: repeat(6,minmax(128px,1fr)); gap: clamp(18px,2vw,34px); }
.pd-canonical-links article { min-width: 0; }
.pd-canonical-links h2,
.pd-canonical-links h3,
.pd-canonical-links a { overflow-wrap: normal !important; word-break: normal !important; hyphens: none; }
.pd-related-empty { grid-column: 1 / -1; color: #69716b; font-size: 10px; }
.pd-lightbox { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: 44px; background: rgba(15,20,17,.92); }
.pd-lightbox[hidden] { display: none; }
.pd-lightbox img { max-width: min(1100px, 90vw); max-height: 88vh; object-fit: contain; }
.pd-lightbox button { position: absolute; top: 20px; right: 24px; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; color: #fff; background: transparent; cursor: pointer; }

@media (max-width: 1099px) {
  .sunsync-product-detail-page { --pd-anchor-offset: 150px; }
  .pd-shell { width: min(100% - 40px, 1060px); }
  .pd-hero { gap: 28px; }
  .pd-gallery { grid-template-columns: 62px minmax(0,1fr); }
  .pd-thumb { width: 62px; }
  .pd-hero-info { padding-top: 5px; }
  .pd-commercial { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
  .pd-section-nav { top: 92px; }
  .pd-custom-options article { padding-inline: 12px; }
  .pd-material-table { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .pd-process-row { grid-template-columns: 200px minmax(0,1fr); }
  .pd-outline-button { display: none; }
  .pd-inquiry-form { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .pd-inquiry-form .pd-button { grid-column: 2 / 4; }
  .pd-inquiry-form .form-state { grid-column: 1 / 2; }
  .pd-confidential { grid-column: 2 / 4; }
  .pd-canonical-links .vanrd-links-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (max-width: 767px) {
  .pd-shell { width: calc(100% - 28px); }
  .pd-breadcrumb { min-height: 42px; gap: 7px; font-size: 9px; }
  .pd-breadcrumb span:nth-of-type(n+5) { display: none; }
  .pd-hero { grid-template-columns: 1fr; gap: 22px; padding-bottom: 24px; }
  .pd-gallery { grid-template-columns: 1fr; }
  .pd-primary-image { grid-row: 1; }
  .pd-thumbnails { grid-row: 2; flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; }
  .pd-thumb { flex: 0 0 64px; width: 64px; scroll-snap-align: start; }
  .pd-hero-info { padding: 0; }
  .pd-hero-info h1 { font-size: 34px; }
  .pd-intro { font-size: 13px; }
  .pd-snapshot div { grid-template-columns: 42% 58%; }
  .pd-commercial { grid-template-columns: 1fr; }
  .pd-commercial > div { grid-template-columns: 32px 1fr; }
  .pd-hero-actions { align-items: stretch; flex-direction: column; gap: 10px; }
  .pd-button { width: 100%; }
  .pd-button-link { width: max-content; align-self: center; }
  .pd-section-nav { top: 92px; overflow-x: auto; }
  .pd-section-nav .pd-shell { width: max-content; min-width: 100%; display: flex; }
  .pd-section-nav a { min-width: 112px; padding-inline: 15px; }
  .pd-section { padding: 24px 0; }
  .pd-engineering-grid,
  .pd-customization-grid,
  .pd-materials-grid,
  .pd-faq-related-grid,
  .pd-inquiry-grid { grid-template-columns: 1fr; gap: 24px; }
  .pd-section-lead { padding-right: 0; }
  .pd-section-lead h2 { font-size: 27px; }
  .pd-spec-grid { grid-template-columns: 1fr; }
  .pd-customization figure,
  .pd-customization figure img { min-height: 220px; }
  .pd-custom-options { grid-template-columns: 1fr; }
  .pd-custom-options article { display: grid; grid-template-columns: 38px 42px 1fr; align-items: center; column-gap: 10px; border-top: 1px solid #d0d5cf; border-left: 0; padding: 14px 4px; }
  .pd-custom-options i,
  .pd-custom-options span,
  .pd-custom-options h3,
  .pd-custom-options p { margin: 0; }
  .pd-custom-options h3 { min-height: 0; }
  .pd-custom-options p { grid-column: 3; margin-top: 4px; }
  .pd-materials-grid figure { height: 170px; }
  .pd-material-table { grid-template-columns: 1fr; }
  .pd-route-grid,
  .pd-route-grid.has-stock { grid-template-columns: 1fr; gap: 12px; }
  .pd-route-grid article { min-height: 0; }
  .pd-process-row { grid-template-columns: 1fr; }
  .pd-fit-flow { grid-template-columns: 1fr; gap: 8px; }
  .pd-fit-flow li { grid-template-columns: 40px 1fr; justify-items: start; align-items: center; text-align: left; }
  .pd-fit-flow li:not(:last-child)::after { top: 34px; left: 17px; width: 1px; height: 16px; border-top: 0; border-left: 1px solid #9aa29b; }
  .pd-bulk-flow { grid-template-columns: 1fr; }
  .pd-bulk-flow li { min-height: 0; border-right: 0; border-bottom: 1px solid var(--pd-line); }
  .pd-bulk-flow li:last-child { border-bottom: 0; }
  .pd-proof-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
  .pd-proof-grid figure:last-child { grid-column: span 2; }
  .pd-related-grid { gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; }
  .pd-related-grid a { min-width: 138px; scroll-snap-align: start; }
  .pd-inquiry h2 { font-size: 27px; }
  .pd-inquiry-form { grid-template-columns: 1fr; }
  .pd-inquiry-form .pd-field-wide,
  .pd-inquiry-form .pd-button,
  .pd-inquiry-form .form-state,
  .pd-confidential { grid-column: 1; }
  .pd-confidential { text-align: left; }
  .pd-lightbox { padding: 18px; }
  .pd-canonical-links .vanrd-links-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .pd-page { scroll-behavior: auto; }
  .pd-primary-image > img,
  .pd-thumb { transition: none; }
}

/* Full-page QA captures use a non-sticky state to avoid browser stitching artifacts. */
.qa-static .sgh-header,
.qa-static .pd-section-nav {
  position: static !important;
}