/**
 * ShopTop Design System — Responsividade
 * ------------------------------------------------------------------
 * Pontos de quebra (breakpoints) oficiais do projeto e ajustes
 * globais de responsividade. CSS Custom Properties não funcionam
 * dentro de @media (limitação da especificação CSS), por isso os
 * valores abaixo são literais — mas documentados aqui para servirem
 * de referência única em todo o CSS do tema.
 *
 * Breakpoints:
 *   mobile:  até 479px   (padrão, mobile-first)
 *   sm:      480px       (celulares grandes)
 *   md:      768px       (tablets)
 *   lg:      1024px      (desktop pequeno)
 *   xl:      1280px      (desktop grande)
 *
 * Depende de: tokens.css, utilities.css
 */

/* Grid de cards: 1 coluna no mobile, 2 no tablet, 4 no desktop */
.shoptop-grid {
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 480px) {
	.shoptop-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.shoptop-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Container ganha respiro extra nas laterais em telas grandes */
@media (min-width: 768px) {
	.shoptop-container {
		padding-inline: var(--shoptop-space-4);
	}
}

/* Botões ocupam a largura total no mobile — usados no carrinho e
 * checkout para facilitar o toque em telas pequenas */
.shoptop-btn--block-mobile {
	width: 100%;
}

@media (min-width: 768px) {
	.shoptop-btn--block-mobile {
		width: auto;
	}
}

/* Utilitários de visibilidade por breakpoint */
.shoptop-hide-mobile {
	display: none;
}

@media (min-width: 768px) {
	.shoptop-hide-mobile {
		display: revert;
	}

	.shoptop-hide-desktop {
		display: none;
	}
}