/* Product pages (piece/*.html), generated by build-product-pages.py.
   Reuses the lightbox's .lb-* spec/price styles so a page and the popup match. */
.pp { padding: 28px 24px 40px; }
.pp-crumbs { display: flex; flex-wrap: wrap; gap: 10px; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 28px; }
.pp-crumbs a { color: var(--muted); } .pp-crumbs a:hover { color: var(--text); }
.pp-crumbs span[aria-current] { color: var(--text); }
.pp-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; align-items: start; }
.pp-media { position: sticky; top: 96px; }
/* display:block beats the UA [hidden] rule, so the unused video box showed as an empty panel */
.pp-main[hidden], .pp-video[hidden] { display: none !important; }
.pp-main, .pp-video { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: #000; border-radius: 22px; border: 1px solid var(--line-2); }
.pp-thumbs { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.pp-thumb { position: relative; width: 64px; height: 64px; padding: 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--line-2); background: #000; opacity: .6; cursor: pointer; }
.pp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-thumb.on, .pp-thumb:hover { opacity: 1; border-color: var(--gold); }
.pp-thumb-vid span { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 16px; text-shadow: 0 1px 4px #000; }
.pp-info { display: flex; flex-direction: column; }
.pp-name { font-family: var(--font-head); font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.05; margin: 6px 0 10px; }
.pp-metal { color: var(--muted); margin: 0 0 18px; font-size: 1rem; }
.pp .lb-price { display: block; align-self: stretch; margin: 0 0 18px; }
.pp .lb-specs { border-top: 1px solid var(--line); }
.pp-lead { color: var(--muted); margin: 22px 0 16px; line-height: 1.65; }
.pp-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.pp-fine { color: var(--muted); font-size: .78rem; letter-spacing: .04em; margin-top: 18px; }
@media (max-width: 860px) {
  .pp-grid { grid-template-columns: 1fr; gap: 24px; }
  .pp-media { position: static; }
}