/*
 * "Pairs well with" — the compact row right after the buy buttons on the
 * product page: the theme's <gv-pairs> element (inc/pdp.php, assets/js/pairs.js),
 * filled from sections/product-complementary.php. The cards are the theme's
 * product card in Expanse's own `new-grid product-grid scrollable-grid--small`
 * + `data-view="small"` grid — the markup the cart's "Goes great with" row uses,
 * which the harvested CSS already styles (four across, a scroll row on phones).
 * Only the element, the reservation, the title and the column fit are ours.
 * Unconditional like the rest; inert without the markup.
 */

/*
 * `width: 100%` is load-bearing (staging render proof, Sutra 2026-10-14). The row sits in Expanse's <layout-stack>,
 * a column flex container that WRAPS; Chrome sizes a block item's height there from its content at an intrinsic
 * width, where the cards' titles wrap word by word, and only then stretches it across. Without a definite width a
 * 450px row stood in a 1466px box at 1280 wide (953px for one card), ~1000px of empty column under the buy button.
 */
.gv-pairs-island {
	display: block;
	width: 100%;
}

/*
 * NO LAYOUT SHIFT (reviews of #155). The element is only emitted for a product
 * with staff picks or a device→part map part published on the store, and it
 * loads straight away; until its cards arrive it holds one card row's height.
 * Only under `html.js`: without JavaScript nothing will ever fill it, so it must
 * take no space. Let go once `is-loaded` (the content sizes it); a `hide` takes
 * the whole box away (below).
 *
 * 340px = the SMALLEST loaded row measured (2026-10-15, staging, this file's
 * final rules): 340.4px, GV Wholesale logged out, one card, 769 wide. Loaded
 * heights measured, one card / four cards:
 *   GVWS logged out  1440 356.7/380.7  1280 361.7/385.7  1024 394.9/394.9
 *                    900 368.4/392.4   769 340.4/388.4   phones 375.7/375.7
 *   GVWS logged in   1280 385.7/409.7  900 392.4/416.4   Pixel 7 394.9/394.9
 *   Sutra            1440 418.8/472.8  1280 399.8/480.8  1024 457/484
 *                    900 430.5/484.5   769 402.5/483.5   phones 415.3/469.3
 * So a load never collapses the row and grows it by 0–145px (most on Sutra,
 * whose cards carry a review line and longer titles). The 270px this replaced
 * was an estimate every measured row exceeded (by 99–288px on Sutra before the
 * overflow rules below). Taller cards (a sale badge, a 3-line title) grow it more.
 */
html.js .gv-pairs-island[data-gv-pairs-reserve]:not(.is-loaded) {
	min-height: 340px;
}

/* Nothing to pair after all, or the fetch failed (pairs.js `hide`): no box, so no stack gap either. */
.gv-pairs-island.hide {
	display: none;
}

/* A little air between the buy button (or the bulk-order grid) and the row. */
.gv-pairs {
	padding-top: 4px;
}

/* A real <h2> (the page's section level), sized for a compact row rather than a page section. */
.gv-pairs__title {
	font-size: 1em;
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
	margin: 0 0 8px;
}

/* In the product's half-width column, flush with the buy button rather than the page gutter. */
.gv-pairs__grid {
	margin-left: 0;
	margin-right: 0;
}

/*
 * NO SIDEWAYS PAGE SCROLL (review of f0ba3e3; Sutra staging, 2026-10-15). Medium-up only — the phone row is
 * Expanse's own scroll row (250px cards in an overflow-x grid) and is left exactly as it is.
 * Judge.me's review badge is `inline-flex; white-space: nowrap`, ~205px, inside a 147px card at 1280 wide and a
 * 100px card at 900: the last card's "89 reviews" ran past the page edge (document 1318px wide at 1280, 986 at 900).
 *   - the badge wraps (onto two lines: stars, then the count), and each card contains anything else that cannot
 *     wrap (overflow hidden on the card's inner box — a backstop: the badge alone no longer needs it);
 *   - under a 500px column (≈ 769–1100px viewports) four cards are ~100–115px and titles break mid-word, so the row
 *     becomes a scroll row of 45%-wide cards instead. `.gv-pairs` is the query container; the island has a definite
 *     width (above), so containing its inline size cannot collapse it.
 */
@media only screen and (min-width: 769px) {
	.gv-pairs {
		container: gv-pairs / inline-size;
	}

	/* The card's INNER box, not the card: Expanse draws the gridline as the card's ::after box-shadow, 1px OUTSIDE it. */
	.gv-pairs__grid > .grid-item > * {
		overflow: hidden;
	}

	/* inline-flex is shrink-to-fit, so the badge is never wider than its card once its items may wrap. */
	.gv-pairs__grid .jdgm-prev-badge {
		flex-wrap: wrap;
	}

	@container gv-pairs (max-width: 499px) {
		/* overflow-x: auto makes overflow-y auto too, so the grid clips: inset the cards by the gridline Expanse draws
		   1px outside each one, and take the inset back with a negative margin, as its own .scrollable-grid--small does.
		   Two classes: Expanse's `[data-grid-style*=gridlines] .product-grid { margin-left: 0; margin-right: 0 }` is
		   0,2,0 and beat a single-class margin on staging (843cf8b: the cards sat 1px in from the title). */
		.gv-pairs .gv-pairs__grid {
			flex-wrap: nowrap;
			overflow-x: auto;
			padding: var(--grid-thickness, 1px);
			margin: calc(var(--grid-thickness, 1px) * -1);
		}

		.gv-pairs__grid > .grid-item {
			flex: 0 0 45%;
		}
	}
}