/**
 * Porównanie smaków — makieta Premium v2e (isCompare).
 * Tabela: kolumna etykiet 170px + N kolumn produktów. Mobile: scroll-x (min-width jak makieta).
 * Styleguide 1.0: bez zaokrągleń/cieni, podział linią 1px, Jost na nagłówkach.
 */

.hw-compare {
	max-width: 1440px;
	margin: 0 auto;
	padding: 26px 56px 96px;
}

.hw-compare__crumbs {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: #8A9A8E;
}
.hw-compare__crumbs a { color: #8A9A8E; text-decoration: none; }
.hw-compare__crumbs a:hover { color: var(--hw-green, #10261C); }
.hw-compare__crumb-sep { margin: 0 6px; }
.hw-compare__crumb-current { color: var(--hw-green, #10261C); }

.hw-compare__head {
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: 56px;
	align-items: end;
	padding: 34px 0 28px;
	border-bottom: 1px solid rgba(16, 38, 28, .14);
}
.hw-compare__title {
	margin: 0;
	font-family: 'Jost', system-ui, sans-serif;
	font-size: 56px;
	font-weight: 500;
	letter-spacing: -.02em;
	color: var(--hw-green, #10261C);
	line-height: 1;
}
.hw-compare__lead {
	margin: 0;
	font-size: 15px;
	line-height: 1.8;
	color: #4B5A50;
}

.hw-compare__scroll {
	overflow-x: auto;
	padding: 32px 0 0;
}
.hw-compare__table {
	display: grid;
	grid-template-columns: 170px repeat(var(--hw-cmp-cols, 6), minmax(168px, 1fr));
	border-top: 1px solid rgba(16, 38, 28, .14);
	min-width: 1160px;
}

/* Nagłówek kolumny produktu */
.hw-compare__cell--corner { border-right: 1px solid rgba(16, 38, 28, .1); }
.hw-compare__col-head {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px 18px;
	border-right: 1px solid rgba(16, 38, 28, .1);
	border-top: 2px solid rgba(16, 38, 28, .12);
}
.hw-compare__col-frame {
	height: 104px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.hw-compare__col-frame img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}
.hw-compare__col-name {
	font-family: 'Jost', system-ui, sans-serif;
	font-size: 19px;
	font-weight: 500;
	color: var(--hw-green, #10261C);
	line-height: 1.15;
	text-decoration: none;
}
.hw-compare__col-name:hover { color: #8A6A3B; }

/* Komórki wierszy */
.hw-compare__cell {
	display: flex;
	align-items: center;
	padding: 16px 18px;
	border-top: 1px solid rgba(16, 38, 28, .1);
	border-right: 1px solid rgba(16, 38, 28, .1);
	font-size: 13.5px;
	color: #3B4A41;
}
.hw-compare__cell--label {
	background: #EFEDE6;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: #8A9A8E;
}

/* Słodycz — kropki */
.hw-compare__dots { display: inline-flex; gap: 5px; }
.hw-compare__dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: rgba(16, 38, 28, .14);
}
.hw-compare__dot.is-on { background: #B08D57; }
.hw-compare__dash { color: #8A9A8E; }

/* Wiersz ceny + przycisk */
.hw-compare__cell--price {
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 20px 18px;
	border-top: 1px solid rgba(16, 38, 28, .14);
}
.hw-compare__cell--price.hw-compare__cell--label { justify-content: center; }
.hw-compare__price {
	font-family: 'Jost', system-ui, sans-serif;
	font-size: 20px;
	font-weight: 500;
	color: var(--hw-green, #10261C);
}
.hw-compare__add.hw-card__btn { width: 100%; text-align: center; }

/* Stan pusty */
.hw-compare__empty {
	padding: 60px 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
	max-width: 560px;
}
.hw-compare__empty p {
	margin: 0;
	font-size: 15px;
	line-height: 1.8;
	color: #4B5A50;
}

/* Mobile 390 — tabela w poziomym scrollu (makieta), nagłówek jednokolumnowy */
@media (max-width: 860px) {
	.hw-compare { padding: 20px 20px 72px; }
	.hw-compare__head {
		grid-template-columns: 1fr;
		gap: 16px;
		padding: 22px 0 20px;
	}
	.hw-compare__title { font-size: 34px; }
	.hw-compare__lead { font-size: 14px; }
}