/**
 * Layout corrections for the Ultimate Mix & Match picker.
 *
 * Loaded after the vendor stylesheet (declared as a dependency), so plain
 * specificity is enough and nothing here needs !important.
 *
 * @package MnmProductType
 */

/*
 * OVERLAP.
 *
 * The vendor lays the picker out as `grid-template-columns: 1fr auto` and gives the
 * right-hand box `min-width: 340px`. A `1fr` track will not shrink below its content's
 * min-content width, and the `auto` track is pinned at 340px, so whenever the two
 * exceed the container the grid overflows and the panels visually collide. The vendor
 * only stacks them below a 1200px VIEWPORT — but the picker sits inside the product
 * summary column, which is far narrower than the viewport on most themes, so the
 * viewport is the wrong thing to measure.
 *
 * Flex with wrapping measures the container instead: the box drops below the product
 * list as soon as the two no longer fit, at any viewport size.
 */
@media (min-width: 720px) {
	/*
	 * Two real columns, not wrapping flex. The products panel is a grid of
	 * `repeat(4, 1fr)`, and a 1fr track will not shrink below its content — so as a
	 * flex item it stayed wide enough to push the box onto the next line. Grid
	 * columns cannot wrap: `minmax(0, 1fr)` lets the list give up as much width as
	 * it must, and the box holds its place on the right at every size.
	 */
	.mnm-container {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) 360px !important;
		align-items: start !important;
		gap: 20px !important;
	}

	.mnm-container > .mnm-products-wrapper {
		order: 0 !important;
		min-width: 0 !important;
		/* reflow to whatever width is left instead of insisting on four columns */
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
	}

	.mnm-container > .mnm-box-builder {
		order: 1 !important;
		width: auto !important;
		min-width: 0 !important;
		max-width: none !important;
		margin-left: 0 !important;
		position: sticky !important;
		top: 20px !important;
		max-height: calc(100vh - 40px);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	/* grid children default to min-width:auto and would overflow their track */
	.mnm-container .mnm-product-card {
		min-width: 0;
	}
}

/*
 * The buttons sit in a flex row as `flex: 0 0 auto`, so a long "Add to cart" label
 * cannot shrink and spills out of a 340px box. Let them share the row and wrap.
 */
.mnm-container .mnm-button-group > .mnm-action-btn {
	flex: 1 1 auto;
	min-width: 0;
	white-space: normal;
}

/*
 * Pin the sides explicitly on desktop. DOM order already puts the list first, but the
 * vendor flips it with `order: -1` on the box in its own tablet rules, and relying on
 * that rule not matching is how the box ends up on the wrong side. State it outright.
 */
@media (min-width: 720px) {
	/* !important throughout: the vendor sets order:-1, max-width:100% and
	   position:relative with !important in its own tablet rules, which otherwise win
	   and drop the box below the list or flip it above. */
	.mnm-container > .mnm-products-wrapper {
		order: 0 !important;
	}

	.mnm-container > .mnm-box-builder {
		order: 1 !important;
		max-width: 400px !important;
		min-width: 0 !important;
		width: auto !important;
		position: sticky !important;
		top: 20px !important;
	}
}

/*
 * Out of stock is not pickable, so it is not shown. The vendor renders those cards
 * greyed out and unclickable, which just pads the list with things nobody can choose.
 */
.mnm-container .mnm-product-card.mnm-out-of-stock,
.mnm-container .mnm-product-card[data-out-of-stock="1"] {
	display: none;
}

/* A category left with nothing in stock should not leave a dangling heading. */
.mnm-container .mnm-category-group:not(:has(.mnm-product-card:not(.mnm-out-of-stock))) {
	display: none;
}

/*
 * A pack page has no product gallery — the vendor removes it, since there is nothing
 * to show until a box is built. But woocommerce-layout.css still floats the summary
 * right at 48% (`div.product div.summary{float:right;width:48%;clear:none}`), so with
 * the gallery gone the whole left half of the page is empty and the title and price
 * sit stranded on the right. Give the summary its width back and clear what follows.
 *
 * Scoped to the product type, so ordinary product pages keep their two-column layout.
 */
/*
 * Hide the summary block entirely on a pack page.
 *
 * It carried the title, the $89.95, "In stock" and a Read More link — all of which
 * the picker states better itself: the instruction line above it names the offer, the
 * box builder shows the running total, and the description sits in its own tab. With
 * no product gallery to sit beside, the block was only taking up the top of the page.
 *
 * Hidden rather than unhooked: the theme prints its own price and stock markup into
 * this block, so removing WooCommerce's callbacks would leave the theme's behind.
 */
.product-type-ultimate-mix-and-match-products div.summary,
.product-type-ultimate-mix-and-match-products .entry-summary {
	display: none !important;
}

/*
 * The product wrapper is a two-column grid on this site — gallery on the left,
 * summary on the right. A pack page has neither: the gallery is removed by the
 * vendor and the summary is hidden above, so the picker was landing in column one
 * at half the page width with column two left empty. Measured on the live page at a
 * 1600px viewport: div.product computed to `601px 601px`, which squeezed the product
 * list to 221px and stacked the cards one per row.
 *
 * One column on a pack page, so the picker gets the whole content width.
 */
.product-type-ultimate-mix-and-match-products {
	display: block !important;
	grid-template-columns: none !important;
}

.product-type-ultimate-mix-and-match-products .mnm-cart-form,
.product-type-ultimate-mix-and-match-products .mnm-instruction-text,
.product-type-ultimate-mix-and-match-products .woocommerce-tabs {
	clear: both;
}