/**
 * Ajustes mobile-only — carregado depois de base/components/woocommerce-overrides.
 * Os arquivos anteriores já são responsivos via theme.json fluid typography e
 * spacingScale; este arquivo cobre os pontos onde o layout precisa empilhar
 * ou reduzir densidade pra ficar legível em telas pequenas.
 */

/* ─── Tablet e mobile ─── */
@media (max-width: 768px) {

	/* Header — reduzir gap e tamanho de elementos. */
	header .wp-block-site-logo img {
		max-width: 110px !important;
		height: auto;
	}
	.tb-balance-inline {
		font-size: 0.85rem;
	}

	/* Hero da home: padding mais enxuto. */
	.tb-hero {
		padding-top: 2.5rem !important;
		padding-bottom: 2rem !important;
	}
	.tb-hero__subtitle {
		font-size: 0.95rem;
	}

	/* Single product: imagem em cima, info embaixo. */
	.single-product .wp-block-columns {
		flex-wrap: wrap !important;
		gap: 1.5rem !important;
	}
	.single-product .wp-block-column {
		flex-basis: 100% !important;
		width: 100% !important;
	}
	.single-product .single_add_to_cart_button {
		font-size: 1rem !important;
		padding: 0.85rem 1rem !important;
	}

	/* CTA "Sem Bolachas suficientes?" empilha. */
	.tb-cta-card {
		padding: 1.5rem 1.25rem !important;
	}
	.tb-cta-card .wp-block-columns {
		flex-direction: column !important;
		gap: 1rem !important;
	}
	.tb-cta-card .wp-block-column {
		flex-basis: 100% !important;
		width: 100% !important;
	}
	.tb-cta-card .wp-block-buttons {
		justify-content: flex-start !important;
	}

	/* Footer: contato e horário um abaixo do outro. */
	footer .wp-block-columns {
		flex-direction: column !important;
		gap: 1.5rem !important;
	}
	footer .wp-block-column {
		flex-basis: 100% !important;
		width: 100% !important;
	}

	/* Auth card: respira menos por padding lateral. */
	.tb-auth-card {
		margin: 1.25rem auto;
		padding: 1.75rem 1.25rem;
	}
	.tb-auth-card__title {
		font-size: 1.3rem;
	}

	/* /my-account/bolachas: card de saldo mais compacto. */
	.tb-balance-card {
		padding: 1.5rem 1.25rem;
	}
	.tb-balance-card__value {
		font-size: 2rem;
	}

	/* Histórico: empilha pra que título e amount/status fiquem visíveis. */
	.tb-history__item-link {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}
	.tb-history__side {
		flex-direction: row;
		align-items: center;
		gap: 0.75rem;
	}

	/* Notice no carrinho — botão Entrar abaixo do texto, full-width. */
	.woocommerce-info .tb-cart-login-cta {
		display: block;
		margin: 0.75rem 0 0;
		float: none;
		text-align: center;
	}

	/* Tabela do carrinho — permite scroll horizontal se estourar. */
	.woocommerce-cart-form table.shop_table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Widget de frete na single product: input full-width acima do botão. */
	.tb-shipping-calc__form {
		flex-wrap: wrap;
	}
	.tb-shipping-calc__form input[name="zipcode"] {
		flex: 1 1 100%;
	}
}

/* ─── Mobile estreito ─── */
@media (max-width: 480px) {

	/* Product grid: 2 colunas em vez de 3. */
	.wp-block-query .wp-block-post-template.is-layout-grid,
	.wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	/* "Você também pode gostar": 2 colunas em vez de 4. */
	.tb-related-products__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	/* FAB do WhatsApp — um pouco menor e mais perto da borda. */
	.tb-wa-fab {
		bottom: 1rem;
		right: 1rem;
		width: 50px;
		height: 50px;
	}
	.tb-wa-fab svg {
		width: 26px;
		height: 26px;
	}

	/* Hero: título mais comprimido. */
	.tb-hero {
		padding-top: 2rem !important;
		padding-bottom: 1.5rem !important;
	}
	.tb-hero__title {
		margin-bottom: 0.75rem;
	}

	/* Header logado: esconde "Meu saldo:" e mostra só o número.
	   `:not(--cta)` preserva o CTA "Entrar para ver saldo" pra anônimos. */
	.tb-balance-inline:not(.tb-balance-inline--cta) {
		font-size: 0;
	}
	.tb-balance-inline__value {
		font-size: 0.95rem;
	}
	.tb-balance-inline--cta {
		font-size: 0.85rem;
	}

	/* Card de saldo na conta — texto ainda menor. */
	.tb-balance-card__value {
		font-size: 1.75rem;
	}
	.tb-balance-card__link {
		font-size: 0.85rem;
	}
}

/* ─── Mobile muito estreito ─── */
@media (max-width: 360px) {

	/* Product grid: 1 coluna. */
	.wp-block-query .wp-block-post-template.is-layout-grid,
	.wp-block-post-template.is-layout-grid {
		grid-template-columns: 1fr !important;
	}

	/* Logado: esconde o número (ícone de conta + carrinho dão acesso). */
	.tb-balance-inline:not(.tb-balance-inline--cta) {
		display: none;
	}
	/* Anônimo: mantém o CTA, mas com fonte ainda mais compacta. */
	.tb-balance-inline--cta {
		font-size: 0.8rem;
	}
}