/*
 * JP Cages - mobile fixes
 * ------------------------------------------------------------------
 * Every rule below is inside a single max-width:600px media query.
 * Desktop and tablet are untouched by construction.
 * Each fix is annotated with the defect it corrects and the measured
 * cause, taken from the live site at a 390px viewport.
 */

@media (max-width: 600px) {

	/* ------------------------------------------------------------------
	 * 1. Product images were cropped left and right
	 *
	 * The cage renders are landscape (typically 390x333) but the theme
	 * renders them in a portrait box (166x220 in a category card, 355x430
	 * on a product page) with object-fit:cover. Cover fills the box and
	 * throws away the sides, which sliced the cage itself and cut the
	 * "ILLUSTRATION ONLY" and "JPC0.5 (TYPICAL HALF CAGE STYLE)" labels
	 * in half. contain shows the whole image; the renders sit on white
	 * so the letterboxing is invisible.
	 * ---------------------------------------------------------------- */
	body li.product img.wp-post-image,
	body .woocommerce-product-gallery__image img,
	body .slick-slide img.wp-post-image {
		object-fit: contain !important;
	}

	/* ------------------------------------------------------------------
	 * 2. "Shop by category" tile labels were cut in half
	 *
	 * .jpc-sbc-label-wrap is absolutely positioned with bottom:22px,
	 * which suits a tall desktop tile. At mobile the tile is only 49px
	 * high (aspect-ratio 16/7 on a 111px column), so a 36px label pushed
	 * up 22px from the base overflowed the top of the tile and was
	 * clipped by the tile's overflow:hidden.
	 * ---------------------------------------------------------------- */
	body .jpc-sbc-tile .jpc-sbc-label-wrap {
		bottom: 10px !important;
	}

	/* ------------------------------------------------------------------
	 * 3. The sorting dropdown ran off the right of the screen
	 *
	 * .products-nav is a nowrap flex row and the ordering form carries a
	 * fixed width:230px. On a 355px row that pushed the control to x=354
	 * and 209px past the right edge - only the "D" of "Default sorting"
	 * was visible and it could not be used.
	 * ---------------------------------------------------------------- */
	body .products-nav {
		flex-wrap: wrap !important;
		gap: 10px !important;
	}

	body .products-nav form.woocommerce-ordering,
	body .products-nav .swg-custom-orderby-dropdown,
	body .products-nav .swg-custom-orderby-dropdown .selected-option {
		width: 100% !important;
		max-width: 100% !important;
	}

	/* ------------------------------------------------------------------
	 * 4. The filter drawer tab sat on top of the "Find your cage" form
	 *
	 * button.show-sidebar is absolutely positioned at top:200px inside
	 * the off-canvas drawer, so it parks itself permanently at screen
	 * y=230 - directly over the red step-1 badge of the finder. Moving
	 * it to the lower left keeps it thumb-reachable and clear of the
	 * form. Its position property is deliberately left alone: the button
	 * is anchored to the transformed drawer, and making it fixed sends
	 * it off-screen with the drawer.
	 * ---------------------------------------------------------------- */
	body #left button.show-sidebar {
		top: auto !important;
		bottom: 120px !important;
	}
}