/* DTB Product Specs: product description + measurements below the gallery and summary.
   With a description: the text on the left half, the measurements panel on the right
   half (the same halves as the gallery and the summary above). Without one: the panel
   runs the full width. Colours follow the DTB theme tokens when they exist (gold accent,
   radius); any theme can set the --dtbs-* variables instead. */
.dtbs {
	--dtbs-accent: var(--dtb-accent, #ba9b37);
	--dtbs-accent-2: var(--dtb-accent-2, #d9c27a);
	--dtbs-radius: var(--dtb-radius, 16px);
	--dtbs-panel: #111;
	--dtbs-panel-text: #f4f4f4;
	--dtbs-panel-muted: #9aa0a6;
	--dtbs-panel-line: rgba(255, 255, 255, .12);
	--dtbs-text-2: #444;
	--dtbs-gutter: 40px;
	grid-column: 1 / -1;
	clear: both;
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	margin: 24px 0 0; /* the theme spaces the next block (related products) itself */
	padding: 0 var(--dtbs-gutter);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: calc(var(--dtbs-gutter) * 2);
	row-gap: 32px;
	align-items: start;
}
.dtbs *, .dtbs *::before, .dtbs *::after { box-sizing: border-box; }
.dtbs--single { grid-template-columns: minmax(0, 1fr); max-width: none; }

/* Description: a gold rule, the first paragraph as a lead, the rest as body text. */
.dtbs__desc { min-width: 0; border-top: 2px solid var(--dtbs-accent); padding-top: 28px; }
.dtbs__desc h2 { font-size: 30px; font-weight: 300; line-height: 1.2; margin: 0 0 18px; text-wrap: balance; }
.dtbs__desc h3 { font-size: 20px; font-weight: 400; margin: 32px 0 12px; }
.dtbs__desc p, .dtbs__desc li { font-size: 16px; line-height: 1.8; color: var(--dtbs-text-2); max-width: 62ch; }
.dtbs__desc p { margin: 0 0 16px; }
.dtbs__desc > p:first-child { font-size: 26px; line-height: 1.45; font-weight: 300; color: inherit; max-width: 34ch; margin-bottom: 22px; }
.dtbs__desc ul, .dtbs__desc ol { margin: 0 0 16px; padding-left: 20px; }
.dtbs__desc a { color: inherit; text-decoration: underline; text-decoration-color: var(--dtbs-accent); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.dtbs__desc a:hover, .dtbs__desc a:focus-visible { color: var(--dtbs-accent); }

/* Measurements panel */
.dtbs__card { background: var(--dtbs-panel); color: var(--dtbs-panel-text); border-radius: var(--dtbs-radius); padding: 34px 38px 28px; min-width: 0; }
.dtbs__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0 0 26px; }
.dtbs__title { font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; line-height: 1.3; color: var(--dtbs-accent-2); margin: 0; }
.dtbs__sub { font-size: 13px; color: var(--dtbs-panel-muted); margin: 0; }

.dtbs__key, .dtbs__grid { display: grid; margin: 0; }
.dtbs__key > div, .dtbs__grid > div { min-width: 0; }
.dtbs dt, .dtbs dd { margin: 0; }

/* Key figures: large gold numbers side by side. */
.dtbs__key { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; padding-bottom: 24px; margin-bottom: 6px; border-bottom: 1px solid var(--dtbs-panel-line); }
.dtbs__key > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; padding: 0 22px; border-left: 1px solid var(--dtbs-panel-line); }
.dtbs__key > div:first-child { padding-left: 0; border-left: 0; }
.dtbs__key dd { font-size: clamp(24px, 1.9vw, 40px); font-weight: 300; line-height: 1.1; color: var(--dtbs-accent-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dtbs__key dt { font-size: 13px; color: #bfc4ca; margin-top: 8px; }

/* Other measurements: column counts come from their number (set on the panel), so the
   last row is as full as it can be. */
.dtbs__grid { grid-template-columns: repeat(var(--dtbs-cols-half, 3), minmax(0, 1fr)); column-gap: 28px; }
.dtbs__grid > div { padding: 16px 0 14px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.dtbs__grid dt { font-size: 12.5px; line-height: 1.35; color: var(--dtbs-panel-muted); }
.dtbs__grid dd { font-size: 18px; margin-top: 3px; font-variant-numeric: tabular-nums; white-space: nowrap; }

.dtbs__note { font-size: 12px; color: #80858b; margin: 18px 0 0; }

/* Full width (no description): more columns, the key figures grouped on the left. */
.dtbs--single .dtbs__grid { grid-template-columns: repeat(var(--dtbs-cols-wide, 5), minmax(0, 1fr)); }
.dtbs--single .dtbs__key { grid-auto-columns: minmax(0, max-content); justify-content: start; }
.dtbs--single .dtbs__key > div { padding: 0 48px; }
.dtbs--single .dtbs__key > div:first-child { padding-left: 0; }
@media (max-width: 1280px) {
	.dtbs--single .dtbs__grid { grid-template-columns: repeat(var(--dtbs-cols-mid, 4), minmax(0, 1fr)); }
}
@media (min-width: 1800px) {
	.dtbs:not(.dtbs--single) .dtbs__grid { grid-template-columns: repeat(var(--dtbs-cols-half-wide, 4), minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
	.dtbs { --dtbs-gutter: 24px; }
	.dtbs__card { padding: 28px 28px 24px; }
}

/* Phone: one column; key figures as rows (label left, number right). */
@media (max-width: 900px) {
	.dtbs { grid-template-columns: minmax(0, 1fr); --dtbs-gutter: 16px; row-gap: 28px; margin: 24px 0 0; }
	.dtbs__desc { padding-top: 22px; }
	.dtbs__desc > p:first-child { font-size: 21px; }
	.dtbs__desc h2 { font-size: 24px; }
	.dtbs__card { padding: 24px 20px 20px; }
	.dtbs__head { margin-bottom: 14px; }
	.dtbs__key, .dtbs--single .dtbs__key { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); padding-bottom: 8px; }
	.dtbs__key > div, .dtbs--single .dtbs__key > div, .dtbs--single .dtbs__key > div:first-child { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-left: 0; }
	.dtbs__key dt { margin-top: 0; font-size: 14px; }
	.dtbs__key dd { font-size: 22px; }
	.dtbs__grid, .dtbs--single .dtbs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
	.dtbs__grid dd { font-size: 17px; white-space: normal; }
}