/**
 * Ebike Hause - ENGWE Engine Pro 2.0 mobile above-the-fold compaction.
 * Added 2026-09-09 (Phase 2).
 *
 * PURPOSE
 * On mobile the price sat at 870px and the Add to Cart button at 1207px on an
 * 844px viewport, so a visitor landing from a TikTok ad saw the product image
 * and title but neither the price nor any buy button without scrolling
 * 1.4 screens. This file reclaims vertical space above the buy controls.
 *
 * SCOPE
 * Enqueued only when engwe_is_target_product() is true (product 29024, which
 * is also the front page), and every rule below is inside
 * @media (max-width: 767px). Desktop and tablet are untouched. No Elementor
 * structure is changed - this is presentation only.
 *
 * WHAT IS DELIBERATELY NOT DONE
 * - The product image is never cropped. Height is reduced by constraining the
 *   gallery width, so the aspect ratio is preserved exactly.
 * - No content is removed. The "In Deutschland legal" badge and the colour
 *   swatch labels stay; they are only tightened.
 * - Swatch tap targets stay at 44px (accessibility minimum).
 *
 * ROLLBACK
 * Remove the engwe_enqueue_mobile_atf_css() function and its add_action() in
 * functions.php, wait for opcache (revalidate_freq=60), then delete this file.
 */

@media (max-width: 767px) {

	/* ---------------------------------------------------------------
	 * 1. Gallery thumbnail strip: 158px tall on a 844px viewport.
	 *
	 *    It is COMPACTED, not hidden. .wd-gallery-thumb is a second
	 *    Swiper instance linked to the main gallery through Swiper's
	 *    thumbs module, and it must keep a measurable height or the
	 *    whole gallery fails to initialise - the main image then stops
	 *    responding to swipe entirely.
	 *
	 *    Measured height sweep (swipe tested at 360px and 390px):
	 *        56px OK    44px OK    36px OK    28px OK
	 *        20px DEAD  12px DEAD   6px DEAD   2px DEAD
	 *    display:none, height:0, max-height:0, visibility:hidden and
	 *    position:absolute were ALL dead at both widths.
	 *
	 *    Simply clipping the strip to 36px sat above that cliff but
	 *    showed only the blank top edge of each thumbnail - three empty
	 *    grey boxes that read as broken images. So the thumbnails are
	 *    SCALED DOWN instead: the strip is 48px and each thumbnail is
	 *    rendered at 44px with object-fit: contain, so all three colour
	 *    variants stay visible and legible. Swipe and the prev/next
	 *    arrows both keep working, verified at 360px and 390px.
	 * --------------------------------------------------------------- */
	.single-product .woocommerce-product-gallery .wd-gallery-thumb {
		max-height: 48px !important;
		overflow: hidden !important;
		margin-top: 4px !important;
	}

	.single-product .woocommerce-product-gallery .wd-gallery-thumb .wd-carousel-item {
		height: 44px !important;
	}

	.single-product .woocommerce-product-gallery .wd-gallery-thumb img {
		height: 44px !important;
		width: 100% !important;
		object-fit: contain !important;
	}

	/* The flexslider fallback strip is not a linked Swiper, so it can be
	   removed outright when the theme falls back to it. */
	.single-product .woocommerce-product-gallery .flex-control-thumbs {
		display: none !important;
	}

	/* ---------------------------------------------------------------
	 * 2. Main image size: DELIBERATELY LEFT ALONE.
	 *
	 *    Two approaches were tried and both broke the gallery, so the
	 *    image is now untouched:
	 *
	 *    (a) max-width on .woocommerce-product-gallery - Swiper writes an
	 *        inline width onto each slide at init, so constraining the
	 *        container left the wrapper the same width as one slide and
	 *        Swiper concluded there was nothing to scroll. Swipe died at
	 *        every width tested.
	 *
	 *    (b) max-height + object-fit on the img - swipe still died at
	 *        360px and 375px viewports (it survived at 390px and 414px).
	 *        360/375 are very common phone widths, so this was rejected
	 *        too. Verified by A/B: identical slide geometry with the rule
	 *        removed swiped correctly, so the rule was the cause.
	 *
	 *    Both were worth only ~55px. Hiding the thumbnail strip (rule 1)
	 *    reclaims ~158px on its own with no interaction risk, so the
	 *    image is left exactly as the theme renders it.
	 * --------------------------------------------------------------- */

	/* ---------------------------------------------------------------
	 * 3. Summary column spacing: 20px between every block adds up to
	 *    80px above the buy controls. 10px keeps the blocks visually
	 *    separated while halving the cost.
	 * --------------------------------------------------------------- */
	.single-product .elementor-element-1c31fe0 {
		--row-gap: 10px;
		row-gap: 10px;
	}

	/* ---------------------------------------------------------------
	 * 4. "In Deutschland legal" badge: keep the message, tighten the box.
	 * --------------------------------------------------------------- */
	.single-product .engwe-legal-badge {
		padding-top: 6px;
		padding-bottom: 6px;
	}

	/* ---------------------------------------------------------------
	 * 5. Variation label row ("Farbe" / "Zurücksetzen").
	 * --------------------------------------------------------------- */
	.single-product .variations th.label,
	.single-product .variations .label.cell {
		margin-bottom: 6px;
	}

	/* ---------------------------------------------------------------
	 * 6. Add to cart row sat 30px below the swatches.
	 * --------------------------------------------------------------- */
	.single-product .woocommerce-variation-add-to-cart {
		margin-top: 14px !important;
	}

}