body.sme-compare-page-active,
body.sme-compare-page-active #page,
body.sme-compare-page-active .site,
body.sme-compare-page-active .site-content,
body.sme-compare-page-active .site-main,
body.sme-compare-page-active .stmv-page-main,
body.sme-compare-page-active main,
body.sme-compare-page-active .entry-content,
body.sme-compare-page-active .woocommerce {
	background: var(--sme-color-surface) !important;
}
body.sme-compare-page-active :where(.entry-header, .page-header, .entry-title, .page-title, .stmv-entry-title),
body.sme-compare-page-active .stmv-entry-card > header:first-child { display: none !important; }
body.sme-compare-page-active :where(.entry-card, article.page),
body.sme-compare-page-active .stmv-container,
body.sme-compare-page-active .stmv-entry-card,
body.sme-compare-page-active .stmv-entry-content {
	width: 100% !important;
	max-width: none !important;
	min-height: 0 !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: var(--sme-color-surface) !important;
	box-shadow: none !important;
}
body.sme-compare-page-active :where(.entry-content, .woocommerce, .site-main, .stmv-page-main) {
	width: 100% !important;
	max-width: none !important;
	margin-inline: 0 !important;
	padding-inline: 0 !important;
	overflow-x: clip;
}
.sme-compare-page {
	width: min(var(--stmv-header-container, var(--stm-header-max-width, 1200px)), calc(100% - 32px));
	max-width: 1200px;
	margin: 6px auto 44px;
	background: var(--sme-color-surface);
	color: var(--sme-color-text);
}
.sme-compare-hero {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 24px 28px;
	border: 1px solid var(--sme-color-border);
	border-radius: 13px;
	background: var(--sme-color-surface);
}
.sme-compare-eyebrow { margin: 0 0 5px; color: var(--sme-color-primary); font-size: 10px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.sme-compare-hero h1 { margin: 0 0 4px; color: var(--sme-color-text); font-size: clamp(28px, 3vw, 40px); line-height: 1.1; }
.sme-compare-hero p:last-child { margin: 0; color: var(--sme-color-muted); font-size: 13px; }
.sme-compare-count-badge {
	display: grid;
	width: 78px;
	height: 78px;
	place-items: center;
	align-content: center;
	border: 1px solid var(--sme-color-primary-soft);
	border-radius: 50%;
	background: var(--sme-color-surface);
	flex: 0 0 auto;
}
.sme-compare-count-badge strong { color: var(--sme-color-primary); font-size: 28px; line-height: 1; }
.sme-compare-count-badge span { margin-top: 5px; color: var(--sme-color-muted); font-size: 9px; }
.sme-compare-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin: 16px 0;
	padding: 15px 18px;
	border: 1px solid var(--sme-color-border);
	border-radius: 11px;
	background: var(--sme-color-surface);
}
.sme-compare-toolbar > div { display: grid; gap: 3px; }
.sme-compare-toolbar strong { color: var(--sme-color-text); font-size: 14px; }
.sme-compare-toolbar span { color: var(--sme-color-muted); font-size: 11px; }
.sme-compare-toolbar__clear {
	display: inline-flex;
	min-height: 34px;
	align-items: center;
	justify-content: center;
	padding: 7px 13px;
	border: 1px solid var(--sme-color-danger);
	border-radius: 999px;
	background: var(--sme-color-surface);
	color: var(--sme-color-danger-dark);
	font-size: 11px;
	font-weight: 800;
	box-shadow: none;
	cursor: pointer;
}
.sme-compare-toolbar__clear:hover,
.sme-compare-toolbar__clear:focus-visible { background: var(--sme-color-danger); color: var(--sme-color-surface); outline: none; }
.sme-compare-toolbar__clear:disabled { border-color: var(--sme-color-border-strong); background: var(--sme-color-surface-soft); color: var(--sme-color-subtle); cursor: not-allowed; }

.sme-compare-grid {
	display: grid;
	grid-template-columns: repeat(var(--sme-compare-columns, 4), minmax(230px, 1fr));
	gap: 14px;
	width: 100%;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	scroll-snap-type: inline proximity;
	scrollbar-gutter: stable;
}
.sme-compare-card {
	position: relative;
	min-width: 0;
	border: 1px solid var(--sme-color-border);
	border-radius: 12px;
	background: var(--sme-color-surface);
	overflow: hidden;
	scroll-snap-align: start;
}
.sme-compare-card__remove {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 3;
	display: inline-flex;
	width: 28px;
	height: 28px;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid var(--sme-color-danger);
	border-radius: 50%;
	background: var(--sme-color-surface);
	color: var(--sme-color-danger);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}
.sme-compare-card__remove:hover,
.sme-compare-card__remove:focus-visible { background: var(--sme-color-danger); color: var(--sme-color-surface); outline: none; }
.sme-compare-card__image {
	display: flex;
	aspect-ratio: 1 / 1;
	align-items: center;
	justify-content: center;
	padding: 18px;
	border-bottom: 1px solid var(--sme-color-border);
	background: var(--sme-color-surface);
}
.sme-compare-card__image img { display: block; width: 100%; height: 100%; margin: 0; object-fit: contain; }
.sme-compare-card__content { display: grid; gap: 14px; padding: 16px; }
.sme-compare-card__title { color: var(--sme-color-link-strong); font-size: 14px; font-weight: 750; line-height: 1.4; text-decoration: none; }
.sme-compare-card__title:hover,
.sme-compare-card__title:focus-visible { text-decoration: underline; text-underline-offset: 2px; outline: none; }
.sme-compare-card__price { color: var(--sme-color-text); font-size: 17px; font-weight: 800; }
.sme-compare-card__price del { color: var(--sme-color-danger-dark); font-size: 11px; opacity: 1; }
.sme-compare-card__price ins { text-decoration: none; }
.sme-compare-card__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sme-compare-card__view,
.sme-compare-card__cart {
	display: inline-flex;
	min-height: 38px;
	align-items: center;
	justify-content: center;
	padding: 8px 10px;
	border: 1px solid var(--sme-color-primary);
	border-radius: 7px;
	font-size: 11px;
	font-weight: 800;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	box-shadow: none;
}
.sme-compare-card__view { background: var(--sme-color-surface); color: var(--sme-color-primary); }
.sme-compare-card__cart { background: var(--sme-color-primary); color: var(--sme-color-surface); }
.sme-compare-card__view:hover,
.sme-compare-card__view:focus-visible { background: var(--sme-color-primary-soft); color: var(--sme-color-primary-hover); outline: none; }
.sme-compare-card__cart:hover,
.sme-compare-card__cart:focus-visible { border-color: var(--sme-color-primary-hover); background: var(--sme-color-primary-hover); color: var(--sme-color-surface); outline: none; }
.sme-compare-card__facts { display: grid; margin: 0; border-top: 1px solid var(--sme-color-border); }
.sme-compare-card__facts > div {
	display: grid;
	grid-template-columns: minmax(82px, .8fr) minmax(0, 1.2fr);
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px solid var(--sme-color-border);
}
.sme-compare-card__facts dt { color: var(--sme-color-muted); font-size: 11px; font-weight: 700; }
.sme-compare-card__facts dd { min-width: 0; margin: 0; color: var(--sme-color-text); font-size: 11px; font-weight: 650; overflow-wrap: anywhere; }
.sme-compare-empty { display: grid; justify-items: center; gap: 12px; padding: 60px 24px; border: 1px dashed var(--sme-color-border-strong); border-radius: 12px; text-align: center; }
.sme-compare-empty > span { display: inline-flex; width: 64px; height: 64px; align-items: center; justify-content: center; border-radius: 50%; background: var(--sme-color-primary-soft); }
.sme-compare-empty img,
.sme-compare-empty svg { width: 32px; height: 32px; }
.sme-compare-empty h2 { margin: 0; color: var(--sme-color-text); font-size: 24px; }
.sme-compare-empty p { max-width: 520px; margin: 0; color: var(--sme-color-muted); }
.sme-compare-empty .button { margin-top: 4px; border: 0; border-radius: 7px; background: var(--sme-color-primary); color: var(--sme-color-surface); box-shadow: none; }

@media (max-width: 1023px) {
	.sme-compare-grid { grid-template-columns: repeat(4, minmax(220px, 280px)); }
}
@media (max-width: 767px) {
	.sme-compare-page { width: calc(100% - 16px); margin-top: 12px; }
	.sme-compare-hero { align-items: flex-start; padding: 18px; }
	.sme-compare-hero h1 { font-size: 28px; }
	.sme-compare-count-badge { width: 64px; height: 64px; }
	.sme-compare-count-badge strong { font-size: 23px; }
	.sme-compare-toolbar { padding: 13px 14px; }
	.sme-compare-grid { grid-template-columns: repeat(4, minmax(210px, 78vw)); gap: 10px; }
}