/* Hearth Mobile Switcher: small-screen menu, bottom bar, sidebar drawer, store badges. */

.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

body.hmsw-locked { overflow: hidden; }
.hmsw-panel[hidden], .hmsw-overlay[hidden], .hmsw-sidebar-toggle[hidden], .hmsw-sidebar-close[hidden], .hmsw-menu-toggle[hidden] { display: none !important; }

/* ------------------------------------------------------------- Toggle bar */
.hmsw-menu-bar {
	--hmsw-bar-bg-d: #1f2233;
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	min-height: 52px; padding: 0 6px 0 16px;
	background: var(--hmsw-bar-bg, var(--hmsw-bar-bg-d)); color: var(--hmsw-bar-color, #fff);
	font: 600 16px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	box-sizing: border-box; z-index: 99980;
}
.hmsw-menu-bar.is-fixed { position: fixed; top: 0; left: 0; right: 0; }
.admin-bar .hmsw-menu-bar.is-fixed { top: 46px; }
@media (min-width: 783px) { .admin-bar .hmsw-menu-bar.is-fixed { top: 32px; } }
.hmsw-menu-bar--burger { position: fixed; top: 10px; right: 10px; left: auto; min-height: 0; padding: 0; background: transparent; }
.hmsw-menu-bar--burger.hmsw-edge-left { right: auto; left: 10px; }
.hmsw-menu-bar--burger .hmsw-menu-bar__toggle { background: var(--hmsw-bar-bg, var(--hmsw-bar-bg-d)); border-radius: 12px; }
.hmsw-edge-left .hmsw-menu-bar__brand { order: 2; }
.hmsw-menu-bar__brand { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hmsw-menu-bar__brand a { color: inherit; text-decoration: none; }
.hmsw-menu-bar__brand img { display: block; max-height: 38px; width: auto; }
.hmsw-menu-bar__toggle {
	display: inline-flex; align-items: center; gap: 8px;
	min-height: 46px; min-width: 46px; padding: 0 12px;
	border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer;
}
.hmsw-burger, .hmsw-burger::before, .hmsw-burger::after { display: block; width: 22px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.hmsw-burger { position: relative; }
.hmsw-burger::before, .hmsw-burger::after { content: ""; position: absolute; left: 0; }
.hmsw-burger::before { top: -7px; }
.hmsw-burger::after { top: 7px; }
[aria-expanded="true"] > .hmsw-burger { background: transparent; }
[aria-expanded="true"] > .hmsw-burger::before { transform: translateY(7px) rotate(45deg); }
[aria-expanded="true"] > .hmsw-burger::after { transform: translateY(-7px) rotate(-45deg); }
.hmsw-menu-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }

/* ------------------------------------------------------------- Panel */
.hmsw-overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 99990; background: rgba(12, 14, 26, .45); opacity: 0; transition: opacity .2s ease; }
.hmsw-overlay.is-open { opacity: 1; }
.hmsw-panel {
	position: fixed; top: 0; bottom: 0; right: 0; z-index: 99991;
	width: var(--hmsw-panel-width, min(86vw, 360px)); max-width: 100vw;
	overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box;
	padding-bottom: calc(20px + env(safe-area-inset-bottom));
	background: var(--hmsw-panel-bg, #fff); color: var(--hmsw-panel-color, #2b2f3a);
	font: 16px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	box-shadow: -8px 0 30px rgba(0, 0, 0, .18);
	transform: translateX(100%); transition: transform .24s ease;
}
.hmsw-panel.hmsw-edge-left { right: auto; left: 0; transform: translateX(-100%); box-shadow: 8px 0 30px rgba(0, 0, 0, .18); }
.hmsw-panel.is-open { transform: none; }
.admin-bar .hmsw-panel { top: 46px; }
@media (min-width: 783px) { .admin-bar .hmsw-panel { top: 32px; } }
.hmsw-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 6px 8px 16px; border-bottom: 1px solid rgba(127, 127, 127, .25); }
.hmsw-panel__title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hmsw-panel__close { width: 44px; height: 44px; border: 0; background: transparent; color: inherit; font-size: 28px; line-height: 1; cursor: pointer; }
.hmsw-search { display: flex; gap: 6px; padding: 12px 16px; }
.hmsw-search input { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 12px; font-size: 16px; border: 1px solid #ccc; border-radius: 10px; }
.hmsw-search button { min-height: 44px; padding: 0 14px; border: 0; border-radius: 10px; background: #2b2f3a; color: #fff; font: inherit; cursor: pointer; }
.hmsw-menu, .hmsw-submenu { list-style: none; margin: 0; padding: 0; }
.hmsw-menu { padding: 6px 0; }
.hmsw-row { display: flex; align-items: stretch; }
.hmsw-link {
	flex: 1 1 auto; display: flex; align-items: center; gap: 10px;
	min-height: 50px; padding: 10px 16px; box-sizing: border-box;
	color: inherit; text-decoration: none; font: inherit; font-weight: 500; text-align: left;
	background: transparent; border: 0; cursor: pointer;
}
.hmsw-link:hover, .hmsw-link:focus-visible { background: var(--hmsw-hover-bg, rgba(127, 127, 127, .12)); }
.hmsw-link[aria-current="page"] { font-weight: 700; }
.hmsw-highlight > .hmsw-row .hmsw-link { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.hmsw-submenu { background: rgba(127, 127, 127, .07); }
.hmsw-submenu .hmsw-link { padding-left: 32px; min-height: 44px; font-weight: 400; }
.hmsw-submenu .hmsw-submenu .hmsw-link { padding-left: 48px; }
.hmsw-sub-toggle { flex: 0 0 50px; border: 0; border-left: 1px solid rgba(127, 127, 127, .2); background: transparent; color: inherit; cursor: pointer; }
.hmsw-sub-toggle span, .hmsw-sub-toggle-label::after {
	display: inline-block; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s ease;
}
.hmsw-sub-toggle-label::after { content: ""; margin-left: auto; }
[aria-expanded="true"].hmsw-sub-toggle span, .hmsw-sub-toggle-label[aria-expanded="true"]::after { transform: rotate(-135deg) translate(-2px, -2px); }

/* ------------------------------------------------------------- Bottom bar */
.hmsw-bottom-bar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 99970;
	padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
	background: var(--hmsw-bb-bg, #fff); color: var(--hmsw-bb-color, #5b6070);
	border-top: 1px solid rgba(0, 0, 0, .08); box-shadow: 0 -3px 15px rgba(0, 0, 0, .05);
	font: 500 11px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.hmsw-bottom-bar__list { display: flex; justify-content: space-around; list-style: none; margin: 0; padding: 0; }
.hmsw-bb-item { flex: 1 1 0; min-width: 0; }
.hmsw-bb-item a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 48px; padding: 4px 2px; color: inherit; text-decoration: none; border-radius: 12px; }
.hmsw-bb-item.is-current a { background: var(--hmsw-bb-active, #6c5ce7); color: #fff; }
.hmsw-bb-icon { display: inline-flex; font-size: 22px; line-height: 1; }
.hmsw-bb-icon svg, .hmsw-bb-icon i { width: 1em; height: 1em; font-size: 1em; }
.hmsw-bb-icon .hm-menu-icon, .hmsw-bb-icon .menu-item-icon { margin: 0; font-size: 1em; color: inherit; }
.hmsw-bb-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.hmsw-has-bottom-bar { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }

/* ------------------------------------------------------------- Sidebar drawer */
.hmsw-sidebar-toggle {
	position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 99960;
	transform: translateX(-50%);
	display: inline-flex; align-items: center; gap: 8px;
	min-height: 44px; padding: 0 18px; border: 0; border-radius: 22px;
	background: #1f2233; color: #fff; font: 600 15px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	box-shadow: 0 6px 16px rgba(0, 0, 0, .2); cursor: pointer;
}
.hmsw-has-bottom-bar .hmsw-sidebar-toggle { bottom: calc(80px + env(safe-area-inset-bottom)); }
.hmsw-sidebar-toggle__icon { width: 16px; height: 12px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; position: relative; }
.hmsw-sidebar-toggle__icon::after { content: ""; position: absolute; left: 0; right: 0; top: 3px; border-top: 2px solid currentColor; }
.hmsw-sidebar-close { position: fixed; top: 10px; right: 10px; z-index: 99993; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #fff; color: #2b2f3a; font-size: 26px; line-height: 1; box-shadow: 0 2px 8px rgba(0, 0, 0, .2); cursor: pointer; }
/* .hmsw-sidebar-small is set by the script below the chosen breakpoint. */
.hmsw-sidebar-small [data-hmsw-sidebar]:not(.hmsw-sidebar-open) { display: none !important; }
.hmsw-sidebar-small [data-hmsw-sidebar].hmsw-sidebar-open {
	display: block !important; position: fixed !important; top: 0; bottom: 0; left: 0; z-index: 99992;
	width: min(88vw, 380px) !important; max-width: none !important; margin: 0 !important; float: none !important;
	overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box; padding: 20px 16px 40px !important;
	background: #fff; box-shadow: 8px 0 30px rgba(0, 0, 0, .18);
}

/* ------------------------------------------------------------- Store badges */
.hmsw-store-badge {
	display: inline-flex; flex-direction: column; justify-content: center;
	min-width: 10em; padding: .45em 1em; box-sizing: border-box;
	background: #000; color: #fff !important; border-radius: .6em; text-decoration: none !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; line-height: 1.15;
}
.hmsw-store-badge__small { font-size: .7em; }
.hmsw-store-badge__big { font-size: 1.35em; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
	.hmsw-panel, .hmsw-overlay, .hmsw-burger, .hmsw-burger::before, .hmsw-burger::after { transition: none !important; }
}
