/* The piece dialog has its own factual model; family descriptions and variant
   selectors must not leak into a documentary item with a different identity. */
.piece-dialog { position: fixed; z-index: 90; inset: 50% auto auto 50%; width: min(1040px, calc(100% - 32px)); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; overflow: hidden; transform: translate(-50%, -48%); visibility: hidden; border-radius: 22px; background: #fff; box-shadow: 0 24px 70px rgba(8,20,30,.28); }
.piece-dialog.is-open { visibility: visible; transform: translate(-50%, -50%); }
.piece-dialog__scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 28px; scroll-padding-block: 18px; padding-bottom: max(28px, env(safe-area-inset-bottom)); }
.piece-dialog__status { margin: 0; color: var(--muted); }
.piece-dialog__status:empty { display: none; }
.piece-dialog__content { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 32px; align-items: start; }
.piece-dialog [hidden] { display: none; }
.piece-detail__visual { min-width: 0; margin: 0; }
.piece-detail__image { display: grid; place-items: center; height: 360px; border: 1px solid var(--line); border-radius: 16px; background: #fff; overflow: hidden; }
.piece-detail__image img { display: block; width: 100%; height: 100%; min-height: 0; padding: 20px; box-sizing: border-box; object-fit: contain; }
.piece-detail__zoom { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 8px; font-size: .86rem; text-underline-offset: 3px; }
.piece-detail__scope { margin: 8px 0; font-size: .8rem; line-height: 1.5; color: var(--muted); }
.piece-detail__information { min-width: 0; overflow-wrap: anywhere; }
.piece-detail__information h2 { margin: 0 0 8px; font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.2; }
.piece-detail__reference { margin: 0 0 24px; color: var(--green-2); font-weight: 700; }
.piece-detail__information h3 { margin: 22px 0 12px; font-size: .94rem; }
.verified-configuration { padding: 16px 18px; margin: 20px 0; border: 1px solid #cbded8; border-radius: 12px; background: #f3f8f6; }
.verified-configuration > h3 { margin: 0 0 10px; color: var(--ink); font-size: .96rem; }
.verified-configuration .piece-detail__attributes dd { font-size: 1rem; color: #154f49; }
.verified-configuration .piece-detail__attributes dt:last-of-type, .verified-configuration .piece-detail__attributes dd:last-of-type { border-bottom: 0; padding-bottom: 0; }
.piece-detail__missing, .piece-detail__selection-guidance { margin: 8px 0 0; font-size: .85rem; line-height: 1.5; color: var(--muted); }
.piece-detail__general { padding: 16px 0 4px; margin-top: 20px; border-top: 1px solid var(--line); }
.piece-detail__general h3 { margin: 0 0 8px; }
.piece-detail__general p, .configuration-notes { margin: 0 0 12px; font-size: .84rem; line-height: 1.5; color: var(--muted); }
.piece-detail__general .btn { min-height: 44px; padding: 10px 14px; font-size: .86rem; }
#detailGeneralRequest { min-height: 44px; justify-self: start; }
#detailVariantFacts { grid-column: 1 / -1; width: 100%; }
.configuration-notes { margin-top: 16px; padding-left: 20px; }
.piece-detail__attributes { display: grid; grid-template-columns: minmax(88px, .75fr) minmax(0, 1.25fr); margin: 0; font-size: .9rem; }
.piece-detail__attributes dt, .piece-detail__attributes dd { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--line); }
.piece-detail__attributes dt { padding-right: 16px; color: var(--muted); }
.piece-detail__attributes dd { font-weight: 600; }
.piece-detail__attribute-source { display: block; margin-top: 6px; color: var(--muted); font-size: .7rem; font-weight: 400; line-height: 1.4; }
.piece-detail__notes { padding: 1px 16px 12px; margin-top: 20px; background: #f5f8f7; border-left: 3px solid #89afa4; border-radius: 0 10px 10px 0; }
.piece-detail__notes ul, .piece-detail__sources { padding-left: 18px; margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.55; }
.piece-detail__notes li + li, .piece-detail__sources li + li { margin-top: 8px; }
.piece-detail__sources small { display: block; }
.piece-detail__purchase { display: grid; grid-template-columns: 86px minmax(0, 1fr); align-items: end; gap: 12px; margin-top: 12px; }
.piece-detail__purchase label { display: grid; gap: 8px; font-size: .82rem; font-weight: 700; }
.piece-detail__purchase input { width: 100%; min-height: 46px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: #fff; }
.piece-detail__purchase .btn { min-height: 46px; padding: 10px 12px; font-size: .86rem; }
.piece-detail__availability, .piece-detail__feedback { font-size: .8rem; line-height: 1.5; color: var(--muted); }
.piece-detail__feedback { color: var(--green-2); }
.piece-detail__feedback:empty { display: none; }
.piece-detail__cart { min-height: 44px; }
@media (max-width: 700px) {
  .piece-dialog { width: calc(100% - 16px); max-height: calc(100dvh - 16px); border-radius: 16px; }
  .piece-dialog__scroll { padding: 18px; padding-bottom: max(18px, env(safe-area-inset-bottom)); }
  .piece-dialog__content { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .piece-detail__image { height: 240px; }
  .piece-detail__purchase { grid-template-columns: 76px minmax(0, 1fr); gap: 10px; }
}

/* Selection stays in normal flow above long notes; no sticky action hides focus. */
.piece-detail__selection { padding: 16px; margin: 20px 0; border: 1px solid var(--line); border-radius: 12px; background: #f3f8f6; }
.piece-detail__selection > h3 { margin: 0 0 8px; }
.piece-detail__selection .piece-detail__purchase { grid-template-columns: minmax(0, 1fr); }
.piece-detail__selection .piece-detail__purchase .field { display: grid; gap: 8px; max-width: 220px; }
.piece-detail__selection .piece-detail__purchase input { text-align: center; }
@media (max-width: 700px) {
  .piece-detail__selection { padding: 14px; }
}