/* Refratil: ajustes responsivos (tablet e celular).
 * Carregado pelo plugin somente nas páginas do site. Todas as regras começam com .refratil-site
 * para ter prioridade sobre o CSS embutido nos blocos. */

.refratil-site { overflow-x: clip; }
.refratil-site img { max-width: 100%; height: auto; }

/* ---------- Tablet (até 900 px) ---------- */
@media (max-width: 900px) {
  .refratil-site .catalog { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-block: 32px 64px; }
  .refratil-site .catalog > * { min-width: 0; }
  .refratil-site .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .refratil-site .cards,
  .refratil-site .apps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Celular (até 640 px) ---------- */
@media (max-width: 640px) {
  /* Margens laterais e espaçamento vertical */
  .refratil-site .elementor-section .container { padding-inline: 16px !important; }
  .refratil-site .section { padding-block: 48px; }
  .refratil-site .hero,
  .refratil-site .page-hero { padding-block: 32px 48px; }

  /* Títulos menores */
  .refratil-site .display--xl { font-size: clamp(34px, 10vw, 48px); }
  .refratil-site .display--l { font-size: clamp(28px, 8vw, 38px); }
  .refratil-site .display--m { font-size: clamp(24px, 7vw, 30px); }

  /* Botões: área de toque de 44 px e largura total */
  .refratil-site .btn { min-height: 44px; }
  .refratil-site .btn-row { flex-direction: column; align-items: stretch; }
  .refratil-site .btn-row .btn,
  .refratil-site .elementor-widget-text-editor .btn { display: flex; justify-content: center; width: 100%; margin: 6px 0; }

  /* Cards, aplicações e depoimentos em uma coluna */
  .refratil-site .cards,
  .refratil-site .apps,
  .refratil-site .quotes,
  .refratil-site .product-grid,
  .refratil-site .form-grid { grid-template-columns: minmax(0, 1fr) !important; }

  /* Busca da página inicial */
  .refratil-site .search-box__field { flex-wrap: wrap; }
  .refratil-site .search-box__field input { min-width: 0; width: 100%; }
  .refratil-site .search-box__field button { width: 100%; min-height: 44px; }

  /* Catálogo: filtro com rolagem horizontal e botões de 44 px */
  .refratil-site .catalog { padding-block: 24px 56px; gap: 20px; }
  .refratil-site .fam-list { scroll-snap-type: x proximity; }
  .refratil-site .fam-btn { min-height: 44px; white-space: nowrap; scroll-snap-align: start; }
  .refratil-site .catalog__head { flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 16px; }
  .refratil-site .item .ph { height: 130px; }
  .refratil-site .item__body { padding: 16px; gap: 12px; }
  .refratil-site .item__title { font-size: 20px; }
  .refratil-site .item__actions { flex-wrap: nowrap; align-items: stretch; }
  .refratil-site .item__actions .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .refratil-site .catalog-page .btn-icon { width: 44px; height: 44px; flex: 0 0 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); }
  .refratil-site .empty { padding: 24px 20px; }
}