/* Auto Fanatic Parts — brand layer on top of Salient */
:root {
	--af-red: #8d181d;
	--af-red-bright: #c4242b;
	--af-ink: #111214;
	--af-dark: #0c0c0e;
	--af-dark-2: #16161a;
	--af-muted: #6b6b73;
	--af-line: #e4e4e8;
	--af-soft: #f5f5f7;
	--afvf-accent: var(--af-red);
	--afvf-radius: 6px;
}

/* ---------- Typography ---------- */
body,
input, select, textarea, button,
.woocommerce, .woocommerce-page,
#header-outer #top nav > ul > li > a,
#header-outer .sf-menu li ul li a {
	font-family: 'Barlow', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6,
.product_title, .woocommerce-loop-product__title, .woocommerce ul.products li.product h3,
.afp-display, .afvf-title, .afvf-stat-num {
	font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
	letter-spacing: .005em;
}
h1, h2, .afp-display { text-transform: uppercase; font-weight: 800; }
h3, .product_title { font-weight: 700; }

/* ---------- Shared bits ---------- */
.afp-eyebrow {
	display: inline-block;
	margin: 0 0 14px;
	font: 600 13px/1.2 'Barlow', sans-serif;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--af-red-bright);
}
.afp-eyebrow::before { content: "[ "; }
.afp-eyebrow::after { content: " ]"; }
.afp-btn {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 14px 26px; border-radius: 999px;
	background: var(--af-red); color: #fff !important;
	font: 700 15px/1 'Barlow', sans-serif; text-decoration: none !important;
	transition: background .15s, transform .15s;
	opacity: 1 !important; /* Salient fades links in light-text rows */
}
.afp-btn:hover { background: var(--af-red-bright); transform: translateY(-1px); }
.afp-btn--light { background: #fff; color: var(--af-ink) !important; }
.afp-btn--light:hover { background: #f0f0f0; }
.afp-btn--ghost { background: transparent; border: 1px solid rgba(255,255,255,.4); }
.afp-btn--ghost:hover { background: rgba(255,255,255,.08); }

.afp-section-head {
	display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
	gap: 12px 24px; margin-bottom: 28px;
}
.afp-section-head h2 { margin: 0; font-size: clamp(30px, 4vw, 46px); line-height: 1; }
.afp-section-head .afp-eyebrow { margin-bottom: 8px; }
.afp-link { color: var(--af-red) !important; font-weight: 700; text-decoration: none; white-space: nowrap; }
.afp-link::after { content: " →"; }

/* Section backgrounds go on Salient's full-width .row-bg layer */
.afp-hero > .row-bg-wrap .row-bg {
	background:
		radial-gradient(900px 500px at 80% 10%, rgba(141, 24, 29, .55), transparent 60%),
		radial-gradient(700px 400px at 0% 100%, rgba(141, 24, 29, .25), transparent 60%),
		linear-gradient(180deg, #121215 0%, var(--af-dark) 100%) !important;
}
.afp-trust > .row-bg-wrap .row-bg { background: var(--af-dark-2) !important; }
.afp-steps-wrap > .row-bg-wrap .row-bg { background: var(--af-soft) !important; }
.afp-stats-wrap > .row-bg-wrap .row-bg { background: var(--af-dark) !important; }
.afp-cta > .row-bg-wrap .row-bg { background: var(--af-red) !important; }

/* ---------- Hero ---------- */
.afp-hero { color: #fff; }
.afp-hero > .row-bg-wrap::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
	background-size: 48px 48px;
	mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
	-webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
}
.afp-hero > .row-bg-wrap { overflow: hidden; }
.afp-hero .wpb_wrapper, .afp-hero .vc_column-inner { position: relative; z-index: 1; }
.afp-hero h1 {
	margin: 0 0 18px;
	color: #fff;
	font-size: clamp(44px, 7.2vw, 96px);
	line-height: .92;
	max-width: 14ch;
}
.afp-hero h1 em { font-style: normal; color: var(--af-red-bright); }
.afp-hero .afp-lead { max-width: 620px; margin: 0 0 34px; color: #c8c8d0; font-size: 18px; line-height: 1.55; }
.afp-hero .afvf-finder { max-width: 1120px; }
.afp-hero .afvf-help a { color: var(--af-red) !important; opacity: 1 !important; font-weight: 600; }
.afp-hero .afvf-finder { color: var(--af-ink); }
.afp-hero .afvf-step { color: var(--af-muted) !important; }

/* ---------- Trust strip ---------- */
.afp-trust { color: #fff; }
.afp-trust-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.afp-trust-item { display: flex; gap: 14px; align-items: flex-start; }
.afp-trust-item svg { flex: 0 0 28px; width: 28px; height: 28px; color: var(--af-red-bright); }
.afp-trust-item strong { display: block; font: 700 17px/1.2 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .03em; color: #fff; }
.afp-trust-item span { display: block; margin-top: 4px; color: #a9a9b2; font-size: 14px; line-height: 1.45; }

/* ---------- Steps ---------- */
.afp-steps-wrap { color: var(--af-ink); }
.afp-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; counter-reset: afp; }
.afp-step {
	position: relative; padding: 28px 26px 26px; background: #fff;
	border: 1px solid var(--af-line); border-radius: var(--afvf-radius);
}
.afp-step::before {
	counter-increment: afp; content: "0" counter(afp);
	display: block; margin-bottom: 10px;
	font: 800 44px/1 'Barlow Condensed', sans-serif; color: var(--af-red);
}
.afp-step h3 { margin: 0 0 8px; font-size: 22px; text-transform: uppercase; }
.afp-step p { margin: 0; color: var(--af-muted); line-height: 1.55; }

/* ---------- Stats ---------- */
.afp-stats-wrap { color: #fff; }
.afp-stats-wrap .afvf-stat-num { color: #fff; font-size: clamp(40px, 5vw, 60px); }
.afp-stats-wrap .afvf-stat-label { color: #a9a9b2; text-transform: uppercase; letter-spacing: .12em; font-size: 12px; }

/* ---------- CTA ---------- */
.afp-cta { color: #fff; }
.afp-cta-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; }
.afp-cta h2 { margin: 0 0 6px; color: #fff; font-size: clamp(30px, 4vw, 48px); line-height: 1; }
.afp-cta p { margin: 0; color: rgba(255,255,255,.85); max-width: 560px; }
.afp-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Tiles on light background ---------- */
.afvf-tile { border-radius: var(--afvf-radius); }
.afvf-tile-name { font-family: 'Barlow Condensed', sans-serif; font-size: 20px; text-transform: uppercase; letter-spacing: .02em; }
.afvf-make-tiles .afvf-tile-name { font-size: 17px; }

/* ---------- Header ---------- */
#header-outer .afp-nav-back > a { opacity: .75; }

/* ---------- Responsive ---------- */
@media (max-width: 999px) {
	.afp-trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.afp-steps { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.afp-trust-grid { grid-template-columns: 1fr; }
	.afp-hero .afp-lead { font-size: 16px; }
	.afp-cta-actions, .afp-cta-actions .afp-btn { width: 100%; justify-content: center; }
}

/* ---------- Product pages ---------- */
.single-product .product_title,
.single-product h1.product_title {
	font-size: clamp(26px, 2.4vw, 36px) !important;
	line-height: 1.1 !important;
	letter-spacing: .01em;
}
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product .woocommerce-loop-product__title { text-transform: none; font-weight: 700; }

/* ---------- Tile images: same size everywhere (Salient resets img heights) ---------- */
.afvf-tile .afvf-tile-img {
	display: block; aspect-ratio: 4 / 3; overflow: hidden;
	border-radius: 4px; background: var(--af-soft); margin-bottom: 6px;
}
.afvf-tile .afvf-tile-img img {
	width: 100% !important; height: 100% !important; max-width: none !important;
	object-fit: cover; display: block;
}
.afvf-make-tiles .afvf-tile .afvf-tile-img { aspect-ratio: 3 / 2; background: transparent; }
.afvf-make-tiles .afvf-tile .afvf-tile-img img { object-fit: contain; }

/* ---------- Mobile: tighter hero (desktop unchanged) ---------- */
@media (max-width: 690px) {
	.wpb_row.afp-hero { padding-top: 36px !important; padding-bottom: 56px !important; }
	.afp-hero .afp-eyebrow { margin-bottom: 10px; }
	.afp-hero h1 { margin-bottom: 14px; }
	.afp-hero .afp-lead { margin-bottom: 24px; }
}