/**
 * Autostore theme — main stylesheet.
 * Enqueued from inc/enqueue.php. Add your styles below, organized
 * roughly in this order: variables, reset, layout, components, pages.
 */

/* =====================================================
   1. CSS Variables — change these to re-theme the whole site
   ===================================================== */
:root {
	--color-primary: #96690a;
	--color-primary-dark: #7a5408;
	--color-text: #1e293b;
	--color-text-muted: #64748b;
	--color-border: #e2e4e7;
	--color-bg: #ffffff;
	--color-bg-alt: #f8fafc;
	--color-page-bg: #f7f6f3;

	--font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-heading: "Cormorant Garamond", Georgia, "Times New Roman", serif;

	--container-width: 1200px;
	--radius: 8px;
	--spacing: 20px;
}

/* =====================================================
   2. Reset / base
   ===================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}
body {
	margin: 0;
	font-family: var(--font-base);
	color: var(--color-text);
	line-height: 1.6;
	background: var(--color-page-bg);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--color-primary);
	text-decoration: none;
}
/* :where() keeps these at the same (low) specificity as the plain "a"
   selector above, so component classes like .btn always win regardless
   of hover/active/visited state — without this, a:hover/a:active would
   outrank .btn's color and make button text flip color unexpectedly. */
a:where(:visited) {
	color: var(--color-primary);
}
a:where(:hover, :active) {
	color: var(--color-primary-dark);
}

/* =====================================================
   3. Layout helpers
   ===================================================== */
.container {
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 var(--spacing);
}

.site-main {
	padding: 32px 0 48px;
}

/* =====================================================
   4. Components (fill in as you build templates)
   ===================================================== */

/* Car card (used in archive/search grid) — styled to match the
   dealership reference: photo with price overlay + status badge,
   accent-colored title, spec "pills", divider, two action buttons.
   Uses its own local --card-accent variable (gold) instead of the
   site-wide --color-primary, so this look is scoped to car cards only. */
.car-card {
	--card-accent: #b8860b;
	--card-accent-dark: #96690a;
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid #eceae4;
	border-radius: 0;
	overflow: hidden;
	background: var(--color-bg);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.car-card:hover {
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}
.car-card__image-link {
	position: relative;
	display: block;
}
.car-card__image {
	aspect-ratio: 3 / 2;
	object-fit: cover;
	width: 100%;
}
.car-card__image--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-bg-alt);
	color: var(--color-text-muted);
	font-size: 14px;
}
.car-card__status {
	position: absolute;
	top: 10px;
	left: 10px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(15, 23, 42, 0.75);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	padding: 5px 10px 5px 8px;
	border-radius: 999px;
}
.car-card__status-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #22c55e;
	display: inline-block;
}
.car-card__status--static {
	position: static;
	display: inline-flex;
}
.car-card__price-overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 40px 14px 14px;
	background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.45) 55%, rgba(0,0,0,0) 100%);
	color: #fff;
	font-family: var(--font-heading);
	font-size: 28px;
	font-weight: 700;
}
.car-card__body {
	padding: 16px;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.car-card__title {
	margin: 0 0 12px;
	font-size: 22px;
	font-family: var(--font-heading);
	font-weight: 600;
}
.car-card__title a {
	color: var(--card-accent);
}
.car-card__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 8px;
}
.pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: 0;
	padding: 5px 10px;
	font-size: 13px;
	color: var(--color-text);
	white-space: nowrap;
}
.pill--wide {
	white-space: normal;
	flex: 1 1 100%;
	color: #45597a;
	font-weight: 500;
}
.pill__icon {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	color: var(--color-text-muted);
}
.car-card__divider {
	border: none;
	border-top: 2px solid var(--card-accent);
	width: 32px;
	margin: 14px 0;
}
.car-card__actions {
	display: flex;
	gap: 10px;
	margin-top: auto;
}
.car-card__btn {
	flex: 1;
	text-align: center;
	padding: 10px 12px;
	border-radius: 0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}
.car-card__btn--outline {
	border: 1px solid var(--color-border);
	color: var(--color-text);
	background: #fff;
}
.car-card__btn--outline:hover {
	border-color: var(--color-text-muted);
	color: var(--color-text);
}
.car-card__btn--solid {
	background: var(--card-accent);
	color: #fff;
}
.car-card__btn--solid:hover {
	background: var(--card-accent-dark);
	color: #fff;
}

/* Buttons (used elsewhere, e.g. single-car.php) */
.btn {
	display: inline-block;
	padding: 10px 20px;
	border-radius: 0;
	background: var(--color-primary);
	color: #fff;
	border: none;
	cursor: pointer;
	font-weight: 600;
}
.btn:hover {
	background: var(--color-primary-dark);
	color: #fff;
}

/* =====================================================
   5. Pages (single-car.php, archive-car.php specific rules go here later)
   ===================================================== */

.archive-header {
	margin-bottom: 24px;
}
.archive-title {
	margin: 0 0 6px;
	font-family: var(--font-heading);
	font-size: 32px;
}
.archive-count {
	color: var(--color-text-muted);
	margin: 0;
	font-size: 14px;
}
.car-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 28px;
	margin-bottom: 32px;
}
.car-grid-pagination {
	display: flex;
	justify-content: center;
	gap: 12px;
}

/* ---------- Single Car page ---------- */
/*
 * Named grid areas instead of relying purely on source order — this
 * lets us put the summary block (status/price/title/quick actions)
 * FIRST on mobile (above the gallery) while keeping it in the right
 * column on desktop, just by redefining grid-template-areas per
 * breakpoint. The DOM order itself never changes.
 */
.single-car__layout {
	display: grid;
	grid-template-columns: 2fr 1fr;
	grid-template-areas:
		"main    summary"
		"main    contact"
		"main    specs";
	gap: 40px;
	align-items: start;
	margin-bottom: 40px;
}
.single-car__summary { grid-area: summary; }
.single-car__main    { grid-area: main; }
.single-car__contact-box { grid-area: contact; }
.single-car__specs   { grid-area: specs; }

@media (max-width: 900px) {
	.single-car__layout {
		grid-template-columns: 1fr;
		grid-template-areas:
			"summary"
			"main"
			"contact"
			"specs";
		gap: 28px;
	}
}

.car-gallery__main {
	position: relative;
	border-radius: 0;
	overflow: hidden;
	margin-bottom: 12px;
}
.car-gallery__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, 0.9);
	color: var(--color-text);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.car-gallery__arrow svg {
	width: 20px;
	height: 20px;
	display: block;
}
.car-gallery__arrow:hover {
	background: #fff;
}
.car-gallery__arrow--prev {
	left: 12px;
}
.car-gallery__arrow--next {
	right: 12px;
}
.car-gallery__expand {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	width: 36px;
	height: 36px;
	padding: 0;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, 0.9);
	color: var(--color-text);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.car-gallery__expand svg {
	width: 18px;
	height: 18px;
}
.car-gallery__expand:hover {
	background: #fff;
}

/* ---------- Fullscreen lightbox ---------- */
body.has-lightbox-open {
	overflow: hidden;
}
.car-gallery-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(15, 23, 42, 0.95);
	display: none;
	align-items: center;
	justify-content: center;
}
.car-gallery-lightbox.is-open {
	display: flex;
}
.car-gallery-lightbox__image {
	max-width: 90vw;
	max-height: 90vh;
	object-fit: contain;
	cursor: grab;
	user-select: none;
	-webkit-user-drag: none;
}
.car-gallery-lightbox__image:active {
	cursor: grabbing;
}
.car-gallery-lightbox__close {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.car-gallery-lightbox__close svg {
	width: 22px;
	height: 22px;
}
.car-gallery-lightbox__close:hover {
	background: rgba(255, 255, 255, 0.3);
}
.car-gallery-lightbox__arrow {
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	width: 50px;
	height: 50px;
}
.car-gallery-lightbox__arrow:hover {
	background: rgba(255, 255, 255, 0.3);
}
.car-gallery-lightbox__arrow--prev {
	left: 24px;
}
.car-gallery-lightbox__arrow--next {
	right: 24px;
}
.car-gallery__main img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}
.car-gallery__thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.car-gallery__thumb {
	padding: 0;
	border: 2px solid transparent;
	border-radius: 0;
	overflow: hidden;
	cursor: pointer;
	background: none;
	width: 80px;
	height: 80px;
}
.car-gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.car-gallery__thumb.is-active {
	border-color: var(--card-accent, var(--color-primary));
}
.car-gallery--placeholder {
	background: var(--color-bg-alt);
	padding: 60px;
	text-align: center;
	color: var(--color-text-muted);
}

.single-car__description {
	margin-top: 32px;
	max-width: 720px;
}
.single-car__description h2 {
	font-family: var(--font-heading);
	font-size: 24px;
}
/*
 * Collapsed by default via max-height + a fade-out gradient at the
 * bottom, so it's visually obvious there's more text below. JS (see
 * main.js) checks whether the content actually overflows this height
 * before showing the "View More" button — short descriptions that
 * already fit never get an unnecessary button.
 */
.single-car__description-content {
	position: relative;
	max-height: 220px;
	overflow: hidden;
}
.single-car__description-content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 48px;
	background: linear-gradient(to bottom, rgba(247,246,243,0), var(--color-page-bg));
	pointer-events: none;
}
.single-car__description-content.is-expanded {
	max-height: none;
}
.single-car__description-content.is-expanded::after {
	display: none;
}
.single-car__description-toggle {
	display: none; /* JS reveals this only when the text actually overflows */
	align-items: center;
	gap: 6px;
	margin-top: 12px;
	background: none;
	border: none;
	padding: 0;
	color: var(--color-primary, #96690a);
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
}
.single-car__description-toggle.is-visible {
	display: inline-flex;
}
.single-car__description-toggle:hover {
	color: var(--color-primary-dark, #7a5408);
}

/* --- Right sidebar --- */
.single-car__quick-actions {
	display: flex;
	gap: 10px;
	margin-top: 16px;
}
.single-car__quick-btn {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	text-align: center;
}
.single-car__quick-btn--outline {
	background: transparent;
	border: 1px solid var(--color-border);
	color: var(--color-text);
}
.single-car__quick-btn--outline:hover {
	border-color: var(--color-text-muted);
	color: var(--color-text);
}
.single-car__top-row {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}
.car-card__status--static {
	margin-bottom: 0;
}
.single-car__stock {
	color: var(--color-text-muted);
	font-size: 13px;
}
.single-car__price-title-row {
	display: flex;
	align-items: baseline;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}
.single-car__price {
	color: var(--card-accent, var(--color-primary));
	font-family: var(--font-heading);
	font-size: 34px;
	font-weight: 700;
}
.single-car__title {
	margin: 0;
	font-size: 26px;
	font-family: var(--font-heading);
	font-weight: 600;
}

.single-car__contact-box {
	background: #191b22;
	color: #e2e8f0;
	padding: 24px;
	margin-bottom: 24px;
}
.single-car__contact-box h2 {
	margin: 0 0 6px;
	font-size: 20px;
	color: #fff;
	font-family: var(--font-heading);
}
.single-car__contact-box__subheading {
	color: #94a3b8;
	font-size: 13px;
	margin: 0 0 20px;
}
.single-car__contact-btn {
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	margin-bottom: 10px;
}
.single-car__contact-btn--outline {
	background: transparent;
	border: 1px solid rgba(255,255,255,0.2);
	color: #e2e8f0;
	margin-top: 14px;
	margin-bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px;
}
.single-car__contact-btn--outline:hover {
	border-color: rgba(255,255,255,0.4);
	color: #fff;
}

/* ---------- Contact Form 7 (Vehicle Inquiry) — dark card ---------- */
.single-car__cf7-wrapper {
	margin-top: 0;
}
.single-car__cf7-wrapper p {
	margin: 0 0 10px;
}
.single-car__cf7-wrapper label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #94a3b8;
	margin-bottom: 4px;
}
.single-car__cf7-wrapper input[type=text],
.single-car__cf7-wrapper input[type=email],
.single-car__cf7-wrapper input[type=tel],
.single-car__cf7-wrapper textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 7px 10px;
	border: 1px solid rgba(255,255,255,0.12);
	border-radius: 0;
	font-family: var(--font-base);
	font-size: 13px;
	background: #2a2d38;
	color: #f1f5f9;
}
.single-car__cf7-wrapper input::placeholder,
.single-car__cf7-wrapper textarea::placeholder {
	color: #64748b;
}
.single-car__cf7-wrapper input[readonly] {
	opacity: 0.75;
	cursor: default;
}
.single-car__cf7-wrapper textarea {
	height: 60px !important;
	resize: vertical;
}

/* Two-column pairs (First/Last Name, Email/Phone) — see the CF7 form
   markup, which wraps these fields in <div class="cf7-row"> containers. */
.single-car__cf7-wrapper .cf7-row {
	display: flex;
	gap: 12px;
}
.single-car__cf7-wrapper .cf7-row p {
	flex: 1;
	margin-bottom: 10px;
}
@media (max-width: 500px) {
	.single-car__cf7-wrapper .cf7-row {
		flex-direction: column;
		gap: 0;
	}
}

.single-car__cf7-wrapper .wpcf7-list-item {
	margin: 0;
}
.single-car__cf7-wrapper .wpcf7-acceptance label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	text-transform: none;
	font-weight: 400;
	font-size: 13px;
	color: #cbd5e1;
	letter-spacing: normal;
}
.single-car__cf7-wrapper .wpcf7-acceptance input[type=checkbox] {
	margin-top: 3px;
	accent-color: var(--card-accent, var(--color-primary));
}
.single-car__cf7-wrapper .single-car__cf7-privacy-note {
	font-size: 12px;
	color: #64748b;
	margin-bottom: 16px;
}

.single-car__cf7-wrapper input[type=submit],
.single-car__cf7-wrapper button.wpcf7-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 9px 20px;
	border: none;
	border-radius: 0;
	background: var(--card-accent, var(--color-primary));
	color: #fff;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: 13px;
	font-family: inherit;
	cursor: pointer;
}
.single-car__cf7-wrapper button.wpcf7-submit i {
	font-size: 14px;
}
.single-car__cf7-wrapper input[type=submit]:hover,
.single-car__cf7-wrapper button.wpcf7-submit:hover {
	background: var(--card-accent-dark, var(--color-primary-dark));
}
.single-car__cf7-wrapper .wpcf7-spinner {
	margin-left: 6px;
}
.single-car__cf7-wrapper .wpcf7-not-valid-tip {
	color: #f87171;
	font-size: 12px;
	margin-top: 4px;
}
.single-car__cf7-wrapper .wpcf7-response-output {
	margin-top: 12px;
	padding: 10px 12px;
	border-radius: 0;
	font-size: 13px;
	border-color: rgba(255,255,255,0.2) !important;
	color: #e2e8f0;
}

.single-car__specs h2 {
	font-size: 16px;
	margin: 0 0 8px;
}
.specs-list {
	border-top: 1px solid var(--color-border);
}
.specs-list__row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--color-border);
	font-size: 14px;
}
.specs-list__label {
	color: var(--color-text-muted);
}
.specs-list__value {
	font-weight: 600;
	text-align: right;
}

/* ---------- Related Listings carousel ---------- */
.single-car__related {
	margin-top: 56px;
	padding-top: 40px;
	border-top: 1px solid var(--color-border);
}
.single-car__related-heading {
	font-family: var(--font-heading);
	font-size: 28px;
	margin: 0 0 24px;
}
.related-carousel {
	position: relative;
}
.related-carousel__track {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: 4px;
	/* Hide the scrollbar visually — the arrow buttons are the primary
	   way to navigate, dragging/swiping still works underneath. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.related-carousel__track::-webkit-scrollbar {
	display: none;
}
.related-carousel__item {
	flex: 0 0 280px;
	scroll-snap-align: start;
}
@media (max-width: 500px) {
	.related-carousel__item {
		flex-basis: 240px;
	}
}
.related-carousel__arrow {
	position: absolute;
	top: 90px;
	z-index: 2;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--color-border);
	background: #fff;
	color: var(--color-text);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.related-carousel__arrow svg {
	width: 18px;
	height: 18px;
}
.related-carousel__arrow:hover {
	background: var(--color-bg-alt);
}
.related-carousel__arrow--prev {
	left: -20px;
}
.related-carousel__arrow--next {
	right: -20px;
}
@media (max-width: 700px) {
	.related-carousel__arrow {
		display: none; /* rely on touch swipe on small screens instead */
	}
}
.single-car__related-footer {
	text-align: right;
	margin-top: 24px;
}


/* =====================================================
   6. Site Header
   ===================================================== */
.site-header {
	position: relative;
	background: linear-gradient(90deg, #14161c 0%, #2a2018 100%);
	border-bottom: 1px solid rgba(255,255,255,0.08);
}
.site-header__inner {
	display: flex;
	align-items: center;
	gap: 28px;
	padding: 18px 20px;
}
.site-branding {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}
/**
 * Constrains the uploaded logo to a fixed height no matter what size
 * image was actually uploaded (WordPress's custom-logo feature allows
 * any dimensions since flex-width/flex-height are enabled) — width
 * scales proportionally via "width: auto", so the header never
 * stretches to fit an oversized logo file.
 */
.site-branding .custom-logo-link {
	display: flex;
	align-items: center;
}
.site-branding img {
	max-height: 44px;
	width: auto;
	display: block;
}
.site-branding__text-logo {
	display: flex;
	align-items: baseline;
	gap: 10px;
	white-space: nowrap;
}
.site-branding__name {
	font-family: var(--font-heading);
	font-size: 26px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: #fff;
}
.site-branding__tagline {
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 11px;
	color: #94a3b8;
}
.main-navigation {
	margin-left: 0;
}
.primary-menu {
	display: flex;
	gap: 28px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.primary-menu a {
	color: #e2e8f0;
	font-weight: 600;
	font-size: 14px;
}
.primary-menu a:hover {
	color: var(--color-primary, #d4af6a);
}
/* Chevron indicator for menu items that have a submenu (e.g. "More") */
.primary-menu .menu-item-has-children > a::after {
	content: "\f078"; /* Font Awesome chevron-down */
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-size: 10px;
	margin-left: 6px;
}
.primary-menu ul {
	background: #1a1c24;
	border: 1px solid rgba(255,255,255,0.08);
	padding: 8px 0;
	min-width: 180px;
}
.primary-menu ul a {
	display: block;
	padding: 8px 16px;
	font-size: 14px;
	white-space: nowrap;
}
.primary-menu ul a::after {
	content: none;
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-left: auto;
}
.site-header__phone {
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	font-size: 14px;
	color: #e2e8f0;
	white-space: nowrap;
}
.site-header__phone-icon {
	font-size: 14px;
	color: var(--color-primary, #d4af6a);
}
.site-header__button {
	border: 1px solid rgba(255,255,255,0.3);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 10px 18px;
	white-space: nowrap;
}
.site-header__button:hover {
	background: #fff;
	color: #14161c;
}

/**
 * Mobile menu toggle button — markup/classes match what Underscores'
 * own js/navigation.js expects (button.menu-toggle inside
 * nav.main-navigation, "toggled" class added to the nav on click).
 */
.menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	background: none;
	border: 1px solid rgba(255,255,255,0.3);
	color: #fff;
	border-radius: 0;
	padding: 0;
	font-size: 16px;
	cursor: pointer;
}

@media (max-width: 900px) {
	.menu-toggle {
		display: flex;
	}
	/*
	 * The <nav> no longer forces itself onto its own full-width row —
	 * it now stays a normal, compact flex item (sized to just its
	 * toggle button) so the button can sit in the SAME row as the
	 * phone/button, pushed to the right edge via flex "order" below.
	 * The dropdown menu itself still needs to span the FULL header
	 * width when open — since nav's own box is now small, the dropdown
	 * uses position:absolute anchored to .site-header (which has
	 * position:relative) instead of to nav, so it isn't constrained to
	 * nav's compact width.
	 */
	.site-header__inner {
		flex-wrap: nowrap;
	}
	.main-navigation {
		position: static;
		width: auto;
		flex-shrink: 0;
		order: 3;
	}
	.site-header__actions {
		order: 2;
		margin-left: auto;
		gap: 12px;
	}
	.main-navigation .primary-menu {
		display: none;
	}
	.main-navigation.toggled .primary-menu {
		display: flex;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: #14161c;
		padding: 8px 20px 16px;
		box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
		z-index: 999;
	}
	.primary-menu {
		flex-direction: column;
		gap: 0;
	}
	.primary-menu li {
		border-top: 1px solid rgba(255,255,255,0.08);
	}
	.primary-menu a {
		display: block;
		padding: 12px 0;
	}
	.primary-menu ul {
		position: static;
		border: none;
		background: rgba(255,255,255,0.03);
		padding-left: 16px;
	}
}

/* =====================================================
   7. Site Footer
   ===================================================== */
.site-footer {
	background: #14161c;
	color: #94a3b8;
	padding: 56px 0 24px;
	margin-top: 48px;
	border-top: 2px solid var(--color-primary, #96690a);
}
.site-footer a {
	color: #94a3b8;
}
.site-footer a:hover {
	color: #fff;
}
.site-footer__widgets {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 24px;
	padding-bottom: 32px;
	margin-bottom: 32px;
	border-bottom: 1px solid rgba(255,255,255,0.08);
}
.site-footer__columns {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: 32px;
	margin-bottom: 40px;
}
@media (max-width: 800px) {
	.site-footer__columns {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 500px) {
	.site-footer__columns {
		grid-template-columns: 1fr;
	}
}
.site-footer__col-title {
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 12px;
	font-weight: 700;
	color: #64748b;
	margin: 0 0 18px;
}
/* Constrains the uploaded logo in the footer the same way as the
   header — no matter what size image was actually uploaded, it never
   blows up the footer's layout. */
.site-footer__col--brand img {
	max-height: 48px;
	width: auto;
	display: block;
	margin-bottom: 8px;
}
.site-footer__name {
	font-family: var(--font-heading);
	font-size: 26px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: #fff;
	display: block;
}
.site-footer__tagline {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 11px;
	color: #64748b;
	margin: 6px 0 0;
}
.site-footer__divider {
	display: block;
	width: 32px;
	height: 2px;
	background: var(--color-primary, #96690a);
	margin: 16px 0;
}
.site-footer__description {
	font-size: 14px;
	line-height: 1.6;
	margin: 0;
	max-width: 320px;
}
.site-footer__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.site-footer__nav li {
	margin-bottom: 12px;
}
.site-footer__nav a {
	font-size: 14px;
}
.site-footer__contact-list {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
}
.site-footer__contact-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 12px;
	font-size: 14px;
}
.site-footer__contact-list i {
	color: var(--color-primary, #96690a);
	width: 14px;
	font-size: 16px;
	margin-top: 3px;
}
.site-footer__social {
	display: flex;
	gap: 12px;
}
.site-footer__social a {
	width: 32px;
	height: 32px;
	border: 1px solid rgba(255,255,255,0.15);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
}
.site-footer__social a:hover {
	border-color: var(--color-primary, #96690a);
	color: var(--color-primary, #96690a);
}
.site-footer__hours-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.site-footer__hours-list li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
	font-size: 14px;
}
.site-footer__hours-value {
	color: #e2e8f0;
	font-weight: 600;
}
.site-footer__bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	padding-top: 20px;
	border-top: 1px solid rgba(255,255,255,0.08);
}
.site-footer__copyright,
.site-footer__note {
	font-size: 13px;
	color: #64748b;
	margin: 0;
}
.site-footer__bottom-right {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}
.site-footer__legal-links {
	display: flex;
	gap: 16px;
}
.site-footer__legal-links a {
	font-size: 13px;
	color: #94a3b8;
}
.site-footer__legal-links a:hover {
	color: #fff;
}

/* =====================================================
   8. Home Page Sections
   ===================================================== */
.home-section-heading {
	font-family: var(--font-heading);
	font-size: 32px;
	text-align: center;
	margin: 0 0 32px;
}
.home-section-heading--left {
	text-align: left;
	margin: 4px 0 0;
}
.home-section-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 12px;
	font-weight: 700;
	color: var(--card-accent, #b8860b);
	text-align: center;
	margin: 0 0 10px;
}
.home-section-eyebrow--on-dark {
	color: #d4af6a;
}

/* --- Hero --- */
.home-hero {
	position: relative;
	background-color: #1e293b;
	background-size: cover;
	background-position: center;
	padding: 120px 0;
	color: #fff;
	text-align: center;
}
.home-hero__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.7);
}
.home-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 720px;
	margin: 0 auto;
}
.home-hero__eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.15em;
	font-size: 12px;
	font-weight: 700;
	color: #d4af6a;
	margin: 0 0 12px;
}
.home-hero__heading {
	font-family: var(--font-heading);
	font-size: 52px;
	line-height: 1.1;
	margin: 0 0 16px;
}
.home-hero__subheading {
	font-size: 18px;
	margin: 0 0 28px;
	color: #e2e8f0;
}
.home-hero__actions {
	display: flex;
	justify-content: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 28px;
}
.home-hero__cta {
	background: var(--card-accent, var(--color-primary));
}
.home-hero__cta--outline {
	background: transparent;
	border: 1px solid rgba(255,255,255,0.5);
}
.home-hero__cta--outline:hover {
	background: rgba(255,255,255,0.1);
	color: #fff;
}
.home-hero__features {
	list-style: none;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px 20px;
	margin: 0;
	padding: 0;
	font-size: 13px;
	color: #cbd5e1;
}
.home-hero__features li {
	position: relative;
	padding-left: 16px;
}
.home-hero__features li::before {
	content: "•";
	position: absolute;
	left: 0;
	color: #d4af6a;
}

/* --- Featured Listings --- */
.home-featured {
	padding: 60px 0;
}
.home-featured__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 28px;
	flex-wrap: wrap;
}
.home-featured__view-all {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--card-accent, var(--color-primary));
	white-space: nowrap;
}

/* --- Features / Why Choose Us --- */
.home-features {
	background: #14161c;
	color: #e2e8f0;
	padding: 70px 0;
}
.home-features__intro {
	text-align: center;
	margin-bottom: 48px;
}
.home-features__heading {
	font-family: var(--font-heading);
	font-size: 34px;
	color: #fff;
	margin: 0;
}
.home-features__grid {
	display: grid;
	gap: 32px;
	text-align: center;
}
.home-features__grid--cols-3 {
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.home-features__grid--cols-4 {
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.home-features__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: 1px solid rgba(212,175,106,0.4);
	color: #d4af6a;
	font-size: 20px;
	margin-bottom: 16px;
}
.home-features__item-title {
	font-family: var(--font-heading);
	font-size: 18px;
	color: #fff;
	margin: 0 0 8px;
}
.home-features__item-text {
	font-size: 14px;
	color: #94a3b8;
	margin: 0;
}

/* --- Process / How It Works --- */
.home-process {
	padding: 70px 0;
}
.home-process__intro {
	text-align: center;
	max-width: 600px;
	margin: 0 auto 48px;
}
.home-process__subheading {
	color: var(--color-text-muted);
	margin: 8px 0 0;
}
.home-process__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 32px;
	margin-bottom: 32px;
}
.home-process__step {
	position: relative;
}
.home-process__number {
	display: block;
	font-family: var(--font-heading);
	font-size: 40px;
	color: var(--color-border);
	font-weight: 700;
	margin-bottom: 8px;
}
.home-process__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--color-bg-alt);
	color: var(--card-accent, var(--color-primary));
	font-size: 15px;
	margin-bottom: 14px;
}
.home-process__step-title {
	font-family: var(--font-heading);
	font-size: 18px;
	margin: 0 0 6px;
}
.home-process__step-text {
	font-size: 14px;
	color: var(--color-text-muted);
	margin: 0;
}
.home-process__footer {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}
.home-process__phone-note {
	font-size: 14px;
	color: var(--color-text-muted);
}
.home-process__phone-note a {
	color: var(--color-text);
	font-weight: 600;
}

/* --- Testimonials --- */
.home-testimonials {
	background: var(--color-bg-alt);
	padding: 70px 0;
}
.home-testimonials__intro {
	text-align: center;
	max-width: 600px;
	margin: 0 auto 40px;
}
.home-testimonials__subheading {
	color: var(--color-text-muted);
	margin: 8px 0 0;
}
.home-testimonials__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 24px;
}
.home-testimonials__card {
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	overflow: hidden;
}
.home-testimonials__photo {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}
.home-testimonials__body {
	padding: 20px;
}
.home-testimonials__stars {
	color: var(--card-accent, #b8860b);
	font-size: 13px;
	margin-bottom: 10px;
}
.home-testimonials__quote {
	font-style: italic;
	color: var(--color-text);
	margin: 0 0 14px;
}
.home-testimonials__author strong {
	display: block;
	font-size: 14px;
}
.home-testimonials__author span {
	font-size: 13px;
	color: var(--color-text-muted);
}

/* --- CTA --- */
.home-cta {
	background: #14161c;
	color: #e2e8f0;
	padding: 70px 0;
	text-align: center;
}
.home-cta__inner {
	max-width: 620px;
	margin: 0 auto;
}
.home-cta__heading {
	font-family: var(--font-heading);
	font-size: 34px;
	color: #fff;
	margin: 0 0 12px;
}
.home-cta__text {
	color: #94a3b8;
	margin: 0 0 28px;
}
.home-cta__actions {
	display: flex;
	justify-content: center;
	gap: 14px;
	flex-wrap: wrap;
}
.home-cta__button--outline {
	background: transparent;
	border: 1px solid rgba(255,255,255,0.3);
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.home-cta__button--outline:hover {
	background: rgba(255,255,255,0.1);
	color: #fff;
}

/* --- Contact + Inquiry Form --- */
.home-contact {
	padding: 70px 0;
}
.home-contact__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: start;
}
@media (max-width: 800px) {
	.home-contact__grid {
		grid-template-columns: 1fr;
	}
}
.home-contact__info .home-section-eyebrow {
	text-align: left;
}
.home-contact__heading {
	font-family: var(--font-heading);
	font-size: 34px;
	margin: 0 0 12px;
}
.home-contact__subheading {
	color: var(--color-text-muted);
	margin: 0 0 8px;
}
.home-contact__text {
	color: var(--color-text-muted);
	margin: 0 0 20px;
}
.home-contact__bullets {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
}
.home-contact__bullets li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 10px;
	font-size: 14px;
}
.home-contact__bullets i {
	color: var(--card-accent, var(--color-primary));
	margin-top: 3px;
}
.home-contact__direct {
	border-top: 1px solid var(--color-border);
	padding-top: 20px;
}
.home-contact__direct-label {
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: 0.05em;
	color: var(--color-text-muted);
	margin: 0 0 10px;
}
.home-contact__direct p {
	margin: 0 0 6px;
}
.home-contact__direct i {
	width: 16px;
	color: var(--card-accent, var(--color-primary));
}
.home-contact__form-box {
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	padding: 28px;
}
.home-contact__form-box h3 {
	margin: 0 0 18px;
	font-family: var(--font-heading);
	font-size: 22px;
}
/* The homepage contact form reuses the CF7 field styling from
   single-car.php, but light instead of dark to match this section. */
.home-contact__cf7-wrapper input[type=text],
.home-contact__cf7-wrapper input[type=email],
.home-contact__cf7-wrapper input[type=tel],
.home-contact__cf7-wrapper textarea {
	background: #fff;
	border: 1px solid var(--color-border);
	color: var(--color-text);
}
.home-contact__cf7-wrapper label {
	color: var(--color-text-muted);
}
.home-contact__cf7-wrapper .wpcf7-acceptance label {
	color: var(--color-text);
}

/* =====================================================
   9. Search Filters (Listing archive)
   ===================================================== */
.search-filters {
	background: #faf9f6;
	border: 1px solid var(--color-border);
	border-radius: 16px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.04);
	padding: 28px;
	margin-bottom: 32px;
}
.search-filters__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 20px;
}
.search-filters__field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.search-filters__field label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-text-muted);
}

.search-filters__field select,
.search-filters__field input[type=number] {
	height: 44px;
	width: 100%;
	padding: 0 14px;
	border: 1px solid #d8dbe0;
	border-radius: 10px;
	background: #f3f4f7;
	font-size: 14px;
	color: var(--color-text);
	transition: border-color 0.15s ease, background 0.15s ease;
}
.search-filters__field select:focus,
.search-filters__field input[type=number]:focus {
	outline: none;
	border-color: var(--color-primary, #96690a);
	background: #fff;
}
/* Custom dropdown arrow (replaces the browser default, which looks
   inconsistent across OSes) drawn as an inline SVG chevron. */
.search-filters__field select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 16px;
	padding-right: 34px;
	cursor: pointer;
}
.search-filters__range {
	display: flex;
	align-items: center;
	gap: 8px;
}
.search-filters__range input {
	flex: 1;
	min-width: 0;
}
.search-filters__plain-number {
	height: 44px;
	padding: 0 12px;
	border: 1px solid #d8dbe0;
	border-radius: 10px;
	background: #f3f4f7;
	font-size: 14px;
	color: var(--color-text);
}
.search-filters__plain-number:focus {
	outline: none;
	border-color: var(--color-primary, #96690a);
	background: #fff;
}
.search-filters__range span {
	color: var(--color-text-muted);
	flex-shrink: 0;
}

/* --- Advanced Filters (collapsible) --- */
.search-filters__advanced {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--color-border);
}
/* Only actually collapses once JS confirms it can toggle it back open
   (see main.js) — with JS disabled, .js-collapsible never gets added
   and the advanced fields just stay visible, so filtering still works. */
.search-filters__advanced.js-collapsible {
	display: none;
}
.search-filters__advanced.js-collapsible.is-open {
	display: block;
}

.search-filters__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--color-border);
	flex-wrap: wrap;
}
.search-filters__actions-left {
	display: flex;
	align-items: center;
	gap: 20px;
}
.search-filters__advanced-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	background: none;
	border: none;
	color: var(--color-primary, #96690a);
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
	padding: 0;
}
.search-filters__advanced-toggle:hover {
	color: var(--color-primary-dark, #7a5408);
}
.search-filters__advanced-toggle.is-active i {
	transform: rotate(180deg);
}
.search-filters__advanced-toggle i {
	transition: transform 0.15s ease;
}
.search-filters__reset {
	color: var(--color-text-muted);
	font-size: 14px;
}
.search-filters__reset:hover {
	color: var(--color-text);
}
.search-filters__submit {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--color-primary, #96690a);
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 13px 30px;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s ease;
}
.search-filters__submit:hover {
	background: var(--color-primary-dark, #7a5408);
	color: #fff;
}

/* =====================================================
   10. Responsive Refinements
   -----------------------------------------------------
   Most components already adapt on their own — CSS Grid with
   auto-fill/auto-fit (car-grid, home-features__grid,
   home-process__grid, home-testimonials__grid, search-filters__grid)
   reflows to fewer columns automatically as the viewport narrows,
   without needing explicit breakpoints. This section covers the
   things that DON'T adapt on their own: typography that's sized for
   desktop, generous section padding that feels excessive on a phone,
   and a couple of header/spec-list layout tweaks.
   ===================================================== */

/* ---------- Tablet (~780px): tighten section padding ---------- */
@media (max-width: 780px) {
	.home-hero {
		padding: 80px 0;
	}
	.home-hero__heading {
		font-size: 38px;
	}
	.home-hero__subheading {
		font-size: 16px;
	}
	.home-features,
	.home-process,
	.home-testimonials,
	.home-cta,
	.home-contact,
	.home-featured {
		padding-top: 48px;
		padding-bottom: 48px;
	}
	.home-features__heading,
	.home-cta__heading,
	.home-contact__heading {
		font-size: 28px;
	}
	.home-section-heading {
		font-size: 26px;
	}
	.single-car__price {
		font-size: 28px;
	}
	.single-car__title {
		font-size: 22px;
	}
	.car-card__price-overlay {
		font-size: 24px;
	}
}

/* ---------- Phone (~600px) ---------- */
@media (max-width: 600px) {
	:root {
		--spacing: 16px;
	}
	.site-main {
		padding: 24px 0 36px;
	}
	.home-hero {
		padding: 56px 0;
	}
	.home-hero__heading {
		font-size: 30px;
	}
	.home-hero__eyebrow {
		font-size: 11px;
	}
	.search-filters {
		padding: 18px;
	}
	.search-filters__grid {
		grid-template-columns: 1fr 1fr;
	}
	.search-filters__actions {
		flex-direction: column;
		align-items: stretch;
	}
	.search-filters__actions-left {
		justify-content: space-between;
	}
	.search-filters__submit {
		justify-content: center;
	}
	.specs-list__row {
		flex-wrap: wrap;
		gap: 2px;
	}
	.specs-list__value {
		text-align: left;
	}
	.single-car__contact-box {
		padding: 18px;
	}
	.single-car__cf7-wrapper .cf7-row {
		flex-direction: column;
		gap: 0;
	}
	.site-footer {
		padding: 40px 0 20px;
	}
	.site-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}
	.single-car__related-heading {
		font-size: 22px;
	}
	.single-car__related-footer {
		text-align: center;
	}
}

/* ---------- Small phone (~420px): header needs the most help here,
   since logo + phone number + button all compete for very little
   width. Dropping the phone number's text (keeping just the icon)
   and shrinking the button are enough to keep everything on one or
   two tidy rows instead of visually colliding. ---------- */
@media (max-width: 420px) {
	.site-header__inner {
		gap: 12px;
		padding: 14px 16px;
	}
	.site-branding__name {
		font-size: 20px;
	}
	.site-branding__tagline {
		display: none;
	}
	.site-header__phone span {
		display: none;
	}
	.site-header__button {
		display: none;
	}
	.home-hero__heading {
		font-size: 26px;
	}
	.home-hero__actions {
		flex-direction: column;
		align-items: stretch;
	}
	.home-hero__cta {
		text-align: center;
	}
	.car-card__actions {
		flex-direction: column;
	}
	.search-filters__grid {
		grid-template-columns: 1fr;
	}
}






/* =====================================================
   11. Contact Page (page-templates/template-contact.php)
   ===================================================== */
.contact-hero {
	padding: 80px 0 60px;
	text-align: center;
}
.contact-hero__eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.2em;
	font-size: 12px;
	color: var(--color-text-muted);
	margin: 0 0 16px;
}
.contact-hero__heading {
	font-family: var(--font-heading);
	font-size: 56px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin: 0;
	line-height: 1.15;
}
.contact-hero__heading-italic {
	display: block;
	font-style: italic;
	text-transform: none;
	font-size: 60px;
	letter-spacing: normal;
}

.contact-main {
	padding-bottom: 60px;
}
.contact-main__grid {
	display: grid;
	grid-template-columns: 1fr 1.6fr;
	gap: 48px;
	align-items: start;
}
@media (max-width: 800px) {
	.contact-main__grid {
		grid-template-columns: 1fr;
	}
}

.contact-info__label {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 12px;
	font-weight: 700;
	color: var(--color-text-muted);
	margin: 28px 0 12px;
}
.contact-info__label:first-child {
	margin-top: 0;
}
.contact-info__address {
	font-style: normal;
	line-height: 1.6;
	margin: 0;
}
.contact-info__hours {
	list-style: none;
	margin: 0;
	padding: 0;
}
.contact-info__hours li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--color-border);
	font-size: 14px;
}
.contact-info__direct {
	margin: 0 0 8px;
	font-weight: 700;
}
.contact-info__direct a {
	color: var(--color-text);
}

.contact-form-box {
	background: #faf9f6;
	border: 1px solid var(--color-border);
	padding: 40px;
}
@media (max-width: 500px) {
	.contact-form-box {
		padding: 24px;
	}
}
.contact-form-box__heading {
	font-family: var(--font-heading);
	font-size: 28px;
	margin: 0 0 24px;
}
/* Reuses the same light CF7 field styling as the homepage Contact
   section (.home-contact__cf7-wrapper) — light inputs, dark text —
   and swaps the accent color for the black "Send Inquiry" button
   used on this page specifically. */
.contact-form-box__cf7 input[type=submit],
.contact-form-box__cf7 button.wpcf7-submit {
	background: #1a1a1a;
	border-radius: 999px;
	text-transform: uppercase;
}
.contact-form-box__cf7 input[type=submit]:hover,
.contact-form-box__cf7 button.wpcf7-submit:hover {
	background: #333;
}

.contact-map {
	padding-bottom: 80px;
}
.contact-map__embed {
	position: relative;
	aspect-ratio: 21 / 9;
	overflow: hidden;
	filter: grayscale(0.3) contrast(1.05); /* subtle tint so the map fits the site's muted palette instead of looking like a raw Google widget */
}
.contact-map__embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.contact-map__external-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-text-muted);
}
.contact-map__external-link:hover {
	color: var(--color-text);
}

.contact-page__extra-content {
	padding-bottom: 60px;
	max-width: 800px;
}

/* =====================================================
   12. About Page (page-templates/template-about.php)
   ===================================================== */

/* ---------- Hero ---------- */
.about-hero {
	padding: 60px 0 80px;
}
.about-hero__grid {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 48px;
	align-items: center;
}
@media (max-width: 800px) {
	.about-hero__grid {
		grid-template-columns: 1fr;
	}
}
.about-hero__eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.15em;
	font-size: 12px;
	color: var(--color-text-muted);
	margin: 0 0 16px;
}
.about-hero__heading {
	font-family: var(--font-heading);
	font-size: 52px;
	line-height: 1.1;
	text-transform: uppercase;
	margin: 0 0 24px;
}
.about-hero__heading-italic {
	display: block;
	font-style: italic;
	text-transform: none;
}
.about-hero__text {
	font-size: 16px;
	color: var(--color-text-muted);
	max-width: 460px;
	margin: 0;
}
.about-hero__media {
	position: relative;
}
.about-hero__image {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.about-hero__stat {
	position: absolute;
	left: -24px;
	bottom: -24px;
	background: var(--color-primary, #96690a);
	color: #fff;
	padding: 24px 28px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 160px;
}
@media (max-width: 500px) {
	.about-hero__stat {
		left: 0;
		bottom: -20px;
		padding: 16px 20px;
	}
}
.about-hero__stat-number {
	font-family: var(--font-heading);
	font-size: 32px;
	font-weight: 700;
	line-height: 1;
}
.about-hero__stat-label {
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 11px;
}

/* ---------- Philosophy (dark) ---------- */
.about-philosophy {
	background: #14161c;
	color: #cbd5e1;
	padding: 70px 0;
}
.about-philosophy__grid {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 40px;
}
@media (max-width: 700px) {
	.about-philosophy__grid {
		grid-template-columns: 1fr;
	}
}
.about-philosophy__eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 20px;
	font-family: var(--font-heading);
	font-style: italic;
	color: var(--color-primary, #d4af6a);
	margin: 0;
}
.about-philosophy__heading {
	font-size: 22px;
	color: #fff;
	line-height: 1.5;
	margin: 0 0 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid rgba(255,255,255,0.15);
}
.about-philosophy__text {
	font-size: 15px;
	color: #94a3b8;
	line-height: 1.7;
	margin: 0;
}

/* ---------- Showroom gallery ---------- */
.about-showroom {
	padding: 70px 0;
}
.about-showroom__intro {
	text-align: center;
	margin-bottom: 36px;
}
.about-showroom__grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr;
	gap: 20px;
}
@media (max-width: 700px) {
	.about-showroom__grid {
		grid-template-columns: 1fr 1fr;
	}
	.about-showroom__photo:first-child {
		grid-column: 1 / -1;
	}
}
@media (max-width: 460px) {
	.about-showroom__grid {
		grid-template-columns: 1fr;
	}
	.about-showroom__photo:first-child {
		grid-column: auto;
	}
}
.about-showroom__photo {
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* =====================================================
   13. Policy Page (page-templates/template-policy.php)
   ===================================================== */
.policy-hero {
	padding: 60px 0 50px;
	text-align: center;
}
.policy-hero__eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.2em;
	font-size: 12px;
	color: var(--color-text-muted);
	margin: 0 0 16px;
}
.policy-hero__heading {
	font-family: var(--font-heading);
	font-size: 48px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	margin: 0;
}
.policy-hero__heading-italic {
	font-style: italic;
	text-transform: none;
}
.policy-hero__divider {
	display: inline-block;
	width: 60px;
	height: 2px;
	background: var(--color-primary, #96690a);
	margin-top: 24px;
}

.policy-page__body {
	max-width: 760px;
	padding-bottom: 60px;
}
.policy-page__intro {
	font-style: italic;
	font-size: 18px;
	line-height: 1.7;
	color: var(--color-text);
	margin: 0 0 48px;
}

.policy-section {
	margin-bottom: 44px;
}
.policy-section__heading {
	font-family: var(--font-heading);
	font-size: 26px;
	margin: 0 0 16px;
}
.policy-section__text p {
	color: var(--color-text-muted);
	line-height: 1.7;
	margin: 0 0 14px;
}
.policy-section__list {
	margin: 16px 0 0;
	padding-left: 20px;
	color: var(--color-text-muted);
}
.policy-section__list li {
	margin-bottom: 8px;
	line-height: 1.6;
}

.policy-cards {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 20px;
}
.policy-cards__item {
	background: #f3efe9;
	border: 1px solid var(--color-border);
	border-radius: 10px;
	padding: 20px 24px;
}
.policy-cards__item-title {
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 0 0 8px;
}
.policy-cards__item-text {
	color: var(--color-text-muted);
	font-size: 14px;
	line-height: 1.6;
	margin: 0;
}

.policy-cta {
	background: #14161c;
	color: #cbd5e1;
	text-align: center;
	padding: 48px 32px;
	border-radius: 10px;
	margin-top: 40px;
}
.policy-cta__heading {
	font-family: var(--font-heading);
	font-size: 24px;
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 6px;
	margin: 0 0 12px;
}
.policy-cta__text {
	margin: 0 0 24px;
	color: #94a3b8;
}
.policy-cta__button {
	background: var(--color-primary, #96690a);
	border-radius: 999px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 12px 28px;
}
.policy-cta__button:hover {
	background: var(--color-primary-dark, #7a5408);
}

/* =====================================================
   14. Delivery Page (page-templates/template-delivery.php)
   ===================================================== */
.delivery-hero {
	padding: 60px 0 50px;
	text-align: center;
}
.delivery-hero__heading {
	font-family: var(--font-heading);
	font-size: 52px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	margin: 16px 0 24px;
}
.delivery-hero__heading-italic {
	font-style: italic;
	text-transform: none;
}
.delivery-hero__text {
	max-width: 620px;
	margin: 0 auto;
	color: var(--color-text-muted);
	font-size: 17px;
	line-height: 1.7;
}

.delivery-features {
	padding-bottom: 70px;
}
.delivery-features__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: start;
}
@media (max-width: 800px) {
	.delivery-features__grid {
		grid-template-columns: 1fr;
	}
}
.delivery-features__image {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.delivery-features__list {
	display: flex;
	flex-direction: column;
	gap: 32px;
}
.delivery-feature {
	display: flex;
	gap: 20px;
}
.delivery-feature__icon {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #f3efe9;
	color: var(--color-primary, #96690a);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 17px;
}
.delivery-feature__title {
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin: 0 0 8px;
}
.delivery-feature__text {
	color: var(--color-text-muted);
	font-size: 14px;
	line-height: 1.7;
	margin: 0;
}

/* Reuses .home-process (already built for the homepage) — this just
   adds a light background instead of the default page background, to
   set the section apart visually like the reference. */
.delivery-process {
	background: var(--color-bg-alt);
}

.delivery-cta {
	padding: 70px 0;
	text-align: center;
}
.delivery-cta__heading {
	font-family: var(--font-heading);
	font-size: 32px;
	margin: 0 0 28px;
}
.delivery-cta__actions {
	display: flex;
	justify-content: center;
	gap: 14px;
	flex-wrap: wrap;
}
.delivery-cta__button {
	background: #1a1a1a;
	border-radius: 999px;
	padding: 13px 30px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: 13px;
}
.delivery-cta__button:hover {
	background: #333;
	color: #fff;
}
.delivery-cta__button--outline {
	background: transparent;
	border: 1px solid var(--color-border);
	color: var(--color-text);
}
.delivery-cta__button--outline:hover {
	border-color: var(--color-text-muted);
	background: transparent;
	color: var(--color-text);
}

/* =====================================================
   15. Legal Page (page-templates/template-legal.php)
   -----------------------------------------------------
   Styles whatever comes out of the WordPress block editor (headings,
   paragraphs, lists) for long-form text like Privacy Policy and
   Terms of Service — no custom fields needed, just type/paste
   content into the page as usual.
   ===================================================== */
.legal-page__inner {
	max-width: 760px;
	padding-top: 20px;
	padding-bottom: 70px;
}
.legal-page__title {
	font-family: var(--font-heading);
	font-size: 42px;
	margin: 0 0 32px;
}
.legal-page__content {
	color: var(--color-text-muted);
	font-size: 15px;
	line-height: 1.8;
}
.legal-page__content h2 {
	font-family: var(--font-heading);
	font-size: 26px;
	color: var(--color-text);
	margin: 40px 0 14px;
}
.legal-page__content h2:first-child {
	margin-top: 0;
}
.legal-page__content h3 {
	font-size: 18px;
	color: var(--color-text);
	margin: 28px 0 10px;
}
.legal-page__content p {
	margin: 0 0 16px;
}
.legal-page__content ul,
.legal-page__content ol {
	margin: 0 0 16px;
	padding-left: 22px;
}
.legal-page__content li {
	margin-bottom: 6px;
}
.legal-page__content a {
	text-decoration: underline;
}
.legal-page__content strong {
	color: var(--color-text);
}

/* =====================================================
   16. 404 Page (404.php)
   ===================================================== */
.error-404__inner {
	text-align: center;
	padding: 70px 0 80px;
	max-width: 700px;
}
.error-404__heading-wrap {
	position: relative;
	margin: 4px 0 32px;
}
.error-404__big-number {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -55%);
	font-family: var(--font-heading);
	font-size: 220px;
	font-weight: 700;
	color: var(--color-border);
	opacity: 0.6;
	line-height: 1;
	z-index: 0;
	pointer-events: none;
	white-space: nowrap;
}
@media (max-width: 600px) {
	.error-404__big-number {
		font-size: 130px;
	}
}
.error-404__heading {
	position: relative;
	z-index: 1;
	font-family: var(--font-heading);
	font-size: 46px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	margin: 0;
}
@media (max-width: 600px) {
	.error-404__heading {
		font-size: 32px;
	}
}
.error-404__heading-italic {
	font-style: italic;
	text-transform: none;
}
.error-404__media {
	margin: 0 auto 32px;
	max-width: 580px;
}
.error-404__image {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	filter: grayscale(1);
}
.error-404__text {
	color: var(--color-text-muted);
	font-size: 16px;
	line-height: 1.7;
	max-width: 480px;
	margin: 0 auto 36px;
}
.error-404__actions {
	display: flex;
	justify-content: center;
	gap: 14px;
	flex-wrap: wrap;
}