/* Base do tema lifepod — o alicerce MOBILE da casa (máquina vinda da matriz elfvape, LD02/LD11).
   Aqui mora só a regra de controle que vale pra tudo; o desenho das telas vem do gabarito
   (a produção lifepodbrasil.com) e está no casco.css e nos cartões de tela. */

:root {
  --lp-max: 1140px;              /* largura do container da produção */
  --lp-gap: 16px;
  --lp-toque: 44px;              /* alvo mínimo de toque (contrato mobile) */
  --lp-safe-b: env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

img, video { max-width: 100%; height: auto; }

/* alvo de toque: nada clicável menor que 44px */
a.button, button, input[type="submit"], .lp-toque {
  min-height: var(--lp-toque);
  min-width: var(--lp-toque);
}

/* O Woo envolve número, data e status do pedido em `<mark>` (rastreio e "ver pedido") e o
   navegador pinta de amarelo por conta própria. A produção zera o padrão; aqui também —
   é reset de controle, vale nas duas telas sem repetir regra em duas folhas. */
mark { background: none; color: inherit; }
/* a produção engrossa as três marcas da linha do rastreio; o reset acima as deixaria em 400 */
.order-info mark { font-weight: 700; }

/* iOS só evita o auto-zoom com fonte >= 16px no campo */
input, select, textarea, button { font-size: 16px; font-family: inherit; }

/* gaveta usa a altura REAL do viewport no celular (100vh mente com a barra do Safari) */
.lp-gaveta { height: 100dvh; }

/* Barra fixa / flutuante respeita a faixa do gesto do iPhone. Os fixos do casco já resolvem
   isso na própria distância da borda (casco.css) — esta regra serve o que vier depois. */
.lp-barra-fixa { padding-bottom: var(--lp-safe-b); }

/* breakpoints da obra = os da PRODUÇÃO, medidos varrendo a largura:
   ≤600 celular · 601 desktop nasce · 901 respiro de 40px · 1025 header cheio · 1281 container trava em 1140 */
@media (min-width: 901px)  { :root { --lp-gap: 40px; } }