/* =============================================================================
 * Brother's Pizza — U10 CLS fix (R13).  [WS-A]
 *
 * Baseline twin CLS: desktop 0.731 / mobile 0.341.  Target: < 0.1 on both.
 * Measured root cause (CDP layout-shift sources): the WPBakery full-width rows
 * (`.vc_row[data-vc-full-width]`) are rendered at container width first, then
 * js_composer's JS stretches them to the viewport AFTER load — reflowing every
 * inner row / button / separator below them. The hero <img> and product
 * thumbnails already carry intrinsic width/height (+ U5 eager-loads the LCP),
 * so they are reserved defensively but were not the shifters.
 *
 * Strategy: reserve the FINAL geometry up front in CSS so the pre-JS and post-JS
 * layouts are identical and nothing moves. `100%` resolves to each row's own
 * containing block, so the math self-adjusts to the theme's container width with
 * no hard-coded pixels. `!important` holds our geometry through js_composer's
 * inline mutation (its inline styles are non-important and lose to us), which is
 * what makes the shift disappear rather than merely shrink. The theme already
 * sets `overflow-x:hidden` on html+body (and `overflow-y:scroll`), so the vw
 * overshoot from the scrollbar is clipped and never creates a horizontal bar.
 * ========================================================================== */

/* 1. Full-width WPBakery rows — pre-stretch to js_composer's full-bleed target. */
.vc_row[data-vc-full-width] {
	position: relative !important;
	box-sizing: border-box !important;
	left: calc(-1 * (100vw - 100%) / 2) !important;
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* 1a. Rows that are NOT "stretch content" keep their inner content at container
 *     width — pad it back exactly like js_composer does, so text/buttons don't
 *     jump to the screen edges. */
.vc_row[data-vc-full-width]:not([data-vc-stretch-content="true"]) {
	padding-left: calc((100vw - 100%) / 2) !important;
	padding-right: calc((100vw - 100%) / 2) !important;
}

/* 1b. The clearfix spacer js_composer injects after each full-width row must not
 *     reserve extra vertical space. */
.vc_row-full-width {
	height: 0 !important;
	overflow: hidden;
}

/* 2. Hero / LCP single image (class vc_single_image-img, intrinsic 1900x900)
 *    and any WPBakery single image: keep the intrinsic aspect ratio reserved so
 *    the box never collapses to 0 then jumps to full height. */
.wpb_single_image img,
.vc_single_image-wrapper img,
img.vc_single_image-img {
	height: auto;
	max-width: 100%;
}

/* 3. WooCommerce product thumbnails (300x300 / 350x350) live inside owl-carousel
 *    grids that restructure on init. They ship intrinsic width/height; hold the
 *    aspect box so async/owl init can't shift the grid. */
.prod_hold .image img,
img.attachment-woocommerce_thumbnail,
img.attachment-woocommerce_thumbnail_scaled {
	height: auto;
	max-width: 100%;
}

/* 4. Owl-carousel init — THE dominant CLS source (measured: it is ~100% of the
 *    baseline shift). Each owl carousel is laid out at the wrong height before
 *    owl adds `.owl-loaded`, then snaps to a single-row carousel on init and
 *    yanks every section below it. We reserve each carousel's final height up
 *    front, per carousel type. All rules are scoped `:not(.owl-loaded)` so they
 *    apply ONLY in the pre-init window and hand full control back to owl the
 *    instant it initialises. */

/* 4a. Hero content-slider — a WPBakery vc_tta (tabs) element rendered as an owl
 *     slider (`.lafka_content_slider .vc_tta-panels.owl-carousel`). Its panels
 *     ship `display:none` (tabs default), so the hero is 0px tall until owl runs
 *     and then jumps to full height (the single biggest shift). Fix, prod-robust
 *     first: force the FIRST slide visible pre-init so its intrinsic-sized <img>
 *     (real width/height attrs + the `height:auto` above) reserves the true
 *     height on any viewport and any image — no magic numbers. Hide the other
 *     slides and the tab headings, and add a viewport-proportional min-height
 *     floor (measured on the twin: ~59vw desktop / ~78vw mobile) as a safety net
 *     so the reservation can never be shorter than the real slider. */
.lafka_content_slider .vc_tta-panels.owl-carousel:not(.owl-loaded) {
	display: block !important;
	overflow: hidden !important;
	min-height: 78vw !important;
}
@media (min-width: 768px) {
	.lafka_content_slider .vc_tta-panels.owl-carousel:not(.owl-loaded) {
		min-height: 59vw !important;
	}
}
.lafka_content_slider .vc_tta-panels.owl-carousel:not(.owl-loaded) > .vc_tta-panel:first-child {
	display: block !important;
}
.lafka_content_slider .vc_tta-panels.owl-carousel:not(.owl-loaded) > .vc_tta-panel:first-child ~ .vc_tta-panel {
	display: none !important;
}
.lafka_content_slider .vc_tta-panels.owl-carousel:not(.owl-loaded) .vc_tta-panel-heading {
	display: none !important;
}

/* 4b. Product / image owl carousels: their raw slides tile into a multi-row grid
 *     before init, then collapse to one row. Clip to the first slide's row and
 *     hold a min-height floor equal to the post-init single-row height. */
.woocommerce.owl-carousel:not(.owl-loaded),
.lafka_image_list.owl-carousel:not(.owl-loaded) {
	overflow: hidden !important;
	min-height: 486px !important;
}
@media (max-width: 767px) {
	.woocommerce.owl-carousel:not(.owl-loaded),
	.lafka_image_list.owl-carousel:not(.owl-loaded) {
		min-height: 455px !important;
	}
}
.owl-carousel:not(.owl-loaded) > .prod_hold + .prod_hold {
	display: none !important;
}

/* 4c. Any other owl carousel: at least clip pre-init overflow so stacked slides
 *     can't push the page; harmless where a carousel is already correctly sized. */
.owl-carousel:not(.owl-loaded) {
	overflow: hidden;
}