/*
 * Front-end supplemental styles (contract §5.4) — T4.
 *
 * Scope: ONLY the two nodes class-kptf-frontend.php emits —
 *   .kptf-dl     the category-params <dl class="bs-spec kptf-dl">
 *   .kptf-figure the size-guide   <figure class="bs-pimg kptf-figure">
 * Section spacing + the <h2 class="bs-modhead"> headings are inherited from the
 * theme; we add nothing there.
 *
 * Why these rules exist: the theme paints the spec block as `.bs-spec__table`
 * (a real <table>) and product shots as `.bs-pimg__fig`; our markup is a <dl>
 * and a bare <figure>, which those theme selectors never reach. We replicate
 * that same look with the theme's own tokens (safe fallbacks for graceful
 * degradation). No !important, no resets, no global element selectors.
 */

/* ---- Category params: render the <dl> as the theme's 2-col spec table ---- */
.kptf-dl {
	display: grid;
	grid-template-columns: minmax(7em, 30%) 1fr;
	margin: 0;
	background: #fff;
	border: 1px solid #ccc;
	border-bottom: 0;
}

.kptf-dl > dt,
.kptf-dl > dd {
	margin: 0;
	padding: 9px 12px;
	font-size: 12.5px;
	line-height: 1.5;
	border-bottom: 1px solid #ccc;
	overflow-wrap: break-word;
}

.kptf-dl > dt {
	font-weight: 700;
	color: var(--bs-ink, #2b2b2b);
	background: var(--bs-surface-2, #f4f1ea);
	border-right: 1px solid #ccc;
}

.kptf-dl > dd {
	color: var(--bs-ink-2, #444);
	background: #fff;
}

/* ---- Size guide: match `.bs-pimg__fig` (border + white bg + caption) ---- */
.kptf-figure {
	margin: 0;
	max-width: 480px;
	background: #fff;
	border: 1px solid var(--bs-line-soft, #ddd);
}

.kptf-figure + .kptf-figure {
	margin-top: 12px;
}

.kptf-figure img {
	display: block;
	width: 100%;
	height: auto;
}

.kptf-figure figcaption {
	padding: 6px 8px;
	font-size: 11.5px;
	text-align: center;
	color: var(--bs-ink-2, #444);
	background: var(--bs-surface-2, #f4f1ea);
	border-top: 1px solid var(--bs-line-soft, #ddd);
}