/* Ajustes do catálogo no CELULAR (carregado em todas as telas do catálogo).

   1) iPhone (Safari) dá zoom sozinho ao tocar num campo com fonte < 16px e a
   página fica "estranha" até a pessoa voltar o zoom (relato CPX 03/10/2026:
   busca com 13px). Fonte 16px nos campos no celular resolve sem travar o
   zoom da página (maximum-scale=1 tiraria a acessibilidade).
   O :not(#sem-zoom) só existe para ganhar em especificidade das regras com
   !important das próprias telas (ex.: ".reg-card .controls select"). */
@media (max-width: 991px) {
	input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not(#sem-zoom),
	select:not(#sem-zoom),
	textarea:not(#sem-zoom) {
		font-size: 16px !important;
	}
}

/* Avisos (Noty, layout bottomRight) no celular: centralizados com margem
   igual dos dois lados. Antes ficavam com 310px presos à direita e
   deslocados (relato CPX 03/10/2026). O Noty grava estilo inline, daí o
   !important. */
@media (max-width: 991px) {
	#noty_bottomRight_layout_container,
	#noty_topRight_layout_container,
	#noty_bottomLeft_layout_container {
		left: 12px !important;
		right: 12px !important;
		width: auto !important;
		max-width: none !important;
	}
	#noty_bottomRight_layout_container li,
	#noty_topRight_layout_container li,
	#noty_bottomLeft_layout_container li {
		width: 100% !important;
	}
}

/* Minicarrinho no celular: "×" de remover com área de toque de dedo (tinha
   11px de largura) e TOTAL alinhado com os itens (tinha recuo de 10px). */
@media (max-width: 991px) {
	.minicart .minicart-product-list li button.close {
		flex: 0 0 36px; width: 36px; height: 36px; min-width: 36px;
		display: flex; align-items: center; justify-content: center;
		align-self: center; margin-right: -8px; opacity: 1;
	}
	.minicart .minicart-total { padding-left: 0 !important; padding-right: 0 !important; }
}

/* Topo claro nas telas da conta/login/cadastro (que não carregam style.css):
   o auto-contrast.js marca .header-top--light e aqui o texto fica escuro.
   Vale em qualquer largura. Antes "Voltar à loja" era branco no branco (CPX). */
.pg-header.header-top--light .back-link,
.login-header.header-top--light .back-link,
.reg-header.header-top--light .back-link,
.pg-header.header-top--light a,
.login-header.header-top--light a,
.reg-header.header-top--light a { color: #333 !important; }

/* Contador do filtro (categoria/busca) sem número = some (era uma pílula preta vazia) */
.filter-cat-count:empty { display: none !important; }
/* Texto digitado na busca escuro (estava rgb(165,165,165), cor de dica) */
#searchInput.searchBoxCustom { color: #222; }

/* Minicarrinho no celular com muitos itens (CPX 05/10/2026): ocupa a largura da tela
   (era uma coluna estreita com o título quebrando em 3 linhas), itens compactos (título
   em até 2 linhas, foto menor) e o botão flutuante do WhatsApp sai da frente do
   "Ver Carrinho" enquanto o carrinho está aberto. A altura da lista é calculada no
   main.js (ajustarAlturaMinicart) e a lista rola por dentro. */
@media (max-width: 991px) {
	.header-middle .minicart {
		width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important;
		padding: 12px 14px !important;
	}
	.minicart .minicart-product-list { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
	.minicart .minicart-product-list li { padding: 8px 0; align-items: center; }
	.minicart .minicart-product-list li .minicart-product-image { flex: 0 0 44px; width: 44px; margin-right: 10px; align-self: center; }
	.minicart .minicart-product-list li .minicart-product-details h6 {
		font-size: 13px; line-height: 17px; margin: 0 0 2px;
		display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	}
	.minicart .minicart-product-list li .minicart-product-details > span { font-size: 13px; font-weight: 600; }
	.minicart .minicart-total { line-height: 32px; margin: 6px 0 8px; }
	body.minicart-aberto .whatsapp-float { opacity: 0 !important; pointer-events: none !important; }
}