/* Piece detail page */
.pd { border-top: 0; }
.pd-crumb { display: flex; justify-content: space-between; padding: 14px 26px; border-bottom: 1px solid var(--line); color: var(--ink-72); }
.pd-crumb a:hover { color: var(--accent); }
.pd-crumb b { font-weight: 400; color: var(--accent); }
.pd-nav { display: flex; gap: 18px; }

.pd-grid { display: grid; grid-template-columns: 58fr 42fr; min-height: calc(100vh - var(--hdr) - 60px); }
.pd-stage { border-right: 1px solid var(--line); display: grid; grid-template-rows: auto 1fr auto; position: sticky; top: var(--hdr); height: calc(100vh - var(--hdr) - 2 * var(--gut)); }
.pd-stage-top { display: flex; justify-content: space-between; padding: 22px 32px 0; position: relative; z-index: 3; }
.seg { display: flex; border: 1px solid var(--line); background: var(--bg); }
.seg-btn { padding: 8px 12px; font: inherit; font-size: var(--fs-xs); color: var(--ink-72); }
.seg-btn + .seg-btn { border-left: 1px solid var(--line); }
.seg-btn.is-on { color: var(--accent); }
.pd-art { margin: 18px 32px; border: 1px dashed var(--line); display: grid; place-items: center; overflow: hidden; position: relative; }
.pd-svg { width: min(86%, 62vh); aspect-ratio: 1; overflow: visible; }
.pd-svg .pc-t { font-size: 8px; }
.pd-stage-foot { display: flex; gap: 22px; padding: 0 32px 22px; color: var(--ink-48); }
.pd-code { margin-left: auto; color: var(--ink-72); }

.pd-info { padding: 40px 32px 50px; display: flex; flex-direction: column; gap: 26px; }
.pd-no { color: var(--accent); }
.pd-title { font-size: clamp(44px, 5vw, 88px); line-height: .88; letter-spacing: -.045em; margin: 14px 0 10px; overflow-wrap: anywhere; }   /* a translated word (INSTRUMENTENTAFELBELEUCHTUNG) breaks instead of being cut or widening the grid; English names fit as before */
/* a fallback sized to Inter Tight for the piece title only: on a slow or blocked font CDN (and the swap frame) it wraps as the web font will.
   89%: no title word is wider in Helvetica Neue / Arial Bold than in Inter Tight 700 at this letter-spacing */
@font-face { font-family: "HALDEN Title Fallback"; font-weight: 700; src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), local("Arial Bold"), local("Arial-BoldMT"); size-adjust: 89%; }
.pd-title { font-family: "Inter Tight", "HALDEN Title Fallback", "Helvetica Neue", Arial, sans-serif; }
.pd-title-no { color: var(--ghost); }
.pd-meta { color: var(--ink-48); text-transform: capitalize; }
.pd-price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 16px 0; }
.pd-price-v { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pd-price-note { margin-left: auto; }
.pd-lede { color: var(--ink-72); font-size: var(--fs-b); max-width: 32em; }

.pd-opt-head { display: flex; justify-content: space-between; color: var(--ink-72); margin-bottom: 10px; }
.pd-opt-head a { color: var(--accent); }
.pd-metals { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); }
.pd-metal { display: flex; align-items: center; gap: 8px; padding: 12px 10px; font: inherit; font-size: var(--fs-xs); font-family: var(--mono); color: var(--ink-72); }
.pd-metal + .pd-metal { border-left: 1px solid var(--line); }
.pd-metal > i { width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(135deg, var(--a), var(--b) 55%, var(--c)); border: 1px solid var(--ink-48); flex: none; }
.pd-metal.is-on { color: var(--ink); box-shadow: inset 0 -3px 0 var(--accent); }
.pd-sizes { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.pd-size { height: 42px; font: inherit; font-family: var(--mono); font-size: var(--fs-xs); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--ink-72); }
.pd-size.is-on { background: var(--accent); color: #fff; }
.pd-size.is-on .checker { display: none; }

.pd-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.pd-actions .btn-fill, .pd-actions .btn-line { height: 50px; }
.pd-sel { color: var(--ink-48); margin-top: -12px; }
.pd-specs { border-top: 1px solid var(--line); }
.pd-specs > div { display: grid; grid-template-columns: 120px 1fr; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.pd-specs dt { color: var(--ink-48); }
.pd-specs dd { text-transform: none; font-family: var(--sans); font-size: var(--fs-s); color: var(--ink); }

/* passport */
.pp-steps { display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--line); position: relative; }
.pp-step { padding: 0 20px 30px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; }
.pp-step:nth-child(6) { border-right: 0; }
.pp-top { display: flex; justify-content: space-between; align-items: center; height: 54px; margin: 0 -20px; padding: 0 20px; }
.pp-dot { width: 12px; height: 12px; border: 1px solid var(--ink-48); background: var(--bg); position: relative; z-index: 2; transition: background .3s, border-color .3s, transform .4s var(--ease); }
.pp-step.is-done .pp-dot { background: var(--accent); border-color: var(--accent); transform: rotate(45deg); }
.pp-step p { color: var(--ink-72); font-size: var(--fs-s); }
.pp-who { margin-top: auto; color: var(--ink-48); }
.pp-rule { position: absolute; left: 0; right: 0; top: 27px; height: 1px; background: repeating-linear-gradient(90deg, var(--line) 0 4px, transparent 4px 8px); pointer-events: none; }
.pp-rule i { position: absolute; inset: 0; background: var(--accent); transform-origin: left; }

@media (max-width: 1000px) {
  /* one column, as wide as the screen and never its content's min-content: a long title word (INSTRUMENTS) or the
     stage's SCALE / REV / DWG row would otherwise widen the track past the edge, where html/body clip it. The stage is
     its own grid, so its implicit column gets the same floor */
  .pd-grid, .pd-stage { grid-template-columns: minmax(0, 1fr); }
  .pd-stage { position: relative; top: 0; height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .pd-svg { width: 86%; }
  .pd-art { min-height: 60vw; }
  .pp-steps { grid-template-columns: 1fr 1fr; }
  .pp-step { border-bottom: 1px solid var(--line); }
  .pp-step:nth-child(2n) { border-right: 0; }
  .pp-rule { display: none; }
  .pp-step.is-done .pp-dot, .pp-dot { background: var(--accent); border-color: var(--accent); }
}
@media (max-width: 520px) {
  .pd-crumb > span:first-child { display: none; }
  .pd-stage-top, .pd-stage-foot { padding-inline: 18px; }
  .pd-art { margin: 14px 18px; }
  .pd-info { padding: 28px 18px 40px; }
  .pd-metals { grid-template-columns: 1fr 1fr; }
  .pd-metal:nth-child(3) { border-left: 0; }
  .pd-metal:nth-child(n+3) { border-top: 1px solid var(--line); }
  .pp-steps { grid-template-columns: 1fr; }
  .pp-step { border-right: 0; }
  .pd-price-note { margin-left: 0; width: 100%; }
  /* the title shrinks with the screen below 340 so its widest word stays on one line: 54 = 2 x 9 page frame + 2 x 18
     info padding, and 6.5 is about the widest title word's width over its font size (INSTRUMENTS, 284 / 44) */
  .pd-title { font-size: clamp(34px, calc((100vw - 54px) / 6.5), 44px); }
}

/* tap targets: phones and any touch screen */
@media (max-width: 900px), (pointer: coarse) {
  .pd-nav a, .pd-size-help { display: inline-flex; align-items: center; min-height: 44px; }
  .pd-nav a { min-width: 44px; justify-content: center; }
  .pd-crumb { padding-block: 0; align-items: center; }
  .pd-crumb a { display: inline-flex; align-items: center; min-height: 44px; }
  .seg-btn { min-height: 44px; padding-inline: 14px; }
  /* a label longer than its cell (a translated MARKIERUNGEN) wraps inside the button instead of being cut; English
     labels stay one line at 48px */
  .pd-size { height: auto; min-height: 48px; padding-block: 4px; }
  .pd-size > span { display: block; overflow-wrap: anywhere; }
  .pd-metal { min-height: 48px; }
}

/* layers + views */
.pd-svg.no-dims .pc-dims { display: none; }
.pd-svg.no-marks .pip { display: none; }
.pd-views.is-single { visibility: hidden; }
.pd-svg { transition: opacity .4s; }
.pd-paints { grid-template-columns: repeat(5, 1fr); }
.pd-layers { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 520px) {
  .pd-paints { grid-template-columns: repeat(5, 1fr); }
  .pd-paints .pd-metal { flex-direction: column; gap: 6px; padding: 10px 4px; min-height: 64px; justify-content: center; }
  .pd-paints .pd-metal:nth-child(n) { border-top: 0; }
  .pd-paints .pd-metal + .pd-metal { border-left: 1px solid var(--line); }
}
.pd-svg { width: 92%; height: auto; max-height: calc(100% - 24px); aspect-ratio: auto; }
@media (max-width: 1000px) { .pd-svg { width: 94%; } }
/* page zoom on a phone (iOS 150-200% leaves 260-195 CSS px; the folded Galaxy Fold is 280): the stage and the info column
   take the screen's width rather than their content's, the view buttons wrap, and each spec sits above its value */
@media (max-width: 300px) {
  .pd-stage-top { flex-wrap: wrap; gap: 8px; }
  .pd-specs > div { grid-template-columns: minmax(0, 1fr); }
  /* the stage no longer widens the column, so a 44px cell is narrower than DIMENSIONS: each layer button gets room
     for its whole label (one column at 195, two at 223-260, three from 280 as before) */
  .pd-sizes { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
}