/**
 * Mobile interface polish.
 * Loaded last so it can harmonize the theme's public components without
 * changing desktop layouts or plugin data.
 */

/* Keep sticky headers below the WordPress admin bar. */
.admin-bar .site-header {
	top: 32px;
}

/* Anchored playlist rows and content headings should not hide under the sticky header. */
.entry-content [id],
.single-content [id],
.dpp-track-row[id],
[data-track-index] {
	scroll-margin-top: 150px;
}

@media (max-width: 720px) {
	:root {
		--ava-mobile-space: 14px;
		--ava-mobile-radius: 14px;
	}

	.admin-bar .site-header {
		top: 46px;
	}

	body {
		font-size: 14px;
		line-height: 1.85;
		overflow-wrap: anywhere;
	}

	.site-container {
		width: min(100% - 18px, 1180px);
	}


	.account-trigger,
	.theme-switch {
		min-height: 36px;
	}

	.header-main {
		min-height: 60px;
		gap: 10px;
	}

	.site-branding {
		flex: 1 1 auto;
		overflow: hidden;
	}

	.site-logo,
	.custom-logo {
		max-width: min(210px, calc(100vw - 92px));
		max-height: 46px;
	}


	.menu-toggle {
		flex: 0 0 42px;
		width: 42px;
		height: 42px;
		border-radius: 12px;
	}

	.primary-navigation {
		inset: calc(100% - 1px) 9px auto 9px;
		max-height: min(68dvh, 520px);
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 8px;
		border-radius: var(--ava-mobile-radius);
	}

	.primary-navigation ul {
		display: grid;
		gap: 6px;
	}

	.primary-navigation a {
		min-height: 44px;
		display: flex;
		align-items: center;
		padding: 9px 12px;
		border-radius: 10px;
		font-size: 13px;
	}

	.header-search {
		padding-bottom: 10px;
	}

	.search-form {
		border-radius: 12px;
	}

	.search-field {
		min-height: 42px;
		padding-inline: 13px;
		font-size: 16px;
	}

	.search-submit {
		width: 48px;
		min-width: 48px;
	}

	.search-submit svg {
		width: 20px;
		height: 20px;
	}

	.dpp-global-search-panel {
		inset-block-start: calc(100% + 6px);
		max-height: min(62dvh, 440px);
		border-radius: 13px;
	}

	/* Main layout and cards. */
	.site-main {
		padding-top: 14px;
	}

	.layout-with-sidebar {
		gap: 16px;
	}

	.archive-header,
	.single-panel,
	.comments-area,
	.related-posts,
	.widget,
	.empty-state {
		border-radius: var(--ava-mobile-radius);
		box-shadow: 0 8px 22px rgba(22, 24, 30, .06);
	}

	.archive-header {
		padding: 13px 14px;
		margin-bottom: 12px;
	}

	.archive-header h1 {
		font-size: 18px;
		line-height: 1.65;
	}

	.archive-description {
		font-size: 12px;
		line-height: 1.9;
	}

	.post-grid,
	.related-grid,
	.layout-fullwidth .post-grid,
	.layout-single .related-grid {
		gap: 9px;
	}

	.post-card {
		border-radius: 12px;
		box-shadow: 0 7px 18px rgba(22, 24, 30, .055);
	}

	.post-card-title {
		min-height: 56px;
		padding: 8px 7px 10px;
		font-size: 12px;
		line-height: 1.6;
	}

	/* Single post: better hierarchy with less unused space. */
	.single-panel {
		padding: 12px;
	}

	.single-header {
		margin-bottom: 10px;
	}

	.single-header .single-date-badge {
		margin-bottom: 8px;
		padding: 5px 9px;
		font-size: 10.5px;
		line-height: 1.55;
	}

	.single-date-icon {
		width: 24px;
		height: 24px;
	}

	.single-date-icon svg {
		width: 14px;
		height: 14px;
	}

	.single-title {
		padding: 6px 10px;
		border-inline-start-width: 4px;
		font-size: 17px;
		line-height: 1.7;
	}

	.single-content,
	.entry-content {
		font-size: 14px;
		line-height: 2;
	}

	.entry-content p,
	.single-content p {
		margin-block: .9em;
	}

	.entry-content h1,
	.entry-content h2,
	.entry-content h3 {
		margin: 1.15em 0 .6em;
		line-height: 1.75;
	}

	.entry-content h1 { font-size: 19px; }
	.entry-content h2 { font-size: 18px; }
	.entry-content h3 { font-size: 16px; }

	.entry-content p.has-background,
	.single-content p.has-background {
		gap: 10px;
		padding: 11px 12px;
		margin: 14px 0;
		border-radius: 12px;
	}

	.entry-content p.has-background:has(a[href])::before,
	.single-content p.has-background:has(a[href])::before,
	.entry-content p.has-background:not(:has(a[href]))::before,
	.single-content p.has-background:not(:has(a[href]))::before {
		width: 22px;
		height: 22px;
	}

	.entry-content p.has-background:not(:has(a[href])),
	.single-content p.has-background:not(:has(a[href])) {
		padding: 12px 14px;
		line-height: 1.8;
	}

	.entry-content .wp-block-separator.has-alpha-channel-opacity,
	.single-content .wp-block-separator.has-alpha-channel-opacity {
		width: 90%;
		margin: 1.35rem auto;
	}

	.entry-content blockquote {
		margin: 14px 0;
		padding: 11px 13px;
	}

	.entry-content table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		white-space: nowrap;
	}

	.entry-content th,
	.entry-content td {
		padding: 8px;
	}

	.entry-content a[href^="https://dl"],
	.entry-content a[href*="/dl"],
	.single-content a[href^="https://dl"],
	.single-content a[href*="/dl"] {
		min-height: 42px;
		padding: .5em 1em;
		border-radius: 12px;
	}

	.comments-area,
	.related-posts {
		margin-top: 14px;
		padding: 13px;
	}

	.related-title {
		margin-bottom: 11px;
		font-size: 15px;
	}

	.related-title::before,
	.archive-header h1::before,
	.footer-menu h2::before {
		height: 20px;
		width: 6px;
	}

	.pagination-wrap {
		margin-top: 16px;
	}

	.pagination-wrap ul {
		gap: 6px;
	}

	.pagination-wrap a,
	.pagination-wrap span {
		min-width: 36px;
		height: 36px;
		border-radius: 10px;
		font-size: 12px;
	}

	/* Sidebar widgets and search results. */
	.widget {
		padding: 13px;
	}

	.sidebar-posts {
		gap: 8px;
	}

	.sidebar-posts a {
		min-height: 62px;
		border-radius: 11px;
	}

	.ava-search-section-header {
		gap: 10px;
		margin-bottom: 9px;
		border-radius: 12px;
	}

	.ava-track-search-section,
	.ava-post-search-section {
		margin-top: 14px;
	}

	.ava-post-search-section {
		margin-top: 20px;
	}

	/* Footer: compact without sacrificing readability. */
	.site-footer {
		margin-top: 24px;
		padding: 20px 0 calc(20px + env(safe-area-inset-bottom));
	}

	.footer-category-grid {
		gap: 14px 12px;
		padding-bottom: 16px;
	}

	.footer-menu h2 {
		margin-bottom: 9px;
		font-size: 13px;
	}

	.footer-menu ul,
	.footer-social {
		gap: 7px;
	}

	.footer-menu a,
	.footer-pages a,
	.footer-social a {
		line-height: 1.75;
	}

	.footer-bottom {
		gap: 12px;
		padding-top: 14px;
	}

	.footer-brand-links {
		gap: 11px;
	}

	.footer-brand-icon {
		width: 30px;
		height: 30px;
	}

	.footer-pages ul {
		gap: 10px;
	}

	.back-to-top {
		left: 12px;
		width: 40px;
		height: 40px;
	}

	/* All interactive controls retain a usable touch target. */
	button,
	input[type="button"],
	input[type="submit"],
	input[type="reset"] {
		touch-action: manipulation;
	}

	.entry-content [id],
	.single-content [id],
	.dpp-track-row[id],
	[data-track-index] {
		scroll-margin-top: 126px;
	}
}

@media (max-width: 420px) {
	.site-container {
		width: min(100% - 14px, 1180px);
	}

	.header-main {
		min-height: 56px;
	}

	.site-logo,
	.custom-logo {
		max-width: min(180px, calc(100vw - 80px));
		max-height: 42px;
	}

	.header-search {
		padding-bottom: 8px;
	}

	.post-grid,
	.related-grid,
	.layout-fullwidth .post-grid,
	.layout-single .related-grid {
		gap: 7px;
	}

	.post-card-title {
		min-height: 54px;
		padding-inline: 6px;
		font-size: 11.5px;
	}

	.single-panel {
		padding: 10px;
	}

	.single-date-label {
		display: inline;
		font-size: 10px;
		font-weight: 800;
		white-space: nowrap;
	}

	.single-header .single-date-badge {
		width: 100%;
		box-sizing: border-box;
		justify-content: center;
		row-gap: 5px;
	}

	.single-date-item {
		min-width: 0;
	}

	.single-date-divider {
		display: none;
	}

	.single-title {
		font-size: 16px;
	}

	.entry-content,
	.single-content {
		font-size: 13.5px;
	}

	.footer-category-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 13px 10px;
	}

	.footer-menu a,
	.footer-pages a,
	.footer-social a,
	.footer-copy {
		font-size: 11px;
	}

	.footer-brand-links,
	.footer-bottom {
		align-items: flex-start;
	}
}

@media (hover: none) and (pointer: coarse) {
	.post-card:hover,
	.ava-track-search-item:hover,
	.ava-popular-card:hover,
	.account-trigger:hover,
	.account-submit:hover,
	.account-primary-button:hover {
		transform: none;
	}
}

/* Accessibility layer: keyboard focus, reduced motion, forced colors and readable states. */

.screen-reader-text:focus,
.skip-link:focus {
	position: fixed !important;
	inset-block-start: 10px;
	inset-inline-start: 10px;
	z-index: 1000000;
	width: auto;
	height: auto;
	clip: auto;
	overflow: visible;
	margin: 0;
	padding: 10px 14px;
	border: 2px solid currentColor;
	border-radius: 10px;
	background: var(--theme-card);
	color: var(--theme-text);
	font-weight: 800;
	box-shadow: var(--theme-shadow);
}

:where(a, button, input, select, textarea, summary, [role="button"], [role="tab"], [tabindex]):focus-visible {
	outline: 3px solid var(--theme-primary) !important;
	outline-offset: 3px;
	box-shadow: 0 0 0 5px color-mix(in srgb, var(--theme-primary) 18%, transparent) !important;
}

:where(input, select, textarea):focus-visible {
	border-color: var(--theme-primary) !important;
}

.menu-toggle[aria-expanded="true"] {
	background: var(--theme-primary-soft);
	border-color: var(--theme-primary);
}

.primary-navigation a[aria-current="page"],
.primary-navigation .current-menu-item > a {
	font-weight: 800;
}

[aria-disabled="true"],
button:disabled,
input:disabled {
	cursor: not-allowed;
	opacity: .58;
}

.account-modal-card:focus,
.account-modal-card:focus-visible {
	outline: none !important;
	box-shadow: var(--theme-shadow) !important;
}

.account-tabs [role="tab"][aria-selected="true"],
.ava-popular-tabs [role="tab"][aria-selected="true"],
.account-library-tabs [role="tab"][aria-selected="true"] {
	border-color: var(--theme-primary);
	background: var(--theme-primary-soft);
	color: var(--theme-primary);
}

.ava-a11y-live {
	position: fixed;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

[data-theme="dark"] {
	--theme-muted: #c4c9d4;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto !important;
	}

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}

	.post-card:hover,
	.primary-navigation a:hover,
	.back-to-top,
	.account-modal,
	.account-modal-card {
		transform: none !important;
	}
}

@media (forced-colors: active) {
	:where(a, button, input, select, textarea, [role="tab"], [role="button"]):focus-visible {
		outline: 3px solid Highlight !important;
		box-shadow: none !important;
	}

	.primary-navigation a,
	.post-card,
	.single-panel,
	.archive-header,
	.search-form,
	.account-modal-card {
		border: 1px solid CanvasText;
	}

	.menu-toggle span {
		background: CanvasText;
	}
}

/**
 * Unified responsive header.
 * One compact row on desktop, a two-row sticky header on mobile, and no
 * permanently floating header controls that could conflict with the player.
 */
html,
body {
	max-width: 100%;
	overflow-x: clip;
}

.site-header,
.header-main,
.site-branding,
.site-logo-link,
.header-search,
.header-actions,
.ava-global-search,
.search-form,
.search-form label {
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
}


.ava-header-spacer {
	display: none;
	width: 100%;
	height: 0;
	pointer-events: none;
}

.site-header {
	position: sticky;
	inset-block-start: 0;
	z-index: 1000;
	width: 100%;
	background: color-mix(in srgb, var(--theme-card) 96%, transparent);
	border-bottom: 1px solid var(--theme-border);
	box-shadow: 0 8px 26px rgba(15, 23, 42, .055);
	backdrop-filter: blur(15px) saturate(135%);
	-webkit-backdrop-filter: blur(15px) saturate(135%);
	isolation: isolate;
}

.admin-bar .site-header {
	inset-block-start: 32px;
}

.header-main {
	direction: rtl;
	display: grid !important;
	grid-template-columns: auto minmax(0, 1fr) minmax(230px, 340px) auto;
	grid-template-areas: "brand nav search actions";
	align-items: center;
	gap: 14px;
	min-height: 78px;
	padding-block: 10px;
}

.site-branding {
	grid-area: brand;
	display: flex;
	align-items: center;
	overflow: hidden;
}

.site-logo-link {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	overflow: hidden;
}

.site-logo-link > img,
.site-logo,
.site-logo-custom,
.custom-logo {
	display: block;
	width: auto !important;
	height: auto !important;
	max-inline-size: 210px !important;
	max-block-size: 52px !important;
	margin: 0;
	object-fit: contain;
	object-position: right center;
	flex: 0 1 auto;
}

.site-logo-link > img + img,
.site-logo-link picture + picture,
.site-logo-link noscript {
	display: none !important;
}

.primary-navigation {
	grid-area: nav;
	min-width: 0;
	overflow: hidden;
}

.primary-navigation ul,
.primary-navigation .category-menu,
.primary-navigation .menu {
	display: flex;
	align-items: center;
	gap: 7px;
	width: 100%;
	margin: 0;
	padding: 2px 0;
	list-style: none;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	overscroll-behavior-inline: contain;
}

.primary-navigation ul::-webkit-scrollbar,
.primary-navigation .category-menu::-webkit-scrollbar,
.primary-navigation .menu::-webkit-scrollbar {
	display: none;
}

.primary-navigation li {
	flex: 0 0 auto;
}

.primary-navigation a {
	white-space: nowrap;
}

.header-search {
	grid-area: search;
	width: 100%;
	padding: 0;
	transition: max-height .22s ease, opacity .18s ease, transform .22s ease, padding .22s ease;
}

.header-search .search-form {
	min-height: 42px;
	border-radius: 13px;
	box-shadow: none;
}

.header-search .search-field {
	min-height: 42px;
	padding-inline: 13px;
	font-size: 13px;
}

.header-search .search-submit {
	flex: 0 0 46px;
	width: 46px;
}

.header-actions {
	grid-area: actions;
	direction: rtl;
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	gap: 7px;
	white-space: nowrap;
}

.header-icon-button,
.theme-switch,
.account-trigger,
a.account-trigger,
.menu-toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 42px;
	width: 42px;
	height: 42px;
	min-width: 42px;
	min-height: 42px;
	max-width: 42px;
	padding: 0;
	margin: 0;
	border: 1px solid var(--theme-border);
	border-radius: 13px;
	background: var(--theme-card-2);
	color: var(--theme-text);
	box-shadow: var(--theme-soft-shadow);
	cursor: pointer;
	text-decoration: none;
	transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.header-icon-button:hover,
.header-icon-button:focus-visible,
.theme-switch:hover,
.theme-switch:focus-visible,
.account-trigger:hover,
.account-trigger:focus-visible,
.menu-toggle:hover,
.menu-toggle:focus-visible {
	border-color: var(--theme-primary);
	background: var(--theme-primary-soft);
	color: var(--theme-primary);
	transform: translateY(-1px);
	outline: 0;
	box-shadow: 0 8px 18px color-mix(in srgb, var(--theme-primary) 14%, transparent);
}

.theme-switch {
	gap: 0;
}

.theme-icon {
	display: none;
	width: 21px;
	height: 21px;
	line-height: 0;
}

.theme-icon svg,
.account-trigger svg {
	display: block;
	width: 21px;
	height: 21px;
	fill: currentColor;
}

html[data-theme="light"] .theme-icon-moon,
.theme-light .theme-icon-moon {
	display: block;
}

html[data-theme="dark"] .theme-icon-sun,
.theme-dark .theme-icon-sun {
	display: block;
}

.account-trigger span:not(.screen-reader-text) {
	display: none !important;
}

.account-trigger i {
	position: absolute;
	inset-inline-end: 5px;
	inset-block-start: 5px;
	width: 7px;
	height: 7px;
	margin: 0;
	border: 1.5px solid var(--theme-card-2);
	border-radius: 50%;
	background: #22c55e;
	box-shadow: 0 0 0 2px rgba(34, 197, 94, .14);
}

.menu-toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	z-index: 1004;
}

.menu-toggle span {
	display: block;
	width: 20px;
	height: 2px;
	margin: 0;
	border-radius: 999px;
	background: currentColor;
	transition: transform .2s ease, opacity .2s ease;
}

.menu-toggle[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}

.menu-toggle[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

.mobile-nav-backdrop {
	display: none;
}

.entry-content [id],
.single-content [id],
.dpp-track-row[id],
[data-track-index] {
	scroll-margin-top: calc(var(--ava-header-height, 92px) + 14px);
}

/* Tablet and narrow desktop: categories move into the menu button. */
@media (max-width: 1000px) {
	.header-main {
		grid-template-columns: auto minmax(220px, 1fr) auto;
		grid-template-areas: "brand search actions";
		gap: 11px;
		min-height: 72px;
	}

	.site-logo-link > img,
	.site-logo,
	.site-logo-custom,
	.custom-logo {
		max-inline-size: 190px !important;
		max-block-size: 48px !important;
	}

	.menu-toggle {
		display: inline-flex;
	}

	.primary-navigation {
		display: block !important;
		position: fixed;
		inset-inline: max(12px, calc((100vw - 1180px) / 2));
		inset-block-start: var(--ava-header-bottom, 82px);
		width: auto;
		max-width: none;
		max-height: calc(100dvh - var(--ava-header-bottom, 82px) - 12px);
		margin: 0;
		padding: 9px;
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		border: 1px solid var(--theme-border);
		border-radius: 15px;
		background: var(--theme-card);
		box-shadow: var(--theme-shadow);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateY(-8px) scale(.985);
		transform-origin: top center;
		transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
		z-index: 1003;
	}

	.primary-navigation.is-open {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateY(0) scale(1);
	}

	.primary-navigation ul,
	.primary-navigation .category-menu,
	.primary-navigation .menu {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 7px;
		width: 100%;
		padding: 0;
		overflow: visible;
	}

	.primary-navigation li {
		min-width: 0;
		max-width: 100%;
	}

	.primary-navigation a {
		display: flex;
		align-items: center;
		width: 100%;
		min-height: 44px;
		padding: 10px 12px;
		box-sizing: border-box;
		white-space: normal;
		overflow-wrap: anywhere;
	}

	.mobile-nav-backdrop:not([hidden]) {
		display: block;
		position: fixed;
		inset-inline: 0;
		inset-block-start: var(--ava-header-bottom, 82px);
		inset-block-end: 0;
		background: rgba(15, 23, 42, .34);
		backdrop-filter: blur(2px);
		-webkit-backdrop-filter: blur(2px);
		z-index: 1001;
	}

	body.mobile-menu-open {
		overflow: hidden;
	}
}

/* Mobile: icons sit beside the hamburger; search occupies a clean second row. */
@media (max-width: 720px) {
	.ava-header-spacer:not([hidden]) {
		display: block;
		height: var(--ava-mobile-header-expanded-height, 108px);
	}

	.site-header.is-mobile-fixed {
		position: fixed;
		inset-inline: 0;
		inset-block-start: 0;
	}

	.admin-bar .site-header.is-mobile-fixed {
		inset-block-start: 0;
	}

	.site-container {
		width: calc(100% - 18px);
	}

	.header-main {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"brand actions"
			"search search";
		row-gap: 8px;
		column-gap: 9px;
		min-height: 0;
		padding-block: 8px 9px;
	}

	.site-branding {
		width: 100%;
	}

	.site-logo-link > img,
	.site-logo,
	.site-logo-custom,
	.custom-logo {
		max-inline-size: min(205px, 100%) !important;
		max-block-size: 45px !important;
	}

	.header-actions {
		gap: 6px;
	}

	.header-icon-button,
	.theme-switch,
	.account-trigger,
	a.account-trigger,
	.menu-toggle {
		flex-basis: 40px;
		width: 40px;
		height: 40px;
		min-width: 40px;
		min-height: 40px;
		max-width: 40px;
		border-radius: 12px;
	}

	.theme-icon,
	.theme-icon svg,
	.account-trigger svg {
		width: 20px;
		height: 20px;
	}

	.header-search {
		max-height: 54px;
		opacity: 1;
		transform: translateY(0);
		overflow: visible;
	}

	.header-search .search-form {
		min-height: 42px;
	}

	/* On downward scroll the sticky header becomes one compact row. */
	.site-header.is-compact:not(.is-menu-open) .header-main {
		row-gap: 0;
		padding-block-end: 8px;
	}

	.site-header.is-compact:not(.is-menu-open) .header-search {
		max-height: 0;
		opacity: 0;
		transform: translateY(-6px);
		pointer-events: none;
		overflow: hidden;
	}

	.primary-navigation {
		inset-inline: 9px;
	}

	.primary-navigation ul,
	.primary-navigation .category-menu,
	.primary-navigation .menu {
		grid-template-columns: 1fr;
	}

	.dpp-global-search-panel {
		inset-inline: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		max-height: min(62dvh, 440px);
		overflow-x: hidden;
		overflow-y: auto;
		z-index: 1005;
	}
}

@media (min-width: 601px) and (max-width: 1000px) {
	.admin-bar .site-header {
		inset-block-start: 46px;
	}

	.admin-bar .site-header.is-mobile-fixed {
		inset-block-start: 46px;
	}
}

@media (max-width: 600px) {
	/* The WordPress admin bar is not fixed at this width. */
	.admin-bar .site-header {
		inset-block-start: 0;
	}
}

@media (max-width: 420px) {
	.site-container {
		width: calc(100% - 14px);
	}

	.header-main {
		column-gap: 7px;
	}

	.header-actions {
		gap: 5px;
	}

	.site-logo-link > img,
	.site-logo,
	.site-logo-custom,
	.custom-logo {
		max-inline-size: min(177px, 100%) !important;
		max-block-size: 41px !important;
	}

	.header-icon-button,
	.theme-switch,
	.account-trigger,
	a.account-trigger,
	.menu-toggle {
		flex-basis: 37px;
		width: 37px;
		height: 37px;
		min-width: 37px;
		min-height: 37px;
		max-width: 37px;
		border-radius: 11px;
	}
}

@media (max-width: 350px) {
	.site-logo-link > img,
	.site-logo,
	.site-logo-custom,
	.custom-logo {
		max-inline-size: min(150px, 100%) !important;
		max-block-size: 38px !important;
	}

	.header-actions {
		gap: 4px;
	}

	.header-icon-button,
	.theme-switch,
	.account-trigger,
	a.account-trigger,
	.menu-toggle {
		flex-basis: 35px;
		width: 35px;
		height: 35px;
		min-width: 35px;
		min-height: 35px;
		max-width: 35px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.header-search,
	.primary-navigation,
	.menu-toggle span,
	.header-icon-button {
		transition: none !important;
	}
}