/**
 * IGSHOP Shop Kit — category banner & row.
 *
 * A banner image and a row of images between the category description and
 * the product grid on shop/category archive pages.
 */

.qav-category-extra {
	--qav-category-radius: 0;
	--qav-category-banner-radius: 0;
	--qav-category-gap: 12px;
	--qav-category-row-columns: 3;

	margin: 0 0 24px;
}

.qav-category-banner {
	margin: 0 0 var(--qav-category-gap);
	text-align: center;
	background: transparent !important;
}

.qav-category-banner img {
	display: inline-block;
	width: 100%;
	height: auto;
	border-radius: var(--qav-category-banner-radius);
	/* !important because the theme's own img styling has been winning this
	   fight — a plain background: none here was not enough to override it. */
	background: transparent !important;
}

.qav-category-row {
	display: grid;
	grid-template-columns: repeat(var(--qav-category-row-columns), 1fr);
	gap: var(--qav-category-gap);
}

.qav-category-row-item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 4 / 5;
	border-radius: var(--qav-category-radius);
}

/* Same 768px breakpoint the rest of the plugin uses. Grid on desktop and
   tablet; a plain horizontal scroll on phones rather than squeezing three
   narrow columns in. */
@media (max-width: 768px) {
	.qav-category-row {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 62%;
		overflow-x: auto;
		padding-bottom: 4px;
	}
}