/* =========================================================
   PRODUCT COMPARISON PAGE
   Uses CSS variables from style.css only — no variables
   redefined. Transitions only — no keyframes.
========================================================= */


/* ---------------------------------------------------------
   Header
--------------------------------------------------------- */
.template-compare__header {
	max-width: var(--container-lg);
	margin-inline: auto;
	padding: var(--space-2xl) var(--container-padding-inline) 0;
	text-align: center;
}

.template-compare__title {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-4xl);
	font-weight: var(--font-weight-bold);
	color: var(--color-text-primary);
}

.template-compare__intro {
	margin-top: var(--space-md);
	max-width: var(--container-sm);
	margin-inline: auto;
	color: var(--color-text-secondary);
	line-height: var(--line-height-relaxed);
}


/* ---------------------------------------------------------
   Model Picker Form
--------------------------------------------------------- */
.template-compare__picker {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: var(--space-lg);
	max-width: var(--container-lg);
	margin: var(--space-2xl) auto 0;
	padding: var(--space-lg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background-color: var(--color-background-alt);
}

.template-compare__picker-field {
	flex: 1 1 200px;
}

.template-compare__picker-field label {
	display: block;
	margin-bottom: var(--space-xxs);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	color: var(--color-text-primary);
}

.template-compare__picker-field select {
	width: 100%;
	padding: var(--space-sm) var(--space-md);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background-color: var(--color-background);
	font-size: var(--font-size-md);
	color: var(--color-text-primary);
}

.template-compare__picker-submit {
	flex: 0 0 auto;
}

.template-compare__picker-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-sm) var(--space-2xl);
	border: 1px solid var(--color-accent);
	border-radius: var(--radius-full);
	background-color: var(--color-accent);
	color: var(--color-text-inverse);
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-medium);
	transition: background-color var(--transition-base), transform var(--transition-fast);
}

.template-compare__picker-button:hover,
.template-compare__picker-button:focus-visible {
	background-color: var(--color-accent-dark);
	transform: translateY(-2px);
}


/* ---------------------------------------------------------
   Comparison Table
--------------------------------------------------------- */
.template-compare__table-wrap {
	max-width: var(--container-lg);
	margin: var(--space-2xl) auto var(--space-3xl);
	padding-inline: var(--container-padding-inline);
	overflow-x: auto;
}

.template-compare__table {
	width: 100%;
	border-collapse: collapse;
}

.template-compare__row-label {
	padding: var(--space-md);
	text-align: left;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	color: var(--color-text-muted);
	white-space: nowrap;
	border-bottom: 1px solid var(--color-border);
}

.template-compare__product-col {
	padding: var(--space-md);
	text-align: center;
	border-bottom: 1px solid var(--color-border);
	min-width: 180px;
}

.template-compare__product-image {
	width: 100%;
	max-width: 140px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--radius-md);
	margin-inline: auto;
}

.template-compare__product-name {
	display: block;
	margin-top: var(--space-sm);
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-primary);
}

.template-compare__table tbody tr:nth-child(even) {
	background-color: var(--color-background-alt);
}

.template-compare__table td {
	padding: var(--space-md);
	text-align: center;
	font-size: var(--font-size-sm);
	color: var(--color-text-primary);
	border-bottom: 1px solid var(--color-border);
}


/* ---------------------------------------------------------
   Empty State
--------------------------------------------------------- */
.template-compare__empty {
	max-width: var(--container-lg);
	margin: var(--space-2xl) auto var(--space-3xl);
	padding-inline: var(--container-padding-inline);
	text-align: center;
	color: var(--color-text-muted);
}


/* ---------------------------------------------------------
   Responsive — Mobile
--------------------------------------------------------- */
@media (max-width: 576px) {

	.template-compare__title {
		font-size: var(--font-size-2xl);
	}

	.template-compare__picker {
		flex-direction: column;
		align-items: stretch;
	}

	.template-compare__picker-button {
		width: 100%;
	}
}