/* Ki Delivery — Cardápio: variáveis, base e reset do escopo .kid.
   Fatia contígua do frontend.css original (linhas 1–39);
   a ordem de carregamento preserva a cascata. Ver REFACTOR.md. */
/* ==========================================================================
   Ki Delivery — Front do cliente
   Escopo total em .kid para não conflitar com o tema.
   A fonte "Plus Jakarta Sans" é carregada via wp_enqueue_style
   (handle "kid-fonts") — não use @import aqui (é render-blocking).
   ========================================================================== */

.kid {
	--kid-red: #ea1d2b;
	--kid-red-dark: #b71722;
	--kid-btn-text: #ffffff;
	--kid-red-deep: #8f0e18;
	--kid-red-tint: #fff1f2;
	--kid-ink: #1a1a1e;
	--kid-muted: #6e6e76;
	--kid-line: #ececee;
	--kid-surface: #f6f6f7;
	--kid-green: #12873f;
	--kid-green-tint: #e9f7ee;
	--kid-close-bg: var(--kid-red);
	--kid-radius: 16px;
	--kid-shadow: 0 8px 30px rgba(20, 20, 24, .10);

	font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
	color: var(--kid-ink);
	max-width: 560px;
	margin: 0 auto;
	background: #fff;
	min-height: 100vh;
	position: relative;
	line-height: 1.45;
	-webkit-font-smoothing: antialiased;
}
/* Realce de toque do navegador: desligado no cardápio inteiro.

   No celular, tocar em qualquer coisa clicável faz o navegador pintar o
   elemento inteiro com um retângulo translúcido, que some sozinho um
   instante depois. Em cima do vermelho da loja ele lê como "ficou
   selecionado" ou "travou", e aparece até em quem só rolou a tela com o
   dedo em cima de um card. O cardápio já dá a sua própria resposta ao
   toque — o scale e as trocas de cor no :active — que acontece na hora e
   volta na hora. Duas respostas para o mesmo toque só confundem.

   Vale para o elemento e para tudo dentro dele; o :where mantém a
   especificidade zerada, então qualquer regra pode reativar o realce em
   um ponto específico se um dia fizer falta. */
.kid, .kid :where(*) { -webkit-tap-highlight-color: transparent; }

.kid *, .kid *::before, .kid *::after { box-sizing: border-box; }
.kid [hidden] { display: none !important; }
.kid :where(button) { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; white-space: normal; }
.kid img { max-width: 100%; display: block; }
.kid input, .kid textarea, .kid select { font-family: inherit; font-size: 16px; }