/* ===========================================================================
   IndustrieWert — product detail, v2 (directive §8.4)
   The product is staged: a deep band on the Technische Raster, the photograph
   held in a Fadenkreuz frame with its Maßlinie and Kennzahl, and the summary
   floating as a white panel against it. Lightbox with zoom, pan, swipe.
   =========================================================================== */

/* ------------------------------------------------------------------ crumbs */
.pdp__hero .crumbs { padding-block: var(--s-4) var(--s-2); color: var(--c-grey-500); }
.pdp__hero .crumbs [aria-current] { color: var(--c-grey-300); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); font-size: var(--fs-body-s); }
.crumbs li + li::before { content: "/"; margin-right: var(--s-2); opacity: .5; }
.crumbs a { text-decoration: none; } .crumbs a:hover { text-decoration: underline; }

/* -------------------------------------------------------------------- hero */
.pdp__hero { padding-bottom: var(--s-8); color: #fff; }
.pdp__hero-inner {
  display: grid; gap: var(--s-7); align-items: start;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
  padding-top: var(--s-4);
}
@media (max-width: 900px) { .pdp__hero-inner { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); } }
.pdp__gallery, .pdp__panel { min-width: 0; }
.pdp__gallery:focus-visible { outline: var(--bw-emph) solid var(--c-accent); outline-offset: 6px; }

/* the stage */
.pdp__stage {
  position: relative; margin: 0; overflow: hidden; cursor: zoom-in;
  background: radial-gradient(120% 90% at 50% 40%, #232323 0%, #121212 60%, #0D0D0D 100%);
  border: var(--bw-hair) solid rgb(255 255 255 / .16);
}
.pdp__stage::after {           /* soft vignette so any dealer-lot backdrop recedes */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 120px rgb(0 0 0 / .45);
}
.pdp__stage.m-cross::before, .pdp__stage.m-cross::after { opacity: 1; z-index: 2; }
.pdp__stage.m-cross::after { box-shadow: none; }
.pdp__stage [data-main] {
  width: 100%; aspect-ratio: 4 / 3; object-fit: contain; display: block;
  transition: transform var(--t-base) var(--ease-mech); transform-origin: 50% 50%;
  will-change: transform;
}
.pdp__stage.is-hover [data-main] { transform: scale(1.9); transition: transform var(--t-slow) var(--ease-mech); }
.pdp__stage.is-hover::after { opacity: 0; }

.pdp__dim { position: absolute; left: 0; right: 0; bottom: var(--s-4); width: 100%; height: auto; z-index: 1; pointer-events: none; }
.pdp__dim line { stroke: var(--c-accent); stroke-width: 2; }
.pdp__dim-line { stroke-dasharray: 984px; stroke-dashoffset: 984px; }
.js-motion .pdp__dim-line { transition: stroke-dashoffset var(--t-reveal) var(--ease-mech) 220ms; }
.js-motion .pdp__stage.is-in .pdp__dim-line, :not(.js-motion) .pdp__dim-line { stroke-dashoffset: 0; }

.pdp__figure {
  position: absolute; left: var(--s-4); bottom: calc(var(--s-4) + 28px); z-index: 1; margin: 0; pointer-events: none;
  font-size: clamp(2rem, 1.2rem + 3vw, 3.6rem); font-weight: 700; line-height: 1; letter-spacing: -0.03em;
  color: var(--c-accent); text-shadow: 0 1px 2px rgb(0 0 0 / .6), 0 0 28px rgb(0 0 0 / .5);
}
.pdp__enlarge {
  position: absolute; right: var(--s-3); top: var(--s-3); z-index: 3;
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 10px 14px;   /* thumb-sized */
  background: rgb(13 13 13 / .72); color: #fff; border: var(--bw-hair) solid rgb(255 255 255 / .28); border-radius: var(--r-1);
  font-size: var(--fs-caption); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; cursor: zoom-in;
  backdrop-filter: blur(4px); transition: border-color var(--t-fast), background var(--t-fast);
}
.pdp__enlarge:hover { border-color: var(--c-accent); background: rgb(13 13 13 / .9); }
.pdp__counter { position: absolute; left: var(--s-3); top: var(--s-3); z-index: 3; margin: 0; padding: 6px 10px; background: rgb(13 13 13 / .72); color: var(--c-grey-300); font-size: var(--fs-caption); border-radius: var(--r-1); }

/* thumbs */
.pdp__thumbs { list-style: none; display: flex; gap: var(--s-2); margin-top: var(--s-3); overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; max-width: 100%; scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / .25) transparent; }
.pdp__thumb { flex: 0 0 auto; width: 96px; padding: 0; background: #1A1A1A; border: var(--bw-hair) solid rgb(255 255 255 / .18); cursor: pointer; scroll-snap-align: start; transition: border-color var(--t-fast); }
.pdp__thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; opacity: .78; transition: opacity var(--t-fast); }
.pdp__thumb:hover img { opacity: 1; }
.pdp__thumb.is-on { border-color: var(--c-accent); box-shadow: inset 0 0 0 1px var(--c-accent); }
.pdp__thumb.is-on img { opacity: 1; }

/* the panel */
.pdp__panel {
  background: var(--c-surface); color: var(--c-ink); padding: var(--s-6);
  display: flex; flex-direction: column; gap: var(--s-4);
  position: sticky; top: calc(var(--h-header-compact) + var(--s-4));
  border-top: 4px solid var(--c-accent);
  box-shadow: 0 24px 60px rgb(0 0 0 / .45);
}
@media (max-width: 900px) { .pdp__panel { position: static; padding: var(--s-5); } }
.pdp__eyebrow { color: var(--c-ink-faint); }
.pdp__title { font-size: clamp(1.45rem, 1.15rem + 1.3vw, 1.95rem); }
.pdp__sku { margin-top: calc(var(--s-2) * -1); color: var(--c-ink-faint); }
.pdp__price { display: flex; flex-direction: column; gap: 6px; padding-block: var(--s-3); border-block: var(--bw-hair) solid var(--c-rule); position: relative; }
.price--big { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.3rem); }
.pdp__badge { position: absolute; right: 0; top: var(--s-3); background: var(--c-accent); color: var(--c-accent-ink); padding: 3px 8px; font-size: var(--fs-caption); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.pdp__stock { color: var(--c-ink-faint); }
.pdp__stock.is-in { color: var(--c-success); }
.pdp__brief { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3) var(--s-4); margin: 0; }
.pdp__brief div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pdp__brief dt { font-size: var(--fs-caption); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-ink-faint); font-weight: 600; }
.pdp__brief dd { margin: 0; font-size: var(--fs-body-s); overflow-wrap: anywhere; }

/* Action hierarchy: lime (quote) > black (cart) > outline (list). Everything
   full-width so nothing wraps or overflows inside the panel. */
.pdp__actions { display: flex; flex-direction: column; gap: var(--s-3); }
.pdp__cta { min-height: 60px; font-size: var(--fs-body-l); letter-spacing: .01em; gap: var(--s-3); box-shadow: 0 8px 24px rgb(189 235 66 / .28); }
.pdp__cta svg { transition: transform var(--t-fast) var(--ease-mech); }
.pdp__cta:hover svg { transform: translateX(3px); }
.pdp__cta-note { margin-top: calc(var(--s-2) * -1); color: var(--c-ink-faint); }
.btn--block { width: 100%; }
.pdp__buy { display: flex; flex-direction: column; gap: var(--s-3); padding-top: var(--s-2); border-top: var(--bw-hair) solid var(--c-grey-100); }
.pdp__buy-row { display: flex; gap: var(--s-2); }
.pdp__buy-row .btn { flex: 1; min-height: 52px; }
.qty input { width: 76px; min-height: 52px; padding: 10px; border: var(--bw-hair) solid var(--c-rule); border-radius: var(--r-1); text-align: center; font-family: var(--f-mono); font-size: var(--fs-body); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field select, .field input, .field textarea { padding: 12px var(--s-3); min-height: 46px; border: var(--bw-hair) solid var(--c-rule); border-radius: var(--r-1); background: var(--c-surface); font-size: var(--fs-body); }
.pdp__assure { list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-body-s); color: var(--c-ink-muted); padding-top: var(--s-3); border-top: var(--bw-hair) solid var(--c-rule); }
.pdp__assure li::before { content: ""; display: inline-block; width: 14px; height: 2px; background: var(--c-accent); vertical-align: middle; margin-right: var(--s-2); }
.pdp__assure a { text-decoration: none; } .pdp__assure a:hover { text-decoration: underline; }

/* ------------------------------------------------------------- section nav */
.pdp__nav { position: sticky; top: var(--h-header-compact); z-index: 50; background: var(--c-surface); border-bottom: var(--bw-hair) solid var(--c-rule); box-shadow: var(--shadow-float); }
.pdp__nav .wrap { display: flex; gap: var(--s-5); overflow-x: auto; }
.pdp__nav a { padding: 14px 0; white-space: nowrap; font-size: var(--fs-body-s); font-weight: 550; text-decoration: none; border-bottom: var(--bw-emph) solid transparent; }
.pdp__nav a.is-on { border-bottom-color: var(--c-accent); }

/* -------------------------------------------------------------------- body */
.pdp__body { display: flex; flex-direction: column; gap: var(--s-9); padding-block: var(--s-8) var(--s-9); max-width: 1100px; }
.pdp__section .section-head__meta { margin-bottom: var(--s-5); }
.pdp__section > h2 { margin-bottom: var(--s-4); }
.pdp__lede { margin-bottom: var(--s-5); max-width: 68ch; font-weight: 500; }
.prose { max-width: var(--w-measure); line-height: var(--lh-body); }
.prose h2, .prose h3, .prose h4 { margin-top: var(--s-5); margin-bottom: var(--s-2); font-weight: 650; }
.prose h2 { font-size: var(--fs-h3); } .prose h3 { font-size: var(--fs-h4); } .prose h4 { font-size: var(--fs-body); }
.prose p { margin-bottom: var(--s-3); } .prose ul, .prose ol { padding-left: 1.25em; margin-bottom: var(--s-3); } .prose li { margin-bottom: 4px; }
.prose table { width: 100%; font-size: var(--fs-body-s); margin-bottom: var(--s-4); } .prose td, .prose th { padding: 8px; border-bottom: var(--bw-hair) solid var(--c-rule); text-align: left; }
.prose img { display: none; }

.spec { width: 100%; font-size: var(--fs-body-s); max-width: 760px; }
.spec th { text-align: left; font-weight: 550; color: var(--c-ink-muted); padding: 12px var(--s-3) 12px 0; width: 40%; border-bottom: var(--bw-hair) solid var(--c-rule); vertical-align: top; }
.spec td { padding: 12px 0; border-bottom: var(--bw-hair) solid var(--c-rule); }
.spec [data-copy] { cursor: copy; border-bottom: 1px dotted var(--c-grey-300); }
.spec [data-copy]:hover { border-bottom-color: var(--c-accent); }
@media (max-width: 600px) { .spec th { position: sticky; left: 0; background: var(--c-surface); } }

.pdp__terms { display: grid; gap: var(--s-5); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 800px) { .pdp__terms { grid-template-columns: 1fr; } }
.pdp__terms h3 { margin-bottom: var(--s-2); }

.pdp__rfq { background: var(--c-surface-deep); color: #fff; padding: var(--s-7); }
.pdp__rfq .t-label { color: var(--c-accent); }
.pdp__rfq .t-muted { color: var(--c-grey-400); }
.pdp__rfq-inner { display: flex; gap: var(--s-6); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.pdp__rfq-inner > div { display: flex; flex-direction: column; gap: var(--s-2); }

.pdp__sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: var(--c-surface); border-top: var(--bw-hair) solid var(--c-rule); box-shadow: 0 -1px 2px rgb(0 0 0 / .06); }
.pdp__sticky-inner { display: flex; align-items: center; gap: var(--s-4); padding-block: var(--s-3); }
.pdp__sticky-name { flex: 1; font-size: var(--fs-body-s); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdp__sticky form { display: contents; }
@media (max-width: 600px) { .pdp__sticky-name { display: none; } .pdp__sticky-inner .price { flex: 1; } }

/* ==================================================================== lightbox */
/* Fill the viewport by inset, not by 100vw/100vh: the latter overshoots by the
   scrollbar and disagrees with dynamic mobile viewports. */
.lb { position: fixed; inset: 0; border: 0; padding: 0; margin: 0; width: auto; height: auto; max-width: none; max-height: none;
      background: #0A0A0A; color: #fff; display: none; flex-direction: column; overscroll-behavior: contain; }
.lb[open] { display: flex; }
.lb::backdrop { background: rgb(0 0 0 / .92); }
.lb__bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: var(--s-4); align-items: center;
           padding: var(--s-3) var(--s-4); border-bottom: var(--bw-hair) solid rgb(255 255 255 / .14); }
.lb__counter { color: var(--c-accent); font-weight: 600; }
.lb__name { font-size: var(--fs-body-s); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c-grey-300); }
.lb__zoomctl { display: flex; align-items: center; gap: 4px; }
.lb__level { min-width: 56px; text-align: center; color: var(--c-grey-300); font-size: var(--fs-caption); }
.lb__btn { width: 44px; height: 44px; display: grid; place-items: center; background: none; color: #fff;
           border: var(--bw-hair) solid rgb(255 255 255 / .28); border-radius: var(--r-1); cursor: pointer; font-size: 1.15rem; transition: border-color var(--t-fast), background var(--t-fast); }
.lb__btn:hover { border-color: var(--c-accent); }
.lb__btn--text { width: auto; padding-inline: 10px; font-family: var(--f-mono); font-size: var(--fs-caption); }
.lb__close { font-size: 1.6rem; }
.lb__stage { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; overflow: hidden; cursor: zoom-in; touch-action: none; user-select: none; }
.lb__stage.is-zoomed { cursor: grab; }
.lb__stage.is-dragging { cursor: grabbing; }
.lb__img { max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: 50% 50%; will-change: transform; }
.js-motion .lb__img.is-animated { transition: transform var(--t-base) var(--ease-mech); }
.lb__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 56px; height: 80px; display: grid; place-items: center;
           background: rgb(13 13 13 / .55); color: #fff; border: var(--bw-hair) solid rgb(255 255 255 / .2); border-radius: var(--r-1); cursor: pointer; font-size: 1.5rem;
           transition: background var(--t-fast), border-color var(--t-fast); }
.lb__nav:hover { background: rgb(13 13 13 / .85); border-color: var(--c-accent); }
.lb__nav--prev { left: var(--s-4); } .lb__nav--next { right: var(--s-4); }
.lb__thumbs { list-style: none; display: flex; gap: var(--s-2); padding: var(--s-3) var(--s-4); overflow-x: auto; border-top: var(--bw-hair) solid rgb(255 255 255 / .14); scrollbar-width: thin; }
.lb__thumb { flex: 0 0 auto; width: 84px; padding: 0; background: #1A1A1A; border: var(--bw-hair) solid rgb(255 255 255 / .18); cursor: pointer; }
.lb__thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; opacity: .6; }
.lb__thumb.is-on { border-color: var(--c-accent); } .lb__thumb.is-on img, .lb__thumb:hover img { opacity: 1; }
.lb__hint { margin: 0; padding: 6px var(--s-4) var(--s-3); text-align: center; color: var(--c-grey-500); }
@media (max-width: 700px) {
  .lb__bar { grid-template-columns: auto minmax(0, 1fr) auto; }
  .lb__zoomctl { display: none; }
  .lb__name { display: none; }
  .lb__nav { width: 44px; height: 64px; }
  .lb__hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pdp__stage.is-hover [data-main] { transform: none; }
  .lb__img.is-animated { transition: none; }
}