/*
 * Breakpoints testados: 320, 360, 375, 390, 414, 768, 1024, 1280, 1440+.
 */

/* Tablet e abaixo (<= 1024px) */
@media (max-width: 1024px) {
	.hero-grid,
	.about-grid {
		grid-template-columns: 1fr;
	}

	.hero-media {
		order: -1;
	}

	.categories-grid,
	.differentials-grid,
	.products-grid,
	ul.products {
		grid-template-columns: repeat(3, 1fr);
	}

	.process-steps {
		grid-template-columns: repeat(2, 1fr);
	}

	.content-layout {
		grid-template-columns: 1fr;
	}

	.site-footer-grid {
		grid-template-columns: 1fr 1fr;
	}
}

/* Menu mobile ativo a partir daqui */
@media (max-width: 900px) {
	.primary-navigation {
		display: none;
	}

	.mobile-menu-toggle {
		display: flex;
	}
}

/* Tablet pequeno / celular grande (<= 768px) */
@media (max-width: 768px) {
	.container {
		padding-inline: 18px;
	}

	.categories-grid,
	.differentials-grid,
	.products-grid,
	ul.products {
		grid-template-columns: repeat(2, 1fr);
	}

	.process-steps {
		grid-template-columns: 1fr;
	}

	.site-footer-grid {
		grid-template-columns: 1fr;
	}

	.hero-actions {
		flex-direction: column;
	}

	.hero-actions .btn {
		width: 100%;
	}

	section {
		padding-block: 40px;
	}

	.shop-layout {
		grid-template-columns: 1fr;
	}

	.amigurumi-single-product-grid {
		grid-template-columns: 1fr;
	}
}

/* Celulares (<= 414px) */
@media (max-width: 414px) {
	.categories-grid,
	.products-grid,
	ul.products {
		grid-template-columns: 1fr 1fr;
	}

	.hero-title {
		font-size: 1.9rem;
	}

	.mini-cart-panel {
		width: 100vw;
	}
}

/* Celulares pequenos (<= 360px) */
@media (max-width: 360px) {
	.categories-grid,
	.products-grid,
	ul.products {
		grid-template-columns: 1fr;
	}

	.btn {
		padding: 12px 20px;
		font-size: 0.9rem;
	}
}

/* Telas grandes (>= 1440px) */
@media (min-width: 1440px) {
	:root {
		--container-width: 1360px;
	}

	.hero-title {
		font-size: 3.6rem;
	}
}

/* Tabelas responsivas do WooCommerce (carrinho, pedidos) em telas pequenas */
@media (max-width: 700px) {
	.shop_table_responsive thead {
		display: none;
	}

	.shop_table_responsive tr {
		display: block;
		border-bottom: 1px solid rgba(58, 46, 40, 0.1);
		padding-block: 12px;
	}

	.shop_table_responsive td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 12px;
		padding: 6px 0;
		border: none !important;
	}

	.shop_table_responsive td::before {
		content: attr(data-title);
		font-weight: 500;
		color: var(--color-text-soft);
	}
}