/**
 * "Discover the finest" product menu.
 *
 * theme.css locks each item to a third of the row, which only ever suited
 * three products. Letting them flex from a zero basis divides the row evenly
 * by however many products exist, so adding a fourth or fifth keeps the menu
 * on a single line instead of wrapping to a ragged second row.
 *
 * Scoped above the 991px breakpoint so the stacked mobile layout in theme.css
 * still wins there.
 */

@media (min-width: 992px) {
	.product-selection-wrap .product-selection .product-selection-item {
		flex: 1 1 0;
		min-width: 0;
		max-width: none;
	}
}

/* Reclaim horizontal room once five items are sharing a narrower desktop. */
@media (min-width: 992px) and (max-width: 1280px) {
	.product-selection-wrap .product-selection .product-selection-item {
		padding-left: 22px;
		padding-right: 22px;
	}
}

/**
 * Six or more products: five per row.
 *
 * One row of nine would leave 130px columns, shrinking the packshots with them and
 * breaking the longer names over four or five lines. Five per row keeps the packshots
 * large and the descriptions readable; a full-width break element forces the row and
 * draws the rule between rows.
 *
 * Desktop only - below 991px theme.css stacks the items and the break is hidden.
 */
@media (min-width: 992px) {
	.product-selection-wrap .product-selection.product-selection-compact {
		justify-content: center;
	}

	.product-selection-wrap .product-selection.product-selection-compact .product-selection-item {
		box-sizing: border-box;
		flex: 0 0 20%;
		max-width: 20%;
		padding: 38px 20px 26px 20px;
	}

	.product-selection-wrap .product-selection.product-selection-compact .selection-row-break {
		flex: 0 0 100%;
		width: 100%;
		height: 0;
		border-top: 1px solid #838383;
	}

	/* The item opening a row carries no left divider. */
	.product-selection-wrap .product-selection.product-selection-compact .selection-row-break + .product-selection-item {
		border-left: none;
	}

	.product-selection-wrap .product-selection.product-selection-compact .product-selection-item .product-selection-item-url .selection-image {
		padding-bottom: 0;
		height: 170px;
	}

	.product-selection-wrap .product-selection.product-selection-compact .product-selection-item .product-selection-item-url .selection-title {
		font-size: 14px;
		font-size: 1.4rem;
		line-height: 18px;
		letter-spacing: 0.8px;
	}

	.product-selection-wrap .product-selection.product-selection-compact .product-selection-item .product-selection-item-url .selection-description {
		font-size: 11.5px;
		font-size: 1.15rem;
		line-height: 16px;
		padding: 10px 0;
	}
}

/* Stacked layout below 991px has no rows to divide. */
@media (max-width: 991px) {
	.product-selection-wrap .product-selection .selection-row-break {
		display: none;
	}
}