/* ==========================================================================
   FAPP Elements
   --------------------------------------------------------------------------
   The .fapp-ras rules below are the styles already running on the site, moved
   here from the Hello child theme's style.css so the plugin is self-contained.

   IMPORTANT: delete the .fapp-ras block from the theme's style.css when this
   plugin goes live, or the two copies will fight and the theme's will win.
   ========================================================================== */

/* ------------------------------------------------------------ vehicle card */

.fapp-ras {
	--per: 4;
	--gap: 20px;
	position: relative;
	width: 100%;
	box-sizing: border-box;
	margin: 24px 0;
}

.fapp-ras * { box-sizing: border-box; }

.fapp-ras-track {
	display: flex;
	gap: var(--gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: 6px;
	scrollbar-width: none;
}

.fapp-ras-track::-webkit-scrollbar { display: none; }

.fapp-ras-card {
	flex: 0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));
	scroll-snap-align: start;
	position: relative;
	background: #f5f5f5;
	border: 1px solid #ececec;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 1px 5px rgba(0, 0, 0, .06);
	display: flex;
	flex-direction: column;
	transition: box-shadow .3s;
}

.fapp-ras-card:hover { box-shadow: 0 8px 22px rgba(0, 0, 0, .12); }

.fapp-ras-media { position: relative; }

.fapp-ras-media img {
	display: block;
	width: 100%;
	height: 250px;
	object-fit: cover;
	position: relative;
	z-index: 20;
	transition: transform .5s;
}

.fapp-ras-card:hover .fapp-ras-media img { transform: scale(1.06); }

.fapp-ras-media::after {
	content: "";
	position: absolute;
	width: 150px;
	height: 150px;
	background: #ed1b24;
	left: 50%;
	top: 50%;
	transform: translateX(-50%);
	filter: blur(100px);
	border-radius: 999px;
	z-index: 12;
}

.fapp-ras-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 21;
	background: #1b1b1b;
	color: #fff;
	font-family: Barlow, sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	padding: 9px 14px;
	border-radius: 16px;
}

.fapp-ras-drop {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 6px;
	background: #ed1b24;
	transform: translateY(-100%);
	transition: transform .4s;
	z-index: 21;
	pointer-events: none;
}

.fapp-ras-card:hover .fapp-ras-drop { transform: translateY(0); }

.fapp-ras-body {
	position: relative;
	padding: 30px 16px;
	text-align: center;
	background: #f5f5f5;
}

.fapp-ras-title {
	margin: 0 0 14px;
	font-size: 20px !important;
	line-height: 1.25em !important;
	font-weight: 700;
	letter-spacing: .4px;
	color: #0f0f0f;
}

.fapp-ras-title a {
	color: inherit;
	text-decoration: none;
	letter-spacing: 1px;
	text-align: center;
	text-transform: capitalize;
	font-family: Barlow, sans-serif;
	font-weight: 600;
	font-size: 20px !important;
	line-height: 20px !important;
}

.fapp-ras-meta {
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
	transition: filter .35s, opacity .35s;
}

.fapp-ras-card:hover .fapp-ras-meta { filter: blur(1px); }

.fapp-ras-meta li {
	font-family: Barlow, sans-serif;
	font-size: 16px;
	font-weight: 500;
	color: #0f0f0f;
	padding: 3px 0;
	line-height: 1.25em;
}

.fapp-ras-meta li span { font-weight: 500; color: #0f0f0f; }

.fapp-ras-btn {
	position: absolute;
	left: 50%;
	bottom: 20px;
	transform: translate(-50%, 180%);
	opacity: 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #ed1b24;
	color: #fff !important;
	font-family: Barlow, sans-serif !important;
	font-weight: 500;
	font-size: 16px;
	line-height: 1;
	padding: 15px 30px;
	border-radius: 999px;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 4px 12px rgba(237, 27, 36, .35);
	transition: .5s;
}

.fapp-ras-card:hover .fapp-ras-btn { transform: translate(-50%, 0); opacity: 1; }
.fapp-ras-btn:hover { background: #0f0f0f !important; color: #fff !important; }
.fapp-ras-btn svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* Vehicles with no Wrecking Now post of their own fall back to the placeholder.
   Contain rather than cover stops a logo placeholder being cropped, and the
   bloom is hidden because it shows through a contained image. */

.fapp-ras-card.is-placeholder .fapp-ras-media img {
	object-fit: cover;
	
}

.fapp-ras-card.is-placeholder .fapp-ras-media::after { display: none; }

/* ------------------------------------------------------------ slider arrows */

.fapp-ras-nav {
	display: flex;
	justify-content: center;
	gap: 14px;
	margin-top: 18px;
}

.fapp-ras-arrow {
	width: 40px !important;
	max-width: 40px !important;
	height: 40px !important;
	padding: 0 !important;
	border: 1px solid #cfcfcf;
	border-radius: 999px !important;
	background: #fff;
	color: #181818;
	cursor: pointer;
	font-size: 20px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: .5s;
}

.fapp-ras-arrow[data-dir="next"] { border-color: #1b1b1b; }

/* The shipped arrow points right, so "prev" is the rotated one.
   next is pinned to 0deg on purpose: the older rule in the theme's style.css
   rotates next instead, and if that block is still present both buttons would
   otherwise end up pointing the same way. */
.fapp-ras-arrow[data-dir="prev"] svg { rotate: 180deg; }
.fapp-ras-arrow[data-dir="next"] svg { rotate: 0deg; }

.fapp-ras-nav button:hover,
.fapp-ras-nav button:focus {
	background: #000 !important;
	color: #fff;
}

/* The arrow path is fill="currentColor", so colour follows the button. The old
   rule targeted stroke, which this path does not use. */
.fapp-ras-arrow svg path { fill: currentColor; }

.fapp-ras-nav button:hover svg path,
.fapp-ras-nav button:focus svg path { fill: #fff !important; stroke: none !important; }

/* -------------------------------------------------------------- grid variant */

.fapp-ras--grid .fapp-ras-track {
	display: grid;
	grid-template-columns: repeat(var(--per), minmax(0, 1fr));
	overflow: visible;
	scroll-snap-type: none;
	padding-bottom: 0;
}

.fapp-ras--grid .fapp-ras-card {
	flex: none;
	width: 100%;
	scroll-snap-align: none;
}

/* ---------------------------------------------------------- wrecking browser */

.fapp-wrecking { --per: 4; }
.fapp-wrecking.is-loading { opacity: .55; pointer-events: none; }

.fapp-wrecking-filters {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	background: #fff;
	border-radius: 8px;
	padding: 18px 22px;
	box-shadow: 0 2px 14px rgba(0, 0, 0, .08);
	margin-top: -50px;
}

.fapp-wrecking-filters-label {
	font-family: Barlow, sans-serif;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .6px;
	color: #0f0f0f;
	white-space: nowrap;
}

.fapp-wrecking-filters select {
	flex: 1 1 160px;
	min-width: 140px;
	font-family: Barlow, sans-serif;
	font-size: 15px;
	color: #0f0f0f;
	background: #fff;
	border: 1px solid #d7d7d7;
	border-radius: 999px;
	padding: 11px 18px;
}

.fapp-wrecking-filters select:disabled { opacity: .55; }

.fapp-wrecking-submit {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #ed1b24;
	color: #fff;
	font-family: Barlow, sans-serif;
	font-weight: 500;
	font-size: 15px;
	line-height: 1;
	border: 0;
	border-radius: 999px;
	padding: 13px 26px;
	cursor: pointer;
	white-space: nowrap;
	transition: .4s;
}

.fapp-wrecking-submit:hover { background: #0f0f0f; }

.fapp-wrecking-results { margin-top: 8px; }

.fapp-wrecking-empty {
	text-align: center;
	font-family: Barlow, sans-serif;
	font-size: 17px;
	color: #5b6472;
	padding: 48px 16px;
}

/* ----------------------------------------------------------------- paging */

.fapp-wrecking-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 34px;
}

.fapp-wrecking-pagination button {
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid #cfcfcf;
	border-radius: 999px;
	background: #fff;
	color: #181818;
	font-family: Barlow, sans-serif;
	font-size: 15px;
	cursor: pointer;
	transition: .3s;
}

.fapp-wrecking-pagination button:hover:not(:disabled) { background: #000; color: #fff; }

.fapp-wrecking-pagination button.is-current {
	background: #ed1b24;
	border-color: #ed1b24;
	color: #fff;
	font-weight: 600;
}

.fapp-wrecking-pagination button:disabled { opacity: .4; cursor: default; }
.fapp-page-gap { color: #5b6472; padding: 0 2px; }

#wrecking_previous_btn.is-loading { opacity: .6; pointer-events: none; }

/* ------------------------------------------------------------ breakpoints */

@media (max-width: 1024px) {
	.fapp-ras, .fapp-wrecking { --per: 3; }
}

@media (max-width: 991px) {
	.fapp-ras, .fapp-wrecking { --per: 2; }
}

@media (max-width: 767px) {
	.fapp-ras, .fapp-wrecking { --per: 1; }

	.fapp-wrecking-filters { padding: 14px 16px; }
	.fapp-wrecking-filters select { flex-basis: 100%; }
	.fapp-wrecking-submit { width: 100%; justify-content: center; }
}

/* ==========================================================================
   Shop by Category  [shop_by_category]
   ========================================================================== */

.fapp-shopcat {
	/* --cols is what the shortcode writes inline. --per is what the grid reads.
	   Keeping them separate matters: an inline custom property outranks every
	   stylesheet rule, so writing --per directly made the breakpoints below
	   dead code. */
	--per: var(--cols, 4);
	--gap: 20px;
	--side: 23%;
	display: grid;
	/* A share of the width rather than a fixed 260px, so the sidebar holds its
	   proportion on a wide screen instead of shrinking away from the design.
	   The 280px floor stops 20px text wrapping every label on a narrow one. */
	grid-template-columns: minmax(280px, var(--side)) minmax(0, 1fr);
	gap: 32px;
	box-sizing: border-box;
	width: 100%;
	margin: 24px 0;
}

.fapp-shopcat *,
.fapp-shopcat *::before,
.fapp-shopcat *::after { box-sizing: border-box; }

.fapp-shopcat--nosidebar { grid-template-columns: minmax(0, 1fr); }

/* ------------------------------------------------------------- the sidebar */

.fapp-shopcat-side {
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 6px;
	padding: 10px;
	align-self: start;
}

.fapp-shopcat-side-title {
	margin: 0 0 14px;
	font-family: 'Barlow', sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 28px;
	letter-spacing: .4px;
	text-transform: uppercase;
	color: #0f0f0f;
}

.fapp-shopcat-tree,
.fapp-shopcat-children {
	list-style: none;
	margin: 0;
	padding: 0;
}

.fapp-shopcat-branch + .fapp-shopcat-branch { margin-top: 8px; }

.fapp-shopcat-details { border-radius: 6px; }

.fapp-shopcat-summary,
.fapp-shopcat-leaf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 20px;
	background: #f5f5f5;
	border: 1px solid #ececec;
	border-radius: 999px;
	font-family: 'Barlow', sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 22px;
	letter-spacing: 0;
	color: #0f0f0f;
	text-decoration: none;
	cursor: pointer;
	transition: background .2s ease, border-color .2s ease;
}

.fapp-shopcat-summary::-webkit-details-marker,
.fapp-shopcat-summary::marker { display: none; content: ""; }

.fapp-shopcat-summary:hover,
.fapp-shopcat-leaf:hover { background: #ececec; border-color: #dcdcdc; }

/* The "+" that becomes a "−" when the section is open. Drawn in CSS so there
   is no icon font dependency and no extra request. */
.fapp-shopcat-summary-icon {
	position: relative;
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
}

.fapp-shopcat-summary-icon::before,
.fapp-shopcat-summary-icon::after {
	content: "";
	position: absolute;
	background: #0f0f0f;
	transition: transform .2s ease, opacity .2s ease;
}

.fapp-shopcat-summary-icon::before { top: 5px; left: 0; width: 12px; height: 2px; }
.fapp-shopcat-summary-icon::after  { top: 0; left: 5px; width: 2px; height: 12px; }

.fapp-shopcat-details[open] .fapp-shopcat-summary-icon::after { transform: scaleY(0); opacity: 0; }

.fapp-shopcat-children { padding: 8px 0 4px 10px; }

.fapp-shopcat-children li + li { margin-top: 2px; }

.fapp-shopcat-opt {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 10px;
	font-family: 'Barlow', sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 22px;
	letter-spacing: 0;
	color: #4a4a4a;
	border-radius: 4px;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}

.fapp-shopcat-opt:hover { background: #f5f5f5; color: #0f0f0f; }

.fapp-shopcat-opt input[type="radio"] {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: #ED1B24;
	cursor: pointer;
}

.fapp-shopcat-opt-name { flex: 1 1 auto; }

.fapp-shopcat-opt:has(input:checked) { color: #0f0f0f; font-weight: 600; }

.fapp-shopcat-n { flex: 0 0 auto; font-size: 12px; line-height: 22px; color: #8a8a8a; }

/* "All categories" — clears the filter */
.fapp-shopcat-all {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
	padding: 8px 10px;
	font-family: 'Barlow', sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 22px;
	color: #4a4a4a;
	border-radius: 4px;
	cursor: pointer;
}

.fapp-shopcat-all:hover { background: #f5f5f5; color: #0f0f0f; }
.fapp-shopcat-all input { width: 16px; height: 16px; margin: 0; accent-color: #ED1B24; cursor: pointer; }
.fapp-shopcat-all:has(input:checked) { color: #0f0f0f; font-weight: 600; }

.fapp-shopcat-apply {
	margin-top: 12px;
	padding: 8px 16px;
	font-size: 13px;
	color: #fff;
	background: #ED1B24;
	border: 0;
	border-radius: 4px;
	cursor: pointer;
}

/* End of the drill-down: parts exist, sub-categories do not. */
.fapp-shopcat-leafpanel {
	    padding: 40px 28px;
    text-align: center;
    background: #f7f7f7;
    border: 1px solid #ececec;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

.fapp-shopcat-leafpanel-title {
	margin: 0 0 6px;
	font-size: 17px;
	font-weight: 700;
	color: #0f0f0f;
}

.fapp-shopcat-leafpanel-count {
	margin: 0 0 18px;
	font-size: 13px;
	color: #6a6a6a;
}

.fapp-shopcat-leafpanel-btn {
    display: inline-block;
    padding: 14px 26px;
    font-size: 16px !important;
    font-weight: 600;
    color: #fff;
    background: #ED1B24;
    border-radius: 999px;
    text-decoration: none;
    transition: background .2s ease;
}

.fapp-shopcat-leafpanel-btn:hover { background: #c4161d; color: #fff; }

/* ---------------------------------------------------------------- the grid */

.fapp-shopcat-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 18px;
}

.fapp-shopcat-heading {
	margin: 0;
	font-weight: 700;
	text-transform: uppercase;
	color: #0f0f0f;
}

.fapp-shopcat-tools {
	display: flex;
	align-items: center;
	gap: 14px;
}

.fapp-shopcat-count { font-size: 12px; color: #8a8a8a; }

.fapp-shopcat-sort {
	padding: 7px 12px;
	font-size: 12.5px;
	color: #0f0f0f;
	background: #fff;
	border: 1px solid #dcdcdc;
	border-radius: 6px;
	cursor: pointer;
}

.fapp-cat-grid {
	display: grid;
	grid-template-columns: repeat(var(--per), minmax(0, 1fr));
	gap: var(--gap);
}

.fapp-cat-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 6px;
	overflow: hidden;
	transition: box-shadow .3s ease, border-color .3s ease;
}

.fapp-cat-card:hover { box-shadow: 0 8px 22px rgba(0, 0, 0, .10); border-color: #dcdcdc; }

.fapp-cat-card-link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.fapp-cat-media {
	position: relative;
	overflow: hidden;
	background: #f7f7f7;
	aspect-ratio: 1 / 1;
}

.fapp-cat-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}

.fapp-cat-card:hover .fapp-cat-media img { transform: scale(1.06); }

.fapp-cat-body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px 18px 22px;
	text-align: center;
}

.fapp-cat-title {
	margin: 0;
	/* Part and category names run long. Without a clamp one card grows and
	   drags the whole row with it. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-family: 'Barlow', sans-serif;
	font-size: 20px;
	font-weight: 600;
	line-height: 28px;
	letter-spacing: 1px;
	text-align: center;
	text-transform: capitalize;
	color: #0f0f0f;
}

.fapp-cat-desc {
	margin: 0;
	font-size: 12px;
	line-height: 1.5;
	color: #6a6a6a;
}

.fapp-cat-count { font-size: 11.5px; color: #8a8a8a; }

.fapp-shopcat-empty {
	padding: 28px 0;
	font-size: 14px;
	color: #6a6a6a;
}

/* ---------------------------------------------------------- pagination */

.fapp-shopcat-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 26px;
}

.fapp-shopcat-pagination button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	width: 40px !important;
	height: 40px !important;
	padding: 0 !important;
	font-family: 'Barlow', sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	color: #0f0f0f;
	background: #fff;
	border: 1px solid #dcdcdc;
	border-radius: 6px;
	cursor: pointer;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.fapp-shopcat-pagination button:hover:not(:disabled),
.fapp-shopcat-pagination button:focus-visible:not(:disabled) {
	color: #fff;
	background: #ED1B24;
	border-color: #ED1B24;
}

nav.fapp-shopcat-pagination button:focus:not(:disabled),
nav.fapp-shopcat-pagination button:focus-visible:not(:disabled) {
	color: #fff !important;
	background: #ED1B24 !important;
	border-color: #ED1B24 !important;
}

.fapp-shopcat-pagination button.is-current {
	color: #fff;
	background: #ED1B24;
	border-color: #ED1B24;
}

.fapp-shopcat-pagination button:disabled { opacity: .4; cursor: default; }

.fapp-shopcat-pagination .fapp-page-gap { padding: 0 2px; color: #8a8a8a; }

.fapp-shopcat--compact .fapp-shopcat-view-all-wrap {
	display: flex;
	justify-content: center;
	margin-top: 20px;
}

.fapp-shopcat--compact a.fapp-shopcat-view-all,
.fapp-shopcat--compact a.fapp-shopcat-view-all:link,
.fapp-shopcat--compact a.fapp-shopcat-view-all:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 40px;
	padding: 14px 22px;
	font-family: 'Barlow', sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	color: #fff;
	background: #ED1B24;
	border: 1px solid #ED1B24;
	border-radius: 999px;
	text-decoration: none;
	transition: background .2s ease, border-color .2s ease;
}

.fapp-shopcat--compact .fapp-shopcat-view-all-arrow {
	display: block;
	flex: 0 0 11px;
	width: 11px;
	height: 11px;
}

.fapp-shopcat--compact a.fapp-shopcat-view-all:hover,
.fapp-shopcat--compact a.fapp-shopcat-view-all:focus-visible {
	color: #fff;
	background: #c4161d;
	border-color: #c4161d;
}

.fapp-shopcat-results[aria-busy="true"] { opacity: .55; transition: opacity .15s ease; }

/* -------------------------------------------------------------- responsive */

/* Column ladder, shared by both grids:
     1920-1601   4 across
     1600-1280   3 across
     1279-576    2 across
      575 and below   1
   The sidebar type is a flat 14px and does not step. */
@media (max-width: 1600px) {

	.fapp-shopcat { --per: var(--cols-md, 3); }

	/* Must match the specificity of the base rule above, or the kit wins. */
	.fapp-shopcat h3.fapp-cat-title,
	.fapp-plp h3.fapp-ras-title,
	.fapp-plp h3.fapp-ras-title a { font-size: 18px; line-height: 26px; }

	.fapp-plp .fapp-prod-price { font-size: 16px; line-height: 26px; }
}

@media (max-width: 1279px) {
	.fapp-shopcat { --per: var(--cols-sm, 2); }
}

@media (max-width: 991px) {
	.fapp-shopcat { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

@media (max-width: 575px) {
	.fapp-shopcat { --per: 1; }
	.fapp-shopcat-head { align-items: flex-start; flex-direction: column; }
}

/* --------------------------------------------------------------------------
   Theme override guard

   Elementor's global kit ships `.elementor-kit-NNNNN a { color: … }`, which is
   specificity (0,2,0) and beats a plain single class. That turned the leaf
   panel's white button label into #ED1B24 on a #D81F26 background — red on
   red, invisible. Repeating the class against its tag lifts these to (0,2,1)
   so they win without !important. Verified against kit 34076 on staging.
   -------------------------------------------------------------------------- */

.fapp-shopcat a.fapp-shopcat-leafpanel-btn,
.fapp-shopcat a.fapp-shopcat-leafpanel-btn:link,
.fapp-shopcat a.fapp-shopcat-leafpanel-btn:visited,
.fapp-shopcat a.fapp-shopcat-leafpanel-btn:hover,
.fapp-shopcat a.fapp-shopcat-leafpanel-btn:focus {
	color: #fff;
	text-decoration: none;
}

.fapp-shopcat a.fapp-shopcat-leafpanel-btn:hover { background: #c4161d; }

.fapp-shopcat a.fapp-cat-card-link,
.fapp-shopcat a.fapp-cat-card-link:link,
.fapp-shopcat a.fapp-cat-card-link:visited,
.fapp-shopcat a.fapp-cat-card-link:hover {
	color: inherit;
	text-decoration: none;
}

.fapp-shopcat h2.fapp-shopcat-heading { color: #0f0f0f; }
.fapp-shopcat h2.fapp-shopcat-side-title { color: #0f0f0f; }
.fapp-shopcat h3.fapp-shopcat-leafpanel-title { color: #0f0f0f; }

/* Card headings. Size has to be repeated at this weight or the kit's own h3
   rule sets it instead. */
.fapp-shopcat h3.fapp-cat-title,
.fapp-plp h3.fapp-ras-title,
.fapp-plp h3.fapp-ras-title a {
	font-family: 'Barlow', sans-serif;
	font-size: 20px;
	font-weight: 600;
	line-height: 28px;
	letter-spacing: 1px;
	text-align: center;
	text-transform: capitalize;
	color: #0f0f0f;
}

.fapp-shopcat h2.fapp-shopcat-heading {
	font-family: 'Barlow', sans-serif;
	font-weight: 700;
}

/* ==========================================================================
   Product Listing  [product_listing]
   Reuses the .fapp-shopcat shell and the .fapp-ras-card family; only what the
   design adds is defined here.
   ========================================================================== */

.fapp-plp-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 18px;
}

.fapp-plp-vehicle {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 12px;
	min-width: 0;
}

.fapp-plp-vehicle-label {
	font-family: 'Barlow', sans-serif;
	font-size: 20px;
	font-weight: 600;
	line-height: 28px;
	color: #0f0f0f;
}

.fapp-plp-vehicle-label { flex: 0 0 auto; white-space: nowrap; }

.fapp-plp-vehicle select {
	flex: 1 1 0;
	min-width: 0;
	padding: 11px 18px;
	font-family: 'Barlow', sans-serif;
	font-size: 15px;
	font-weight: 500;
	color: #0f0f0f;
	background: #f5f5f5;
	border: 1px solid #ececec;
	border-radius: 999px;
	cursor: pointer;
	transition: border-color .2s ease, background .2s ease;
}

.fapp-plp-vehicle select:hover:not(:disabled) { border-color: #dcdcdc; background: #ececec; }
.fapp-plp-vehicle select:disabled { opacity: .55; cursor: default; }

.fapp-plp-sort {
	padding: 11px 18px;
	font-family: 'Barlow', sans-serif;
	font-size: 15px;
	font-weight: 500;
	color: #0f0f0f;
	background: #f5f5f5;
	border: 1px solid #ececec;
	border-radius: 999px;
	cursor: pointer;
}

/* ------------------------------------------------------------ trust strip */

.fapp-plp-trust {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: 22px;
	list-style: none;
	margin: 0 0 26px;
	padding: 18px 0;
	border-top: 1px solid #ececec;
	border-bottom: 1px solid #ececec;
}

.fapp-plp-trust-item {
	display: flex;
	align-items: center;
	gap: 12px;
	/* Equal shares of whatever is left, so the four sit on one line and the
	   longest label does not steal room from the rest. */
	flex: 1 1 0;
	min-width: 0;
}

.fapp-plp-trust-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	color: #ED1B24;
	border: 1px solid #f3c6c8;
	border-radius: 50%;
}

.fapp-plp-trust-icon svg { width: 20px; height: 20px; }

.fapp-plp-trust-text { display: flex; flex-direction: column; min-width: 0; }

.fapp-plp-trust-text strong {
	font-family: 'Barlow', sans-serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 20px;
	color: #0f0f0f;
}

.fapp-plp-trust-text em {
	font-size: 12.5px;
	font-style: normal;
	line-height: 18px;
	color: #6a6a6a;
}

/* ------------------------------------------------------------ the cards */

/* The slider shell sets its own --per (4 -> 3 at 1024 -> 2 at 991 -> 1 at 767)
   for the carousel. Inside the listing that ladder is wrong: the columns must
   follow .fapp-shopcat's. Explicitly inheriting hands the outer value down. */
.fapp-plp .fapp-ras,
.fapp-plp .fapp-ras--grid { --per: inherit; }

/* The grid variant of the slider track: no scroll, wrap into rows. */
.fapp-plp .fapp-ras--grid .fapp-ras-track {
	display: grid;
	grid-template-columns: repeat(var(--per), minmax(0, 1fr));
	gap: var(--gap, 20px);
	overflow: visible;
}

.fapp-plp .fapp-ras--grid .fapp-ras-card { flex: 1 1 auto; }

/* In Stock sits where "Recently Added" does on a vehicle card. */
.fapp-plp .fapp-prod-badge {
	padding: 10px;
	font-family: 'Barlow', sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 100%;
	letter-spacing: 0;
	color: #fff;
	background: #1BC629;
	border-radius: 999px;
}

.fapp-plp .fapp-prod-badge.is-out { background: #6a6a6a; }

.fapp-plp .fapp-prod-price {
	margin: 6px 0 0;
	font-family: 'Barlow', sans-serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 28px;
	letter-spacing: 1px;
	text-align: center;
	text-transform: capitalize;
	color: #525252;
}

.fapp-plp .fapp-prod-price .amount,
.fapp-plp .fapp-prod-price bdi { color: #525252; font-weight: 500; }

.fapp-prod-price del { margin-right: 6px; font-weight: 400; opacity: .55; }
.fapp-prod-price ins { text-decoration: none; }

.fapp-plp .fapp-ras-meta { text-align: center; }

@media (max-width: 1600px) {
	.fapp-plp-vehicle-label { font-size: 16px; }
	.fapp-plp-vehicle select,
	.fapp-plp-sort { font-size: 13px; padding: 9px 14px; }
}

/* Below the 2-column step the vehicle row has no width left to share, so it
   is allowed to wrap again rather than squeezing three selects to nothing. */
@media (max-width: 1279px) {
	.fapp-plp-vehicle { flex-wrap: wrap; }
	.fapp-plp-vehicle select { flex: 1 1 130px; }
}

@media (max-width: 991px) {
	.fapp-plp-trust { flex-wrap: wrap; }
	.fapp-plp-trust-item { flex: 1 1 42%; }
	.fapp-plp-head { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 575px) {
	.fapp-plp-trust-item { flex: 1 1 100%; }
	.fapp-plp-vehicle { width: 100%; }
	.fapp-plp-vehicle select { flex: 1 1 140px; min-width: 0; }
}

/* Product card titles clamp too — the listing shows full part descriptions,
   which run to six lines unchecked. */
.fapp-plp .fapp-ras-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.fapp-plp .fapp-ras-title a { display: inline; }

/* The client's artwork carries its own tinted disc, so no second ring here. */
.fapp-plp-trust-icon {
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 0;
}

.fapp-plp-trust-icon svg { width: 44px; height: 44px; }

/* The rule under a product card title.
   The theme draws this as a 2px PNG (line-center.png) on the same pseudo. This
   replaces it with the gradient from the design — same position, no image
   request. The pseudo is absolutely positioned, so it sits outside the title's
   -webkit-box and the line clamp cannot swallow it. */
.fapp-plp .fapp-ras-title { position: relative; }

.fapp-plp .fapp-ras-title.heading-left-faded-left-center::after,
.fapp-plp h3.fapp-ras-title::after {
	position: absolute;
	content: '';
	left: 50%;
	bottom: -14px;
	transform: translateX(-50%);
	width: 100%;
	height: 0;
	background: none;
	border-bottom: 1px solid;
	border-image-source: linear-gradient(90deg, rgba(237, 27, 36, 0) 0%, #ED1B24 50%, rgba(237, 27, 36, 0) 100%);
	border-image-slice: 1;
}

/* ==========================================================================
   Shop by Brand  [shop_by_brand]
   ========================================================================== */

.fapp-brands {
	/* --cols* arrive inline from the shortcode; --per is what the grid reads,
	   so the breakpoints below can still override it. */
	--per: var(--cols, 4);
	--gap: 20px;
	box-sizing: border-box;
	width: 100%;
	margin: 24px 0;
}

.fapp-brands *,
.fapp-brands *::before,
.fapp-brands *::after { box-sizing: border-box; }

.fapp-brands-grid {
	display: grid;
	grid-template-columns: repeat(var(--per), minmax(0, 1fr));
	gap: var(--gap);
}

/* Keep every dynamic brand card in normal grid flow. The staging child theme
   previously forced its final two cards into columns 2 and 3, which split a
   complete four-card result across two rows. Repeating the component class
   gives this rule enough specificity without relying on !important. */
.fapp-brands.fapp-brands .fapp-brands-grid > .fapp-brand-card {
	grid-column: auto;
}

.fapp-brand-card {
	display: flex;
	flex-direction: column;
	padding: 10px;
	background: #F5F5F5;
	border-radius: 6px;
	overflow: hidden;
	color: #0F0F0F;
	text-decoration: none;
	transition: box-shadow .3s ease;
}

.fapp-brand-card:hover { box-shadow: 0 8px 22px rgba(0, 0, 0, .10); }

/* The logo sits on its own white panel inside the grey card. */
.fapp-brand-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	padding: 34px;
	background: #fff;
	border-radius: 6px;
}

.fapp-brand-logo img {
	max-width: 74%;
	max-height: 100%;
	object-fit: contain;
	transition: transform .4s ease;
}

.fapp-brand-card:hover .fapp-brand-logo img { transform: scale(1.06); }

/* Six of the fourteen makes have no artwork. The name stands in for it. */
.fapp-brand-wordmark {
	font-family: 'Barlow', sans-serif;
	font-size: 2em;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #333;
}

.fapp-brand-body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 16px 6px 8px;
}

.fapp-brand-name,
.fapp-brand-cta-heading {
	font-family: 'Barlow', sans-serif;
	font-size: 20px;
	font-weight: 600;
	line-height: 22px;
	letter-spacing: 1px;
	text-transform: capitalize;
	color: #0F0F0F;
}

.fapp-brand-models {
	font-family: 'Barlow', sans-serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 28px;
	letter-spacing: 0;
	text-transform: capitalize;
	color: #0F0F0F;
}

.fapp-brand-count {
	font-family: 'Barlow', sans-serif;
	font-size: 14px;
	line-height: 20px;
	color: #8a8a8a;
}

.fapp-brands--nocounts .fapp-brand-count { display: none; }
.fapp-brands--nomodels .fapp-brand-models { display: none; }

/* ------------------------------------------------------------- enquiry card */

.fapp-brand-card--cta {
	justify-content: space-between;
	cursor: default;
}

.fapp-brand-card--cta:hover { box-shadow: none; }

.fapp-brand-card--cta .fapp-brand-body { padding: 24px 14px 16px; gap: 10px; }

/* A full-width bar, label left and arrow right, as drawn. */
.fapp-brand-cta-btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 22px;
	font-family: 'Barlow', sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 20px;
	color: #0F0F0F;
	background: #fff;
	border-radius: 6px;
	text-decoration: none;
	transition: background .2s ease, color .2s ease;
}

.fapp-brand-cta-arrow { flex: 0 0 auto; }

.fapp-brands a.fapp-brand-cta-btn:hover {
	color: #fff;
	background: #ED1B24;
}

/* Elementor's kit colours every anchor; these need to keep their own. */
.fapp-brands a.fapp-brand-card,
.fapp-brands a.fapp-brand-card:hover {
	justify-content: space-between;
	color: #0F0F0F;
	text-decoration: none;
}
.fapp-brands a.fapp-brand-cta-btn { color: #0F0F0F; }

@media (max-width: 1600px) {

	.fapp-brands { --per: var(--cols-md, 3); }

	/* Two points off every label, as specified. */
	.fapp-brand-name,
	.fapp-brand-cta-heading { font-size: 18px; line-height: 20px; }

	.fapp-brand-models { font-size: 18px; line-height: 26px; }

	.fapp-brand-count { font-size: 12px; }

	.fapp-brand-cta-btn { font-size: 13px; padding: 16px 18px; }

	.fapp-brand-wordmark { font-size: 2em; }
}
@media (max-width: 991px)  { .fapp-brands { --per: var(--cols-sm, 2); } }
@media (max-width: 575px)  { .fapp-brands { --per: 1; } }

/* ==========================================================================
   Part search bar  [part_search]
   ========================================================================== */

.fapp-partsearch {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 12px;
	box-sizing: border-box;
	width: 100%;
	margin: 20px 0;
}

.fapp-partsearch * { box-sizing: border-box; }

.fapp-partsearch-label {
	flex: 0 0 auto;
	max-width: 190px;
	font-family: 'Barlow', sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: #0F0F0F;
}

.fapp-partsearch select {
	flex: 1 1 0;
	min-width: 0;
	padding: 12px 18px;
	font-family: 'Barlow', sans-serif;
	font-size: 15px;
	font-weight: 500;
	color: #0F0F0F;
	background: #F5F5F5;
	border: 1px solid #ececec;
	border-radius: 999px;
	cursor: pointer;
	transition: background .2s ease, border-color .2s ease;
}

.fapp-partsearch select:hover:not(:disabled) { background: #ececec; border-color: #dcdcdc; }
.fapp-partsearch select:disabled { opacity: .55; cursor: default; }

.fapp-partsearch-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	gap: 8px;
	padding: 12px 24px;
	font-family: 'Barlow', sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	background: #ED1B24;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition: background .2s ease;
}

.fapp-partsearch-submit:hover { background: #c4161d; }
.fapp-partsearch-submit svg { flex: 0 0 auto; }

@media (max-width: 1600px) {
	.fapp-partsearch-label { font-size: 18px; }
	.fapp-partsearch select,
	.fapp-partsearch-submit { font-size: 13px; padding: 10px 16px; }
}

@media (max-width: 991px) {
	.fapp-partsearch { flex-wrap: wrap; }
	.fapp-partsearch-label { flex: 1 1 100%; max-width: none; }
	.fapp-partsearch select { flex: 1 1 140px; }
	.fapp-partsearch-submit { flex: 1 1 100%; }
}

/* ==========================================================================
   Vehicles for a category  [vehicles_for_category]
   ========================================================================== */

.fapp-vfc { --gap: 20px; box-sizing: border-box; width: 100%; margin: 24px 0; }
.fapp-vfc * { box-sizing: border-box; }

.fapp-vfc-filter {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
}

.fapp-vfc-filter-label {
	font-family: 'Barlow', sans-serif;
	font-weight: 600;
	color: #0F0F0F;
}

.fapp-vfc-engine {
	min-width: 190px;
	padding: 11px 18px;
	font-family: 'Barlow', sans-serif;
	font-size: 14px;
	font-weight: 500;
	color: #0F0F0F;
	background: #F5F5F5;
	border: 1px solid #ececec;
	border-radius: 999px;
	cursor: pointer;
}

/* Same grid treatment the listing gets: the slider shell must not impose its
   own column ladder here either. */
.fapp-vfc .fapp-ras,
.fapp-vfc .fapp-ras--grid { --per: var(--cols, 4); }

.fapp-vfc .fapp-ras--grid .fapp-ras-track {
	display: grid;
	grid-template-columns: repeat(var(--per), minmax(0, 1fr));
	gap: var(--gap);
	overflow: visible;
}

.fapp-vfc-results[aria-busy="true"] { opacity: .55; transition: opacity .15s ease; }

@media (max-width: 1600px) { .fapp-vfc .fapp-ras, .fapp-vfc .fapp-ras--grid { --per: var(--cols-md, 3); } }
@media (max-width: 1279px) { .fapp-vfc .fapp-ras, .fapp-vfc .fapp-ras--grid { --per: var(--cols-sm, 2); } }
@media (max-width: 575px)  { .fapp-vfc .fapp-ras, .fapp-vfc .fapp-ras--grid { --per: 1; } }

/* --------------------------------------------------------------------------
   Brand grid, logo layout   [shop_by_brand layout="logo"]
   Logo on white, one action bar under it. No name or model line.
   -------------------------------------------------------------------------- */

.fapp-brands--logo .fapp-brand-card {
	padding: 0;
	background: #fff;
	border: 1px solid #ececec;
}

.fapp-brands--logo .fapp-brand-logo {
	aspect-ratio: 16 / 11;
	border: 6px solid #F5F5F5;
	padding: 30px;
	border-radius: 0;
	height: 280px;
}

.fapp-brand-action {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 14px 18px;
	font-family: 'Barlow', sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 20px;
	color: #0F0F0F;
	background: #F5F5F5;
	transition: background .2s ease, color .2s ease;
}

.fapp-brand-action svg { flex: 0 0 auto; }

.fapp-brands a.fapp-brand-card--logo:hover .fapp-brand-action {
	color: #fff;
	background: #ED1B24;
}

@media (max-width: 1600px) {
	.fapp-brand-action { font-size: 13px; padding: 12px 16px; }
	.fapp-brands--logo .fapp-brand-logo { padding: 24px; }
}

/* --------------------------------------------------------------------------
   Model landing cards on a make page   [vehicle_make_models]
   -------------------------------------------------------------------------- */

.fapp-make-models,
.fapp-make-models * { box-sizing: border-box; }

.fapp-make-models__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	align-items: stretch;
	gap: 16px;
}

.fapp-make-models__card {
	display: grid;
	grid-template-rows: minmax(0, 1fr) 52px;
	aspect-ratio: 385 / 345;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: #f5f5f5;
	color: #0f0f0f;
	text-decoration: none;
	overflow: hidden;
	transition: box-shadow .2s ease;
}

.fapp-make-models a.fapp-make-models__card,
.fapp-make-models a.fapp-make-models__card:hover { color: #0f0f0f; text-decoration: none; }

.fapp-make-models__card:hover,
.fapp-make-models__card:focus-visible {
	box-shadow: 0 5px 14px rgba(0, 0, 0, .08);
}

.fapp-make-models__visual {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	min-height: 0;
	margin: 9px 9px 0;
	padding: 12px;
	border-radius: 6px;
	background: #fff;
}

.fapp-make-models__visual img {
	display: block;
	width: auto;
	height: auto;
	max-width: 80%;
	max-height: 65%;
	object-fit: contain;
}

.fapp-make-models__wordmark {
	max-width: 100%;
	font-family: 'Barlow', sans-serif;
	font-size: 28px;
	font-weight: 800;
	line-height: 1.15;
	text-align: center;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.fapp-make-models__action {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-width: 0;
	padding: 0 24px;
	background: #f5f5f5;
	font-family: 'Barlow', sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 28px;
}

.fapp-make-models__action svg { flex: 0 0 auto; width: 10px; }

.fapp-make-models__more { min-width: 0; width: 100%; }
.fapp-make-models__more > summary { width: 100%; list-style: none; cursor: pointer; }
.fapp-make-models__more > summary::-webkit-details-marker { display: none; }
.fapp-make-models__more > summary::marker { content: ''; }

.fapp-make-models__more-list {
	margin: 0;
	padding: 6px 12px 10px;
	list-style: none;
	border: 3px solid #f1f1f1;
	border-top: 0;
	background: #fff;
}

.fapp-make-models__more-list li + li { border-top: 1px solid #eee; }
.fapp-make-models__more-list a {
	display: block;
	padding: 10px 4px;
	color: #171717;
	font: 500 13px/18px 'Barlow', sans-serif;
	text-decoration: none;
}
.fapp-make-models__more-list a:hover,
.fapp-make-models__more-list a:focus-visible { color: #d91e27; text-decoration: underline; }

@media (max-width: 991px) {
	.fapp-make-models__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575px) {
	.fapp-make-models__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.fapp-make-models__action { padding: 0 16px; font-size: 14px; }
}

/* Model-page overview cards. Elementor owns the section heading and copy. */
.fapp-model-overview,
.fapp-model-overview * { box-sizing: border-box; }

.fapp-model-overview__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	align-items: center;
	justify-content: center;
}

.fapp-model-overview__card {
	display: flex;
	position: relative;
	flex: 1 1 24%;
	width: 24%;
	min-width: 0;
	min-height: 150px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 24px 20px;
	border: 0;
	text-align: center;
	background: #ED1B240A;
	border-radius: 6px;
}

.fapp-model-overview__card:not(:last-child)::after {
	position: absolute;
	content: '';
	width: 2px;
	height: 100%;
	right: -8px;
	top: 0;
	background: url('https://demo.transporterspares.com.au/wp-content/uploads/2026/08/10/line-box-vertical.png');
	background-size: contain;
	background-repeat: no-repeat;
}

.fapp-model-overview__title {
	max-width: 100%;
	margin: 0 0 10px;
	font-family: 'Barlow', sans-serif;
	font-size: 20px;
	font-weight: 600;
	line-height: 26px;
	letter-spacing: 0;
	color: #0f0f0f;
	text-align: center;
	text-transform: none;
	overflow-wrap: anywhere;
}

.fapp-model-overview__text {
	max-width: 30ch;
	margin: 0;
	font: 400 16px/22px 'Barlow', sans-serif;
	color: #0f0f0f;
	text-align: center;
	text-wrap: balance;
}

.fapp-model-overview__notice {
	margin: 12px 0 0;
	text-align: center;
	color: #b61b24;
}

@media (max-width: 767px) {
	.fapp-model-overview__grid { gap: 12px; }
	.fapp-model-overview__card {
		flex: 0 0 100%;
		width: 100%;
		min-height: 0;
	}
	.fapp-model-overview__card::after { display: none; }
}

@media (min-width: 768px) and (max-width: 1100px) {
	.fapp-model-overview__card {
		flex: 1 1 32%;
		width: 32%;
	}
}

/* Broad, make-filtered category band; the card markup is shared with shopcat. */
.fapp-make-categories,
.fapp-make-categories * { box-sizing: border-box; }

.fapp-make-categories__grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 10px;
}

.fapp-make-categories .fapp-cat-card {
	min-width: 0;
	border: 0;
	border-radius: 6px;
	background: #f5f5f5;
	box-shadow: none;
}

.fapp-make-categories .fapp-cat-card-link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: #0f0f0f;
	text-decoration: none;
}

.fapp-make-categories .fapp-cat-media {
	aspect-ratio: 250 / 237;
	background: #f3f3f3;
}

.fapp-make-categories .fapp-cat-media img {
	display: block;
	width: 100%;
	height: 100%;
	padding: 12px;
	object-fit: contain;
	transform: none;
}

.fapp-make-categories .fapp-cat-body {
	flex: 1 0 auto;
	justify-content: center;
	align-items: center;
	min-height: 84px;
	padding: 26px 11px 30px;
	text-align: center;
	background: #f5efef;
}

.fapp-make-categories h3.fapp-cat-title {
	width: 100%;
	margin: 0;
	font-family: 'Barlow', sans-serif;
	font-size: 20px;
	font-weight: 600;
	line-height: 28px;
	letter-spacing: 0;
	text-align: center;
	text-transform: capitalize;
}

.fapp-make-categories .fapp-cat-desc { display: none; }
.fapp-make-categories .fapp-cat-card:hover .fapp-cat-media img { transform: none; }
.fapp-make-categories .fapp-cat-card:hover { box-shadow: 0 5px 14px rgba(0, 0, 0, .08); }

@media (max-width: 991px) {
	.fapp-make-categories__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 575px) {
	.fapp-make-categories__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fapp-make-categories h3.fapp-cat-title { font-size: 16px; line-height: 22px; }
	.fapp-make-categories .fapp-cat-body { min-height: 70px; padding: 16px 8px 20px; }
}

/* Stock-backed category and vehicle bands on a make landing Page. */
.fapp-make-available,
.fapp-make-available * { box-sizing: border-box; }

.fapp-make-available__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}

.fapp-make-available .fapp-cat-card {
	min-width: 0;
	border: 0;
	border-radius: 6px;
	background: #f5f5f5;
	box-shadow: none;
}

.fapp-make-available .fapp-cat-card-link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: #0f0f0f;
	text-decoration: none;
}
.fapp-make-categories h3.fapp-cat-title{
display: -webkit-box; /* Required for flexbox-based clamping */
-webkit-box-orient: vertical; /* Vertical orientation */
-webkit-line-clamp: 1; /* Show only 3 lines */
overflow: hidden; /* Hide overflowing text */
}
.fapp-make-available .fapp-cat-media {
	aspect-ratio: 385 / 298;
	background: #f3f3f3;
}

.fapp-make-available .fapp-cat-media img {
	display: block;
	width: 100%;
	height: 100%;
	padding: 12px;
	object-fit: contain;
	transform: none;
}

.fapp-make-available .fapp-cat-media::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg, transparent 15%, rgba(237, 27, 36, .1) 50%, transparent 85%);
	pointer-events: none;
}

.fapp-make-available .fapp-cat-stock-badge {
	position: absolute;
	z-index: 2;
	top: 20px;
	right: 20px;
	padding: 6px 14px;
	border-radius: 999px;
	background: #1bc629;
	color: #fff;
	font: 500 18px/1 'Barlow', sans-serif;
}

.fapp-make-available .fapp-cat-body {
	flex: 1 0 auto;
	gap: 0;
	align-items: center;
	min-height: auto;
	padding: 20px 10px;
	text-align: center;
	background: #f5f5f5;
}

.fapp-make-available h3.fapp-cat-title {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 100%;
	min-height: 28px;
	margin: 0;
	padding: 0;
	border: 0;
	background: #f5f5f5;
	font-family: 'Barlow', sans-serif;
	font-size: 20px;
	font-weight: 600;
	line-height: 28px;
	letter-spacing: 0;
	text-transform: capitalize;
/* 	width: 300px; */
	display: -webkit-box; /* Required for flexbox-based clamping */
	-webkit-box-orient: vertical; /* Vertical orientation */
	-webkit-line-clamp: 1; /* Show only 3 lines */
	overflow: hidden; /* Hide overflowing text */
}

.fapp-make-available h3.fapp-cat-title::after {
	position: absolute;
	content: '';
	width: 100%;
	height: 2px;
	background: url('https://demo.transporterspares.com.au/wp-content/uploads/2026/07/29/line-center.png') center / contain no-repeat;
	bottom: -14px;
	left: 50%;
	transform: translateX(-50%);
}

.fapp-make-available .fapp-cat-desc {
	flex: 1 0 auto;
	width: 100%;
	min-height: 40px;
	max-width: 259px;
	margin: 0;
	padding: 20px 0 0;
	font: 500 16px/22px 'Barlow', sans-serif;
	color: #0f0f0f;
}

.fapp-make-available .fapp-cat-card--no-desc { align-self: start; }
.fapp-make-available .fapp-cat-card--no-desc .fapp-cat-card-link { height: auto; }
.fapp-make-available .fapp-cat-card--no-desc .fapp-cat-body {
	flex: 0 0 auto;
	min-height: 0;
	padding-bottom: 26px;
}
.fapp-make-available .fapp-cat-card--no-desc h3.fapp-cat-title::after { content: none; }

.fapp-make-available .fapp-cat-card:hover .fapp-cat-media img { transform: none; }
.fapp-make-available .fapp-cat-card:hover { box-shadow: 0 5px 14px rgba(0, 0, 0, .08); }

.fapp-available-vehicles.fapp-ras { --per: 4; --gap: 10px; margin: 0; }

.fapp-make-paged__results[aria-busy="true"] { opacity: .55; transition: opacity .15s ease; }
.fapp-make-paged__error { margin: 12px 0 0; text-align: center; color: #b61b24; }

@media (max-width: 991px) {
	.fapp-make-available__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fapp-available-vehicles.fapp-ras { --per: 2; }
}

@media (max-width: 575px) {
	.fapp-make-available__grid { grid-template-columns: minmax(0, 1fr); }
	.fapp-available-vehicles.fapp-ras { --per: 1; }
	.fapp-make-available .fapp-cat-stock-badge { top: 12px; right: 12px; font-size: 15px; }
}

/* Landing-page responsive overrides. Keep the shared vehicle grid scoped so
   product listings and other fapp-ras grid consumers retain their layouts. */
@media (max-width: 1100px) {
	.fapp-make-models__grid {
		display: flex;
		flex-wrap: wrap;
		gap: 20px;
		justify-content: center;
	}

	.fapp-make-models__grid > a,
	.fapp-make-models__grid > details { width: 30%; }

	.fapp-make-available__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.fapp-available-vehicles.fapp-ras--grid .fapp-ras-track {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.fapp-make-available .fapp-cat-card--no-desc .fapp-cat-body {
		min-height: 100px;
		justify-content: center;
	}
}

@media (max-width: 767px) {
	.fapp-make-models__grid {
		gap: 12px;
	}

	.fapp-make-models__grid > a,
	.fapp-make-models__grid > details { width: 100%; }

	.fapp-make-available__grid {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}

	.fapp-available-vehicles.fapp-ras--grid .fapp-ras-track {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}
}

/* --------------------------------------------------------------------------
   Engine size tabs   [vehicles_for_category]
   -------------------------------------------------------------------------- */

.fapp-vfc h2.fapp-vfc-filter-label {
	margin: 0 0 14px;
	text-align: inherit;
	font-family: 'Barlow', sans-serif;
	font-weight: 600;
	text-transform: capitalize;
	color: #0F0F0F;
}

.fapp-vfc-filter {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 22px;
}

.fapp-vfc--center { text-align: center; }
.fapp-vfc--center .fapp-vfc-filter { justify-content: center; }

.fapp-vfc-tab {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 10px 20px;
	font-family: 'Barlow', sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	color: #0F0F0F;
	background: #fff;
	border: 1px solid #dcdcdc;
	border-radius: 999px;
	cursor: pointer;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}

/* The theme and Elementor's kit both colour buttons on hover — the pink came
   from there, not from here. Repeating the class against its tag lifts this to
   (0,2,1) so it wins without !important. */
.fapp-vfc button.fapp-vfc-tab:hover,
.fapp-vfc button.fapp-vfc-tab:focus,
.fapp-vfc button.fapp-vfc-tab:focus-visible {
	color: #fff;
	background: #ED1B24;
	border-color: #ED1B24;
}

.fapp-vfc button.fapp-vfc-tab.is-current {
	color: #fff;
	background: #ED1B24;
	border-color: #ED1B24;
}

.fapp-vfc button.fapp-vfc-tab:hover .fapp-vfc-tab-n,
.fapp-vfc button.fapp-vfc-tab.is-current .fapp-vfc-tab-n { color: #fff; }

.fapp-vfc-tab-n { font-size: 12px; opacity: .7; }

@media (max-width: 1600px) {
	.fapp-vfc-tab { font-size: 13px; padding: 9px 17px; }
}

/* A section used on its own — no sidebar, heading over the grid rather than
   beside the controls. */
.fapp-shopcat--center .fapp-shopcat-head {
	justify-content: center;
	text-align: center;
}

.fapp-shopcat--center h2.fapp-shopcat-heading { width: 100%; text-align: center; }
.fapp-shopcat--center .fapp-shopcat-tools { justify-content: center; }

/* ==========================================================================
   Product detail — spec tables, fitment, source vehicle
   ========================================================================== */

.fapp-spec,
.fapp-fitment,
.fapp-source { box-sizing: border-box; width: 100%; font-family: 'Barlow', sans-serif; }

.fapp-spec *,
.fapp-fitment *,
.fapp-source * { box-sizing: border-box; }

/* Optional heading="" attribute — ancestor class repeated so the Elementor
   kit's heading rules lose on specificity without !important. */
.fapp-fitment .fapp-sec-title,
.fapp-source .fapp-sec-title {
	margin: 0 0 14px;
	font-family: 'Barlow', sans-serif;
	font-size: 26px;
	font-weight: 700;
	line-height: 32px;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: #0F0F0F;
}

/* --------------------------------------------- PART DETAILS / ADDITIONAL INFO */

table.fapp-spec {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	border-spacing: 0;
}

/* The row separator is the half-solid red fade handed over from Figma dev
   mode. border-image cannot paint inside a border-collapse table, so the line
   is drawn as the bottom pixel of the row's own background instead, and the
   cells go transparent so it shows through — the fade then runs unbroken
   across the full row rather than restarting in each cell. */
.fapp-spec tr {
	border-bottom: 0;
	background-color: #ED1B2405;
	background-image: linear-gradient(90deg, rgba(237, 27, 36, 0.4) 0%, rgba(237, 27, 36, 0.4) 50%, rgba(237, 27, 36, 0) 100%);
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: 100% 1px;
}

/* Class doubled: the Hello theme's reset.css stripes odd table rows with
   rgba(128,128,128,.07) at (0,1,4), which both painted zebra over the pink
   and would sit on top of the row's separator line. (0,2,1) outranks it. */
.fapp-spec.fapp-spec th,
.fapp-spec.fapp-spec td {
	padding: 14px 20px;
	font-size: 15px;
	line-height: 22px;
	background: transparent;
	border: 0;
}

/* No left accent bar — the Figma rows carry only the fading rule below. */
.fapp-spec th {
	width: 45%;
	font-weight: 600;
	letter-spacing: .4px;
	text-transform: uppercase;
	text-align: left;
	color: #0F0F0F;
}

.fapp-spec td {
	text-align: right;
	font-weight: 400;
	color: #0f0f0f;
}

/* A value that is genuinely absent still holds its row. */
.fapp-spec .is-na td { color: #a8a8a8; font-style: italic; }

/* ------------------------------------------------------------ VEHICLE FITMENT */

/* Tag-qualified on purpose: the Elementor kit styles bare `p` at (0,1,1), so
   a lone class would lose to it. Same reason for the other intro rules below. */
p.fapp-fitment-intro {
	margin: 0;
	padding-bottom: 20px;
	font-size: 18px;
	line-height: 1.25em;
	color: #0f0f0f;
}

/* A part can list up to 39 vehicles; the table scrolls rather than the page. */
.fapp-fitment-scroll { width: 100%; overflow-x: auto; }

/* White body inside a thin pink frame, per the Figma table — only the header
   row keeps a tint. */
table.fapp-fitment-table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	background: #fff;
	border: 1px solid #F3C6C8;
	border-radius: 8px;
	overflow: hidden;
}

.fapp-fitment-table th {
	padding: 14px 18px;
	font-size: 14px;
	font-weight: 600;
	text-align: left;
	white-space: nowrap;
	color: #ED1B24;
	background: #FBE7E8;
}

/* Same Figma fade as the spec rows; same trick, drawn along the row's top. */
.fapp-fitment-table tbody tr {
	background-image: linear-gradient(90deg, rgba(237, 27, 36, 0.4) 0%, rgba(237, 27, 36, 0.4) 50%, rgba(237, 27, 36, 0) 100%);
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 100% 1px;
}

.fapp-fitment-table td {
	padding: 14px 18px;
	font-size: 15px;
	line-height: 22px;
	color: #0F0F0F;
	border-top: 0;
	vertical-align: top;
}

/* Same reset.css zebra override as .fapp-spec above. */
.fapp-fitment-table.fapp-fitment-table tbody td { background: transparent; }

/* The theme's reset.css borders every table cell. Scoped to our own two tables
   rather than written as a bare `table td, table th`: this stylesheet also
   loads on the product page, where a global reset would flatten WooCommerce's
   own Additional Information table alongside ours. */
.fapp-spec td,
.fapp-spec th,
.fapp-fitment-table td,
.fapp-fitment-table th { border: 0; }

.fapp-fitment-note {
	display: block;
	margin-top: 3px;
	font-size: 12.5px;
	line-height: 18px;
	color: #8a8a8a;
}

/* The ~6% of parts whose blob lists no fitment fall back to the donor
   vehicle's own row, with this line saying so underneath. */
p.fapp-fitment-derived {
	margin: 20px 0 0;
	padding-bottom: 20px;
	font-size: 14px;
	font-weight: 400;
	font-style: italic;
	line-height: 1.25em;
	color: #0f0f0f;
}

.fapp-fitment-more {
	margin-top: 14px;
	padding: 9px 20px;
	font-family: 'Barlow', sans-serif;
	font-size: 14px;
	font-weight: 500;
	color: #0F0F0F;
	background: #fff;
	border: 1px solid #dcdcdc;
	border-radius: 999px;
	cursor: pointer;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.fapp-fitment button.fapp-fitment-more:hover {
	color: #fff;
	background: #ED1B24;
	border-color: #ED1B24;
}

.fapp-fitment-cta {
	margin-top: 10px;
	padding: 22px;
	background: #FDF2F3;
	border-radius: 8px;
}

.fapp-fitment-cta-title {
	display: block;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.25em;
	letter-spacing: .4px;
	text-transform: uppercase;
	color: #0f0f0f;
}

p.fapp-fitment-cta-text {
	margin: 6px 0 0;
	padding-bottom: 20px;
	font-size: 14px;
	font-weight: 400;
	font-style: italic;
	line-height: 1.25em;
	color: #0f0f0f;
}

.fapp-fitment a.fapp-fitment-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 13px 26px;
	font-family: 'Barlow', sans-serif;
	font-size: 16px;
	font-weight: 500;
	color: #fff;
	background: #ED1B24;
	border-radius: 999px;
	text-decoration: none;
	transition: background .2s ease;
}

.fapp-fitment a.fapp-fitment-cta-btn:hover { background: #0f0f0f; color: #fff; }

/* -------------------------------------------------------------- SOURCE VEHICLE */

p.fapp-source-intro {
	margin: 0;
	padding-bottom: 20px;
	font-size: 18px;
	line-height: 1.25em;
	color: #0f0f0f;
}

.fapp-source-card {
	display: grid;
	grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
	gap: 26px;
	padding: 18px;
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 10px;
}

/* No Wrecking Now post exists for about 54% of parts — the details still show. */
.fapp-source--nophoto .fapp-source-card { grid-template-columns: minmax(0, 1fr); }

.fapp-source-media { border-radius: 6px; overflow: hidden; }

.fapp-source-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fapp-source-list { margin: 0; }

.fapp-source-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 0;
	/* Plain divs, so the Figma hand-off border-image works here as given. */
	border-bottom: 1px solid;
	border-image-source: linear-gradient(90deg, rgba(237, 27, 36, 0.4) 0%, rgba(237, 27, 36, 0.4) 50%, rgba(237, 27, 36, 0) 100%);
	border-image-slice: 1;
}

/* !important because the 1600px step below used to shrink this to 13px, and
   the floor block at the foot of this file must not have to fight it. */
.fapp-source-row dt {
	font-family: 'Barlow', sans-serif;
	font-size: 16px !important;
	font-weight: 500;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #0F0F0F;
}

.fapp-source-row dd {
	margin: 0;
	font-size: 15px;
	text-align: right;
	color: #525252;
	word-break: break-word;
}

.fapp-source-row.is-na dd { color: #a8a8a8; font-style: italic; }

.fapp-source a.fapp-source-link {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 14px 2px 0;
	font-family: 'Barlow', sans-serif;
	font-size: 16px;
	font-weight: 500;
	color: #0F0F0F;
	text-decoration: none;
	transition: color .2s ease;
}

.fapp-source a.fapp-source-link:hover { color: #ED1B24; }

.fapp-source-nolink {
	margin: 14px 0 0;
	font-size: 13px;
	font-style: italic;
	color: #8a8a8a;
}

/* Only the padding steps down here now. Type does not: nothing on this page
   goes below 16px under 1600px — see the floor block at the foot of the file. */
@media (max-width: 1600px) {
	.fapp-spec th, .fapp-spec td { padding: 12px 16px; }
}

@media (max-width: 767px) {
	.fapp-source-card { grid-template-columns: minmax(0, 1fr); }
	.fapp-spec th { width: 50%; }
	.fapp-spec th, .fapp-spec td { padding: 11px 13px; }
}

/* --------------------------------------------------------------------------
   Part information tabs   [part_information]
   -------------------------------------------------------------------------- */

.fapp-partinfo { box-sizing: border-box; width: 100%; font-family: 'Barlow', sans-serif; }
.fapp-partinfo * { box-sizing: border-box; }

.fapp-partinfo-tabs {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 28px;
	margin-bottom: 18px;
}

.fapp-partinfo button.fapp-partinfo-tab {
	padding: 0 0 8px;
	font-family: 'Barlow', sans-serif;
	font-size: 22px;
	font-weight: 700;
	line-height: 28px;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: #525252;
	background: none;
	border: 0;
	border: 0;
	cursor: pointer;
	transition: color .2s ease;
}

.fapp-partinfo button.fapp-partinfo-tab:hover { color: #0F0F0F; }

/* The active tab is marked by colour alone — no underline. */
.fapp-partinfo button.fapp-partinfo-tab.is-current {
	color: #0F0F0F;
	border: 0;
}

/* tabs="no" prints both tables one after the other, each with its own heading */
.fapp-partinfo-heading {
	margin: 0 0 12px;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: #0F0F0F;
}

.fapp-partinfo--flat .fapp-partinfo-panel + .fapp-partinfo-panel { margin-top: 28px; }

@media (max-width: 1600px) {
	.fapp-partinfo button.fapp-partinfo-tab { font-size: 19px; }
	.fapp-partinfo-heading { font-size: 18px; }
}

@media (max-width: 575px) {
	.fapp-partinfo-tabs { gap: 18px; }
	.fapp-partinfo button.fapp-partinfo-tab { font-size: 16px; }
}

/* ==========================================================================
   Product detail — summary band, alternative parts, related parts
   ========================================================================== */

/* ------------------------------------------------- PART SUMMARY [part_summary] */

.fapp-summary { box-sizing: border-box; width: 100%; font-family: 'Barlow', sans-serif; }
.fapp-summary * { box-sizing: border-box; }

.fapp-summary-heading {
	margin: 0 0 26px;
	font-size: 24px;
	font-weight: 700;
	line-height: 30px;
	letter-spacing: .5px;
	text-transform: uppercase;
	text-align: center;
	color: #0F0F0F;
}

.fapp-summary-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 12px;
}

.fapp-summary-cell {
	padding: 18px 16px;
	background: #F1F1F1;
	border-radius: 4px;
	text-align: center;
}

.fapp-summary-cell h3 {
	margin: 0 0 10px;
	font-size: 15px;
	font-weight: 700;
	line-height: 20px;
	color: #0F0F0F;
}

.fapp-summary-text {
	font-size: 13.5px;
	line-height: 20px;
	color: #3f3f3f;
}

.fapp-summary-cell.is-na .fapp-summary-text { color: #a8a8a8; font-style: italic; }

/* Product summary handoff: heading and five cards only. */
.fapp-summary-heading {
	margin-bottom: 42px;
	font-size: 32px;
	font-weight: 800;
	line-height: 38px;
}

.fapp-summary-grid { gap: 20px; }

.fapp-summary-cell {
	padding: 26px 24px;
	border-radius: 6px;
}

.fapp-summary-cell h3 {
	margin-bottom: 14px;
	font-size: 24px;
	font-weight: 600;
	line-height: 29px;
}

.fapp-summary-text {
	font-size: 20px;
	line-height: 29px;
}

@media (max-width: 1279px) {
	.fapp-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
	.fapp-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fapp-summary-heading { font-size: 19px; line-height: 25px; }
}

@media (max-width: 1600px) {
	.fapp-summary-heading {
		margin-bottom: 30px;
		font-size: 28px;
		line-height: 34px;
	}

	.fapp-summary-grid { gap: 16px; }
	.fapp-summary-cell { padding: 22px 18px; }
	.fapp-summary-cell h3 { margin-bottom: 12px; font-size: 20px; line-height: 26px; }
	.fapp-summary-text { font-size: 17px; line-height: 24px; }
}

@media (max-width: 767px) {
	.fapp-summary-heading { font-size: 19px; line-height: 25px; }
	.fapp-summary-grid { gap: 14px; }
	.fapp-summary-cell { padding: 18px 14px; }
	.fapp-summary-cell h3 { font-size: 18px; line-height: 24px; }
	.fapp-summary-text { font-size: 16px; line-height: 23px; }
}

@media (max-width: 575px) {
	.fapp-summary-grid { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------- ALTERNATIVE PARTS + RELATED <MAKE> PARTS

   Two bands, one card. Both are static grids — every card visible, nothing to
   scroll or click through — so they share a card definition and differ only in
   heading alignment. Figma node 130:812 (related) and 130:810 (alternatives).

   Card, measured from the design: #F5F5F5 tile, 6px radius, a #F3F3F3 media
   panel on top, 26px to the title, 30px of floor below it. Title is Barlow
   SemiBold 20/28, 1px tracking, capitalised, centred.

   The media panel is an aspect-ratio rather than the design's fixed 237px,
   because the column count is an attribute: at columns="6" in a 1600px
   container a card is 250px wide and the ratio reproduces 237px exactly, and
   at any other count it stays in proportion instead of stretching.
   -------------------------------------------------------------------------- */

.fapp-alt,
.fapp-related {
	--per: var(--cols, 6);
	--gap: 15px;
	box-sizing: border-box;
	width: 100%;
	font-family: 'Barlow', sans-serif;
}

.fapp-alt { --gap: 10px; }

.fapp-alt *,
.fapp-related * { box-sizing: border-box; }

/* Headings: same type, different alignment — the design sets ALTERNATIVE PARTS
   flush left against the grid and centres RELATED <MODEL> PARTS. */
.fapp-alt h2.fapp-alt-title,
.fapp-related h2.fapp-related-heading {
	margin: 0 0 38px;
	font-family: 'Barlow', sans-serif;
	font-size: 32px;
	font-weight: 800;
	line-height: 32px;
	text-transform: uppercase;
	color: #0F0F0F;
}

.fapp-alt h2.fapp-alt-title { text-align: left; }
.fapp-related h2.fapp-related-heading { text-align: center; }

/* The claim sub-line sits between heading and grid, so the heading loses its
   floor when it is present. */
.fapp-alt-note {
	margin: -26px 0 22px;
	font-size: 13.5px;
	font-style: italic;
	line-height: 20px;
	color: #8a8a8a;
}

.fapp-alt-grid,
.fapp-related .fapp-cat-grid {
	display: grid;
	grid-template-columns: repeat(var(--per), minmax(0, 1fr));
	gap: var(--gap);
}

/* ------------------------------------------------------------ the shared card */

.fapp-alt .fapp-ras-card,
.fapp-related .fapp-cat-card {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding-bottom: 0;
	background: #F3F3F3;
	border: 0;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: none;
	transition: box-shadow .3s ease;
}

.fapp-alt .fapp-ras-card:hover,
.fapp-related .fapp-cat-card:hover {
	box-shadow: 0 8px 22px rgba(0, 0, 0, .10);
	border-color: transparent;
}

.fapp-related .fapp-cat-card-link {
	display: flex;
	flex-direction: column;
	gap: 0;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.fapp-alt .fapp-ras-media,
.fapp-related .fapp-cat-media {
	position: relative;
	aspect-ratio: 250 / 237;
	background: #F3F3F3;
	border-radius: 6px 6px 0 0;
	overflow: hidden;
}

.fapp-alt .fapp-ras-media { aspect-ratio: 385 / 298; }

.fapp-alt .fapp-ras-media img,
.fapp-related .fapp-cat-media img {
	display: block;
	width: 100%;
	height: 100%;
	/* contain, not cover: these are cut-out part photos and cropping them
	   loses the shape that identifies the part. */
	object-fit: contain;
	padding: 14px;
	transform: none;
}

.fapp-related .fapp-cat-card:hover .fapp-cat-media img { transform: none; }

.fapp-alt .fapp-ras-body,
.fapp-related .fapp-cat-body {
	padding: 10px;
	text-align: center;
}

.fapp-related .fapp-cat-body {
	padding: 15px;
	background: rgba(237, 27, 36, .04);
}

.fapp-alt h3.fapp-ras-title,
.fapp-related h3.fapp-cat-title {
	margin: 0;
	/* Product and category names run long. Without a clamp one card grows and
	   drags the row with it. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-family: 'Barlow', sans-serif;
	font-size: 18px;
	font-weight: 600;
	line-height: 26px;
	letter-spacing: 0;
	text-align: center;
	text-transform: capitalize;
	color: #0F0F0F;
}

.fapp-related h3.fapp-cat-title {
	font-size: 20px;
	line-height: 26px;
}

.fapp-alt h3.fapp-ras-title a,
.fapp-related h3.fapp-cat-title { text-decoration: none; }

.fapp-alt h3.fapp-ras-title a { color: #0F0F0F; }

/* .fapp-ras-title and .fapp-ras-title a were given font-size/line-height with
   !important further up this file, to beat .elementor-kit-34076 h3. That wins
   on cascade regardless of specificity, so this band has to answer in kind —
   on the anchor as well as the heading, because the anchor carries its own. */
.fapp-alt h3.fapp-ras-title,
.fapp-alt h3.fapp-ras-title a {
	font-size: 18px !important;
	line-height: 26px !important;
}

/* The faded rule the slider draws under its titles is not in this design. */
.fapp-alt h3.fapp-ras-title::before,
.fapp-alt h3.fapp-ras-title::after { display: none; content: none; }

/* Everything the listing card carries that this band does not draw. */
.fapp-alt .fapp-ras-badge,
.fapp-alt .fapp-prod-price,
.fapp-alt .fapp-ras-meta,
.fapp-alt .fapp-ras-btn,
.fapp-alt .fapp-ras-drop,
.fapp-related .fapp-cat-desc { display: none; }

.fapp-related .fapp-cat-count { display: block; margin-top: 6px; }

/* ------------------------------------------------------------------ responsive */

/* --cols-md falls back to --cols, not to a smaller number: columns="6" means
   six on a 1280px laptop too. The count only drops at tablet and phone. */
@media (max-width: 1600px) {
	.fapp-alt,
	.fapp-related { --per: var(--cols-md, var(--cols, 6)); }

	.fapp-alt h2.fapp-alt-title,
	.fapp-related h2.fapp-related-heading { font-size: 32px; line-height: 32px; margin-bottom: 30px; }

	.fapp-alt h3.fapp-ras-title,
	.fapp-related h3.fapp-cat-title { letter-spacing: .5px; }

	.fapp-alt h3.fapp-ras-title,
	.fapp-alt h3.fapp-ras-title a { font-size: 18px !important; line-height: 26px !important; }
	.fapp-related h3.fapp-cat-title { font-size: 20px !important; line-height: 26px !important; }

	.fapp-alt .fapp-ras-card,
	.fapp-related .fapp-cat-card { gap: 0; padding-bottom: 0; }
}

@media (max-width: 1279px) {
	.fapp-alt,
	.fapp-related { --per: var(--cols-sm, 3); }
	.fapp-alt--slider { --slide-peek: 0%; }
}

@media (max-width: 767px) {
	.fapp-alt,
	.fapp-related { --per: 2; --gap: 14px; }
	.fapp-alt--slider { --slide-peek: 0%; }

	.fapp-alt h2.fapp-alt-title,
	.fapp-related h2.fapp-related-heading { font-size: 21px; line-height: 26px; margin-bottom: 22px; }

	.fapp-alt h3.fapp-ras-title,
	.fapp-alt h3.fapp-ras-title a,
	.fapp-related h3.fapp-cat-title { font-size: 15px !important; line-height: 21px !important; }

	.fapp-alt .fapp-ras-card,
	.fapp-related .fapp-cat-card { gap: 0; padding-bottom: 0; }
}

/* ==========================================================================
   16px floor — product detail

   House rule: below 1600px nothing on this page renders under 16px. The
   design is drawn on a 1920px canvas, so the sizes above are canvas sizes;
   on a real device they would fall under the readable minimum (and iOS zooms
   any input under 16px). Sizes at 1600px and wider are left exactly as drawn.

   Last block in the file on purpose: several of these selectors are also set
   in earlier breakpoints, and matching order here saves an !important on
   every line.
   ========================================================================== */

@media (max-width: 1600px) {

	/* PART DETAILS / ADDITIONAL INFORMATION */
	.fapp-spec.fapp-spec th,
	.fapp-spec.fapp-spec td { font-size: 16px; }

	/* VEHICLE FITMENT */
	.fapp-fitment-table th,
	.fapp-fitment-table td,
	.fapp-fitment-note,
	.fapp-fitment-more,
	p.fapp-fitment-intro,
	p.fapp-fitment-cta-text,
	p.fapp-fitment-derived,
	.fapp-fitment-cta-title,
	.fapp-fitment a.fapp-fitment-cta-btn { font-size: 16px; }

	/* SOURCE VEHICLE */
	p.fapp-source-intro,
	.fapp-source-row dd,
	.fapp-source a.fapp-source-link,
	.fapp-source-nolink { font-size: 16px; }

	/* dt carries !important upstream, so match it here. */
	.fapp-source-row dt { font-size: 16px !important; }

	/* ALTERNATIVE PARTS / RELATED <MODEL> PARTS — card titles are set with
	   !important further up to beat .elementor-kit-34076 h3. */
	.fapp-alt-note { font-size: 16px; }

	.fapp-alt h3.fapp-ras-title,
	.fapp-alt h3.fapp-ras-title a { font-size: 18px !important; line-height: 26px !important; }
	.fapp-related h3.fapp-cat-title { font-size: 20px !important; line-height: 26px !important; }
}

/* ==========================================================================
   14px floor — the other pages

   Same reasoning as the 16px product-detail floor above, one step gentler:
   Shop by Category, Brands, the listing, Wrecking Now and Vehicles carry
   count badges and filter controls drawn as small as 11.5px on the 1920px
   canvas. Below 1600px those go to 14px. At 1600px and wider they stay as
   drawn, so the approved wide-screen layouts are untouched.

   The `select` rules matter most here: any select under 16px makes iOS zoom
   the page on focus, and 14px at least keeps them legible.
   ========================================================================== */

@media (max-width: 1600px) {

	/* Shop by Category */
	.fapp-shopcat-apply,
	.fapp-shopcat-count,
	.fapp-shopcat-leafpanel-btn,
	.fapp-shopcat-leafpanel-count,
	.fapp-shopcat-n,
	.fapp-shopcat-sort,
	.fapp-cat-count,
	.fapp-cat-desc { font-size: 16px; }

	/* Brands */
	.fapp-brand-action,
	.fapp-brand-count,
	.fapp-brand-cta-btn { font-size: 16px; }

	/* Product listing and the part-search bar */
	.fapp-plp-sort,
	.fapp-plp-vehicle select,
	.fapp-plp-trust-text em,
	.fapp-partsearch select,
	.fapp-partsearch-submit { font-size: 14px; }

	/* Vehicles for category */
	.fapp-vfc-tab,
	.fapp-vfc-tab-n { font-size: 14px; }
}

/* --------------------------------------------------------- shipping estimator */

.fapp-ship {
	max-width: 560px;
	margin: 0 auto;
	font-family: Barlow, sans-serif;
	color: #0f0f0f;
}

.fapp-ship-heading {
	font-family: Barlow, sans-serif;
	font-weight: 700;
	font-size: 26px;
	text-align: center;
	margin: 0 0 6px;
	color: #0f0f0f;
}

.fapp-ship-note {
	text-align: center;
	color: #5b6472;
	margin: 0 0 20px;
}

.fapp-ship-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.fapp-ship-for {
	margin: 0;
	color: #0f0f0f;
}

.fapp-ship-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.fapp-ship-field span {
	font-size: 14px;
	font-weight: 500;
	color: #0f0f0f;
}

.fapp-ship-field input {
	font-family: Barlow, sans-serif;
	font-size: 16px;
	padding: 12px 16px;
	border: 1px solid #d7d7d7;
	border-radius: 10px;
	color: #181818;
	background: #fff;
}

.fapp-ship-field input:focus {
	outline: none;
	border-color: #ed1b24;
	box-shadow: 0 0 0 3px rgba(237, 27, 36, 0.12);
}

.fapp-ship-manual {
	border: 1px solid #ececec;
	border-radius: 10px;
	padding: 8px 14px;
	background: #f5f5f5;
}

.fapp-ship-manual summary {
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	color: #5b6472;
}

.fapp-ship-manual-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin-top: 12px;
}

.fapp-ship-submit {
	font-family: Barlow, sans-serif;
	font-weight: 600;
	font-size: 16px;
	color: #fff;
	background: #ed1b24;
	border: 0;
	border-radius: 999px;
	padding: 13px 28px;
	cursor: pointer;
	align-self: center;
	min-width: 220px;
	transition: background 0.15s ease;
}

.fapp-ship-submit:hover { background: #0f0f0f; }
.fapp-ship-submit:disabled { opacity: 0.6; cursor: default; }

.fapp-ship.is-loading { opacity: 0.75; }

.fapp-ship-results { margin-top: 20px; }

.fapp-ship-msg {
	text-align: center;
	color: #5b6472;
	background: #f5f5f5;
	border: 1px solid #ececec;
	border-radius: 10px;
	padding: 14px 16px;
	margin: 0;
}

.fapp-ship-quote {
	border: 1px solid #ececec;
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
}

.fapp-ship-quote-head {
	margin: 0;
	padding: 14px 18px;
	background: #1b1b1b;
	color: #fff;
	font-weight: 500;
}

.fapp-ship-rates {
	list-style: none;
	margin: 0;
	padding: 0;
}

.fapp-ship-rate {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 14px 18px;
	border-bottom: 1px solid #ececec;
}

.fapp-ship-rate-label { color: #0f0f0f; }

.fapp-ship-rate-cost {
	font-weight: 700;
	font-size: 18px;
	color: #ed1b24;
	white-space: nowrap;
}

.fapp-ship-basis {
	margin: 0;
	padding: 12px 18px;
	color: #5b6472;
	font-size: 14px;
}

.fapp-ship-fineprint {
	margin: 0;
	padding: 0 18px 16px;
	color: #9aa3b0;
	font-size: 12px;
}

@media (max-width: 560px) {
	.fapp-ship-manual-grid { grid-template-columns: 1fr; }
	.fapp-ship-submit { width: 100%; }
}

/* Vehicle scope chip on [product_listing].
   Shown only when the listing was opened from a vehicle card. The Make/Model/
   Year dropdowns stay empty deliberately: they filter the whole catalogue,
   while this is one donor vehicle — pre-filling them would read as a filter
   the visitor could change, and changing it would collide with the stock
   scope and return nothing. The chip states the scope and clears it. */
.fapp-plp-scope {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 12px 0 0;
	padding: 7px 8px 7px 14px;
	font-family: 'Barlow', sans-serif;
	background: #FDF2F3;
	border: 1px solid #F3C6C8;
	border-radius: 999px;
}

.fapp-plp-scope-text {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.25em;
	color: #0F0F0F;
}

.fapp-plp-scope-stock {
	margin-left: 6px;
	font-weight: 400;
	color: #6a6a6a;
}

.fapp-plp a.fapp-plp-scope-clear {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	font-size: 17px;
	line-height: 1;
	color: #fff;
	background: #ED1B24;
	border-radius: 999px;
	text-decoration: none;
	transition: background .2s ease;
}

.fapp-plp a.fapp-plp-scope-clear:hover { background: #0f0f0f; color: #fff; }

@media (max-width: 767px) {
	.fapp-plp-scope { padding: 6px 6px 6px 12px; }
	.fapp-plp-scope-text { font-size: 15px; }
	.fapp-plp-scope-stock { display: block; margin-left: 0; font-size: 13px; }
}

/* ==========================================================================
   Quick links, and the dark skin for the product-detail bands

   Figma nodes 200:8324 (links), 200:8361 (alternatives, slider) and
   200:8363 (related). All three sit on #1E1E1E with #F3F3F3 cards.

   One deliberate departure: the Figma headings are #0F0F0F on #1E1E1E, a
   contrast ratio of about 1.1:1 against a 3:1 minimum — sampled from the
   exported PNGs, not guessed. That is a leftover from when the sections were
   drawn on white. The headings are light here, or they would not be readable.
   theme="light" on either shortcode returns the original light skin.
   ========================================================================== */

/* ------------------------------------------------- QUICK LINKS [part_links] */

.fapp-links {
	--cols: 4;
	--gap: 29px;
	display: grid;
	grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
	gap: var(--gap);
	box-sizing: border-box;
	width: 100%;
	font-family: 'Barlow', sans-serif;
}

.fapp-links * { box-sizing: border-box; }

/* The #F5F5F5 frame with the white panel inset 9px, as drawn. */
.fapp-links a.fapp-links-btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 105px;
	padding: 9px;
	background: #F5F5F5;
	border-radius: 6px;
	text-decoration: none;
	transition: background .2s ease;
}

.fapp-links a.fapp-links-btn::before {
	content: '';
	position: absolute;
	inset: 9px;
	background: #fff;
	border-radius: 6px;
}

.fapp-links a.fapp-links-btn {
	position: relative;
	overflow: hidden;
}

.fapp-links-label,
.fapp-links .fapp-brand-cta-arrow {
	position: relative;
	z-index: 1;
}

.fapp-links-label {
	padding-left: 21px;
	font-size: 20px;
	font-weight: 600;
	line-height: 28px;
	text-transform: uppercase;
	color: #0F0F0F;
}

.fapp-links .fapp-brand-cta-arrow {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	margin-right: 21px;
	color: #0F0F0F;
}

.fapp-links a.fapp-links-btn:hover { background: #ED1B24; }
.fapp-links a.fapp-links-btn:hover::before { background: #fff; }

/* [part_links] — dark variant handoff. */
.fapp-links.fapp-links--dark { gap: 10px; }
.fapp-links.fapp-links--dark a.fapp-links-btn { min-height: 80px; }

@media (max-width: 1600px) {
	.fapp-links.fapp-links .fapp-links-label {
		padding-left: 10px;
		font-size: 16px;
	}
}

@media (max-width: 1279px) { .fapp-links { --cols: 2; --gap: 20px; } }
@media (max-width: 767px) {
	.fapp-links { --cols: 1; --gap: 14px; }
	.fapp-links a.fapp-links-btn { min-height: 84px; }
	.fapp-links-label { font-size: 17px; line-height: 24px; padding-left: 14px; }
	.fapp-links .fapp-brand-cta-arrow { margin-right: 14px; }
}

/* --------------------------------------- ALTERNATIVE PARTS as a slider */

/* .fapp-ras is on the wrapper and .fapp-ras-track on the row, so the delegated
   arrow handler already in fapp-elements.js drives this — no new JS. */
.fapp-alt--slider { margin: 0; --slide-peek: 8%; }

.fapp-alt--slider .fapp-ras-track {
	display: flex;
	gap: var(--gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding-bottom: 4px;
}

.fapp-alt--slider .fapp-ras-track::-webkit-scrollbar { display: none; }

.fapp-alt--slider .fapp-ras-card {
	flex: 0 0 calc((100% - (var(--per) - 1) * var(--gap) - var(--slide-peek)) / var(--per));
	scroll-snap-align: start;
}

.fapp-alt-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
}

/* Square arrows top-right: prev outlined, next solid red, per the design. */
.fapp-alt .fapp-ras-nav { margin-top: 0; justify-content: flex-end; flex: 0 0 auto; }

.fapp-alt .fapp-ras-arrow {
	width: 32px !important;
	max-width: 32px !important;
	height: 32px !important;
	border-radius: 6px !important;
	border: 1px solid #3a3a3a;
	background: transparent;
	color: #0F0F0F;
}

.fapp-alt .fapp-ras-arrow[data-dir="next"] {
	border-color: #ED1B24;
	background: #ED1B24;
	color: #fff;
}

.fapp-alt .fapp-ras-nav button:hover,
.fapp-alt .fapp-ras-nav button:focus {
	background: #ED1B24 !important;
	border-color: #ED1B24;
	color: #fff;
}

/* ------------------------------------------------------------- dark skin */

.fapp-alt--dark h2.fapp-alt-title,
.fapp-related--dark h2.fapp-related-heading { color: #F5F5F5; }

.fapp-alt--dark .fapp-alt-note { color: #9a9a9a; }

.fapp-alt--dark .fapp-ras-card,
.fapp-related--dark .fapp-cat-card { background: #F3F3F3; border-color: transparent; }

.fapp-alt--dark .fapp-ras-media,
.fapp-related--dark .fapp-cat-media { background: #fff; }

.fapp-alt--dark .fapp-ras-card:hover,
.fapp-related--dark .fapp-cat-card:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }

/* The light-theme arrows need the opposite treatment. */
.fapp-alt:not(.fapp-alt--dark) .fapp-ras-arrow { border-color: #d8d8d8; color: #0F0F0F; }

/* Product-page alternative-parts overrides. Scoped to the shortcode wrapper
   so the shared card classes used elsewhere on the site are unaffected. */
#fapp-alternative-parts img {
	padding: 0 !important;
	height: 300px;
	object-fit: cover;
}

#fapp-alternative-parts .fapp-ras-media {
	height: 300px;
}

#fapp-alternative-parts .fapp-ras-body {
	padding: 20px;
}

#fapp-alternative-parts a {
	font-size: 20px !important;
}