/* Product grid shortcode [wc_api_sync_product_grid] — .wcaps-pg
   Column counts come from inline custom properties set by the shortcode, so the
   same stylesheet serves any rows/columns combination and stays responsive. */

.wcaps-pg-wrap { width: 100%; }

.wcaps-pg-heading {
	margin: 0 0 18px;
	font-size: 22px;
	line-height: 1.25;
}

.wcaps-pg {
	display: grid;
	grid-template-columns: repeat( var( --wcaps-pg-cols, 4 ), minmax( 0, 1fr ) );
	gap: var( --wcaps-pg-gap, 24px );
	list-style: none;
	margin: 0;
	padding: 0;
}

.wcaps-pg__item {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
	min-width: 0;
}

.wcaps-pg__thumb {
	display: block;
	overflow: hidden;
	border-radius: 8px;
	background: #f6f7f8;
	margin-bottom: 10px;
}

.wcaps-pg__thumb img,
.wcaps-pg .wcaps-pg__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: transform 0.25s ease;
}

.wcaps-pg__thumb:hover img { transform: scale( 1.04 ); }

.wcaps-pg__title {
	display: block;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	margin-bottom: 6px;
	text-decoration: none;
	color: inherit;
	/* Keep tiles even when titles differ in length. */
	overflow-wrap: anywhere;
}

.wcaps-pg__title:hover { text-decoration: underline; }

.wcaps-pg__price {
	font-size: 14px;
	margin-bottom: 10px;
	color: #222;
}

.wcaps-pg__price del { opacity: 0.6; margin-right: 4px; }

/* Push the button to the bottom so tiles line up in a row. */
.wcaps-pg__btn {
	margin-top: auto;
	display: inline-block;
	text-align: center;
}

.wcaps-pg__btn--quote { white-space: nowrap; }

/* Themes (Porto and friends) attach cart/quote glyphs to .button /
   .add_to_cart_button with ::before/::after — often only on hover, which made a
   stray icon pop in. Suppress those pseudo-icons inside our grid only; the rest
   of the shop keeps the theme's styling. */
.wcaps-pg .wcaps-pg__btn::before,
.wcaps-pg .wcaps-pg__btn::after,
.wcaps-pg .wcaps-pg__btn:hover::before,
.wcaps-pg .wcaps-pg__btn:hover::after,
.wcaps-pg .wcaps-pg__btn i,
.wcaps-pg .wcaps-pg__btn svg {
	content: none !important;
	display: none !important;
}

/* --- layout="image": featured image only, whole tile links to the product --- */
.wcaps-pg--image .wcaps-pg__item { text-align: initial; }
.wcaps-pg--image .wcaps-pg__thumb {
	margin-bottom: 0;
	position: relative;
	border: 1px solid #ececec;
	transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.wcaps-pg--image .wcaps-pg__thumb:hover,
.wcaps-pg--image .wcaps-pg__thumb:focus-visible {
	border-color: #cfd8e3;
	box-shadow: 0 6px 18px rgba( 0, 0, 0, 0.14 );
	transform: translateY( -2px );
	outline: none;
}
/* Subtle darkening so it reads as clickable without adding any text. */
.wcaps-pg--image .wcaps-pg__thumb::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba( 0, 0, 0, 0 );
	transition: background 0.2s ease;
	pointer-events: none;
}
.wcaps-pg--image .wcaps-pg__thumb:hover::after { background: rgba( 0, 0, 0, 0.06 ); }

@media ( prefers-reduced-motion: reduce ) {
	.wcaps-pg--image .wcaps-pg__thumb,
	.wcaps-pg--image .wcaps-pg__thumb:hover { transition: none; transform: none; }
}

/* --- Responsive: tablet then mobile column counts --- */
@media ( max-width: 1024px ) {
	.wcaps-pg { grid-template-columns: repeat( var( --wcaps-pg-cols-t, 3 ), minmax( 0, 1fr ) ); }
}

@media ( max-width: 600px ) {
	.wcaps-pg {
		grid-template-columns: repeat( var( --wcaps-pg-cols-m, 2 ), minmax( 0, 1fr ) );
		gap: 14px;
	}
	.wcaps-pg-heading { font-size: 19px; }
	.wcaps-pg__title { font-size: 13px; }
}

@media ( prefers-reduced-motion: reduce ) {
	.wcaps-pg__thumb img { transition: none; }
	.wcaps-pg__thumb:hover img { transform: none; }
}