/* 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. */
.alovesinh-table-compare {
	width: 100%;
	max-width: 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-3 );
	background: var( --alv-c-white );
	box-shadow: var( --alv-sh-2 );
}

/* Relative because the recommended column hangs a ribbon above its own top edge. */
.alovesinh-table-compare thead th {
	position: relative;
	padding: 24px 18px;
	border-right: var( --alv-bd-hairline ) solid var( --alv-compare-border, var( --alv-c-border ) );
	border-bottom: 2px 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 ) );
}

/* The table is fixed, so without these two the four columns split evenly and the criteria wording
	wraps while the yes/no columns sit half empty. The remaining two share what is left, which is
	the source design's 22.222% each. */
.alovesinh-table-compare-criteria {
	width: 31.111%;
	font-size: var( --alv-fs-2 );
	font-weight: var( --alv-fw-extrabold );
	letter-spacing: 0.1em;
	text-align: left;
	text-transform: uppercase;
	color: var( --alv-c-text-muted );
}

.alovesinh-table-compare-column-title {
	margin: 8px 0 4px;
	font-size: var( --alv-fs-4 );
	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: 30px;

	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: 38px;
	height: 38px;
	margin-block: 0;
	border-radius: var( --alv-r-circle );
}

.alovesinh-table-compare-badge svg {
	width: 22px;
	height: 22px;
	stroke-width: 3;
}

.alovesinh-table-compare-ribbon {
	position: absolute;
	top: 0;
	left: 50%;
	padding: 5px 16px;
	border-radius: var( --alv-r-pill );
	font-size: var( --alv-fs-1 );
	font-weight: var( --alv-fw-extrabold );
	letter-spacing: 0.08em;
	white-space: nowrap;
	color: var( --alv-c-white );
	background: var( --alv-c-accent );
	box-shadow: 0 8px 16px color-mix( in srgb, var( --alv-c-accent ) 30%, transparent );
	transform: translate( -50%, -60% );
}

/* 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: linear-gradient(
		180deg,
		color-mix( in srgb, var( --alv-c-danger-pale ) 35%, transparent ),
		color-mix( in srgb, var( --alv-c-danger-pale ) 15%, transparent )
	);
}

.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: linear-gradient(
		180deg,
		color-mix( in srgb, var( --alv-c-warning-pale ) 35%, transparent ),
		color-mix( in srgb, var( --alv-c-warning-pale ) 15%, transparent )
	);
}

.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: linear-gradient(
		180deg,
		color-mix( in srgb, var( --alv-c-brand ) 5%, transparent ),
		color-mix( in srgb, var( --alv-c-brand ) 12%, transparent )
	);
	width: 24.444%;
}

.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: linear-gradient( 135deg, var( --alv-c-brand ), var( --alv-c-brand-deep ) );
}

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

.alovesinh-table-compare thead th:first-child {
	border-top-left-radius: 15px;
}

.alovesinh-table-compare thead th:last-child {
	border-top-right-radius: 15px;
	border-right: 0;
}

/* 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 15px 15px );
}

.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: color-mix( in srgb, var( --alv-c-brand ) 4%, transparent );
}

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

.alovesinh-table-compare-cell {
	height: 56px;
	padding: 16px var( --alv-sp-2 );
	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-size: var( --alv-fs-2 );
	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: 18px;
	height: 18px;
}

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

.alovesinh-table-compare tbody tr > .alovesinh-table-compare-cell-featured {
	background: color-mix( in srgb, var( --alv-c-brand ) 4%, transparent );
}

/* 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-tint );
}

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

.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 the
	pale grey was set for a tick that is no longer drawn here — on a white table it 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-3 );
}

@media ( max-width: 980px ) {

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

	.alovesinh-table-compare-criteria {
		width: 35.556%;
	}

	.alovesinh-table-compare thead th {
		padding: 16px 8px;
	}

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

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

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

	.alovesinh-table-compare-cell {
		min-height: 48px;
		padding: var( --alv-sp-2 ) 4px;
	}
}

/* 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. */
@media ( max-width: 560px ) {

	.alovesinh-table-compare-ribbon {
		right: 0;
		left: auto;
		transform: translateY( -60% );
	}
}

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

/* 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: 6px 14px;
	letter-spacing: 0.14em;
}

.alovesinh-table-spec-title {
	margin: 0 0 var( --alv-sp-2 );
	font-size: clamp( 22px, 2.4vw, 24px );
	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 {
	max-width: 680px;
	margin: 0 0 var( --alv-sp-3 );
	font-size: 16px;
	line-height: var( --alv-lh-loose );
	color: var( --alv-c-text-2 );
}

.alovesinh-table-spec-description em {
	padding: 0 2px;
	font-style: normal;
	font-weight: var( --alv-fw-bold );
	color: var( --alv-c-brand-deep );
	background: linear-gradient( 180deg, transparent 60%, color-mix( in srgb, var( --alv-c-brand ) 16%, transparent ) 60% );
}

/* 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-3 );
	background: var( --alv-c-white );
}

.alovesinh-table-spec-table caption {
	padding: 0 0 10px;
	font-size: var( --alv-fs-2 );
	font-weight: var( --alv-fw-bold );
	letter-spacing: 0.08em;
	text-align: left;
	text-transform: uppercase;
	color: var( --alv-c-text-muted );
}

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

.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: 38%;
	font-weight: var( --alv-fw-semibold );
	text-align: left;
	color: var( --alv-c-ink );
}

.alovesinh-table-spec-table code {
	padding: 2px 8px;
	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-tint );
}

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

.alovesinh-table-spec-list li {
	position: relative;
	padding: 6px 0 6px 18px;
	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: 15px;
	left: 0;
	width: 6px;
	height: 6px;
	border-radius: var( --alv-r-circle );
	background: var( --alv-c-brand );
}

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

.alovesinh-table-spec-list code,
.alovesinh-table-spec-note code {
	padding: 2px 8px;
	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-tint );
}

.alovesinh-table-spec-numbers {
	display: grid;
	grid-template-columns: repeat( 3, 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: 4px;
	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: 1.4;
	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: 3px 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: linear-gradient( 135deg, color-mix( in srgb, var( --alv-c-brand ) 5%, transparent ) 0%, color-mix( in srgb, var( --alv-c-accent ) 3%, transparent ) 100% );
}

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

@media ( max-width: 980px ) {

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

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

	.alovesinh-table-spec-table th,
	.alovesinh-table-spec-table td {
		padding: 11px 14px;
	}
}

/* The frame is what clips, which is the only thing that keeps the head row's tint inside the
	rounded corner instead of squaring it off. */
.alovesinh-table-plain-frame {
	overflow: hidden;
	margin-bottom: var( --alv-sp-4 );
	border: var( --alv-bd-hairline ) solid var( --alv-table-border, var( --alv-c-border ) );
	border-radius: var( --alv-r-3 );
}

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

.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: 14px 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-plain tbody tr:last-child td {
	border-bottom: 0;
}

@media ( max-width: 560px ) {

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

	/* The frame scrolls rather than the table shrinking: three columns of wording squeezed into a
		phone width wrap to two lines a cell and the rows stop reading across. */
	.alovesinh-table-plain-frame {
		overflow-x: auto;
	}

	.alovesinh-table-plain {
		min-width: 460px;
	}
}

/* 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,
.e-con.alovesinh-table-compare-verdict {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: var( --alv-sp-3 );
	margin-top: var( --alv-sp-3 );
	padding: 22px 28px;
	border-top: 2px solid var( --alv-c-border );
	border-radius: var( --alv-r-2 );
	background: linear-gradient(
		135deg,
		color-mix( in srgb, var( --alv-c-brand ) 5%, transparent ),
		color-mix( in srgb, var( --alv-c-accent ) 4%, transparent )
	);
}

/* 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 {
	flex: 0 1 auto;
	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-3 );
}

@media ( max-width: 980px ) {

	.alovesinh-table-compare-verdict,
	.e-con.alovesinh-table-compare-verdict {
		flex-direction: column;
		padding: var( --alv-sp-3 );
	}
}