/* Shared formal and instant comparison presentation. */
.comparison-difference-controls {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-bottom: var(--space-3);
}

.comparison-difference-controls[hidden],
.comparison-table--products [hidden] {
	display: none !important;
}

.comparison-difference-toggle[aria-pressed="true"] {
	border-color: var(--color-ocean);
	background: var(--color-ocean);
	color: var(--color-white);
}

.comparison-difference-status {
	color: var(--color-ink-soft);
	font-size: var(--text-sm);
}

.instant-compare-table-wrap { overflow-x: auto; }
.instant-compare-table { width: 100%; min-width: 640px; }
.instant-compare-table[data-product-count="3"] { min-width: 865px; }
.instant-compare-table[data-product-count="4"] { min-width: 1090px; }
.instant-compare-table th, .instant-compare-table td { width: auto; min-width: 200px; }
.instant-compare-table th:first-child { min-width: 165px; width: 18%; }
.instant-compare-table [hidden], .js-instant-difference-controls[hidden], .js-instant-compare-replace[hidden], .js-instant-compare-share-fallback[hidden] { display: none !important; }
.instant-compare-panel__header { flex-wrap: wrap; }
.instant-compare-group th { background: var(--color-sand); color: var(--color-ocean); font-weight: 700; }
.instant-compare-source { margin-top: .4rem; color: var(--color-ink-soft); font-size: var(--text-xs); }
.instant-compare-source summary { width: fit-content; cursor: pointer; color: var(--color-ocean); }
.instant-compare-source a { display: block; width: fit-content; overflow-wrap: anywhere; }
.instant-compare-source p { margin: .25rem 0; }
.instant-compare-replace { position: fixed; z-index: 52; inset: auto 12px calc(90px + env(safe-area-inset-bottom, 0px)); max-width: 560px; margin-inline: auto; padding: var(--space-3); border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-white); box-shadow: var(--shadow-soft); }
.instant-compare-replace p { margin: 0 0 var(--space-2); }
.instant-compare-replace .js-instant-compare-replace-options { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--space-2); }
.instant-compare-share-fallback { flex-basis: 100%; max-width: 100%; }
.instant-compare-share-fallback label { display: block; margin-bottom: .3rem; }
.instant-compare-share-fallback input { width: 100%; max-width: 100%; }

@media (max-width: 680px) {
	.comparison-table-wrap--products,
	.instant-compare-table-wrap {
		overflow-x: visible;
	}

	.comparison-table--products,
	.instant-compare-table {
		display: block;
		width: 100%;
		min-width: 0;
	}
	.instant-compare-table[data-product-count="3"],
	.instant-compare-table[data-product-count="4"] { min-width: 0; }

	.comparison-table--products thead,
	.comparison-table--products tbody,
	.instant-compare-table thead,
	.instant-compare-table tbody {
		display: block;
	}

	.comparison-table--products thead tr,
	.instant-compare-table thead tr {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
	}

	.comparison-table--products thead th:first-child,
	.instant-compare-table thead th:first-child {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	.comparison-table--products thead th,
	.instant-compare-table thead th {
		width: auto;
		min-width: 0;
		padding: var(--space-3);
		font-weight: 700;
		line-height: 1.4;
	}

	.comparison-table--products tbody tr,
	.instant-compare-table tbody tr {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		border-top: 1px solid var(--color-line);
	}

	.comparison-table--products tbody th,
	.instant-compare-table tbody th {
		width: auto !important;
		padding: var(--space-2) var(--space-3);
		border: 0;
		background: var(--color-sand);
		color: var(--color-ink);
		font-size: var(--text-sm);
		font-weight: 750;
	}

	.comparison-table--products tbody td,
	.instant-compare-table tbody td {
		width: auto;
		min-width: 0;
		padding: var(--space-2) var(--space-3);
		border-right: 0;
		border-bottom: 0;
		overflow-wrap: anywhere;
	}

	.comparison-table--products tbody td + td,
	.instant-compare-table tbody td + td {
		border-top: 1px solid var(--color-line);
	}

	.comparison-table--products tbody td::before,
	.instant-compare-table tbody td::before {
		display: block;
		margin-bottom: .2rem;
		color: var(--color-ink-soft);
		content: attr(data-product-label);
		font-size: var(--text-xs);
		font-weight: 700;
	}

	.instant-compare-table thead th { padding-block: .35rem; border-bottom: 0; }
	.instant-compare-table tbody .instant-compare-group { border-top: 0; }
	.instant-compare-table tbody .instant-compare-group th { font-size: var(--text-sm); }
	.instant-compare-table tbody td { min-width: 0; }
	.instant-compare-replace { inset-inline: 12px; bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }

	.comparison-table--products .comparison-table__image-row img {
		width: min(100%, 180px);
	}
}