/* ============================================================
   Compare feature - sticky bar, comparison page, share dialog
   Brand: cream #fdfbf7, charcoal #201614, red #c0392b
   Soft yellow diff highlight: #fef6d4 / #f0c43a (border)
   ============================================================ */

/* ---------- v17v — Võrdle corner icon on product cards ----------
   Replaces the old .compare-pill (large rectangular button) with a
   small circular icon in the top-right corner of the product image.
   Tooltip via title attribute on hover. */
.compare-icon {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 10;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	background: rgba(32, 22, 20, 0.82);
	color: #fdfbf7;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	transition:
		background 0.15s,
		color 0.15s,
		transform 0.15s;
}
.compare-icon:hover {
	background: var(--red, #c0392b);
	transform: scale(1.06);
}
.compare-icon:focus-visible {
	outline: 2px solid var(--red, #c0392b);
	outline-offset: 2px;
}
.compare-icon.is-active,
.compare-icon[data-cmp-active="true"] {
	background: var(--red, #c0392b);
}
.compare-icon:disabled,
.compare-icon[aria-disabled="true"] {
	opacity: 0.55;
	cursor: not-allowed;
}
.compare-icon svg {
	width: 14px;
	height: 14px;
}

/* Larger variant on Product Detail Page (PDP) — next to Küsi pakkumist button.
   Inline pill with icon + "Lisa võrdlusele" label. */
.product__compare {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.product__compare svg {
	width: 16px;
	height: 16px;
}

/* When the product card is positioned, pill anchors to it */
.product {
	position: relative;
}

/* ---------- Sticky compare bar (bottom-right floater) ---------- */
.compare-bar {
	position: fixed;
	right: 16px;
	bottom: 80px; /* sits above cart at bottom: 16px */
	z-index: 60;
	width: min(360px, calc(100vw - 32px));
	background: #201614;
	color: #fdfbf7;
	box-shadow:
		0 18px 42px -14px rgba(0, 0, 0, 0.45),
		0 0 0 1px rgba(253, 251, 247, 0.06) inset;
	transform: translateY(120%);
	opacity: 0;
	pointer-events: none;
	transition:
		transform 0.28s cubic-bezier(0.2, 0.85, 0.3, 1),
		opacity 0.2s;
	will-change: transform, opacity;
}
.compare-bar.is-visible {
	transform: translateY(0);
	opacity: 1;
	pointer-events: auto;
}
.compare-bar__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 14px 10px;
	border-bottom: 1px solid rgba(253, 251, 247, 0.08);
}
.compare-bar__title {
	font:
		600 11px / 1 "JetBrains Mono",
		ui-monospace,
		monospace;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(253, 251, 247, 0.65);
}
.compare-bar__count {
	color: var(--red, #c0392b);
	font-weight: 700;
}
.compare-bar__close {
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: rgba(253, 251, 247, 0.55);
	background: transparent;
	border: 0;
	cursor: pointer;
	transition: color 0.15s;
}
.compare-bar__close:hover {
	color: #fdfbf7;
}
.compare-bar__close svg {
	width: 14px;
	height: 14px;
}

.compare-bar__slots {
	display: flex;
	gap: 8px;
	padding: 12px 14px;
}
.compare-slot {
	flex: 1 1 0;
	min-width: 0;
	position: relative;
	aspect-ratio: 1 / 1;
	background: rgba(253, 251, 247, 0.04);
	border: 1px dashed rgba(253, 251, 247, 0.16);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.compare-slot--filled {
	background: rgba(253, 251, 247, 0.06);
	border-style: solid;
	border-color: rgba(253, 251, 247, 0.18);
}
/* v17v — .compare-slot__thumb is now an actual <img> element (or fallback
   placeholder div). Render covers the full square slot under the name overlay. */
.compare-slot__thumb {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: rgba(253, 251, 247, 0.06);
	display: block;
}
.compare-slot__thumb--empty {
	background: linear-gradient(
		135deg,
		rgba(253, 251, 247, 0.04),
		rgba(253, 251, 247, 0.1)
	);
}
.compare-slot__name {
	position: absolute;
	left: 6px;
	right: 6px;
	bottom: 6px;
	font:
		600 10px / 1.15 "Inter",
		sans-serif;
	color: #fdfbf7;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
	text-overflow: ellipsis;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.compare-slot__empty {
	font:
		600 28px / 1 "Inter",
		sans-serif;
	color: rgba(253, 251, 247, 0.18);
}
.compare-slot__remove {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 20px;
	height: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(20, 14, 12, 0.7);
	border: 0;
	color: #fdfbf7;
	cursor: pointer;
	opacity: 0;
	transition:
		opacity 0.15s,
		background 0.15s;
}
.compare-slot:hover .compare-slot__remove {
	opacity: 1;
}
.compare-slot__remove:focus-visible {
	opacity: 1;
	outline: 2px solid #fdfbf7;
	outline-offset: 1px;
}
.compare-slot__remove:hover {
	background: var(--red, #c0392b);
}
.compare-slot__remove svg {
	width: 10px;
	height: 10px;
}

.compare-bar__actions {
	display: flex;
	gap: 8px;
	padding: 0 14px 14px;
}
.compare-bar__cta {
	flex: 1 1 0;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--red, #c0392b);
	color: #fdfbf7;
	font:
		600 13px / 1 "Inter",
		sans-serif;
	letter-spacing: 0.02em;
	border: 0;
	cursor: pointer;
	transition: background 0.15s;
	text-decoration: none;
}
.compare-bar__cta:hover {
	background: var(--red-dark, #a02e22);
}
.compare-bar__cta:disabled,
.compare-bar__cta[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
	background: rgba(253, 251, 247, 0.08);
}
.compare-bar__clear {
	height: 44px;
	padding: 0 14px;
	background: transparent;
	color: rgba(253, 251, 247, 0.6);
	border: 1px solid rgba(253, 251, 247, 0.18);
	font:
		500 12px / 1 "Inter",
		sans-serif;
	cursor: pointer;
	transition:
		color 0.15s,
		border-color 0.15s;
}
.compare-bar__clear:hover {
	color: #fdfbf7;
	border-color: rgba(253, 251, 247, 0.35);
}

/* Mobile tweaks for the bar */
@media (max-width: 540px) {
	.compare-bar {
		right: 8px;
		left: 8px;
		width: auto;
		bottom: 76px;
	}
	.compare-bar__cta {
		font-size: 12px;
	}
	/* v17w — Cap slot dimensions so a single shortlisted product doesn't
	   inflate the bar to fill the viewport (v17v regression). Switch from
	   flex:1 (fills row width) to fixed 60px thumb chips, hide name overlay. */
	.compare-bar__slots {
		padding: 8px 10px;
		gap: 6px;
	}
	.compare-slot {
		flex: 0 0 60px;
		height: 60px;
		aspect-ratio: auto;
	}
	.compare-slot__name {
		display: none;
	}
	.compare-slot__remove {
		width: 18px;
		height: 18px;
		top: 2px;
		right: 2px;
	}
	.compare-slot__remove svg {
		width: 9px;
		height: 9px;
	}
}

/* ---------- Compare table page ---------- */
.cmp {
	background: #faf7f2;
	padding: 56px 0 96px;
}
.cmp__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 32px;
}
.cmp__title {
	font:
		700 clamp(28px, 2vw + 20px, 44px) / 1.1 "Inter",
		sans-serif;
	letter-spacing: -0.015em;
	color: #201614;
	margin: 0;
}
.cmp__subtitle {
	font:
		400 14px / 1.5 "Inter",
		sans-serif;
	color: #5c5147;
	max-width: 56ch;
	margin-top: 10px;
}
.cmp__controls {
	display: flex;
	gap: 12px;
	align-items: center;
	flex-wrap: wrap;
}

/* Difference-highlight toggle */
.cmp-toggle {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font:
		500 13px / 1 "Inter",
		sans-serif;
	color: #201614;
	cursor: pointer;
	user-select: none;
	height: 44px;
	padding: 0 12px 0 8px;
	background: #fdfbf7;
	border: 1px solid rgba(32, 22, 20, 0.14);
}
.cmp-toggle input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.cmp-toggle__track {
	width: 32px;
	height: 18px;
	background: rgba(32, 22, 20, 0.18);
	position: relative;
	transition: background 0.18s;
}
.cmp-toggle__track::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 14px;
	height: 14px;
	background: #fdfbf7;
	transition: transform 0.2s cubic-bezier(0.2, 0.85, 0.3, 1);
}
.cmp-toggle input:checked + .cmp-toggle__track {
	background: var(--red, #c0392b);
}
.cmp-toggle input:checked + .cmp-toggle__track::after {
	transform: translateX(14px);
}
.cmp-toggle:hover {
	border-color: rgba(32, 22, 20, 0.28);
}
.cmp-toggle:focus-within {
	outline: 2px solid var(--red, #c0392b);
	outline-offset: 2px;
}

.cmp__share-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 44px;
	padding: 0 18px;
	font:
		600 13px / 1 "Inter",
		sans-serif;
	color: #fdfbf7;
	background: var(--red, #c0392b);
	border: 0;
	cursor: pointer;
	transition: background 0.15s;
}
.cmp__share-btn:hover {
	background: var(--red-dark, #a02e22);
}
.cmp__share-btn svg {
	width: 16px;
	height: 16px;
}

/* Wrapper handles horizontal scroll when 3 columns don't fit */
.cmp__table-wrap {
	background: #fdfbf7;
	border: 1px solid rgba(32, 22, 20, 0.08);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.cmp__table {
	display: grid;
	/* spec column + N product columns; widths set inline via --cols */
	min-width: 100%;
	width: max-content;
}
.cmp__table[data-cols="2"] {
	grid-template-columns: 220px minmax(260px, 1fr) minmax(260px, 1fr);
	width: 100%;
}
.cmp__table[data-cols="3"] {
	grid-template-columns: 220px minmax(240px, 1fr) minmax(240px, 1fr) minmax(
			240px,
			1fr
		);
	width: 100%;
}
@media (max-width: 900px) {
	.cmp__table[data-cols="2"],
	.cmp__table[data-cols="3"] {
		grid-template-columns: 140px repeat(var(--cols, 2), minmax(220px, 1fr));
		width: max-content;
	}
}

/* v17ad — Mobile (<=640px) — shrink columns + square thumbs so the comparison
   table fits a 390px viewport without forcing massive horizontal scroll. */
@media (max-width: 640px) {
	.cmp__table[data-cols="2"],
	.cmp__table[data-cols="3"] {
		grid-template-columns: 96px repeat(var(--cols, 2), minmax(140px, 1fr));
		font-size: 13px;
	}
	.cmp-header {
		padding: 14px 12px 12px;
		min-height: auto;
		gap: 8px;
	}
	.cmp-header__thumb {
		aspect-ratio: 1 / 1;
	}
	.cmp-header__name {
		font-size: 14px;
		line-height: 1.25;
	}
	.cmp-header__desc {
		display: none;
	}
	.cmp-header__cta {
		padding: 8px 10px;
		font-size: 12px;
	}
	.cmp-row__label,
	.cmp-row__value {
		padding: 10px 12px;
		font-size: 12.5px;
	}
}

/* Header row: product cards */
.cmp-col {
	border-left: 1px solid rgba(32, 22, 20, 0.08);
	background: #fdfbf7;
	display: flex;
	flex-direction: column;
}
.cmp-col--spec {
	border-left: 0;
	background: #faf7f2;
}
.cmp-header {
	padding: 20px 18px 18px;
	border-bottom: 1px solid rgba(32, 22, 20, 0.08);
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-height: 280px;
}
.cmp-header__thumb {
	aspect-ratio: 16 / 10;
	background: linear-gradient(140deg, #4a4f54 0%, #2a1d18 100%);
	position: relative;
	overflow: hidden;
}
.cmp-header__thumb-label {
	position: absolute;
	bottom: 10px;
	left: 10px;
	font:
		600 10px / 1 "JetBrains Mono",
		ui-monospace,
		monospace;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(253, 251, 247, 0.85);
	background: rgba(20, 14, 12, 0.4);
	padding: 4px 8px;
}
.cmp-header__name {
	font:
		700 18px / 1.2 "Inter",
		sans-serif;
	letter-spacing: -0.01em;
	color: #201614;
	margin: 0;
}
.cmp-header__desc {
	font:
		400 13px / 1.4 "Inter",
		sans-serif;
	color: #5c5147;
	margin: 0;
}
.cmp-header__remove {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 28px;
	height: 28px;
	background: rgba(20, 14, 12, 0.06);
	color: #5c5147;
	border: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition:
		background 0.15s,
		color 0.15s;
}
.cmp-header__remove:hover {
	background: var(--red, #c0392b);
	color: #fdfbf7;
}
.cmp-header__remove svg {
	width: 12px;
	height: 12px;
}
.cmp-header__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	font:
		600 12px / 1 "Inter",
		sans-serif;
	color: #201614;
	background: transparent;
	border: 1px solid rgba(32, 22, 20, 0.18);
	text-decoration: none;
	transition:
		background 0.15s,
		color 0.15s,
		border-color 0.15s;
	margin-top: auto;
}
.cmp-header__cta:hover {
	background: #201614;
	color: #fdfbf7;
	border-color: #201614;
}

/* Empty "Lisa kolmas toode" column placeholder */
.cmp-col--empty .cmp-header {
	align-items: center;
	justify-content: center;
	background: repeating-linear-gradient(
		135deg,
		transparent 0 8px,
		rgba(32, 22, 20, 0.025) 8px 9px
	);
	text-align: center;
	min-height: 280px;
}
.cmp-add {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	color: #5c5147;
	font:
		500 12px / 1.4 "Inter",
		sans-serif;
	text-decoration: none;
}
.cmp-add__plus {
	width: 44px;
	height: 44px;
	border: 1.5px dashed rgba(32, 22, 20, 0.32);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #5c5147;
	font:
		300 22px / 1 "Inter",
		sans-serif;
	margin-bottom: 2px;
}
.cmp-add:hover {
	color: #201614;
}
.cmp-add:hover .cmp-add__plus {
	border-color: var(--red, #c0392b);
	color: var(--red, #c0392b);
}

/* Group headings (Mõõdud, Kuju & profiil, etc.) */
.cmp-group-title {
	grid-column: 1 / -1;
	padding: 26px 18px 10px;
	font:
		600 11px / 1 "JetBrains Mono",
		ui-monospace,
		monospace;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--red, #c0392b);
	background: #faf7f2;
	border-top: 1px solid rgba(32, 22, 20, 0.08);
	border-bottom: 1px solid rgba(32, 22, 20, 0.08);
}
.cmp-group-title:first-child {
	border-top: 0;
}

/* Spec rows */
.cmp-row {
	display: contents;
}
.cmp-row__label,
.cmp-row__value {
	padding: 14px 18px;
	border-bottom: 1px solid rgba(32, 22, 20, 0.06);
	font:
		400 14px / 1.4 "Inter",
		sans-serif;
	color: #201614;
	min-width: 0;
	word-wrap: break-word;
}
.cmp-row__label {
	background: #faf7f2;
	color: #5c5147;
	font-weight: 500;
}
.cmp-row__value {
	background: #fdfbf7;
	border-left: 1px solid rgba(32, 22, 20, 0.06);
}
.cmp-row__value strong {
	font-weight: 600;
	color: #201614;
}
.cmp-row__value--empty {
	color: rgba(92, 81, 71, 0.5);
	font-style: italic;
}
.cmp-row__value--check {
	color: #1a7a3b;
}
.cmp-row__value--cross {
	color: rgba(92, 81, 71, 0.7);
}

/* Difference highlight - soft brand yellow */
.cmp__table.is-diff-only .cmp-row.is-same .cmp-row__label,
.cmp__table.is-diff-only .cmp-row.is-same .cmp-row__value {
	background: rgba(32, 22, 20, 0.03);
	color: rgba(92, 81, 71, 0.45);
}
.cmp__table.is-diff-only .cmp-row.is-diff .cmp-row__label,
.cmp__table.is-diff-only .cmp-row.is-diff .cmp-row__value {
	background: #fef6d4;
	border-bottom-color: rgba(240, 196, 58, 0.5);
}
.cmp__table.is-diff-only .cmp-row.is-diff .cmp-row__label {
	border-left: 3px solid #f0c43a;
	padding-left: 15px;
}

/* Empty state (no products in compare) */
.cmp__empty {
	background: #fdfbf7;
	border: 1px solid rgba(32, 22, 20, 0.08);
	padding: 80px 24px;
	text-align: center;
}
.cmp__empty-title {
	font:
		700 22px / 1.2 "Inter",
		sans-serif;
	color: #201614;
	margin: 0 0 8px;
}
.cmp__empty-desc {
	font:
		400 14px / 1.5 "Inter",
		sans-serif;
	color: #5c5147;
	max-width: 44ch;
	margin: 0 auto 24px;
}
.cmp__empty-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 44px;
	padding: 0 22px;
	background: var(--red, #c0392b);
	color: #fdfbf7;
	font:
		600 13px / 1 "Inter",
		sans-serif;
	text-decoration: none;
	transition: background 0.15s;
}
.cmp__empty-cta:hover {
	background: var(--red-dark, #a02e22);
}

/* ---------- Share dialog (Saada võrdlus meilile) ---------- */
.cmp-dialog {
	position: fixed;
	inset: 0;
	z-index: 80;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.cmp-dialog.is-open {
	display: flex;
}
.cmp-dialog__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(20, 14, 12, 0.55);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.cmp-dialog__sheet {
	position: relative;
	width: min(420px, 100%);
	background: #fdfbf7;
	border: 1px solid rgba(32, 22, 20, 0.08);
	box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.35);
	animation: cmp-dialog-in 0.22s cubic-bezier(0.2, 0.85, 0.3, 1);
	/* v17w — Cap height and allow internal scroll so the longer v17v form
	   (name + email + phone + area + notes + 2 checkboxes + submit) is fully
	   reachable on shorter viewports. */
	max-height: 90vh;
	overflow-y: auto;
}
@keyframes cmp-dialog-in {
	from {
		opacity: 0;
		transform: translateY(12px) scale(0.98);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
.cmp-dialog__head {
	padding: 24px 24px 8px;
	position: relative;
}
.cmp-dialog__eyebrow {
	font:
		600 10px / 1 "JetBrains Mono",
		ui-monospace,
		monospace;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--red, #c0392b);
}
.cmp-dialog__title {
	font:
		700 22px / 1.2 "Inter",
		sans-serif;
	color: #201614;
	letter-spacing: -0.01em;
	margin: 10px 0 6px;
}
.cmp-dialog__desc {
	font:
		400 13px / 1.5 "Inter",
		sans-serif;
	color: #5c5147;
	margin: 0;
}
.cmp-dialog__close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	color: #5c5147;
	cursor: pointer;
	transition: color 0.15s;
}
.cmp-dialog__close:hover {
	color: var(--red, #c0392b);
}
.cmp-dialog__close svg {
	width: 14px;
	height: 14px;
}
.cmp-dialog__body {
	padding: 16px 24px 8px;
}
.cmp-dialog__field {
	margin-bottom: 14px;
}
.cmp-dialog__field label {
	display: block;
	font:
		500 12px / 1 "Inter",
		sans-serif;
	color: #5c5147;
	margin-bottom: 6px;
	letter-spacing: 0.02em;
}
.cmp-dialog__field input {
	width: 100%;
	height: 44px;
	padding: 0 14px;
	font:
		400 14px / 1 "Inter",
		sans-serif;
	color: #201614;
	background: #faf7f2;
	border: 1px solid rgba(32, 22, 20, 0.14);
	outline: none;
	transition:
		border-color 0.15s,
		background 0.15s;
}
.cmp-dialog__field input:focus {
	border-color: var(--red, #c0392b);
	background: #fdfbf7;
}
.cmp-dialog__field input[aria-invalid="true"] {
	border-color: var(--red, #c0392b);
	background: rgba(192, 57, 43, 0.04);
}

/* v17w — Textarea styling parity with input. Without these rules the new
   <textarea name="notes"> from v17v inherits the browser default tiny grey box. */
.cmp-dialog__field textarea {
	width: 100%;
	padding: 10px 12px;
	font:
		400 14px / 1.5 "Inter",
		sans-serif;
	color: #201614;
	background: #fdfbf7;
	border: 1px solid #d6cdb8;
	border-radius: 4px;
	outline: none;
	resize: vertical;
	min-height: 80px;
	transition:
		border-color 0.15s,
		background 0.15s;
}
.cmp-dialog__field textarea:focus {
	border-color: var(--red, #c0392b);
	box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12);
}

/* v17w — Subtle suffix for optional field labels ("— valikuline") */
.cmp-dialog__optional {
	color: #8a7f73;
	font-weight: 400;
	font-size: 12px;
	letter-spacing: normal;
	text-transform: none;
}

/* v17x — Per-field error indicator. .cmp-dialog__field[data-invalid] is set
   by compare.js when validation fails. Shows red input border + error text. */
.cmp-dialog__field[data-invalid] input,
.cmp-dialog__field[data-invalid] textarea {
	border-color: var(--red, #c0392b) !important;
	background: rgba(192, 57, 43, 0.04);
}
.cmp-dialog__field[data-invalid] .cmp-dialog__error {
	display: block;
	color: var(--red, #c0392b);
	font:
		500 12px / 1.4 "Inter",
		sans-serif;
	margin-top: 4px;
}
.cmp-dialog__field .cmp-dialog__error {
	display: none;
}

/* v17x — Top-level form error (shown when email AND phone both empty) */
.cmp-dialog__form-error {
	color: var(--red, #c0392b);
	font:
		500 13px / 1.4 "Inter",
		sans-serif;
	padding: 10px 14px;
	background: rgba(192, 57, 43, 0.06);
	border-left: 3px solid var(--red, #c0392b);
	margin: 0 0 12px;
}
.cmp-dialog__form-error:empty {
	display: none;
}
.cmp-dialog__error {
	display: none;
	font:
		500 12px / 1.4 "Inter",
		sans-serif;
	color: var(--red, #c0392b);
	margin-top: 6px;
}
.cmp-dialog__field[data-invalid] .cmp-dialog__error {
	display: block;
}
.cmp-dialog__summary {
	font:
		500 12px / 1.5 "Inter",
		sans-serif;
	color: #5c5147;
	background: #faf7f2;
	padding: 10px 12px;
	border-left: 2px solid var(--red, #c0392b);
	margin-bottom: 14px;
}
.cmp-dialog__summary strong {
	color: #201614;
	font-weight: 600;
}
.cmp-dialog__foot {
	display: flex;
	gap: 10px;
	padding: 16px 24px 24px;
}
.cmp-dialog__cancel,
.cmp-dialog__submit {
	flex: 1 1 0;
	height: 48px;
	font:
		600 13px / 1 "Inter",
		sans-serif;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition:
		background 0.15s,
		color 0.15s,
		border-color 0.15s;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}
.cmp-dialog__cancel {
	background: transparent;
	color: #201614;
	border: 1px solid rgba(32, 22, 20, 0.18);
}
.cmp-dialog__cancel:hover {
	border-color: #201614;
}
.cmp-dialog__submit {
	background: var(--red, #c0392b);
	color: #fdfbf7;
	border: 0;
}
.cmp-dialog__submit:hover {
	background: var(--red-dark, #a02e22);
}
.cmp-dialog__submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Success state */
.cmp-dialog__success {
	display: none;
	padding: 36px 28px;
	text-align: center;
}
.cmp-dialog.is-success .cmp-dialog__body,
.cmp-dialog.is-success .cmp-dialog__foot {
	display: none;
}
.cmp-dialog.is-success .cmp-dialog__success {
	display: block;
}
.cmp-dialog__success-icon {
	width: 56px;
	height: 56px;
	margin: 0 auto 16px;
	background: rgba(26, 122, 59, 0.1);
	color: #1a7a3b;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.cmp-dialog__success-icon svg {
	width: 28px;
	height: 28px;
}
.cmp-dialog__success-title {
	font:
		700 18px / 1.2 "Inter",
		sans-serif;
	color: #201614;
	margin: 0 0 6px;
}
.cmp-dialog__success-desc {
	font:
		400 13px / 1.5 "Inter",
		sans-serif;
	color: #5c5147;
	margin: 0 0 18px;
}
.cmp-dialog__success-close {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 40px;
	padding: 0 18px;
	font:
		600 12px / 1 "Inter",
		sans-serif;
	background: #201614;
	color: #fdfbf7;
	border: 0;
	cursor: pointer;
}

body.cmp-dialog-open {
	overflow: hidden;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.compare-bar,
	.cmp-dialog__sheet,
	.compare-pill,
	.cmp-toggle__track::after {
		transition: none !important;
		animation: none !important;
	}
}

/* v17ac — Reopen FAB (floating action button) for the compare bar.
   Visible only when user has dismissed the bar but still has items in the
   compare cart. Clicking it clears localStorage["bestor.compare.dismissed"]
   and re-shows the full bar. */
.compare-fab {
	position: fixed;
	/* v17ak — bumped from 20px → 84px so this fab stacks ABOVE the paring-fab
	   (paring stays at bottom: 16px, this leaves an 8px gap when both visible
	   together at 1100px viewport where v17ai widened paring-fab's range). */
	bottom: 84px;
	right: 20px;
	z-index: 1200;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #201614;
	color: #fdfbf7;
	border: 0;
	cursor: pointer;
	display: none;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
	transition:
		transform 0.18s ease,
		box-shadow 0.18s ease;
}
.compare-fab.is-visible {
	display: inline-flex;
}
.compare-fab:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32);
}
.compare-fab svg {
	width: 22px;
	height: 22px;
}
.compare-fab__count {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 11px;
	background: #c0392b;
	color: #fdfbf7;
	font:
		700 11px / 22px "JetBrains Mono",
		monospace;
	text-align: center;
	letter-spacing: 0;
}

/* ─── v17ai — /vordlus/ mobile responsive ───────────────────
   compare.js renders product columns as .cmp-col-head / .cmp-col-head__thumb
   / .cmp-col-head__name, but the original compare.css only had .cmp-header*
   rules (wrong/older class). Headers fell back to browser defaults on mobile
   and images overflowed. These rules size the column header content properly
   below 640px and tighten min-column-width below 500px so 2-3 product compare
   fits in a 390px viewport without horizontal scroll. */
/* v17aj — widened mobile-fit window to ≤900px (was ≤640px in v17ai). The
   earlier @media (max-width: 900px) sets width: max-content which, with an
   intrinsic-1200px product thumbnail inside, expanded each column to 1200px
   on iPad/tablet viewports (641-900px). The override below now covers the
   entire sub-desktop range, with cmp-col-head__thumb sized to the column
   instead of the natural image width. */
@media (max-width: 900px) {
	.cmp__table[data-cols="2"],
	.cmp__table[data-cols="3"] {
		width: 100%;
	}
	.cmp__table-wrap {
		overflow-x: hidden;
	}
	.cmp-col-head {
		padding: 14px 12px 12px;
		display: flex;
		flex-direction: column;
		gap: 8px;
		min-width: 0;
	}
	.cmp-col-head__thumb {
		aspect-ratio: 1 / 1;
		width: 100%;
		max-width: 100%;
		overflow: hidden;
		border-radius: 4px;
		background: #f4ede2;
	}
	.cmp-col-head__thumb img {
		width: 100% !important;
		height: 100% !important;
		max-width: 100% !important;
		object-fit: cover;
	}
	.cmp-col-head__name {
		font-size: 13px;
		line-height: 1.25;
		text-wrap: balance;
	}
}
@media (max-width: 500px) {
	/* At 390px viewport the existing 96px + 140px + 140px = 376px column total
	   leaves only 14px for container padding/border, which forces horizontal
	   scroll. Tighten min-widths so 2-product compare fits cleanly at 390px. */
	.cmp__table[data-cols="2"],
	.cmp__table[data-cols="3"] {
		grid-template-columns: 64px repeat(var(--cols, 2), minmax(0, 1fr));
		width: 100%;
	}
	.cmp-col-head {
		padding: 10px 8px 8px;
	}
	.cmp-col-head__name {
		font-size: 12px;
	}
}

/* v17ak — `.cmp-col-head__remove` (the X button to remove a product from the
   comparison) had ZERO sizing rules. The inner <svg viewBox="0 0 24 24"> was
   filling its parent at mobile breakpoints, producing giant black X marks on
   /vordlus/. Anchor the button absolutely inside the (now position:relative)
   col-head, give it a fixed pill size, and cap the SVG. */
.cmp-col-head {
	position: relative;
}
.cmp-col-head__remove {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.94);
	border: 1px solid var(--line, #e0d8c8);
	border-radius: 50%;
	cursor: pointer;
	color: var(--ink, #201614);
	transition:
		background 0.15s,
		transform 0.15s;
	padding: 0;
	z-index: 2;
}
.cmp-col-head__remove:hover {
	background: #fff;
	transform: scale(1.05);
}
.cmp-col-head__remove svg {
	width: 12px;
	height: 12px;
	display: block;
}