/* Item pages (item.php) - extends the clearance detail layout in style.css. */
.item-detail-media { background: #fff; padding: clamp(16px, 3vw, 40px); box-sizing: border-box; max-height: 560px; }
.item-detail-media-empty { display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); font-size: var(--text-sm); background: var(--tile-bg, #f6f5f1); }
.item-detail-desc { margin: 0; font-size: var(--text-lg); font-weight: 600; color: var(--color-text); }
.item-detail .clearance-spec-table td { overflow-wrap: anywhere; }
.item-detail-xref h2,
.item-detail-docs h2 { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); margin: 0 0 var(--space-2); }
.item-detail-xref ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.item-detail-xref li { border: 1px solid var(--color-divider); border-radius: 999px; padding: 3px 10px; font-size: var(--text-xs); background: var(--color-surface); }
.item-detail-xref li span { color: var(--color-text-muted); }
.item-detail-docs ul { margin: 0; padding-left: 1.1em; font-size: var(--text-sm); }
.item-detail-docs li + li { margin-top: 4px; }
.item-detail-source { margin: 0; font-size: var(--text-xs); color: var(--color-text-muted); }
.item-detail-source a { margin-left: 4px; font-weight: 700; color: var(--color-primary, #8f221c); }
.item-detail-price { margin: var(--space-2, 8px) 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.item-detail-price strong { font-size: var(--text-xl, 1.5rem); color: var(--color-text); }
.item-detail-price span { color: var(--color-text-muted); font-size: var(--text-sm); }
.item-detail-price small { flex-basis: 100%; color: var(--color-text-muted); font-size: var(--text-xs); }
.item-detail-page .breadcrumbs { flex-wrap: wrap; row-gap: 4px; }