/**
 * Compatibility tool — product-pair verdict section.
 *
 * Tokens are scoped to .sth-compat rather than :root so the theme cannot be
 * affected by them and vice versa. Square corners and flat surfaces throughout:
 * separation comes from the white card against the grey section, not from
 * borders or shadows.
 */

.sth-compat {
	--sth-c-section-bg: #f8f8f8;
	--sth-c-card-bg: #ffffff;
	--sth-c-text: #000000;
	--sth-c-muted: #757575;

	--sth-c-ok-bg: #f2f6ed;
	--sth-c-caution-bg: #fcf6e8;
	--sth-c-avoid-bg: #fbeeec;
	--sth-c-redundant-bg: #f1f1f1;

	--sth-font: inherit;

	--sth-fs-title: 40px;
	--sth-fs-subtitle: 16px;
	--sth-fs-eyebrow: 12px;
	--sth-fs-name: 20px;
	--sth-fs-verdict: 20px;
	--sth-fs-body: 16px;
	--sth-fs-remove: 14px;

	--sth-pad-section-y: 64px;
	--sth-pad-section-x: 48px;
	--sth-max-width: 1440px;
	--sth-gap-columns: 96px;
	--sth-card-pad: 20px;
	--sth-thumb: 144px;

	background: var(--sth-c-section-bg);
	color: var(--sth-c-text);
	font-family: var(--sth-font);
	padding: var(--sth-pad-section-y) var(--sth-pad-section-x);
}

.sth-compat *,
.sth-compat *::before,
.sth-compat *::after {
	box-sizing: border-box;
}

/* The browser's own rule for [hidden] is `display: none`, which any author
 * `display` declaration outranks — and the card rule below sets `display: flex`.
 * Without this, the empty "selected product" card renders on load, next to the
 * search box it is supposed to replace. */
.sth-compat [hidden] {
	display: none !important;
}

.sth-compat__content {
	max-width: var(--sth-max-width);
	margin-inline: auto;
}

/* ---------- Header ---------- */

.sth-compat__title {
	margin: 0;
	font-size: var(--sth-fs-title);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
	text-transform: none;
}

.sth-compat__subtitle {
	margin: 12px 0 0;
	font-size: var(--sth-fs-subtitle);
	line-height: 1.5;
}

/* ---------- Grid ---------- */

.sth-compat__body {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: stretch;
	gap: var(--sth-gap-columns);
	margin-top: 40px;
}

.sth-compat__separator {
	align-self: center;
	font-size: 24px;
	line-height: 1;
	user-select: none;
}

.sth-compat__section {
	min-width: 0;
}

/* ---------- Product card ---------- */

.sth-compat__product {
	position: relative;
	display: flex;
	align-items: center;
	gap: 20px;
	/* width, not just height: the selected card sits inside a flex container, where
	 * a block child would otherwise size to its content and end up visibly
	 * narrower than the left card. */
	width: 100%;
	height: 100%;
	min-height: 184px;
	padding: var(--sth-card-pad);
	background: var(--sth-c-card-bg);
	border-radius: 0;
}

.sth-compat__image {
	flex: 0 0 var(--sth-thumb);
	width: var(--sth-thumb);
	height: var(--sth-thumb);
	object-fit: contain;
	background: var(--sth-c-section-bg);
	border-radius: 0;
}

.sth-compat__image--empty {
	display: block;
}

.sth-compat__meta {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.sth-compat__eyebrow {
	font-size: var(--sth-fs-eyebrow);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--sth-c-muted);
}

.sth-compat__label {
	font-size: var(--sth-fs-name);
	font-weight: 700;
	line-height: 1.3;
}

.sth-compat__price {
	display: block;
	margin-top: 2px;
	font-size: var(--sth-fs-body);
	line-height: 1.4;
}

/* del/ins carry the sale semantics; the theme's underline on <ins> is not wanted. */
.sth-compat__price del {
	margin-right: 8px;
	color: var(--sth-c-muted);
	text-decoration: line-through;
}

.sth-compat__price ins {
	background: none;
	color: var(--sth-c-text);
	font-weight: 700;
	text-decoration: none;
}

/* Desktop: pinned top-right of the card.
 *
 * Scoped under .sth-compat to raise specificity to 0,2,0. WoodMart's base.css
 * carries `:is(.btn, .button, button, [type="submit"], [type="button"])` at
 * 0,1,0 — :is() takes the specificity of its most specific argument, so the
 * class in that list sets the weight. Equal specificity means source order
 * decides, and the theme loads after the plugin, so an unscoped
 * `.sth-compat__remove` loses. Left alone, the theme turns this text link into a
 * grey uppercase button with padding. */
.sth-compat .sth-compat__remove {
	position: absolute;
	top: var(--sth-card-pad);
	right: var(--sth-card-pad);
	width: auto;
	min-width: 0;
	height: auto;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: var(--sth-fs-remove);
	font-weight: 400;
	line-height: 1.4;
	color: var(--sth-c-text);
	/* !important is the only lever here: WoodMart's button reset declares
	 * `text-decoration: none !important`, which outranks any specificity a normal
	 * declaration can reach. With !important on both sides specificity decides
	 * again, and this selector's 0,2,0 beats the theme's 0,1,0. Scoped to this one
	 * property — the element has to read as an underlined text link, not a button. */
	text-decoration: underline !important;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	border-radius: 0;
	box-shadow: none;
}

.sth-compat .sth-compat__remove:hover,
.sth-compat .sth-compat__remove:focus,
.sth-compat .sth-compat__remove:active {
	background: none;
	border: 0;
	box-shadow: none;
	color: var(--sth-c-text);
	text-decoration: underline !important;
}

/* ---------- Search ---------- */

.sth-search {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
}

.sth-search__input-wrap {
	position: relative;
	width: 100%;
}

.sth-search__label {
	position: absolute;
	left: 34px;
	top: 50%;
	transform: translateY(-50%);
	margin: 0;
	font-size: 16px;
	color: var(--sth-c-muted);
	pointer-events: none;
	transition: opacity 0.15s;
}

.sth-search__field:focus ~ .sth-search__label,
.sth-search__field:not(:placeholder-shown) ~ .sth-search__label {
	opacity: 0;
}

.sth-search__icon {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	color: var(--sth-c-muted);
}

.sth-search__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Also scoped: the theme styles inputs by attribute selector
 * (`input[type="text"]`, 0,1,1) and would otherwise reset the left padding to
 * 15px, dropping the text on top of the search icon. */
.sth-compat .sth-search__field {
	width: 100%;
	height: 48px;
	padding: 0 0 0 34px;
	margin: 0;
	border: 0;
	border-bottom: 1px solid var(--sth-c-muted);
	border-radius: 0;
	background: transparent;
	font: inherit;
	/* 16px minimum, or iOS zooms the viewport on focus. */
	font-size: 16px;
	font-weight: 400;
	color: var(--sth-c-text);
	box-shadow: none;
}

.sth-compat .sth-search__field:focus {
	outline: none;
	border-bottom-color: var(--sth-c-text);
	border-bottom-width: 2px;
	background: transparent;
	box-shadow: none;
}

.sth-compat .sth-search__field:focus-visible {
	outline: 2px solid var(--sth-c-text);
	outline-offset: 4px;
}

.sth-search__suggestions {
	position: absolute;
	z-index: 5;
	top: calc(100% + 1px);
	left: 0;
	right: 0;
	max-height: 320px;
	overflow-y: auto;
	margin: 0;
	padding: 0;
	list-style: none;
	background: #fff;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.sth-search__suggestion {
	display: flex;
	align-items: center;
	gap: 12px;
	/* Vertical padding keeps the row past 44px without inflating the type. */
	padding: 12px 16px;
	min-height: 44px;
	cursor: pointer;
	font-size: 15px;
	line-height: 1.4;
}

.sth-search__suggestion:hover,
.sth-search__suggestion[aria-selected="true"] {
	background: var(--sth-c-section-bg);
}

.sth-search__suggestion img {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	object-fit: contain;
}

.sth-search__suggestion-name {
	flex: 1 1 auto;
	min-width: 0;
}

.sth-search__suggestion-price {
	flex: 0 0 auto;
	margin-left: auto;
	padding-left: 12px;
	color: var(--sth-c-muted);
	white-space: nowrap;
}

.sth-search__suggestion--empty {
	cursor: default;
	color: var(--sth-c-muted);
}

.sth-search__suggestion--empty:hover {
	background: none;
}

/* ---------- Verdict banner ---------- */

.sth-compat__message:empty {
	display: none;
}

.sth-verdict {
	margin-top: 40px;
	padding: 32px 24px;
}

.sth-verdict__title {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-size: var(--sth-fs-verdict);
	font-weight: 700;
	line-height: 1.3;
}

.sth-verdict__icon {
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	color: var(--sth-c-text);
}

.sth-verdict__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.sth-verdict__text {
	margin: 12px 0 0;
	font-size: var(--sth-fs-body);
	line-height: 1.6;
	max-width: 90ch;
}

.sth-verdict--compatible {
	background: var(--sth-c-ok-bg);
}

.sth-verdict--caution {
	background: var(--sth-c-caution-bg);
}

.sth-verdict--avoid {
	background: var(--sth-c-avoid-bg);
}

.sth-verdict--redundant,
.sth-verdict--unknown {
	background: var(--sth-c-redundant-bg);
}

/* ---------- Tablet ---------- */

@media (max-width: 1024px) {
	.sth-compat {
		--sth-gap-columns: 40px;
		--sth-thumb: 120px;
		padding: 48px 32px;
	}

	.sth-compat__title {
		font-size: 34px;
	}
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
	.sth-compat {
		--sth-thumb: 120px;
		--sth-card-pad: 16px;
		padding: 32px 16px;
	}

	.sth-compat__body {
		grid-template-columns: 1fr;
		gap: 0;
		margin-top: 24px;
	}

	.sth-compat__separator {
		padding: 24px 0;
		text-align: center;
	}

	.sth-compat__product {
		min-height: 0;
		gap: 16px;
		align-items: flex-start;
	}

	.sth-compat__title {
		font-size: 32px;
	}

	.sth-compat__subtitle {
		font-size: 15px;
	}

	.sth-compat__label {
		font-size: 18px;
	}

	/* Out of the corner and into the flow, under the name. Scoped to match the
	 * desktop rule's specificity — a media query adds none of its own, so an
	 * unscoped selector here would lose to the scoped rule above. */
	.sth-compat .sth-compat__remove {
		position: static;
		top: auto;
		right: auto;
		margin-top: 6px;
		align-self: flex-start;
		/* min-height rather than padding arithmetic: the theme renders buttons as
		 * flex containers, so the box height does not follow padding the way it
		 * would on an inline element — 6px and 9px both measured 42px. Stating the
		 * minimum directly is what actually guarantees the 44px tap target. */
		min-height: 44px;
		padding: 9px 0;
		display: inline-flex;
		align-items: center;
	}

	.sth-verdict {
		margin-top: 24px;
		padding: 24px 16px;
	}

	.sth-verdict__title {
		font-size: 18px;
		align-items: flex-start;
	}

	.sth-verdict__text {
		font-size: 15px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sth-search__label {
		transition: none;
	}
}