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