/* Parts diagrams page (parts.html) only. */
.pt-list{ display:flex; flex-direction:column; gap:12px; padding-bottom:40px }
.pt-card{ background:var(--dw-panel); border:1px solid var(--dw-line) }
.pt-card > summary{ list-style:none; cursor:pointer; padding:18px 22px 18px 48px; position:relative;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px }
.pt-card > summary::-webkit-details-marker{ display:none }
.pt-card > summary::before{ content:""; position:absolute; left:22px; top:26px; width:8px; height:8px;
  border-right:2px solid var(--dw-blue); border-bottom:2px solid var(--dw-blue); transform:rotate(-45deg);
  transition:transform .15s }
.pt-card[open] > summary::before{ transform:rotate(45deg); top:23px }
.pt-card > summary:hover .pt-name{ color:var(--dw-blue-soft) }
.pt-meta{ flex-basis:100%; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--dw-dim); font-weight:600 }
.pt-name{ font-size:18px; font-weight:600; color:var(--dw-bright) }
.pt-models{ font-size:13px; color:var(--dw-mid) }
.pt-hits{ margin-left:auto; font-size:12.5px; color:var(--dw-blue-soft); font-weight:600 }
.pt-body{ border-top:1px solid var(--dw-line); padding:22px }
.pt-diagram{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:24px; align-items:start }
.pt-diagram + .pt-diagram{ margin-top:28px; padding-top:28px; border-top:1px solid var(--dw-line-faint) }
.pt-fig{ margin:0; position:sticky; top:84px }
.pt-fig > a{ display:block; background:#fff; border:1px solid var(--dw-line); padding:12px; cursor:zoom-in }
.pt-fig img{ display:block; width:100%; height:auto; max-height:72vh; object-fit:contain }
.pt-fig figcaption{ font-size:12.5px; color:var(--dw-dim); margin-top:8px }
.pt-tablewrap{ min-width:0; overflow-x:auto }
.pt-table{ width:100%; font-size:13.5px }
table.dw-table.pt-table td{ vertical-align:top; white-space:normal; overflow-wrap:anywhere; padding-right:18px }
table.dw-table.pt-table td.pt-p{ white-space:nowrap }
table.dw-table.pt-table td.pt-q{ padding-right:0 }
.pt-k{ width:3em; color:var(--dw-bright); font-weight:600; font-variant-numeric:tabular-nums }
.pt-p{ white-space:nowrap }
.pt-q{ width:3em; text-align:right }
.pt-table tr.pt-on td{ background:color-mix(in srgb, var(--dw-blue) 14%, transparent) }
.pt-table mark, .pt-card summary mark{ background:color-mix(in srgb, var(--dw-blue) 30%, transparent); color:inherit; padding:0 1px }
.pt-note{ margin-top:12px }
.pt-foot{ display:flex; flex-wrap:wrap; gap:14px 20px; align-items:center; margin-top:22px; font-size:13.5px }
.pt-empty{ padding:28px 0 60px }
@media (max-width:860px){
  .pt-diagram{ grid-template-columns:1fr }
  .pt-fig{ position:static }
  .pt-body{ padding:16px }
  .pt-card > summary{ padding:16px 16px 16px 42px }
  .pt-card > summary::before{ left:18px }
  .pt-hits{ margin-left:0; flex-basis:100% }
}
@media (max-width:700px){ #parts-search{ font-size:16px } table.dw-table.pt-table td{ padding-right:10px } }
.pt-cathead{ font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--dw-blue); font-weight:600; margin:22px 0 2px }
.pt-cathead:first-child{ margin-top:0 }

/* ---------- tabs ---------- */
.pt-tabs{ display:flex; gap:4px; flex-wrap:wrap; border-bottom:1px solid var(--dw-line); margin:8px 0 6px }
.pt-tabs a{ padding:12px 18px; color:var(--dw-mid); text-decoration:none; font-weight:600; font-size:14.5px;
  border-bottom:2px solid transparent; margin-bottom:-1px }
.pt-tabs a:hover{ color:var(--dw-bright) }
.pt-tabs a.active{ color:var(--dw-bright); border-bottom-color:var(--dw-blue) }
.pt-panel{ padding-top:14px }
.pt-flash{ outline:2px solid var(--dw-blue); outline-offset:2px; transition:outline-color 1.2s }

/* ---------- identify your filter ---------- */
.id-intro{ max-width:78ch; margin:6px 0 16px }
.id-tips{ margin:12px 0 0; padding-left:18px; color:var(--dw-ink); font-size:14px; line-height:1.6 }
.id-tips b{ color:var(--dw-bright) }
.id-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 20px }
.id-chip{ background:transparent; border:1px solid var(--dw-line-strong); color:var(--dw-mid); padding:7px 14px;
  font:600 13px var(--dw-font); cursor:pointer }
.id-chip:hover{ color:var(--dw-bright); border-color:var(--dw-blue) }
.id-chip.active{ background:var(--dw-blue); border-color:var(--dw-blue); color:var(--dw-ground) }
.id-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; padding-bottom:40px }
.id-card{ background:var(--dw-panel); border:1px solid var(--dw-line); display:flex; flex-direction:column; scroll-margin-top:90px }
.id-photo{ background:#f3f6f9; display:flex; align-items:center; justify-content:center; height:230px; padding:14px }
.id-photo img{ max-width:100%; max-height:100%; object-fit:contain; display:block }
.id-body{ padding:16px 18px 18px; display:flex; flex-direction:column; flex:1 }
.id-name{ font-size:17px; font-weight:600; color:var(--dw-bright); margin:4px 0 2px; line-height:1.3 }
.id-models{ font-size:12.5px; color:var(--dw-mid); margin:0 0 10px }
.id-look{ font-size:13.5px; margin:0 0 12px }
.id-tag{ display:inline-block; font-size:11.5px; font-weight:600; color:var(--dw-blue-soft); border:1px solid var(--dw-line-strong); padding:1px 7px; margin-right:4px }
.id-fits{ list-style:none; margin:0 0 12px; padding:0; font-size:13px; display:flex; flex-direction:column; gap:8px }
.id-fits li{ display:flex; gap:10px; align-items:flex-start }
.id-fits li.pt-on{ background:color-mix(in srgb, var(--dw-blue) 14%, transparent); margin:0 -8px; padding:4px 8px }
.id-mpv{ flex:0 0 auto; font-weight:700; font-size:12px; color:var(--dw-ground); background:var(--dw-blue); padding:2px 7px; text-decoration:none; letter-spacing:.03em }
.id-mpv:hover{ background:var(--dw-blue-soft) }
.id-mpv-none{ background:var(--dw-line-strong); color:var(--dw-bright) }
.id-actions{ margin:auto 0 0; padding-top:4px }

/* ---------- multiport valves ---------- */
.mpv-list{ display:flex; flex-direction:column; gap:14px; padding-bottom:40px }
.mpv-card{ background:var(--dw-panel); border:1px solid var(--dw-line); display:grid; grid-template-columns:240px minmax(0,1fr); scroll-margin-top:90px }
.mpv-photo{ height:auto; min-height:240px }
.mpv-body{ padding:18px 22px 20px }
.mpv-sub{ font-weight:400; color:var(--dw-mid); font-size:14px; margin-left:6px }
.mpv-spec{ display:flex; flex-wrap:wrap; gap:6px 28px; margin:10px 0 4px; font-size:13px }
.mpv-spec dt{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--dw-dim); font-weight:600 }
.mpv-spec dd{ margin:2px 0 0; color:var(--dw-bright) }
.mpv-h{ font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--dw-blue); margin:16px 0 8px; font-weight:600 }
.mpv-src{ font-size:11px; color:var(--dw-dim); border:1px solid var(--dw-line-strong); padding:0 5px; margin-left:4px }
.mpv-photo-link{ margin-left:4px }
.mpv-bro{ margin:4px 0 0 }
.mpv-codes{ margin:0 0 14px }
@media (max-width:760px){
  .mpv-card{ grid-template-columns:1fr }
  .mpv-photo{ min-height:0; height:200px }
  .mpv-body{ padding:16px }
  .pt-tabs a{ padding:10px 12px; font-size:13.5px }
  .id-grid{ grid-template-columns:1fr }
  #mpv-search{ font-size:16px }
}
.id-body .pt-meta, .mpv-body .pt-meta{ flex-basis:auto; display:block; margin:0 }

/* tabs as clear, centred buttons (06/11) */
.pt-tabs{ justify-content:center; gap:10px; border-bottom:0; margin:14px 0 8px }
.pt-tabs a{ border:1px solid var(--dw-blue); color:var(--dw-blue-soft); background:transparent; padding:12px 22px;
  margin:0; font-weight:600; font-size:15px; min-width:190px; text-align:center; cursor:pointer;
  transition:background .15s, color .15s }
.pt-tabs a:hover{ background:color-mix(in srgb, var(--dw-blue) 18%, transparent); color:var(--dw-bright) }
.pt-tabs a.active{ background:var(--dw-blue); color:var(--dw-ground); border-color:var(--dw-blue) }
.pt-tabs a:focus-visible{ outline:2px solid var(--dw-blue-soft); outline-offset:2px }
@media (max-width:760px){ .pt-tabs{ flex-direction:column; align-items:stretch; gap:8px } .pt-tabs a{ min-width:0; padding:12px 14px; font-size:15px } }

/* centred page layout (06/11) - text inside cards and tables stays left-aligned */
.pt-page .page-head{ text-align:center }
.pt-page .page-head .dw-eyebrow{ justify-content:center }
.pt-page .page-sub{ margin-left:auto; margin-right:auto; max-width:68ch }
.pt-page .filter-bar{ justify-content:center }
.pt-page .count-note{ margin-left:0; flex-basis:100%; text-align:center }
.pt-page .id-intro{ text-align:center; margin-left:auto; margin-right:auto }
.pt-page .id-tips{ display:inline-block; text-align:left; margin-top:14px }
.pt-page .id-chips{ justify-content:center }
.pt-page .pt-cathead{ text-align:center }
.pt-page > .dw-small{ text-align:center }
.pt-page .dw-rep{ justify-content:center; text-align:center }
.pt-page .dw-rep > div{ margin-left:0 !important }
.pt-page .pt-empty{ text-align:center }