/**
 * 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: #1a3d1f;
	--color-primary-dark: #122a15;
	--color-accent-mint: #e7f0e2;
	--color-text: #16211a;
	--color-text-muted: #5b6b5e;
	--color-border: #dfe6da;
	--color-bg: #ffffff;
	--color-bg-alt: #f4f7f2;
	--color-page-bg: #ffffff;

	--font-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-heading: "Anton", "Archivo Black", Impact, sans-serif;

	--container-width: 1200px;
	--radius: 16px;
	--radius-btn: 999px;
	--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)
   ===================================================== */

/* Equipment card (used in archive grid, homepage Featured Listings,
   and the Related Listings carousel) — matches the "IronPioneer"
   Current Inventory reference: whole card is one link, white rounded
   card, rounded 4:5 photo, a small "YEAR • MILEAGE" eyebrow line,
   title, price, then a footer row with location + a "Details" link.
   Uses the site-wide --ip-* IronPioneer variables (see the palette
   defined further down in this file) so it automatically stays in
   sync with the rest of the green re-skin. */
.equipment-card {
	display: block;
	height: 100%;
}
.equipment-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border: 1px solid var(--ip-slate-border, #e2e8f0);
	border-radius: 24px;
	padding: 24px;
	/* transition + :hover both live on THIS element (not split
	   parent/child) — matches the reference exactly and avoids the
	   slightly rougher motion you get from triggering a transform on
	   a child via a parent :hover selector. */
	transition: transform 0.3s ease, border-color 0.3s ease;
	will-change: transform;
}
.equipment-card__link:hover {
	transform: translateY(-5px);
	/* Border hidden on hover — no box-shadow either (a big soft
	   shadow reads as a ghost second card). The lift alone is enough
	   to read as "hovered". */
	border-color: transparent;
}
.equipment-card__image-link {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	border-radius: 16px;
	overflow: hidden;
	background: var(--ip-slate-light, #f1f5f9);
	margin-bottom: 24px;
}
.equipment-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}
.equipment-card__link:hover .equipment-card__image {
	transform: scale(1.1);
}
.equipment-card__image--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-text-muted);
	font-size: 14px;
}
.equipment-card__badge {
	position: absolute;
	top: 16px;
	left: 16px;
	background: var(--ip-leaf, #2d5a27);
	color: #fff;
	font-family: var(--ip-font);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 4px 12px;
	border-radius: 999px;
}
.equipment-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
}
.equipment-card__eyebrow {
	margin: 0 0 8px;
	font-family: var(--ip-font);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ip-leaf, #2d5a27);
}
.equipment-card__title {
	margin: 0 0 8px;
	font-family: var(--ip-font);
	text-transform: uppercase;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.15;
	color: var(--ip-forest, #1a472a);
	transition: color 0.2s ease;
}
.equipment-card__link:hover .equipment-card__title {
	color: var(--ip-leaf, #2d5a27);
}
.equipment-card__price {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	color: var(--ip-forest, #1a472a);
}
.equipment-card__footer {
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid var(--ip-slate-border, #e2e8f0);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.equipment-card__location {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 14px;
	font-weight: 500;
	color: var(--ip-slate-text, #475569);
	min-width: 0;
}
.equipment-card__location-icon {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}
.equipment-card__details {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
	font-family: var(--ip-font);
	text-transform: uppercase;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.03em;
	color: var(--ip-leaf, #2d5a27);
}
.equipment-card__details-icon {
	width: 14px;
	height: 14px;
}

/* Buttons (used elsewhere, e.g. single-equipment.php) */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 28px;
	border-radius: var(--radius-btn);
	background: var(--color-primary);
	color: #fff;
	border: none;
	cursor: pointer;
	font-weight: 600;
}
.btn:hover {
	background: var(--color-primary-dark);
	color: #fff;
}

/* Outline variant — transparent bg, dark border/text (e.g. hero "Learn Our Legacy") */
.btn--outline {
	background: transparent;
	color: var(--color-text);
	border: 1px solid var(--color-text);
}
.btn--outline:hover {
	background: var(--color-text);
	color: #fff;
}

/* Light variants — for use on dark backgrounds like the CTA block */
.btn--light {
	background: #fff;
	color: var(--color-primary);
}
.btn--light:hover {
	background: var(--color-accent-mint);
	color: var(--color-primary);
}
.btn--outline-light {
	background: transparent;
	color: #fff;
	border: 1px solid #fff;
}
.btn--outline-light:hover {
	background: #fff;
	color: var(--color-primary);
}

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

.archive-header {
	margin-bottom: 40px;
	text-align: center;
}
.archive-eyebrow {
	margin: 0 0 10px;
	font-family: var(--ip-font);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ip-leaf, #2d5a27);
}
.archive-title {
	margin: 0 0 10px;
	font-family: var(--ip-font);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 48px;
	line-height: 1.1;
	color: var(--ip-forest, #1a472a);
}
.archive-count {
	color: var(--ip-slate-text, #475569);
	margin: 0;
	font-size: 14px;
}
.equipment-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
	gap: 32px;
	margin-bottom: 32px;
}
.equipment-grid-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 8px;
}
.equipment-grid-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 6px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--ip-slate-border, #e2e8f0);
	font-family: var(--ip-font);
	font-weight: 700;
	font-size: 15px;
	color: var(--ip-forest, #1a472a);
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.equipment-grid-pagination a.page-numbers:hover {
	background: var(--ip-leaf, #2d5a27);
	border-color: var(--ip-leaf, #2d5a27);
	color: #fff;
}
.equipment-grid-pagination .page-numbers.current {
	background: var(--ip-forest, #1a472a);
	border-color: var(--ip-forest, #1a472a);
	color: #fff;
}
.equipment-grid-pagination .page-numbers.dots {
	background: transparent;
	border-color: transparent;
	color: var(--ip-slate-text, #475569);
	font-weight: 700;
}
.equipment-grid-pagination .page-numbers.prev,
.equipment-grid-pagination .page-numbers.next {
	color: var(--ip-forest, #1a472a);
}
.equipment-grid-pagination .page-numbers.prev:hover,
.equipment-grid-pagination .page-numbers.next:hover {
	background: var(--ip-leaf, #2d5a27);
	border-color: var(--ip-leaf, #2d5a27);
	color: #fff;
}
.equipment-grid-pagination__icon {
	width: 16px;
	height: 16px;
}

/* ---------- 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-equipment__layout {
	display: grid;
	grid-template-columns: 2fr 1fr;
	grid-template-areas:
		"main    summary"
		"main    contact";
	gap: 40px;
	align-items: start;
	margin-bottom: 40px;
}
.single-equipment__summary { grid-area: summary; }
.single-equipment__main    { grid-area: main; }
.single-equipment__contact-box { grid-area: contact; }

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

.equipment-gallery__main {
	position: relative;
	border-radius: 0;
	overflow: hidden;
	margin-bottom: 12px;
}
.equipment-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);
}
.equipment-gallery__arrow svg {
	width: 20px;
	height: 20px;
	display: block;
}
.equipment-gallery__arrow:hover {
	background: #fff;
}
.equipment-gallery__arrow--prev {
	left: 12px;
}
.equipment-gallery__arrow--next {
	right: 12px;
}
.equipment-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);
}
.equipment-gallery__expand svg {
	width: 18px;
	height: 18px;
}
.equipment-gallery__expand:hover {
	background: #fff;
}

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

.single-equipment__tabs-section {
	margin-top: 32px;
	max-width: 720px;
}
.single-equipment__tabs-nav {
	display: flex;
	gap: 28px;
	border-bottom: 1px solid var(--color-border);
	margin-bottom: 20px;
}
.single-equipment__tab {
	background: none;
	border: none;
	padding: 12px 0;
	margin-bottom: -1px;
	font-weight: 700;
	font-size: 15px;
	color: var(--color-text-muted);
	border-bottom: 2px solid transparent;
	cursor: pointer;
}
.single-equipment__tab.is-active {
	color: var(--color-primary, #96690a);
	border-bottom-color: var(--color-primary, #96690a);
}
/* Tab panels: only actually hidden once JS confirms it can switch
   between them (js-tabs class, added by main.js) — without JS, or
   before it runs, everything just stays visible stacked so nothing
   is ever lost. */
.single-equipment__tabs-section.js-tabs .single-equipment__tab-panel {
	display: none;
}
.single-equipment__tabs-section.js-tabs .single-equipment__tab-panel.is-active {
	display: block;
}

.single-equipment__description {
	margin-top: 32px;
	max-width: 720px;
}
.single-equipment__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-equipment__description-content {
	position: relative;
	max-height: 220px;
	overflow: hidden;
}
/* Only rendered once JS confirms the text actually overflows the
   collapsed height (.has-overflow) — otherwise a short description
   that already fits would show a pointless fade over its last line
   with no "View More" button to match it. */
.single-equipment__description-content.has-overflow::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-equipment__description-content.is-expanded {
	max-height: none;
}
.single-equipment__description-content.is-expanded::after {
	display: none;
}
.single-equipment__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-equipment__description-toggle.is-visible {
	display: inline-flex;
}
.single-equipment__description-toggle:hover {
	color: var(--color-primary-dark, #7a5408);
}

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

.single-equipment__contact-box {
	background: #191b22;
	color: #e2e8f0;
	padding: 24px;
	margin-bottom: 24px;
}
.single-equipment__contact-box h2 {
	margin: 0 0 6px;
	font-size: 20px;
	color: #fff;
	font-family: var(--font-heading);
}
.single-equipment__contact-box__subheading {
	color: #94a3b8;
	font-size: 13px;
	margin: 0 0 20px;
}
.single-equipment__contact-btn {
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	margin-bottom: 10px;
}
.single-equipment__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-equipment__contact-btn--outline:hover {
	border-color: rgba(255,255,255,0.4);
	color: #fff;
}

/* ---------- Contact Form 7 (Vehicle Inquiry) — dark card ---------- */
.single-equipment__cf7-wrapper {
	margin-top: 0;
}
.single-equipment__cf7-wrapper p {
	margin: 0 0 10px;
}
.single-equipment__cf7-wrapper label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #94a3b8;
	margin-bottom: 4px;
}
.single-equipment__cf7-wrapper input[type=text],
.single-equipment__cf7-wrapper input[type=email],
.single-equipment__cf7-wrapper input[type=tel],
.single-equipment__cf7-wrapper select,
.single-equipment__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-equipment__cf7-wrapper select {
	appearance: auto;
	cursor: pointer;
}
.single-equipment__cf7-wrapper input::placeholder,
.single-equipment__cf7-wrapper textarea::placeholder {
	color: #64748b;
}
.single-equipment__cf7-wrapper input[readonly] {
	opacity: 0.75;
	cursor: default;
}
.single-equipment__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-equipment__cf7-wrapper .cf7-row {
	display: flex;
	gap: 12px;
}
.single-equipment__cf7-wrapper .cf7-row p {
	flex: 1;
	margin-bottom: 10px;
}
@media (max-width: 500px) {
	.single-equipment__cf7-wrapper .cf7-row {
		flex-direction: column;
		gap: 0;
	}
}

.single-equipment__cf7-wrapper .wpcf7-list-item {
	margin: 0;
}
.single-equipment__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-equipment__cf7-wrapper .wpcf7-acceptance input[type=checkbox] {
	margin-top: 3px;
	accent-color: var(--card-accent, var(--color-primary));
}
.single-equipment__cf7-wrapper .single-equipment__cf7-privacy-note {
	font-size: 12px;
	color: #64748b;
	margin-bottom: 16px;
}

.single-equipment__cf7-wrapper input[type=submit],
.single-equipment__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-equipment__cf7-wrapper button.wpcf7-submit i {
	font-size: 14px;
}
.single-equipment__cf7-wrapper input[type=submit]:hover,
.single-equipment__cf7-wrapper button.wpcf7-submit:hover {
	background: var(--card-accent-dark, var(--color-primary-dark));
}
.single-equipment__cf7-wrapper .wpcf7-spinner {
	margin-left: 6px;
}
.single-equipment__cf7-wrapper .wpcf7-not-valid-tip {
	color: #f87171;
	font-size: 12px;
	margin-top: 4px;
}
.single-equipment__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-equipment__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-equipment__related {
	margin-top: 56px;
	padding-top: 40px;
	border-top: 1px solid var(--color-border);
}
.single-equipment__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-equipment__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 32px;
	/* Overrides the site-wide .container's max-width/centering — the
	   header pill itself already defines the width (via .site-header's
	   left/right:20px), so its inner row should span that full pill,
	   not sit centered in a narrower 1200px column inside it. */
	max-width: none;
	margin: 0;
}
.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 {
	/* style.css (Underscores' own) sets width: 100% on this — without
	   overriding it here, margin-left: auto below has no free space
	   left to push into, so the nav stays glued to the logo instead
	   of moving to the right edge. */
	width: auto;
	margin-left: auto;
}
.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: none !important;
}
.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;
		margin-left: auto;
	}
	.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: #fff;
		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;
	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-2 {
	grid-template-columns: repeat(2, 1fr);
}
.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-equipment.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;
	-moz-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 (equipment-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-equipment__price {
		font-size: 28px;
	}
	.single-equipment__title {
		font-size: 22px;
	}
	.equipment-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-equipment__contact-box {
		padding: 18px;
	}
	.single-equipment__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-equipment__related-heading {
		font-size: 22px;
	}
	.single-equipment__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;
	}
	.equipment-card__actions {
		flex-direction: column;
	}
	.search-filters__grid {
		grid-template-columns: 1fr;
	}
}






/* =====================================================
   11. Contact Page (page-templates/template-contact.php)
   -----------------------------------------------------
   IronPioneer reference: light two-column layout — left column has
   the eyebrow/heading/intro, a 2-col office/contact info grid, and a
   decorative map thumbnail; right column is a white "Send An Inquiry"
   card. Replaces an old dark "American Legends Motors — Talk To A
   Legend" redesign; the real classes below are new (.contact-intro,
   .contact-info-grid*, .contact-map-card*) or re-themed
   (.contact-hero__*, .contact-form-box*) to match.

   The form card reuses .home-contact__cf7-wrapper for its field
   styling (light inputs, cf7-row pairs, green submit button) — see
   section 21 below, already fixed for the Home page contact form.
   ===================================================== */
.site-main.contact-page {
	background: var(--ip-off-white, #f8fafc);
}
.contact-main {
	padding: 48px 0 70px;
}
.contact-main__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: start;
}
@media (max-width: 900px) {
	.contact-main__grid {
		grid-template-columns: 1fr;
	}
}

/* ---------- Left column: intro + info + map ---------- */
.contact-hero__eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.2em;
	font-size: 13px;
	font-weight: 700;
	color: var(--ip-leaf, #2d5a27);
	font-family: var(--ip-font);
	margin: 0 0 14px;
}
.contact-hero__heading {
	font-family: var(--ip-font);
	color: var(--ip-forest, #1a472a);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	font-size: 46px;
	line-height: 1.1;
	margin: 0 0 20px;
	max-width: 560px;
}
@media (max-width: 600px) {
	.contact-hero__heading {
		font-size: 32px;
	}
}
.contact-hero__text {
	color: var(--ip-slate-text, #475569);
	font-size: 16px;
	line-height: 1.7;
	max-width: 460px;
	margin: 0 0 40px;
}

.contact-info-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin-bottom: 32px;
}
@media (max-width: 480px) {
	.contact-info-grid {
		grid-template-columns: 1fr;
	}
}
.contact-info-grid__label {
	font-family: var(--ip-font);
	color: var(--ip-forest, #1a472a);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-size: 15px;
	margin: 0 0 10px;
}
.contact-info-grid__value {
	font-style: normal;
	color: var(--ip-slate-text, #475569);
	font-size: 15px;
	line-height: 1.6;
	margin: 0 0 4px;
}
.contact-info-grid__value a {
	color: var(--ip-slate-text, #475569);
}
.contact-info-grid__value a:hover {
	color: var(--ip-forest, #1a472a);
}

/* --- Map: real embedded Google Map (via the legacy no-API-key
   iframe format, same one used on single-equipment.php), placed in
   the same rounded card slot the decorative thumbnail used to
   occupy. Always reflects the Site Settings address. --- */
.contact-map-card {
	position: relative;
	aspect-ratio: 4 / 3;
	max-height: 340px;
	border-radius: 20px;
	overflow: hidden;
	background: var(--ip-slate-light, #f1f5f9);
}
.contact-map-card__iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* ---------- Right column: form card ---------- */
.contact-form-box {
	background: #fff;
	border: none;
	border-radius: 24px;
	padding: 40px;
	box-shadow: 0 20px 45px rgba(0, 0, 0, 0.06);
}
@media (max-width: 500px) {
	.contact-form-box {
		padding: 24px;
	}
}
.contact-form-box__heading {
	font-family: var(--ip-font);
	color: var(--ip-forest, #1a472a);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 22px;
	margin: 0 0 28px;
}

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

/* =====================================================
   12. About Page (page-templates/template-about.php)
   -----------------------------------------------------
   IronPioneer reference: light hero (eyebrow + big bold uppercase
   heading + intro paragraph, photo with rounded corners on the
   right) followed by a full-width dark green stats bar (4 items).
   No "Our Leadership" team section by design.

   Replaces an old "American Legends Motors" dark redesign written
   against class names (.about-hero__bg/__overlay/__inner,
   .about-legend*, .about-disciplines*) the actual template never
   outputs — dead CSS from an earlier draft; the real classes
   (.about-hero__grid/__text/__media, .about-stats*) had no styling
   at all before this pass.
   ===================================================== */
.site-main.about-page {
	background: var(--ip-off-white, #f8fafc);
}

/* ---------- Hero ---------- */
.about-hero {
	padding: 56px 0 64px;
}
.about-hero__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: center;
}
@media (max-width: 900px) {
	.about-hero__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}
.about-hero__eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.2em;
	font-size: 13px;
	font-weight: 700;
	color: var(--ip-leaf, #2d5a27);
	font-family: var(--ip-font);
	margin: 0 0 14px;
}
.about-hero__heading {
	font-family: var(--ip-font);
	color: var(--ip-forest, #1a472a);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	font-size: 44px;
	line-height: 1.1;
	margin: 0 0 20px;
}
.about-hero__heading-italic {
	font-style: normal;
}
@media (max-width: 600px) {
	.about-hero__heading {
		font-size: 30px;
	}
}
.about-hero__text {
	color: var(--ip-slate-text, #475569);
	font-size: 16px;
	line-height: 1.7;
	max-width: 480px;
	margin: 0;
}
.about-hero__media {
	position: relative;
}
.about-hero__image {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 20px;
	display: block;
}

/* ---------- Stats bar (full-width dark green, 4 items) ---------- */
.about-stats {
	background: var(--ip-forest, #1a472a);
	padding: 40px 0;
}
.about-stats__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	text-align: center;
}
@media (max-width: 700px) {
	.about-stats__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 32px 24px;
	}
}
.about-stats__item {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.about-stats__number {
	font-family: var(--ip-font);
	color: #fff;
	font-weight: 700;
	font-size: 32px;
	line-height: 1;
	margin-bottom: 8px;
}
.about-stats__label {
	font-family: var(--ip-font);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 12px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.75);
}

/* =====================================================
   13. Policy Page (page-templates/template-policy.php)
   -----------------------------------------------------
   IronPioneer reference (Return Policy): light page, eyebrow + big
   uppercase heading, intro paragraph, unnumbered sections (plain text,
   OR a checkmark list, OR title/text cards — whichever the section
   uses), and a closing mint-green CTA box with a dark green button.

   Like the Delivery page, this replaces an old "American Legends
   Motors" dark redesign that was written against class names
   (.policy-quote, .policy-checklist, .policy-cta-row*) the actual
   template never outputs — dead CSS from an earlier draft. The real
   classes (.policy-page__intro, .policy-section__list, .policy-cards,
   .policy-cta) had no styling at all before this pass.
   ===================================================== */
.site-main.policy-page {
	background: var(--ip-off-white, #f8fafc);
}
.policy-hero {
	padding: 40px 0 0;
}
.policy-hero__eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.2em;
	font-size: 13px;
	font-weight: 700;
	color: var(--ip-leaf, #2d5a27);
	font-family: var(--ip-font);
	margin: 0 0 10px;
}
.policy-hero__heading {
	font-family: var(--ip-font);
	color: var(--ip-forest, #1a472a);
	font-weight: 700;
	font-size: 52px;
	line-height: 1.05;
	text-transform: uppercase;
	margin: 0;
	max-width: 760px;
}
.policy-hero__heading-italic {
	font-style: normal;
}
@media (max-width: 600px) {
	.policy-hero__heading {
		font-size: 34px;
	}
}
/* Decorative rule that used to sit between the heading and the intro
   paragraph in the dark version — the light reference has no visible
   divider here, just normal spacing. */
.policy-hero__divider {
	display: none;
}

.policy-page__body {
	/* No max-width override here — .policy-hero uses the plain
	   .container next door, so narrowing just this one would center it
	   as a smaller box and shift its left edge to the right of the
	   heading above it. Text measure is capped per-element instead
	   (.policy-page__intro, .policy-section__text). */
	padding-top: 28px;
	padding-bottom: 60px;
}
.policy-page__intro {
	color: var(--ip-slate-text, #475569);
	font-size: 17px;
	line-height: 1.6;
	max-width: 700px;
	margin: 0 0 44px;
}

.policy-section {
	margin-bottom: 44px;
}
.policy-section__heading {
	font-family: var(--ip-font);
	color: var(--ip-forest, #1a472a);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 24px;
	margin: 0 0 16px;
}
.policy-section__text p {
	color: var(--ip-slate-text, #475569);
	line-height: 1.6;
	font-size: 15px;
	max-width: 700px;
	margin: 0 0 14px;
}
.policy-section__text p:last-child {
	margin-bottom: 0;
}

/* Checkmark list (Return Eligibility-style): bordered white rows, a
   filled green circle + check icon on the left. */
.policy-section__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.policy-section__list li {
	display: flex;
	align-items: center;
	gap: 14px;
	background: #fff;
	border: 1px solid var(--ip-slate-border, #e2e8f0);
	border-radius: 14px;
	padding: 18px 22px;
	color: var(--ip-slate-text, #475569);
	font-size: 15px;
}
.policy-section__list-icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--ip-forest, #1a472a);
	color: #fff;
}
.policy-section__list-icon svg {
	width: 13px;
	height: 13px;
}

/* Title/text card pairs (e.g. "The Refund Process" steps) */
.policy-cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}
@media (max-width: 700px) {
	.policy-cards {
		grid-template-columns: 1fr;
	}
}
.policy-cards__item {
	background: #fff;
	border: 1px solid var(--ip-slate-border, #e2e8f0);
	border-radius: 14px;
	padding: 22px;
}
.policy-cards__item-title {
	font-family: var(--ip-font);
	color: var(--ip-forest, #1a472a);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 15px;
	margin: 0 0 8px;
}
.policy-cards__item-text {
	color: var(--ip-slate-text, #475569);
	font-size: 14px;
	line-height: 1.6;
	margin: 0;
}

/* Closing CTA: light mint box, matches the "Need to start a claim?"
   card from the reference. */
.policy-cta {
	background: var(--ip-mint, #e8f5e9);
	border-radius: 20px;
	padding: 32px;
}
.policy-cta__heading {
	font-family: var(--ip-font);
	color: var(--ip-forest, #1a472a);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 20px;
	margin: 0 0 10px;
}
.policy-cta__text {
	color: var(--ip-slate-text, #475569);
	font-size: 15px;
	line-height: 1.6;
	margin: 0 0 20px;
}
.policy-cta__button {
	background: var(--ip-forest, #1a472a);
	border-radius: 10px;
	font-family: var(--ip-font);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: 14px;
	font-weight: 700;
	padding: 14px 28px;
}
.policy-cta__button:hover {
	background: var(--ip-leaf, #2d5a27);
	color: #fff;
}

/* =====================================================
   14. Delivery Page (page-templates/template-delivery.php)
   -----------------------------------------------------
   IronPioneer reference: light page, eyebrow + big uppercase heading,
   an intro paragraph, 3 full-width numbered white cards (Final
   Certification / Logistics Planning / Real-Time Tracking), and a
   dark green "Estimated Shipping Tiers" box with 3 price cards.
   The old dark "American Legends Motors" version of this page (full
   dark background, 3-up card grid + a separate photo/"Safety First"
   section) used a different set of class names than the template
   actually outputs (.delivery-cards/.delivery-safety vs. the real
   .delivery-features/.delivery-feature) — dead CSS left over from an
   earlier draft of this template, replaced below along with the
   still-live-but-dark .delivery-hero/.delivery-cta__button rules. */
.site-main.delivery-page {
	background: var(--ip-off-white, #f8fafc);
}
.delivery-page__container {
	max-width: 900px;
	padding-top: 40px;
	padding-bottom: 60px;
}

/* --- Hero --- */
.delivery-hero {
	margin-bottom: 40px;
}
.delivery-hero .policy-hero__eyebrow {
	text-align: left;
	font-family: var(--ip-font);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ip-leaf, #2d5a27);
	margin: 0 0 10px;
}
.delivery-hero__heading {
	font-family: var(--ip-font);
	color: var(--ip-forest, #1a472a);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 52px;
	line-height: 1.05;
	margin: 0 0 20px;
}
@media (max-width: 600px) {
	.delivery-hero__heading {
		font-size: 34px;
	}
}
.delivery-hero__text {
	color: var(--ip-slate-text, #475569);
	font-size: 17px;
	line-height: 1.6;
	max-width: 700px;
	margin: 0;
}

/* --- 3 numbered feature cards (full width, stacked) --- */
.delivery-features {
	margin-bottom: 32px;
}
.delivery-features__list {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.delivery-feature {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	background: #fff;
	border: 1px solid var(--ip-slate-border, #e2e8f0);
	border-radius: 20px;
	padding: 32px;
}
.delivery-feature__icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: var(--ip-mint, #e8f5e9);
	color: var(--ip-leaf, #2d5a27);
	font-size: 18px;
}
.delivery-feature__body {
	min-width: 0;
}
.delivery-feature__title {
	font-family: var(--ip-font);
	color: var(--ip-forest, #1a472a);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 20px;
	margin: 0 0 10px;
}
.delivery-feature__text {
	color: var(--ip-slate-text, #475569);
	font-size: 15px;
	line-height: 1.6;
	margin: 0;
}

/* --- Estimated Shipping Tiers: dark green box + 3 price cards --- */
.delivery-tiers {
	background: var(--ip-forest, #1a472a);
	border-radius: 24px;
	padding: 36px;
}
.delivery-tiers__heading {
	font-family: var(--ip-font);
	color: #fff;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 22px;
	margin: 0 0 24px;
}
.delivery-tiers__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
@media (max-width: 700px) {
	.delivery-tiers__grid {
		grid-template-columns: 1fr;
	}
}
.delivery-tier {
	background: rgba(255, 255, 255, 0.08);
	border-radius: 16px;
	padding: 24px;
}
.delivery-tier__label {
	font-family: var(--ip-font);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.65);
	margin: 0 0 10px;
}
.delivery-tier__price {
	font-family: var(--ip-font);
	font-weight: 700;
	font-size: 24px;
	color: #fff;
	margin: 0 0 6px;
}
.delivery-tier__subtext {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.6);
	margin: 0;
}

/* --- Closing CTA button (kept in case .delivery-cta is re-enabled —
   see the commented-out block in template-delivery.php) --- */
.delivery-cta__button {
	background: var(--ip-forest, #1a472a);
	border-radius: 999px;
	padding: 13px 30px;
	font-family: var(--ip-font);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: 13px;
	font-weight: 700;
}
.delivery-cta__button:hover {
	background: var(--ip-leaf, #2d5a27);
	color: #fff;
}

/* =====================================================
   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;
}

/* =====================================================
   17. HOME PAGE REDESIGN — "American Legends Motors"
   -----------------------------------------------------
   Overrides everything under sections 8 (Home Page Sections) with a
   dark, red-accented, bold-condensed look — scoped ONLY to the home
   page's .home-* classes, so every other page on the site keeps the
   original cream/gold Cormorant Garamond look untouched. Loads later
   in the file than section 8, so these rules win the cascade without
   needing to delete anything above.

   Functionality is unchanged — same admin-editable fields in
   Autostore Panel -> Home Page, this is a pure visual reskin.
   ===================================================== */
:root {
	--alm-bg: #060b16;
	--alm-bg-alt: #0e1524;
	--alm-elevated: #172033;
	--alm-border: #1f2c45;
	--alm-red: #e31b23;
	--alm-red-dark: #c4151c;
	--alm-text-muted: #7c8ba1;
	--alm-font: "Inter", "Segoe UI", sans-serif;
}

.home-section-eyebrow {
	font-family: var(--alm-font);
	color: var(--alm-red);
	font-weight: 600;
}
.home-section-eyebrow--on-dark {
	color: var(--alm-red);
}
.home-section-heading {
	font-family: var(--alm-font);
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: -0.01em;
}

/* --- Hero: two-column (text left, tall rounded photo right) --- */
.home-hero {
	position: relative;
	background-color: var(--alm-bg);
	overflow: hidden;
}
.home-hero__grid {
	display: grid;
	grid-template-columns: 5fr 7fr;
	align-items: center;
	gap: 48px;
	padding: 130px 0 80px;
}
@media (max-width: 900px) {
	.home-hero__grid {
		grid-template-columns: 1fr;
		padding: 120px 0 40px;
	}
}
.home-hero__content {
	position: relative;
	z-index: 1;
}
.home-hero__content > * {
	margin-bottom: 28px;
}
.home-hero__media {
	position: relative;
	height: 560px;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid var(--alm-border);
}
@media (max-width: 900px) {
	.home-hero__media {
		height: 320px;
		order: -1;
	}
}
.home-hero__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.home-hero__media-fade {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, var(--alm-bg), transparent 55%);
	opacity: 0.6;
}
.home-hero__eyebrow {
	font-family: var(--alm-font);
	color: var(--alm-red);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.25em;
	text-transform: uppercase;
}
.home-hero__heading {
	font-family: var(--alm-font);
	text-transform: uppercase;
	font-weight: 900;
	letter-spacing: -0.02em;
	font-size: 72px;
	line-height: 0.92;
	color: #fff;
}
@media (max-width: 1100px) {
	.home-hero__heading {
		font-size: 54px;
	}
}
@media (max-width: 500px) {
	.home-hero__heading {
		font-size: 40px;
	}
}
/* The last word of the heading — auto-detected in hero.php, no
   separate admin field — rendered as outline/stroke text instead of
   solid fill, matching the reference's "text-outline" treatment. */
.home-hero__heading-outline {
	display: inline;
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke: 1px currentColor;
	color: #fff;
}
.home-hero__subheading {
	font-family: var(--alm-font);
	font-weight: 400;
	font-size: 17px;
	color: var(--alm-text-muted);
	max-width: 420px;
	line-height: 1.7;
}
/* Primary action: small arrow-in-circle + text link, NOT a solid
   button — matches the reference exactly. */
.home-hero__arrow-link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: #fff;
}
.home-hero__arrow-link:hover {
	color: #fff;
}
.home-hero__arrow-circle {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 1px solid var(--alm-border);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	transition: border-color 0.2s ease, color 0.2s ease;
}
.home-hero__arrow-link:hover .home-hero__arrow-circle {
	border-color: var(--alm-red);
	color: var(--alm-red);
}
.home-hero__arrow-link span:last-child {
	font-family: var(--alm-font);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.15em;
}
/* Optional second button (button2 in the admin) keeps looking like a
   normal outline pill, in case a second call-to-action is wanted
   alongside the arrow-link. */
.home-hero__cta--outline {
	border-radius: 999px;
	border-color: var(--alm-border);
	font-family: var(--alm-font);
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 0.1em;
}
.home-hero__cta--outline:hover {
	border-color: var(--alm-red);
	background: transparent;
	color: var(--alm-red);
}
.home-hero__features li::before {
	color: var(--alm-red);
}

/* Marquee ticker — dark background with a border, large faint
   repeating text separated by a star icon (not a red band). */
.home-hero__marquee {
	position: relative;
	z-index: 1;
	border-top: 1px solid var(--alm-border);
	border-bottom: 1px solid var(--alm-border);
	background: var(--alm-bg);
	overflow: hidden;
	padding: 34px 0;
}
.home-hero__marquee-track {
	display: flex;
	align-items: center;
	width: max-content;
	animation: alm-marquee 22s linear infinite;
}
.home-hero__marquee-track span {
	font-family: var(--alm-font);
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	font-size: 34px;
	color: rgba(124, 139, 161, 0.4);
	padding: 0 24px;
	white-space: nowrap;
}
.home-hero__marquee-star {
	color: var(--alm-red);
	font-size: 16px;
}
@keyframes alm-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.home-hero__marquee-track { animation: none; }
}

/* --- Featured Listings (dark background; car cards restyled ONLY
   inside this section, so /search/ and Related Listings elsewhere
   keep their normal light card style) --- */
.home-featured {
	background: var(--alm-bg);
	padding: 90px 0;
}
.home-featured .home-section-heading,
.home-featured .home-featured__view-all {
	color: #fff;
}
.home-featured__view-all {
	font-family: var(--alm-font);
	color: var(--alm-red);
}
.home-featured .equipment-card {
	--card-accent: var(--alm-red);
	--card-accent-dark: var(--alm-red-dark);
	background: transparent;
	border: none;
	box-shadow: none;
}
.home-featured .equipment-card:hover {
	box-shadow: none;
	transform: none;
}
.home-featured .equipment-card__image-link {
	border-radius: 20px;
	overflow: hidden;
	border: 1px solid var(--alm-border);
}
.home-featured .equipment-card__image {
	aspect-ratio: 4 / 5;
	filter: grayscale(1);
	transition: filter 0.6s ease, transform 0.6s ease;
}
.home-featured .equipment-card:hover .equipment-card__image {
	filter: grayscale(0);
	transform: scale(1.04);
}
.home-featured .equipment-card__overlay {
	background: linear-gradient(to top, var(--alm-bg-alt) 0%, rgba(14,21,36,0.4) 55%, transparent 100%);
}
.home-featured .equipment-card__title {
	font-family: var(--alm-font);
	text-transform: uppercase;
	font-weight: 900;
	letter-spacing: -0.01em;
	font-size: 22px;
	color: #fff;
}
.home-featured .equipment-card__subtitle {
	font-family: var(--alm-font);
	color: var(--alm-text-muted);
}
.home-featured .equipment-card__price-overlay {
	font-family: var(--alm-font);
	color: var(--alm-red);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
/* Specs row + actions, below the photo — flattened to plain text
   (no pill borders/backgrounds) with "•" separators, matching the
   reference's minimal spec-list-and-link style. */
.home-featured .equipment-card__body {
	padding: 20px 4px 0;
}
.home-featured .equipment-card__pills {
	margin-bottom: 0;
}
.home-featured .pill {
	background: none;
	border: none;
	padding: 0;
	font-family: var(--alm-font);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--alm-text-muted);
}
.home-featured .pill:not(:last-child)::after {
	content: "•";
	margin-left: 12px;
	color: var(--alm-border);
}
.home-featured .pill--wide {
	display: none; /* engine spec dropped here to match the reference's compact 2-item spec row */
}
.home-featured .pill__icon {
	display: none;
}
.home-featured .equipment-card__divider {
	display: none;
}
.home-featured .equipment-card__actions {
	justify-content: flex-end;
	margin-top: 12px;
}
.home-featured .equipment-card__btn {
	flex: 0 0 auto;
	background: none;
	border: none;
	padding: 0;
	font-family: var(--alm-font);
	font-size: 11px;
	letter-spacing: 0.1em;
	color: #fff;
}
.home-featured .equipment-card__btn--outline {
	color: #fff;
}
.home-featured .equipment-card__btn--outline:hover {
	color: var(--alm-red);
}
.home-featured .equipment-card__btn--solid {
	display: none; /* "Inquire" folded into the single "View Details" link here, to match the reference's one-link layout — still fully available on the vehicle's own page */
}

/* --- Features / Why Choose Us --- */
.home-features {
	background: var(--alm-bg-alt);
}
.home-features__heading {
	font-family: var(--alm-font);
	text-transform: uppercase;
}
.home-features__icon {
	border-color: rgba(220,38,38,0.4);
	color: var(--alm-red);
}
.home-features__item-title {
	font-family: var(--alm-font);
	text-transform: uppercase;
}

/* --- Process --- */
.home-process {
	background: var(--alm-bg);
}
.home-process .home-section-heading {
	color: #fff;
}
.home-process__subheading {
	color: var(--alm-text-muted);
}
.home-process__number {
	font-family: var(--alm-font);
	color: rgba(255,255,255,0.12);
}
.home-process__icon {
	background: rgba(220,38,38,0.12);
	color: var(--alm-red);
}
.home-process__step-title {
	font-family: var(--alm-font);
	text-transform: uppercase;
	color: #fff;
}
.home-process__step-text {
	color: var(--alm-text-muted);
}
.home-process__phone-note {
	color: var(--alm-text-muted);
}
.home-process__phone-note a {
	color: #fff;
}

/* --- Testimonials --- */
.home-testimonials {
	background: var(--alm-bg-alt);
}
.home-testimonials .home-section-heading {
	color: #fff;
}
.home-testimonials__subheading {
	color: var(--alm-text-muted);
}
.home-testimonials__card {
	background: var(--alm-elevated);
	border-color: var(--alm-border);
	border-radius: 16px;
}
.home-testimonials__stars {
	color: var(--alm-red);
}
.home-testimonials__quote {
	color: #e2e8f0;
}
.home-testimonials__author span {
	color: var(--alm-text-muted);
}

/* --- CTA (full-bleed red band with giant ghost text) --- */
.home-cta {
	position: relative;
	background: var(--alm-red);
	overflow: hidden;
	padding: 100px 0;
}
.home-cta::before {
	content: attr(data-ghost);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-family: var(--alm-font);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 14vw;
	line-height: 1;
	color: rgba(255,255,255,0.08);
	white-space: nowrap;
	pointer-events: none;
}
.home-cta__heading {
	position: relative;
	font-family: var(--alm-font);
	text-transform: uppercase;
	color: #fff;
}
.home-cta__text {
	position: relative;
	color: rgba(255,255,255,0.85);
}
.home-cta__button {
	position: relative;
	background: #fff;
	color: var(--alm-red);
	border-radius: 0;
	font-family: var(--alm-font);
	text-transform: uppercase;
	font-weight: 600;
}
.home-cta__button:hover {
	background: #f1f1f1;
	color: var(--alm-red-dark);
}
.home-cta__button--outline {
	position: relative;
	border-color: rgba(255,255,255,0.5);
}

/* --- Contact + Inquiry Form --- */
.home-contact {
	background: var(--alm-bg);
}
.home-contact__heading {
	font-family: var(--alm-font);
	text-transform: uppercase;
	color: #fff;
}
.home-contact__subheading,
.home-contact__text {
	color: var(--alm-text-muted);
}
.home-contact__bullets li {
	color: #cbd5e1;
}
.home-contact__direct {
	border-top-color: rgba(255,255,255,0.1);
}
.home-contact__direct p,
.home-contact__direct a {
	color: #e2e8f0;
}
.home-contact__form-box {
	background: var(--alm-bg-alt);
	border-color: rgba(255,255,255,0.08);
}
.home-contact__form-box h3 {
	font-family: var(--alm-font);
	text-transform: uppercase;
	color: #fff;
}

/* --- Site Header: sticky, dark solid bg, red pill button ---
   (Site-wide, since there's only one header — matches the new brand
   direction across the whole site, not just the homepage.) */
.site-header {
	position: sticky;
	top: 0;
	z-index: 200;
	background: var(--alm-bg);
	background-image: none; /* overrides the old brown/black gradient */
}
.site-branding__name {
	font-family: var(--alm-font);
	font-style: normal;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 0.02em;
}
.primary-menu a {
	font-family: var(--alm-font);
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: 0.05em;
}
.primary-menu a:hover {
	color: var(--alm-red);
}
.site-header__button {
	background: var(--alm-red);
	border: none;
	border-radius: 999px;
	font-family: var(--alm-font);
	padding: 10px 24px;
}
.site-header__button:hover {
	background: var(--alm-red-dark);
	color: #fff;
}
.site-header__phone-icon {
	color: var(--alm-red);
}

/* =====================================================
   18. Inventory Archive Redesign (/inventory/)
   -----------------------------------------------------
   Scoped entirely to body.post-type-archive-equipment — WordPress adds
   this class automatically on the "equipment" CPT archive, so no
   template file needed to be touched to hook into it.

   Page chrome (background/header/pagination) has been brought in line
   with the IronPioneer "Current Inventory" reference — light page,
   green eyebrow + big forest-green heading (see the base
   .archive-header / .archive-eyebrow / .archive-title /
   .archive-count / .equipment-grid-pagination rules in section 5
   above, which is really all this page needs now).

   The search filters form below keeps its exact original markup and
   behavior (fields, labels, toggle, GET params — none of that was
   touched), just restyled from the old dark/red "American Legends
   Motors" look to the light IronPioneer palette so it reads as part
   of the same page as the header/cards/pagination above.
   ===================================================== */
body.post-type-archive-equipment .site-main {
	padding-top: 0;
}

/* --- Search filters form, reskinned to IronPioneer (light/green) --- */
body.post-type-archive-equipment .search-filters {
	background: #fff;
	border-color: var(--ip-slate-border, #e2e8f0);
	border-radius: 24px;
}
body.post-type-archive-equipment .search-filters__field label {
	font-family: var(--ip-font);
	color: var(--ip-slate-text, #475569);
}
body.post-type-archive-equipment .search-filters__field select,
body.post-type-archive-equipment .search-filters__field input[type=number],
body.post-type-archive-equipment .search-filters__plain-number {
	background-color: var(--ip-slate-light, #f1f5f9);
	border-color: var(--ip-slate-border, #e2e8f0);
	color: var(--ip-forest, #1a472a);
}
body.post-type-archive-equipment .search-filters__field select:focus,
body.post-type-archive-equipment .search-filters__field input[type=number]:focus,
body.post-type-archive-equipment .search-filters__plain-number:focus {
	background-color: #fff;
	border-color: var(--ip-leaf, #2d5a27);
}
body.post-type-archive-equipment .search-filters__field select {
	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='%232d5a27' 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;
}
body.post-type-archive-equipment .search-filters__advanced {
	border-top-color: var(--ip-slate-border, #e2e8f0);
}
body.post-type-archive-equipment .search-filters__advanced-toggle,
body.post-type-archive-equipment .search-filters__submit {
	color: var(--ip-leaf, #2d5a27);
	font-family: var(--ip-font);
}
body.post-type-archive-equipment .search-filters__advanced-toggle:hover {
	color: var(--ip-forest, #1a472a);
}
body.post-type-archive-equipment .search-filters__submit {
	background: var(--ip-forest, #1a472a);
	color: #fff;
	font-weight: 700;
	text-transform: uppercase;
}
body.post-type-archive-equipment .search-filters__submit:hover {
	background: var(--ip-leaf, #2d5a27);
}
body.post-type-archive-equipment .search-filters__actions {
	border-top-color: var(--ip-slate-border, #e2e8f0);
}
body.post-type-archive-equipment .search-filters__reset {
	font-family: var(--ip-font);
	color: var(--ip-slate-text, #475569);
}
body.post-type-archive-equipment .search-filters__reset:hover {
	color: var(--ip-forest, #1a472a);
}

/* --- Inventory grid cards ---
   The old "American Legends Motors" (dark/red) card re-skin that used
   to live here has been removed: content-equipment.php was rewritten
   to match the IronPioneer "Current Inventory" reference directly
   (see the .equipment-card rules in section 4 above), so the plain
   card now already looks right on this page with no override needed.
   Pagination now has its own full pill-button styling in section 5
   (.equipment-grid-pagination .page-numbers etc.), so the old
   color-only leftover rules that used to live here have been removed. */

/* =====================================================
   19. Single Equipment Page — "IronPioneer" re-skin
   -----------------------------------------------------
   Scoped to body.single-equipment (WordPress auto-adds this for the
   single-{post_type}.php template). Replaces the old dark/red
   "American Legends Motors" reskin with the same light green
   IronPioneer palette used on the homepage and the Inventory archive,
   so this page reads as part of the same site. Only look-and-feel is
   touched here — the quick-action buttons ("Send Message"/"Call Us")
   keep their existing labels/behavior, the CF7 inquiry form keeps its
   fields, and Description/Specification are still driven by the
   .single-equipment__tabs-section markup in single-equipment.php —
   this just makes the tabs actually look like tabs and matches the
   Home Contact form's light card treatment (see section 21).
   ===================================================== */
body.single-equipment {
	background: var(--ip-off-white, #f8fafc);
}

/* --- Breadcrumb --- */
.single-equipment__breadcrumb {
	margin: 24px 0 4px;
	font-family: var(--ip-font);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.single-equipment__breadcrumb a {
	color: var(--ip-slate-text, #475569);
}
.single-equipment__breadcrumb a:hover {
	color: var(--ip-forest, #1a472a);
}
.single-equipment__breadcrumb-sep {
	margin: 0 8px;
	color: var(--ip-slate-border, #cbd5e1);
}
.single-equipment__breadcrumb-current {
	color: var(--ip-forest, #1a472a);
}

/* --- Gallery --- */
body.single-equipment .equipment-gallery__main,
body.single-equipment .equipment-gallery-lightbox__image,
body.single-equipment .equipment-gallery__main img {
	border-radius: 20px;
}
body.single-equipment .equipment-gallery__thumb {
	border-radius: 12px;
	border-color: var(--ip-slate-border, #e2e8f0);
}
body.single-equipment .equipment-gallery__thumb.is-active {
	border-color: var(--ip-leaf, #2d5a27);
}
body.single-equipment .equipment-gallery--placeholder {
	background: var(--ip-slate-light, #f1f5f9);
	color: var(--ip-slate-text, #475569);
	border-radius: 20px;
}

/* --- Summary column: status/stock, title, price --- */
body.single-equipment .equipment-card__status--static {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--ip-font);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ip-leaf, #2d5a27);
	background: var(--ip-mint, #e8f5e9);
	border-radius: 999px;
	padding: 6px 14px;
}
/* .equipment-card__status-dot has no base size defined anywhere in
   the stylesheet (pre-existing gap, not something this pass caused) —
   without this it's an empty inline span and the colored dot never
   actually shows up. */
body.single-equipment .equipment-card__status-dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	flex-shrink: 0;
}
body.single-equipment .single-equipment__stock {
	font-family: var(--ip-font);
	color: var(--ip-slate-text, #475569);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}
body.single-equipment .single-equipment__title {
	font-family: var(--ip-font);
	color: var(--ip-forest, #1a472a);
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.1;
	font-size: 40px;
	margin: 0 0 10px;
}
body.single-equipment .single-equipment__price {
	font-family: var(--ip-font);
	color: var(--ip-forest, #1a472a);
	font-weight: 700;
	font-size: 32px;
	margin-bottom: 24px;
}

/* Quick actions keep their existing labels ("Send Message" / "Call
   Us") — only the button look changes, to the same solid/outline
   pairing used elsewhere on the site. */
body.single-equipment .single-equipment__quick-btn {
	padding: 15px 20px;
	border-radius: 12px;
	font-family: var(--ip-font);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	background: var(--ip-forest, #1a472a);
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
body.single-equipment .single-equipment__quick-btn:hover {
	background: var(--ip-leaf, #2d5a27);
	color: #fff;
}
body.single-equipment .single-equipment__quick-btn--outline {
	background: transparent;
	border: 1px solid var(--ip-slate-border, #e2e8f0);
	color: var(--ip-forest, #1a472a);
}
body.single-equipment .single-equipment__quick-btn--outline:hover {
	background: var(--ip-slate-light, #f1f5f9);
	border-color: var(--ip-forest, #1a472a);
	color: var(--ip-forest, #1a472a);
}

/* --- Description / Specification tabs --- */
body.single-equipment .single-equipment__tabs-nav {
	border-bottom-color: var(--ip-slate-border, #e2e8f0);
}
body.single-equipment .single-equipment__tab {
	font-family: var(--ip-font);
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: 0.05em;
	color: var(--ip-slate-text, #475569);
}
body.single-equipment .single-equipment__tab.is-active {
	color: var(--ip-forest, #1a472a);
	border-bottom-color: var(--ip-forest, #1a472a);
}
body.single-equipment .single-equipment__description-content p {
	color: var(--ip-slate-text, #475569);
}
body.single-equipment .single-equipment__description-content.has-overflow::after {
	background: linear-gradient(to bottom, rgba(248,250,252,0), var(--ip-off-white, #f8fafc));
}
body.single-equipment .single-equipment__description-toggle {
	color: var(--ip-leaf, #2d5a27);
}
body.single-equipment .single-equipment__description-toggle:hover {
	color: var(--ip-forest, #1a472a);
}

/* --- Specifications list (the "Specification" tab panel) --- */
body.single-equipment .specs-list {
	border-top-color: var(--ip-slate-border, #e2e8f0);
}
body.single-equipment .specs-list__row {
	border-bottom-color: var(--ip-slate-border, #e2e8f0);
}
body.single-equipment .specs-list__label {
	color: var(--ip-slate-text, #475569);
	font-family: var(--ip-font);
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 0.04em;
}
body.single-equipment .specs-list__value {
	color: var(--ip-forest, #1a472a);
	font-family: var(--ip-font);
	font-weight: 700;
}

/* --- Contact box / CF7 inquiry form ---
   Same light-card treatment as the Home Contact form (section 21) —
   white rounded fields instead of the old dark card. Form markup is
   untouched. */
body.single-equipment .single-equipment__contact-box {
	background: #fff;
	color: inherit;
	border: 1px solid var(--ip-slate-border, #e2e8f0);
	border-radius: 20px;
	box-shadow: 0 20px 45px rgba(0,0,0,0.04);
}
body.single-equipment .single-equipment__contact-box h2 {
	font-family: var(--ip-font);
	color: var(--ip-forest, #1a472a);
	text-transform: uppercase;
}
body.single-equipment .single-equipment__contact-box__subheading {
	color: var(--ip-slate-text, #475569);
}
body.single-equipment .single-equipment__cf7-wrapper label {
	color: var(--ip-forest, #1a472a);
}
body.single-equipment .single-equipment__cf7-wrapper input[type=text],
body.single-equipment .single-equipment__cf7-wrapper input[type=email],
body.single-equipment .single-equipment__cf7-wrapper input[type=tel],
body.single-equipment .single-equipment__cf7-wrapper select,
body.single-equipment .single-equipment__cf7-wrapper textarea {
	background: #fff;
	border: 1px solid var(--ip-slate-border, #e2e8f0);
	color: var(--ip-forest, #1a472a);
	border-radius: 8px;
	padding: 10px 12px;
}
body.single-equipment .single-equipment__cf7-wrapper input::placeholder,
body.single-equipment .single-equipment__cf7-wrapper textarea::placeholder {
	color: #94a3b8;
}
body.single-equipment .single-equipment__cf7-wrapper .wpcf7-acceptance label {
	color: var(--ip-slate-text, #475569);
}
body.single-equipment .single-equipment__cf7-wrapper .wpcf7-acceptance input[type=checkbox] {
	accent-color: var(--ip-forest, #1a472a);
}
body.single-equipment .single-equipment__cf7-wrapper .single-equipment__cf7-privacy-note,
body.single-equipment .single-equipment__cf7-wrapper .single-car__cf7-privacy-note {
	color: var(--ip-slate-text, #475569);
}
body.single-equipment .single-equipment__cf7-wrapper input[type=submit],
body.single-equipment .single-equipment__cf7-wrapper button.wpcf7-submit {
	background: var(--ip-forest, #1a472a);
	border-radius: 12px;
	font-family: var(--ip-font);
}
body.single-equipment .single-equipment__cf7-wrapper input[type=submit]:hover,
body.single-equipment .single-equipment__cf7-wrapper button.wpcf7-submit:hover {
	background: var(--ip-leaf, #2d5a27);
}
body.single-equipment .single-equipment__cf7-wrapper .wpcf7-response-output {
	color: var(--ip-slate-text, #475569);
	border-color: var(--ip-slate-border, #e2e8f0) !important;
}
body.single-equipment .single-equipment__contact-btn--outline {
	border-radius: 12px;
	border-color: var(--ip-slate-border, #e2e8f0);
	color: var(--ip-forest, #1a472a);
}
body.single-equipment .single-equipment__contact-btn--outline:hover {
	background: var(--ip-slate-light, #f1f5f9);
	border-color: var(--ip-forest, #1a472a);
	color: var(--ip-forest, #1a472a);
}

/* --- Related Listings ---
   content-equipment.php's markup no longer has the old
   __overlay/__pills/__divider/__actions elements the previous ALM
   rules here used to target — those cards already render correctly
   with the default .equipment-card IronPioneer styling (section 4)
   with no override needed. Only this carousel's own chrome (arrows,
   heading, "Start a New Search" button) needs theming here. */
body.single-equipment .related-carousel__arrow {
	background: #fff;
	border: 1px solid var(--ip-slate-border, #e2e8f0);
	color: var(--ip-forest, #1a472a);
}
body.single-equipment .related-carousel__arrow:hover {
	background: var(--ip-slate-light, #f1f5f9);
}
body.single-equipment .single-equipment__related {
	border-top-color: var(--ip-slate-border, #e2e8f0);
}
body.single-equipment .single-equipment__related-heading {
	font-family: var(--ip-font);
	color: var(--ip-forest, #1a472a);
	font-weight: 700;
	text-transform: uppercase;
}
body.single-equipment .single-equipment__related-footer .btn {
	background: var(--ip-forest, #1a472a);
	border-radius: 999px;
	font-family: var(--ip-font);
	text-transform: uppercase;
}
body.single-equipment .single-equipment__related-footer .btn:hover {
	background: var(--ip-leaf, #2d5a27);
}

/* =====================================================
   20. HOME PAGE REDESIGN #2 — "IronPioneer" (heavy equipment)
   -----------------------------------------------------
   A second full re-skin of the same home-page sections (plus the
   site-wide footer, since a dark footer directly under this light
   homepage would look broken/unfinished) — appended LAST so it wins
   the cascade over the earlier "American Legends Motors" (dark/red)
   version above, without deleting it. Functionality/admin fields are
   unchanged — pure visual reskin, same pattern as before.

   Colors/fonts below are the EXACT values from the reference's own
   Tailwind config + <style> block (forest-green #1a472a, leaf-green
   #2d5a27, mint-accent #e8f5e9, etc.) — not approximated from a
   screenshot this time.
   ===================================================== */
:root {
	--ip-forest: #1a472a;      /* dark green — headings, primary buttons */
	--ip-leaf: #2d5a27;        /* medium green — accents, hovers */
	--ip-mint: #e8f5e9;        /* light green — hero background */
	--ip-off-white: #f8fafc;   /* page background */
	--ip-slate-light: #f1f5f9; /* alt section background */
	--ip-slate-border: #e2e8f0;
	--ip-slate-text: #475569;  /* muted body text */
	--ip-font: "Barlow Condensed", "Segoe UI", sans-serif; /* h1/h2/h3-level headings only */
}

/* --- Header: floating rounded "pill" nav bar, like the reference --- */
.site-header {
	position: fixed;
	top: 20px;
	left: 20px;
	right: 20px;
	width: auto;
	z-index: 1000;
	background: rgba(255,255,255,0.85) !important;
	background-image: none !important;
	backdrop-filter: blur(8px);
	border: 1px solid var(--ip-slate-border);
	border-radius: 999px;
	box-shadow: 0 4px 16px rgba(0,0,0,0.05);
}
/* Reserve space for the fixed floating header on every page EXCEPT
   the homepage — there, .home-hero's own top padding (120px, set in
   the base component rules above) already clears the header, and we
   want the hero's mint background to bleed all the way to the very
   top of the page (behind/under the floating header), not start
   below an extra white gap. */
body:not(.home) {
	padding-top: 90px; /* room for the now-fixed, floating header */
}
.site-branding__name {
	font-family: var(--ip-font);
	color: var(--ip-forest);
	text-transform: uppercase;
}
.primary-menu a {
	font-family: var(--ip-font);
	color: var(--ip-forest);
	text-transform: uppercase;
	font-size: 16px;
}
.primary-menu a:hover {
	color: var(--ip-leaf);
}
.primary-menu .current-menu-item > a,
.primary-menu .current_page_item > a {
	background: var(--ip-mint);
	color: var(--ip-forest);
	padding: 6px 16px;
	border-radius: 999px;
}
.site-header__button {
	background: var(--ip-forest) !important;
	border-radius: 4px;
	font-family: var(--ip-font);
	text-transform: uppercase;
}
.site-header__button:hover {
	background: var(--ip-leaf) !important;
}
.site-header__phone-icon {
	color: var(--ip-leaf);
}

/* --- Hero --- */
.home-hero {
	background: var(--ip-mint) !important;
	position: relative;
	z-index: 0;
	overflow: hidden;
}
/* Subtle decorative skewed tint on the right, matching the
   reference's ".absolute top-0 right-0 w-1/3 h-full -skew-x-12" shape. */
.home-hero::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 33%;
	height: 100%;
	background: rgba(45, 90, 39, 0.05);
	transform: skewX(-12deg);
	transform-origin: top;
	pointer-events: none;
	z-index: 0;
}
.home-hero__eyebrow {
	font-family: var(--ip-font);
	color: var(--ip-leaf);
	font-weight: 700;
	letter-spacing: 0.25em;
}
.home-hero__heading {
	font-family: var(--ip-font);
	color: var(--ip-forest);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: normal;
}
/* This reference has NO outline/ghost-text word — cancel that effect
   entirely so the last word renders identically to the rest. */
.home-hero__heading-outline {
	-webkit-text-fill-color: var(--ip-forest);
	-webkit-text-stroke: none;
	color: var(--ip-forest);
}
.home-hero__subheading {
	font-family: "Inter", sans-serif;
	color: var(--ip-slate-text);
}
/* Single pulsing dot + label, not a bullet-point list */
.home-hero__features {
	display: flex;
	align-items: center;
	gap: 12px;
}
.home-hero__features li {
	font-family: var(--ip-font);
	font-weight: 500;
	color: var(--ip-forest);
	font-size: 14px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding-left: 22px;
}
.home-hero__features li::before {
	content: "";
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--ip-leaf);
	animation: ip-pulse 2s ease-in-out infinite;
}
@keyframes ip-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.4; }
}

/* Primary button: small border-radius (not a pill), icon AFTER the
   text in a translucent circle badge — matches ".btn-primary" exactly. */
.home-hero__arrow-link {
	background: var(--ip-forest);
	color: #fff;
	padding: 16px 40px;
	border-radius: 4px;
	font-family: var(--ip-font);
	font-size: 20px;
	letter-spacing: 0.05em;
	flex-direction: row-reverse;
}
.home-hero__arrow-link:hover {
	background: var(--ip-leaf);
	color: #fff;
	transform: translateY(-2px);
}
.home-hero__arrow-circle {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: rgba(255,255,255,0.2);
	border: none;
	color: #fff;
	font-size: 11px;
}
.home-hero__cta--outline {
	border-radius: 4px;
	border: 2px solid var(--ip-forest);
	color: var(--ip-forest);
	font-family: var(--ip-font);
	font-size: 20px;
	letter-spacing: 0.05em;
	background: transparent;
}
.home-hero__cta--outline:hover {
	background: var(--ip-forest);
	color: #fff;
}

/* Hero photo: portrait 4:5, thick white frame border */
.home-hero__media {
	border: 8px solid #fff;
	border-radius: 24px;
	box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}
.home-hero__image {
	aspect-ratio: 1 / 1;
}
.home-hero__media-fade {
	background: none;
}
.home-hero__stat {
	position: absolute;
	left: -20px;
	bottom: -20px;
	background: #fff;
	border: 1px solid var(--ip-slate-border);
	border-radius: 16px;
	box-shadow: 0 15px 35px rgba(0,0,0,0.1);
	padding: 20px 24px;
}
.home-hero__stat-number {
	font-family: var(--ip-font);
	color: var(--ip-leaf);
	font-weight: 700;
	font-size: 32px;
}
.home-hero__stat-label {
	font-family: "Inter", sans-serif;
	color: var(--ip-slate-text);
	font-weight: 700;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* --- Marquee: solid forest-green background, legible white text --- */
.home-hero__marquee {
	background: var(--ip-forest) !important;
	border-color: var(--ip-forest) !important;
	border-top: none !important;
	border-bottom: none !important;
}
.home-hero__marquee-track span {
	font-family: var(--ip-font);
	font-weight: 700;
	color: rgba(255, 255, 255, 0.65);
	font-size: 32px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.home-hero__marquee-star {
	font-size: 0;
}
.home-hero__marquee-star::before {
	content: "\2022"; /* an actual bullet character, same as the reference */
	font-size: 28px;
	color: var(--ip-mint);
	font-family: var(--ip-font);
}

/* --- Categories ("Featured Listings"): white cards, landscape photo,
   uppercase condensed card titles (h3 in the reference gets the
   condensed treatment automatically) --- */
.home-featured {
	background: var(--ip-off-white) !important;
}
.home-featured .home-section-heading {
	font-family: var(--ip-font) !important;
	color: var(--ip-forest) !important;
	font-size: 64px;
	text-transform: uppercase;
}
.home-featured .home-featured__view-all {
	font-family: var(--ip-font) !important;
	color: var(--ip-forest) !important;
	text-transform: uppercase;
}
.home-featured .home-featured__view-all:hover {
	color: var(--ip-leaf) !important;
}
.home-featured .equipment-card {
	background: #fff !important;
	border: none !important;
	border-radius: 24px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
.home-featured .equipment-card:hover {
	box-shadow: 0 20px 40px rgba(0,0,0,0.1) !important;
	transform: none !important;
}
.home-featured .equipment-card__image-link {
	border-radius: 0;
}
.home-featured .equipment-card__image {
	aspect-ratio: 4 / 3;
	filter: none !important;
}
.home-featured .equipment-card:hover .equipment-card__image {
	transform: scale(1.05);
}
.home-featured .equipment-card__overlay {
	background: linear-gradient(to top, rgba(0,0,0,0.5), transparent) !important;
}
.home-featured .equipment-card__price-overlay {
	display: none; /* category cards in this reference aren't individually priced */
}
.home-featured .equipment-card__title {
	font-family: var(--ip-font) !important;
	color: var(--ip-forest) !important;
	text-transform: uppercase !important;
	font-weight: 700 !important;
	font-size: 24px !important;
}
.home-featured .equipment-card__body {
	background: #fff;
	padding: 32px !important;
}
.home-featured .pill {
	font-family: "Inter", sans-serif !important;
	color: var(--ip-slate-text) !important;
}
.home-featured .equipment-card__btn--outline {
	color: var(--ip-leaf) !important;
}

/* --- "Built on Trust" section: light grey bg, boxed reason-items,
   rounded-lg (not circular) icon squares, gradient photo overlay --- */
.home-features {
	background: var(--ip-slate-light) !important;
	border-top: 1px solid var(--ip-slate-border);
	border-bottom: 1px solid var(--ip-slate-border);
}
/* Fixes a leftover from the "American Legends" redesign — this
   eyebrow modifier class was styled red for a dark background there;
   this section is light now, so it needs the green accent instead. */
.home-features .home-section-eyebrow--on-dark {
	color: var(--ip-leaf) !important;
}
.home-features__heading {
	font-family: var(--ip-font) !important;
	color: var(--ip-forest) !important;
	text-transform: uppercase !important;
	font-size: 56px;
}
.home-features__text {
	font-family: "Inter", sans-serif;
	color: var(--ip-slate-text);
	font-size: 16px;
	line-height: 1.6;
	margin-top: 16px;
	max-width: 34em;
}
/* Item titles are <h4>-equivalent in the reference, which does NOT
   get the condensed/uppercase treatment — plain bold Inter instead. */
.home-features__item-title {
	font-family: "Inter", sans-serif !important;
	color: var(--ip-forest) !important;
	text-transform: none !important;
	font-weight: 700 !important;
}
.home-features__item-text {
	font-family: "Inter", sans-serif !important;
	color: var(--ip-slate-text) !important;
}
.home-features__icon {
	background: var(--ip-mint) !important;
	color: var(--ip-leaf) !important;
	border: none !important;
	border-radius: 10px;
	width: 48px;
	height: 48px;
}
/* The base .home-features__intro/__grid rules above default to
   centered text (for the original full-width icon-grid layout with
   no photo). The 2-column "Built on Trust" layout needs everything
   left-aligned instead, to match the reference. */
.home-features--with-photo .home-features__intro,
.home-features--with-photo .home-features__grid,
.home-features--with-photo .home-features__item {
	text-align: left;
}
/* Each feature item becomes its own bordered, shadowed card that
   lifts slightly on hover ("reason-item" in the reference). */
.home-features--with-photo .home-features__item {
	background: #fff;
	border: 1px solid var(--ip-slate-border);
	border-radius: 12px;
	padding: 32px;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.home-features--with-photo .home-features__item:hover {
	transform: translateY(-5px);
	box-shadow: 0 20px 40px rgba(0,0,0,0.05);
}
.home-features__split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 80px;
}
.home-features__media {
	position: relative;
	border-radius: 24px;
	overflow: hidden;
}
.home-features__image {
	aspect-ratio: 1 / 1;
	width: 100%;
	object-fit: cover;
	display: block;
}
.home-features__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(26,71,42,0.4), transparent);
	border-radius: 24px;
}
@media (max-width: 900px) {
	.home-features__split {
		grid-template-columns: 1fr;
	}
	.home-features__grid--cols-2 {
		grid-template-columns: 1fr;
	}
}

/* --- CTA: a rounded CARD (not edge-to-edge), with blurred glow
   blobs in opposite corners, no ghost background text --- */
.home-cta {
	background: var(--ip-off-white) !important;
	padding: 96px 24px !important;
}
/* Same landmine as the Features section: .home-section-eyebrow--on-dark
   defaults to ALM's red (still defined earlier in the cascade) unless
   explicitly overridden per-section here. */
.home-cta .home-section-eyebrow--on-dark {
	color: var(--ip-mint) !important;
}
.home-cta .container {
	/* The base .container class caps this at 1200px and centers it —
	   that left a big empty gap on each side within the wider .home-cta
	   section. Override it so the card spans (almost) the full width. */
	max-width: 1400px;
	background: var(--ip-forest);
	border-radius: 48px;
	padding: 80px 40px;
	position: relative;
	overflow: hidden;
}
.home-cta .container::before {
	/* Repurposed from the old "ghost text" (American Legends) into the
	   bottom-left glow blob here — content must be reset to empty
	   since the earlier rule set it to attr(data-ghost). */
	content: "";
	position: absolute;
	width: 380px;
	height: 380px;
	border-radius: 50%;
	background: rgba(45, 90, 39, 0.2);
	filter: blur(60px);
	bottom: -190px;
	left: -190px;
	top: auto;
	right: auto;
	transform: none;
	color: transparent;
	font-size: 0;
	pointer-events: none;
	z-index: 0;
}
.home-cta .container::after {
	content: "";
	position: absolute;
	width: 380px;
	height: 380px;
	border-radius: 50%;
	background: rgba(45, 90, 39, 0.2);
	filter: blur(60px);
	top: -190px;
	right: -190px;
	pointer-events: none;
	z-index: 0;
}
.home-cta::before {
	display: none; /* the outer section itself no longer shows anything — see .home-cta .container::before/::after above instead */
}
.home-cta__heading {
	font-family: var(--ip-font) !important;
	color: #fff !important;
	text-transform: uppercase;
	font-size: 56px;
}
.home-cta__text {
	color: rgba(232, 245, 233, 0.8) !important;
	font-family: "Inter", sans-serif;
}
.home-cta__button {
	background: #fff !important;
	color: var(--ip-forest) !important;
	border-radius: 12px !important;
	font-family: var(--ip-font) !important;
	text-transform: uppercase;
	font-size: 20px;
}
.home-cta__button:hover {
	background: var(--ip-mint) !important;
}
.home-cta__button--outline {
	background: transparent !important;
	border: 2px solid #fff !important;
	color: #fff !important;
	border-radius: 12px !important;
	font-family: var(--ip-font) !important;
	text-transform: uppercase;
	font-size: 20px;
}
.home-cta__button--outline:hover {
	background: #fff !important;
	color: var(--ip-forest) !important;
}

/* --- Footer: light theme (this reference's footer is white, not
   dark) — the footer is site-wide, so this now applies everywhere,
   not just the homepage, to avoid a jarring dark footer directly
   under this light redesign. --- */
.site-footer {
	background: #fff !important;
	color: var(--ip-slate-text) !important;
	border-top: 1px solid var(--ip-slate-border) !important;
	border-top-width: 1px !important;
}
.site-footer__name,
.site-footer__col-title {
	font-family: var(--ip-font) !important;
	color: var(--ip-forest) !important;
}
.site-footer a {
	color: var(--ip-slate-text) !important;
}
.site-footer a:hover {
	color: var(--ip-leaf) !important;
}
.site-footer__tagline,
.site-footer__hours-value {
	color: var(--ip-forest) !important;
}
.site-footer__divider {
	background: var(--ip-leaf) !important;
}
.site-footer__contact-list i,
.site-footer__direct i {
	color: var(--ip-leaf) !important;
}
.site-footer__social a {
	background: var(--ip-slate-light) !important;
	color: var(--ip-forest) !important;
	border: none !important;
}
.site-footer__social a:hover {
	background: var(--ip-forest) !important;
	color: #fff !important;
}
.site-footer__bottom,
.site-footer__widgets {
	border-top-color: var(--ip-slate-border) !important;
}
.site-footer__legal-links a {
	color: var(--ip-slate-text) !important;
}
.site-footer__legal-links a:hover {
	color: var(--ip-forest) !important;
}

/* =====================================================
   21. Home Contact section — IronPioneer re-skin
   -----------------------------------------------------
   This section had no green re-skin yet (still inherited the dark
   "American Legends Motors" styling). It shares its CF7 markup and
   base field styles with single-equipment.php's dark contact box
   (both wrapped in .single-equipment__cf7-wrapper — see the base
   rules for it around line ~730) — those base rules are dark-theme
   (dark input backgrounds, light-gray text) and correct as-is for
   the single-equipment page, but wrong for THIS section's white
   card. Everything below overrides them specifically within
   .home-contact__cf7-wrapper (the second class on the same wrapper
   div), so the single-equipment page is untouched.

   Real form markup (as configured in Contact Form 7) wraps paired
   fields in <div class="cf7-row"> — First/Last Name in one row,
   Email/Phone in another — which already gets flex/gap layout from
   the shared base rule above. No grid hack needed on the form itself.
   ===================================================== */
.home-contact {
	background: var(--ip-off-white) !important;
}
.home-contact__heading {
	font-family: var(--ip-font) !important;
	color: var(--ip-forest) !important;
	text-transform: uppercase !important;
}
.home-contact__subheading,
.home-contact__text {
	color: var(--ip-slate-text) !important;
}
.home-contact__bullets li {
	color: var(--ip-slate-text) !important;
}
.home-contact__bullets i {
	color: var(--ip-leaf) !important;
}
.home-contact__direct {
	border-top-color: var(--ip-slate-border) !important;
}
.home-contact__direct p,
.home-contact__direct a {
	color: var(--ip-forest) !important;
}
.home-contact__direct i {
	color: var(--ip-leaf) !important;
}

/* --- The white card itself --- */
.home-contact__form-box {
	background: #fff !important;
	border: none !important;
	border-radius: 24px;
	padding: 40px !important;
	box-shadow: 0 20px 45px rgba(0,0,0,0.06);
}
.home-contact__form-box h3 {
	font-family: var(--ip-font) !important;
	color: var(--ip-forest) !important;
	text-transform: uppercase !important;
	font-size: 26px;
	margin: 0 0 28px !important;
}

/* --- Hard layout reset. Something (not found in a targeted search)
   was still making standalone fields (Email, Phone) sit in a 2-up
   grid-like arrangement even after removing the earlier grid rules.
   Rather than keep hunting for the exact source, this explicitly
   sets display/float/width/flex on every relevant element so the
   layout can't be affected by whatever that was. --- */
.home-contact__cf7-wrapper form > p {
	display: block !important;
	float: none !important;
	width: 100% !important;
	max-width: 100% !important;
	flex: none !important;
	margin: 0 0 20px !important;
}
/* Guards against the huge gaps you get from stray blank lines left in
   the CF7 form template (each blank line becomes its own empty <p> —
   easy to pick up by accident while editing fields in the Form tab).
   Anything that isn't actually holding a field, a submit button, or
   the response/acceptance markup just collapses to nothing instead of
   reserving a whole empty paragraph's worth of vertical space. Doesn't
   touch real fields — only removes the truly empty p's below/between
   them. */
.home-contact__cf7-wrapper form > p:empty,
.home-contact__cf7-wrapper form > p:not(:has(.wpcf7-form-control-wrap, input, textarea, select, .wpcf7-response-output)) {
	display: none !important;
	margin: 0 !important;
}
.home-contact__cf7-wrapper .cf7-row {
	display: flex !important;
	flex-wrap: wrap !important;
	float: none !important;
	width: 100% !important;
	gap: 20px !important;
	margin: 0 0 20px !important;
}
.home-contact__cf7-wrapper .cf7-row p {
	display: block !important;
	float: none !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
}

/* --- Labels + fields: light card instead of the dark single-equipment
   defaults --- */
.home-contact__cf7-wrapper label {
	color: var(--ip-forest) !important;
}
.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 select,
.home-contact__cf7-wrapper textarea {
	background: #fff !important;
	border: 1px solid var(--ip-slate-border) !important;
	color: var(--ip-forest) !important;
	border-radius: 8px;
	padding: 12px 14px;
	text-transform: none; /* guards against the uppercase label bleeding into typed/placeholder text */
}
.home-contact__cf7-wrapper select {
	cursor: pointer;
}
.home-contact__cf7-wrapper input::placeholder,
.home-contact__cf7-wrapper textarea::placeholder {
	color: #94a3b8 !important;
}
.home-contact__cf7-wrapper textarea {
	height: 110px !important;
}

/* --- Your existing privacy-note paragraph. Note: your CF7 form uses
   the class name "single-car__cf7-privacy-note" (the pre-rename
   name) — that's fine, it's just text content in your CF7 form, not
   a theme file, so it wasn't touched by the car->equipment rename.
   Styled here to match; if you'd rather match the theme's current
   naming, you can rename it to "single-equipment__cf7-privacy-note"
   in the form editor, but it isn't required. */
.home-contact__cf7-wrapper .single-car__cf7-privacy-note,
.home-contact__cf7-wrapper .single-equipment__cf7-privacy-note {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	flex: 0 0 100% !important;
	grid-column: 1 / -1 !important;
	color: var(--ip-slate-text) !important;
	text-align: left;
	margin-top: 12px !important;
}
/* Belt-and-suspenders: force the Message field's own <p> wrapper to
   full width/block too, in case any flex/grid rule elsewhere still
   applies to it. */
.home-contact__cf7-wrapper p:has(> label > textarea),
.home-contact__cf7-wrapper p:has(textarea) {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	flex: 0 0 100% !important;
	grid-column: 1 / -1 !important;
}

/* --- Submit button: dark green, rounded, keeps your existing
   fa-paper-plane icon (no extra arrow added).
   NOTE: Contact Form 7's [submit] tag renders as <input type="submit">
   by default (not <button>) — the selector below covers both, since
   depending on how your form is built you may get either one. --- */
.home-contact__cf7-wrapper input[type=submit],
.home-contact__cf7-wrapper button.wpcf7-submit {
	width: 100%;
	background: var(--ip-forest) !important;
	color: #fff !important;
	border-radius: 12px;
	padding: 16px !important;
	font-family: var(--ip-font);
	font-size: 16px;
}
.home-contact__cf7-wrapper input[type=submit]:hover,
.home-contact__cf7-wrapper button.wpcf7-submit:hover {
	background: var(--ip-leaf) !important;
}
@media (max-width: 500px) {
	.home-contact__cf7-wrapper .cf7-row {
		flex-direction: column;
		gap: 0;
	}
}