/* ============================================================
   Tillex — Single-product experience
   Styles the elements injected by the tillex-product mu-plugin
   (badges, material + benefits, datasheet/EPD buttons, colour
   chips, spec/load table, loop badge). Uses tokens.css vars.
   Loaded from functions.php (enqueue added there, not here).
   ============================================================ */

/* ---- Badges row (priority 3) ---- */
.tlx-pd-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 20px;
}
.tlx-badge {
	display: inline-flex;
	align-items: center;
	height: 26px;
	padding: 0 12px;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-pill);
	background: linear-gradient(180deg, #fff, var(--bg-subtle));
	color: var(--ink-600);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.02em;
	white-space: nowrap;
}
.tlx-badge--epd {
	border-color: var(--tillex-yellow);
	background: var(--yellow-100);
	color: var(--ink-800);
	font-weight: 700;
}

/* ---- Material + benefits (priority 25) ---- */
.tlx-pd-material {
	font-weight: 300;
	font-size: 18px;
	line-height: 1.5;
	color: var(--text-body);
	margin: 20px 0 12px;
}
.tlx-pd-material strong {
	font-weight: 700;
}

.tlx-pd-benefits {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
}
.tlx-pd-benefits li {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-weight: 300;
	font-size: 16px;
	line-height: 1.5;
	color: var(--text-body);
	padding: 5px 0;
}
.tlx-pd-benefits li::before {
	content: "";
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	margin-top: 9px;
	background: var(--tillex-yellow);
	border-radius: 0; /* square bullet */
}

/* ---- Datasheet / EPD buttons (priority 35) ---- */
/* Buttons reuse .tlx-btn / .tlx-btn--primary / .tlx-btn--outline from main.css. */
.tlx-pd-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 24px 0 0;
}
.tlx-pd-buttons .tlx-btn {
	text-decoration: none;
}

/* ---- Colour Code System chips (after summary, a) ---- */
.tlx-cc {
	width: 100%;
	margin: clamp(40px, 6vw, 64px) 0 0;
}
.tlx-cc-heading {
	font-size: clamp(20px, 2.6vw, 28px);
	letter-spacing: -0.01em;
	font-weight: 700;
	margin: 0 0 16px;
}
.tlx-cc-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.tlx-cc-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 34px;
	padding: 0 14px;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-pill);
	background: #fff;
	font-size: 13px;
	font-weight: 500;
	color: var(--ink-700);
}
.tlx-cc-chip__label {
	font-variant-numeric: tabular-nums;
}
.tlx-cc-dot {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.18);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

/* ---- Product range & load table (after summary, b) ---- */
.tlx-spec {
	width: 100%;
	margin: clamp(40px, 6vw, 64px) 0 0;
}
.tlx-spec-heading {
	font-size: clamp(20px, 2.6vw, 28px);
	letter-spacing: -0.01em;
	font-weight: 700;
	margin: 0 0 8px;
}
.tlx-spec-caption {
	font-size: 13px;
	line-height: 1.5;
	color: var(--text-muted);
	max-width: 70ch;
	margin: 0 0 20px;
}

.tlx-spec-table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--border-default);
	font-size: 14px;
}
.tlx-spec-table thead th {
	background: #565B5E;
	color: #fff;
	text-align: left;
	text-transform: uppercase;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	padding: 11px 14px;
	white-space: nowrap;
}
.tlx-spec-table tbody td {
	padding: 11px 14px;
	font-size: 14px;
	color: var(--text-body);
	border-bottom: 1px solid var(--border-default);
	vertical-align: middle;
}
.tlx-spec-table tbody tr:nth-child(even) {
	background: var(--bg-subtle);
}
.tlx-spec-table tbody tr:last-child td {
	border-bottom: 0;
}
.tlx-spec-table td.tabular,
.tlx-spec-table .tabular {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.tlx-spec-colour {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 500;
	white-space: nowrap;
}
.tlx-spec-table tbody td strong {
	font-weight: 700;
}

/* ---- Loop / archive badge ---- */
.tlx-loop-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin: 0 18px 12px;
	padding: 3px 9px;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-pill);
	background: var(--yellow-100);
	color: var(--ink-800);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* ---- Badge icons ---- */
.tlx-badge { gap: 6px; }
.tlx-badge__icon { flex: 0 0 auto; width: 15px; height: 15px; }
.tlx-badge--epd { color: var(--ink-800); }

/* ---- Back to products link ---- */
.tlx-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--ink-600);
	font-size: 14px;
	padding: 8px 0;
	margin-bottom: 4px;
}
.tlx-back:hover { color: #000; }