/*
 * Kuvani Premium — Layout layer
 * Container, grid system, breakpoints (375 / 390 / 414 / 768 / 1024 / 1440).
 */

.kv-container {
	width: 100%;
	max-width: var(--kv-container);
	margin-inline: auto;
	padding-inline: var(--kv-gutter);
}

.kv-main {
	min-height: 40vh;
}

.kv-section-title {
	text-align: center;
	margin-bottom: clamp(1.5rem, 4vw, 3rem);
}

/* Blog / archive grids */
.kv-blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.5rem, 3vw, 2.5rem);
	margin-block: clamp(2rem, 5vw, 4rem);
}

/* Product grid */
.kv-product-grid,
	ul.products {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(1.25rem, 2vw, 2rem);
}

.kv-categories__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(1rem, 2vw, 1.5rem);
}

/* -------------------- Breakpoints -------------------- */

/* 1440+: default (desktop) styles above apply. */

/* 1024px — small desktop / large tablet landscape */
@media (max-width: 1024px) {
	.kv-product-grid,
	ul.products {
		grid-template-columns: repeat(3, 1fr);
	}
	.kv-categories__grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.kv-blog-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* 768px — tablet portrait */
@media (max-width: 768px) {
	.kv-product-grid,
	ul.products {
		grid-template-columns: repeat(2, 1fr);
		gap: 1rem;
	}
	.kv-blog-grid {
		grid-template-columns: 1fr;
	}
}

/* 414px / 390px / 375px — phones. A single breakpoint covers all three;
   spacing already scales fluidly via clamp() so no further overrides are
   needed at this width. */
@media (max-width: 480px) {
	.kv-categories__grid {
		grid-template-columns: 1fr;
	}
	.kv-container {
		padding-inline: 1.1rem;
	}
}

.kv-hidden {
	display: none !important;
}

@media (min-width: 769px) {
	.kv-mobile-only {
		display: none !important;
	}
}
@media (max-width: 768px) {
	.kv-desktop-only {
		display: none !important;
	}
}