/**
 * KosherShop Homepage — Mobile-only compact redesign for "Shop Now" and
 * "How It Works" (client request, see BUG_HISTORY.md BUG-0092).
 *
 * Scope: every rule here is wrapped in the SAME mobile breakpoint
 * Elementor's own generated CSS already uses on this page
 * (`@media (max-width:767px)`, confirmed in post-10.css) and targets the
 * exact same `.elementor-10 .elementor-element.elementor-element-<id>`
 * selectors Elementor itself generates, at matching specificity. Desktop
 * (min-width:1025px) and tablet (768-1024px) rules are untouched — this
 * file adds nothing outside the 767px query. `!important` is used
 * defensively (matching the precedent in kosher-chatbot-widget-fix.css,
 * BUG-0087) since these selectors override Elementor's own generated,
 * equally-specific rules; relying on load order alone proved fragile for
 * similar overrides on this project before.
 *
 * Both sections already collapse to a correct 2x2 grid at the TABLET
 * breakpoint (768-1024px, unchanged) — only the MOBILE breakpoint
 * (<=767px) currently forces a 1-column, 4-row stack. This file's grid
 * overrides below simply restore the same 2x2 arrangement at mobile too.
 */

/* ============================= Shop Now ============================= */

/* Restore the 2x2 grid at mobile (currently forced to 1 column / 4 rows). */
@media (max-width: 767px) {
	.elementor-10 .elementor-element.elementor-element-8a5b06a {
		--e-con-grid-template-columns: repeat(2, 1fr) !important;
		--e-con-grid-template-rows: repeat(2, 1fr) !important;
		--gap: 12px 12px !important;
		--row-gap: 12px !important;
		--column-gap: 12px !important;
		--padding-top: 10px !important;
	}

	/* Compact square tiles: swap each card's photo background for the
	   supplied icon, drop the photo's dark overlay (no longer needed
	   over a white tile), and shrink the card height. */
	.elementor-10 .elementor-element.elementor-element-ddec79b,
	.elementor-10 .elementor-element.elementor-element-6154f73,
	.elementor-10 .elementor-element.elementor-element-f096e8c,
	.elementor-10 .elementor-element.elementor-element-5b6c26a {
		--min-height: 150px !important;
		--padding-top: 76px !important;
		--padding-bottom: 12px !important;
		--padding-left: 8px !important;
		--padding-right: 8px !important;
		--gap: 2px 2px !important;
		--row-gap: 2px !important;
	}

	.elementor-10 .elementor-element.elementor-element-ddec79b:not(.elementor-motion-effects-element-type-background),
	.elementor-10 .elementor-element.elementor-element-ddec79b > .elementor-motion-effects-container > .elementor-motion-effects-layer {
		background-image: url("https://koshershop.com/wp-content/mu-plugins/kosher-homepage-icons/kosher-icon-meat.jpg") !important;
		background-size: 56px 56px !important;
		background-position: center 14px !important;
		background-repeat: no-repeat !important;
		background-color: #ffffff !important;
	}
	.elementor-10 .elementor-element.elementor-element-6154f73:not(.elementor-motion-effects-element-type-background),
	.elementor-10 .elementor-element.elementor-element-6154f73 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
		background-image: url("https://koshershop.com/wp-content/mu-plugins/kosher-homepage-icons/kosher-icon-poultry.jpg") !important;
		background-size: 56px 56px !important;
		background-position: center 14px !important;
		background-repeat: no-repeat !important;
		background-color: #ffffff !important;
	}
	.elementor-10 .elementor-element.elementor-element-f096e8c:not(.elementor-motion-effects-element-type-background),
	.elementor-10 .elementor-element.elementor-element-f096e8c > .elementor-motion-effects-container > .elementor-motion-effects-layer {
		background-image: url("https://koshershop.com/wp-content/mu-plugins/kosher-homepage-icons/kosher-icon-deli-meat.jpg") !important;
		background-size: 56px 56px !important;
		background-position: center 14px !important;
		background-repeat: no-repeat !important;
		background-color: #ffffff !important;
	}
	.elementor-10 .elementor-element.elementor-element-5b6c26a:not(.elementor-motion-effects-element-type-background),
	.elementor-10 .elementor-element.elementor-element-5b6c26a > .elementor-motion-effects-container > .elementor-motion-effects-layer {
		background-image: url("https://koshershop.com/wp-content/mu-plugins/kosher-homepage-icons/kosher-icon-dry-goods.jpg") !important;
		background-size: 56px 56px !important;
		background-position: center 14px !important;
		background-repeat: no-repeat !important;
		background-color: #ffffff !important;
	}

	/* Drop the photo-card dark gradient overlay — only meaningful over a
	   photo, and would otherwise paint a pointless dark layer over the
	   new white icon tile. Targets every variant selector Elementor
	   itself generates for this pseudo-element (confirmed in post-10.css)
	   so it's hidden regardless of which one actually renders. */
	.elementor-10 .elementor-element.elementor-element-ddec79b::before,
	.elementor-10 .elementor-element.elementor-element-ddec79b > .elementor-background-video-container::before,
	.elementor-10 .elementor-element.elementor-element-ddec79b > .e-con-inner > .elementor-background-video-container::before,
	.elementor-10 .elementor-element.elementor-element-ddec79b > .elementor-background-slideshow::before,
	.elementor-10 .elementor-element.elementor-element-ddec79b > .e-con-inner > .elementor-background-slideshow::before,
	.elementor-10 .elementor-element.elementor-element-ddec79b > .elementor-motion-effects-container > .elementor-motion-effects-layer::before,
	.elementor-10 .elementor-element.elementor-element-6154f73::before,
	.elementor-10 .elementor-element.elementor-element-6154f73 > .elementor-background-video-container::before,
	.elementor-10 .elementor-element.elementor-element-6154f73 > .e-con-inner > .elementor-background-video-container::before,
	.elementor-10 .elementor-element.elementor-element-6154f73 > .elementor-background-slideshow::before,
	.elementor-10 .elementor-element.elementor-element-6154f73 > .e-con-inner > .elementor-background-slideshow::before,
	.elementor-10 .elementor-element.elementor-element-6154f73 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before,
	.elementor-10 .elementor-element.elementor-element-f096e8c::before,
	.elementor-10 .elementor-element.elementor-element-f096e8c > .elementor-background-video-container::before,
	.elementor-10 .elementor-element.elementor-element-f096e8c > .e-con-inner > .elementor-background-video-container::before,
	.elementor-10 .elementor-element.elementor-element-f096e8c > .elementor-background-slideshow::before,
	.elementor-10 .elementor-element.elementor-element-f096e8c > .e-con-inner > .elementor-background-slideshow::before,
	.elementor-10 .elementor-element.elementor-element-f096e8c > .elementor-motion-effects-container > .elementor-motion-effects-layer::before,
	.elementor-10 .elementor-element.elementor-element-5b6c26a::before,
	.elementor-10 .elementor-element.elementor-element-5b6c26a > .elementor-background-video-container::before,
	.elementor-10 .elementor-element.elementor-element-5b6c26a > .e-con-inner > .elementor-background-video-container::before,
	.elementor-10 .elementor-element.elementor-element-5b6c26a > .elementor-background-slideshow::before,
	.elementor-10 .elementor-element.elementor-element-5b6c26a > .e-con-inner > .elementor-background-slideshow::before,
	.elementor-10 .elementor-element.elementor-element-5b6c26a > .elementor-motion-effects-container > .elementor-motion-effects-layer::before {
		display: none !important;
	}

	/* Heading + button were white text designed for a dark photo backdrop
	   — recolored for the new white tile. Brand teal (#0CC0DF) matches
	   this site's confirmed real theme color (see BUG_HISTORY #0086). */
	.elementor-10 .elementor-element.elementor-element-8e89d14 .elementor-heading-title,
	.elementor-10 .elementor-element.elementor-element-961e59d .elementor-heading-title,
	.elementor-10 .elementor-element.elementor-element-e725f70 .elementor-heading-title,
	.elementor-10 .elementor-element.elementor-element-dde74fe .elementor-heading-title {
		color: #000000 !important;
		font-size: 17px !important;
		line-height: 1.2 !important;
	}

	.elementor-10 .elementor-element.elementor-element-7800396 .elementor-button,
	.elementor-10 .elementor-element.elementor-element-c8a516c .elementor-button,
	.elementor-10 .elementor-element.elementor-element-757524f .elementor-button,
	.elementor-10 .elementor-element.elementor-element-73c2342 .elementor-button {
		color: #0CC0DF !important;
		fill: #0CC0DF !important;
		font-size: 13px !important;
	}

	/* Whole tile remains one visible, obviously-tappable unit — the click
	   target itself (kosher-card-links.php) is unchanged by this file. */
	.elementor-10 .elementor-element.elementor-element-ddec79b,
	.elementor-10 .elementor-element.elementor-element-6154f73,
	.elementor-10 .elementor-element.elementor-element-f096e8c,
	.elementor-10 .elementor-element.elementor-element-5b6c26a {
		cursor: pointer;
	}
}

/* =========================== How It Works ============================ */

@media (max-width: 767px) {
	/* Same fix as Shop Now's grid: restore the 2x2 arrangement already
	   used at tablet width instead of the 1-column/4-row mobile stack. */
	.elementor-10 .elementor-element.elementor-element-68266a3 {
		--e-con-grid-template-columns: repeat(2, 1fr) !important;
		--e-con-grid-template-rows: repeat(2, 1fr) !important;
		--gap: 18px 14px !important;
		--row-gap: 18px !important;
		--column-gap: 14px !important;
		--padding-top: 8px !important;
	}

	/* Each step's icon + label only — the longer description paragraph
	   stays on tablet/desktop but is hidden here to keep the 2x2 grid
	   compact, matching the requested reference layout (icon + label). */
	.elementor-10 .elementor-element.elementor-element-04ad665,
	.elementor-10 .elementor-element.elementor-element-75aa352,
	.elementor-10 .elementor-element.elementor-element-6c0c87d,
	.elementor-10 .elementor-element.elementor-element-d7fe64f {
		display: none !important;
	}

	.elementor-10 .elementor-element.elementor-element-8f239c5,
	.elementor-10 .elementor-element.elementor-element-3a0da76,
	.elementor-10 .elementor-element.elementor-element-b4f26dc,
	.elementor-10 .elementor-element.elementor-element-6d2a607 {
		--gap: 6px 6px !important;
	}

	.elementor-10 .elementor-element.elementor-element-962544b img,
	.elementor-10 .elementor-element.elementor-element-1bbf7ed img,
	.elementor-10 .elementor-element.elementor-element-40f8993 img,
	.elementor-10 .elementor-element.elementor-element-8fc91fe img {
		width: 64px !important;
		max-width: 64px !important;
		height: auto !important;
	}

	.elementor-10 .elementor-element.elementor-element-962544b,
	.elementor-10 .elementor-element.elementor-element-1bbf7ed,
	.elementor-10 .elementor-element.elementor-element-40f8993,
	.elementor-10 .elementor-element.elementor-element-8fc91fe {
		padding: 0 0 6px 0 !important;
	}

	.elementor-10 .elementor-element.elementor-element-38b2d47 .elementor-heading-title,
	.elementor-10 .elementor-element.elementor-element-77edabb .elementor-heading-title,
	.elementor-10 .elementor-element.elementor-element-ff11d36 .elementor-heading-title,
	.elementor-10 .elementor-element.elementor-element-313ba68 .elementor-heading-title {
		font-size: 15px !important;
		line-height: 1.25 !important;
	}
}

/* ========================= About Us section image ===================== */

/*
 * BUG-0093: removes the "About KosherShop.com" photo (about-kosher.webp,
 * background-image on container `df3afcc`) on mobile only — the client
 * flagged it (screenshot, blue X) as an image to drop between the "Learn
 * More About Us" button and the FAQ section. `df3afcc` is the second of
 * two flex children inside parent container `b47162a` (first child
 * `f8ef582` holds the "About KosherShop.com" heading/text/button);
 * Elementor's own generated CSS already stacks `b47162a` to
 * `flex-direction:column` at this same breakpoint, which is why the photo
 * renders directly below the button on mobile today. `display:none` is
 * sufficient on its own — CSS flex `gap` only applies between visible
 * flex items, so hiding this one child removes its own height AND the
 * gap that would otherwise separate it from the next section, with no
 * leftover blank space and no extra margin/padding overrides needed.
 * Desktop/tablet (`b47162a` stays a side-by-side row above 767px) are
 * untouched — the image still renders there exactly as before.
 */
@media (max-width: 767px) {
	.elementor-10 .elementor-element.elementor-element-df3afcc {
		display: none !important;
	}
}

/* =========================== Featured Products ========================= */

/*
 * BUG-0097: "Featured Products" (Unlimited Elements "Woo Product Grid"
 * widget, element `2834d1f`) renders via its own generated CSS, not
 * Elementor's section/column system, and has its own breakpoint distinct
 * from both Elementor's 767px (used elsewhere on this homepage) and the
 * chatbot widget's 768px — confirmed live in the widget's own inline
 * <style> block: `@media (max-width:1023px)` sets 3 columns (tablet),
 * `@media (max-width:639px)` sets 1 column (mobile). This overrides just
 * that one mobile rule to 2 columns per the client's request, matching
 * the widget's own breakpoint exactly so it applies/stops applying at
 * the same width the widget's own tablet rule already does. Desktop (5
 * columns, from the widget's own `items_in_column` setting) and tablet
 * (3 columns) are both completely untouched — this only targets the
 * widget's existing `grid-template-columns` custom rule at its own
 * mobile breakpoint, not touched anywhere else.
 */
@media (max-width: 639px) {
	#uc_woocommerce_product_grid_elementor_2834d1f.uc_post_grid_style_one .uc_post_grid_style_one_wrap {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	/*
	 * BUG-0098: the widget's own image rule (Elementor-generated,
	 * `.elementor-10 .elementor-element.elementor-element-2834d1f
	 * .uc_post_image img`) sets a single fixed `height: 250px` with
	 * `object-fit: cover` — not responsive, same value at every
	 * breakpoint. All source product photos are perfect squares
	 * (confirmed live: 650x650, 768x768, 655x655, etc.). On the old
	 * 1-column mobile layout the card was nearly full-width, so a
	 * ~340x250 box was close enough to square that cropping was barely
	 * noticeable. The new 2-column mobile grid (this file, above) makes
	 * each card only ~128-183px wide depending on screen size (measured
	 * live at 320/375/430px) while the height stayed fixed at 250px —
	 * `cover` then has to crop a large chunk off the left/right of every
	 * square photo to force it into that much taller, narrower box.
	 * `aspect-ratio: 1/1` (rather than picking one fixed pixel height
	 * that would only be "close enough" at some widths) keeps the box
	 * exactly square at whatever width the 2-column grid actually
	 * produces, at any mobile screen size, not just the ones tested —
	 * `object-fit: cover` is left as-is, so the crop-to-fill look still
	 * matches desktop/tablet, it just has almost nothing to crop now
	 * that the box is properly proportioned to the square source images.
	 */
	#uc_woocommerce_product_grid_elementor_2834d1f.uc_post_grid_style_one .uc_post_image img {
		height: auto !important;
		aspect-ratio: 1 / 1 !important;
	}
}