/* Products page — parts-first segment media (client corrections p23–25) */

/* media column: parts are the focus, end product is a small secondary inset */
.block__media--parts{overflow:visible;background:none;border-radius:0}
.block__media--parts:hover img{transform:none}

.pseg__head{display:flex;align-items:center;gap:18px;margin-bottom:16px}
.pseg__app{
  position:relative;flex:none;width:clamp(110px,11vw,150px);margin:0;
  border:1px dashed var(--border);border-radius:3px;background:#fff;padding:6px 6px 0;
}
.block__media--parts .pseg__app img{
  width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;
  filter:grayscale(1) contrast(1.05);opacity:.62;mix-blend-mode:multiply;transition:none;
}
.pseg__app figcaption{
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;text-align:center;
  color:#6B7278;padding:4px 0 6px;border-top:1px solid #E4E4E0;margin-top:4px;
}
.pseg__app--txt{background:var(--card);padding-top:0}
.pseg__app--txt span{display:grid;place-items:center;aspect-ratio:4/3;padding:8px;text-align:center;font-size:11px;line-height:1.4;color:var(--muted)}
.pseg__app--txt figcaption{border-top-color:var(--border);color:var(--muted)}
.pseg__note{font-size:14px;line-height:1.6;color:var(--muted)}
.pseg__note b{color:var(--text);font-weight:500}
.pseg__note .tech{display:block;margin-top:8px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--red-bright)}
.bg-light .pseg__note{color:#5A6167}
.bg-light .pseg__note b{color:#14181B}
.bg-light .pseg__app{border-color:#CFCFCA}

/* parts grid: 2 rows visible, "view all" expands */
.parts{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.parts:not(.is-open) .part:nth-child(n+9){display:none}
.part{
  position:relative;display:block;width:100%;padding:0;border:1px solid var(--border);border-radius:3px;
  background:#E9E8EC;overflow:hidden;cursor:zoom-in;z-index:1;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s var(--ease);
}
.bg-light .part{border-color:#DEDED9}
.block__media--parts .part img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;display:block;transition:none}
.part:focus-visible{outline:2px solid var(--red);outline-offset:2px}

@media (hover:hover) and (min-width:900px){
  .part:hover,.part:focus-visible{
    transform:scale(1.7);z-index:20;border-color:var(--red);
    box-shadow:0 24px 60px rgba(0,0,0,.55);
  }
  .part:nth-child(4n+1){transform-origin:left center}
  .part:nth-child(4n+2),.part:nth-child(4n+3){transform-origin:center center}
  .part:nth-child(4n){transform-origin:right center}
}

.parts__more{
  display:inline-flex;align-items:center;gap:10px;margin-top:14px;padding:10px 16px;
  border:1px solid var(--border);border-radius:2px;background:none;color:var(--text);cursor:pointer;
  font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  transition:border-color .25s var(--ease),color .25s var(--ease);
}
.parts__more[hidden]{display:none}
.parts__more:hover{border-color:var(--red);color:var(--red-bright)}
.parts__more svg{transition:transform .3s var(--ease)}
.parts__more[aria-expanded="true"] svg{transform:rotate(180deg)}
.bg-light .parts__more{color:#14181B;border-color:rgba(0,0,0,.22)}

/* phero collage: slightly stronger scrim so the busy collage stays behind the title */
.phero__img img{filter:saturate(.75)}

@media (max-width:767px){
  .parts{grid-template-columns:repeat(3,1fr);gap:8px}
  .parts:not(.is-open) .part:nth-child(n+7){display:none}
  .pseg__head{gap:14px}
  .pseg__note{font-size:13px}
}
.pseg__tap{display:none}
@media (hover:none){.pseg__hov,.pseg__clk{display:none}.pseg__tap{display:inline}}