/**
 * ==========================================================
 * GM DESIGN SYSTEM
 * File: product-grid.css
 * Description: Shared Product Grid Layout
 *
 * Depends:
 * tokens.css
 * spacing.css
 * product-card.css
 *
 * Version:
 * 1.1.0
 *
 * Last Update:
 * 16.08.2026
 * ==========================================================
 */


/* ==========================================================
   PRODUCT GRID
========================================================== */

.gm-product-grid{

	display:grid;

	grid-template-columns:
		repeat(
			var(--gm-product-grid-columns,4),
			minmax(0,1fr)
		);

	row-gap:
		clamp(
			var(--gm-space-lg),
			3vw,
			var(--gm-space-2xl)
		);

	column-gap:
		clamp(
			var(--gm-space-md),
			2vw,
			var(--gm-space-lg)
		);

	width:100%;
	min-width:0;

}


/* ==========================================================
   PRODUCT CARD BOUNDARY
========================================================== */

.gm-product-grid > .gm-product-card{

	min-width:0;

}


/* ==========================================================
   EMPTY STATE
========================================================== */

.gm-product-grid__empty{

	margin:0;

	color:var(--gm-color-text-light);

	font-family:var(--gm-font-family);

	font-size:var(--gm-font-size-sm);

	line-height:var(--gm-line-height-normal);

}


/* ==========================================================
   TABLET — LARGE
========================================================== */

@media (max-width:1100px){

	.gm-product-grid{

		grid-template-columns:
			repeat(3,minmax(0,1fr));

	}

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width:900px){

	.gm-product-grid{

		grid-template-columns:
			repeat(2,minmax(0,1fr));

	}

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:767px){

	.gm-product-grid{

		grid-template-columns:1fr;

	}

}