.product-page {
  --product-shell: min(100% - 2rem, 1300px);
  --product-rule: 1px solid color-mix(in srgb, var(--sanfu-graphite) 18%, transparent);
  overflow: hidden;
}
.product-page:not(.color-library) { --product-shell: var(--sanfu-shell); }

.section-shell,
.product-breadcrumb-shell {
  width: var(--product-shell);
  margin-inline: auto;
}

.product-breadcrumb-shell { padding-top: 1.25rem; }
.product-breadcrumb-shell .breadcrumbs ol { margin-bottom: 1.25rem; }

.product-section { padding-block: var(--sanfu-section-default); }
.product-section.section-shell + .product-section.section-shell { border-top: var(--product-rule); }
.product-section--stone { background: var(--sanfu-light-stone); }
.product-section--dark { background: var(--sanfu-deep-teal); color: var(--sanfu-white); }
.product-section--stone > .section-shell,
.product-section--dark > .section-shell { padding-block: var(--sanfu-section-default); }
.product-section--stone,
.product-section--dark { padding-block: 0; }

.eyebrow,
.endorsement {
  margin: 0 0 1.25rem;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.endorsement { opacity: 0.72; }
.product-page:not(.color-library) h1,
.product-page:not(.color-library) h2,
.product-page:not(.color-library) h3,
.product-page:not(.color-library) p { margin-top: 0; }
.product-page:not(.color-library) h1 {
  max-width: var(--sanfu-measure-display);
  margin-bottom: 1rem;
  font-size: var(--sanfu-type-h1);
  font-weight: var(--sanfu-weight-medium);
  letter-spacing: -.02em;
  line-height: var(--sanfu-leading-h1);
}
.product-page:not(.color-library) h2 {
  max-width: var(--sanfu-measure-heading);
  margin-bottom: 1.5rem;
  font-size: var(--sanfu-type-h2);
  font-weight: var(--sanfu-weight-semibold);
  letter-spacing: -.012em;
  line-height: var(--sanfu-leading-h2);
}
.product-page:not(.color-library) h3 { font-size: var(--sanfu-type-h3); font-weight: var(--sanfu-weight-semibold); line-height: var(--sanfu-leading-h3); }
.product-page:not(.color-library) p { line-height: 1.7; }
.color-library h1 { max-width: 12ch; margin: 0 0 1rem; font-size: clamp(3rem, 7.3vw, 7.5rem); font-weight: 560; letter-spacing: -.045em; line-height: .94; }
.product-prose { max-width: var(--sanfu-container-reading); font-size: var(--sanfu-type-body-large); }
.product-prose > :last-child { margin-bottom: 0; }

.product-hero {
  position: relative;
  min-height: clamp(30rem, 58vw, 42rem);
  display: grid;
  align-items: end;
  background: var(--sanfu-deep-teal);
  color: var(--sanfu-white);
}
.product-hero picture,
.product-hero picture img,
.product-hero__overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
.product-hero picture img { object-fit: cover; }
.product-hero__overlay { background: linear-gradient(90deg, rgb(5 28 27 / .82) 0%, rgb(5 28 27 / .4) 52%, transparent 82%); }
.product-hero__content { position: relative; z-index: 1; padding-block: var(--sanfu-section-default); }
.product-hero__subtitle { margin-bottom: var(--sanfu-space-4); font-size: var(--sanfu-type-body-large); }
.product-hero__headline { max-width: var(--sanfu-container-narrow); margin-bottom: 0; font-size: var(--sanfu-type-body-large); }
.product-hero__supporting { max-width: 44rem; margin-top: var(--sanfu-space-4); font-size: var(--sanfu-type-body-large); }
.product-hero__supporting > :last-child { margin-bottom: 0; }
.product-page:not(.color-library) .product-hero__family-title--wordmark { max-width: min(100%, 29rem); margin-bottom: 1.25rem; }
.product-hero__family-wordmark { display: block; width: clamp(14rem, 31vw, 28rem); max-width: 100%; height: auto; }

.product-intro,
.split-section { display: grid; grid-template-columns: var(--sanfu-grid-split); gap: var(--sanfu-editorial-gap); align-items: start; }
.section-heading { margin-bottom: var(--sanfu-space-6); }
.section-heading h2 { margin-bottom: 0; }

.collection-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sanfu-space-8) var(--sanfu-space-5); }
.collection-preview { min-width: 0; }
.collection-preview__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: color-mix(in srgb, var(--sanfu-deep-teal) 12%, var(--sanfu-warm-white)); }
.collection-preview__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 450ms ease; }
.collection-preview__media:hover img { transform: scale(1.025); }
.collection-preview__content { padding-top: var(--sanfu-space-4); border-top: 3px solid var(--sanfu-deep-teal); }
.collection-preview__content h3 { margin-bottom: .75rem; }
.collection-preview__role { margin-bottom: .65rem; color: var(--sanfu-deep-teal); font-size: var(--sanfu-type-meta); font-weight: var(--sanfu-weight-semibold); letter-spacing: .12em; text-transform: uppercase; }
.collection-preview--featured { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(18rem, .65fr); gap: var(--sanfu-space-6); align-items: end; }
.collection-preview--featured .collection-preview__media { aspect-ratio: 16 / 8; }

.family-applications__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--sanfu-space-5); }
.family-application { min-width: 0; }
.family-application > a { display: grid; color: inherit; text-decoration: none; }
.family-application__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: color-mix(in srgb, var(--sanfu-deep-teal) 10%, var(--sanfu-light-stone)); }
.family-application__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 350ms ease; }
.family-application > a:hover .family-application__media img,
.family-application > a:focus-visible .family-application__media img { transform: scale(1.025); }
.family-application__content { display: grid; gap: .45rem; padding-top: 1rem; border-top: var(--product-rule); }
.family-application__content strong { font-size: var(--sanfu-type-h3); }
.family-application__content small { line-height: 1.55; }
.family-technical-links { display: grid; gap: .85rem; margin: var(--sanfu-space-4) 0 0; padding: 0; list-style: none; }

.color-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem) clamp(.8rem, 1.7vw, 1.5rem); }
.color-tile { min-width: 0; }
.color-tile__link { display: block; color: inherit; text-decoration: none; }
.color-tile__media { display: block; aspect-ratio: 1; overflow: hidden; background: color-mix(in srgb, var(--sanfu-deep-teal) 9%, var(--sanfu-light-stone)); }
.color-tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 350ms ease; }
.color-tile__link:hover .color-tile__media img,
.color-tile__link:focus-visible .color-tile__media img { transform: scale(1.035); }
.color-tile__meta { display: grid; gap: .3rem; padding-top: .9rem; font-size: .86rem; }
.color-tile__meta strong { font-size: 1rem; line-height: 1.4; }

.keyword-list { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; margin: 1.5rem 0 0; padding: 0; list-style: none; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; }
.keyword-list li + li::before { content: "\2022"; margin-right: 1.2rem; opacity: .45; }
.space-gallery { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; }
.space-gallery > img,
.space-gallery > picture { grid-column: span 6; }
.space-gallery > :nth-child(3n) { grid-column: span 12; }
.space-gallery img { display: block; width: 100%; height: clamp(18rem, 36vw, 35rem); object-fit: cover; }

.key-spec-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0 0 var(--sanfu-space-7); border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; }
.key-spec-strip > div { min-width: 0; padding: 1.5rem 1rem 1.5rem 0; }
.key-spec-strip > div + div { padding-left: 1rem; border-left: 1px solid color-mix(in srgb, currentColor 38%, transparent); }
.key-spec-strip dd { margin: 0 0 .55rem; font-size: var(--sanfu-type-body-large); font-weight: var(--sanfu-weight-semibold); }
.key-spec-strip dt { font-size: .72rem; line-height: 1.4; opacity: .75; text-transform: uppercase; }
.specification-groups { display: grid; gap: var(--sanfu-space-6); }
.specification-group h3 { padding-bottom: .8rem; border-bottom: 2px solid currentColor; }
.specification-table { margin: 0; }
.specification-table > div { display: grid; grid-template-columns: minmax(12rem, .8fr) 1.2fr; gap: 2rem; padding-block: 1rem; border-bottom: 1px solid color-mix(in srgb, currentColor 34%, transparent); }
.specification-table dd { margin: 0; }
.specification-table small { display: block; margin-top: .35rem; opacity: .72; }

.download-list { border-top: var(--product-rule); }
.download-item { display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: center; padding-block: 1.25rem; border-bottom: var(--product-rule); }
.text-link { display: inline-block; font-weight: 650; text-decoration-thickness: 1px; }
.text-link--light { color: var(--sanfu-white); }
.button { display: inline-block; padding: 1rem 1.4rem; border: 1px solid var(--sanfu-deep-teal); background: var(--sanfu-deep-teal); color: var(--sanfu-white); font-weight: 700; text-decoration: none; }
.button--light { border-color: var(--sanfu-white); background: var(--sanfu-white); color: var(--sanfu-deep-teal); }
.product-empty-state { max-width: 42rem; margin-bottom: 0; opacity: .7; }

.product-cta { display: grid; grid-template-columns: 1fr auto; gap: var(--sanfu-space-7); align-items: end; padding-block: var(--sanfu-section-default); }
.product-cta { background: var(--sanfu-deep-teal); color: var(--sanfu-white); box-shadow: 0 0 0 100vmax var(--sanfu-deep-teal); clip-path: inset(0 -100vmax); }
.product-cta h2 { max-width: 17ch; margin-bottom: 0; }
.product-cta__actions { display: flex; align-items: center; gap: 1.5rem; }
.product-final-action { display: flex; justify-content: space-between; align-items: center; gap: 2rem; }
.product-final-action h2 { margin-bottom: 0; }

.color-hero { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: var(--sanfu-space-8); align-items: center; padding-block: var(--sanfu-section-default); }
.color-name { margin-bottom: .7rem; font-size: var(--sanfu-type-body-large); }
.color-hero__texture { min-width: 0; }
.color-hero__texture-media { display: block; aspect-ratio: 1; overflow: hidden; background: var(--sanfu-light-stone); }
.color-hero__texture-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.full-texture { overflow: hidden; background: var(--sanfu-light-stone); }
.full-texture img { display: block; width: 100%; max-height: 55rem; object-fit: cover; }
.texture-viewer-trigger { display: grid; width: 100%; color: inherit; text-decoration: none; cursor: zoom-in; }
.texture-viewer-trigger__label { justify-self: end; margin-top: .8rem; padding-bottom: .25rem; border-bottom: 1px solid currentColor; font-size: var(--sanfu-type-meta); font-weight: var(--sanfu-weight-medium); letter-spacing: .08em; text-transform: uppercase; }
.texture-viewer { width: min(94vw, 1100px); max-width: none; height: min(94vh, 1100px); max-height: none; padding: 3rem; border: 0; background: var(--sanfu-graphite); color: var(--sanfu-white); }
.texture-viewer::backdrop { background: rgb(5 28 27 / .9); }
.texture-viewer__close { position: absolute; z-index: 1; top: 1rem; right: 1rem; padding: .65rem .85rem; border: 1px solid currentColor; background: var(--sanfu-graphite); color: inherit; font: inherit; cursor: pointer; }
.texture-viewer__canvas { display: grid; width: 100%; height: 100%; place-items: center; overflow: auto; }
.texture-viewer__canvas img { display: block; width: auto; max-width: 100%; height: auto; max-height: 100%; object-fit: contain; }
.color-information { margin: 0; border-top: var(--product-rule); }
.color-information > div { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding-block: 1rem; border-bottom: var(--product-rule); }
.color-information dd { margin: 0; font-weight: var(--sanfu-weight-medium); }

.product-page:not(.color-library) .eyebrow,
.product-page:not(.color-library) .endorsement { font-size: var(--sanfu-type-eyebrow); font-weight: var(--sanfu-weight-semibold); }
.product-page:not(.color-library) .text-link { font-weight: var(--sanfu-weight-medium); }
.product-page:not(.color-library) .button { min-height: var(--sanfu-control-height); display: inline-flex; align-items: center; padding: 0 var(--sanfu-control-padding-inline); font-size: var(--sanfu-type-button); font-weight: var(--sanfu-weight-medium); }
.product-page:not(.color-library) .texture-viewer__close { min-width: var(--sanfu-touch-target); min-height: var(--sanfu-touch-target); font-weight: var(--sanfu-weight-medium); }

@media (max-width: 1040px) {
  .product-intro,
  .split-section { gap: var(--sanfu-space-5); }
  .color-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .key-spec-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .key-spec-strip > div:nth-child(4) { padding-left: 0; border-left: 0; }
  .color-hero { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
}

@media (max-width: 700px) {
  .product-page { --product-shell: min(100% - 1.5rem, 1300px); }
  .product-page:not(.color-library) { --product-shell: var(--sanfu-shell); }
  .product-section { padding-block: var(--sanfu-section-default); }
  .product-section--stone > .section-shell,
  .product-section--dark > .section-shell { padding-block: var(--sanfu-section-default); }
  .product-hero { min-height: 32rem; }
  .product-hero__overlay { background: linear-gradient(0deg, rgb(5 28 27 / .9) 0%, rgb(5 28 27 / .35) 72%, transparent 100%); }
  .product-hero__content { padding-block: var(--sanfu-section-default); }
  .product-hero__family-wordmark { width: min(100%, 18rem); }
  .product-intro,
  .split-section,
  .color-hero { grid-template-columns: 1fr; gap: 2.5rem; }
  .product-page:not(.color-library) h1,
  .product-page:not(.color-library) h2 { max-width: 100%; }
  .collection-grid { grid-template-columns: 1fr; gap: 3rem; }
  .collection-preview--featured { grid-column: auto; grid-template-columns: 1fr; gap: 0; }
  .collection-preview--featured .collection-preview__media { aspect-ratio: 4 / 3; }
  .color-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.7rem .7rem; }
  .space-gallery { display: grid; grid-template-columns: 1fr; }
  .space-gallery > img,
  .space-gallery > picture,
  .space-gallery > :nth-child(3n) { grid-column: auto; }
  .space-gallery img { height: 20rem; }
  .key-spec-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .key-spec-strip > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .key-spec-strip > div:nth-child(even) { padding-left: .8rem; border-left: 1px solid color-mix(in srgb, currentColor 38%, transparent); }
  .specification-table > div { grid-template-columns: 1fr; gap: .45rem; }
  .specification-table dt { opacity: .72; }
  .download-item { grid-template-columns: 1fr; gap: .5rem; }
  .product-cta { grid-template-columns: 1fr; align-items: start; }
  .product-cta__actions { align-items: flex-start; flex-direction: column; }
  .product-final-action { align-items: flex-start; flex-direction: column; }
  .color-hero { min-height: auto; padding-block: var(--sanfu-section-default); }
  .color-hero__identity { order: 2; }
  .color-hero__texture { order: 1; }
  .color-information > div { grid-template-columns: .8fr 1.2fr; }
  .texture-viewer { width: 100vw; height: 100dvh; padding: 3.5rem 1rem 1rem; }
  .color-library h1 { font-size: clamp(2.75rem, 14vw, 4.5rem); }
}

@media (prefers-reduced-motion: reduce) {
  .collection-preview__media img,
  .family-application__media img,
  .color-tile__media img { transition: none; }
}