/* ==========================================================================
   Pages — Homepage Sections & Page-Specific Styles
   ========================================================================== */

/* ── Hero Section ──────────────────────────────────────────────────────── */

.hero {
	position: relative;
	background-color: var(--color-dark);
	background-image: url('../images/hero-cityscape.jpg');
	background-size: cover;
	background-position: center;
	padding: var(--space-3xl) 0 var(--space-4xl);
	overflow: hidden;
	min-height: 70vh;
	display: flex;
	align-items: center;
}

.hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(26, 26, 46, 0.85) 0%,
		rgba(26, 26, 46, 0.92) 50%,
		rgba(26, 26, 46, 0.97) 100%
	);
	pointer-events: none;
}

.hero-content {
	position: relative;
	text-align: center;
	max-width: 720px;
	margin: 0 auto;
}

.hero-label {
	display: inline-block;
	padding: 6px 16px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: var(--radius-xl);
	font-size: var(--text-small);
	font-weight: 500;
	color: rgba(255, 255, 255, 0.85);
	margin-bottom: var(--space-xl);
	background-color: rgba(255, 255, 255, 0.08);
}

.hero-title {
	font-family: var(--font-heading);
	font-size: var(--text-hero);
	line-height: var(--lh-hero);
	font-weight: 800;
	color: #fff;
	margin: 0 0 var(--space-lg);
}

.hero-subtitle {
	font-size: var(--text-body);
	line-height: var(--lh-body);
	color: rgba(255, 255, 255, 0.7);
	margin: 0 0 var(--space-2xl);
	max-width: 560px;
	margin-left: auto;
	margin-right: auto;
}

@media (min-width: 768px) {
	.hero {
		padding: var(--space-4xl) 0;
	}
}

/* Hero search bar */
.hero-search {
	display: flex;
	align-items: center;
	max-width: 600px;
	margin: 0 auto;
	background-color: #fff;
	border-radius: var(--radius-pill);
	box-shadow: var(--shadow-lg);
	padding: 6px;
}

.hero-search-input {
	flex: 1;
	padding: 16px 20px;
	font-family: var(--font-body);
	font-size: var(--text-body);
	border: none;
	background: transparent;
	color: var(--color-dark);
	outline: none;
}

.hero-search-input::placeholder {
	color: var(--color-text-light);
}

.hero-search-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-sm);
	padding: 14px 28px;
	background-color: var(--color-primary);
	color: #fff;
	font-family: var(--font-body);
	font-size: var(--text-body);
	font-weight: 600;
	border: none;
	border-radius: var(--radius-pill);
	cursor: pointer;
	transition: background-color var(--transition-base);
	white-space: nowrap;
}

.hero-search-btn:hover {
	background-color: var(--color-primary-dark);
}

@media (max-width: 639px) {
	.hero-search {
		flex-direction: column;
		border-radius: var(--radius-lg);
		padding: var(--space-md);
		gap: var(--space-sm);
	}

	.hero-search-input {
		width: 100%;
		padding: 14px var(--space-md);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-pill);
		background-color: #fff;
		font-size: var(--text-small);
	}

	.hero-search-input:focus {
		border-color: var(--color-primary);
		box-shadow: 0 0 0 3px var(--color-primary-light);
	}

	.hero-search-btn {
		width: 100%;
		justify-content: center;
		padding: 14px 24px;
	}
}

.hero-search-btn svg {
	width: 18px;
	height: 18px;
}

/* Trust bar */
.trust-bar {
	margin-top: var(--space-3xl);
	text-align: center;
}

.trust-bar-label {
	font-size: var(--text-body);
	font-weight: 600;
	color: #fff;
	margin-bottom: var(--space-lg);
}

.trust-logos {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--space-xl);
	opacity: 0.5;
}

.trust-logo {
	font-family: var(--font-heading);
	font-size: var(--text-body);
	font-weight: 700;
	color: rgba(255, 255, 255, 0.7);
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

/* Stats row */
.stats-section {
	padding: var(--space-2xl) 0;
	border-bottom: 1px solid var(--color-border);
	background-color: var(--color-dark);
}

.stat-item {
	text-align: center;
}

.stat-number {
	font-family: var(--font-heading);
	font-size: var(--text-h1);
	font-weight: 800;
	color: #fff;
	margin: 0;
}

.stat-label {
	font-size: var(--text-small);
	color: rgba(255, 255, 255, 0.6);
	margin: var(--space-xs) 0 0;
}

/* ── Categories Section ────────────────────────────────────────────────── */

.categories-section .section-actions {
	text-align: center;
	margin-top: var(--space-2xl);
}

/* ── Featured Listings Section ─────────────────────────────────────────── */

.filter-pills {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin-bottom: var(--space-2xl);
}

.featured-section .section-actions {
	text-align: center;
	margin-top: var(--space-2xl);
}

/* ── Value Proposition Section ─────────────────────────────────────────── */

.value-image {
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	overflow: hidden;
}

.value-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.value-label {
	font-size: var(--text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--color-primary);
	margin-bottom: var(--space-md);
}

.value-title {
	font-family: var(--font-heading);
	font-size: var(--text-h1);
	line-height: var(--lh-h1);
	font-weight: 700;
	color: var(--color-dark);
	margin: 0 0 var(--space-lg);
}

.value-description {
	font-size: var(--text-body);
	line-height: var(--lh-body);
	color: var(--color-text);
	margin: 0 0 var(--space-xl);
}

.feature-list {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-xl);
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
}

.feature-item {
	display: flex;
	gap: var(--space-md);
}

.feature-icon {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-primary-light);
	border-radius: var(--radius-full);
	color: var(--color-primary);
}

.feature-icon svg {
	width: 20px;
	height: 20px;
}

.feature-title {
	font-weight: 600;
	color: var(--color-dark);
	margin: 0 0 var(--space-xs);
}

.feature-text {
	font-size: var(--text-small);
	line-height: var(--lh-small);
	color: var(--color-text-light);
	margin: 0;
}

/* ── Browse By State Section ───────────────────────────────────────────── */

.state-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-xs);
	padding: var(--space-lg) var(--space-md);
	background-color: #fff;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	text-decoration: none;
	transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
	border: 1px solid var(--color-border);
}

.state-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-hover);
	border-color: var(--color-primary);
}

.state-map-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 48px;
	color: var(--color-primary);
	margin-bottom: var(--space-xs);
	transition: transform var(--transition-base);
}

.state-card:hover .state-map-icon {
	transform: scale(1.1);
}

.state-map-icon svg {
	width: 100%;
	height: 100%;
}

.state-abbr {
	font-family: var(--font-heading);
	font-size: var(--text-h3);
	font-weight: 700;
	color: var(--color-primary);
}

.state-name {
	font-size: var(--text-small);
	font-weight: 500;
	color: var(--color-dark);
}

.state-count {
	font-size: var(--text-xs);
	color: var(--color-text-light);
}

@media (min-width: 768px) {
	.state-map-icon {
		width: 64px;
		height: 56px;
	}

	.state-abbr {
		font-size: var(--text-h2);
	}
}

/* ── Testimonials Section ──────────────────────────────────────────────── */

/* Uses component styles from components.css */

/* ── FAQ Section ───────────────────────────────────────────────────────── */

.faq-section .container {
	max-width: 768px;
}

/* ── Blog / Insights Section ───────────────────────────────────────────── */

.insights-section .section-actions {
	text-align: center;
	margin-top: var(--space-2xl);
}

/* ── CTA Section ───────────────────────────────────────────────────────── */

.cta-section {
	padding: var(--space-4xl) 0;
}

.cta-content {
	text-align: center;
	max-width: 640px;
	margin: 0 auto;
}

.cta-title {
	font-family: var(--font-heading);
	font-size: var(--text-h1);
	line-height: var(--lh-h1);
	font-weight: 700;
	color: #fff;
	margin: 0 0 var(--space-lg);
}

.cta-subtitle {
	font-size: var(--text-body);
	line-height: var(--lh-body);
	color: rgba(255, 255, 255, 0.8);
	margin: 0 0 var(--space-2xl);
}

.cta-buttons {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--space-md);
}

/* ==========================================================================
   Browse Listings Page — HivePress Overrides
   ========================================================================== */

/* ── Pre-hide HivePress default elements on listings pages ────────────── */
/* The body class is added server-side so these rules apply instantly,     */
/* preventing the raw HivePress search/filter from flashing before JS      */
/* transforms the page.                                                    */

body.royal-listings-page .hp-page__header,
body.royal-listings-page .hp-page__sidebar {
	display: none !important;
}

/* ── Listings Hero (server-rendered via PHP) ──────────────────────────── */

.listings-hero {
	background-color: var(--color-background-alt);
	padding: var(--space-3xl) 0 var(--space-2xl);
}

.listings-hero-content {
	text-align: center;
	max-width: 640px;
	margin: 0 auto;
}

.listings-hero-title {
	font-family: var(--font-heading);
	font-size: var(--text-h1);
	line-height: var(--lh-h1);
	font-weight: 700;
	color: var(--color-dark);
	margin: 0 0 var(--space-md);
}

.listings-hero-subtitle {
	font-size: var(--text-body);
	line-height: var(--lh-body);
	color: var(--color-text-light);
	margin: 0;
}

/* ── HivePress Page Container ─────────────────────────────────────────── */

.hp-page {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--container-padding);
	font-family: var(--font-body);
}

/* ── Unified Search + Filter Toolbar ─────────────────────────────────── */

.listings-toolbar-form {
	max-width: 860px;
	margin: 0 auto var(--space-xl);
	padding: 0 var(--space-md);
}

.listings-toolbar {
	background-color: #fff;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	padding: var(--space-lg);
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	margin-top: calc(-1 * var(--space-xl));
	position: relative;
	z-index: 10;
}

.listings-toolbar-search {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	padding-bottom: var(--space-md);
	border-bottom: 1px solid var(--color-border);
}

.listings-toolbar-search-icon {
	flex-shrink: 0;
	color: var(--color-text-light);
	display: flex;
	align-items: center;
}

.listings-toolbar-search-icon svg {
	width: 20px;
	height: 20px;
}

.listings-toolbar-input {
	flex: 1;
	padding: 8px 4px;
	font-family: var(--font-body);
	font-size: var(--text-body);
	border: none;
	background: transparent;
	color: var(--color-dark);
	outline: none;
}

.listings-toolbar-input::placeholder {
	color: var(--color-text-light);
}

.listings-toolbar-filters {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-sm);
}

/* ── HivePress Search Bar (hidden when toolbar is active) ────────────── */

.hp-page__header {
	background-color: #fff;
	padding: var(--space-lg) 0 var(--space-md);
	margin-bottom: var(--space-md);
}

/* Mobile filter toggle — hidden since toolbar replaces it */
.hp-button--listing-filter {
	display: none !important;
}

/* ── HivePress Sidebar (hidden when toolbar is active) ───────────────── */

.hp-page__sidebar {
	padding: 0;
}

/* Individual pill toggle */
.filter-pill {
	display: inline-flex;
	align-items: center;
	gap: var(--space-sm);
	padding: 8px 14px;
	background-color: var(--color-background-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	font-family: var(--font-body);
	font-size: var(--text-small);
	color: var(--color-text);
	cursor: pointer;
	transition: border-color var(--transition-fast), background-color var(--transition-fast);
	white-space: nowrap;
}

.filter-pill:hover {
	border-color: var(--color-primary);
	background-color: #fff;
}

.filter-pill i {
	font-size: var(--text-small);
	color: var(--color-text-light);
	flex-shrink: 0;
}

/* Select inside a pill — invisible native select overlaying the pill */
.filter-pill-select {
	border: none;
	background: transparent;
	font-family: var(--font-body);
	font-size: var(--text-small);
	font-weight: 500;
	color: var(--color-dark);
	cursor: pointer;
	padding: 0;
	padding-right: 4px;
	appearance: auto;
	outline: none;
}

.filter-pill-select:focus {
	outline: none;
}

/* Filter submit pill */
.filter-pill--submit {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: #fff;
	font-weight: 600;
	padding: 8px 18px;
}

.filter-pill--submit:hover {
	background-color: var(--color-primary-dark);
	border-color: var(--color-primary-dark);
}

.filter-pill--submit i {
	color: #fff;
}

/* Clear pill */
.filter-pill--clear {
	background-color: transparent;
	border-color: var(--color-border);
	color: var(--color-text-light);
	text-decoration: none;
	font-weight: 500;
	padding: 8px 14px;
}

.filter-pill--clear:hover {
	color: var(--color-error);
	border-color: var(--color-error);
	background-color: #fff;
}

.filter-pill--clear i {
	color: inherit;
}

/* Hide original HP form elements that JS replaces */
.hp-widget--listing-filter .hp-form__footer {
	display: none;
}

/* ── Listing Card Meta (Price + Location) ────────────────────────────── */

.listing-card-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	padding-top: var(--space-sm);
}

.listing-card-price {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	font-family: var(--font-heading);
	font-size: var(--text-h3);
	font-weight: 700;
	color: var(--color-dark);
}

.listing-card-price i {
	font-size: var(--text-small);
	color: var(--color-primary);
}

.listing-card-location {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	padding: 4px 12px;
	background-color: var(--color-background-alt);
	border-radius: var(--radius-pill);
	font-size: var(--text-xs);
	font-weight: 500;
	color: var(--color-text);
}

.listing-card-location i {
	font-size: var(--text-xs);
	color: var(--color-primary);
}

/* ── Top Bar (result count + sort) ────────────────────────────────────── */

.hp-page__topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-md);
	margin-bottom: var(--space-xl);
	padding-bottom: var(--space-lg);
	border-bottom: 1px solid var(--color-border);
}

.hp-result-count {
	font-family: var(--font-body);
	font-size: var(--text-body);
	color: var(--color-text);
}

.hp-form--listing-sort {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

.hp-form--listing-sort .hp-field__label,
.hp-form--listing-sort .hp-form__label {
	font-size: var(--text-small);
	font-weight: 500;
	color: var(--color-text-light);
	white-space: nowrap;
}

.hp-form--listing-sort .hp-field--select,
.hp-form--listing-sort select {
	padding: 8px 16px;
	font-family: var(--font-body);
	font-size: var(--text-small);
	color: var(--color-dark);
	background-color: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: border-color var(--transition-fast);
}

.hp-form--listing-sort select:focus {
	border-color: var(--color-primary);
	outline: none;
}

.hp-form--listing-sort .hp-field--hidden {
	display: none !important;
}

/* ── Listing Cards Grid ───────────────────────────────────────────────── */

.hp-listings.hp-grid {
	display: block;
}

.hp-listings .hp-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-lg);
}

.hp-listings .hp-grid__item {
	width: 100% !important;
	max-width: 100% !important;
	padding: 0 !important;
	float: none !important;
}

@media (min-width: 640px) {
	.hp-listings .hp-row {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.hp-listings .hp-row {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ── Individual Listing Card ──────────────────────────────────────────── */

article.hp-listing--view-block {
	background-color: #fff;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	overflow: hidden;
	transition: transform var(--transition-base), box-shadow var(--transition-base);
	border: 1px solid var(--color-border);
}

article.hp-listing--view-block:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-hover);
	border-color: transparent;
}

/* Card image */
.hp-listing--view-block .hp-listing__header {
	margin: 0;
	padding: 0;
}

.hp-listing--view-block .hp-listing__image {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background-color: var(--color-background-alt);
}

.hp-listing--view-block .hp-listing__image a {
	display: block;
	width: 100%;
	height: 100%;
}

.hp-listing--view-block .hp-listing__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-slow);
}

article.hp-listing--view-block:hover .hp-listing__image img {
	transform: scale(1.03);
}

/* Card content */
.hp-listing--view-block .hp-listing__content {
	padding: var(--space-lg);
}

.hp-listing--view-block .hp-listing__title {
	font-family: var(--font-heading);
	font-size: var(--text-h3);
	line-height: var(--lh-h3);
	font-weight: 600;
	color: var(--color-dark);
	margin: 0 0 var(--space-sm);
}

.hp-listing--view-block .hp-listing__title a {
	color: inherit;
	text-decoration: none;
	transition: color var(--transition-fast);
}

.hp-listing--view-block .hp-listing__title a:hover {
	color: var(--color-primary);
}

/* Category badge */
.hp-listing--view-block .hp-listing__categories {
	margin-bottom: var(--space-sm);
}

.hp-listing--view-block .hp-listing__categories a {
	display: inline-block;
	padding: 4px 12px;
	border-radius: var(--radius-xl);
	font-size: var(--text-xs);
	line-height: var(--lh-xs);
	font-weight: 500;
	background-color: var(--color-primary-light);
	color: var(--color-primary);
	text-decoration: none;
	transition: all var(--transition-fast);
}

.hp-listing--view-block .hp-listing__categories a:hover {
	background-color: var(--color-primary);
	color: #fff;
}

/* Date */
.hp-listing--view-block .hp-listing__created-date {
	font-size: var(--text-small);
	color: var(--color-text-light);
	display: block;
	margin-top: var(--space-xs);
}

/* Card footer */
.hp-listing--view-block .hp-listing__footer {
	border-top: 1px solid var(--color-border);
	margin: 0 var(--space-lg);
	padding: var(--space-md) 0 var(--space-md);
}

/* Details section */
.hp-listing--view-block .hp-listing__details {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

/* ── Browse Listings Page — Content Width Constraint ─────────────────── */
/* With sidebar hidden, neutralise HivePress negative row margins and     */
/* let .hp-page container padding control the content width.              */

body.royal-listings-page .hp-page > .hp-row {
	display: block;
	margin-left: 0;
	margin-right: 0;
}

body.royal-listings-page .hp-page > .hp-row > .hp-page__content {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	padding: 0 !important;
}

/* ── HivePress Responsive ─────────────────────────────────────────────── */

@media (max-width: 767px) {
	.listing-card-meta {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-xs);
	}

	.listings-toolbar-filters {
		justify-content: flex-start;
	}

	.listings-toolbar {
		padding: var(--space-md);
	}
}

@media (min-width: 768px) {
	.listings-hero-title {
		font-size: var(--text-hero);
	}

	.listings-hero {
		padding: var(--space-4xl) 0 var(--space-2xl);
	}

	.listings-toolbar-form {
		padding: 0 var(--container-padding);
	}
}

/* ==========================================================================
   Content Pages — Privacy Policy, Terms, Cookie Policy, etc.
   ========================================================================== */

.page-header {
	background-color: var(--color-background-alt);
	padding: var(--space-3xl) 0;
	text-align: center;
}

.page-title {
	font-family: var(--font-heading);
	font-size: var(--text-h1);
	line-height: var(--lh-h1);
	font-weight: 700;
	color: var(--color-dark);
	margin: 0;
}

.page-body {
	padding: var(--space-2xl) 0 var(--space-4xl);
}

/* Long-form content typography */
.page-content .entry-content h2 {
	font-family: var(--font-heading);
	font-size: var(--text-h2);
	line-height: var(--lh-h2);
	font-weight: 600;
	color: var(--color-dark);
	margin: var(--space-2xl) 0 var(--space-md);
}

.page-content .entry-content h3 {
	font-family: var(--font-heading);
	font-size: var(--text-h3);
	line-height: var(--lh-h3);
	font-weight: 600;
	color: var(--color-dark);
	margin: var(--space-xl) 0 var(--space-sm);
}

.page-content .entry-content p {
	font-size: var(--text-body);
	line-height: var(--lh-body);
	color: var(--color-text);
	margin: 0 0 var(--space-md);
}

.page-content .entry-content ul,
.page-content .entry-content ol {
	font-size: var(--text-body);
	line-height: var(--lh-body);
	color: var(--color-text);
	margin: 0 0 var(--space-md);
	padding-left: var(--space-xl);
}

.page-content .entry-content li {
	margin-bottom: var(--space-sm);
}

.page-content .entry-content a {
	color: var(--color-primary);
	text-decoration: underline;
	transition: color var(--transition-fast);
}

.page-content .entry-content a:hover {
	color: var(--color-primary-dark);
}

.page-content .entry-content strong {
	font-weight: 600;
	color: var(--color-dark);
}

.page-content .entry-content em {
	font-style: italic;
}

.page-content .entry-content > *:first-child {
	margin-top: 0;
}

.page-content .entry-content > *:last-child {
	margin-bottom: 0;
}

@media (min-width: 768px) {
	.page-header {
		padding: var(--space-4xl) 0;
	}

	.page-title {
		font-size: var(--text-hero);
	}
}

/* ==========================================================================
   Contact Page
   ========================================================================== */

.page-header-subtitle {
	font-size: var(--text-body);
	line-height: var(--lh-body);
	color: var(--color-text);
	margin: var(--space-sm) 0 0;
	max-width: 540px;
	margin-left: auto;
	margin-right: auto;
}

.contact-page {
	padding: var(--space-2xl) 0 var(--space-4xl);
}

.contact-grid {
	display: grid;
	gap: var(--space-xl);
}

/* ── Form card ────────────────────────────────────────────────────────── */

.contact-form-card {
	background: var(--color-background);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-xl);
	box-shadow: var(--shadow-sm);
}

.contact-form-title {
	font-family: var(--font-heading);
	font-size: var(--text-h2);
	line-height: var(--lh-h2);
	font-weight: 600;
	color: var(--color-dark);
	margin: 0 0 var(--space-xs);
}

.contact-form-description {
	font-size: var(--text-small);
	line-height: var(--lh-small);
	color: var(--color-text-light);
	margin: 0 0 var(--space-xl);
}

/* CF7 overrides — apply design system to generated markup */

.contact-form-card .wpcf7-form-control-wrap {
	display: block;
}

.contact-form-card .wpcf7-not-valid {
	border-color: var(--color-error);
}

.contact-form-card .wpcf7-not-valid-tip {
	font-size: var(--text-xs);
	color: var(--color-error);
	margin-top: var(--space-xs);
}

.contact-form-card .wpcf7-response-output {
	font-size: var(--text-small);
	line-height: var(--lh-small);
	padding: var(--space-md);
	border-radius: var(--radius-md);
	margin: var(--space-lg) 0 0;
}

.contact-form-card .wpcf7-mail-sent-ok,
.contact-form-card .wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--color-success);
	color: var(--color-success);
	background-color: #f0fdf4;
}

.contact-form-card .wpcf7 form.failed .wpcf7-response-output,
.contact-form-card .wpcf7 form.aborted .wpcf7-response-output,
.contact-form-card .wpcf7 form.invalid .wpcf7-response-output {
	border-color: var(--color-error);
	color: var(--color-error);
	background-color: #fef2f2;
}

.contact-form-card .wpcf7-submit {
	width: 100%;
	cursor: pointer;
}

.contact-form-card .wpcf7-spinner {
	margin: var(--space-sm) auto 0;
	display: block;
}

.contact-form-card .required {
	color: var(--color-error);
}

/* ── Sidebar ──────────────────────────────────────────────────────────── */

.contact-sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--space-xl);
}

/* ── Contact info card ────────────────────────────────────────────────── */

.contact-info-card {
	background-color: var(--color-dark);
	color: rgba(255, 255, 255, 0.85);
	border-radius: var(--radius-lg);
	padding: var(--space-xl);
}

.contact-info-title {
	font-family: var(--font-heading);
	font-size: var(--text-h3);
	line-height: var(--lh-h3);
	font-weight: 600;
	color: #fff;
	margin: 0 0 var(--space-xs);
}

.contact-info-description {
	font-size: var(--text-small);
	line-height: var(--lh-small);
	margin: 0 0 var(--space-xl);
	opacity: 0.7;
}

.contact-info-items {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
}

.contact-info-item {
	display: flex;
	align-items: flex-start;
	gap: var(--space-md);
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
	transition: color var(--transition-fast);
}

a.contact-info-item:hover {
	color: #fff;
}

.contact-info-item span {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: var(--text-small);
	line-height: var(--lh-small);
}

.contact-info-item strong {
	font-weight: 600;
	color: #fff;
	font-size: var(--text-body);
}

.contact-info-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	min-width: 44px;
	border-radius: var(--radius-md);
	background-color: rgba(255, 255, 255, 0.1);
	font-size: var(--text-body);
	color: var(--color-primary-light);
}

/* Social links */

.contact-social {
	margin-top: var(--space-xl);
	padding-top: var(--space-xl);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.contact-social-heading {
	font-family: var(--font-heading);
	font-size: var(--text-small);
	font-weight: 600;
	color: #fff;
	margin: 0 0 var(--space-md);
}

.contact-social-links {
	display: flex;
	gap: var(--space-sm);
}

.contact-social-links a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--radius-full);
	background-color: rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.7);
	transition: background-color var(--transition-fast), color var(--transition-fast);
}

.contact-social-links a:hover {
	background-color: var(--color-primary);
	color: #fff;
}

/* ── Map card ─────────────────────────────────────────────────────────── */

.contact-map-card {
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid var(--color-border);
	box-shadow: var(--shadow-sm);
}

.contact-map-card iframe {
	display: block;
	width: 100%;
	height: 250px;
}

/* ── Tablet+ layout ──────────────────────────────────────────────────── */

@media (min-width: 768px) {
	.contact-grid {
		grid-template-columns: 1.2fr 1fr;
	}

	.contact-form-card {
		padding: var(--space-2xl);
	}

	.contact-form-card .wpcf7-submit {
		width: auto;
	}
}

/* ==========================================================================
   Single Listing Page — HivePress Overrides
   ========================================================================== */

/* ── Hero / Breadcrumb Bar ───────────────────────────────────────────────── */

.single-listing-hero {
	background-color: var(--color-background-alt);
	padding: var(--space-xl) 0 var(--space-2xl);
	border-bottom: 1px solid var(--color-border);
}

.single-listing-breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin-bottom: var(--space-xl);
	font-size: var(--text-small);
	line-height: var(--lh-small);
}

.single-listing-breadcrumb a {
	color: var(--color-text-light);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.single-listing-breadcrumb a:hover {
	color: var(--color-primary);
}

.breadcrumb-sep {
	color: var(--color-border);
	font-size: var(--text-xs);
	display: flex;
	align-items: center;
}

.breadcrumb-current {
	color: var(--color-dark);
	font-weight: 500;
}

.single-listing-hero-content {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
}

.single-listing-title {
	font-family: var(--font-heading);
	font-size: var(--text-h1);
	line-height: var(--lh-h1);
	font-weight: 700;
	color: var(--color-dark);
	margin: 0;
}

.single-listing-hero-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin-top: var(--space-sm);
}

.single-listing-hero-meta .badge i {
	font-size: var(--text-xs);
}

.single-listing-hero-price {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.single-listing-price-label {
	font-size: var(--text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--color-text-light);
}

.single-listing-price-value {
	font-family: var(--font-heading);
	font-size: var(--text-h2);
	line-height: 1;
	font-weight: 700;
	color: var(--color-primary);
}

@media (min-width: 768px) {
	.single-listing-hero {
		padding: var(--space-2xl) 0 var(--space-2xl);
	}

	.single-listing-hero-content {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
	}

	.single-listing-hero-price {
		flex-shrink: 0;
		text-align: right;
	}
}

/* ── Hide duplicate title & details in HivePress content ─────────────────── */

body.royal-single-listing .hp-listing--view-page > .hp-page__content > .hp-listing__title,
body.royal-single-listing .hp-listing--view-page > .hp-page__content > .hp-listing__details--primary {
	display: none;
}

/* ── HivePress Page Container — Single Listing ───────────────────────────── */

body.royal-single-listing .hp-page {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: var(--space-2xl) var(--container-padding) var(--space-4xl);
	font-family: var(--font-body);
}

/* ── Two-Column Layout ───────────────────────────────────────────────────── */

body.royal-single-listing .hp-listing--view-page {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-2xl);
	align-items: start;
	margin-left: 0;
	margin-right: 0;
}

body.royal-single-listing .hp-page__content,
body.royal-single-listing .hp-page__sidebar {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	padding: 0 !important;
}

@media (min-width: 768px) {
	body.royal-single-listing .hp-listing--view-page {
		grid-template-columns: 1fr 380px;
	}
}

@media (min-width: 1024px) {
	body.royal-single-listing .hp-listing--view-page {
		grid-template-columns: 1fr 400px;
	}
}

/* ── Tab Navigation ──────────────────────────────────────────────────────── */

body.royal-single-listing .hp-page__topbar {
	margin-bottom: var(--space-xl);
	padding-bottom: 0;
	border-bottom: none;
}

body.royal-single-listing .hp-menu--tabbed {
	display: flex;
	gap: 0;
	border-bottom: 2px solid var(--color-border);
}

body.royal-single-listing .hp-menu--tabbed a {
	display: inline-flex;
	align-items: center;
	padding: var(--space-md) var(--space-lg);
	font-family: var(--font-heading);
	font-size: var(--text-body);
	font-weight: 600;
	color: var(--color-text-light);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	transition: color var(--transition-fast), border-color var(--transition-fast);
}

body.royal-single-listing .hp-menu--tabbed a:hover,
body.royal-single-listing .hp-menu--tabbed .hp-menu__item--current a {
	color: var(--color-primary);
	border-bottom-color: var(--color-primary);
}

/* ── Listing Description ─────────────────────────────────────────────────── */

body.royal-single-listing .hp-listing__description {
	font-size: var(--text-body);
	line-height: var(--lh-body);
	color: var(--color-text);
}

body.royal-single-listing .hp-listing__description p {
	margin: 0 0 var(--space-md);
}

body.royal-single-listing .hp-listing__description h3 {
	font-family: var(--font-heading);
	font-size: var(--text-h3);
	line-height: var(--lh-h3);
	font-weight: 600;
	color: var(--color-dark);
	margin: var(--space-xl) 0 var(--space-md);
}

body.royal-single-listing .hp-listing__description ul,
body.royal-single-listing .hp-listing__description ol {
	margin: 0 0 var(--space-md);
	padding-left: var(--space-xl);
	color: var(--color-text);
}

body.royal-single-listing .hp-listing__description li {
	margin-bottom: var(--space-sm);
	line-height: var(--lh-body);
}

/* ── Image Gallery ───────────────────────────────────────────────────────── */

body.royal-single-listing .hp-listing__images {
	margin-bottom: var(--space-xl);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

body.royal-single-listing .hp-listing__images img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
	object-fit: cover;
}

/* ── Sidebar — Sticky Card ───────────────────────────────────────────────── */

body.royal-single-listing .hp-page__sidebar {
	position: sticky;
	top: 100px;
}

body.royal-single-listing .hp-page__sidebar .inner-wrapper-sticky {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
}

/* Primary attributes card (price, location) */
body.royal-single-listing .hp-listing__attributes--primary {
	background-color: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-xl);
	box-shadow: var(--shadow-md);
	display: flex;
	flex-direction: column;
	gap: 0;
}

body.royal-single-listing .hp-listing__attribute {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-xs);
	padding: var(--space-lg) 0;
	border-bottom: 1px solid var(--color-border);
	text-align: center;
}

body.royal-single-listing .hp-listing__attribute:first-child {
	padding-top: 0;
}

body.royal-single-listing .hp-listing__attribute:last-child {
	padding-bottom: 0;
	border-bottom: none;
}

/* Label above each attribute value */
body.royal-single-listing .hp-listing__attribute::before {
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--color-text-light);
	line-height: 1;
}

/* Price attribute — prominent value with label */
body.royal-single-listing .hp-listing__attribute--price {
	padding-bottom: var(--space-lg);
}

body.royal-single-listing .hp-listing__attribute--price::before {
	content: "Asking Price";
}

body.royal-single-listing .hp-listing__attribute--price {
	font-family: var(--font-heading);
	font-size: var(--text-h2);
	font-weight: 700;
	color: var(--color-primary);
}

/* Location attribute — with label */
body.royal-single-listing .hp-listing__attribute--location::before {
	content: "Location";
}

body.royal-single-listing .hp-listing__attribute--location {
	font-weight: 600;
	font-size: var(--text-body);
	color: var(--color-dark);
}

/* ── Enquiry CTA in Sidebar ──────────────────────────────────────────────── */

body.royal-single-listing .hp-listing__actions--primary {
	background-color: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-xl);
	box-shadow: var(--shadow-sm);
	text-align: center;
}

body.royal-single-listing .hp-listing__action--report {
	font-size: var(--text-small);
	color: var(--color-text-light);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: var(--space-sm);
	transition: color var(--transition-fast);
}

body.royal-single-listing .hp-listing__action--report:hover {
	color: var(--color-error);
}

body.royal-single-listing .hp-listing__action--report i {
	font-size: var(--text-xs);
}

/* ── Vendor / Broker Card ────────────────────────────────────────────────── */

body.royal-single-listing .hp-listing__vendor,
body.royal-single-listing .hp-vendor--view-block {
	background-color: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-xl);
	box-shadow: var(--shadow-sm);
}

body.royal-single-listing .hp-vendor__image {
	width: 64px;
	height: 64px;
	border-radius: var(--radius-full);
	overflow: hidden;
	margin-bottom: var(--space-md);
}

body.royal-single-listing .hp-vendor__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

body.royal-single-listing .hp-vendor__name {
	font-family: var(--font-heading);
	font-size: var(--text-h3);
	font-weight: 600;
	color: var(--color-dark);
}

body.royal-single-listing .hp-vendor__name a {
	color: inherit;
	text-decoration: none;
}

body.royal-single-listing .hp-vendor__name a:hover {
	color: var(--color-primary);
}

/* ── Related Listings ────────────────────────────────────────────────────── */

body.royal-single-listing .hp-page > .hp-listings {
	margin-top: var(--space-3xl);
	padding-top: var(--space-3xl);
	border-top: 1px solid var(--color-border);
}

/* ── HivePress Form Overrides (enquiry form if present) ──────────────────── */

body.royal-single-listing .hp-form .hp-field {
	margin-bottom: var(--space-lg);
}

body.royal-single-listing .hp-form .hp-field__label {
	display: block;
	font-size: var(--text-small);
	font-weight: 500;
	color: var(--color-text);
	margin-bottom: 6px;
}

body.royal-single-listing .hp-form input[type="text"],
body.royal-single-listing .hp-form input[type="email"],
body.royal-single-listing .hp-form input[type="tel"],
body.royal-single-listing .hp-form textarea,
body.royal-single-listing .hp-form select {
	width: 100%;
	padding: 12px 16px;
	font-family: var(--font-body);
	font-size: var(--text-body);
	color: var(--color-dark);
	background-color: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

body.royal-single-listing .hp-form input:focus,
body.royal-single-listing .hp-form textarea:focus,
body.royal-single-listing .hp-form select:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px var(--color-primary-light);
}

body.royal-single-listing .hp-form button[type="submit"],
body.royal-single-listing .hp-form .hp-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);
	width: 100%;
	padding: 14px 24px;
	font-family: var(--font-body);
	font-size: var(--text-body);
	font-weight: 600;
	color: #fff;
	background-color: var(--color-primary);
	border: none;
	border-radius: var(--radius-pill);
	cursor: pointer;
	transition: background-color var(--transition-base), box-shadow var(--transition-base);
}

body.royal-single-listing .hp-form button[type="submit"]:hover,
body.royal-single-listing .hp-form .hp-button:hover {
	background-color: var(--color-primary-dark);
	box-shadow: var(--shadow-md);
}

/* ── Generic HivePress Widget Blocks ─────────────────────────────────────── */

body.royal-single-listing .hp-widget {
	margin-bottom: 0;
}

body.royal-single-listing .hp-block {
	margin-bottom: 0;
}

/* ── Secondary / Ternary Attributes ──────────────────────────────────────── */

body.royal-single-listing .hp-listing__attributes--secondary,
body.royal-single-listing .hp-listing__attributes--ternary {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin-bottom: var(--space-xl);
}

body.royal-single-listing .hp-listing__attributes--secondary .hp-listing__attribute,
body.royal-single-listing .hp-listing__attributes--ternary .hp-listing__attribute {
	display: inline-flex;
	padding: 6px 14px;
	background-color: var(--color-background-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	font-size: var(--text-small);
	font-weight: 500;
	color: var(--color-text);
}

/* ── Enquiry Card (JS-injected) ───────────────────────────────────────────── */

.single-listing-enquiry-card {
	background-color: var(--color-primary-light);
	border: 1px solid var(--color-primary);
	border-radius: var(--radius-lg);
	padding: var(--space-xl);
	text-align: center;
}

.enquiry-card-title {
	font-family: var(--font-heading);
	font-size: var(--text-h3);
	line-height: var(--lh-h3);
	font-weight: 600;
	color: var(--color-dark);
	margin: 0 0 var(--space-sm);
}

.enquiry-card-text {
	font-size: var(--text-small);
	line-height: var(--lh-small);
	color: var(--color-text);
	margin: 0 0 var(--space-lg);
}

.enquiry-card-btn {
	width: 100%;
}

/* ── Responsive: Mobile adjustments ──────────────────────────────────────── */

@media (max-width: 767px) {
	body.royal-single-listing .hp-page {
		padding: var(--space-lg) var(--container-padding) var(--space-3xl);
	}

	body.royal-single-listing .hp-page__sidebar {
		position: static;
	}

	.single-listing-title {
		font-size: var(--text-h2);
		line-height: var(--lh-h2);
	}

	.single-listing-price-value {
		font-size: var(--text-h3);
	}
}

/* ==========================================================================
   Resources / Blog Page
   ========================================================================== */

.resources-page {
	padding: var(--space-2xl) 0 var(--space-4xl);
}

/* ── Topbar (article count) ──────────────────────────────────────────── */

.resources-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--space-xl);
	padding-bottom: var(--space-lg);
	border-bottom: 1px solid var(--color-border);
}

.resources-count {
	font-size: var(--text-body);
	color: var(--color-text);
	margin: 0;
}

/* ── Grid spacing ────────────────────────────────────────────────────── */

.resources-grid {
	gap: var(--space-xl);
}

/* ── Pagination ──────────────────────────────────────────────────────── */

.resources-pagination {
	margin-top: var(--space-3xl);
	display: flex;
	justify-content: center;
}

.resources-pagination .page-numbers {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

.resources-pagination .page-numbers li {
	display: flex;
}

.resources-pagination .page-numbers a,
.resources-pagination .page-numbers span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 8px 14px;
	font-family: var(--font-body);
	font-size: var(--text-small);
	font-weight: 500;
	color: var(--color-text);
	background-color: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	text-decoration: none;
	transition: all var(--transition-fast);
	gap: var(--space-xs);
}

.resources-pagination .page-numbers a:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
	background-color: var(--color-primary-light);
}

.resources-pagination .page-numbers .current {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: #fff;
	font-weight: 600;
}

.resources-pagination .page-numbers .dots {
	border: none;
	background: none;
	color: var(--color-text-light);
	min-width: auto;
	padding: 8px 4px;
}

.resources-pagination .page-numbers .prev,
.resources-pagination .page-numbers .next {
	font-weight: 600;
	color: var(--color-primary);
}

.resources-pagination .page-numbers .prev:hover,
.resources-pagination .page-numbers .next:hover {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: #fff;
}

.resources-pagination .page-numbers .prev i,
.resources-pagination .page-numbers .next i {
	font-size: var(--text-xs);
}

/* ── Empty State ─────────────────────────────────────────────────────── */

.resources-empty {
	text-align: center;
	padding: var(--space-4xl) 0;
}

.resources-empty-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	margin: 0 auto var(--space-xl);
	background-color: var(--color-primary-light);
	border-radius: var(--radius-full);
	color: var(--color-primary);
	font-size: 2rem;
}

.resources-empty-title {
	font-family: var(--font-heading);
	font-size: var(--text-h2);
	line-height: var(--lh-h2);
	font-weight: 600;
	color: var(--color-dark);
	margin: 0 0 var(--space-sm);
}

.resources-empty-text {
	font-size: var(--text-body);
	line-height: var(--lh-body);
	color: var(--color-text-light);
	max-width: 480px;
	margin: 0 auto;
}

/* ==========================================================================
   Single Post Page
   ========================================================================== */

/* ── Post Header ────────────────────────────────────────────────────────── */

.post-header {
	background-color: var(--color-background-alt);
	padding: var(--space-3xl) 0;
	text-align: center;
}

.post-header-inner {
	max-width: 720px;
	margin: 0 auto;
}

/* Category badges */
.post-categories {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);
	margin-bottom: var(--space-lg);
	flex-wrap: wrap;
}

.post-category-badge {
	display: inline-block;
	padding: 4px 14px;
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--color-primary);
	background-color: var(--color-primary-light);
	border-radius: var(--radius-pill);
	text-decoration: none;
	transition: all var(--transition-fast);
}

.post-category-badge:hover {
	background-color: var(--color-primary);
	color: #fff;
}

/* Post title */
.post-title {
	font-family: var(--font-heading);
	font-size: var(--text-h1);
	line-height: var(--lh-h1);
	font-weight: 700;
	color: var(--color-dark);
	margin: 0 0 var(--space-lg);
}

/* Post meta */
.post-meta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-lg);
	flex-wrap: wrap;
}

.post-meta-item {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	font-family: var(--font-body);
	font-size: var(--text-small);
	color: var(--color-text-light);
}

.post-meta-item i {
	font-size: var(--text-xs);
	color: var(--color-primary);
}

@media (min-width: 768px) {
	.post-header {
		padding: var(--space-4xl) 0;
	}

	.post-title {
		font-size: var(--text-hero);
		line-height: var(--lh-hero);
	}
}

/* ── Featured Image ─────────────────────────────────────────────────────── */

.post-featured-image {
	margin: 0 0 var(--space-2xl);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.post-featured-image img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* ── Post Body (article content) ────────────────────────────────────────── */

.single-post {
	padding: var(--space-2xl) 0 var(--space-xl);
}

.post-body {
	font-family: var(--font-body);
	font-size: var(--text-body);
	line-height: var(--lh-body);
	color: var(--color-text);
}

/* Headings within post */
.post-body h2 {
	font-family: var(--font-heading);
	font-size: var(--text-h2);
	line-height: var(--lh-h2);
	font-weight: 600;
	color: var(--color-dark);
	margin: var(--space-2xl) 0 var(--space-md);
}

.post-body h3 {
	font-family: var(--font-heading);
	font-size: var(--text-h3);
	line-height: var(--lh-h3);
	font-weight: 600;
	color: var(--color-dark);
	margin: var(--space-xl) 0 var(--space-sm);
}

.post-body h4 {
	font-family: var(--font-heading);
	font-size: var(--text-body);
	font-weight: 600;
	color: var(--color-dark);
	margin: var(--space-lg) 0 var(--space-sm);
}

/* Paragraphs */
.post-body p {
	margin: 0 0 var(--space-lg);
}

/* Lists */
.post-body ul,
.post-body ol {
	margin: 0 0 var(--space-lg);
	padding-left: var(--space-xl);
}

.post-body li {
	margin-bottom: var(--space-sm);
	line-height: var(--lh-body);
}

.post-body li::marker {
	color: var(--color-primary);
}

/* Links */
.post-body a {
	color: var(--color-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color var(--transition-fast);
}

.post-body a:hover {
	color: var(--color-primary-dark);
}

/* Bold & italic */
.post-body strong {
	font-weight: 600;
	color: var(--color-dark);
}

.post-body em {
	font-style: italic;
}

/* Blockquotes */
.post-body blockquote {
	margin: var(--space-xl) 0;
	padding: var(--space-lg) var(--space-xl);
	border-left: 4px solid var(--color-primary);
	background-color: var(--color-background-alt);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.post-body blockquote p {
	font-size: var(--text-body);
	font-style: italic;
	color: var(--color-dark);
	margin-bottom: 0;
}

.post-body blockquote p + p {
	margin-top: var(--space-md);
}

/* Images in content */
.post-body img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-md);
	margin: var(--space-lg) 0;
}

/* Code */
.post-body code {
	font-size: 0.9em;
	padding: 2px 6px;
	background-color: var(--color-background-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
}

.post-body pre {
	margin: var(--space-lg) 0;
	padding: var(--space-lg);
	background-color: var(--color-dark);
	color: #e2e8f0;
	border-radius: var(--radius-md);
	overflow-x: auto;
	font-size: var(--text-small);
	line-height: 1.7;
}

.post-body pre code {
	background: none;
	border: none;
	padding: 0;
	font-size: inherit;
	color: inherit;
}

/* Tables */
.post-body table {
	width: 100%;
	border-collapse: collapse;
	margin: var(--space-lg) 0;
	font-size: var(--text-small);
}

.post-body th,
.post-body td {
	padding: var(--space-sm) var(--space-md);
	border: 1px solid var(--color-border);
	text-align: left;
}

.post-body th {
	background-color: var(--color-background-alt);
	font-weight: 600;
	color: var(--color-dark);
}

/* First/last child spacing */
.post-body > *:first-child {
	margin-top: 0;
}

.post-body > *:last-child {
	margin-bottom: 0;
}

/* ── Post Tags ──────────────────────────────────────────────────────────── */

.post-tags {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-sm);
	padding-top: var(--space-xl);
	margin-top: var(--space-2xl);
	border-top: 1px solid var(--color-border);
}

.post-tag {
	display: inline-block;
	padding: 4px 12px;
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: 500;
	color: var(--color-text);
	background-color: var(--color-background-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	text-decoration: none;
	transition: all var(--transition-fast);
}

.post-tag:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
	background-color: var(--color-primary-light);
}

/* ── Post Navigation ────────────────────────────────────────────────────── */

.post-navigation {
	padding: var(--space-xl) 0 var(--space-2xl);
}

.post-navigation-inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-md);
}

.post-nav-link {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	padding: var(--space-lg);
	background-color: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	text-decoration: none;
	transition: all var(--transition-base);
}

.post-nav-link:hover {
	border-color: var(--color-primary);
	box-shadow: var(--shadow-sm);
}

.post-nav-label {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-primary);
}

.post-nav-title {
	font-family: var(--font-heading);
	font-size: var(--text-small);
	font-weight: 600;
	color: var(--color-dark);
	line-height: var(--lh-small);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.post-nav-next {
	text-align: right;
}

.post-nav-next .post-nav-label {
	justify-content: flex-end;
}

@media (min-width: 640px) {
	.post-navigation-inner {
		grid-template-columns: 1fr 1fr;
	}
}

/* ── Related Posts ──────────────────────────────────────────────────────── */

.related-posts-cta {
	text-align: center;
	margin-top: var(--space-2xl);
}

/* ==========================================================================
   HivePress Auth Pages & Account Pages
   Login, Register modal, Password Reset, Account Settings, Submit Listing
   ========================================================================== */

/* ── Auth page background & layout ──────────────────────────────────────── */

.hp-template--user-login-page .content-area,
.hp-template--user-edit-settings-page .content-area {
	background-color: var(--color-background-alt);
	min-height: 60vh;
}

.hp-template--user-login-page .hp-page,
.hp-template--user-edit-settings-page .hp-page {
	padding: var(--space-3xl) var(--container-padding, 24px);
	max-width: 1280px;
	margin: 0 auto;
}

/* ── Login page card ────────────────────────────────────────────────────── */

.hp-template--user-login-page .hp-page__content {
	background-color: #fff;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	padding: var(--space-2xl) var(--space-xl);
	max-width: 480px;
	margin: 0 auto;
	float: none;
}

@media (min-width: 640px) {
	.hp-template--user-login-page .hp-page__content {
		padding: var(--space-3xl);
	}
}

/* ── Page title (Sign In / Settings) ────────────────────────────────────── */

.hp-template--user-login-page .hp-page__title {
	font-family: var(--font-heading);
	font-size: var(--text-h1);
	line-height: var(--lh-h1, 1.2);
	font-weight: 700;
	color: var(--color-dark);
	text-align: center;
	margin: 0 0 var(--space-xs);
}

.hp-template--user-login-page .hp-page__title::after {
	content: "Welcome back to Business Marketplace";
	display: block;
	font-family: var(--font-body);
	font-size: var(--text-small);
	line-height: var(--lh-small, 1.5);
	font-weight: 400;
	color: var(--color-text-light);
	margin-top: var(--space-sm);
}

/* ── HivePress form global styles ───────────────────────────────────────── */

.hp-form .hp-field__label,
.hp-form .hp-form__label {
	display: block;
	font-family: var(--font-body);
	font-size: var(--text-small);
	font-weight: 500;
	color: var(--color-text);
	margin-bottom: 6px;
}

.hp-form .hp-field__label span,
.hp-form .hp-form__label span {
	font-size: inherit;
	font-weight: inherit;
}

.hp-form .hp-field--text,
.hp-form .hp-field--email,
.hp-form .hp-field--password,
.hp-form .hp-field--url,
.hp-form .hp-field--number,
.hp-form .hp-field--textarea,
.hp-form select {
	display: block;
	width: 100%;
	font-family: var(--font-body);
	font-size: var(--text-body);
	color: var(--color-dark);
	background-color: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 12px 16px;
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}

.hp-form .hp-field--text:focus,
.hp-form .hp-field--email:focus,
.hp-form .hp-field--password:focus,
.hp-form .hp-field--url:focus,
.hp-form .hp-field--number:focus,
.hp-form .hp-field--textarea:focus,
.hp-form select:focus {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(15, 107, 94, 0.1);
}

.hp-form .hp-field--text::placeholder,
.hp-form .hp-field--email::placeholder,
.hp-form .hp-field--password::placeholder,
.hp-form .hp-field--textarea::placeholder {
	color: var(--color-text-light);
}

.hp-form .hp-field--textarea {
	min-height: 120px;
	resize: vertical;
}

/* Password field show/hide toggle */
.hp-form .hp-form__field--password {
	position: relative;
}

.hp-form .hp-field__icon {
	position: absolute;
	right: 12px;
	top: 50%;
	color: var(--color-text-light);
	cursor: pointer;
	transition: color var(--transition-fast);
}

.hp-form .hp-field__icon:hover {
	color: var(--color-primary);
}

/* Field spacing */
.hp-form .hp-form__field:not(:last-child) {
	margin-bottom: var(--space-lg);
}

/* ── Submit buttons ─────────────────────────────────────────────────────── */

.hp-form .hp-form__button,
.hp-form button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	font-family: var(--font-body);
	font-size: var(--text-body);
	font-weight: 600;
	color: #fff;
	background-color: var(--color-primary);
	border: 2px solid var(--color-primary);
	border-radius: var(--radius-pill);
	padding: 14px 24px;
	cursor: pointer;
	transition: all var(--transition-base);
	text-decoration: none;
	line-height: 1.4;
	min-height: 48px;
}

.hp-form .hp-form__button:hover,
.hp-form button[type="submit"]:hover {
	background-color: var(--color-primary-dark);
	border-color: var(--color-primary-dark);
	box-shadow: var(--shadow-sm);
}

.hp-form .hp-form__button:active,
.hp-form button[type="submit"]:active {
	transform: translateY(1px);
}

/* ── Form footer (links below button) ───────────────────────────────────── */

.hp-form .hp-form__footer {
	margin-top: var(--space-lg);
	flex-direction: column;
	gap: var(--space-md);
}

.hp-form .hp-form__actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-sm);
	margin-top: var(--space-lg);
	text-align: center;
}

.hp-form .hp-form__action {
	font-family: var(--font-body);
	font-size: var(--text-small);
	color: var(--color-text-light);
	margin: 0;
}

.hp-form .hp-form__action a {
	color: var(--color-primary);
	font-weight: 600;
	text-decoration: none;
	transition: color var(--transition-fast);
}

.hp-form .hp-form__action a:hover {
	color: var(--color-primary-dark);
	text-decoration: underline;
}

/* ── Form messages (success/error) ──────────────────────────────────────── */

.hp-form .hp-form__messages {
	border-radius: var(--radius-md);
	font-family: var(--font-body);
	font-size: var(--text-small);
	padding: var(--space-md) var(--space-lg);
	margin-bottom: var(--space-lg);
}

.hp-form .hp-form__messages--error {
	background-color: #fef2f2;
	border-left-color: var(--color-error);
	color: #991b1b;
}

.hp-form .hp-form__messages--success {
	background-color: #f0fdf4;
	border-left-color: var(--color-success);
	color: #166534;
}

/* ── Modal overlay & container ──────────────────────────────────────────── */

.hp-modal {
	background-color: #fff;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	padding: var(--space-2xl);
	max-width: 440px;
	width: calc(100% - var(--space-xl) * 2);
}

@media (min-width: 640px) {
	.hp-modal {
		padding: var(--space-2xl) var(--space-2xl);
	}
}

.hp-modal__title {
	font-family: var(--font-heading);
	font-size: var(--text-h2);
	line-height: var(--lh-h2, 1.3);
	font-weight: 700;
	color: var(--color-dark);
	text-align: center;
	margin: 0 0 var(--space-lg);
}

.hp-modal__title:not(:last-child) {
	margin-bottom: var(--space-xl);
}

/* Modal close button */
.hp-modal .fancybox-close-small,
.fancybox-button--close {
	color: var(--color-text-light);
	transition: color var(--transition-fast);
}

.hp-modal .fancybox-close-small:hover,
.fancybox-button--close:hover {
	color: var(--color-dark);
}

/* Modal backdrop */
.fancybox-bg {
	background: rgba(26, 26, 46, 0.6);
}

/* ── Account / Settings page ────────────────────────────────────────────── */

.hp-template--user-edit-settings-page .hp-page__title {
	font-family: var(--font-heading);
	font-size: var(--text-h1);
	line-height: var(--lh-h1, 1.2);
	font-weight: 700;
	color: var(--color-dark);
	margin: 0 0 var(--space-xl);
}

/* Account page content card */
.hp-template--user-edit-settings-page .hp-page__content {
	background-color: #fff;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	padding: var(--space-xl);
}

@media (min-width: 640px) {
	.hp-template--user-edit-settings-page .hp-page__content {
		padding: var(--space-2xl);
	}
}

/* Account sidebar */
.hp-template--user-edit-settings-page .hp-page__sidebar {
	margin-bottom: var(--space-xl);
}

.hp-template--user-edit-settings-page .hp-page__sidebar .widget_nav_menu ul,
.hp-template--user-edit-settings-page .hp-page__sidebar ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.hp-template--user-edit-settings-page .hp-page__sidebar li {
	list-style: none;
}

.hp-template--user-edit-settings-page .hp-page__sidebar a {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	font-family: var(--font-body);
	font-size: var(--text-body);
	font-weight: 500;
	color: var(--color-text);
	text-decoration: none;
	padding: var(--space-sm) var(--space-md);
	border-radius: var(--radius-md);
	transition: all var(--transition-fast);
}

.hp-template--user-edit-settings-page .hp-page__sidebar a:hover,
.hp-template--user-edit-settings-page .hp-page__sidebar .current-menu-item a {
	background-color: var(--color-primary-light);
	color: var(--color-primary);
}

/* File upload button in settings */
.hp-form .hp-field--attachment-upload label,
.hp-form button:not([type="submit"]) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-body);
	font-size: var(--text-small);
	font-weight: 500;
	color: var(--color-primary);
	background-color: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 10px 16px;
	cursor: pointer;
	transition: all var(--transition-fast);
}

.hp-form .hp-field--attachment-upload label:hover,
.hp-form button:not([type="submit"]):hover {
	border-color: var(--color-primary);
	background-color: var(--color-primary-light);
}

/* Delete account link */
.hp-form__action--user-delete a {
	color: var(--color-error) !important;
	font-weight: 500;
}

.hp-form__action--user-delete a:hover {
	text-decoration: underline;
}

/* Optional field label (small text) */
.hp-form .hp-field__label small,
.hp-form .hp-form__label small {
	font-weight: 400;
	color: var(--color-text-light);
	margin-left: 4px;
}

/* ── Submit Listing page ────────────────────────────────────────────────── */

.hp-template--listing-submit-page .content-area,
.hp-template--listing-submit-details-page .content-area,
.hp-template--listing-submit-category-page .content-area {
	background-color: var(--color-background-alt);
	min-height: 60vh;
}

.hp-template--listing-submit-page .hp-page,
.hp-template--listing-submit-details-page .hp-page,
.hp-template--listing-submit-category-page .hp-page {
	padding: var(--space-3xl) var(--container-padding, 24px);
	max-width: 1280px;
	margin: 0 auto;
}

.hp-template--listing-submit-page .hp-page__title,
.hp-template--listing-submit-details-page .hp-page__title,
.hp-template--listing-submit-category-page .hp-page__title {
	font-family: var(--font-heading);
	font-size: var(--text-h1);
	line-height: var(--lh-h1, 1.2);
	font-weight: 700;
	color: var(--color-dark);
	margin: 0 0 var(--space-xl);
}

.hp-template--listing-submit-page .hp-page__content,
.hp-template--listing-submit-details-page .hp-page__content,
.hp-template--listing-submit-category-page .hp-page__content {
	background-color: #fff;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	padding: var(--space-xl);
	max-width: 720px;
	margin: 0 auto;
	float: none;
}

@media (min-width: 640px) {
	.hp-template--listing-submit-page .hp-page__content,
	.hp-template--listing-submit-details-page .hp-page__content,
	.hp-template--listing-submit-category-page .hp-page__content {
		padding: var(--space-2xl);
	}
}

/* Select dropdowns on submit listing */
.hp-form select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234A4A68' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 40px;
}

/* ── Responsive: Account page sidebar to top on mobile ──────────────────── */

@media (min-width: 768px) {
	.hp-template--user-edit-settings-page .hp-page__sidebar {
		margin-bottom: 0;
	}

	.hp-template--user-edit-settings-page .hp-page__sidebar a {
		padding: var(--space-sm) var(--space-lg);
	}
}

/* ==========================================================================
   Sell Your Business Page
   ========================================================================== */

/* ── Shared Section Heading ────────────────────────────────────────────── */

.sell-section-heading {
	font-family: var(--font-heading);
	font-size: var(--text-h2);
	font-weight: 700;
	color: var(--color-dark);
	text-align: center;
	margin: 0 0 var(--space-xl);
}

/* ── Benefits Section ──────────────────────────────────────────────────── */

.sell-benefits {
	padding: var(--space-2xl) 0 var(--space-3xl);
}

.sell-benefits-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-xl);
}

.sell-benefit-card {
	text-align: center;
	padding: var(--space-xl);
	background: #fff;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
}

.sell-benefit-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: var(--radius-lg);
	background-color: var(--color-primary-light);
	color: var(--color-primary);
	font-size: 1.5rem;
	margin-bottom: var(--space-md);
}

.sell-benefit-card h3 {
	font-family: var(--font-heading);
	font-size: var(--text-h3);
	font-weight: 700;
	color: var(--color-dark);
	margin: 0 0 var(--space-sm);
}

.sell-benefit-card p {
	font-size: var(--text-body);
	color: var(--color-text);
	margin: 0;
	line-height: var(--lh-body);
}

/* ── How It Works (Process Steps) ──────────────────────────────────────── */

.sell-process {
	padding: var(--space-2xl) 0 var(--space-3xl);
	background-color: var(--color-background-alt);
}

.sell-steps {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-xl);
	counter-reset: step;
}

.sell-step {
	text-align: center;
	padding: var(--space-xl);
}

.sell-step-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--radius-full);
	background-color: var(--color-primary);
	color: #fff;
	font-family: var(--font-heading);
	font-size: var(--text-h3);
	font-weight: 700;
	margin-bottom: var(--space-md);
}

.sell-step h3 {
	font-family: var(--font-heading);
	font-size: var(--text-h3);
	font-weight: 700;
	color: var(--color-dark);
	margin: 0 0 var(--space-sm);
}

.sell-step p {
	font-size: var(--text-body);
	color: var(--color-text);
	margin: 0;
	line-height: var(--lh-body);
	max-width: 360px;
	margin-left: auto;
	margin-right: auto;
}

/* ── Seller's Checklist ────────────────────────────────────────────────── */

.sell-checklist {
	padding: var(--space-2xl) 0 var(--space-3xl);
}

.sell-checklist-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-xl);
	align-items: start;
}

.sell-checklist-content .sell-section-heading {
	text-align: left;
}

.sell-checklist-intro {
	font-size: var(--text-body);
	color: var(--color-text);
	line-height: var(--lh-body);
	margin: 0 0 var(--space-xl);
}

.sell-checklist-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.sell-checklist-list li {
	display: flex;
	gap: var(--space-md);
	padding: var(--space-lg);
	background: #fff;
	border-radius: var(--radius-md);
	border: 1px solid var(--color-border);
}

.sell-checklist-list li i {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-full);
	background-color: var(--color-primary-light);
	color: var(--color-primary);
	font-size: 0.75rem;
	margin-top: 2px;
}

.sell-checklist-list li div {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.sell-checklist-list li strong {
	font-family: var(--font-heading);
	font-size: var(--text-body);
	font-weight: 600;
	color: var(--color-dark);
}

.sell-checklist-list li span {
	font-size: var(--text-small);
	color: var(--color-text);
	line-height: var(--lh-small);
}

/* Tip aside */
.sell-checklist-tip {
	padding: var(--space-xl);
	background-color: var(--color-primary-light);
	border-radius: var(--radius-lg);
	border-left: 4px solid var(--color-primary);
}

.sell-checklist-tip-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--radius-lg);
	background-color: #fff;
	color: var(--color-primary);
	font-size: 1.25rem;
	margin-bottom: var(--space-md);
}

.sell-checklist-tip h3 {
	font-family: var(--font-heading);
	font-size: var(--text-h3);
	font-weight: 700;
	color: var(--color-dark);
	margin: 0 0 var(--space-sm);
}

.sell-checklist-tip p {
	font-size: var(--text-body);
	color: var(--color-text);
	margin: 0;
	line-height: var(--lh-body);
}

/* ── CTA Section ───────────────────────────────────────────────────────── */

.sell-cta {
	padding: var(--space-2xl) 0 var(--space-3xl);
	background-color: var(--color-background-alt);
}

.sell-cta-card {
	text-align: center;
	max-width: 640px;
	margin: 0 auto;
	padding: var(--space-2xl);
	background: #fff;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
}

.sell-cta-card h2 {
	font-family: var(--font-heading);
	font-size: var(--text-h2);
	font-weight: 700;
	color: var(--color-dark);
	margin: 0 0 var(--space-md);
}

.sell-cta-card p {
	font-size: var(--text-body);
	color: var(--color-text);
	line-height: var(--lh-body);
	margin: 0 0 var(--space-xl);
}

/* ── Desktop Layout ────────────────────────────────────────────────────── */

@media (min-width: 768px) {
	.sell-benefits-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.sell-steps {
		grid-template-columns: repeat(3, 1fr);
	}

	.sell-checklist-layout {
		grid-template-columns: 1fr 320px;
	}
}

/* ==========================================================================
   Broker Dashboard
   ========================================================================== */

.dashboard-page {
	padding: var(--space-2xl) 0 var(--space-4xl);
}

/* ── User Utility Bar ─────────────────────────────────────────────────── */

.dashboard-user-bar {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	align-items: center;
	text-align: center;
	padding-bottom: var(--space-lg);
	margin-bottom: var(--space-lg);
	border-bottom: 1px solid var(--color-border);
}

.dashboard-user-greeting {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	font-family: var(--font-body);
	font-size: var(--text-body);
	color: var(--color-text-light);
}

.dashboard-user-greeting i {
	font-size: 1.25em;
	color: var(--color-primary);
}

.dashboard-user-links {
	display: flex;
	align-items: center;
	gap: var(--space-lg);
}

.dashboard-user-links a {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	font-family: var(--font-body);
	font-size: var(--text-small);
	font-weight: 500;
	color: var(--color-text-light);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.dashboard-user-links a:hover {
	color: var(--color-primary);
}

.dashboard-user-links a i {
	font-size: 0.9em;
}

@media (min-width: 768px) {
	.dashboard-user-bar {
		flex-direction: row;
		justify-content: space-between;
		text-align: left;
	}
}

/* ── Tab Navigation ───────────────────────────────────────────────────── */

.dashboard-tabs {
	display: flex;
	gap: var(--space-sm);
	border-bottom: 2px solid var(--color-border);
	margin-bottom: var(--space-2xl);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.dashboard-tab {
	display: inline-flex;
	align-items: center;
	gap: var(--space-sm);
	padding: var(--space-md) var(--space-lg);
	font-family: var(--font-body);
	font-size: var(--text-body);
	font-weight: 500;
	color: var(--color-text-light);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	transition: color var(--transition-fast), border-color var(--transition-fast);
	white-space: nowrap;
}

.dashboard-tab:hover {
	color: var(--color-dark);
}

.dashboard-tab--active {
	color: var(--color-primary);
	border-bottom-color: var(--color-primary);
	font-weight: 600;
}

.dashboard-tab i {
	font-size: var(--text-small);
}

/* ── Success / Error Notices ──────────────────────────────────────────── */

.dashboard-notice {
	display: flex;
	align-items: flex-start;
	gap: var(--space-sm);
	padding: var(--space-md) var(--space-lg);
	border-radius: var(--radius-md);
	font-size: var(--text-body);
	line-height: var(--lh-body);
	margin-bottom: var(--space-xl);
}

.dashboard-notice--success {
	background-color: #f0fdf4;
	color: #166534;
	border: 1px solid #bbf7d0;
}

.dashboard-notice--success i {
	color: var(--color-success);
	margin-top: 3px;
}

.dashboard-notice--error {
	background-color: #fef2f2;
	color: #991b1b;
	border: 1px solid #fecaca;
}

.dashboard-notice--error i {
	color: var(--color-error);
	margin-top: 3px;
}

.dashboard-notice--error ul {
	margin: var(--space-sm) 0 0;
	padding-left: var(--space-lg);
}

.dashboard-notice--error li {
	margin-bottom: var(--space-xs);
}

/* ── Empty State ──────────────────────────────────────────────────────── */

.dashboard-empty {
	text-align: center;
	padding: var(--space-4xl) var(--space-lg);
}

.dashboard-empty-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	margin: 0 auto var(--space-xl);
	background-color: var(--color-primary-light);
	border-radius: var(--radius-full);
	color: var(--color-primary);
	font-size: 2rem;
}

.dashboard-empty h2 {
	font-family: var(--font-heading);
	font-size: var(--text-h2);
	line-height: var(--lh-h2);
	font-weight: 600;
	color: var(--color-dark);
	margin: 0 0 var(--space-sm);
}

.dashboard-empty p {
	font-size: var(--text-body);
	line-height: var(--lh-body);
	color: var(--color-text-light);
	margin: 0 0 var(--space-xl);
	max-width: 400px;
	margin-left: auto;
	margin-right: auto;
}

/* ── Listings Table (desktop) ─────────────────────────────────────────── */

.dashboard-table-wrap {
	display: none;
}

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

.dashboard-table thead th {
	text-align: left;
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--color-text-light);
	padding: var(--space-sm) var(--space-md);
	border-bottom: 2px solid var(--color-border);
}

.dashboard-table tbody td {
	padding: var(--space-md);
	border-bottom: 1px solid var(--color-border);
	font-size: var(--text-body);
	color: var(--color-text);
	vertical-align: middle;
}

.dashboard-table tbody tr:hover {
	background-color: var(--color-background-alt);
}

.dashboard-listing-cell {
	display: flex;
	align-items: center;
	gap: var(--space-md);
}

.dashboard-listing-thumb {
	width: 48px;
	height: 48px;
	border-radius: var(--radius-md);
	object-fit: cover;
	flex-shrink: 0;
}

.dashboard-listing-thumb--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-background-alt);
	color: var(--color-text-light);
	font-size: var(--text-body);
}

.dashboard-listing-title {
	font-weight: 500;
	color: var(--color-dark);
}

.dashboard-price {
	font-family: var(--font-heading);
	font-weight: 600;
	color: var(--color-dark);
}

/* ── Status Badges ────────────────────────────────────────────────────── */

.dashboard-status {
	display: inline-block;
	padding: 4px 12px;
	border-radius: var(--radius-pill);
	font-size: var(--text-xs);
	font-weight: 600;
	line-height: var(--lh-xs);
}

.dashboard-status--publish {
	background-color: #f0fdf4;
	color: #166534;
}

.dashboard-status--draft {
	background-color: var(--color-background-alt);
	color: var(--color-text-light);
}

.dashboard-status--pending {
	background-color: #fef9c3;
	color: #854d0e;
}

/* ── Action Links ─────────────────────────────────────────────────────── */

.dashboard-actions {
	display: flex;
	align-items: center;
	gap: var(--space-md);
}

.dashboard-action {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	font-size: var(--text-small);
	font-weight: 500;
	color: var(--color-primary);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.dashboard-action:hover {
	color: var(--color-primary-dark);
}

.dashboard-action i {
	font-size: var(--text-xs);
}

/* ── Mobile Card View ─────────────────────────────────────────────────── */

.dashboard-cards {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.dashboard-card {
	background-color: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-lg);
}

.dashboard-card-header {
	display: flex;
	align-items: flex-start;
	gap: var(--space-md);
	margin-bottom: var(--space-md);
}

.dashboard-card-thumb {
	width: 56px;
	height: 56px;
	border-radius: var(--radius-md);
	object-fit: cover;
	flex-shrink: 0;
}

.dashboard-card-thumb--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-background-alt);
	color: var(--color-text-light);
	font-size: var(--text-h3);
}

.dashboard-card-info {
	min-width: 0;
}

.dashboard-card-title {
	font-family: var(--font-heading);
	font-size: var(--text-h3);
	line-height: var(--lh-h3);
	font-weight: 600;
	color: var(--color-dark);
	margin: 0 0 var(--space-xs);
}

.dashboard-card-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-sm);
	font-size: var(--text-xs);
	color: var(--color-text-light);
}

.dashboard-card-meta i {
	font-size: var(--text-xs);
	color: var(--color-primary);
}

.dashboard-card-body {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	padding: var(--space-md) 0;
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
}

.dashboard-card-price {
	font-family: var(--font-heading);
	font-size: var(--text-h3);
	font-weight: 700;
	color: var(--color-dark);
}

.dashboard-card-footer {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	padding-top: var(--space-md);
}

.btn-sm {
	padding: 8px 16px;
	font-size: var(--text-small);
}

/* ── Form Wrapper ─────────────────────────────────────────────────────── */

.dashboard-form-wrap {
	max-width: 720px;
}

.dashboard-form-header {
	margin-bottom: var(--space-xl);
}

.dashboard-form-header h2 {
	font-family: var(--font-heading);
	font-size: var(--text-h2);
	line-height: var(--lh-h2);
	font-weight: 600;
	color: var(--color-dark);
	margin: 0 0 var(--space-xs);
}

.dashboard-form-header p {
	font-size: var(--text-body);
	line-height: var(--lh-body);
	color: var(--color-text-light);
	margin: 0;
}

.dashboard-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-xl);
}

.form-row--two {
	display: grid;
	gap: var(--space-xl);
}

.form-actions {
	padding-top: var(--space-md);
}

/* ── Image Upload Area ────────────────────────────────────────────────── */

.image-upload-area {
	position: relative;
	border: 2px dashed var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-2xl) var(--space-lg);
	text-align: center;
	cursor: pointer;
	transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.image-upload-area:hover,
.image-upload-area.dragover {
	border-color: var(--color-primary);
	background-color: var(--color-primary-light);
}

.image-upload-input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.image-upload-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-sm);
	pointer-events: none;
}

.image-upload-placeholder i {
	font-size: 2rem;
	color: var(--color-text-light);
}

.image-upload-text {
	font-size: var(--text-body);
	font-weight: 500;
	color: var(--color-dark);
}

.image-upload-hint {
	font-size: var(--text-xs);
	color: var(--color-text-light);
}

.image-upload-preview {
	position: relative;
	pointer-events: none;
}

.image-upload-preview img {
	max-width: 100%;
	max-height: 240px;
	border-radius: var(--radius-md);
	object-fit: contain;
}

.image-upload-remove {
	position: absolute;
	top: var(--space-sm);
	right: var(--space-sm);
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(0, 0, 0, 0.6);
	color: #fff;
	border: none;
	border-radius: var(--radius-full);
	cursor: pointer;
	pointer-events: auto;
	transition: background-color var(--transition-fast);
}

.image-upload-remove:hover {
	background-color: var(--color-error);
}

/* ── Current Image (edit form) ────────────────────────────────────────── */

.dashboard-current-image {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	padding: var(--space-md);
	background-color: var(--color-background-alt);
	border-radius: var(--radius-md);
	margin-bottom: var(--space-md);
}

.dashboard-current-image img {
	width: 80px;
	height: 80px;
	border-radius: var(--radius-md);
	object-fit: cover;
}

.dashboard-current-image span {
	font-size: var(--text-small);
	color: var(--color-text-light);
}

/* ── Client-side validation error class ───────────────────────────────── */

.field-error {
	border-color: var(--color-error) !important;
}

.sell-form-errors {
	background-color: #fef2f2;
	color: #991b1b;
	border: 1px solid #fecaca;
	border-radius: var(--radius-md);
	padding: var(--space-md) var(--space-lg);
	margin-bottom: var(--space-xl);
}

.sell-form-errors ul {
	margin: var(--space-sm) 0 0;
	padding-left: var(--space-lg);
}

.sell-form-errors li {
	margin-bottom: var(--space-xs);
}

/* ── Desktop Layout ───────────────────────────────────────────────────── */

@media (min-width: 768px) {
	.dashboard-table-wrap {
		display: block;
	}

	.dashboard-cards {
		display: none;
	}

	.form-row--two {
		grid-template-columns: 1fr 1fr;
	}
}

/* ── Settings Form Additions ─────────────────────────────────────────── */

.dashboard-settings-divider {
	border: none;
	border-top: 1px solid var(--color-border);
	margin: var(--space-sm) 0;
}

.dashboard-form-header h3 {
	font-family: var(--font-heading);
	font-size: var(--text-h3);
	line-height: var(--lh-h3);
	font-weight: 600;
	color: var(--color-dark);
	margin: 0 0 var(--space-xs);
}

.dashboard-form .required {
	color: var(--color-error);
}