/* ── RESPONSIVE — UndergroundTekno 2026 ─────────────────── */

/* ── xs → sm (< 576px) ───────────────────────────────────── */

@media (max-width: 575px) {
	.pcard-body { padding: 0.6rem 0.75rem 0.4rem; }
	.pcard-title { font-size: 0.85rem; }
	.pcard-footer { padding: 0.5rem 0.75rem; }
	.pcard-price { font-size: 0.85rem; }
	.pcard-chip { font-size: 0.55rem; padding: 0.12rem 0.35rem; }

	.plist-row { padding: 0.6rem 0.75rem; gap: 0.5rem; }
	.plist-img { width: 44px; height: 44px; }
	.plist-title { font-size: 0.82rem; }
	.plist-price { font-size: 0.82rem; min-width: 40px; }

	.section-title { font-size: 1.15rem; }
	.demo-banner-title { font-size: 1.35rem; }

	.player-track-info { width: 140px; }
	.player-track-title { font-size: 0.8rem; }
}

/* ── sm → md (576–767px) ─────────────────────────────────── */

@media (min-width: 576px) {
	.pcard-play-btn { width: 56px; height: 56px; font-size: 1.2rem; }
}

/* ── md (≥ 768px) ─────────────────────────────────────────── */

@media (min-width: 768px) {
	.h1-title { font-size: 1.75rem; padding: 1.25rem 0; }
	.h2-title { font-size: 1.4rem; padding: 1.25rem 0; }

	.home-section { padding: 3rem 2rem; }

	.section-title { font-size: 1.6rem; }
	.section-header { margin-bottom: 2rem; }

	.plist-img { width: 60px; height: 60px; }

	#player-track-wavform-outer { width: 50%; }

	#sidenav-filters { max-width: 480px !important; }

	.demo-banner-inner { padding: 0 1.5rem; }
	.demo-banner-title { font-size: 2rem; }
}

/* ── lg (≥ 992px) ─────────────────────────────────────────── */

@media (min-width: 992px) {
	.pcard:hover {
		transform: translateY(-3px);
		box-shadow: 0 6px 32px rgba(0,0,0,.7), 0 0 0 1px rgba(229,126,34,.25);
	}

	.home-section { padding: 3.5rem 2rem; }

	.player-track-info { width: 260px; }
}

/* ── xl (≥ 1200px) ────────────────────────────────────────── */

@media (min-width: 1200px) {
	#sidenav-top { min-width: 280px; }
	#player-track-wavform-outer { width: 70%; }
	.section-title { font-size: 1.75rem; }
	.demo-banner-title { font-size: 2.2rem; }
}

/* ── xxl (≥ 1400px) ───────────────────────────────────────── */

@media (min-width: 1400px) {
	.home-section { padding: 4rem 3rem; }
	.pcard-title { font-size: 1rem; }
}