/* --- grid container -------------------------------------------------- */
.pcg-category-grid {
	display: flex;
	flex-wrap: nowrap; /* never wrap – keep one long row          */
	overflow-x: auto; /* enable sideways scrolling               */
	gap: var(--pcg-gap, 32px);
	padding: 0 0 32px 0;

	/* nicer feel on iOS and Android */
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;

	@media (min-width: 800px) {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: auto;
		gap: var(--pcg-gap, 32px);
		overflow: visible;
		padding-inline: 0;
	}

	@media (min-width: 980px) {
		grid-template-columns: repeat(var(--pcg-cols, 3), 1fr);
	}
}

.pcg-category-box {
	width: 100%;
	aspect-ratio: 5 / 8;
	padding: 32px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	border-radius: 10px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	transition: all 0.2s ease-out;
	flex: 0 0 220px;
	scroll-snap-align: start;

	@media (min-width: 480px) {
		flex: 0 0 40vw;
	}

	@media (min-width: 800px) {
		flex: 1 0 auto;
	}

	.pcg-category-button {
		background: #fff;
		color: #232e34;
		border-radius: 25px;
		padding: 7px 20px;
		transition: all 0.2s ease-in-out;
	}

	&:hover,
	&:focus {
		.pcg-category-button {
			background: #232e34;
			color: #fff;
		}
	}
}