/* Exhibit RSGDX — custom-product-related-grid.css — v3
   v3: price white; price sits above the CTA and stays row-aligned when
   titles wrap to different heights (title flexes, price+button pinned).
   v2: two fixes flagged from the live screenshot:
   1. Card images had visibly rounded corners against a square card — same
      "sitewide theme default on <img>" issue already documented in
      custom-product-gallery.css v7; this file never set an explicit
      border-radius on the image, so the theme default leaked through.
   2. The CTA buttons ("Add to Cart" / "View Variations") didn't look like
      buttons at all — turns out .exhibitrsgdx-btn / .exhibitrsgdx-btn--
      primary (custom-style.css) are only styled inside #exhibitrsgdx-main
      (homepage) and #exhibitrsgdx-footer — this grid lives on the single
      product page, outside both, so those classes contributed nothing and
      the CTA rendered as bare text. Card-cta now carries its own complete
      button styling instead of depending on those scoped classes.
   v1: "You May Also Like" — 4-card grid below the product tabs, replacing
   WooCommerce's default (unstyled) upsell display. Deliberately mirrors
   the homepage Featured Products card look (custom-featured-products.css
   .exhibitrsgdx-featured-products__card and friends) — same surface/
   border/hover treatment and grid sizing — but scoped to its own ID and
   with no categories sidebar, just the grid, per Ryner's spec. */

#exhibitrsgdx-product-related-grid,
#exhibitrsgdx-product-related-grid *,
#exhibitrsgdx-product-related-grid *::before,
#exhibitrsgdx-product-related-grid *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

#exhibitrsgdx-product-related-grid.exhibitrsgdx-product-related-grid {
	width: 100%;
	padding: 40px 0 0;
	font-family: var(--exhibitrsgdx-font-sans, inherit);
}

#exhibitrsgdx-product-related-grid .exhibitrsgdx-product-related-grid__inner {
	max-width: none;
	margin: 0;
	padding: 0;
}

#exhibitrsgdx-product-related-grid .exhibitrsgdx-product-related-grid__title {
	font-size: var(--exhibitrsgdx-text-2xl, 1.875rem);
	color: var(--exhibitrsgdx-color-text, #f5f5f5);
	margin-bottom: var(--exhibitrsgdx-space-5, 24px);
}

#exhibitrsgdx-product-related-grid .exhibitrsgdx-product-related-grid__cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--exhibitrsgdx-space-4, 16px);
}

#exhibitrsgdx-product-related-grid .exhibitrsgdx-product-related-grid__card {
	display: flex;
	flex-direction: column;
	background: var(--exhibitrsgdx-color-surface, #1a1a1a);
	border: 1px solid var(--exhibitrsgdx-color-border, #2e2e2e);
	border-radius: var(--exhibitrsgdx-radius-md, 3px);
	overflow: hidden;
	transition: border-color var(--exhibitrsgdx-transition, 0.3s ease), transform var(--exhibitrsgdx-transition, 0.3s ease);
}

#exhibitrsgdx-product-related-grid .exhibitrsgdx-product-related-grid__card:hover {
	border-color: var(--exhibitrsgdx-color-primary, #f26419);
	transform: translateY(-4px);
}

#exhibitrsgdx-product-related-grid .exhibitrsgdx-product-related-grid__card-link {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	text-decoration: none;
	min-height: 0;
}

#exhibitrsgdx-product-related-grid .exhibitrsgdx-product-related-grid__card-image img {
	width: 100%;
	height: 160px;
	object-fit: cover;
	display: block;
	border-radius: var(--exhibitrsgdx-radius-md, 3px);
}

#exhibitrsgdx-product-related-grid .exhibitrsgdx-product-related-grid__card-title {
	flex: 1 1 auto;
	font-size: var(--exhibitrsgdx-text-sm, 0.875rem);
	color: var(--exhibitrsgdx-color-text, #f5f5f5);
	margin: var(--exhibitrsgdx-space-3, 12px) var(--exhibitrsgdx-space-3, 12px) var(--exhibitrsgdx-space-2, 8px);
	line-height: 1.35;
}

#exhibitrsgdx-product-related-grid .exhibitrsgdx-product-related-grid__card-price,
#exhibitrsgdx-product-related-grid .exhibitrsgdx-product-related-grid__card-price .amount,
#exhibitrsgdx-product-related-grid .exhibitrsgdx-product-related-grid__card-price .woocommerce-Price-amount,
#exhibitrsgdx-product-related-grid .exhibitrsgdx-product-related-grid__card-price bdi,
#exhibitrsgdx-product-related-grid .exhibitrsgdx-product-related-grid__card-price ins {
	color: var(--exhibitrsgdx-color-text, #f5f5f5);
}

#exhibitrsgdx-product-related-grid .exhibitrsgdx-product-related-grid__card-price {
	font-size: var(--exhibitrsgdx-text-sm, 0.875rem);
	font-weight: 700;
	margin: 0 var(--exhibitrsgdx-space-3, 12px) var(--exhibitrsgdx-space-3, 12px);
	margin-top: auto;
}

#exhibitrsgdx-product-related-grid .exhibitrsgdx-product-related-grid__card-price del,
#exhibitrsgdx-product-related-grid .exhibitrsgdx-product-related-grid__card-price del .amount {
	color: var(--exhibitrsgdx-color-text-muted, #a8a8a8);
}

#exhibitrsgdx-product-related-grid .exhibitrsgdx-product-related-grid__card-cta {
	display: block;
	width: 100%;
	text-align: center;
	text-decoration: none;
	margin-top: 0;
	padding: 12px var(--exhibitrsgdx-space-4, 16px);
	background: var(--exhibitrsgdx-color-primary, #f26419);
	color: #fff;
	font-family: var(--exhibitrsgdx-font-sans, inherit);
	font-weight: 700;
	font-size: var(--exhibitrsgdx-text-xs, 0.75rem);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	border: 1px solid var(--exhibitrsgdx-color-primary, #f26419);
	border-radius: 0;
	cursor: pointer;
	transition: background var(--exhibitrsgdx-transition, 0.3s ease), color var(--exhibitrsgdx-transition, 0.3s ease), border-color var(--exhibitrsgdx-transition, 0.3s ease);
}

#exhibitrsgdx-product-related-grid .exhibitrsgdx-product-related-grid__card-cta:hover {
	background: #000;
	color: #fff;
	border-color: var(--exhibitrsgdx-color-primary, #f26419);
}

@media (max-width: 1200px) {
	#exhibitrsgdx-product-related-grid .exhibitrsgdx-product-related-grid__cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 500px) {
	#exhibitrsgdx-product-related-grid .exhibitrsgdx-product-related-grid__cards {
		grid-template-columns: 1fr;
	}
}