/* Shared card-landing styling for the qmob areas whose landing has one card
   per real screen (cards-refactor 2026-09-10): product, client, supplier,
   autocatalog, guide (one card each) and sourcing_catalog (two, split in a
   2nd round — .painel-grupo-grid just repeats the .qmob-home__card pattern
   for however many cards an área has). Sourcing and Config have their own
   richer landings (sourcing-screen.css / config-screen.css) with page-specific
   header/filter/button rules beyond the card grid — same reasoning as those
   two files (qmob's Tailwind preflight resets heading font-size/weight and <p>
   margins, beating style.css's .painel-title/.painel-subtitle by load order;
   not part of the Tailwind bundle, no toolchain in this repo to rebuild it). */

html.qmob-scope main.content .page-qmob-home .painel-title {
	font-size: 38px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.8px;
}

html.qmob-scope main.content .page-qmob-home .painel-subtitle {
	margin-bottom: 30px;
}

.page-qmob-home .painel-item.qmob-home__card {
	align-items: flex-start;
	padding: 18px 20px;
}

.page-qmob-home .qmob-home__icon {
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	color: var(--accent-dark, var(--accent));
}

.page-qmob-home .qmob-home__icon svg {
	width: 100%;
	height: 100%;
}

.page-qmob-home .qmob-home__content {
	flex: 1;
	min-width: 0;
}

.page-qmob-home .qmob-home__desc {
	font-size: 12px;
	color: var(--text-secondary);
	line-height: 1.5;
	margin-top: 4px;
}

.page-qmob-home .painel-item:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}