/*
Theme Name: AutoHouse89
Theme URI: https://autohouse89.ru
Author: AutoHouse89 Team
Description: A premium dark automotive social network theme for car enthusiasts from Salekhard and the Yamal region. Features glassmorphic UI, cyan neon accents, Arctic night aesthetics, and a full social-network layout with left sidebar navigation, social feed, and community widgets.
Version: 569.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: autohouse89
Tags: dark, social-network, automotive, custom-colors, block-styles, full-site-editing, wide-blocks
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
*/

/* ==========================================================================
   CSS Custom Properties (derived from theme.json tokens)
   ========================================================================== */

:root {
	--ah89-cyan-glow: 0 0 20px rgba(0, 212, 255, 0.3);
	--ah89-cyan-glow-strong: 0 0 30px rgba(0, 212, 255, 0.5);
	--ah89-cyan-8: rgba(0, 212, 255, 0.08);
	--ah89-cyan-15: rgba(0, 212, 255, 0.15);
	--ah89-cyan-20: rgba(0, 212, 255, 0.2);
	--ah89-cyan-25: rgba(0, 212, 255, 0.25);
	--ah89-cyan-40: rgba(0, 212, 255, 0.4);
	--ah89-cyan-60: rgba(0, 212, 255, 0.6);
	--ah89-dot-pattern: radial-gradient(circle, rgba(234, 244, 255, 0.02) 1px, transparent 1px);
	--ah89-card-radius: 16px;
	--ah89-card-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
	--ah89-glass-bg: rgba(17, 21, 24, 0.85);
	--ah89-glass-border: rgba(0, 212, 255, 0.08);
}

/* ==========================================================================
   Page-frame layout — sidebar-left (CSS Grid on .wp-site-blocks)
   ========================================================================== */

.wp-site-blocks {
	display: grid;
	grid-template-columns: var(--wp--custom--sidebar-width, 260px) 1fr;
	min-height: 100vh;
}

.wp-block-template-part.site-sidebar {
	grid-column: 1;
	grid-row: 1;
	position: sticky;
	top: 0;
	align-self: start;
	height: 100vh;
	overflow-y: auto;
	overflow-x: hidden;
	background-color: var(--wp--preset--color--card-surface);
	border-right: 1px solid var(--wp--preset--color--border-subtle);
	background-image: var(--ah89-dot-pattern);
	background-size: 16px 16px;
	z-index: 100;
	scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--border-subtle) transparent;
}

.main-content-area {
	grid-column: 2;
	grid-row: 1;
	min-width: 0;
}

.main-content-area .alignfull {
	margin-left: 0;
	margin-right: 0;
	width: 100%;
	max-width: 100%;
}

.main-content-area .alignwide {
	margin-left: 0;
	margin-right: 0;
	width: 100%;
	max-width: 100%;
}

@media (max-width: 782px) {
	.wp-site-blocks {
		grid-template-columns: 1fr;
		padding-bottom: 64px;
	}

	.wp-block-template-part.site-sidebar {
		position: fixed;
		bottom: 0;
		top: auto;
		left: 0;
		right: 0;
		height: auto;
		max-height: 64px;
		width: 100%;
		overflow: visible;
		border-right: 0;
		border-top: 1px solid var(--wp--preset--color--border-subtle);
		grid-column: 1;
		grid-row: auto;
		z-index: 200;
	}

	.main-content-area {
		grid-column: 1;
	}

	.main-content-area .alignfull {
		margin-left: calc(var(--wp--style--root--padding-left, 0px) * -1);
		margin-right: calc(var(--wp--style--root--padding-right, 0px) * -1);
		width: auto;
		max-width: none;
	}
}

/* ==========================================================================
   Global typography polish
   ========================================================================== */

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

::selection {
	background: var(--ah89-cyan-25);
	color: var(--wp--preset--color--text);
}

::-moz-selection {
	background: var(--ah89-cyan-25);
	color: var(--wp--preset--color--text);
}

/* Heading polish — Inter with tight tracking for that automotive precision */
h1, h2, h3, h4, h5, h6,
.wp-block-heading {
	text-wrap: balance;
	font-variant-numeric: lining-nums;
}

h1, .wp-block-heading:where([class*="h1"]) {
	letter-spacing: 0.04em;
}

h2, .wp-block-heading:where([class*="h2"]) {
	letter-spacing: 0.03em;
}

h6 {
	color: var(--wp--preset--color--text-secondary);
}

/* Paragraph readability */
p {
	text-wrap: pretty;
}

/* Mono metadata styling — Roboto Mono for timestamps, stats, technical data */
.wp-block-post-date,
.wp-block-post-terms,
figcaption,
.wp-block-code,
.wp-block-preformatted {
	letter-spacing: 0.04em;
}

/* ==========================================================================
   Link treatments
   ========================================================================== */

a {
	transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

a:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Underline animation on content links */
.wp-block-post-content a:not(.wp-block-button__link):not(.wp-block-navigation-item__content) {
	text-decoration: underline;
	text-decoration-color: var(--ah89-cyan-40);
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
}

.wp-block-post-content a:not(.wp-block-button__link):not(.wp-block-navigation-item__content):hover {
	text-decoration-color: var(--wp--preset--color--accent);
}

/* ==========================================================================
   Button treatments
   ========================================================================== */

.wp-block-button__link {
	transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
	box-shadow: var(--ah89-cyan-glow);
	position: relative;
	overflow: hidden;
}

.wp-block-button__link:hover {
	box-shadow: var(--ah89-cyan-glow-strong);
	transform: translateY(-1px);
}

.wp-block-button__link:active {
	transform: translateY(0);
}

/* Outline button variant — ghost style matching the design reference */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--accent);
	border: 1px solid var(--ah89-cyan-20);
	box-shadow: none;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	border-color: var(--ah89-cyan-40);
	background: var(--ah89-cyan-8);
	box-shadow: none;
	color: var(--wp--preset--color--accent);
}

/* ==========================================================================
   Card / glassmorphism surface treatments
   ========================================================================== */

.wp-block-group.has-card-surface-background-color,
.wp-block-group[class*="is-style-card"],
.wp-block-cover.has-card-surface-background-color {
	border-radius: var(--ah89-card-radius);
	border: 1px solid var(--ah89-glass-border);
	box-shadow: var(--ah89-card-shadow);
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.wp-block-group.has-card-surface-background-color:hover,
.wp-block-group[class*="is-style-card"]:hover {
	border-color: var(--ah89-cyan-15);
	box-shadow: 0 6px 32px rgba(0, 0, 0, 0.5);
}

/* Glassmorphic card style */
.is-style-glass {
	background: var(--ah89-glass-bg) !important;
	-webkit-backdrop-filter: blur(16px) saturate(1.2);
	backdrop-filter: blur(16px) saturate(1.2);
	border: 1px solid var(--ah89-glass-border);
	border-radius: var(--ah89-card-radius);
	box-shadow: var(--ah89-card-shadow);
}

/* ==========================================================================
   Image treatments — cold automotive feel
   ========================================================================== */

.wp-block-image img,
.wp-block-post-featured-image img,
.wp-block-cover__image-background {
	transition: filter 0.4s ease, transform 0.4s ease;
}

.wp-block-image:hover img,
.wp-block-post-featured-image:hover img {
	filter: brightness(1.05) contrast(1.02);
	transform: scale(1.01);
}

.wp-block-image {
	overflow: hidden;
	border-radius: var(--ah89-card-radius);
}

.wp-block-image figcaption {
	margin-top: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--text-secondary);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
}

/* ==========================================================================
   Cover block polish
   ========================================================================== */

.wp-block-cover {
	border-radius: var(--ah89-card-radius);
	overflow: hidden;
}

.wp-block-cover::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(11, 14, 18, 0.3) 0%, rgba(11, 14, 18, 0.7) 100%);
	pointer-events: none;
	z-index: 1;
}

.wp-block-cover > .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
}

/* Full-bleed hero covers should not have radius */
.wp-block-cover.alignfull {
	border-radius: 0;
}

/* ==========================================================================
   Navigation — sidebar vertical layout
   ========================================================================== */

.wp-block-template-part.site-sidebar .wp-block-navigation {
	width: 100%;
}

.wp-block-template-part.site-sidebar .wp-block-navigation__container {
	flex-direction: column;
	align-items: center;
	width: 100%;
}

.wp-block-template-part.site-sidebar .wp-block-navigation-item {
	width: 100%;
}

.wp-block-template-part.site-sidebar .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	padding: 10px 20px;
	border-radius: 10px;
	transition: background-color 0.15s ease, color 0.15s ease;
	width: 100%;
	font-size: 0.875rem;
}

.wp-block-template-part.site-sidebar .wp-block-navigation-item__content:hover {
	background: var(--ah89-cyan-8);
	color: var(--wp--preset--color--text);
}

.wp-block-template-part.site-sidebar .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content {
	background: var(--ah89-cyan-20);
	color: var(--wp--preset--color--accent);
}

/* Active indicator bar */
.wp-block-template-part.site-sidebar .wp-block-navigation-item.current-menu-item {
	position: relative;
}

.wp-block-template-part.site-sidebar .wp-block-navigation-item.current-menu-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 24px;
	background: var(--wp--preset--color--accent);
	border-radius: 0 2px 2px 0;
}

/* Mobile sidebar becomes bottom bar */
@media (max-width: 782px) {
	.wp-block-template-part.site-sidebar .wp-block-navigation__container {
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		gap: 0;
	}

	.wp-block-template-part.site-sidebar .wp-block-navigation-item.current-menu-item::before {
		display: none;
	}

	.wp-block-template-part.site-sidebar .wp-block-navigation-item__content {
		width: auto;
		height: 44px;
		padding: 6px 8px;
		font-size: 0.65rem;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 2px;
	}

	/* Hide non-essential sidebar content on mobile bottom bar */
	.wp-block-template-part.site-sidebar > .wp-block-group > .wp-block-group:first-child,
	.wp-block-template-part.site-sidebar > .wp-block-group > .wp-block-group:last-child {
		display: none;
	}
}

/* ==========================================================================
   Header — thin utility top-bar inside main-content-area
   ========================================================================== */

.site-header {
	background-color: var(--wp--preset--color--card-surface);
	border-bottom: 1px solid var(--wp--preset--color--border-subtle);
}

/* Mobile header — search moves below the header actions bar */
@media (max-width: 782px) {
	.site-header.top-bar {
		flex-wrap: wrap !important;
		overflow: visible;
		padding-left: var(--wp--preset--spacing--20) !important;
		padding-right: var(--wp--preset--spacing--20) !important;
		gap: 6px !important;
	}

	/* Header-actions (weather, notifications, avatar) stay on first row */
	.site-header .wp-block-ah89-header-actions {
		order: 1 !important;
		flex: 0 0 auto !important;
	}

	/* Search goes full-width on second row below the icons */
	.site-header .wp-block-search {
		order: 10 !important;
		flex: 0 0 100% !important;
		min-width: 0 !important;
		margin-top: 4px;
	}

	.site-header .wp-block-search__inside-wrapper {
		min-width: 0 !important;
	}

	.site-header .wp-block-search__input {
		min-width: 0 !important;
		width: 100% !important;
		font-size: 0.8125rem !important;
		padding: 8px 12px !important;
	}

	.site-header .wp-block-search__button {
		padding: 8px 10px !important;
	}

	/* Show compact weather temp on mobile header — hide city labels */
	.site-header .ah89-ha-weather .ah89-ha-weather__city {
		display: none;
	}

	/* Keep inline city label visible on mobile — user requested "Салехард" always shown */

	/* Compact the right side */
	.site-header > .wp-block-group:last-child {
		gap: 6px !important;
		flex-shrink: 0;
	}

	/* Hide the user info block (name + status) on mobile */
	.site-header .wp-block-group > .wp-block-group:has(> .has-heading-font-family.has-x-small-font-size[style*="font-weight:600"][style*="line-height:1.2"]) {
		display: none;
	}
}

/* Header icon badges */
.ah89-header-icon {
	cursor: pointer;
	opacity: 0.7;
	transition: opacity 0.2s ease;
}

.ah89-header-icon:hover {
	opacity: 1;
}

/* Site title — AutoHouse89 wordmark treatment */
.wp-block-site-title a {
	text-decoration: none;
	white-space: nowrap;
	letter-spacing: 0.08em;
}

.wp-block-site-title a:hover {
	color: var(--wp--preset--color--accent);
}

/* AutoHouse89 sidebar logo — unified color on hover */
.ah89-logo-link a {
	color: var(--wp--preset--color--text) !important;
	text-decoration: none;
	transition: color 0.2s ease;
	white-space: nowrap;
	display: inline-flex;
	align-items: baseline;
	line-height: 1.1;
	vertical-align: baseline;
}

.ah89-logo-link a:hover {
	color: var(--wp--preset--color--accent) !important;
}

/* Force all characters in the logo to sit on the same baseline */
.ah89-logo-link,
.ah89-logo-link p {
	line-height: 1.1 !important;
	display: flex;
	align-items: center;
}

/* Logo text — ensure numerals sit on the baseline */
.ah89-logo-link a,
.ah89-logo-link p {
	font-variant-numeric: lining-nums !important;
}

/* Footer logo — lining numerals */
.ah89-footer-logo {
	font-variant-numeric: lining-nums !important;
}

/* ==========================================================================
   Search input
   ========================================================================== */

.wp-block-search__input {
	background: rgba(234, 244, 255, 0.04);
	border: 1px solid var(--wp--preset--color--border-subtle);
	border-radius: 8px;
	color: var(--wp--preset--color--text);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.wp-block-search__input::placeholder {
	color: var(--wp--preset--color--text-dim);
}

.wp-block-search__input:focus {
	border-color: var(--ah89-cyan-20);
	background: rgba(0, 212, 255, 0.03);
	outline: none;
}

.wp-block-search__button {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--background);
	border: none;
	border-radius: 8px;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.wp-block-search__button:hover {
	background: var(--wp--preset--color--accent-hover);
}

/* Force dark theme on the header search block — WordPress renders the
   wp:search wrapper with white/light background by default when
   backgroundColor is set. Override everything inside .site-header. */
.site-header .wp-block-search,
.site-header .wp-block-search__inside-wrapper {
	background: rgba(234, 244, 255, 0.04) !important;
	border: 1px solid var(--wp--preset--color--border-subtle) !important;
	border-radius: 10px !important;
	color: var(--wp--preset--color--text) !important;
}

.site-header .wp-block-search__input {
	background: transparent !important;
	border: none !important;
	color: var(--wp--preset--color--text) !important;
	padding: 8px 12px;
}

.site-header .wp-block-search__input::placeholder {
	color: var(--wp--preset--color--text-dim) !important;
}

.site-header .wp-block-search__input:focus {
	background: transparent !important;
	outline: none;
}

.site-header .wp-block-search__inside-wrapper:focus-within {
	border-color: var(--ah89-cyan-20) !important;
	background: rgba(0, 212, 255, 0.03) !important;
}

.site-header .wp-block-search__button {
	background: var(--wp--preset--color--accent) !important;
	color: var(--wp--preset--color--background) !important;
	border: none !important;
	border-radius: 8px !important;
}

.site-header .wp-block-search__button:hover {
	background: var(--wp--preset--color--accent-hover) !important;
}

/* ==========================================================================
   Global search form dark theme — applies to ALL wp:search blocks
   (not just header). Covers market page, catalog page, bbPress, etc.
   ========================================================================== */

.wp-block-search .wp-block-search__inside-wrapper,
.wp-block-search {
	background: rgba(234, 244, 255, 0.04) !important;
	border: 1px solid var(--wp--preset--color--border-subtle, #1A2030) !important;
	border-radius: 10px !important;
	color: var(--wp--preset--color--text, #EAF4FF) !important;
}

.wp-block-search .wp-block-search__input {
	background: transparent !important;
	border: none !important;
	color: var(--wp--preset--color--text, #EAF4FF) !important;
	padding: 10px 14px;
	font-family: var(--wp--preset--font-family--mono);
}

.wp-block-search .wp-block-search__input::placeholder {
	color: var(--wp--preset--color--text-dim, #556070) !important;
}

.wp-block-search .wp-block-search__input:focus {
	background: transparent !important;
	outline: none;
}

.wp-block-search .wp-block-search__inside-wrapper:focus-within {
	border-color: var(--ah89-cyan-20, rgba(0, 212, 255, 0.2)) !important;
	background: rgba(0, 212, 255, 0.03) !important;
}

.wp-block-search .wp-block-search__button {
	background: var(--wp--preset--color--accent, #00D4FF) !important;
	color: var(--wp--preset--color--background, #0B0E12) !important;
	border: none !important;
	border-radius: 8px !important;
}

.wp-block-search .wp-block-search__button:hover {
	background: var(--wp--preset--color--accent-hover, #00B8D9) !important;
}

/* WordPress search results page — dark theme */
.search-results .main-content-area,
.search-no-results .main-content-area {
	background: var(--wp--preset--color--background, #0B0E12);
}



/* ==========================================================================
   Separator refinement
   ========================================================================== */

.wp-block-separator {
	border-color: var(--wp--preset--color--border-subtle);
	opacity: 1;
}

.wp-block-separator.is-style-dots {
	color: var(--wp--preset--color--text-dim);
}

/* ==========================================================================
   Quote — left border glow
   ========================================================================== */

.wp-block-quote {
	position: relative;
}

.wp-block-quote::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--wp--preset--color--accent);
	box-shadow: 0 0 8px var(--ah89-cyan-40);
	border-radius: 2px;
}

.wp-block-quote cite {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--text-dim);
	font-style: normal;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ==========================================================================
   Code blocks — neon terminal feel
   ========================================================================== */

.wp-block-code {
	position: relative;
}

.wp-block-code code {
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--mono);
}

/* Inline code */
:not(pre) > code {
	background: var(--ah89-cyan-8);
	border: 1px solid var(--wp--preset--color--border-subtle);
	border-radius: 4px;
	padding: 0.15em 0.4em;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.875em;
	color: var(--wp--preset--color--accent);
}

/* ==========================================================================
   Post template / query loop cards
   ========================================================================== */

.wp-block-post-template .wp-block-post {
	border-radius: var(--ah89-card-radius);
	border: 1px solid var(--ah89-glass-border);
	background: var(--wp--preset--color--card-surface);
	transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.wp-block-post-template .wp-block-post:hover {
	border-color: var(--ah89-cyan-15);
	background: var(--wp--preset--color--card-hover);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.wp-block-post-template .wp-block-post-featured-image {
	overflow: hidden;
	border-radius: var(--ah89-card-radius) var(--ah89-card-radius) 0 0;
}

.wp-block-post-template .wp-block-post-featured-image img {
	width: 100%;
	height: auto;
	display: block;
}

/* ==========================================================================
   Post terms / tags — hashtag style
   ========================================================================== */

.wp-block-post-terms a {
	display: inline-block;
	background: var(--ah89-cyan-8);
	border: 1px solid var(--wp--preset--color--border-subtle);
	border-radius: 4px;
	padding: 0.2em 0.5em;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.wp-block-post-terms a:hover {
	background: var(--ah89-cyan-15);
	border-color: var(--ah89-cyan-25);
}

/* ==========================================================================
   Categories & Tag Cloud
   ========================================================================== */

.wp-block-categories-list li a,
.wp-block-tag-cloud a {
	color: var(--wp--preset--color--text-secondary);
	text-decoration: none;
	transition: color 0.2s ease;
}

.wp-block-categories-list li a:hover,
.wp-block-tag-cloud a:hover {
	color: var(--wp--preset--color--accent);
}

/* ==========================================================================
   Table refinement
   ========================================================================== */

.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}

.wp-block-table td,
.wp-block-table th {
	border: 1px solid var(--wp--preset--color--border-subtle);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
}

.wp-block-table th {
	background: var(--wp--preset--color--card-surface);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-secondary);
}

.wp-block-table tr:hover td {
	background: var(--ah89-cyan-8);
}

/* ==========================================================================
   Gallery
   ========================================================================== */

.wp-block-gallery {
	gap: var(--wp--preset--spacing--20);
}

.wp-block-gallery .wp-block-image {
	border-radius: var(--ah89-card-radius);
	overflow: hidden;
	border: 1px solid var(--ah89-glass-border);
}

/* ==========================================================================
   Columns gap enforcement
   ========================================================================== */

.wp-block-columns {
	gap: var(--wp--preset--spacing--40);
}

@media (max-width: 782px) {
	.wp-block-columns {
		gap: var(--wp--preset--spacing--30);
	}
}

/* ==========================================================================
   Details / Accordion blocks
   ========================================================================== */

.wp-block-details {
	border: 1px solid var(--wp--preset--color--border-subtle);
	border-radius: 12px;
	background: var(--wp--preset--color--card-surface);
	overflow: hidden;
	transition: border-color 0.2s ease;
}

.wp-block-details:hover {
	border-color: var(--ah89-cyan-15);
}

.wp-block-details summary {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	cursor: pointer;
	color: var(--wp--preset--color--text);
	transition: color 0.2s ease;
}

.wp-block-details summary:hover {
	color: var(--wp--preset--color--accent);
}

.wp-block-details[open] summary {
	border-bottom: 1px solid var(--wp--preset--color--border-subtle);
}

/* ==========================================================================
   Scrollbar styling (Webkit)
   ========================================================================== */

::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background: var(--wp--preset--color--border-subtle);
	border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--wp--preset--color--text-dim);
}

/* Firefox */
* {
	scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--border-subtle) transparent;
}

/* ==========================================================================
   Hero section treatments (reference design)
   ========================================================================== */

/* Signal emblem rings — concentric circle decorations */
.signal-emblem {
	position: relative;
}

.signal-ring {
	position: absolute;
	border-radius: 50%;
	border-style: solid;
	border-width: 1px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* Corner markers for HUD aesthetic */
.corner-mark {
	position: absolute;
	width: 24px;
	height: 24px;
}

.corner-mark::before,
.corner-mark::after {
	content: "";
	position: absolute;
	background: var(--ah89-cyan-20);
}

.corner-mark.tl { top: 24px; left: 24px; }
.corner-mark.tl::before { top: 0; left: 0; width: 1px; height: 24px; }
.corner-mark.tl::after { top: 0; left: 0; width: 24px; height: 1px; }

.corner-mark.tr { top: 24px; right: 24px; }
.corner-mark.tr::before { top: 0; right: 0; width: 1px; height: 24px; }
.corner-mark.tr::after { top: 0; right: 0; width: 24px; height: 1px; }

.corner-mark.bl { bottom: 24px; left: 24px; }
.corner-mark.bl::before { bottom: 0; left: 0; width: 1px; height: 24px; }
.corner-mark.bl::after { bottom: 0; left: 0; width: 24px; height: 1px; }

.corner-mark.br { bottom: 24px; right: 24px; }
.corner-mark.br::before { bottom: 0; right: 0; width: 1px; height: 24px; }
.corner-mark.br::after { bottom: 0; right: 0; width: 24px; height: 1px; }

/* Scan line decorative element */
.scan-line {
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--ah89-cyan-20), transparent);
}

/* Dot pattern background utility */
.has-dot-pattern {
	background-image: var(--ah89-dot-pattern);
	background-size: 16px 16px;
}

/* ==========================================================================
   Neon glow accent utility
   ========================================================================== */

.has-neon-glow {
	text-shadow: 0 0 20px var(--ah89-cyan-40);
}

.has-accent-color {
	color: var(--wp--preset--color--accent);
}

/* ==========================================================================
   Avatar / user badge styles for social network UX
   ========================================================================== */

.user-avatar,
.is-style-avatar {
	border-radius: 22%;
	border: 1.5px solid var(--ah89-cyan-25);
	background: linear-gradient(135deg, var(--ah89-cyan-40), var(--ah89-cyan-8));
	overflow: hidden;
	flex-shrink: 0;
	aspect-ratio: 1;
}

/* Online indicator dot */
.online-indicator {
	position: relative;
}

.online-indicator::after {
	content: "";
	position: absolute;
	bottom: 0px;
	right: 0px;
	width: 8px;
	height: 8px;
	background: var(--wp--preset--color--accent);
	border-radius: 50%;
	border: 2px solid var(--wp--preset--color--card-surface);
	box-shadow: 0 0 4px var(--wp--preset--color--accent);
}

/* ==========================================================================
   Avatar circle enforcement — prevent flex/grid deformation
   ========================================================================== */

/* ---- UNIVERSAL avatar / squircle enforcement ---- */
/* WordPress renders border-radius as inline styles on avatar groups.
   Inside flex containers the element has no intrinsic height so it
   collapses into an oval. The rules below brute-force perfect squircles
   by matching elements via class-name selectors that survive across
   all WordPress versions and hosting environments (inline style
   attribute selectors are fragile — different WP builds serialize
   whitespace and property order differently). */

/* ------ online-indicator class (used on all "Online" avatars) ------ */
.online-indicator {
	width: 32px !important;
	height: 32px !important;
	min-width: 32px !important;
	min-height: 32px !important;
	max-width: 32px !important;
	max-height: 32px !important;
	aspect-ratio: 1 / 1 !important;
	flex-shrink: 0 !important;
	flex-grow: 0 !important;
	flex-basis: 32px !important;
	overflow: hidden !important;
	border-radius: 22% !important;
}

/* ------ Right sidebar online-user grid ------ */
/* IMPORTANT: only target .online-indicator elements for avatar squircle sizing.
   Previous rules matched .has-accent-subtle-background-color and .has-border-color
   generically inside .ah89-right-sidebar, which caught date badges, heading
   containers, and stat cards — deforming them into 32px circles and causing
   single-letter "orphan" artifacts (first letter of widget titles visible as
   tiny circles). Now scoped exclusively to .online-indicator. */

/* ------ 56px avatars — stories rail ------ */
/* Stories rail items use a 2px border-color class and 56px self-stretch.
   Match by parent context + border-color class. */
.ah89-stories-rail .wp-block-group.has-border-color,
.ah89-stories-rail .wp-block-group.has-accent-background-color {
	width: 56px !important;
	height: 56px !important;
	min-width: 56px !important;
	min-height: 56px !important;
	max-width: 56px !important;
	max-height: 56px !important;
	aspect-ratio: 1 / 1 !important;
	flex-shrink: 0 !important;
	flex-grow: 0 !important;
	flex-basis: 56px !important;
	overflow: hidden !important;
	border-radius: 22% !important;
}

/* The "+" story button */
.ah89-stories-rail .wp-block-group.has-accent-background-color {
	border-radius: 22% !important;
}

/* Feed card / post creation bar avatar rules removed — social feed
   moved to main site. Dashboard avatars use inline styles. */

/* ------ Nuclear fallback — any wp-block-group with border-radius:50% ------ */
/* Different WP builds serialize inline border-radius differently:
   "border-radius:50%", "border-radius: 50%", etc. Use multiple variants.
   Also match "border-radius:50%" inside combined shorthand style strings
   on production hosts. */
.wp-block-group[style*="border-radius:50%"],
.wp-block-group[style*="border-radius: 50%"],
.wp-block-group[style*="border-radius:50"],
.wp-block-group[style*="radius:50%"] {
	aspect-ratio: 1 / 1 !important;
	flex-shrink: 0 !important;
	flex-grow: 0 !important;
	overflow: hidden !important;
	border-radius: 22% !important;
}

/* Also catch any accent-subtle bg group with any border-radius inline */
.wp-block-group.has-accent-subtle-background-color[style*="border-radius"] {
	aspect-ratio: 1 / 1 !important;
	flex-shrink: 0 !important;
	flex-grow: 0 !important;
	overflow: hidden !important;
	border-radius: 22% !important;
}

/* ==========================================================================
   Production host avatar fix — class-based selectors only
   ========================================================================== */

/* On production hosts WordPress may serialize inline styles differently
   than Playground, causing attribute-based selectors ([style*=...]) to
   miss their targets. The rules below use ONLY class names and structural
   selectors so they work identically regardless of how WordPress serializes
   its inline CSS properties. */

/* --- Stories rail: 56px squircle avatars --- */
/* Each story item is a vertical flex column whose first child is the avatar
   group. On production the border-color class is the reliable hook. */
.ah89-stories-rail > .wp-block-group > .wp-block-group:first-child > .wp-block-group:first-child,
.ah89-stories-rail > .wp-block-group > .wp-block-group:first-child > .has-border-color {
	width: 56px !important;
	height: 56px !important;
	min-width: 56px !important;
	min-height: 56px !important;
	max-width: 56px !important;
	max-height: 56px !important;
	aspect-ratio: 1 / 1 !important;
	flex-shrink: 0 !important;
	flex-grow: 0 !important;
	overflow: hidden !important;
	border-radius: 22% !important;
}

/* The "+" new story button (accent bg) */
.ah89-stories-rail > .wp-block-group:first-child > .wp-block-group:first-child,
.ah89-stories-rail .has-accent-background-color {
	border-radius: 22% !important;
}

/* --- Right sidebar "Online now" grid: 32px squircle avatars --- */
/* Scoped ONLY to .online-indicator — no generic class matches that could
   catch date badges, headings, or stat containers. */
.ah89-right-sidebar .online-indicator,
.ah89-right-sidebar .wp-block-group[class*="online-indicator"] {
	width: 32px !important;
	height: 32px !important;
	min-width: 32px !important;
	min-height: 32px !important;
	max-width: 32px !important;
	max-height: 32px !important;
	aspect-ratio: 1 / 1 !important;
	flex-shrink: 0 !important;
	flex-grow: 0 !important;
	flex-basis: 32px !important;
	overflow: hidden !important;
	border-radius: 22% !important;
}

/* Flex-wrap container holding the avatar grid — enforce gap and wrapping */
.ah89-right-sidebar .wp-block-group > .wp-block-group:has(> .online-indicator) {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* --- Right sidebar widget protection --- */
/* Ensure card-surface widgets, h6 headings, date badges, stat containers,
   and other non-avatar elements inside .ah89-right-sidebar are NOT caught
   by the avatar squircle CSS and keep their intended dimensions. */
.ah89-right-sidebar .wp-block-group.has-card-surface-background-color,
.ah89-right-sidebar .wp-block-group.has-card-surface-background-color .wp-block-heading,
.ah89-right-sidebar .wp-block-group.has-card-surface-background-color .wp-block-group.has-accent-subtle-background-color {
	width: auto !important;
	height: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	max-height: none !important;
	aspect-ratio: auto !important;
	flex-shrink: initial !important;
	flex-grow: initial !important;
	flex-basis: auto !important;
	overflow: visible !important;
	border-radius: inherit !important;
}

/* Date badge containers in "Ближайшие события" — restore intended shape */
.ah89-right-sidebar .wp-block-group.has-card-surface-background-color .wp-block-group.has-accent-subtle-background-color.has-accent-color {
	border-radius: 8px !important;
}

/* Feed card avatar rules removed — social feed moved to main site. */

/* Messenger avatars */
.ah89-messenger__avatar {
	aspect-ratio: 1 !important;
}

/* Quick contacts avatars on messages page */
.wp-block-columns .wp-block-group[style*="border-radius:12px"] p[style*="font-size:2rem"] {
	line-height: 1;
}

/* Notification badge dot */
.notification-badge {
	position: relative;
}

.notification-badge::after {
	content: "";
	position: absolute;
	top: 4px;
	right: 4px;
	width: 8px;
	height: 8px;
	background: var(--wp--preset--color--accent);
	border-radius: 50%;
	box-shadow: 0 0 6px var(--wp--preset--color--accent);
}

/* ==========================================================================
   Weather widget treatment
   ========================================================================== */

.is-style-weather-widget {
	background: linear-gradient(135deg, var(--ah89-cyan-8), rgba(10, 22, 40, 0.5));
	border: 1px solid var(--ah89-cyan-20);
	border-radius: 10px;
}

/* ==========================================================================
   Right sidebar section titles
   ========================================================================== */

.is-style-section-title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	padding-bottom: var(--wp--preset--spacing--20);
	border-bottom: 1px solid var(--wp--preset--color--border-subtle);
}

/* ==========================================================================
   Trending tags cloud styling
   ========================================================================== */

.is-style-trending-tags a {
	display: inline-block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--ah89-cyan-60);
	background: var(--ah89-cyan-8);
	border: 1px solid var(--wp--preset--color--border-subtle);
	padding: 0.25em 0.5em;
	border-radius: 4px;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.is-style-trending-tags a:hover {
	background: var(--ah89-cyan-15);
	border-color: var(--ah89-cyan-25);
	color: var(--wp--preset--color--accent);
}

/* ==========================================================================
   Club list item styling
   ========================================================================== */

.is-style-club-dot::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	box-shadow: 0 0 4px var(--wp--preset--color--accent);
	margin-right: 8px;
	flex-shrink: 0;
}

/* ==========================================================================
   Messenger / chat UI treatments
   ========================================================================== */

.is-style-chat-bubble {
	background: var(--wp--preset--color--card-surface);
	border: 1px solid var(--wp--preset--color--border-subtle);
	border-radius: 16px 16px 16px 4px;
	max-width: 75%;
}

.is-style-chat-bubble-self {
	background: var(--wp--preset--color--accent-subtle);
	border: 1px solid var(--ah89-cyan-15);
	border-radius: 16px 16px 4px 16px;
	max-width: 75%;
	margin-left: auto;
}

/* Chat input area */
.is-style-chat-input {
	background: rgba(234, 244, 255, 0.04);
	border: 1px solid var(--wp--preset--color--border-subtle);
	border-radius: 12px;
	transition: border-color 0.2s ease;
}

.is-style-chat-input:focus-within {
	border-color: var(--ah89-cyan-20);
}

/* ==========================================================================
   Stat / counter displays
   ========================================================================== */

.is-style-stat-value {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1;
}

.is-style-stat-label {
	font-family: var(--wp--preset--font-family--mono);
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

/* Stat divider */
.is-style-stat-divider {
	width: 1px;
	align-self: stretch;
	background: var(--ah89-cyan-20);
}

/* ==========================================================================
   CTA button variants from reference design
   ========================================================================== */

.is-style-signal-primary .wp-block-button__link {
	box-shadow: 0 0 20px rgba(0, 212, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.is-style-signal-primary .wp-block-button__link:hover {
	box-shadow: 0 0 30px rgba(0, 212, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.is-style-signal-ghost .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--accent);
	border: 1px solid var(--ah89-cyan-20);
	box-shadow: none;
}

.is-style-signal-ghost .wp-block-button__link:hover {
	border-color: var(--ah89-cyan-40);
	background: var(--ah89-cyan-8);
	box-shadow: none;
}

/* ==========================================================================
   Garage / vehicle spec card
   ========================================================================== */

.is-style-spec-row {
	border-bottom: 1px solid var(--wp--preset--color--border-subtle);
}

.is-style-spec-row:last-child {
	border-bottom: none;
}

.is-style-spec-label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--text-dim);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.is-style-spec-value {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	color: var(--wp--preset--color--text);
}

/* ==========================================================================
   Profile header / banner
   ========================================================================== */

.is-style-profile-banner {
	position: relative;
	overflow: hidden;
	border-radius: var(--ah89-card-radius);
}

.is-style-profile-banner::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 40%, var(--wp--preset--color--background) 100%);
	pointer-events: none;
}

/* ==========================================================================
   Footer credit styling
   ========================================================================== */

.wp-block-template-part.site-sidebar .footer-credit,
.footer-credit {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--text-dim);
	letter-spacing: 0.04em;
}

.footer-credit a {
	color: var(--wp--preset--color--text-secondary);
	text-decoration: none;
	transition: color 0.2s ease;
}

.footer-credit a:hover {
	color: var(--wp--preset--color--accent);
}

/* ==========================================================================
   Block outline suppression — prevent visible outlines on production
   ========================================================================== */

/* WordPress on some hosts adds visible outlines / borders to wp-block-group
   elements at render time (editor leftover CSS or theme-compat rules).
   Suppress any default outline on non-interactive blocks on the front-end. */
.wp-block-group:not(:focus-visible),
.wp-block-columns:not(:focus-visible),
.wp-block-column:not(:focus-visible) {
	outline: none !important;
}

/* ==========================================================================
   Tablet avatar fix (783px–1199px)
   ========================================================================== */

@media (min-width: 783px) and (max-width: 1199px) {
	/* Force all online-indicator avatars to perfect squircle on tablet */
	.online-indicator,
	.ah89-right-sidebar .online-indicator {
		width: 32px !important;
		height: 32px !important;
		min-width: 32px !important;
		min-height: 32px !important;
		max-width: 32px !important;
		max-height: 32px !important;
		aspect-ratio: 1 / 1 !important;
		flex-shrink: 0 !important;
		flex-grow: 0 !important;
		flex-basis: 32px !important;
		overflow: hidden !important;
		border-radius: 22% !important;
	}

	/* Stories rail avatars on tablet */
	.ah89-stories-rail .wp-block-group.has-border-color,
	.ah89-stories-rail .wp-block-group.has-accent-background-color {
		width: 56px !important;
		height: 56px !important;
		min-width: 56px !important;
		min-height: 56px !important;
		max-width: 56px !important;
		max-height: 56px !important;
		aspect-ratio: 1 / 1 !important;
		flex-shrink: 0 !important;
		flex-grow: 0 !important;
		flex-basis: 56px !important;
		overflow: hidden !important;
		border-radius: 22% !important;
	}

	/* Feed card avatar tablet rules removed — social feed moved to main site. */

	/* Any wp-block-group with border-radius:50% inline style — tablet override */
	.wp-block-group[style*="border-radius:50%"],
	.wp-block-group[style*="border-radius: 50%"],
	.wp-block-group[style*="radius:50%"] {
		aspect-ratio: 1 / 1 !important;
		flex-shrink: 0 !important;
		flex-grow: 0 !important;
		overflow: hidden !important;
		border-radius: 22% !important;
	}

	/* accent-subtle bg with any border-radius inline — tablet */
	.wp-block-group.has-accent-subtle-background-color[style*="border-radius"] {
		aspect-ratio: 1 / 1 !important;
		flex-shrink: 0 !important;
		flex-grow: 0 !important;
		overflow: hidden !important;
		border-radius: 22% !important;
	}
}

/* ==========================================================================
   Garage "Open" button — wp:read-more styled as a full-width button
   ========================================================================== */

.ah89-garage-open-btn {
	display: block !important;
	width: 100% !important;
	text-align: center !important;
	text-decoration: none !important;
	box-shadow: 0 0 16px rgba(0, 212, 255, 0.3) !important;
	transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease !important;
}

.ah89-garage-open-btn:hover {
	background: var(--wp--preset--color--accent-hover, #00B8D9) !important;
	box-shadow: 0 0 24px rgba(0, 212, 255, 0.5) !important;
	transform: translateY(-1px) !important;
	color: var(--wp--preset--color--background, #0B0E12) !important;
}

/* ==========================================================================
   Mobile form overflow fix — prevent inputs from exceeding viewport width
   ========================================================================== */

/* Global: every input, textarea, select, and button must respect its
   container width. Without this, long placeholders or default sizing
   can push elements wider than the viewport on narrow screens. */
input,
textarea,
select,
button,
.wp-block-search__input,
.wp-block-search__inside-wrapper,
.wp-block-search {
	max-width: 100%;
	box-sizing: border-box;
}

/* Prevent ANY element from causing horizontal overflow on the body */
@media (max-width: 782px) {
	html,
	body {
		overflow-x: hidden;
	}

	/* All form elements on mobile — strict width clamping */
	input[type="text"],
	input[type="email"],
	input[type="password"],
	input[type="url"],
	input[type="tel"],
	input[type="number"],
	input[type="search"],
	textarea,
	select,
	.ah89-listing-form__input,
	.ah89-listing-form__select,
	.ah89-listing-form__textarea,
	.ah89-business-form__input,
	.ah89-business-form__select,
	.ah89-business-form__textarea,
	.ah89-garage-form__input,
	.ah89-garage-form__select,
	.ah89-garage-form__textarea,
	.ah89-photo-upload__input,
	.ah89-photo-upload__select,
	.ah89-video-upload__input,
	.ah89-video-upload__select,
	.ah89-profile-login__input,
	.ah89-members-list__search-input,
	.ah89-messenger__input,
	.ah89-messenger__search input,
	.wp-block-search__input,
	/* Form containers — prevent overflow */
	.ah89-listing-form__inner,
	.ah89-business-form__inner,
	.ah89-garage-form__inner,
	.ah89-photo-upload__card,
	.ah89-video-upload__card,
	.ah89-profile-login__card,
	.ah89-messenger,
	.ah89-mod,
	.ah89-members-list__search,
	.wp-block-search,
	.wp-block-search__inside-wrapper {
		max-width: 100% !important;
		box-sizing: border-box !important;
		overflow-x: hidden !important;
	}

	/* Form grids — single column on mobile to prevent overflow */
	.ah89-listing-form__grid,
	.ah89-business-form__grid,
	.ah89-garage-form__grid {
		grid-template-columns: 1fr !important;
	}

	/* Upload areas — prevent fixed widths from overflowing */
	.ah89-business-form__upload-area,
	.ah89-garage-form__upload-area,
	.ah89-photo-upload__dropzone,
	.ah89-video-upload__dropzone {
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	/* Post content and main content area — prevent overflow */
	.main-content-area,
	.main-content-area > *,
	.wp-block-post-content,
	.wp-block-post-content > * {
		max-width: 100vw;
		overflow-x: hidden;
	}

	/* Long text wrap — prevent any text from overflowing on mobile */
	p, h1, h2, h3, h4, h5, h6,
	span, a, label, div,
	.ah89-mod__item-meta,
	.ah89-mod__item-title,
	.ah89-mod__msg-text,
	.ah89-pf-post__text,
	.ah89-members-list__name,
	.ah89-listing-form__input,
	.ah89-business-form__input,
	.ah89-garage-form__input,
	.is-style-spec-value,
	.is-style-spec-label {
		overflow-wrap: break-word !important;
		word-break: break-word !important;
		hyphens: auto !important;
	}

	/* Table cells on mobile — allow text wrap */
	td, th {
		overflow-wrap: break-word !important;
		word-break: break-word !important;
	}

	/* Spec rows on single pages — stack vertically on mobile */
	.is-style-spec-row {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 2px !important;
	}

	/* ---- GLOBAL mobile font scaling ----
	   Reduce fluid font min sizes by ~15% on mobile to prevent text
	   from being clipped by alignfull negative margins. This affects
	   all headings, paragraphs, and meta labels globally. */
	h1, .wp-block-heading:where([class*="h1"]),
	.has-display-font-size {
		font-size: clamp(1.9rem, 5vw, 3.5rem) !important;
	}
	h2, .wp-block-heading:where([class*="h2"]),
	.has-xx-large-font-size {
		font-size: clamp(1.5rem, 4vw, 2.5rem) !important;
	}
	h3, .wp-block-heading:where([class*="h3"]),
	.has-x-large-font-size {
		font-size: clamp(1.2rem, 3.5vw, 1.75rem) !important;
	}

	/* Business card header on mobile — prevent text overflow and ensure
	   left/right padding so the first character is not clipped by the
	   viewport edge. The alignfull wrapper uses negative margins to go
	   edge-to-edge, but its children need interior padding on mobile. */
	.main-content-area .alignfull h1.wp-block-heading,
	.main-content-area .alignfull .wp-block-post-title,
	.main-content-area .alignfull h2.wp-block-heading,
	.main-content-area .alignfull h3.wp-block-heading {
		word-break: break-word !important;
		overflow-wrap: break-word !important;
		hyphens: auto !important;
		padding-left: var(--wp--preset--spacing--30, 1rem) !important;
		padding-right: var(--wp--preset--spacing--30, 1rem) !important;
	}

	/* ALL text elements inside alignfull — add padding so nothing
	   clips against the viewport edge on mobile. This is the
	   global fix for the recurring "first letter cut off" issue. */
	.main-content-area .alignfull p,
	.main-content-area .alignfull span,
	.main-content-area .alignfull .wp-block-group > p,
	.main-content-area .alignfull .wp-block-group > span {
		padding-left: var(--wp--preset--spacing--20, 0.5rem) !important;
		padding-right: var(--wp--preset--spacing--20, 0.5rem) !important;
	}

	/* Category + city meta row — wrap on narrow screens and add padding */
	.main-content-area .alignfull > .wp-block-group > .wp-block-group:first-child {
		flex-wrap: wrap !important;
		padding-left: var(--wp--preset--spacing--30, 1rem) !important;
		padding-right: var(--wp--preset--spacing--30, 1rem) !important;
	}

	/* Ensure the constrained inner group also has mobile padding */
	.main-content-area .alignfull > .wp-block-group[class*="constrained"] {
		padding-left: var(--wp--preset--spacing--30, 1rem) !important;
		padding-right: var(--wp--preset--spacing--30, 1rem) !important;
	}

	/* Constrained groups inside alignfull — ensure padding propagates */
	.main-content-area .alignfull .wp-block-group {
		padding-left: max(var(--wp--preset--spacing--20, 0.5rem), env(safe-area-inset-left, 0px)) !important;
		padding-right: max(var(--wp--preset--spacing--20, 0.5rem), env(safe-area-inset-right, 0px)) !important;
	}

	/* ---- GLOBAL mobile alignfull fix ----
	   The recurring "first letter cut off" issue on mobile stems from
	   alignfull blocks using negative margins to go edge-to-edge while
	   their children inherit zero padding. Previous attempts used
	   targeted selectors that missed some elements or conflicted with
	   inline styles. This rule uses the broadest safe selector — every
	   direct child of an alignfull block — and sets a minimum padding
	   that prevents ANY text from clipping against the viewport edge.
	   The min() function ensures we never exceed the root padding. */
	.main-content-area .alignfull > * {
		padding-left: max(12px, env(safe-area-inset-left, 0px)) !important;
		padding-right: max(12px, env(safe-area-inset-right, 0px)) !important;
	}

	/* Groups that already have generous inline padding (e.g. cards with
	   var(--wp--preset--spacing--40)) don't need the forced 12px — their
	   own padding is already sufficient. Override only for groups whose
	   computed padding would be less than 12px. */
	.main-content-area .alignfull > .wp-block-group[style*="padding-left:var(--wp--preset--spacing--40"],
	.main-content-area .alignfull > .wp-block-group[style*="padding-left:var(--wp--preset--spacing--50"] {
		/* These already have 1.5rem+ padding — don't override */
	}

	/* Constrained inner groups need their own padding propagated */
	.main-content-area .alignfull [class*="constrained"] {
		padding-left: max(12px, env(safe-area-inset-left, 0px)) !important;
		padding-right: max(12px, env(safe-area-inset-right, 0px)) !important;
	}

	/* Buttons on mobile — prevent overflow from fixed paddings */
	.wp-block-button__link,
	.ah89-mod__btn,
	.ah89-pf__submit,
	.ah89-listing-form__submit,
	.ah89-business-form__submit,
	.ah89-garage-form .ah89-garage-form__submit {
		max-width: 100% !important;
		white-space: normal !important;
		text-align: center !important;
	}

	/* Messenger chat input area — ensure it fits mobile */
	.ah89-messenger__input-area {
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	.ah89-messenger__input-area input {
		min-width: 0 !important;
		flex: 1 1 0 !important;
	}

	/* Members list cards — prevent overflow on narrow screens */
	.ah89-members-list__card {
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	/* Profile panel — prevent wide stat grids from overflowing */
	.ah89-profile-auth__stats {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	.ah89-profile-auth__header,
	.ah89-profile-auth__body,
	.ah89-profile-auth__menu-card,
	.ah89-profile-auth__info-card,
	.ah89-profile-auth__actions-card,
	.ah89-profile-auth__badges-card {
		max-width: 100% !important;
		box-sizing: border-box !important;
		overflow-x: hidden !important;
	}

	/* Profile top — stack avatar and info on very narrow screens */
	.ah89-profile-auth__top {
		flex-wrap: wrap;
	}

	/* Moderation panel — tabs and items */
	.ah89-mod__tabs {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.ah89-mod__item {
		max-width: 100% !important;
		box-sizing: border-box !important;
		overflow-x: hidden !important;
	}

	.ah89-mod__item-meta {
		max-width: 100%;
		overflow-wrap: break-word;
		word-break: break-word;
	}

	/* Columns on very narrow screens — single column */
	.wp-block-columns {
		flex-direction: column !important;
	}

	.wp-block-column {
		flex-basis: 100% !important;
		max-width: 100% !important;
	}

	/* Right sidebar on mobile — prevent overflow */
	.ah89-right-sidebar {
		max-width: 100% !important;
		overflow-x: hidden !important;
		box-sizing: border-box !important;
	}

	/* Stories rail — allow horizontal scroll without causing page overflow */
	.ah89-stories-rail {
		max-width: 100vw;
		overflow-x: auto;
	}

}

/* ==========================================================================
   Global select / dropdown dark theme
   ========================================================================== */

/* Force dark theme on ALL native <select> elements across the site.
   This covers photo upload form, video upload form, garage form,
   listing form, business form, and any future forms. */
select,
.ah89-photo-upload__select,
.ah89-video-upload__select,
.ah89-garage-form__select,
.ah89-listing-form__select,
.ah89-business-form__select {
	background-color: var(--wp--preset--color--card-surface, #111518) !important;
	color: var(--wp--preset--color--text, #EAF4FF) !important;
	border: 1px solid var(--wp--preset--color--border-subtle, #1A2030) !important;
	border-radius: 8px !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%238A9BB0' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 12px center !important;
	padding-right: 36px !important;
}

select option,
.ah89-photo-upload__select option,
.ah89-video-upload__select option,
.ah89-garage-form__select option,
.ah89-listing-form__select option,
.ah89-business-form__select option {
	background-color: var(--wp--preset--color--card-surface, #111518) !important;
	color: var(--wp--preset--color--text, #EAF4FF) !important;
	padding: 8px 12px !important;
}

select:focus,
.ah89-photo-upload__select:focus,
.ah89-video-upload__select:focus,
.ah89-garage-form__select:focus,
.ah89-listing-form__select:focus,
.ah89-business-form__select:focus {
	border-color: rgba(0, 212, 255, 0.2) !important;
	background-color: rgba(0, 212, 255, 0.03) !important;
	outline: none !important;
}

/* ==========================================================================
   Garage shortcode form — dark theme styling
   (Shortcode [ah89_garage_form] in functions.php bypasses wp-scripts build)
   ========================================================================== */

.ah89-garage-form .ah89-garage-form__inner {
	background: var(--wp--preset--color--card-surface, #111518) !important;
	border: 1px solid var(--ah89-glass-border, rgba(0, 212, 255, 0.08)) !important;
	border-radius: var(--ah89-card-radius, 16px) !important;
	box-shadow: var(--ah89-card-shadow, 0 4px 24px rgba(0, 0, 0, 0.4)) !important;
	padding: var(--wp--preset--spacing--50, 2rem) var(--wp--preset--spacing--40, 1.5rem) !important;
	max-width: 720px !important;
	margin: 0 auto !important;
}

.ah89-garage-form .ah89-garage-form__header {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	margin-bottom: var(--wp--preset--spacing--40, 1.5rem) !important;
	padding-bottom: var(--wp--preset--spacing--30, 1rem) !important;
	border-bottom: 1px solid var(--wp--preset--color--border-subtle, #1A2030) !important;
}

.ah89-garage-form .ah89-garage-form__icon {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 40px !important;
	height: 40px !important;
	border-radius: 10px !important;
	background: rgba(0, 212, 255, 0.08) !important;
	border: 1px solid rgba(0, 212, 255, 0.2) !important;
	color: var(--wp--preset--color--accent, #00D4FF) !important;
	flex-shrink: 0 !important;
}

.ah89-garage-form .ah89-garage-form__title {
	font-family: var(--wp--preset--font-family--heading) !important;
	font-weight: 700 !important;
	font-size: var(--wp--preset--font-size--large, 1.25rem) !important;
	color: var(--wp--preset--color--text, #EAF4FF) !important;
	letter-spacing: 0.04em !important;
}

.ah89-garage-form .ah89-garage-form__grid {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: var(--wp--preset--spacing--30, 1rem) !important;
}

.ah89-garage-form .ah89-garage-form__field {
	display: flex !important;
	flex-direction: column !important;
	gap: 6px !important;
}

.ah89-garage-form .ah89-garage-form__field--full {
	grid-column: 1 / -1 !important;
}

.ah89-garage-form .ah89-garage-form__label {
	font-family: var(--wp--preset--font-family--mono) !important;
	font-size: var(--wp--preset--font-size--x-small, 0.75rem) !important;
	color: var(--wp--preset--color--text-secondary, #8A9BB0) !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
}

.ah89-garage-form .ah89-garage-form__required {
	color: var(--wp--preset--color--accent, #00D4FF) !important;
}

.ah89-garage-form .ah89-garage-form__input,
.ah89-garage-form .ah89-garage-form__select,
.ah89-garage-form .ah89-garage-form__textarea {
	width: 100% !important;
	background: rgba(234, 244, 255, 0.04) !important;
	border: 1px solid var(--wp--preset--color--border-subtle, #1A2030) !important;
	border-radius: 8px !important;
	color: var(--wp--preset--color--text, #EAF4FF) !important;
	font-family: var(--wp--preset--font-family--mono) !important;
	font-size: var(--wp--preset--font-size--small, 0.8125rem) !important;
	padding: 10px 14px !important;
	outline: none !important;
	transition: border-color 0.2s ease, background-color 0.2s ease !important;
}

.ah89-garage-form .ah89-garage-form__input::placeholder,
.ah89-garage-form .ah89-garage-form__textarea::placeholder {
	color: var(--wp--preset--color--text-dim, #556070) !important;
}

.ah89-garage-form .ah89-garage-form__input:focus,
.ah89-garage-form .ah89-garage-form__select:focus,
.ah89-garage-form .ah89-garage-form__textarea:focus {
	border-color: rgba(0, 212, 255, 0.2) !important;
	background: rgba(0, 212, 255, 0.03) !important;
}

.ah89-garage-form .ah89-garage-form__textarea {
	resize: vertical !important;
	min-height: 100px !important;
}

.ah89-garage-form .ah89-garage-form__actions {
	display: flex !important;
	align-items: center !important;
	gap: var(--wp--preset--spacing--30, 1rem) !important;
	margin-top: var(--wp--preset--spacing--40, 1.5rem) !important;
	padding-top: var(--wp--preset--spacing--30, 1rem) !important;
	border-top: 1px solid var(--wp--preset--color--border-subtle, #1A2030) !important;
	flex-wrap: wrap !important;
}

.ah89-garage-form .ah89-garage-form__submit {
	font-family: var(--wp--preset--font-family--heading) !important;
	font-weight: 700 !important;
	font-size: var(--wp--preset--font-size--small, 0.8125rem) !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	background: var(--wp--preset--color--accent, #00D4FF) !important;
	color: var(--wp--preset--color--background, #0B0E12) !important;
	border: none !important;
	border-radius: 8px !important;
	padding: 12px 32px !important;
	cursor: pointer !important;
	box-shadow: 0 0 20px rgba(0, 212, 255, 0.3) !important;
	transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease !important;
	white-space: nowrap !important;
}

.ah89-garage-form .ah89-garage-form__submit:hover {
	background: var(--wp--preset--color--accent-hover, #00B8D9) !important;
	box-shadow: 0 0 30px rgba(0, 212, 255, 0.5) !important;
	transform: translateY(-1px) !important;
}

.ah89-garage-form .ah89-garage-form__submit:disabled {
	opacity: 0.5 !important;
	cursor: not-allowed !important;
	transform: none !important;
}

.ah89-garage-form .ah89-garage-form__hint {
	font-family: var(--wp--preset--font-family--mono) !important;
	font-size: var(--wp--preset--font-size--x-small, 0.75rem) !important;
	color: var(--wp--preset--color--text-dim, #556070) !important;
	letter-spacing: 0.04em !important;
}

.ah89-garage-form .ah89-garage-form__status--visible {
	display: block !important;
}

.ah89-garage-form .ah89-garage-form__status--success {
	background: rgba(0, 230, 118, 0.08) !important;
	border: 1px solid rgba(0, 230, 118, 0.2) !important;
	color: var(--wp--preset--color--success, #00E676) !important;
	padding: 12px 16px !important;
	border-radius: 8px !important;
	margin-top: var(--wp--preset--spacing--20, 0.5rem) !important;
	font-family: var(--wp--preset--font-family--mono) !important;
	font-size: var(--wp--preset--font-size--small, 0.8125rem) !important;
}

.ah89-garage-form .ah89-garage-form__status--error {
	background: rgba(255, 77, 106, 0.08) !important;
	border: 1px solid rgba(255, 77, 106, 0.2) !important;
	color: var(--wp--preset--color--danger, #FF4D6A) !important;
	padding: 12px 16px !important;
	border-radius: 8px !important;
	margin-top: var(--wp--preset--spacing--20, 0.5rem) !important;
	font-family: var(--wp--preset--font-family--mono) !important;
	font-size: var(--wp--preset--font-size--small, 0.8125rem) !important;
}

.ah89-garage-form .ah89-garage-form__upload-placeholder {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	padding: 24px 16px !important;
	border: 2px dashed var(--wp--preset--color--border-subtle, #1A2030) !important;
	border-radius: 12px !important;
	background: rgba(234, 244, 255, 0.02) !important;
	cursor: pointer !important;
	transition: border-color 0.2s ease, background-color 0.2s ease !important;
	text-align: center !important;
}

.ah89-garage-form .ah89-garage-form__upload-placeholder:hover {
	border-color: rgba(0, 212, 255, 0.2) !important;
	background: rgba(0, 212, 255, 0.03) !important;
}

.ah89-garage-form .ah89-garage-form__upload-thumb {
	position: relative !important;
	width: 80px !important;
	height: 80px !important;
	border-radius: 8px !important;
	overflow: hidden !important;
	border: 1px solid var(--wp--preset--color--border-subtle, #1A2030) !important;
}

.ah89-garage-form .ah89-garage-form__upload-thumb img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

.ah89-garage-form .ah89-garage-form__upload-remove {
	position: absolute !important;
	top: 2px !important;
	right: 2px !important;
	width: 20px !important;
	height: 20px !important;
	border-radius: 50% !important;
	background: rgba(255, 77, 106, 0.9) !important;
	color: #fff !important;
	border: none !important;
	font-size: 12px !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.ah89-garage-form .ah89-garage-form__login-msg {
	text-align: center !important;
	padding: var(--wp--preset--spacing--50, 2rem) var(--wp--preset--spacing--40, 1.5rem) !important;
}

.ah89-garage-form .ah89-garage-form__login-msg p {
	font-family: var(--wp--preset--font-family--heading) !important;
	font-size: var(--wp--preset--font-size--medium, 1rem) !important;
	color: var(--wp--preset--color--text-secondary, #8A9BB0) !important;
	margin: 0 0 var(--wp--preset--spacing--30, 1rem) !important;
}

.ah89-garage-form .ah89-garage-form__login-msg a {
	display: inline-block !important;
	font-family: var(--wp--preset--font-family--heading) !important;
	font-weight: 700 !important;
	font-size: var(--wp--preset--font-size--small, 0.8125rem) !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	background: var(--wp--preset--color--accent, #00D4FF) !important;
	color: var(--wp--preset--color--background, #0B0E12) !important;
	border-radius: 8px !important;
	padding: 12px 32px !important;
	text-decoration: none !important;
	box-shadow: 0 0 20px rgba(0, 212, 255, 0.3) !important;
}

@media (max-width: 600px) {
	.ah89-garage-form .ah89-garage-form__inner {
		padding: var(--wp--preset--spacing--40, 1.5rem) var(--wp--preset--spacing--30, 1rem) !important;
	}
	.ah89-garage-form .ah89-garage-form__grid {
		grid-template-columns: 1fr !important;
	}
	.ah89-garage-form .ah89-garage-form__actions {
		flex-direction: column !important;
		align-items: stretch !important;
	}
	.ah89-garage-form .ah89-garage-form__submit {
		width: 100% !important;
		text-align: center !important;
	}
}

/* ==========================================================================
   Clickable phone numbers — mobile convenience
   ========================================================================== */

/* Phone numbers rendered as tel: links get accent styling */
a[href^="tel:"] {
	color: var(--wp--preset--color--accent, #00D4FF) !important;
	text-decoration: none;
	transition: color 0.15s ease;
	white-space: nowrap;
}

a[href^="tel:"]:hover {
	color: var(--wp--preset--color--accent-hover, #00B8D9) !important;
	text-decoration: underline;
}

/* ==========================================================================
   MAX Messenger chat button — unique styled button for businesses
   ========================================================================== */

.ah89-max-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small, 0.8125rem);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #fff;
	background: linear-gradient(135deg, #0077FF 0%, #00AAFF 50%, #00D4FF 100%);
	border: none;
	border-radius: 12px;
	padding: 10px 20px;
	text-decoration: none;
	position: relative;
	overflow: hidden;
	transition: box-shadow 0.25s ease, transform 0.15s ease;
	box-shadow: 0 0 16px rgba(0, 119, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.ah89-max-btn:hover {
	box-shadow: 0 0 28px rgba(0, 119, 255, 0.5), 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
	transform: translateY(-1px);
	color: #fff;
}

.ah89-max-btn:active {
	transform: translateY(0);
}

/* Animated shine effect on hover */
.ah89-max-btn::before {
	content: "";
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
	transition: left 0.5s ease;
}

.ah89-max-btn:hover::before {
	left: 100%;
}

/* MAX icon container */
.ah89-max-btn__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.2);
	flex-shrink: 0;
}

/* Pulse dot indicator */
.ah89-max-btn__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #00FF88;
	box-shadow: 0 0 6px #00FF88;
	animation: ah89-max-pulse 2s ease-in-out infinite;
	flex-shrink: 0;
}

@keyframes ah89-max-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.6; transform: scale(0.8); }
}

/* Online indicator pulse for "Сейчас онлайн" widget heading */
@keyframes ah89-online-pulse {
	0%, 100% { opacity: 1; box-shadow: 0 0 6px #00E676; }
	50% { opacity: 0.5; box-shadow: 0 0 12px #00E676, 0 0 24px rgba(0, 230, 118, 0.3); }
}

/* Fix: prevent the online dot in widget heading from stretching
   due to flex parent — force exact circle dimensions.
   Uses multiple attribute selectors for maximum specificity. */
.ah89-right-sidebar .wp-block-cover .wp-block-cover__inner-container span[style*="border-radius:50%"][style*="background:#00E676"],
.wp-block-cover__inner-container span[style*="border-radius:50%"][style*="background:#00E676"],
span[style*="width:8px"][style*="height:8px"][style*="border-radius:50%"][style*="background:#00E676"],
span[style*="border-radius:50%"][style*="background:#00E676"][style*="animation"] {
	display: inline-block !important;
	width: 8px !important;
	height: 8px !important;
	min-width: 8px !important;
	min-height: 8px !important;
	max-width: 8px !important;
	max-height: 8px !important;
	flex-shrink: 0 !important;
	flex-grow: 0 !important;
	flex-basis: 8px !important;
	aspect-ratio: 1 / 1 !important;
	line-height: 0 !important;
	font-size: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	vertical-align: middle !important;
	box-sizing: border-box !important;
	overflow: hidden !important;
}

/* Mobile adjustments */
@media (max-width: 600px) {
	.ah89-max-btn {
		font-size: 0.7rem;
		padding: 8px 14px;
		gap: 6px;
		letter-spacing: 0.06em;
	}
	.ah89-max-btn__icon {
		width: 20px;
		height: 20px;
	}
}

/* ==========================================================================
   Business card — image size constraint and unified buttons
   ========================================================================== */

/* Constrain gallery/featured image on single business pages */
.main-content-area .ah89-gallery-carousel img,
.main-content-area [class*="gallery"] img {
	max-height: 400px;
	width: 100%;
	object-fit: cover;
	border-radius: 16px;
}

@media (max-width: 782px) {
	.main-content-area .ah89-gallery-carousel img,
	.main-content-area [class*="gallery"] img {
		max-height: 280px;
	}
}

/* Unified button row on business card — all buttons same height and style */
.main-content-area main .wp-block-group > .wp-block-group:last-child .wp-block-button__link,
.main-content-area main .wp-block-group > .wp-block-group:last-child .ah89-max-btn,
.main-content-area main .wp-block-group > .wp-block-group:last-child a[style*="inline-flex"][style*="border-radius"] {
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 20px !important;
	font-size: var(--wp--preset--font-size--small, 0.8125rem) !important;
	border-radius: 10px !important;
	box-sizing: border-box;
}

/* Edit and share buttons on business card — match other buttons */
.main-content-area main [style*="ah89_admin_edit_business_btn"] a,
.main-content-area main [style*="ah89_share_business_btn"] button {
	height: 44px !important;
	border-radius: 10px !important;
}

/* ==========================================================================
   Focus styles — accessibility
   ========================================================================== */

*:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* Remove default outline for mouse users */
:focus:not(:focus-visible) {
	outline: none;
}

/* ==========================================================================
   Print styles — minimal
   ========================================================================== */

@media print {
	.wp-block-template-part.site-sidebar,
	.site-right-sidebar {
		display: none;
	}

	.wp-site-blocks {
		display: block;
	}

	.main-content-area {
		max-width: 100%;
	}

	body {
		background: #fff;
		color: #000;
	}
}

/* ---------- Loop layout utilities ---------- */
/* These classes are wired to the wp:query blocks emitted by content/pages and
   templates. Do not rename. Tune colours and spacing to theme.json tokens. */

/* Horizontal scrollable rail */
.wp-block-query.is-style-loop-rail .wp-block-post-template {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-bottom: var(--wp--preset--spacing--20);
	-webkit-overflow-scrolling: touch;
}
.wp-block-query.is-style-loop-rail .wp-block-post-template::-webkit-scrollbar {
	display: none;
}
.wp-block-query.is-style-loop-rail .wp-block-post-template > * {
	flex: 0 0 220px;
	scroll-snap-align: start;
	min-width: 180px;
}

/* Carousel card content — prevent text from overflowing */
.wp-block-query.is-style-loop-rail .wp-block-post-template .wp-block-group {
	overflow: hidden;
}

/* Compact list with hairline row dividers */
.wp-block-query.is-style-loop-list .wp-block-post-template > * {
	border-bottom: 1px solid var(--wp--preset--color--border-subtle);
	padding-block: var(--wp--preset--spacing--30);
}
.wp-block-query.is-style-loop-list .wp-block-post-template > *:last-child {
	border-bottom: 0;
}

/* Zigzag — flip the columns inside every even entry */
.wp-block-query.is-style-loop-zigzag .wp-block-post-template > *:nth-child(even) .wp-block-columns {
	flex-direction: row-reverse;
}

/* Timeline — vertical line with node markers per entry */
.wp-block-query.is-style-loop-timeline .wp-block-post-template {
	position: relative;
	padding-inline-start: 2.5rem;
}
.wp-block-query.is-style-loop-timeline .wp-block-post-template::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0.5rem;
	width: 2px;
	background: var(--wp--preset--color--border-subtle);
	opacity: 0.3;
}
.wp-block-query.is-style-loop-timeline .wp-block-post-template > * {
	position: relative;
}
.wp-block-query.is-style-loop-timeline .wp-block-post-template > *::before {
	content: "";
	position: absolute;
	inset-inline-start: -2.25rem;
	inset-block-start: 0.6rem;
	width: 1rem;
	height: 1rem;
	border: 2px solid var(--wp--preset--color--accent);
	border-radius: 50%;
	background: var(--wp--preset--color--background);
}

/* Magazine — first child spans 2 columns of the grid */
.wp-block-query.is-style-loop-magazine .wp-block-post-template > *:first-child {
	grid-column: span 2;
}
@media (max-width: 600px) {
	.wp-block-query.is-style-loop-magazine .wp-block-post-template > *:first-child {
		grid-column: auto;
	}
}

/* ==========================================================================
   Reduced motion — safety net
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   Dashboard three-column layout (homepage)
   ========================================================================== */

.ah89-dashboard .ah89-dashboard-columns {
	display: flex;
	flex-wrap: nowrap;
	gap: 0;
}

.ah89-dashboard .ah89-feed-column {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1;
}

/* Right sidebar floated via CSS on desktop */
.ah89-right-sidebar {
	display: none;
}

@media (min-width: 1100px) {
	.ah89-dashboard .ah89-feed-column {
		display: grid;
		grid-template-columns: 1fr 250px;
		grid-template-rows: auto auto 1fr;
	}

	/* Feed content — first two wp-block-group children ("Что нового" heading
	   + query with businesses) occupy column 1, spanning full width.
	   They must appear ABOVE the sidebar, not beside it. */
	.ah89-dashboard .ah89-feed-column > .wp-block-group:not(.ah89-right-sidebar):not(.ah89-banner-column):nth-child(1) {
		grid-column: 1 / -1;
		grid-row: 1;
	}

	.ah89-dashboard .ah89-feed-column > .wp-block-group:not(.ah89-right-sidebar):not(.ah89-banner-column):nth-child(2) {
		grid-column: 1 / -1;
		grid-row: 2;
	}

	/* Right sidebar (widgets) — column 1, row 3 (below both content blocks) */
	.ah89-right-sidebar {
		display: block;
		grid-column: 1;
		grid-row: 3;
		position: sticky;
		top: 0;
		align-self: start;
		height: fit-content;
		max-height: 100vh;
		overflow-y: auto;
		scrollbar-width: thin;
		scrollbar-color: var(--wp--preset--color--border-subtle) transparent;
	}

	/* Banner column (2nd column for plugin-injected banners) —
	   starts at same row as widgets, right beside them */
	.ah89-banner-column {
		display: block;
		grid-column: 2;
		grid-row: 3;
		position: sticky;
		top: 0;
		align-self: start;
		height: fit-content;
		max-height: 100vh;
		overflow-y: auto;
		scrollbar-width: thin;
		scrollbar-color: var(--wp--preset--color--border-subtle) transparent;
	}
}

/* Hide banner column on tablet and mobile — banners only show on wide screens */
@media (max-width: 1099px) {
	.ah89-banner-column {
		display: none;
	}
}

@media (max-width: 1099px) {
	.ah89-right-sidebar {
		display: block;
		padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	}

	/* Move "Online now" widget above feed content on mobile */
	.ah89-dashboard .ah89-feed-column {
		display: flex;
		flex-direction: column;
	}

	.ah89-right-sidebar {
		order: -1;
	}

	/* Inside the right sidebar on mobile, show only the "Online now" widget
	   above the feed, and hide the rest (they'll stack below the feed later) */
}

/* On mobile: reorder children inside ah89-feed-column.
   Desired order:
   1. "Написать в общий чат" (post creation bar) — 1st wp:group child
   2. Карусель кнопок (stories rail) — 2nd wp:group child
   3. "Сейчас онлайн" (right sidebar — ah89-right-sidebar)
   4. "Что нового" / публикации (feed content) — 3rd wp:group child
   5. Демо-контент (feed cards) — 4th, 5th, 6th wp:group children
   6–8. Right sidebar widgets: погода, статистика, ближайшие события */
@media (max-width: 782px) {
	.ah89-dashboard .ah89-feed-column {
		display: flex;
		flex-direction: column;
	}

	/* 1. Post creation bar — "Написать в общий чат" */
	.ah89-dashboard .ah89-feed-column > .wp-block-group:nth-child(1) {
		order: 1 !important;
	}

	/* 2. Stories rail — карусель кнопок */
	.ah89-dashboard .ah89-feed-column > .wp-block-group:nth-child(2) {
		order: 2 !important;
	}

	/* 3. Feed content — "Что нового" / публикации (ah89/post-form)
	   This is the 3rd wp:group child inside .ah89-feed-column.
	   On mobile it must appear IMMEDIATELY after "Сейчас онлайн". */
	.ah89-dashboard .ah89-feed-column > .wp-block-group:nth-child(3) {
		order: 3 !important;
	}

	/* 4. Right sidebar — entire block including all widgets.
	   On mobile the sidebar stacks AFTER "Что нового" and demo content. */
	.ah89-right-sidebar {
		order: 10 !important;
	}

	/* Ensure "Что нового" heading text is visible */
	.ah89-dashboard .ah89-feed-column > .wp-block-group:nth-child(3) .ah89-pf {
		order: 0 !important;
	}

	/* 4–8. Demo feed cards and remaining children — after "Что нового" */
	.ah89-dashboard .ah89-feed-column > .wp-block-group:nth-child(4):not(.ah89-right-sidebar) {
		order: 4 !important;
	}
	.ah89-dashboard .ah89-feed-column > .wp-block-group:nth-child(5):not(.ah89-right-sidebar) {
		order: 5 !important;
	}
	.ah89-dashboard .ah89-feed-column > .wp-block-group:nth-child(6):not(.ah89-right-sidebar) {
		order: 6 !important;
	}
	.ah89-dashboard .ah89-feed-column > .wp-block-group:nth-child(n+7):not(.ah89-right-sidebar) {
		order: 7 !important;
	}

	/* ---- Inside the right sidebar on mobile, reorder widgets ----
	   The sidebar contains (in DOM order):
	   1. AutoHouse-Music cover (player widget)
	   2. Салехард cover
	   3. Погода (weather widget)
	   4. Сейчас онлайн card
	   5. Статистика сообщества card
	   6. Ближайшие события card

	   Desired mobile order (sidebar as a whole has order: 3):
	   FIRST inside sidebar: Сейчас онлайн (so it appears right
	   before "Что нового" which is order 4 on the parent flex).
	   Then remaining sidebar widgets follow after demo content. */
	.ah89-right-sidebar {
		display: flex !important;
		flex-direction: column !important;
	}

	/* Inside the right sidebar on mobile — reorder widgets.
	   Since the entire sidebar now has order: 10 (after all feed content),
	   internal widget order just determines sequence within the sidebar block. */

	/* "Сейчас онлайн" — 4th child in DOM, first on mobile */
	.ah89-right-sidebar > .wp-block-group:nth-child(4) {
		order: 1 !important;
	}

	/* Погода widget — 3rd child */
	.ah89-right-sidebar > .wp-block-group:nth-child(3) {
		order: 2 !important;
	}

	/* Статистика сообщества — 5th child */
	.ah89-right-sidebar > .wp-block-group:nth-child(5) {
		order: 3 !important;
	}

	/* Ближайшие события — 6th child — HIDDEN on mobile */
	.ah89-right-sidebar > .wp-block-group:nth-child(6) {
		display: none !important;
	}

	/* AutoHouse-Music cover — 1st child */
	.ah89-right-sidebar > .wp-block-cover:nth-child(1) {
		order: 10 !important;
	}

	/* Салехард cover — 2nd child (last on mobile) */
	.ah89-right-sidebar > .wp-block-cover:nth-child(2) {
		order: 11 !important;
	}
}



/* Sidebar nav labeled items (legacy — kept for backwards compat) */
.ah89-sidebar-nav .wp-block-navigation__container {
	flex-direction: column;
	align-items: stretch;
	width: 100%;
	padding: 0 var(--wp--preset--spacing--20);
}

.ah89-sidebar-nav .wp-block-navigation-item {
	width: 100%;
}

.ah89-sidebar-nav .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	padding: 10px 16px;
	border-radius: 10px;
	transition: background-color 0.15s ease, color 0.15s ease;
	width: 100%;
	font-size: 0.875rem;
}

@media (max-width: 782px) {
	.ah89-sidebar-nav .wp-block-navigation__container {
		flex-direction: row;
		justify-content: flex-start;
		padding: 0;
		overflow-x: auto;
		flex-wrap: nowrap;
	}

	.ah89-sidebar-nav .wp-block-navigation-item__content {
		padding: 6px 8px;
		font-size: 0.65rem;
		justify-content: center;
		white-space: nowrap;
	}
}

/* ==========================================================================
   Custom sidebar nav with icons + text labels
   ========================================================================== */

.ah89-sidebar-nav-custom {
	width: 100%;
}

/* Nav item base */
.ah89-nav-item {
	cursor: pointer;
	transition: background-color 0.15s ease;
	position: relative;
}

.ah89-nav-item:hover {
	background: var(--ah89-cyan-8);
}

/* Active state */
.ah89-nav-item.is-active {
	background: var(--ah89-cyan-20);
}

.ah89-nav-item.is-active::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 24px;
	background: var(--wp--preset--color--accent);
	border-radius: 0 2px 2px 0;
	box-shadow: 0 0 8px rgba(0, 212, 255, 0.4);
}

/* Icon styling */
.ah89-nav-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	margin: 0 !important;
}

.ah89-nav-icon a {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--text-secondary);
	text-decoration: none;
	line-height: 1;
}

.ah89-nav-icon svg {
	display: block;
}

.ah89-nav-item:hover .ah89-nav-icon a,
.ah89-nav-item.is-active .ah89-nav-icon a {
	color: var(--wp--preset--color--accent);
}

.ah89-nav-item.is-active .ah89-nav-icon a {
	filter: drop-shadow(0 0 6px rgba(0, 212, 255, 0.4));
}

/* Label styling */
.ah89-nav-label {
	margin: 0 !important;
	flex: 1;
	min-width: 0;
}

.ah89-nav-label a {
	color: var(--wp--preset--color--text-secondary);
	text-decoration: none;
	transition: color 0.15s ease;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
}

.ah89-nav-item:hover .ah89-nav-label a {
	color: var(--wp--preset--color--text);
}

.ah89-nav-item.is-active .ah89-nav-label a {
	color: var(--wp--preset--color--accent);
}

/* Badge */
.ah89-nav-badge {
	margin: 0 !important;
	flex-shrink: 0;
	box-shadow: 0 0 8px rgba(0, 212, 255, 0.4);
}

/* Mobile bottom bar */
@media (max-width: 782px) {
	/* Hide the logo/header group and the bottom section (messages, profile, exit, region widget, credit) */
	.wp-block-template-part.site-sidebar > .wp-block-group > .wp-block-group:nth-child(1),
	.wp-block-template-part.site-sidebar > .wp-block-group > .wp-block-group:nth-child(3) {
		display: none;
	}

	/* The main nav: hide all items by default, JS will show the right ones */
	.ah89-sidebar-nav-custom {
		flex-direction: row !important;
		justify-content: space-around !important;
		padding: 0 !important;
		gap: 0 !important;
		flex-wrap: nowrap !important;
		overflow: visible !important;
		position: relative;
	}

	/* Hide ALL nav items on mobile by default */
	.ah89-sidebar-nav-custom > .ah89-nav-item {
		display: none !important;
	}

	/* Show only the 4 primary mobile items + the "more" button via data attribute */
	.ah89-sidebar-nav-custom > .ah89-nav-item[data-mobile-primary="true"] {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center;
		gap: 2px !important;
		padding: 6px 4px !important;
		flex: 1 1 0;
		min-width: 0;
		max-width: 80px;
		border-radius: 0 !important;
	}

	.ah89-nav-item.is-active::before {
		display: none;
	}

	.ah89-nav-label {
		display: block;
	}

	.ah89-nav-label a {
		font-size: 0.55rem !important;
		letter-spacing: 0;
		text-align: center;
		white-space: nowrap;
	}

	.ah89-nav-icon {
		width: 20px;
		height: 20px;
	}

	.ah89-nav-badge {
		position: absolute;
		top: 2px;
		right: 2px;
		padding: 2px 5px !important;
		font-size: 0.55rem !important;
	}

	.ah89-nav-has-badge {
		position: relative;
	}

	/* "More" button trigger */
	.ah89-mobile-more-btn {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center;
		gap: 2px !important;
		padding: 6px 4px !important;
		flex: 1 1 0;
		min-width: 0;
		max-width: 80px;
		border: none;
		background: transparent;
		cursor: pointer;
		position: relative;
	}

	.ah89-mobile-more-btn .ah89-nav-icon {
		color: var(--wp--preset--color--text-secondary);
		transition: color 0.15s ease;
	}

	.ah89-mobile-more-btn:hover .ah89-nav-icon,
	.ah89-mobile-more-btn.is-open .ah89-nav-icon {
		color: var(--wp--preset--color--accent);
	}

	.ah89-mobile-more-btn .ah89-more-label {
		font-family: var(--wp--preset--font-family--heading);
		font-size: 0.55rem;
		font-weight: 600;
		color: var(--wp--preset--color--text-secondary);
		white-space: nowrap;
		text-align: center;
		letter-spacing: 0.02em;
	}

	.ah89-mobile-more-btn:hover .ah89-more-label,
	.ah89-mobile-more-btn.is-open .ah89-more-label {
		color: var(--wp--preset--color--accent);
	}

	/* More menu overlay */
	.ah89-mobile-more-menu {
		display: none;
		position: absolute;
		bottom: 100%;
		left: 0;
		right: 0;
		background: var(--wp--preset--color--card-surface);
		border-top: 1px solid var(--wp--preset--color--border-subtle);
		border-left: 1px solid var(--wp--preset--color--border-subtle);
		border-right: 1px solid var(--wp--preset--color--border-subtle);
		border-radius: 16px 16px 0 0;
		padding: 12px 8px 16px;
		box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.5);
		z-index: 300;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: 4px;
	}

	.ah89-mobile-more-menu.is-visible {
		display: flex;
	}

	.ah89-mobile-more-menu .ah89-more-menu-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 4px;
		padding: 10px 8px;
		border-radius: 10px;
		cursor: pointer;
		text-decoration: none;
		transition: background-color 0.15s ease;
		flex: 0 0 calc(25% - 4px);
		min-width: 64px;
		max-width: 90px;
	}

	.ah89-mobile-more-menu .ah89-more-menu-item:hover {
		background: var(--ah89-cyan-8);
	}

	.ah89-mobile-more-menu .ah89-more-menu-item .ah89-more-menu-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 24px;
		height: 24px;
		color: var(--wp--preset--color--text-secondary);
	}

	.ah89-mobile-more-menu .ah89-more-menu-item:hover .ah89-more-menu-icon {
		color: var(--wp--preset--color--accent);
	}

	.ah89-mobile-more-menu .ah89-more-menu-item .ah89-more-menu-label {
		font-family: var(--wp--preset--font-family--heading);
		font-size: 0.6rem;
		font-weight: 600;
		color: var(--wp--preset--color--text-secondary);
		white-space: nowrap;
		text-align: center;
		letter-spacing: 0.02em;
	}

	.ah89-mobile-more-menu .ah89-more-menu-item:hover .ah89-more-menu-label {
		color: var(--wp--preset--color--text);
	}

	/* Backdrop overlay */
	.ah89-mobile-more-backdrop {
		display: none;
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 199;
	}

	.ah89-mobile-more-backdrop.is-visible {
		display: block;
	}
}

/* Desktop: hide mobile-only elements */
@media (min-width: 783px) {
	.ah89-mobile-more-btn,
	.ah89-mobile-more-menu,
	.ah89-mobile-more-backdrop {
		display: none !important;
	}
}

/* ==========================================================================
   Custom friends list card border (ah89_friends_list shortcode)
   ========================================================================== */

/* Friends list cards — inherit members-list card styles with visible border
   and rounded corners matching the members-list grid cards. */
[class*="ah89-members-list__card"] {
	border: 1px solid var(--wp--preset--color--border-subtle, #1A2030) !important;
	border-radius: 16px !important;
	background: var(--wp--preset--color--card-surface, #111518) !important;
	transition: border-color 0.2s ease !important;
	margin-bottom: 12px !important;
}
[class*="ah89-members-list__card"]:hover {
	border-color: rgba(0, 212, 255, 0.15) !important;
}

/* Friends list grid — ensure visible spacing between cards */
.ah89-members-list__grid {
	gap: 16px !important;
}