/* Comparator [sb_comparador]. Colours and font from the Elementor kit (primary #F4B106, Bai Jamjuree).
   Button rules use .sb-cmp.sb-cmp so the theme / kit button styles (incl. :hover) don't leak in. */

.sb-cmp {
	--sb-accent: var(--e-global-color-primary, #F4B106);
	--sb-dark: #1F1E1E;
	--sb-light: #F1F2F4;
	--sb-line: #E2E3E6;
	--sb-cols: 220px repeat(3, minmax(0, 1fr));
	color: #000;
	font-size: 15px;
	line-height: 1.35;
}

.sb-cmp .sb-cmp-h {
	margin: 0 0 24px;
	color: #000;
	font-size: 36px;
	font-weight: 500;
	line-height: 1.2;
	text-transform: none;
}

/* ---------- Buttons (reset theme styles) ---------- */
.sb-cmp.sb-cmp button {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: 1.25;
	white-space: normal;
}
.sb-cmp.sb-cmp button,
.sb-cmp.sb-cmp button:hover,
.sb-cmp.sb-cmp button:focus {
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
	cursor: pointer;
}
.sb-cmp.sb-cmp button:focus-visible {
	outline: 2px solid var(--sb-accent);
	outline-offset: 2px;
}
.sb-cmp.sb-cmp button:disabled {
	cursor: default;
}

/* ---------- Top: intro + 3 slots, on the same columns as the table ---------- */
.sb-cmp-top,
.sb-cmp-row {
	display: grid;
	grid-template-columns: var(--sb-cols);
	gap: 0 16px;
}
.sb-cmp-top {
	gap: 16px;
	align-items: stretch;
}
.sb-cmp-intro {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 12px;
	padding-bottom: 4px;
}
.sb-cmp-title {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.15;
	text-transform: uppercase;
}
.sb-cmp.sb-cmp .sb-cmp-clear {
	align-self: flex-start;
	padding: 9px 16px;
	border: 1px solid var(--sb-dark);
	border-radius: 4px;
	background: #fff;
	color: var(--sb-dark);
	font-size: 14px;
}
.sb-cmp.sb-cmp .sb-cmp-clear:hover:not(:disabled) {
	background: var(--sb-dark);
	color: #fff;
}
.sb-cmp.sb-cmp .sb-cmp-clear:disabled {
	opacity: .35;
	background: #fff;
	color: var(--sb-dark);
}

.sb-cmp-slot {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 270px;
	padding: 12px;
	border-radius: 8px;
	background: var(--sb-light);
}
.sb-cmp-num {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #666;
}
.sb-cmp.sb-cmp .sb-cmp-pick {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 8px;
	padding: 16px 8px;
	border: 2px dashed #C4C6CB;
	border-radius: 6px;
	background: transparent;
	color: var(--sb-dark);
	font-weight: 600;
}
.sb-cmp.sb-cmp .sb-cmp-pick span {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--sb-accent);
	color: #000;
	font-size: 26px;
	line-height: 1;
}
.sb-cmp.sb-cmp .sb-cmp-pick:hover {
	border-color: var(--sb-accent);
	background: #fff;
	color: var(--sb-dark);
}
.sb-cmp-sel {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.sb-cmp-sel[hidden],
.sb-cmp-pick[hidden] {
	display: none !important;
}
.sb-cmp-img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: contain;
	margin: 6px 0;
}
.sb-cmp-name {
	color: #000 !important;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	overflow-wrap: anywhere;
}
.sb-cmp-name:hover {
	text-decoration: underline;
}
.sb-cmp-price {
	margin-top: 4px;
	font-size: 16px;
	font-weight: 600;
}
.sb-cmp-btns {
	display: flex;
	gap: 8px;
	margin-top: auto;
	padding-top: 10px;
}
.sb-cmp.sb-cmp .sb-cmp-btns button {
	padding: 6px 12px;
	border: 1px solid #B9BBC0;
	border-radius: 4px;
	background: #fff;
	color: var(--sb-dark);
	font-size: 13px;
}
.sb-cmp.sb-cmp .sb-cmp-btns button:hover {
	border-color: var(--sb-dark);
	background: #fff;
	color: var(--sb-dark);
}

.sb-cmp-empty {
	margin: 24px 0 0;
	padding: 18px;
	border-radius: 8px;
	background: var(--sb-light);
	text-align: center;
	color: #444;
}
/* Notice after "comparar" on a card: already chosen / 3 slots full. */
.sb-cmp-msg {
	margin: 0 0 16px;
	padding: 12px 16px;
	border-left: 4px solid var(--sb-accent);
	border-radius: 4px;
	background: #FFF6DE;
	color: #000;
	font-weight: 500;
}
.sb-cmp-msg[hidden],
.sb-cmp-empty[hidden],
.sb-cmp-table[hidden] {
	display: none;
}

/* ---------- Table ---------- */
.sb-cmp-table {
	margin-top: 24px;
}
.sb-cmp-row {
	border-bottom: 1px solid var(--sb-line);
}
.sb-cmp-label,
.sb-cmp-val {
	min-width: 0;
	padding: 10px 4px;
	overflow-wrap: anywhere;
}
.sb-cmp-label {
	font-weight: 600;
	color: #444;
}
.sb-cmp-head {
	position: sticky;
	top: 0;
	z-index: 2;
	background: var(--sb-dark);
	color: #fff;
	border: 0;
	border-radius: 6px;
	font-weight: 700;
}
.sb-cmp-head .sb-cmp-val {
	padding: 8px 4px;
}
.sb-cmp-group {
	margin-top: 22px;
	padding: 8px 4px;
	border-bottom: 2px solid var(--sb-accent);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.sb-cmp-yes,
.sb-cmp-no {
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
}
.sb-cmp-yes { color: #1A8A3A; }
.sb-cmp-no { color: #C62828; }
.sb-cmp-dash { color: #999; }

/* ---------- Picker ---------- */
.sb-cmp-picker {
	width: min(920px, calc(100vw - 32px));
	max-height: calc(100vh - 64px);
	padding: 0;
	border: 0;
	border-radius: 10px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
	color: #000;
	overflow: hidden;
}
.sb-cmp-picker[open] {
	display: flex;
	flex-direction: column;
}
.sb-cmp-picker::backdrop {
	background: rgba(0, 0, 0, .6);
}
.sb-cmp-picker-head,
.sb-cmp .sb-cmp-search,
.sb-cmp-chips {
	flex-shrink: 0; /* the dialog is a flex column: only the model list may shrink and scroll */
}
.sb-cmp-picker-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 18px;
	background: var(--sb-dark);
	color: #fff;
}
.sb-cmp-picker-title {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	text-transform: uppercase;
}
.sb-cmp.sb-cmp .sb-cmp-close {
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff;
	font-size: 30px;
	line-height: 1;
}
.sb-cmp.sb-cmp .sb-cmp-close:hover {
	background: transparent;
	color: var(--sb-accent);
}
.sb-cmp .sb-cmp-search {
	margin: 14px 18px 0;
	width: auto;
	padding: 10px 12px;
	border: 1px solid #C4C6CB;
	border-radius: 6px;
	font: inherit;
	font-size: 16px; /* 16px: no zoom on iPhone */
}
.sb-cmp-chips {
	display: flex;
	gap: 8px;
	padding: 12px 18px;
	overflow-x: auto;
}
.sb-cmp.sb-cmp .sb-cmp-chip {
	flex: 0 0 auto;
	padding: 6px 14px;
	border: 1px solid #C4C6CB;
	border-radius: 999px;
	background: #fff;
	color: var(--sb-dark);
	font-size: 14px;
	white-space: nowrap;
}
.sb-cmp.sb-cmp .sb-cmp-chip:hover {
	border-color: var(--sb-dark);
	background: #fff;
	color: var(--sb-dark);
}
.sb-cmp.sb-cmp .sb-cmp-chip.is-on {
	border-color: var(--sb-accent);
	background: var(--sb-accent);
	color: #000;
}
.sb-cmp-options {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	padding: 4px 18px 18px;
	overflow-y: auto;
}
.sb-cmp.sb-cmp .sb-cmp-option {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 10px;
	border: 2px solid transparent;
	border-radius: 8px;
	background: var(--sb-light);
	color: #000;
	text-align: center;
}
.sb-cmp.sb-cmp .sb-cmp-option:hover,
.sb-cmp.sb-cmp .sb-cmp-option:focus {
	border-color: transparent;
	background: var(--sb-light);
	color: #000;
}
@media (hover: hover) {
	.sb-cmp.sb-cmp .sb-cmp-option:hover:not(:disabled) {
		border-color: var(--sb-accent);
	}
}
.sb-cmp.sb-cmp .sb-cmp-option.is-current {
	border-color: var(--sb-accent);
}
.sb-cmp.sb-cmp .sb-cmp-option:disabled {
	opacity: .45;
}
.sb-cmp-option[hidden] {
	display: none !important;
}
.sb-cmp-option img,
.sb-cmp-noimg {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: contain;
}
.sb-cmp-option-name {
	font-weight: 700;
	line-height: 1.2;
}
.sb-cmp-option-note {
	min-height: 1.2em;
	font-size: 12px;
	color: #666;
}
.sb-cmp-none {
	margin: 0;
	padding: 0 18px 18px;
	color: #444;
}
.sb-cmp-none[hidden] {
	display: none;
}

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
	.sb-cmp { --sb-cols: 160px repeat(3, minmax(0, 1fr)); }
	.sb-cmp-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Mobile: 3 narrow columns, each row label on its own line ---------- */
@media (max-width: 767px) {
	.sb-cmp {
		--sb-cols: repeat(3, minmax(0, 1fr));
		font-size: 14px;
	}
	.sb-cmp-top,
	.sb-cmp-row {
		gap: 0 8px;
	}
	.sb-cmp-top {
		row-gap: 8px;
	}
	.sb-cmp-intro {
		grid-column: 1 / -1;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.sb-cmp .sb-cmp-h { margin-bottom: 16px; font-size: 26px; }
	.sb-cmp-title { font-size: 17px; }
	.sb-cmp.sb-cmp .sb-cmp-clear { align-self: center; padding: 7px 10px; font-size: 13px; white-space: nowrap; }
	.sb-cmp-slot {
		min-height: 200px;
		padding: 8px 6px;
	}
	.sb-cmp-num { font-size: 10px; }
	.sb-cmp.sb-cmp .sb-cmp-pick {
		padding: 10px 4px;
		font-size: 13px;
		line-height: 1.2;
	}
	.sb-cmp-name { font-size: 14px; }
	.sb-cmp-price { font-size: 13px; }
	.sb-cmp-btns {
		flex-direction: column;
		gap: 4px;
	}
	.sb-cmp.sb-cmp .sb-cmp-btns button { padding: 5px 4px; font-size: 12px; }

	.sb-cmp-label {
		grid-column: 1 / -1;
		padding: 8px 2px 0;
		font-size: 12px;
		text-transform: uppercase;
		letter-spacing: .03em;
		color: #666;
	}
	.sb-cmp-val { padding: 2px 2px 8px; }
	.sb-cmp-head .sb-cmp-label { display: none; }
	.sb-cmp-head { font-size: 13px; }
	.sb-cmp-group { font-size: 14px; }

	/* Picker: full screen, one model per line */
	.sb-cmp-picker {
		width: 100vw;
		max-width: 100vw;
		height: 100dvh;
		max-height: 100dvh;
		margin: 0;
		border-radius: 0;
	}
	.sb-cmp-options {
		grid-template-columns: 1fr;
		gap: 8px;
	}
	.sb-cmp.sb-cmp .sb-cmp-option {
		flex-direction: row;
		gap: 12px;
		padding: 6px 10px;
		text-align: left;
	}
	.sb-cmp-option img,
	.sb-cmp-noimg {
		flex: 0 0 84px;
		width: 84px;
	}
	.sb-cmp-option-name { flex: 1; }
}

/* The theme sets overflow-x: hidden on html/body on phones, which makes them scroll containers and
   stops the sticky name line. "clip" cuts the same overflow without that side effect. This file is
   only loaded on pages with the comparator; :has() outranks the site's inline "body, html" rule. */
@supports (overflow: clip) {
	html:has(.sb-cmp),
	html:has(.sb-cmp) > body {
		overflow-x: clip !important;
		overflow-y: visible !important;
	}
}