@charset "UTF-8";

/* ============================================================
   AE24 BRAND HERO (ae24-brand-hero) — layout T1
   Reuses ae24-anatomy-hero.css 1:1 (the root carries BOTH
   .ae24-an and .ae24-brh). This file only adds the appliance
   tab row + the small layout offset that makes room for it.
   ============================================================ */

/* top appliance tabs — full-width single-line row (never wraps onto the card;
   scrolls horizontally if a brand's labels overflow, e.g. long EN names) */
.ae24-brh__tabs {
	position: absolute; left: 24px; right: 24px; top: 16px; z-index: 4;
	display: flex; flex-wrap: nowrap; gap: 7px;
	overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.ae24-brh__tabs::-webkit-scrollbar { display: none; }
.ae24-brh__tab { flex: 0 0 auto; }
.ae24-brh__tab {
	display: inline-flex; align-items: center; gap: 7px;
	border: 1px solid var(--an-line, #e6e9e0); background: #fff;
	border-radius: 999px; padding: 8px 13px;
	font-family: inherit; font-size: 12.5px; font-weight: 700; line-height: 1;
	color: #3c4439; cursor: pointer; white-space: nowrap;
	transition: background .15s, border-color .15s, color .15s;
}
/* ── harden against the active theme's global <button> styling:
   `button:hover{ color:#fff; box-shadow:... }` turned inactive tab labels
   white (so they vanished) and dropped a shadow on hover; `button{box-shadow}`
   also added a resting shadow. Force flat, readable pills in every interaction
   state — incl. mobile tap (:active) and lingering :focus. ── */
.ae24-brh__tab,
.ae24-brh__tab:hover,
.ae24-brh__tab:focus,
.ae24-brh__tab:active {
	background: #fff !important; color: #3c4439 !important; box-shadow: none !important;
}
.ae24-brh__tab .lab { color: inherit !important; }
.ae24-brh__tab .ic { width: 17px; height: 17px; flex: 0 0 auto; color: var(--an-green, #3d8a2e) !important; }
.ae24-brh__tab.on,
.ae24-brh__tab.on:hover,
.ae24-brh__tab.on:focus,
.ae24-brh__tab.on:active {
	background: var(--an-green, #3d8a2e) !important; border-color: var(--an-green, #3d8a2e) !important;
	color: #fff !important; box-shadow: none !important;
}
.ae24-brh__tab.on .ic { color: #fff !important; }
.ae24-brh__tab:hover:not(.on) { border-color: var(--an-green-lt, #66B94A); }
.ae24-brh__tab:focus-visible { outline: 2px solid var(--an-green, #3d8a2e); outline-offset: 2px; }

/* push the glass card below the tab row (desktop) */
.ae24-brh .ae24-an__card { top: 78px; }

/* single appliance → no tabs needed; behaves exactly like the anatomy hero */
.ae24-brh.is-single .ae24-brh__tabs { display: none; }
.ae24-brh.is-single .ae24-an__card { top: 24px; }

/* ── desktop layout: the full-width tab row sits on top, so drop the machine
   below it (centred in the lower area). Scoped to min-width so it never leaks
   into the mobile machine-panel rule. Single-appliance keeps it centred 1:1. */
@media (min-width: 521px) {
	.ae24-brh .ae24-an__machine { top: 64px; transform: none; height: 292px; }
	.ae24-brh .ae24-an__machine svg { height: 292px; }
	.ae24-brh.is-single .ae24-an__machine { top: 50%; transform: translateY(-50%); height: 312px; }
	.ae24-brh.is-single .ae24-an__machine svg { height: 312px; }
}

/* ── mobile (matches anatomy hero breakpoint) ── */
@media (max-width: 520px) {
	/* tabs become a horizontal chip row at the very top of the stack */
	.ae24-brh__tabs {
		position: relative; left: auto; right: auto; top: auto; max-width: none; order: -1;  /* right:auto — desktop right:280px would shift the row off-screen */
		flex-wrap: nowrap; overflow-x: auto; gap: 7px; padding: 14px 14px 2px;
		-webkit-overflow-scrolling: touch; scrollbar-width: none;
	}
	.ae24-brh__tabs::-webkit-scrollbar { display: none; }
	.ae24-brh__tab { flex: 0 0 auto; }
	.ae24-brh.is-single .ae24-brh__tabs { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.ae24-brh__tab { transition: none; }
}