/* =====================================================================
   SLZ7 - Experiencia de aplicativo no celular
   Barra inferior, alvos de toque maiores e area do cliente em formato app.
   ===================================================================== */

.ed-tabbar { display: none; }

@media (max-width: 900px) {
  .ed-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 950;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    background: var(--app-tab-bg, #fff);
    border-top: 1px solid var(--c-border, #eceff5);
    box-shadow: 0 -8px 24px -18px rgba(15, 17, 35, .5);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    backdrop-filter: saturate(1.2) blur(8px);
  }
  .ed-tab {
    min-height: var(--app-tab-h, 62px);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    color: var(--app-tab-color, #6b7391);
    font-size: .68rem; font-weight: 700; text-decoration: none;
    transition: color .16s ease;
  }
  .ed-tab i { font-size: 1.12rem; }
  .ed-tab.is-active { color: var(--app-tab-active, #5f2eea); }
  .ed-tab:active { background: color-mix(in srgb, var(--app-tab-active, #5f2eea) 8%, transparent); }
  .ed-tabbar.no-labels .ed-tab span { display: none; }
  .ed-tabbar.no-labels .ed-tab i { font-size: 1.3rem; }

  body.has-tabbar { padding-bottom: calc(var(--app-tab-h, 62px) + env(safe-area-inset-bottom, 0px)); }
  body.has-tabbar .site-footer { padding-bottom: 20px; }

  /* Alvos de toque confortaveis (44px minimo) */
  .btn, .button, button, .woocommerce a.button { min-height: 46px; }
  .primary-nav a, .mobile-menu a, .woocommerce-MyAccount-navigation a { min-height: 46px; display: flex; align-items: center; }

  /* Carrosseis com rolagem por toque, estilo app */
  .fp-section .offer-grid, .fp-section .cat-grid { gap: 14px; }

  /* Cabecalho compacto e fixo: sensacao de app */
  .site-header { position: sticky; top: 0; z-index: 900; }
  body.admin-bar .site-header { top: 46px; }
}

/* -------- Area do cliente em formato app -------- */
@media (max-width: 900px) {
  .acc-side { position: static; }
  .woocommerce-MyAccount-navigation ul {
    display: flex; overflow-x: auto; gap: 8px; padding: 4px 2px 10px; margin: 0;
    scrollbar-width: none; scroll-snap-type: x proximity;
  }
  .woocommerce-MyAccount-navigation ul::-webkit-scrollbar { display: none; }
  .woocommerce-MyAccount-navigation li { flex: 0 0 auto; scroll-snap-align: start; }
  .woocommerce-MyAccount-navigation a {
    white-space: nowrap; border: 1px solid var(--c-border, #eceff5);
    border-radius: 999px; padding: 0 16px; font-size: .84rem; font-weight: 700;
  }
  .woocommerce-MyAccount-navigation li.is-active a {
    background: var(--c-primary); color: #fff; border-color: var(--c-primary);
  }
  .woocommerce-MyAccount-navigation li.is-active a i { color: inherit; }

  .woocommerce-MyAccount-content { padding: 18px 16px; border-radius: 16px; }

  /* Tabelas viram cartoes empilhados */
  .woocommerce-MyAccount-content table.shop_table { border: 0; }
  .woocommerce-MyAccount-content table.shop_table thead { display: none; }
  .woocommerce-MyAccount-content table.shop_table tr {
    display: block; border: 1px solid var(--c-border, #eceff5);
    border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; background: var(--c-bg, #fff);
  }
  .woocommerce-MyAccount-content table.shop_table td {
    display: flex; justify-content: space-between; gap: 14px;
    border: 0; padding: 7px 0; text-align: right; font-size: .88rem;
  }
  .woocommerce-MyAccount-content table.shop_table td::before {
    content: attr(data-title); font-weight: 700; color: var(--c-muted); text-align: left;
  }

  /* Formularios em coluna unica e sem zoom no iOS */
  input, select, textarea { font-size: max(16px, var(--fld-size, .92rem)); }
  .form-grid { grid-template-columns: 1fr; }
}

/* Rolagem horizontal suave em listas de cartoes */
@media (max-width: 720px) {
  .fp-tablist { padding-bottom: 2px; }
  .fp-careers, .fp-quotes { gap: 14px; }
}