/*
 * Product detail template (Phase B3) — used by product/ecoplasma.html and the generic
 * product/index.html?slug=... renderer. Hero/overview/feature/applications/technical/
 * documentation/related section shapes reuse css/product-pages.css (.detail-hero,
 * .product-overview, .key-features, .feature-grid, .applications, .technical,
 * .specification-state, .documentation, .document-list, .related); this file only adds
 * what B3 needs on top: a flat (title-less) feature-grid item, the technical
 * specification table, the reference/media badges and the not-found state.
 */

/* .detail-hero{display:grid} and [hidden]'s default display:none share the same
   specificity (0,1,0); as an author rule loaded after the UA stylesheet, .detail-hero
   would otherwise win the cascade and defeat `hidden` on #product-not-found /
   #product-content. Making the hidden state explicit here is what actually hides it. */
[hidden]{
display:none !important
}

.product-reference-badge{
display:inline-block;
margin:16px 0 0;
color:#9ed5d3;
font:600 var(--text-sm) var(--font-mono);
letter-spacing:.5px
}

.product-hero-media{
display:flex;
align-items:center;
justify-content:center;
height:100%
}

.product-hero-media span{
padding:14px 26px;
border:1px solid rgba(15,47,47,.22);
border-radius:999px;
background:rgba(255,255,255,.7);
color:var(--color-primary);
font:600 var(--text-sm) var(--font-mono);
letter-spacing:1.5px
}

/* Flat feature list: source data is an array of plain strings, not title+body pairs, so
   each card shows its index and the full feature text rather than an invented heading.
   min-width:0 + overflow-wrap keep long unbroken source tokens (patent numbers, model
   codes) from forcing the whole grid — and the page — wider than the viewport; the full
   text still renders, it just wraps instead of running off the edge. */
.feature-grid-flat article{
display:flex;
flex-direction:column;
min-width:0
}

.feature-grid-flat p{
margin-top:44px;
overflow-wrap:break-word;
font-size:13px;
line-height:1.6;
color:var(--color-muted)
}

#applications-body{
max-width:440px;
align-self:end
}

.applications-list,
.related-body ul{
display:grid;
gap:14px;
padding:0;
margin:0;
list-style:none
}

.applications-list li{
padding:18px 22px;
overflow-wrap:break-word;
background:#fff;
border:1px solid var(--color-line);
border-radius:var(--radius-sm);
font-size:13px;
color:var(--color-muted)
}

/* Grid items default to min-width:auto, which lets a wide descendant (the spec table)
   push the whole .technical grid column — and the page — wider than the viewport before
   .spec-table-wrap's own overflow-x:auto ever gets a chance to scroll internally. Forcing
   min-width:0 on the grid item lets the column shrink first, so the table scrolls inside
   its own box instead of the page. */
#technical-body,
#applications-body{
min-width:0
}

.spec-table-wrap{
overflow-x:auto;
background:#174344;
border-radius:var(--radius-sm)
}

.spec-table{
width:100%;
min-width:520px;
border-collapse:collapse;
font-size:13px
}

.spec-table caption{
padding:16px 22px 0;
text-align:left;
color:#9ed5d3;
font:600 var(--text-xs) var(--font-mono);
letter-spacing:.5px
}

.spec-table th,
.spec-table td{
padding:14px 22px;
text-align:left;
border-bottom:1px solid rgba(255,255,255,.12);
vertical-align:top
}

.spec-table thead th{
color:#9ed5d3;
font:600 var(--text-xs) var(--font-mono);
letter-spacing:.5px;
text-transform:uppercase
}

.spec-table tbody th{
color:#fff;
font-weight:600;
white-space:nowrap
}

.spec-table td{
color:#c8d9d7
}

.spec-group-row th{
padding-top:22px;
color:#9ed5d3;
font:600 var(--text-xs) var(--font-mono);
letter-spacing:.4px;
text-transform:uppercase;
border-bottom:1px solid rgba(255,255,255,.2)
}

.empty-panel{
padding:35px;
background:#174344;
color:#c8d9d7;
border-radius:var(--radius-sm);
font-size:13px
}

.related-body{
margin-top:20px
}

#product-not-found .actions{
display:flex;
flex-wrap:wrap;
gap:24px;
margin-top:35px
}

@media(max-width:780px){
.spec-table{
min-width:460px
}
}