/**
 * wideum-resp-products.css
 *
 * Fidelity + responsive for the home "Discover our products" block, emitted by
 * the native widget `wideum-products-showcase` (section.hm-products). The
 * conserved theme rules (.hm-products*, .container, .section-bg in
 * wideum-theme.css) assume the section spans the FULL viewport width — that is
 * how production renders it: .container (padding: 0 10%) then yields the ~1280
 * content column and .section-bg (width: 96%) yields the wide grey band that is
 * a bit wider than the content, with the large active image centred inside it.
 *
 * In the migrated page the widget lives inside an Elementor boxed container
 * (.e-con-boxed > .e-con-inner, max-width 1280) so the section was clamped to
 * 1280: the grey band became NARROWER than the image and the image ran edge to
 * edge. We full-bleed just this section (its parent carries the specific class
 * `w-home-products`) so the conserved mechanism reproduces production 1:1.
 *
 * Owned exclusively by this file — see includes/assets.php enqueue loop.
 */

/* ---- Desktop fidelity: full-bleed the section ------------------------- */
.w-home-products {
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.w-home-products > .e-con-inner {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
/* The widget wrappers must not re-introduce any horizontal constraint. */
.w-home-products .elementor-widget-wideum-products-showcase,
.w-home-products .elementor-widget-wideum-products-showcase > .elementor-widget-container {
	width: 100%;
	max-width: 100%;
}
/* Once full-bleed, an Elementor reset flattens the inner `.container` to
   max-width:100% with no padding, so the cards row and the large image would
   span the full viewport. Re-assert the conserved theme `.container` sizing
   (wideum-theme.css lines 115-117) scoped to this section so the content
   column lands at ~1280 (10% side padding) exactly like production, at every
   breakpoint. */
.hm-products .container {
	width: 100% !important;
	max-width: var(--container) !important; /* 1800px */
	padding: 0 10% !important;
	margin: 0 auto !important;
	box-sizing: border-box !important;
}
@media (min-width: 2000px) {
	.hm-products .container {
		padding: 0 var(--margin-section-large) !important;
	}
}
@media (max-width: 700px) {
	.hm-products .container {
		padding: 0 25px !important;
	}
}

/* Guard against overflow: the section already has overflow:hidden (theme
   `section{}` rule); keep the large image inside its column. */
.hm-products__image {
	max-width: 100%;
}
.hm-products__images-container {
	max-width: 100%;
}

/* Card body text is justified on production (both desktop and mobile); the
   migrated default left-aligns it. Match production. */
.hm-products__text {
	text-align: justify;
}

/* ---- Mobile / tablet responsive (matches production ≤800px) ----------- */
/*
 * On production ≤800px the cards stack at 100% width, every card is FLAT (no
 * gradient background, no white border frame) and the product image is moved
 * directly beneath its card (theme.js `moveElement`). The conserved theme
 * rules already do the stacking + image move, but wideum-fix-a.css [1] adds a
 * desktop "rest state" that highlights the first card whenever no card carries
 * `.active` — on mobile no card is ever active, so that fallback wrongly paints
 * the first card with the gradient + border frame, and because the mobile card
 * padding is 0 the body text then overlaps the frame and clips at the edge.
 * Neutralise both the fix-a fallback highlight and any leftover `.active`
 * highlight below 800px so every card renders flat, exactly like production.
 */
@media (max-width: 800px) {
	.hm-products__cards-container:not(:has(.hm-products__product.active)) .hm-products__product:first-child .hm-products__card,
	.hm-products__product.active .hm-products__card {
		background: none !important;
	}
	.hm-products__cards-container:not(:has(.hm-products__product.active)) .hm-products__product:first-child .hm-products__card-border,
	.hm-products__product.active .hm-products__card-border {
		display: none !important;
	}
}