@charset "utf-8";
/* ============================================================
   responsive.css  -  Camada MOBILE (aditiva)
   So age em telas <= 768px (@media). O desktop fica intacto.
   Papelaria Classic - jun/2026
   ============================================================ */

/* Botao "Categorias" so aparece no mobile (escondido no desktop) */
#btn-categorias { display: none; }

@media (max-width: 768px) {

	html, body { overflow-x: hidden !important; max-width: 100% !important; }
	body { font-size: 13px !important; }

	/* ===================== TOPO / HEADER ===================== */
	/* O banner (logo) vira uma faixa que encolhe mantendo a proporcao */
	#fundo_topo {
		position: static !important;
		height: auto !important;
		background-size: contain !important;
		background-position: top center !important;
		background-repeat: no-repeat !important;
		padding-top: 25% !important;   /* proporcao ~989x245 do banner */
	}

	/* Barra de navegacao: flui abaixo do banner, centralizada, quebra linha */
	#menu_topo {
		position: static !important;
		top: 0 !important;
		width: 100% !important;
		height: auto !important;
		opacity: 1 !important;
		background: #f2f2f2 !important;
		border-top: 1px solid #ccc !important;
		border-bottom: 1px solid #ccc !important;
	}
	#menu_topo ul { text-align: center !important; padding: 0 !important; margin: 0 !important; }
	#menu_topo #menuli {
		width: auto !important;
		float: none !important;
		display: inline-block !important;
		border: 0 !important;
		height: auto !important;
		padding: 8px 9px !important;
	}
	#menu_topo li a { height: auto !important; padding: 0 !important; }

	/* Login / carrinho / telefone / logo: param de ser absolutos e empilham */
	#topo, #carrinhoo, #recomenda, #linklogo {
		position: static !important;
		float: none !important;
		width: auto !important;
		max-width: 100% !important;
		margin: 5px auto !important;
		top: 0 !important;
		left: 0 !important;
		opacity: 1 !important;
		text-align: center !important;
	}
	#usuario { float: none !important; text-align: center !important; }
	#carrinhoo table, #recomenda table { margin: 0 auto !important; float: none !important; width: auto !important; }
	#linklogo { display: none !important; } /* area invisivel de clique do logo: nao precisa no mobile */

	/* ===================== CONTAINERS ===================== */
	#geral_paginas, #conteudo, #conteudoComMenuProdutos, #catalogo {
		width: auto !important;
		max-width: 100% !important;
		padding-left: 6px !important;
		padding-right: 6px !important;
		float: none !important;
		box-sizing: border-box !important;
		overflow: visible !important;
	}
	/* tabelas de layout (larguras fixas) viram fluidas */
	#meio table, table[width="989px"], table[width="989"] { width: 100% !important; max-width: 100% !important; }
	img { max-width: 100% !important; height: auto !important; }

	/* ===================== MENU DE CATEGORIAS (colapsavel) ===================== */
	#menu {
		width: 100% !important;
		float: none !important;
		background: none !important;
		height: auto !important;
		margin-bottom: 10px !important;
		border-bottom: 1px solid #ddd !important;
	}
	#menu table { width: 100% !important; }
	#btn-categorias {
		display: block !important;
		background: #0090CB !important;
		color: #fff !important;
		text-align: center !important;
		padding: 10px !important;
		font-weight: bold !important;
		text-decoration: none !important;
		cursor: pointer !important;
		border-radius: 4px !important;
		margin: 4px 0 !important;
	}
	/* quando colapsado, esconde a lista de categorias (so no mobile) */
	#menu.cat-collapsed table { display: none !important; }

	/* ===================== GRADE DE PRODUTOS ===================== */
	#lista_produtos {
		width: 46% !important;
		height: auto !important;
		min-height: 200px !important;
		margin: 1.5% !important;
		float: left !important;
		box-sizing: border-box !important;
	}
	#img_prod { padding-top: 0 !important; height: auto !important; }

	/* campos de formulario e botoes com area de toque maior */
	input[type="text"], input[type="password"], select, textarea {
		font-size: 16px !important;   /* evita zoom automatico do iOS */
		max-width: 100% !important;
		box-sizing: border-box !important;
	}
}