/*
 * The flush-small scroll row (recently viewed, "more products") starts with a
 * gutter on phones — review row 11 ("Recently Viewed products get cut off on
 * the left side").
 *
 * Measured 2026-09-19 on Exxus staging AND live exxusvape.com (Pixel 7, 412px):
 * the grid sits at left −17px with padding-left 18px, so the first card's edge
 * is 1px from the screen edge on BOTH — the port matches Shopify exactly, and
 * Shopify is what looks cut off. Cause: Expanse's own
 * `.page-width--flush-small .scrollable-grid--small { margin-left: 0 }` is
 * overruled by the later, equally specific
 * `[data-grid-style*=gridlines] .product-grid { margin: … calc(var(--page-width-padding) * -1) }`
 * in the ≤768px block, and all five stores run the gridlines-thin grid style.
 * One more class of specificity restores what Expanse intended: the row is
 * flush with the page (no margins) and its first card starts one gutter in.
 * Harvested CSS is never edited — this rides after it (functions.php chain).
 */
@media only screen and (max-width: 768px) {
	[data-grid-style*="gridlines"] .page-width--flush-small .scrollable-grid--small {
		margin-left: 0;
		margin-right: 0;
		padding-left: var(--page-width-gutter-small);
		padding-right: var(--page-width-gutter-small);
	}
}