.product-hub {
  background: #e8eef3;
  color: #0a1421;
  padding-top: 140px;
}
.product-heading { display: flex; justify-content: space-between; align-items: end; border-bottom: 1px solid rgba(7,23,41,.2); padding-bottom: 55px; }
.product-heading > div { max-width: 880px; }
.catalogue-label { display: block; font: 500 9px var(--mono); letter-spacing: .13em; color: #0873df; margin-bottom: 30px; }
.product-heading h2 { font-size: clamp(55px,7vw,106px); line-height: .88; letter-spacing: -.068em; margin: 0; }
.product-heading > p { width: 300px; font-size: 12px; line-height: 1.75; color: #66717d; margin: 0 0 5px; }
.catalogue-tools { display: flex; align-items: center; justify-content: space-between; padding: 25px 0 30px; }
.filter-group { display: flex; gap: 7px; flex-wrap: wrap; }
.filter-button { border: 1px solid #aab8c6; background: transparent; color: #314252; border-radius: 100px; padding: 10px 14px; font: 500 8px var(--mono); letter-spacing: .07em; text-transform: uppercase; cursor: pointer; transition: .25s; }
.filter-button span { margin-left: 12px; color: #7c8b99; }
.filter-button:hover, .filter-button.active { background: #07182d; border-color: #07182d; color: white; }
.filter-button.active span { color: #72b8ff; }
.availability-key { font: 400 8px var(--mono); letter-spacing: .09em; text-transform: uppercase; color: #597080; }
.availability-key i, .product-status i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #16b878; box-shadow: 0 0 10px rgba(22,184,120,.6); margin-right: 6px; }
.product-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; align-items: start; }
.product-card { background: #f7fafc; border: 1px solid #cfdae4; transition: transform .35s ease, opacity .35s ease, filter .35s ease; }
.product-card:hover { transform: translateY(-7px); box-shadow: 0 25px 70px rgba(13,35,59,.12); }
.product-card.is-hidden { display: none; }
.product-image { position: relative; aspect-ratio: 1.35; overflow: hidden; background: #061328; }
.product-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(0,0,0,.06),transparent 55%,rgba(0,0,0,.42)); }
.product-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s cubic-bezier(.16,1,.3,1); }
.product-card:hover .product-image img { transform: scale(1.045); }
.product-code, .product-status { position: absolute; z-index: 2; top: 14px; padding: 7px 9px; background: rgba(2,9,19,.72); backdrop-filter: blur(10px); color: #c5d7e8; font: 400 7px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.product-code { left: 14px; }
.product-status { right: 14px; }
.product-body { padding: 22px; }
.product-title { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1px solid #cfdae4; padding-bottom: 18px; }
.product-title span { font: 500 7px var(--mono); letter-spacing: .13em; color: #0873df; }
.product-title h3 { font-size: 32px; line-height: 1; letter-spacing: -.045em; margin: 7px 0 0; }
.product-title b { font: 400 10px var(--mono); color: #95a5b3; }
.product-body > p { font-size: 11px; line-height: 1.7; color: #697785; min-height: 58px; margin: 18px 0; }
.spec-list { border-top: 1px solid #d4dde5; margin: 0; }
.spec-list div { display: grid; grid-template-columns: 35% 1fr; border-bottom: 1px solid #d4dde5; padding: 10px 0; font: 400 8px/1.45 var(--mono); }
.spec-list dt { color: #7b8a97; }
.spec-list dd { margin: 0; color: #1c3043; }
.tag-row { display: flex; gap: 5px; flex-wrap: wrap; margin: 18px 0; }
.tag-row span { border: 1px solid #b7c5d1; border-radius: 100px; padding: 6px 8px; font: 400 7px var(--mono); color: #526676; }
.product-actions { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #cfdae4; padding-top: 16px; }
.product-actions a { font: 500 8px var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.product-actions a i { font-style: normal; margin-left: 5px; }
.product-enquire { background: #087bff; color: white; border-radius: 100px; padding: 10px 13px; }
.polymer-card .product-image { aspect-ratio: 1.5; }
.polymer-card .product-body > p { min-height: 56px; }
.compact-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-block: 1px solid #d4dde5; margin: 17px 0; }
.compact-specs span { min-height: 62px; padding: 11px 10px 10px 0; color: #526676; font: 400 8px/1.45 var(--mono); }
.compact-specs span + span { border-left: 1px solid #d4dde5; padding-left: 12px; }
.compact-specs b { display: block; margin-bottom: 6px; color: #8b99a5; font: 400 7px var(--mono); text-transform: uppercase; letter-spacing: .06em; }

.material-finder { background: #041020; }
.finder-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 8vw; padding: 100px 0; }
.finder-copy > span { font: 500 8px var(--mono); letter-spacing: .14em; color: #278fff; }
.finder-copy h2 { font-size: clamp(56px,6.5vw,98px); line-height: .9; letter-spacing: -.065em; margin: 30px 0; }
.finder-copy h2 em { font-weight: 400; color: #6ab8ff; }
.finder-copy p { max-width: 390px; color: #8196ab; font-size: 12px; line-height: 1.75; }
.application-table { border-top: 1px solid var(--line); }
.application-row { display: grid; grid-template-columns: 1.05fr 1.25fr 1fr; gap: 20px; padding: 20px 10px; border-bottom: 1px solid var(--line); align-items: center; font-size: 10px; }
.application-row strong { font-size: 12px; }
.application-row span { color: #8499ae; }
.table-head { font: 400 7px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: #52708e; padding-block: 12px; }
.table-head span { color: #52708e; }
.finder-cta { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; background: #087bff; padding: 16px 17px 16px 22px; font: 500 9px var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.finder-cta i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: white; color: #07182d; font-style: normal; }
.quality-strip { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); }
.quality-item { min-height: 275px; border-right: 1px solid var(--line); padding: 24px; display: flex; flex-direction: column; }
.quality-item:first-child { border-left: 1px solid var(--line); }
.quality-item > span { font: 400 8px var(--mono); color: #4d6b88; }
.quality-item h3 { font-size: 27px; letter-spacing: -.04em; margin: 50px 0 12px; }
.quality-item p { color: #8094a8; font-size: 10px; line-height: 1.7; max-width: 280px; margin: 0 0 25px; }
.quality-item a { margin-top: auto; font: 500 8px var(--mono); text-transform: uppercase; letter-spacing: .07em; color: #65b6ff; }

@media (max-width: 1050px) {
  .product-grid { grid-template-columns: repeat(2,1fr); }
  .product-card:last-child { grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr; }
  .product-card:last-child .product-image { aspect-ratio: auto; min-height: 100%; }
}
@media (max-width: 900px) {
  .product-hub { padding-top: 90px; }
  .product-heading { align-items: flex-start; flex-direction: column; gap: 30px; }
  .product-heading h2 { font-size: 55px; }
  .product-heading > p { width: auto; max-width: 450px; }
  .catalogue-tools { align-items: flex-start; flex-direction: column; gap: 20px; }
  .finder-layout { grid-template-columns: 1fr; padding: 75px 0; }
  .quality-strip { grid-template-columns: 1fr; }
  .quality-item, .quality-item:first-child { border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); min-height: 230px; }
}
@media (max-width: 680px) {
  .product-grid { grid-template-columns: 1fr; }
  .product-card:last-child { grid-column: auto; display: block; }
  .product-card:last-child .product-image { aspect-ratio: 1.35; min-height: 0; }
  .filter-button { padding: 9px 11px; }
  .availability-key { display: none; }
  .application-row { grid-template-columns: 1fr; gap: 7px; padding: 17px 5px; }
  .table-head { display: none; }
  .application-row span:last-child::before { content: "Key: "; color: #4d6b88; }
  .finder-copy h2 { font-size: 54px; }
  .compact-specs { grid-template-columns: 1fr; }
  .compact-specs span + span { border-left: 0; border-top: 1px solid #d4dde5; padding-left: 0; }
}