/*
 * Homepage sections that use wp:columns as a row of full-bleed cover
 * "cards" (hero banner, "Look of the Day"). WordPress core stacks
 * wp-block-columns vertically below 781px (wp-block-library-theme.css:
 * flex-wrap:wrap + flex-basis:100% !important on each .wp-block-column).
 * Below that same breakpoint, turn them into a horizontal swipe row
 * instead: the row scrolls with native touch/scroll-snap, and each
 * "slide" is unwrapped out of its .wp-block-column / block-library
 * wrapper via `display: contents` so it becomes a direct flex item of the
 * row — flex-basis:100% on a display:contents box has no visual effect,
 * so it doesn't fight core's !important rule.
 */
@media (max-width: 781px) {
	/* "Look of the Day" (banner + 3 products, className "is-style-mbf-columns-gap-xs-2" — confirmed unique on the homepage). */
	.wp-block-columns.is-style-mbf-columns-gap-xs-2 {
		display: flex !important;
		flex-wrap: nowrap !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 4px;
	}

	.wp-block-columns.is-style-mbf-columns-gap-xs-2 > .wp-block-column,
	.wp-block-columns.is-style-mbf-columns-gap-xs-2 .wc-block-grid.has-3-columns,
	.wp-block-columns.is-style-mbf-columns-gap-xs-2 .wc-block-grid__products {
		display: contents;
	}

	.wp-block-columns.is-style-mbf-columns-gap-xs-2 .wp-block-cover.is-style-mbf-cover-promo {
		flex: 0 0 82%;
		scroll-snap-align: start;
	}

	/* The theme's own ".wc-block-grid .wc-block-grid__product" rule
	 * (woocommerce.css) sets `flex: initial !important; width: initial
	 * !important;` — a plain (non-important) flex here can never win
	 * against that regardless of specificity/load order, so this needs
	 * !important too. */
	.wp-block-columns.is-style-mbf-columns-gap-xs-2 .wc-block-grid__product {
		flex: 0 0 82% !important;
		width: 82% !important;
		scroll-snap-align: start;
	}

	.wp-block-columns.is-style-mbf-columns-gap-xs-2 .wp-block-cover.is-style-mbf-cover-promo {
		/* Same issue/fix as .is-style-mbf-cover-featured below: the theme's
		 * .wp-block-cover__inner-container relies on height:100% (style.css),
		 * which needs a definite-height ancestor to resolve against —
		 * display:contents on the parent column breaks that chain. */
		min-height: 320px;
		height: 320px;
	}

	/* Hero "Featured" banner (NOVIDADES / COLEÇÃO WORKOUT / KITS & PACKS, "mbf/featured" pattern, className "is-style-mbf-columns-gap-2px"). */
	.wp-block-columns.is-style-mbf-columns-gap-2px {
		display: flex !important;
		flex-wrap: nowrap !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 4px;
	}

	.wp-block-columns.is-style-mbf-columns-gap-2px > .wp-block-column {
		display: contents;
	}

	.wp-block-columns.is-style-mbf-columns-gap-2px .wp-block-cover.is-style-mbf-cover-featured {
		flex: 0 0 86%;
		scroll-snap-align: start;
		/* The theme's own min-height/height:100% (style.css) needs a definite-height
		 * ancestor to resolve against; display:contents on the parent column breaks
		 * that chain, so give each slide an explicit height here instead. */
		min-height: 480px;
		height: 480px;
	}
}