/**
 * Arbor — design-language restyle of the native WooCommerce recommendation
 * grids: PDP up-sells (.arbor-recos--upsells), cart cross-sells
 * (.arbor-recos--cross) and the custom related block (.arbor-recos--related).
 * The product cards themselves are already DS-styled (content-product); this
 * only normalises the section heading + spacing and enforces the
 * "no borders / lines / shadows" rule. DS tokens live in style.css.
 * Loaded on single-product + cart views.
 */

.arbor-recos {
	padding: 28px 0 0; /* compact: tight top gap so these recommendation grids pair with the block above */
	/* Native .related / .cross-sells often carry a top divider — remove it
	   (design rule: no borders/lines/shadows). !important beats reeco.css. */
	border: 0 !important;
	box-shadow: none !important;
}

/* Shared heading treatment (matches the existing .arbor-related__title): a
   lighter, left-aligned heading that reads as secondary to the 30px content
   sections above. */
.arbor-recos .arbor-recos__title,
.arbor-recos__title {
	font-family: var(--ds-font-head, 'Outfit', sans-serif) !important;
	font-weight: var(--ds-fw-heading, 700);
	font-size: 20px !important;
	line-height: var(--ds-lh-tight, 1.1);
	text-align: left;
	color: var(--ds-ink, #181818) !important;
	margin: 0 0 var(--ds-space-3, 24px);
	border: 0;
}

/* Belt-and-braces: no stray lines/shadows on the grid wrapper or cards. */
.arbor-recos .gs-woo-product-list,
.arbor-recos .row.masonry {
	border: 0;
	box-shadow: none;
}

@media (max-width: 768px) {
	.arbor-recos { padding-top: var(--ds-space-3, 24px); }
	.arbor-recos .arbor-recos__title,
	.arbor-recos__title { font-size: 18px !important; margin-bottom: var(--ds-space-2, 16px); }
}