/* Group stylesheet for the table widgets. */

/* separate, not collapse: the rounded frame needs the corner cells to keep their own radius, and
	a collapsed border would flatten them back to square. Fixed layout so the column widths below
	hold whatever text the buyer types. The corner cells take the frame's radius less its hairline. */
.alovesinh-table-compare {
	--alv-compare-inner-radius: calc(var(--alv-r-3) - var(--alv-bd-hairline));
	width: min(100%, var(--alv-w-grid));
	margin-inline: auto;
	border: var(--alv-bd-hairline) solid var(--alv-compare-border, var(--alv-c-border));
	border-radius: var(--alv-r-3);
	border-collapse: separate;
	border-spacing: 0;
	table-layout: fixed;
	font-size: var(--alv-fs-2);
	background: var(--alv-c-white);
	box-shadow: var(--alv-sh-2);
}

.alovesinh-table-compare-criteria {
	width: var(--alv-w-compare-criteria);
	font-size: var(--alv-fs-2);
	font-weight: var(--alv-fw-extrabold);
	letter-spacing: var(--alv-tr-label);
	text-align: left;
	text-transform: uppercase;
	color: var(--alv-c-text-muted);
}

.alovesinh-table-compare-column-title {
	margin: var(--alv-sp-1a) 0 var(--alv-sp-0d);
	font-size: var(--alv-fs-2);
	font-weight: var(--alv-fw-extrabold);
	color: var(--alv-c-ink);
}

/* A typed mark keeps a box the width of the character it holds, because the design tints the two
	weaker columns with a narrow tab rather than a disc - a disc reads as a rank the column has not
	earned. The drawn mark is the one the design does seat in a full disc. */
.alovesinh-table-compare-badge {
	--alv-compare-badge-tab: var(--alv-sp-3e);

	display: inline-grid;
	vertical-align: top;
	width: fit-content;
	height: var(--alv-compare-badge-tab);
	margin: calc((1lh - var(--alv-compare-badge-tab)) / 2) auto;
	border-radius: var(--alv-r-pill);
	font-size: var(--alv-fs-5);
	font-weight: var(--alv-fw-extrabold);
}

.alovesinh-table-compare-badge:has(svg) {
	width: var(--alv-sp-4e);
	height: var(--alv-sp-4e);
	margin-block: 0;
	border-radius: var(--alv-r-circle);
}

.alovesinh-table-compare-badge svg {
	width: var(--alv-sp-3a);
	height: var(--alv-sp-3a);
	stroke-width: var(--alv-stroke-6);
}

/* The ribbon is nowrap, so it grows with its wording. Centred over a narrow phone column it would
	hang past the table's right edge, so it anchors to that edge instead. */
.alovesinh-table-compare-ribbon {
	position: absolute;
	top: calc(-1 * var(--alv-sp-2));
	right: 0;
	left: auto;
	padding: var(--alv-sp-0e) var(--alv-sp-2c);
	border-radius: var(--alv-r-pill);
	font-size: var(--alv-fs-1);
	font-weight: var(--alv-fw-extrabold);
	letter-spacing: var(--alv-tr-label-sm);
	white-space: nowrap;
	color: var(--alv-c-ink);
	background: var(--alv-c-accent-wash);
	box-shadow: var(--alv-sh-lift);
	transform: none;
}

/* Each column is tinted top to bottom, so the header reads as a banner over its column. The tone
	writes the variable the header rule reads: a background set here loses to that rule's class and
	two elements, and the column keeps the shared grey. */
.alovesinh-table-compare-column-danger {
	--alv-compare-head-bg: var(--alv-scene-compare-danger);
}

.alovesinh-table-compare-column-danger .alovesinh-table-compare-column-title {
	color: var(--alv-c-danger-dark);
}

.alovesinh-table-compare-column-danger .alovesinh-table-compare-badge {
	color: var(--alv-c-danger-dark);
	background: var(--alv-c-danger-pale);
}

.alovesinh-table-compare-column-warning {
	--alv-compare-head-bg: var(--alv-scene-compare-warning);
}

.alovesinh-table-compare-column-warning .alovesinh-table-compare-column-title {
	color: var(--alv-c-warning-text);
}

.alovesinh-table-compare-column-warning .alovesinh-table-compare-badge {
	color: var(--alv-c-warning-text);
	background: var(--alv-c-warning-pale);
}

.alovesinh-table-compare-column-brand {
	--alv-compare-head-bg: var(--alv-scene-compare-brand);
	width: var(--alv-w-compare-featured);
}

.alovesinh-table-compare-column-brand .alovesinh-table-compare-column-title {
	color: var(--alv-c-brand-deep);
}

.alovesinh-table-compare-column-brand .alovesinh-table-compare-badge {
	color: var(--alv-c-white);
	background: var(--alv-scene-number-badge);
}

.alovesinh-table-compare-price {
	font-size: var(--alv-fs-1);
	color: var(--alv-c-text-muted);
}

/* The body clips its own bottom corners instead of the table hiding overflow: a hidden overflow
	would also cut off any badge a column header hangs above the top edge. */
.alovesinh-table-compare tbody {
	background: var(--alv-c-white);
	clip-path: inset(0 round 0 0 var(--alv-compare-inner-radius) var(--alv-compare-inner-radius));
}

.alovesinh-table-compare tbody tr {
	transition: background var(--alv-dur-1);
}

.alovesinh-table-compare tbody tr > * {
	border-bottom: var(--alv-bd-hairline) solid var(--alv-compare-border, var(--alv-c-border));
}

.alovesinh-table-compare tbody tr:last-child > * {
	border-bottom: 0;
}

.alovesinh-table-compare tbody tr:nth-child(even) {
	background: var(--alv-c-bg-light);
}

.alovesinh-table-compare tbody tr:hover {
	background: var(--alv-c-brand-trace);
}

.alovesinh-table-compare-name {
	padding: var(--alv-sp-2) var(--alv-sp-1c);
	border-right: var(--alv-bd-hairline) solid var(--alv-compare-border, var(--alv-c-border));
	font-size: var(--alv-fs-2);
	font-weight: var(--alv-fw-semibold);
	text-align: left;
	vertical-align: middle;
	color: var(--alv-c-ink);
}

.alovesinh-table-compare-cell {
	height: var(--alv-sp-5b);
	padding: var(--alv-sp-2) var(--alv-sp-0d);
	border-right: var(--alv-bd-hairline) solid var(--alv-compare-border, var(--alv-c-border));
	font-size: var(--alv-fs-2);
	text-align: center;
	vertical-align: middle;
}

/* The weight and any icon sit on an inner span, not on the cell: a cell that is bold on its own
	would also embolden the plain sentences some rows carry instead of a yes or no. */
.alovesinh-table-compare-cell > span {
	display: inline-flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: 0 var(--alv-sp-1);
	font-weight: var(--alv-fw-semibold);
}

/* A rating answers with five marks and a figure, and on a phone column the pair cannot share a
	line without pushing the table past the screen, so this one cell does break. */
.alovesinh-table-compare-cell > span:has(.alovesinh-star-row) {
	flex-wrap: wrap;
}

.alovesinh-table-compare-cell > span svg {
	width: var(--alv-sp-2d);
	height: var(--alv-sp-2d);
}

.alovesinh-table-compare tbody tr > :last-child {
	border-right: 0;
}

.alovesinh-table-compare tbody tr > .alovesinh-table-compare-cell-featured {
	background: var(--alv-c-brand-trace);
}

/* The featured column keeps its tint through a row hover, one step stronger than the row's own,
	so the eye does not lose the column it is following down the table. */
.alovesinh-table-compare tbody tr:hover > .alovesinh-table-compare-cell-featured {
	background: var(--alv-c-brand-wash);
}

.alovesinh-table-compare-cell-yes {
	color: var(--alv-c-green-deep);
}

.alovesinh-table-compare-cell-no {
	color: var(--alv-c-danger-dark);
}

.alovesinh-table-compare-cell-partial {
	color: var(--alv-c-warning-text);
}

/* Only when the answer is drawn as a chip: the wording then sits on its own amber ground, where
	the bare state has nothing behind it and reads on the row. Named with the pill class too, or
	the cell's span rule above outweighs the chip's bold. */
.alovesinh-pill.alovesinh-table-compare-cell-partial {
	--alv-pill-text: var(--alv-c-warning-text);
	--alv-pill-bg: var(--alv-c-warning-pale);
	font-weight: var(--alv-fw-bold);
}

/* Page ink, not the pale grey: this state carries the row's wording rather than a mark, and on a
	white table the pale grey reads as disabled text the buyer cannot make out. */
.alovesinh-table-compare-cell-not_applicable {
	font-weight: var(--alv-fw-semibold);
	color: var(--alv-c-text-2);
}

.alovesinh-table-compare-note {
	margin-top: var(--alv-sp-2);
	font-size: var(--alv-fs-2);
	color: var(--alv-c-text-muted);
}

.alovesinh-compare-versus {
	--alv-versus-ring-gap: calc((var(--alv-w-versus-ring) - var(--alv-w-versus-core)) / 2);
	--alv-versus-flow: column;
	--alv-versus-flow-mirror: column;
	--alv-versus-align: flex-start;
	--alv-versus-mirror-text: left;
	--alv-versus-card-radius: var(--alv-r-4);
	--alv-card-pad: var(--alv-sp-2);
	--alv-card-border: transparent;
	--alv-card-border-hover: transparent;
	--alv-card-shadow: var(--alv-sh-2);
	--alv-icon-box: var(--alv-sp-4b);
	--alv-icon-size: var(--alv-sp-3);
	--alv-icon-radius: var(--alv-r-circle);
	--alv-icon-color: var(--alv-c-white);
	display: grid;
}

.alovesinh-compare-versus-rows {
	display: grid;
	row-gap: var(--alv-sp-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.alovesinh-compare-versus-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: var(--alv-sp-2);
}

.alovesinh-compare-versus-tone-neutral {
	--alv-icon-bg: var(--alv-c-slate);
	--alv-versus-label: var(--alv-c-slate);
	--alv-versus-line: var(--alv-c-slate-pale);
	--alv-versus-dot: var(--alv-c-slate);
}

.alovesinh-compare-versus-tone-danger {
	--alv-icon-bg: var(--alv-c-danger);
	--alv-versus-label: var(--alv-c-danger-dark);
	--alv-versus-line: var(--alv-c-danger-pale);
	--alv-versus-dot: var(--alv-c-danger);
}

.alovesinh-compare-versus-tone-warning {
	--alv-icon-bg: var(--alv-scene-versus-warning);
	--alv-versus-label: var(--alv-c-warning-text);
	--alv-versus-line: var(--alv-c-orange-light);
	--alv-versus-dot: var(--alv-c-accent);
}

.alovesinh-compare-versus-tone-brand {
	--alv-icon-bg: var(--alv-scene-number-badge);
	--alv-versus-label: var(--alv-c-brand-deep);
	--alv-versus-line: var(--alv-c-brand-light);
	--alv-versus-dot: var(--alv-c-brand);
}

.alovesinh-compare-versus-card {
	align-items: var(--alv-versus-align);
	width: 100%;
	min-width: 0;
	min-height: var(--alv-h-versus-card);
	border-radius: var(--alv-versus-card-radius);
}

.alovesinh-compare-versus-card-left {
	flex-direction: var(--alv-versus-flow-mirror);
	text-align: var(--alv-versus-mirror-text);
}

.alovesinh-compare-versus-card-right {
	flex-direction: var(--alv-versus-flow);
}

.alovesinh-compare-versus-icon {
	box-shadow: var(--alv-sh-1);
}

.alovesinh-compare-versus-text {
	min-width: 0;
}

.alovesinh-compare-versus-name {
	display: block;
	margin-bottom: var(--alv-sp-0b);
	font-size: var(--alv-fs-1a);
	line-height: var(--alv-lh-snug);
	color: var(--alv-c-text-muted);
}

.alovesinh-compare-versus-value {
	display: block;
	font-size: var(--alv-fs-3);
	font-weight: var(--alv-fw-bold);
	line-height: var(--alv-lh-snug);
	color: var(--alv-c-ink);
}

.alovesinh-compare-versus-core {
	position: relative;
	width: var(--alv-w-versus-core);
	height: var(--alv-w-versus-core);
	margin: var(--alv-versus-ring-gap) auto calc(var(--alv-versus-ring-gap) + var(--alv-sp-3));
	border-radius: var(--alv-r-circle);
	background: var(--alv-c-white);
}

.alovesinh-compare-versus-ring {
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--alv-w-versus-ring);
	height: var(--alv-w-versus-ring);
	margin: calc(var(--alv-w-versus-ring) / -2) 0 0 calc(var(--alv-w-versus-ring) / -2);
	overflow: visible;
}

.alovesinh-compare-versus-ring-line {
	fill: none;
	stroke: var(--alv-c-white);
	stroke-width: var(--alv-bd-heavy);
}

.alovesinh-compare-versus-ring-path {
	fill: none;
}

.alovesinh-compare-versus-ring-label {
	font-size: var(--alv-fs-1a);
	font-weight: var(--alv-fw-bold);
	letter-spacing: var(--alv-tr-label-lg);
	text-transform: uppercase;
	text-anchor: middle;
	dominant-baseline: central;
	fill: var(--alv-versus-label);
}

.alovesinh-compare-versus-links {
	position: absolute;
	top: 50%;
	left: 50%;
	display: none;
	overflow: visible;
	transform: translate(-50%, -50%);
}

.alovesinh-compare-versus-link-line {
	stroke: var(--alv-versus-line);
	stroke-width: var(--alv-bd-medium);
}

.alovesinh-compare-versus-link-dot {
	fill: var(--alv-versus-dot);
}

/* Raised like a doorbell: a short shadow under the disc instead of a halo all round, and a light top rim over a
	darker bottom one. The rim is drawn on ::after because the picture fills the frame and would hide an inset shadow. */
.alovesinh-compare-versus-photo {
	overflow: hidden;
	border-radius: var(--alv-r-circle);
	box-shadow:
		0 0 0 var(--alv-sp-0d) var(--alv-c-white),
		0 var(--alv-sp-1a) var(--alv-sp-2d) var(--alv-c-ink-glow),
		0 var(--alv-sp-0c) var(--alv-sp-1) var(--alv-c-ink-tint);
	transition:
		transform var(--alv-dur-3) ease,
		box-shadow var(--alv-dur-3) ease;
}

.alovesinh-compare-versus-photo::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background:
		radial-gradient(circle at 35% 22%, var(--alv-c-glass-veil) 0%, transparent 42%),
		linear-gradient(180deg, transparent 55%, var(--alv-c-ink-tint) 100%);
	box-shadow:
		inset 0 var(--alv-sp-0d) var(--alv-sp-1) var(--alv-c-glass-sheen),
		inset 0 calc(-1 * var(--alv-sp-1)) var(--alv-sp-1c) var(--alv-c-ink-glow);
	pointer-events: none;
}

/* The same lift and timing as the cards around it (.alovesinh-card:hover in alovesinh-base.css). */
.alovesinh-compare-versus-core:hover .alovesinh-compare-versus-photo {
	box-shadow:
		0 0 0 var(--alv-sp-0d) var(--alv-c-white),
		0 var(--alv-sp-2b) var(--alv-sp-3b) var(--alv-c-ink-glow),
		0 var(--alv-sp-0d) var(--alv-sp-1a) var(--alv-c-ink-tint);
	transform: translateY(calc(-1 * var(--alv-sp-0d)));
}

/* Pressed: the button sinks back, as a doorbell does under a finger. */
.alovesinh-compare-versus-core:active .alovesinh-compare-versus-photo {
	box-shadow:
		0 0 0 var(--alv-sp-0d) var(--alv-c-white),
		0 var(--alv-sp-0b) var(--alv-sp-0d) var(--alv-c-ink-glow);
	transform: translateY(calc(-1 * var(--alv-sp-0a)));
}

/* Wider and looser than the shared badge: this one holds a numbered section name in capitals. */
.alovesinh-table-spec-label {
	gap: var(--alv-sp-2);
	margin-bottom: var(--alv-sp-2);
	padding: var(--alv-sp-1) var(--alv-sp-2b);
	letter-spacing: var(--alv-tr-label-lg);
}

.alovesinh-table-spec-title {
	margin: 0 0 var(--alv-sp-2);
	font-size: clamp(var(--alv-fs-4b), var(--alv-fs-grow-0a), var(--alv-fs-5));
	font-weight: var(--alv-fw-extrabold);
	letter-spacing: var(--alv-tr-tight-1);
	color: var(--alv-c-ink);
}

/* Held to a reading measure rather than the panel width: the table beside it runs full width and
	a paragraph that long is hard to track back to the next line. */
.alovesinh-table-spec-description {
	width: min(100%, var(--alv-w-offer));
	margin: 0 0 var(--alv-sp-3);
	font-size: var(--alv-fs-3a);
	line-height: var(--alv-lh-loose);
	color: var(--alv-c-text-2);
}

.alovesinh-table-spec-description em {
	padding: 0 var(--alv-sp-0b);
	font-style: normal;
	font-weight: var(--alv-fw-bold);
	color: var(--alv-c-brand-deep);
	background: var(--alv-scene-marker);
}

/* Separate, not collapse, for the reason the comparison table gives at the top of this file. */
.alovesinh-table-spec-table {
	width: 100%;
	border: var(--alv-bd-hairline) solid var(--alv-spec-border, var(--alv-c-border));
	border-radius: var(--alv-r-2);
	border-collapse: separate;
	border-spacing: 0;
	font-size: var(--alv-fs-2);
	background: var(--alv-c-white);
}

.alovesinh-table-spec-table caption {
	padding: 0 0 var(--alv-sp-1c);
	font-size: var(--alv-fs-2);
	font-weight: var(--alv-fw-bold);
	letter-spacing: var(--alv-tr-label-sm);
	text-align: left;
	text-transform: uppercase;
	color: var(--alv-c-text-muted);
}

.alovesinh-table-plain th {
	padding: var(--alv-sp-2) var(--alv-sp-3);
	border-bottom: var(--alv-bd-hairline) solid var(--alv-table-border, var(--alv-c-border));
	font-size: var(--alv-fs-2);
	font-weight: var(--alv-fw-semibold);
	letter-spacing: var(--alv-tr-wide-1);
	text-align: left;
	text-transform: uppercase;
	color: var(--alv-c-text-muted);
	background: var(--alv-c-bg-light);
}

.alovesinh-table-plain td {
	padding: var(--alv-sp-2b) var(--alv-sp-3);
	border-bottom: var(--alv-bd-hairline) solid var(--alv-table-border, var(--alv-c-border));
	font-size: var(--alv-fs-3);
	color: var(--alv-c-text-2);
}

.alovesinh-table-spec-table th,
.alovesinh-table-spec-table td {
	padding: var(--alv-sp-1d) var(--alv-sp-2b);
	border-bottom: var(--alv-bd-hairline) solid var(--alv-spec-border, var(--alv-c-border));
	vertical-align: top;
	color: var(--alv-c-text-2);
}

/* Relative because the recommended column hangs a ribbon above its own top edge. */
.alovesinh-table-compare thead th {
	position: relative;
	padding: var(--alv-sp-2c) var(--alv-sp-1a);
	border-right: var(--alv-bd-hairline) solid var(--alv-compare-border, var(--alv-c-border));
	border-bottom: var(--alv-bd-thick) solid var(--alv-compare-border, var(--alv-c-border));
	text-align: center;
	vertical-align: middle;
	background: var(--alv-compare-head-bg, var(--alv-c-bg-light));
}

.alovesinh-table-compare thead th:first-child {
	border-top-left-radius: var(--alv-compare-inner-radius);
}

.alovesinh-table-compare thead th:last-child {
	border-top-right-radius: var(--alv-compare-inner-radius);
	border-right: 0;
}

.alovesinh-table-spec-table tr:last-child th,
.alovesinh-table-spec-table tr:last-child td {
	border-bottom: 0;
}

.alovesinh-table-spec-table tr:hover th,
.alovesinh-table-spec-table tr:hover td {
	background: var(--alv-c-bg-light);
}

/* The corner cells round their own backgrounds, which would otherwise paint square past the frame
	on hover. The inner radius is the frame's less its hairline, so the two curves stay parallel. */
.alovesinh-table-spec-table tr:first-child > :first-child {
	border-top-left-radius: calc(var(--alv-r-2) - var(--alv-bd-hairline));
}

.alovesinh-table-spec-table tr:first-child > :last-child {
	border-top-right-radius: calc(var(--alv-r-2) - var(--alv-bd-hairline));
}

.alovesinh-table-spec-table tr:last-child > :first-child {
	border-bottom-left-radius: calc(var(--alv-r-2) - var(--alv-bd-hairline));
}

.alovesinh-table-spec-table tr:last-child > :last-child {
	border-bottom-right-radius: calc(var(--alv-r-2) - var(--alv-bd-hairline));
}

.alovesinh-table-spec-table .alovesinh-table-spec-name {
	width: var(--alv-w-spec-name);
	font-weight: var(--alv-fw-semibold);
	text-align: left;
	color: var(--alv-c-ink);
}

.alovesinh-table-spec-table code,
.alovesinh-table-spec-list code,
.alovesinh-table-spec-note code {
	padding: var(--alv-sp-0b) var(--alv-sp-1a);
	border-radius: var(--alv-r-1);
	font-size: var(--alv-fs-2);
	font-weight: var(--alv-fw-semibold);
	color: var(--alv-c-brand-deep);
	background: var(--alv-c-brand-wash);
}

.alovesinh-table-spec-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.alovesinh-table-spec-list li {
	position: relative;
	padding: var(--alv-sp-1) 0 var(--alv-sp-1) var(--alv-sp-2d);
	font-size: var(--alv-fs-3);
	line-height: var(--alv-lh-copy);
	color: var(--alv-c-text-2);
}

.alovesinh-table-spec-list li::before {
	content: '';
	position: absolute;
	top: calc(var(--alv-sp-1) + (1lh - var(--alv-sp-1)) / 2);
	left: 0;
	width: var(--alv-sp-1);
	height: var(--alv-sp-1);
	border-radius: var(--alv-r-circle);
	background: var(--alv-c-brand);
}

.alovesinh-table-spec-note strong {
	font-weight: var(--alv-fw-bold);
	color: var(--alv-c-brand-deep);
}

.alovesinh-table-spec-list li strong {
	font-weight: var(--alv-fw-bold);
	color: var(--alv-c-ink);
}

.alovesinh-table-spec-numbers {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--alv-sp-2);
	margin-top: var(--alv-sp-3);
}

.alovesinh-table-spec-figure {
	--alv-box-pad: var(--alv-sp-2);
	--alv-box-radius: var(--alv-r-1);
}

.alovesinh-table-spec-figure-value {
	display: block;
	margin-bottom: var(--alv-sp-0d);
	font-size: var(--alv-fs-5);
	font-weight: var(--alv-fw-extrabold);
	letter-spacing: var(--alv-tr-tight-2);
	color: var(--alv-c-ink);
}

.alovesinh-table-spec-figure-name {
	display: block;
	font-size: var(--alv-fs-2);
	line-height: var(--alv-lh-caption);
	color: var(--alv-c-text-muted);
}

/* A quoted aside, not a footnote: the brand edge and the wash mark it as the reason the numbers
	above matter, which is the one part of the panel a skimming reader stops on. */
.alovesinh-table-spec-note {
	margin-top: var(--alv-sp-3);
	padding: var(--alv-sp-3);
	border-left: var(--alv-bd-heavy) solid var(--alv-c-brand);
	border-radius: 0 var(--alv-r-2) var(--alv-r-2) 0;
	font-size: var(--alv-fs-3);
	line-height: var(--alv-lh-copy);
	color: var(--alv-c-text-2);
	background: var(--alv-scene-spec-note);
}

.alovesinh-table-plain {
	width: 100%;
	border-collapse: collapse;
}

.alovesinh-table-plain tbody tr:last-child td {
	border-bottom: 0;
}

/* The strip that closes the comparison. A rule along the top and a two-tone wash tie it to the
	table above, so the verdict reads as the table's conclusion rather than as a new block; laid
	out as a row because the sentence and the button answer each other. */
.alovesinh-table-compare-verdict {
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--alv-sp-3);
	padding: var(--alv-sp-3);
	border-top: var(--alv-bd-thick) solid var(--alv-c-border);
	background: var(--alv-scene-compare-verdict);
}

/* The sentence and the button share one line and squeeze each other until they fit, which is what
	breaks the button's wording over two lines. A builder widget is laid out at the full width of
	its row, so without this the button has nothing left to sit in and drops below the sentence. */
.alovesinh-table-compare-verdict > .elementor-widget {
	width: auto;
}

.alovesinh-table-compare-verdict .alovesinh-paragraph {
	margin: 0;
	font-size: var(--alv-fs-3);
	line-height: var(--alv-lh-body);
	color: var(--alv-c-text-2);
}

@media (min-width: 561px) {
	.alovesinh-table-compare-ribbon {
		right: auto;
		left: var(--alv-pos-center);
		transform: translateX(calc(-1 * var(--alv-pos-center)));
	}

	.alovesinh-table-spec-numbers {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 981px) {
	.alovesinh-table-compare {
		font-size: var(--alv-fs-3);
	}

	.alovesinh-table-compare-criteria {
		width: var(--alv-w-compare-criteria-wide);
	}

	.alovesinh-table-spec-table th,
	.alovesinh-table-spec-table td {
		padding: var(--alv-sp-1) var(--alv-sp-1a);
	}

	.alovesinh-table-compare thead th {
		padding: var(--alv-sp-3b) var(--alv-sp-2d);
	}

	.alovesinh-table-compare-column-title {
		font-size: var(--alv-fs-4);
	}

	.alovesinh-table-compare-price {
		font-size: var(--alv-fs-2);
	}

	.alovesinh-table-compare-name {
		padding: var(--alv-sp-2) var(--alv-sp-3);
		font-size: var(--alv-fs-3);
	}

	.alovesinh-table-compare-cell {
		padding: var(--alv-sp-2c) var(--alv-sp-2);
	}

	.alovesinh-table-spec-numbers {
		grid-template-columns: repeat(3, 1fr);
	}

	.alovesinh-table-spec-table {
		font-size: var(--alv-fs-3);
	}

	.alovesinh-table-compare-verdict {
		padding: var(--alv-sp-3a) var(--alv-sp-3d);
	}

	.e-con.alovesinh-table-compare-verdict {
		--flex-direction: row;
		--container-widget-height: 100%;
		--container-widget-flex-grow: 1;
		--container-widget-align-self: stretch;
		--flex-wrap-mobile: wrap;
	}
}

@media (min-width: 1241px) {
	.alovesinh-compare-versus {
		--alv-versus-flow: row;
		--alv-versus-flow-mirror: row-reverse;
		--alv-versus-align: center;
		--alv-versus-mirror-text: right;
		--alv-versus-card-radius: var(--alv-r-pill);
		--alv-icon-box: var(--alv-w-versus-icon);
		--alv-icon-size: var(--alv-sp-3b);
		align-items: center;
		justify-items: center;
	}

	.alovesinh-compare-versus-rows {
		grid-row: 1;
		grid-column: 1;
		row-gap: var(--alv-sp-4);
		width: 100%;
	}

	.alovesinh-compare-versus-row {
		grid-template-columns: minmax(0, 1fr) var(--alv-w-versus-core) minmax(0, 1fr);
		column-gap: var(--alv-sp-3e);
		height: var(--alv-h-versus-card);
	}

	.alovesinh-compare-versus-card {
		max-width: var(--alv-w-versus-card);
	}

	.alovesinh-compare-versus-card-left {
		grid-column: 1;
		justify-self: end;
	}

	.alovesinh-compare-versus-card-right {
		grid-column: 3;
		justify-self: start;
	}

	.alovesinh-compare-versus-row:not(:first-child):not(:last-child)
		.alovesinh-compare-versus-card-left {
		margin-right: var(--alv-w-versus-arc);
	}

	.alovesinh-compare-versus-row:not(:first-child):not(:last-child)
		.alovesinh-compare-versus-card-right {
		margin-left: var(--alv-w-versus-arc);
	}

	.alovesinh-compare-versus-name,
	.alovesinh-compare-versus-value {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.alovesinh-compare-versus-core {
		grid-row: 1;
		grid-column: 1;
		z-index: 1;
		margin: 0;
	}

	.alovesinh-compare-versus-links {
		display: block;
	}
}

@media (prefers-reduced-motion: reduce) {
	.alovesinh-compare-versus-photo {
		transition: none;
	}

	.alovesinh-compare-versus-core:hover .alovesinh-compare-versus-photo,
	.alovesinh-compare-versus-core:active .alovesinh-compare-versus-photo {
		transform: none;
	}
}