/**
 * Cavitar Product Models: model browser (.cpm) and model overview (.cpm-ov) styles.
 *
 * All look-and-feel is driven by the variables below. Defaults follow the Cavitar brand book 2025:
 * Blue Arc #14003c, Cavitar Red #a80000, Bright Red #d20a14, Silver Mist #c0c0c0, white. The product image
 * stage is a light grey derived from Silver Mist. Override from Elementor (Custom CSS) without touching this
 * file, e.g.   .cpm { --cpm-accent: #d20a14; }
 *
 * Buttons and table cells are written with extra specificity on purpose: themes and Elementor kits style every
 * <button> and <th>/<td> (colours, padding, upper-casing), and a single class would lose against that.
 */

.cpm,
.cpm-ov,
.cpm-bc {
	--cpm-ink: #14003c;
	--cpm-accent: #a80000;
	--cpm-accent-bright: #d20a14;
	--cpm-line: #c0c0c0;
	--cpm-bg: #ffffff;
	--cpm-bg-soft: #f4f3f7;
	--cpm-stage-bg: #e9e9ec;         /* light grey behind product images */
	--cpm-stage-rw: 3;               /* shape of the media viewing area (width : height); images are fitted inside it whole, never cropped */
	--cpm-stage-rh: 2;
	--cpm-stage-ratio: var(--cpm-stage-rw) / var(--cpm-stage-rh);
	--cpm-stage-max-mobile: 420px;   /* the viewing area is never taller than this on phones and tablets ... */
	--cpm-stage-max-desktop: 540px;  /* ... and than this from 900 px up */
	--cpm-image-blend: normal;       /* "multiply" would blend white photo backgrounds into a grey backdrop; not used now */
	--cpm-text: #14003c;
	--cpm-muted: #5a5170;
	--cpm-radius: 12px;
	--cpm-radius-sm: 8px;
	--cpm-gap: clamp(16px, 3vw, 32px);
	--cpm-col-gap: clamp(32px, 4vw, 56px);  /* gap between the two columns; the model picker uses the same value to line up with the gallery */
	--cpm-font: inherit;
	--cpm-scroll-offset: 80px;       /* height of a sticky header, so a deep link is not hidden under it */
	--cpm-ov-first: 13rem;           /* width of the fixed feature column in the overview */
	--cpm-ov-col: 10rem;             /* minimum width of a model column in the overview */
	--cpm-ov-vline: #dce8f6;         /* hairline at the right edge of the fixed overview column */
	--cpm-ov-frame: #cbdaee;         /* 1 px outline of the overview: a little darker than the light backgrounds around it */
	--cpm-ov-radius: 12px;           /* corner radius of the overview frame (desktop and tablet) */

	font-family: var(--cpm-font);
	color: var(--cpm-text);
	scroll-margin-top: var(--cpm-scroll-offset);
	box-sizing: border-box;
}

.cpm *,
.cpm *::before,
.cpm *::after,
.cpm-ov *,
.cpm-ov *::before,
.cpm-ov *::after {
	box-sizing: inherit;
}

.cpm [hidden],
.cpm-ov [hidden] {
	display: none !important;
}

.cpm__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.cpm :where(ul, li) {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ---- breadcrumb trail ---- */

.cpm-bc {
	font-family: var(--cpm-font);
	font-size: 0.9rem;
	color: var(--cpm-text);
}

.cpm-bc :where(ol, li) {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cpm-bc ol.cpm-bc__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 0;
}

.cpm-bc li.cpm-bc__item {
	display: inline-flex;
	min-width: 0;
	overflow-wrap: anywhere;
}

.cpm-bc li.cpm-bc__item + li.cpm-bc__item::before {
	/* decorative separator: the second declaration gives it an empty accessible name where supported */
	content: "\203A";
	content: "\203A" / "";
	margin: 0 10px;
	color: var(--cpm-muted);
}

.cpm-bc a:link,
.cpm-bc a:visited {
	color: var(--cpm-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cpm-bc a:hover,
.cpm-bc a:focus {
	color: var(--cpm-ink);
}

.cpm-bc a:focus-visible {
	outline: 3px solid var(--cpm-accent-bright);
	outline-offset: 2px;
}

.cpm-bc [aria-current="page"] {
	font-weight: 600;
	color: var(--cpm-ink);
}

/* ---- message for a link to a model that is not available ---- */

.cpm__linknote:empty {
	display: none;
}

.cpm__linknote-box {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0 0 var(--cpm-gap);
	padding: 14px 16px;
	background: var(--cpm-bg-soft);
	border-left: 4px solid var(--cpm-accent-bright);
	border-radius: 4px;
}

.cpm__linknote-text {
	flex: 1;
	margin: 0;
	font-weight: 600;
}

.cpm button.cpm__linknote-close {
	appearance: none;
	flex: none;
	width: 32px;
	height: 32px;
	min-height: 0;
	margin: -4px -6px 0 0;
	padding: 0;
	font-family: inherit;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--cpm-ink);
	background: transparent;
	border: 0;
	border-radius: 50%;
	box-shadow: none;
	cursor: pointer;
}

.cpm button.cpm__linknote-close:hover,
.cpm button.cpm__linknote-close:focus {
	color: var(--cpm-ink);
	background: var(--cpm-line);
}

/* ---- model picker: a dropdown (shown only when JavaScript is available) ---- */

.cpm__picker {
	display: none;
	width: 100%;
	margin: 0 0 1.5rem;
}

.cpm--js .cpm__picker {
	display: block;
}

/* two columns: the picker is exactly as wide as the gallery column and starts at the same left edge */
@container cpm (min-width: 920px) {
	.cpm__picker {
		width: calc((100% - var(--cpm-col-gap)) / 2);
	}
}

/* a small section heading (still the accessible name of the picker through aria-labelledby) */
.cpm .cpm__picker-label {
	margin: 0 0 0.5rem;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cpm-ink);
}

.cpm__select {
	position: relative;
}

.cpm button.cpm__select-btn {
	appearance: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	min-height: 52px;
	margin: 0;
	padding: 8px 16px;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
	text-shadow: none;
	color: var(--cpm-ink);
	background: var(--cpm-bg);
	border: 2px solid var(--cpm-line);
	border-radius: var(--cpm-radius-sm);
	box-shadow: none;
	cursor: pointer;
	transition: border-color 0.15s;
}

.cpm button.cpm__select-btn:hover,
.cpm button.cpm__select-btn:focus,
.cpm button.cpm__select-btn[aria-expanded="true"] {
	color: var(--cpm-ink);
	background: var(--cpm-bg);
	border-color: var(--cpm-ink);
}

.cpm__select-value {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.cpm__value-name {
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--cpm-ink);
}

.cpm__value-desc {
	overflow: hidden;
	font-size: 0.8125rem;
	font-weight: 400;
	line-height: 1.3;
	color: var(--cpm-muted);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cpm__chev {
	flex: none;
	width: 10px;
	height: 10px;
	margin: -4px 4px 0 0;
	border-right: 2px solid var(--cpm-ink);
	border-bottom: 2px solid var(--cpm-ink);
	transform: rotate(45deg);
	transition: transform 0.15s;
}

.cpm__select-btn[aria-expanded="true"] .cpm__chev {
	margin-top: 4px;
	transform: rotate(-135deg);
}

.cpm ul.cpm__listbox {
	position: absolute;
	z-index: 20;
	top: calc(100% + 6px);
	right: 0;
	left: 0;
	max-height: min(60vh, 26rem);
	margin: 0;
	padding: 6px 0;
	overflow-y: auto;
	background: var(--cpm-bg);
	border: 1px solid var(--cpm-line);
	border-radius: var(--cpm-radius-sm);
	box-shadow: 0 10px 28px rgba(20, 0, 60, 0.16);
}

.cpm__group-label {
	display: block;
	padding: 10px 16px 4px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cpm-accent);
}

.cpm li.cpm__option {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-height: 44px;
	padding: 10px 16px;
	cursor: pointer;
}

.cpm li.cpm__option.is-active {
	background: var(--cpm-bg-soft);
}

.cpm li.cpm__option[aria-selected="true"] {
	box-shadow: inset 3px 0 0 var(--cpm-accent);
}

.cpm__option-name {
	font-weight: 600;
}

.cpm__option-desc {
	font-size: 0.8125rem;
	color: var(--cpm-muted);
}

/* ---- panels ---- */

.cpm__panel + .cpm__panel {
	margin-top: calc(var(--cpm-gap) * 2);
	padding-top: calc(var(--cpm-gap) * 2);
	border-top: 1px solid var(--cpm-line);
}

.cpm--js .cpm__panel + .cpm__panel {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

/* ---- hero: one structure for every model ----
 * Left: the media gallery. Right: series, name and short description, then the accordions (Features, Technical
 * data, Downloads; all closed by default). The right column may be taller than the gallery; the gallery keeps its size.
 * Reading order in the markup: name and description, gallery, accordions. On a narrow
 * browser block that is also the visual order (one column).
 * "Narrow" is decided by the width of the block itself (container query), not by the screen: from 920 px of
 * block width there are two equal columns (each at least ~440 px, enough for a technical data table). */

.cpm {
	width: 100%;
	min-width: 0;
	container: cpm / inline-size;
}

.cpm__hero {
	display: grid;
	column-gap: var(--cpm-col-gap);
	row-gap: 0;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"head"
		"gallery"
		"accs";
}

.cpm__head {
	grid-area: head;
	min-width: 0;
}

.cpm__gallery {
	grid-area: gallery;
	min-width: 0;
	margin-top: 20px;
}

.cpm__accs {
	grid-area: accs;
	min-width: 0;
	margin-top: 24px;
}

/* No media at all: no gallery, the text uses the full width. */
.cpm__hero--nomedia {
	grid-template-areas:
		"head"
		"accs";
}

@container cpm (min-width: 920px) {
	.cpm__hero {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-rows: auto auto 1fr;
		grid-template-areas:
			"gallery head"
			"gallery accs"
			"gallery .";
	}

	.cpm__hero--nomedia {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto;
		grid-template-areas:
			"head"
			"accs";
	}

	/* the gallery keeps its own size: it never stretches with the right column */
	.cpm__gallery {
		align-self: start;
		margin-top: 0;
	}
}

/* Browsers without container queries: decide by the screen width instead (wide enough for two columns). */
@supports not (container-type: inline-size) {
	@media (min-width: 1100px) {
		.cpm__hero:not(.cpm__hero--nomedia) {
			grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
			grid-template-rows: auto auto 1fr;
			grid-template-areas:
				"gallery head"
				"gallery accs"
				"gallery .";
		}

		.cpm__hero:not(.cpm__hero--nomedia) .cpm__gallery {
			align-self: start;
			margin-top: 0;
		}
	}
}

/* ---- media gallery: one stable viewing area, images shown whole ----
 * The viewing area has a fixed shape (--cpm-stage-ratio) and a maximum height, one for phones and one for
 * wide screens. Every image is fitted inside it without cropping or stretching and is never enlarged beyond
 * its own size, so images of any shape leave the layout where it is. */

.cpm__stage {
	position: relative;
	overflow: hidden;
	/* no grey backdrop or frame of its own: the image uses the full width (the thumbnails keep --cpm-stage-bg) */
	background: transparent;
	border-radius: var(--cpm-radius);
}

.cpm__item {
	margin: 0;
}

.cpm .cpm__img {
	display: block;
	max-width: 100%;
	height: auto;
	mix-blend-mode: var(--cpm-image-blend);
}

.cpm--js .cpm__stage {
	width: 100%;
	max-height: var(--cpm-stage-max-mobile);
	aspect-ratio: var(--cpm-stage-ratio);
}

@container cpm (min-width: 920px) {
	.cpm--js .cpm__stage {
		max-height: var(--cpm-stage-max-desktop);
	}
}

.cpm--js .cpm__item {
	position: absolute;
	inset: 0;
}

.cpm--js .cpm__item .cpm__img {
	position: absolute;
	inset: 0;
	/* no inner padding: the picture uses the whole width of the viewing area, keeps its proportions and is shown
	 * whole; a tall picture is limited by the maximum height of the viewing area (below) and centred */
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: contain;
}

/* thumbnails: one row, scrolls sideways when there are many (the layout never grows taller).
 * --cpm-thumb-pad is the room the strip keeps around the tiles for the keyboard focus outline (3 px, drawn 2 px off the tile);
 * the strip scrolls, so it would clip anything outside its padding. */
.cpm__thumbs {
	--cpm-thumb-pad: 5px;
	display: none;
}

.cpm--js .cpm__thumbs {
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	margin: calc(12px - var(--cpm-thumb-pad)) 0 0;
	padding: var(--cpm-thumb-pad) var(--cpm-thumb-pad) 8px;
	overflow-x: auto;
	scrollbar-width: thin;
}

.cpm--js .cpm__thumbs li {
	flex: none;
}

/* Single column (phone, tablet): the viewing area is never taller than --cpm-stage-max-mobile, so with its fixed 3:2 shape it is
 * never wider than max-height x 3/2 (630 px). On a wide column the stage used to be as wide as the column while the picture
 * (fitted inside it) was narrower and centred, and the thumbnail strip started at the column's left edge: they looked
 * disconnected. Now the stage and the strip have ONE width, --cpm-stage-w, and are centred together; with 3:2 pictures their
 * edges are the picture's edges. The strip is 2 x --cpm-thumb-pad wider than that, so that its padding (room for the selection and focus
 * outlines, which would otherwise be clipped by the scrolling strip) lies outside the aligned edges. */
@container cpm (max-width: 919.98px) {
	.cpm__gallery {
		--cpm-stage-w: min(100%, calc(var(--cpm-stage-max-mobile) * var(--cpm-stage-rw) / var(--cpm-stage-rh)));
	}

	.cpm--js .cpm__stage {
		width: var(--cpm-stage-w);
		margin-inline: auto;
	}

	.cpm--js .cpm__thumbs {
		width: calc(var(--cpm-stage-w) + 2 * var(--cpm-thumb-pad));
		margin-inline: calc((100% - (var(--cpm-stage-w) + 2 * var(--cpm-thumb-pad))) / 2); /* centred; minus the padding on each side when the stage fills the column */
		justify-content: space-between; /* fits: spread edge to edge; does not fit: one scrolling row, normal gaps */
	}
}

@supports not (container-type: inline-size) {
	@media (max-width: 1099px) {
		.cpm__gallery {
			--cpm-stage-w: min(100%, calc(var(--cpm-stage-max-mobile) * var(--cpm-stage-rw) / var(--cpm-stage-rh)));
		}

		.cpm--js .cpm__stage {
			width: var(--cpm-stage-w);
			margin-inline: auto;
		}

		.cpm--js .cpm__thumbs {
			width: calc(var(--cpm-stage-w) + 2 * var(--cpm-thumb-pad));
			margin-inline: calc((100% - (var(--cpm-stage-w) + 2 * var(--cpm-thumb-pad))) / 2);
			justify-content: space-between;
		}
	}
}

.cpm button.cpm__thumb {
	appearance: none;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	width: 80px;
	height: 60px;
	min-height: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background: var(--cpm-stage-bg);
	border: 2px solid transparent;
	border-radius: var(--cpm-radius-sm);
	box-shadow: none;
	cursor: pointer;
	opacity: 0.8;
	transition: opacity 0.15s, border-color 0.15s;
}

@container cpm (min-width: 920px) {
	.cpm button.cpm__thumb {
		width: 92px;
		height: 69px;
	}
}

.cpm button.cpm__thumb:hover,
.cpm button.cpm__thumb:focus {
	background: var(--cpm-stage-bg);
	border-color: var(--cpm-line);
	opacity: 1;
}

.cpm button.cpm__thumb.is-active,
.cpm button.cpm__thumb[aria-pressed="true"] {
	border-color: var(--cpm-ink);
	opacity: 1;
}

.cpm .cpm__thumb img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	padding: 3px;
	object-fit: contain;
}

/* the video thumbnail has no picture (nothing is requested from YouTube): a dark tile with a clear play icon */
.cpm button.cpm__thumb--video,
.cpm button.cpm__thumb--video:hover,
.cpm button.cpm__thumb--video:focus {
	color: #fff;
	background: var(--cpm-ink);
}

.cpm button.cpm__thumb--video.is-active,
.cpm button.cpm__thumb--video[aria-pressed="true"] {
	border-color: var(--cpm-accent-bright);
}

.cpm__thumb-label {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1;
}

/* ---- name, description, key features ---- */

.cpm__series {
	margin: 0 0 4px;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cpm-accent);
}

.cpm .cpm__title {
	margin: 0;
	font-size: clamp(1.625rem, 2.6vw, 2.25rem);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: normal;
	text-transform: none;
	color: var(--cpm-ink);
}

.cpm .cpm__title::after {
	/* the red "laser line" motif from the brand book */
	content: "";
	display: block;
	width: 56px;
	height: 3px;
	margin-top: 14px;
	background: var(--cpm-accent);
}

.cpm__desc {
	margin: 14px 0 0;
	color: var(--cpm-muted);
}

.cpm ul.cpm__features {
	display: grid;
	gap: 10px;
	margin: 0;
}

.cpm .cpm__features li {
	position: relative;
	padding-left: 22px;
	font-size: 0.95rem;
	line-height: 1.4;
	color: var(--cpm-ink);
}

.cpm .cpm__features li::before {
	/* a short red line, like the laser line under the name */
	content: "";
	position: absolute;
	top: 0.65em;
	left: 0;
	width: 12px;
	height: 2px;
	background: var(--cpm-accent);
}

/* ---- accordions: technical data, downloads (closed by default, full width) ---- */

.cpm__acc {
	border-bottom: 1px solid var(--cpm-line);
	container: acc / inline-size;
}

.cpm__accs > .cpm__acc:first-child {
	border-top: 1px solid var(--cpm-line);
}

.cpm summary.cpm__acc-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 56px;
	padding: 8px 4px;
	cursor: pointer;
	box-sizing: border-box;
	list-style: none;
}

.cpm summary.cpm__acc-head::-webkit-details-marker {
	display: none;
}

.cpm summary.cpm__acc-head:hover .cpm__acc-title {
	color: var(--cpm-accent);
}

.cpm .cpm__acc-title {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
	color: var(--cpm-ink);
}

.cpm .cpm__acc-count {
	font-weight: 400;
	color: var(--cpm-muted);
}

.cpm__acc-chev {
	flex: none;
	width: 10px;
	height: 10px;
	margin: -4px 4px 0 0;
	border-right: 2px solid var(--cpm-ink);
	border-bottom: 2px solid var(--cpm-ink);
	transform: rotate(45deg);
	transition: transform 0.15s;
}

.cpm__acc[open] .cpm__acc-chev {
	margin-top: 4px;
	transform: rotate(-135deg);
}

.cpm__acc-body {
	/* no empty strip under the content: the accordion's own bottom line is the only separator */
	padding: 0.25rem 0 0;
}

.cpm__acc[data-cpm-acc="downloads"] .cpm__acc-body,
.cpm__acc[data-cpm-acc="features"] .cpm__acc-body {
	padding-bottom: 1rem;
}

.cpm__acc[data-cpm-acc="features"] .cpm__acc-body {
	padding-top: 0.5rem;
}

.cpm table.cpm__specs {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	border: 0;
	font-size: 0.75rem;
	line-height: 1.4;
}

.cpm .cpm__specs th,
.cpm .cpm__specs td {
	padding: 0.4rem 0.75rem;
	text-align: left;
	vertical-align: top;
	background: transparent;
	border: 0;
	font-size: inherit;
	line-height: inherit;
	/* themes often upper-case <th>; that would turn "mm" into "MM" and "720x540" into "720X540" */
	text-transform: none;
	letter-spacing: normal;
}

/* feature names: moderately emphasised; values: normal weight. Column split about 45 / 55. */
.cpm .cpm__specs tbody th[scope="row"] {
	width: 45%;
	max-width: none;
	font-weight: 500;
	color: var(--cpm-accent);
}

.cpm .cpm__specs td,
.cpm .cpm__specs td * {
	font-weight: 400;
}

.cpm .cpm__specs td {
	width: 55%;
}

/* banding instead of lines: the first row is tinted, the second white, and so on (also on a phone) */
.cpm .cpm__specs tbody tr:nth-child(odd) > * {
	background: var(--cpm-bg-soft);
}

.cpm .cpm__specs tbody tr:nth-child(even) > * {
	background: transparent;
}

.cpm .cpm__specs tbody tr.cpm__spec-group > th {
	padding-top: 12px;
	padding-bottom: 8px;
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cpm-ink);
	background: var(--cpm-line);
}

/* label above value when the accordion is narrow (a phone, or a narrow column); text a little larger there */
@container acc (max-width: 480px) {
	.cpm table.cpm__specs {
		font-size: 0.875rem;
	}

	.cpm table.cpm__specs,
	.cpm .cpm__specs tbody,
	.cpm .cpm__specs tr,
	.cpm .cpm__specs th,
	.cpm .cpm__specs td {
		display: block;
		box-sizing: border-box;
		width: 100%;
		max-width: none;
	}

	.cpm .cpm__specs tbody th[scope="row"] {
		width: 100%;
		max-width: none;
		padding-bottom: 0;
	}

	.cpm .cpm__specs td {
		padding-top: 2px;
	}
}

.cpm__notice {
	margin-top: 16px;
	padding: 14px 16px;
	font-size: 0.85rem;
	line-height: 1.5;
	background: var(--cpm-bg-soft);
	border-left: 4px solid var(--cpm-accent);
	border-radius: 4px;
}

.cpm ul.cpm__downloads {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
}

.cpm a.cpm__dl {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2px;
	height: 100%;
	min-height: 44px;
	padding: 12px 16px;
	color: var(--cpm-ink);
	text-decoration: none;
	background: var(--cpm-bg);
	border: 2px solid var(--cpm-line);
	border-radius: var(--cpm-radius-sm);
}

.cpm a.cpm__dl:link,
.cpm a.cpm__dl:visited,
.cpm a.cpm__dl:hover,
.cpm a.cpm__dl:focus {
	color: var(--cpm-ink);
	/* theme rules for links inside post content have very high specificity: a download is a button, not a text link */
	text-decoration: none !important;
}

.cpm a.cpm__dl:hover,
.cpm a.cpm__dl:focus {
	border-color: var(--cpm-accent);
}

.cpm__dl-label {
	font-weight: 600;
}

.cpm__dl-meta {
	font-size: 0.85rem;
	color: var(--cpm-muted);
}

/* ---- video: an item of the gallery; the iframe is added only when the visitor presses play ---- */

.cpm__item--video {
	display: grid;
	background: var(--cpm-ink);
	place-items: center;
}

.cpm__item--mp4 {
	display: block;
}

.cpm .cpm__mp4 {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: contain;
	background: var(--cpm-ink);
}

.cpm button.cpm__video-btn--mp4 {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: rgba(20, 0, 60, 0.22);
}

.cpm button.cpm__video-btn--mp4 .cpm__video-label {
	text-shadow: 0 1px 4px rgba(20, 0, 60, 0.9), 0 0 2px rgba(20, 0, 60, 0.9);
}

.cpm button.cpm__video-btn--mp4:hover,
.cpm button.cpm__video-btn--mp4:focus {
	background: rgba(20, 0, 60, 0.32);
}

.cpm__video-link {
	padding: 16px;
	color: #fff;
	text-align: center;
}

.cpm button.cpm__video-btn {
	appearance: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	height: 100%;
	min-height: 0;
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	color: #fff;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
}

.cpm button.cpm__video-btn:hover,
.cpm button.cpm__video-btn:focus {
	color: #fff;
	background: transparent;
}

.cpm__play {
	position: relative;
	flex: none;
	width: 64px;
	height: 64px;
	background: var(--cpm-accent);
	border-radius: 50%;
}

.cpm__play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-35%, -50%);
	border-color: transparent transparent transparent #fff;
	border-style: solid;
	border-width: 12px 0 12px 20px;
}

.cpm__play--badge {
	position: absolute;
	right: 6px;
	bottom: 6px;
}

.cpm__play--small {
	width: 28px;
	height: 28px;
}

.cpm__play--small::after {
	border-width: 6px 0 6px 10px;
}

.cpm button.cpm__video-btn:hover .cpm__play {
	background: var(--cpm-accent-bright);
}

.cpm__video-frame {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
}

/* ---- keyboard focus ---- */

.cpm button.cpm__select-btn:focus-visible,
.cpm summary.cpm__acc-head:focus-visible,
.cpm button.cpm__thumb:focus-visible,
.cpm button.cpm__video-btn:focus-visible,
.cpm .cpm__mp4:focus-visible,
.cpm button.cpm__linknote-close:focus-visible,
.cpm a.cpm__dl:focus-visible,
.cpm-ov__scroll:focus-visible {
	outline: 3px solid var(--cpm-accent-bright);
	outline-offset: 2px;
}

/* ================================================================================
 * Model overview: models are columns, features are rows
 * ================================================================================ */

.cpm-ov {
	max-width: 100%;
	min-width: 0;
}

.cpm-ov__hint {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 8px;
	padding-left: 8px; /* keeps the text and arrow off the edge of the screen when the table runs edge to edge */
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--cpm-ink);
}

.cpm-ov__hint-arrow {
	position: relative;
	flex: none;
	width: 32px;
	height: 2px;
	background: var(--cpm-accent);
}

.cpm-ov__hint-arrow::after {
	content: "";
	position: absolute;
	top: -5px;
	right: -1px;
	border-color: transparent transparent transparent var(--cpm-accent);
	border-style: solid;
	border-width: 6px 0 6px 8px;
}

.cpm-ov__frame {
	position: relative;
	/* the frame clips the content (the scroller inside it does the scrolling): the header row and the scrolling cells
	 * are cut off by the rounded corners. A 1 px light-blue outline and rounded corners on desktop and tablet; neither on
	 * phones (below 600 px), where the table runs edge to edge. */
	overflow: hidden;
	border: 1px solid var(--cpm-ov-frame);
	border-radius: var(--cpm-ov-radius);
}

@media (max-width: 599px) {
	.cpm-ov__frame {
		border: 0;
		border-radius: 0;
	}
}

.cpm-ov__scroll {
	max-width: 100%;
	overflow-x: auto;
	/* "none", not "contain": "contain" keeps the elastic rubber-band bounce inside the table. While the table bounces,
	 * the fixed first column moves with it and uncovers the model columns that normally slide underneath it.
	 * "none" removes the bounce (and scroll chaining); vertical scrolling still passes on to the page. */
	overscroll-behavior-x: none;
	overscroll-behavior-y: auto;
	-webkit-overflow-scrolling: touch;
}

/* soft shadows that tell the visitor there is more to see; JS switches them on when the table overflows.
 * They are separate overlay elements, NOT box-shadows on the table cells (a box-shadow on the fixed cells paints outside
 * the cell, over its neighbour, and caused artefacts while scrolling). The left one starts exactly where the
 * fixed column (with its 1 px border) ends and lies over the scrolling cells only. */
.cpm-ov__edge {
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 5;
	width: 14px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s;
}

.cpm-ov__edge--left {
	left: var(--cpm-ov-first);
	background: linear-gradient(to right, rgba(20, 0, 60, 0.12), rgba(20, 0, 60, 0));
}

.cpm-ov__edge--right {
	right: 0;
	background: linear-gradient(to left, rgba(20, 0, 60, 0.28), rgba(20, 0, 60, 0));
}

.cpm-ov__frame.has-left .cpm-ov__edge--left,
.cpm-ov__frame.has-right .cpm-ov__edge--right {
	opacity: 1;
}

.cpm-ov table.cpm-ov__table {
	/* fixed layout: every model column is equally wide (at least --cpm-ov-col), long values wrap */
	width: max(100%, calc(var(--cpm-ov-first) + var(--cpm-ov-count, 4) * var(--cpm-ov-col)));
	margin: 0;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 0.9rem;
	table-layout: fixed;
}

.cpm-ov .cpm-ov__table tr {
	--cpm-ov-rowbg: var(--cpm-bg);
}

.cpm-ov .cpm-ov__table thead tr {
	--cpm-ov-rowbg: var(--cpm-ink);
}

.cpm-ov .cpm-ov__table tbody tr:nth-child(even) {
	--cpm-ov-rowbg: var(--cpm-bg-soft);
}

.cpm-ov .cpm-ov__table .cpm-ov__sectionrow,
.cpm-ov .cpm-ov__table .cpm-ov__sectionrow:nth-child(even) {
	--cpm-ov-rowbg: var(--cpm-line);
}

.cpm-ov .cpm-ov__table th,
.cpm-ov .cpm-ov__table td {
	padding: 10px 14px;
	line-height: 1.45;
	overflow-wrap: anywhere;
	text-align: left;
	vertical-align: top;
	background-color: var(--cpm-ov-rowbg);
	background-clip: border-box;
	border: 0; /* no lines between the rows: the alternating row colours separate them */
	text-transform: none;
	letter-spacing: normal;
}

/* the fixed first column: it stays in place while the model columns scroll */
.cpm-ov .cpm-ov__table .cpm-ov__corner,
.cpm-ov .cpm-ov__table .cpm-ov__feature,
.cpm-ov .cpm-ov__table .cpm-ov__section {
	position: sticky;
	left: 0;
	z-index: 3;
	width: var(--cpm-ov-first);
	/* fully opaque, in the colour of the row, and no box-shadow: everything that is drawn stays inside the cell */
	background-color: var(--cpm-ov-rowbg);
	box-shadow: none;
}

/* the right edge of the fixed column: one very faint light-blue 1 px line, a real border of the cell (inside its width;
 * the scrolling cells have no left border, so the line cannot double) */
.cpm-ov .cpm-ov__table .cpm-ov__feature,
.cpm-ov .cpm-ov__table .cpm-ov__section {
	border-right: 1px solid var(--cpm-ov-vline);
}

.cpm-ov .cpm-ov__table .cpm-ov__feature {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--cpm-accent);
}

.cpm-ov .cpm-ov__table td,
.cpm-ov .cpm-ov__table td * {
	font-size: 0.875rem;
	font-weight: 400;
}

.cpm-ov .cpm-ov__table thead th {
	color: #fff;
	border-bottom: 3px solid var(--cpm-accent);
	vertical-align: bottom;
}

.cpm-ov .cpm-ov__table thead .cpm-ov__corner {
	z-index: 4;
}

.cpm-ov__name {
	display: block;
	font-size: 1rem;
	font-weight: 600;
}

.cpm-ov__series {
	display: block;
	margin-top: 2px;
	font-size: 0.75rem;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.78);
}


.cpm-ov .cpm-ov__table .cpm-ov__section {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cpm-ink);
}

.cpm-ov .cpm-ov__table td.cpm-ov__na {
	color: var(--cpm-muted);
}

.cpm-ov .cpm-ov__table td.cpm-ov__na--nap {
	font-style: italic;
}

.cpm-ov__legend-item + .cpm-ov__legend-item::before {
	content: " · ";
}

.cpm-ov__legend {
	margin: 8px 0 0;
	font-size: 0.8125rem;
	color: var(--cpm-muted);
}

@media (max-width: 599px) {
	.cpm-ov {
		--cpm-ov-first: 6.75rem;
		--cpm-ov-col: 8.5rem;
	}

	.cpm-ov table.cpm-ov__table {
		font-size: 0.8125rem;
	}

	.cpm-ov .cpm-ov__table th,
	.cpm-ov .cpm-ov__table td {
		padding: 8px 10px;
	}

	.cpm-ov__name {
		font-size: 0.9375rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cpm button.cpm__select-btn,
	.cpm__chev,
	.cpm__acc-chev,
	.cpm button.cpm__thumb,
	.cpm-ov__edge {
		transition: none;
	}
}