/* =====================================================================
   cls-fix.css — v4, revised 2026-05-20
   Targets Google Search Console "CLS issue: more than 0.25 (mobile)".

   GROUND RULE (strict): this file must not change the visible design.
   The only technique allowed is one whose effect ENTIRELY disappears
   once the page is fully loaded — i.e. selectors guarded by
   :not(.slick-initialized) that stop matching the instant Slick adds
   its class.

   What was removed between v3 and v4:
     - min-height floors on #_jstl__images_r, #_jstl__header_r,
       #_jstl__buying_options_r, #_jstl__pricing_r
       Reason: when the AJAX content renders shorter than the floor
       (e.g. _pricing on this site renders ~0px markup), the floor
       becomes visible empty space and pushes the gallery / pricing /
       buying-options sections downward on both desktop and mobile.
     - min-height on #review-wrapper and .review-card
       Reason: same risk if the strip's natural height differs.

   What remains:
     Slick pre-init hides only. These selectors STOP MATCHING the
     instant Slick fires; nothing they did to pre-init layout can
     persist into the final rendered page.
   ===================================================================== */


/* ---------------------------------------------------------------------
   PRE-INIT SLICK CAROUSEL HIDES
   While slick.js is still parsing/initialising, every slide is in
   normal flow and the carousel stacks vertically (e.g. 9 hero banner
   slides ≈ 3,000 px tall on first paint, collapsing to one ~375 px
   slide after init). Hiding everything past what each carousel
   ultimately shows means the page paints at final height.
   The :not(.slick-initialized) guard means these rules deactivate
   the moment Slick adds its class.
   --------------------------------------------------------------------- */

/* Home hero — slidesToShow:1 */
.slick-carousel-banner:not(.slick-initialized) > .slide-content:not(:first-child) {
	display: none;
}

/* Home car banner — slidesToShow:3 desktop, 1 mobile */
.rev_slider:not(.slick-initialized) > .rev_slide:nth-child(n+4) {
	display: none;
}
@media (max-width: 767px) {
	.rev_slider:not(.slick-initialized) > .rev_slide:nth-child(n+2) {
		display: none;
	}
}

/* "70 Series Accessories" / "JL Audio" product strips — 4 desktop / 2 mobile */
.singal-slider .card-design:not(.slick-initialized) > article:nth-child(n+5),
.singal-slider .card-design:not(.slick-initialized) > .col-6:nth-child(n+5) {
	display: none;
}
@media (max-width: 991px) {
	.singal-slider .card-design:not(.slick-initialized) > article:nth-child(n+3),
	.singal-slider .card-design:not(.slick-initialized) > .col-6:nth-child(n+3) {
		display: none;
	}
}

/* Featured brands — 6×2=12 desktop / 6 tablet / 4 mobile */
section.featured-brands .row:not(.slick-initialized) > .brand-item:nth-child(n+13) {
	display: none;
}
@media (max-width: 991px) {
	section.featured-brands .row:not(.slick-initialized) > .brand-item:nth-child(n+7) {
		display: none;
	}
}
@media (max-width: 776px) {
	section.featured-brands .row:not(.slick-initialized) > .brand-item:nth-child(n+5) {
		display: none;
	}
}

/* Product page gallery sliders (init via MutationObserver after AJAX) */
.product-img-slider.thumb-sliders:not(.slick-initialized) > .inner-thumb:not(:first-child) {
	display: none;
}
.product-img-slider.thumb-img-slider:not(.slick-initialized) > .inner-thumb:nth-child(n+6) {
	display: none;
}
.product-img-slider-mobile:not(.slick-initialized) > .inner-thumb-img:not(:first-child) {
	display: none;
}

/* Cross-sell strip on PDP — 4 desktop / 2 mobile */
#n_product .nCrossSellItem-slider:not(.slick-initialized) > *:nth-child(n+5) {
	display: none;
}
@media (max-width: 767px) {
	#n_product .nCrossSellItem-slider:not(.slick-initialized) > *:nth-child(n+3) {
		display: none;
	}
}

/* Sticky header spacer: reserves the header's original flow height while fixed. */
#sticky-spacer {
	display: block;
	height: 0;
	width: 100%;
	transition: none !important;
}

/* Responsive header controls must resize immediately; keep only visual hover fades. */
header.wrapper-header,
header.wrapper-header.sticky,
#header-cart,
#header-cart a#cartcontentsheader,
.btn.p-0.vehicle-icon,
.browser-cat,
.browser-cat *,
div#header-call ul.non-user,
.mobile-search-custom-icon,
.logo-section .header-search,
.logo-section .header-search * {
	animation: none !important;
	transition: none !important;
	transition-delay: 0s !important;
	transition-duration: 0s !important;
	transition-property: background-color, border-color, box-shadow, color, opacity, transform !important;
}

header.wrapper-header,
header.wrapper-header.sticky {
	transition-property: box-shadow !important;
}

body.open-slide-popup header.wrapper-header,
body.open-slide-popup header.wrapper-header.sticky {
	z-index: auto !important;
}

body.menu-drawer-open header.wrapper-header,
body.menu-drawer-open header.wrapper-header.sticky {
	z-index: 10000 !important;
}

body.menu-drawer-open header.wrapper-header::after {
	background: rgba(0, 0, 0, 0.4);
	content: "";
	inset: 0;
	pointer-events: auto;
	position: fixed;
	z-index: 9998;
}

body.menu-drawer-open .menu-content.open {
	z-index: 10001 !important;
}

body.vehicle-finder-open .fhilter90.open-finder {
	z-index: 10001 !important;
}

body.vehicle-finder-open header.wrapper-header,
body.vehicle-finder-open header.wrapper-header.sticky {
	z-index: 10000 !important;
}

body.vehicle-finder-open header.wrapper-header::after {
	background: rgba(0, 0, 0, 0.4);
	content: "";
	inset: 0;
	pointer-events: auto;
	position: absolute;
	z-index: 10000;
}

body.mini-cart-open header.wrapper-header,
body.mini-cart-open header.wrapper-header.sticky {
	z-index: 10000 !important;
}

body.mini-cart-open .custom-mini-cart.open-minicart {
	z-index: 10001 !important;
}

body.mini-cart-open header.wrapper-header::after {
	background: rgba(0, 0, 0, 0.4);
	content: "";
	inset: 0;
	pointer-events: auto;
	position: absolute;
	z-index: 10000;
}

@supports selector(body:has(> iframe)) {
	body#n_home > div:has(> iframe[src="about:blank"][width="360px"][height="168px"]) {
		bottom: 20px !important;
		height: 168px !important;
		left: auto !important;
		max-width: calc(100vw - 40px) !important;
		position: fixed !important;
		right: 20px !important;
		top: auto !important;
		width: 360px !important;
		z-index: 2147483000 !important;
	}

	body#n_home > div:has(> iframe[src="about:blank"][width="360px"][height="168px"]) > iframe {
		display: block !important;
		max-width: 100% !important;
	}
}

@media (min-width: 1200px) {
	#header-cart a#cartcontentsheader {
		min-width: 80px;
	}

	#header-cart a#cartcontentsheader p.m-0.h2,
	#header-cart a#cartcontentsheader span.nhu7,
	.btn.p-0.vehicle-icon,
	.btn.p-0.vehicle-icon .vehicle-menu {
		white-space: nowrap !important;
	}

	.btn.p-0.vehicle-icon {
		min-width: 195px;
	}
}

#header-cart a#cartcontentsheader,
div#header-cart a#cartcontentsheader {
	align-items: center !important;
	display: inline-flex !important;
	flex: 0 1 auto;
	flex-wrap: nowrap !important;
	justify-content: center !important;
	line-height: 1 !important;
	min-width: 0;
	overflow: hidden !important;
	position: relative;
	white-space: nowrap !important;
}

#header-cart a#cartcontentsheader > div,
div#header-cart a#cartcontentsheader > div {
	display: none !important;
}

#header-cart a#cartcontentsheader p.m-0.h2,
div#header-cart a#cartcontentsheader p.m-0.h2 {
	align-items: center !important;
	display: flex !important;
	flex: 0 1 auto;
	flex-wrap: nowrap !important;
	gap: 5px;
	justify-content: center !important;
	line-height: 1 !important;
	min-width: 0;
	white-space: nowrap !important;
}

#header-cart a#cartcontentsheader p.m-0.h2 svg,
div#header-cart a#cartcontentsheader p.m-0.h2 svg {
	flex: 0 0 auto;
	margin: 0 !important;
	position: static !important;
}

#header-cart a#cartcontentsheader span.nhu7,
div#header-cart a#cartcontentsheader span.nhu7 {
	flex: 0 0 auto;
	line-height: 1 !important;
	white-space: nowrap !important;
}

@media (min-width: 768px) and (max-width: 1800px) {
	#header-cart a#cartcontentsheader,
	div#header-cart a#cartcontentsheader {
		min-width: 52px !important;
		padding-left: 6px !important;
		padding-right: 6px !important;
	}

	#header-cart a#cartcontentsheader span.nhu7,
	div#header-cart a#cartcontentsheader span.nhu7 {
		display: none !important;
	}

	.btn.p-0.vehicle-icon {
		flex: 0 0 auto !important;
		max-width: none !important;
		min-width: 0 !important;
		padding-left: 8px !important;
		padding-right: 8px !important;
	}

	.btn.p-0.vehicle-icon .vehicle-menu {
		min-width: 0 !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
	}
}

/* Preserve existing image boxes while preventing Lighthouse aspect-ratio distortion. */
.logo-section .wrapper-logo img.logo {
	object-fit: contain;
}

.both-column .bg-img img {
	object-fit: cover;
}

.custom-mini-cart .mini-cross-item {
	list-style: none;
}

/* Keep slide-out panels above the page/header while the existing backdrop is active. */
body.open-slide-popup::before {
	z-index: 9998 !important;
}

.menu-content.open,
.fhilter90.open-finder,
.custom-mini-cart.open-minicart {
	z-index: 9999 !important;
}

.menu-content.open {
	left: 0 !important;
}

.fhilter90.open-finder {
	right: 0 !important;
}

/* The vehicle drawer is narrow; avoid the broad two-column compatibility grid. */
.fhilter90 .parts-finder-content-new #compat_list {
	display: flex !important;
	flex-direction: column !important;
	gap: 0 !important;
}

.fhilter90 .parts-finder-content-new #compat_list select,
.fhilter90 .parts-finder-content-new #compat_list button.dah_compat-btn {
	width: 100% !important;
}

@media (max-width: 767px) {
	body#n_home .fhilter90.open-finder,
	body.n_test-automotive-co .fhilter90.open-finder {
		max-width: 350px !important;
		width: 81% !important;
	}

	.fhilter90 .parts-finder-content-new #compat_list button.dah_compat-btn {
		align-items: center !important;
		display: flex !important;
		height: 45px !important;
		justify-content: center !important;
		min-height: 45px !important;
	}
}

/* Maropost's nview banner is test-only, but it still appears in Lighthouse. */
.__NETO__hide_banner a[role="button"],
.__NETO__toggle_banner a[role="button"] {
	align-items: center;
	display: inline-flex;
	justify-content: center;
	min-height: 24px;
	min-width: 24px;
}

/* Same footer artwork, compressed as theme-local WebP to avoid the 1 MB PNG payload. */
.footer-main::before {
	background-image: url("../img/optimized/footer-bg.webp") !important;
	background-repeat: no-repeat;
	background-size: cover;
}

/* =====================================================================
   DESKTOP SEARCH AUTOCOMPLETE (Findify) — positioning + close button
   Why this exists: Findify renders its autocomplete container inside the
   header search .input-group, but positions it with inline document-
   relative top/left. The corrective rules live in Findify's REMOTE css
   (assets.findify.io …min.css: top:100%/left:-136px/-200px !important),
   which arrives seconds after a hard refresh — until then the panel
   renders shifted right/below the fold. These theme-side rules mirror
   the exact same final geometry but are present from the first paint,
   and out-specify the remote rules (4 classes vs 2), so the panel can
   never appear in the wrong place. Desktop only; mobile (<768px) uses
   Findify's fullscreen widget and is untouched.
   ===================================================================== */
@media (min-width: 768px) {
	.logo-section .header-search .findify-container.findify-autocomplete {
		height: 0 !important;
		left: -136px !important;
		margin: 0 !important;
		position: absolute !important;
		top: 100% !important;
		z-index: 10020 !important;
	}

	.logo-section .header-search .findify-layouts--autocomplete--dropdown__wrapper {
		left: 0 !important;
		margin-top: 8px !important;
		position: relative !important;
	}

	.logo-section .header-search .findify-layouts--autocomplete--dropdown {
		background: #fff;
		box-sizing: border-box !important;
		max-width: 75vw !important;
		position: absolute !important;
		width: 1040px !important;
		z-index: 9999;
	}

	.logo-section .header-search .input-group.e4wd-findify-closed .findify-container.findify-autocomplete {
		display: none !important;
	}

	/* Joined [search][close] pair at the end of the search bar. The theme pins
	   .input-group-append to the right at a FIXED 45px width (rajiv_custom_style),
	   which can only hold one button — width:auto lets it fit one button (45px,
	   identical to today) or two (91px) while keeping the theme's absolute
	   right-pinning, height, overflow clip and rounded corner. The close button
	   only renders while the suggestions panel is open, so the default look
	   (search at the far end) is unchanged; when the panel opens, search slides
	   left and close takes the end spot. position:static + flex-basis defeat the
	   theme rule that pins every .input-group button to right:0 (which would
	   stack them) and stop them shrinking. */
	.header-search .input-group .input-group-append {
		display: flex;
		margin: 0;
		width: auto !important;
		z-index: 6;
	}

	/* Both buttons share the theme's square button geometry. position:relative
	   (NOT static) neutralises the theme rule that pins every .input-group
	   button to right:0 (which would stack them) while keeping each button a
	   containing block for the theme's ::before fill layer (inner.css paints
	   the button face with an absolute 100%-wide ::before). With static
	   buttons that fill resolves against the append and stretches across BOTH
	   buttons, hiding the glyphs and animating on every toggle. flex-basis
	   stops either button shrinking to a slim sliver. */
	.header-search .input-group .input-group-append .btn {
		align-items: center;
		flex: 0 0 45px;
		height: 42px;
		justify-content: center;
		min-width: 45px;
		position: relative !important;
		width: 45px;
	}

	/* The search (submit) button is ALWAYS visible. */
	.header-search .input-group .input-group-append button[type="submit"] {
		display: flex;
	}

	/* The close button is HIDDEN by default and only appears once the field is
	   focused or has text (JS toggles .e4wd-search-active on the input group).
	   It carries the .btn class, so this explicit rule is what overrides the
	   generic .btn sizing rule above to keep it hidden until active. */
	.header-search .input-group .input-group-append .e4wd-findify-close {
		display: none;
	}

	.header-search .input-group.e4wd-search-active .input-group-append .e4wd-findify-close {
		border-left: 1px solid rgba(0, 109, 51, 0.35);
		display: flex;
		font-size: 22px;
		line-height: 1;
		padding: 0;
	}

	/* Keep the close glyph above the button's ::before fill layer. */
	.header-search .input-group .e4wd-findify-close span {
		position: relative;
		z-index: 3;
	}

	/* Requested: lift the suggestions panel off the page. */
	.logo-section .header-search .findify-layouts--autocomplete--dropdown__container {
		box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22), 0 3px 10px rgba(0, 0, 0, 0.14) !important;
	}

	/* Only reserve room for two buttons (and suppress the native search "×")
	   while the close button is actually showing. */
	.header-search .input-group.e4wd-search-active input[type="search"] {
		padding-right: 100px !important;
	}

	.header-search .input-group.e4wd-search-active input[type="search"]::-webkit-search-cancel-button {
		-webkit-appearance: none;
		display: none;
	}
}

.e4wd-findify-close {
	display: none;
}

/* Mobile search overlay: the bar already ends with an X (.cross-mobile-search,
   which hides the overlay). Restyle it into the same theme square close button
   as the desktop pair — magnifier icon stays on the left, themed close at the
   end. The desktop close button itself never shows below 768px. */
@media (max-width: 767.98px) {
	.mobile-search-box .cross-mobile-search {
		align-items: center;
		background: #bce47a;
		border: 2px solid #008140;
		border-radius: 4px;
		color: #333;
		display: flex;
		font-size: 18px;
		font-weight: 700;
		height: 42px;
		justify-content: center;
		line-height: 1;
		margin: 0;
		right: 5px;
		top: 50%;
		transform: translateY(-50%);
		width: 45px;
	}

	.mobile-search-box .e4wd-findify-close {
		display: none !important;
	}
}

@media (min-width: 768px) and (max-width: 1300px) {
	/* Mirrors Findify's remote ≤1300px overrides so first paint matches final state. */
	.logo-section .header-search .findify-container.findify-autocomplete {
		left: -200px !important;
	}

	.logo-section .header-search .findify-layouts--autocomplete--dropdown {
		max-width: 80vw !important;
	}

	.logo-section .header-search .findify-components-autocomplete--suggestions {
		max-width: 200px;
	}
}

/* =====================================================================
   DESKTOP "MENU" BUTTON FIT
   Above 1100px the .toogle-b anchor falls back to display:inline, and in
   the ~1200–1300px window the .col-md-2 column makes .browser-cat
   narrower (~101px) than the one-line icon+label (~112px) — the label
   wraps under the icon and spills out of the 45px green box. Keep icon
   and label on one row, clip inside the box as a hard guard, and drop
   the icon (user-approved) only when the box is genuinely too narrow,
   via a container query. ≤1100px and mobile keep their existing rules.
   ===================================================================== */
@media (min-width: 1101px) {
	.logo-section .browser-cat {
		container-type: inline-size;
		overflow: hidden;
	}

	.logo-section .browser-cat .toogle-b {
		min-width: 0;
	}

	.logo-section .browser-cat .toogle-b a {
		align-items: center;
		display: inline-flex !important;
		gap: 7px;
		max-width: 100%;
		white-space: nowrap;
	}

	.logo-section .browser-cat .toogle-b a svg {
		flex: 0 0 auto;
	}

	/* content-box ≤78px cannot fit icon(18) + gap(7) + "MENU"(~47): hide the icon,
	   the label alone fits. Browsers without container queries keep the
	   nowrap+overflow guard above, which already prevents the pop-out. */
	@container (max-width: 78px) {
		.toogle-b a svg {
			display: none;
		}
	}
}

/* =====================================================================
   CATEGORY-PAGE CLS (the origin's failing field CLS lives here)
   Measured on the live category pages: total shifts ≈ 1.2 per visit.
     1) 0.59 — .top-category-design tiles are block divs that stack
        vertically until slick initialises, then collapse to one row.
        Pre-init, lay them out as the same single row slick will show
        (6 / 4 / 3 / 2 tiles matching custom.js slick breakpoints) so the
        strip paints at its final height. Selectors stop matching the
        instant slick adds .slick-initialized.
     2) 0.44 — the Findify category/search grid mounts ~3s in, growing
        an empty div by ~2000px and shoving everything below it. Reserve
        one viewport of height until Findify mounts; :has() releases the
        floor the moment the grid exists, so nothing changes visually.
   ===================================================================== */
.top-category-design:not(.slick-initialized) {
	display: flex;
	overflow: hidden;
}

.top-category-design:not(.slick-initialized) > .text-center {
	flex: 0 0 16.666%;
	max-width: 16.666%;
}

/* The 70x70 tile-image rule in single-product.css is gated on
   .slick-initialized + .brand-main, so before init the images render at
   full tile width (~190-220px square) and collapse to 70px — the largest
   single shift on mobile category pages. Mirror the final size pre-init. */
.top-category-design:not(.slick-initialized) > .text-center img {
	height: 70px;
	margin: auto;
	object-fit: cover;
	width: 70px;
}

/* The -21px nudge in style.css is gated on the JS-added .brand-main class,
   so the strip visibly hops up ~21px mid-load. Same value, present from
   first paint; identical final position. */
body#n_category section.top-category-design {
	position: relative;
	top: -21px;
}

.top-category-design:not(.slick-initialized) > .text-center:nth-child(n+7) {
	display: none;
}

@media (max-width: 1024px) {
	.top-category-design:not(.slick-initialized) > .text-center {
		flex: 0 0 25%;
		max-width: 25%;
	}

	.top-category-design:not(.slick-initialized) > .text-center:nth-child(n+5) {
		display: none;
	}
}

@media (max-width: 990px) {
	.top-category-design:not(.slick-initialized) > .text-center {
		flex: 0 0 33.333%;
		max-width: 33.333%;
	}

	.top-category-design:not(.slick-initialized) > .text-center:nth-child(n+4) {
		display: none;
	}
}

@media (max-width: 766px) {
	.top-category-design:not(.slick-initialized) > .text-center {
		flex: 0 0 50%;
		max-width: 50%;
	}

	.top-category-design:not(.slick-initialized) > .text-center:nth-child(n+3) {
		display: none;
	}
}

/* Floor stays up through Findify's multi-stage render (container → skeleton →
   grid), because releasing on the first small render lets the content below
   flash into the viewport and back out (two counted shifts). custom.js drops
   this floor via inline style once the grid height has been stable for ~1s —
   by then the grid is taller than the floor on real categories, so releasing
   changes nothing visually. */
div[data-findify="search"] {
	min-height: 100vh;
}

/* =====================================================================
   HOME VEHICLE SLIDER (.slider-section-2 .rev_slider) STABILITY
   Root cause of the page-jump during autoplay: normal slides are
   transform:scale(0.8) and the centre is scale(1.1), but ALSO the centre
   slide's image switches 96% -> 100% width (style.css). The image width
   change is a REAL layout change, so as cards rotate through the centre
   the slick-list grows/shrinks and everything below it pulses. The old
   theme floor (22vh / 70vh) either sat below the content (jump) or far
   above it (dead space), and only my previous 28vw rule above 1025px was
   protected — below 1025px the jump remained (verified at 1000px: list
   229px vs centre 252px -> 9px oscillation).

   Fix: a CSS fallback floor across the whole desktop/tablet range, then
   custom.js measures the settled centre card and pins the list min-height
   to its exact height (incl. the 1.1 scale) so the list always contains
   the tallest state — no jump, no clip, minimal dead space. The synced
   heading above is rewritten with each vehicle name every transition;
   nowrap stops long names wrapping to a second line and shoving the page.
   ===================================================================== */
@media (min-width: 768px) {
	.slider-section-2 .rev_slider .slick-list.draggable {
		min-height: 28vw !important;
	}

	.slider-headding-1.top-heading {
		min-height: 45px;
	}
}

.slider-headding-1.top-heading {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* =====================================================================
   DESKTOP HEADER CONTROL ALIGNMENT
   The account control (#header-call .non-user) holds a Bootstrap
   dropdown-toggle whose ::after caret was rendering on its own line and
   pushing the toggle ~32px below the 45px control row at tight widths
   (measured: toggle bottom 134 vs row bottom 102), so the account button
   looked taller/misaligned next to the cart and vehicle buttons. Center
   the account control and its toggle on the same axis as the other
   controls and keep the icon + caret on one line. Visual style (colours,
   sizes, the dropdown menu) is untouched — this only fixes vertical
   alignment and the caret wrap.
   ===================================================================== */
@media (min-width: 768px) {
	/* The theme switches .non-user to display:block at narrow desktop widths,
	   which stacks its two <li> (the standalone account icon and the
	   "My Account" dropdown) vertically so the dropdown caret pushes ~32px
	   below the 45px control row. Forcing a centred flex row keeps them inline
	   and vertically centred at every width. At wide widths .non-user is
	   already flex, so this is a no-op there (verified at 1440px). */
	#header-call .non-user {
		align-items: center !important;
		display: flex !important;
		justify-content: flex-end;
	}

	#header-call .non-user > li {
		display: flex;
		align-items: center;
	}

	#header-call .non-user .nav-item.dropdown > .dropdown-toggle {
		align-items: center;
		display: inline-flex;
		line-height: 1;
		white-space: nowrap;
	}

	/* Keep the three right-hand controls vertically centred as a set so they
	   stay aligned as the header reflows across Chrome resize breakpoints. */
	#header-call .non-user,
	#header-cart,
	#header-cart a#cartcontentsheader,
	.btn.p-0.vehicle-icon {
		align-self: center;
	}
}