/* ══════════════════════════════════════════
   SevPay Kiosk — Variáveis (tablet-first)
══════════════════════════════════════════ */
:root {
  /* Touch targets mínimo 52px para kiosk */
  --kiosk-touch-min: 52px;

  /* Grid de produtos — tablet portrait default */
  --kiosk-grid-cols: 2;
  --kiosk-card-gap: 16px;

  /* Cart bar */
  --cart-bar-height: 80px;

  /* Header */
  --kiosk-header-height: 72px;

  /* Kiosk font scale — maior que web normal */
  --kiosk-font-base: 17px;
}

/* Celular pequeno (< 400px) */
@media (max-width: 399px) {
  :root {
    --kiosk-grid-cols: 2;
    --kiosk-card-gap: 12px;
    --kiosk-header-height: 64px;
    --cart-bar-height: 72px;
    --kiosk-font-base: 15px;
  }
}

/* Celular grande / Tablet pequeno (400–767px) */
@media (min-width: 400px) and (max-width: 767px) {
  :root {
    --kiosk-grid-cols: 2;
    --kiosk-card-gap: 14px;
    --kiosk-font-base: 16px;
  }
}

/* Tablet portrait (768–1023px) — foco principal */
@media (min-width: 768px) {
  :root {
    --kiosk-grid-cols: 3;
    --kiosk-card-gap: 20px;
    --kiosk-header-height: 80px;
    --cart-bar-height: 88px;
    --kiosk-font-base: 18px;
  }
}

/* Tablet landscape / Desktop (1024px+) */
@media (min-width: 1024px) {
  :root {
    --kiosk-grid-cols: 3;
    --kiosk-card-gap: 20px;
  }
}