/* Product Category Grid
   Rang badalne ke liye sirf ye variables edit karein. */
.pcg-grid {
	--pcg-card-bg: #dfe9cf;
	--pcg-card-bg-hover: #d3e0bd;
	--pcg-title: #2c4a1c;
	--pcg-title-size: 22px;
	--pcg-radius: 16px;
	--pcg-gap: 24px;
	--pcg-pad: 18px;

	display: grid;
	grid-template-columns: repeat(var(--pcg-cols, 4), minmax(0, 1fr));
	gap: var(--pcg-gap);
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
}

.pcg-cols-1 { --pcg-cols: 1; }
.pcg-cols-2 { --pcg-cols: 2; }
.pcg-cols-3 { --pcg-cols: 3; }
.pcg-cols-4 { --pcg-cols: 4; }
.pcg-cols-5 { --pcg-cols: 5; }
.pcg-cols-6 { --pcg-cols: 6; }

.pcg-card {
	display: block;
	background: var(--pcg-card-bg);
	border-radius: var(--pcg-radius);
	padding: var(--pcg-pad);
	text-decoration: none;
	text-align: center;
	transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.pcg-card:hover,
.pcg-card:focus-visible {
	background: var(--pcg-card-bg-hover);
	transform: translateY(-4px);
	box-shadow: 0 10px 24px rgba(44, 74, 28, .16);
	text-decoration: none;
}

.pcg-card:focus-visible {
	outline: 2px solid var(--pcg-title);
	outline-offset: 3px;
}

.pcg-card__title {
	margin: 0 0 14px;
	font-size: var(--pcg-title-size, 22px);
	line-height: 1.25;
	font-weight: 800;
	color: var(--pcg-title);
	letter-spacing: .01em;
}

.pcg-card__count {
	font-weight: 500;
	opacity: .7;
}

.pcg-card__media {
	border-radius: calc(var(--pcg-radius) - 8px);
	overflow: hidden;
	/* Sab cards ki image ek hi height par rahe */
	aspect-ratio: 4 / 3;
	background: rgba(255, 255, 255, .35);
}

.pcg-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}

.pcg-card:hover .pcg-card__img {
	transform: scale(1.05);
}

/* Responsive */
@media (max-width: 1024px) {
	.pcg-cols-4,
	.pcg-cols-5,
	.pcg-cols-6 { --pcg-cols: 3; }
}

@media (max-width: 782px) {
	.pcg-grid { --pcg-gap: 18px; }
	.pcg-cols-3,
	.pcg-cols-4,
	.pcg-cols-5,
	.pcg-cols-6 { --pcg-cols: 2; }
}

@media (max-width: 480px) {
	.pcg-grid { --pcg-cols: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.pcg-card,
	.pcg-card__img { transition: none; }
	.pcg-card:hover { transform: none; }
	.pcg-card:hover .pcg-card__img { transform: none; }
}