/*
| Epoxy Modern Technical Components
| Reusable tables and Product #10-inspired technical layouts.
*/

.tds-page,
.product-page{
	--tds-navy:#173f5f;
	--tds-blue:#236b8e;
	--tds-pale:#edf5f8;
	--tds-border:#ccd9df;
	--tds-text:#263238;
	--tds-muted:#5d6b73;
	max-width:1180px;
	margin:0 auto;
	padding:1.25rem 1.5rem 3rem;
	color:var(--tds-text);
	line-height:1.55;
}
.tds-hero,
.product-hero{
	border:1px solid var(--tds-border);
	border-top:6px solid var(--tds-navy);
	border-radius:10px;
	background:linear-gradient(135deg,#fff 0%,#f3f8fa 100%);
	padding:1.5rem;
	margin-bottom:1.25rem;
}
.tds-kicker,
.product-eyebrow{
	margin:0 0 .35rem;
	color:var(--tds-blue);
	font-weight:700;
	letter-spacing:.08em;
	text-transform:uppercase;
	font-size:.82rem;
}
.tds-badges,
.product-badges{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1rem}
.tds-badge,
.product-badge{
	display:inline-block;
	padding:.38rem .7rem;
	border-radius:999px;
	background:var(--tds-pale);
	border:1px solid #c7dbe3;
	color:var(--tds-navy);
	font-weight:700;
	font-size:.9rem;
	white-space:nowrap;
}
.tds-grid,
.product-grid{
	display:grid;
	grid-template-columns:repeat(12,minmax(0,1fr));
	gap:1rem;
}
.tds-card,
.product-card{
	grid-column:span 12;
	border:1px solid var(--tds-border);
	border-radius:9px;
	background:#fff;
	padding:1.25rem;
	margin-bottom:1rem;
	box-shadow:0 2px 8px rgba(20,45,60,.05);
}
.tds-card--half,
.product-card--half{grid-column:span 6}
.tds-card--third,
.product-card--third{grid-column:span 4}
.tds-table-wrap,
.product-table-wrap{width:100%;overflow-x:auto;margin:.75rem 0}
.tds-table,
.product-table{
	width:100%;
	border-collapse:collapse;
	font-size:.96rem;
}
.tds-table th,.tds-table td,
.product-table th,.product-table td{
	border:1px solid var(--tds-border);
	padding:.62rem .7rem;
	text-align:left;
	vertical-align:top;
}
.tds-table th,
.product-table th{
	background:var(--tds-pale);
	color:var(--tds-navy);
	font-weight:700;
}
.tds-table tr:nth-child(even) td,
.product-table tr:nth-child(even) td{background:#fafcfd}
.tds-note,
.product-note{color:var(--tds-muted);font-size:.94rem}

@media(max-width:800px){
	.tds-page,.product-page{padding:1rem}
	.tds-card--half,.tds-card--third,
	.product-card--half,.product-card--third{grid-column:span 12}
}