/* ==========================================================================
   Aquariam App — ajustes de layout para quando a loja roda como aplicativo.
   Tudo aqui depende da classe .aqapp no <html>, que so e adicionada quando a
   pagina abre instalada (standalone/TWA). No navegador comum nada muda.
   ========================================================================== */

:root{
  --aqapp-verde:#0f7a63;
  --aqapp-verde-claro:#15a383;
  --aqapp-tab-altura:58px;
  --aqapp-sa-top:env(safe-area-inset-top,0px);
  --aqapp-sa-bottom:env(safe-area-inset-bottom,0px);
  --aqapp-sa-left:env(safe-area-inset-left,0px);
  --aqapp-sa-right:env(safe-area-inset-right,0px);
}

/* A barra inferior so existe no aplicativo. */
.aqapp-tabbar{ display:none; }

/* ----- modo aplicativo ----- */
html.aqapp,
html.aqapp body{
  overscroll-behavior-y:none;          /* mata o "puxar para recarregar" do Chrome */
  -webkit-tap-highlight-color:transparent;
}
html.aqapp body{
  /* espaco para a barra inferior nao cobrir o conteudo */
  padding-bottom:calc(var(--aqapp-tab-altura) + var(--aqapp-sa-bottom)) !important;
  padding-left:var(--aqapp-sa-left);
  padding-right:var(--aqapp-sa-right);
}

/* respeita o recorte da tela no topo (notch do iPhone; 0 no Android) */
html.aqapp header,
html.aqapp .elementor-location-header{ padding-top:var(--aqapp-sa-top); }

/* elementos que so fazem sentido no site aberto no navegador */
html.aqapp .elementor-location-footer,
html.aqapp #wpadminbar,
html.aqapp .icap-barra{ display:none !important; }

/* texto nao deve ser selecionado por toque longo, como num app nativo —
   mas campos e conteudo de leitura continuam selecionaveis */
html.aqapp .aqapp-tabbar,
html.aqapp nav,
html.aqapp button{ -webkit-user-select:none; user-select:none; }

/* ----- barra de navegacao inferior ----- */
html.aqapp .aqapp-tabbar{
  display:flex;
  position:fixed; left:0; right:0; bottom:0; z-index:99990;
  height:calc(var(--aqapp-tab-altura) + var(--aqapp-sa-bottom));
  padding:0 var(--aqapp-sa-right) var(--aqapp-sa-bottom) var(--aqapp-sa-left);
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-top:1px solid #e3ebe8;
  box-shadow:0 -2px 14px rgba(11,95,77,.07);
}
.aqapp-tab{
  flex:1 1 0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; text-decoration:none; color:#7a8d88; font-size:10.5px; font-weight:600;
  letter-spacing:.1px; line-height:1; padding:7px 2px 0; min-width:0;
  transition:color .15s ease;
}
.aqapp-tab:hover,.aqapp-tab:focus,.aqapp-tab:visited{ text-decoration:none; color:#7a8d88; }
.aqapp-tab.is-active,.aqapp-tab.is-active:hover{ color:var(--aqapp-verde); }
.aqapp-tab-ico{ position:relative; display:block; width:24px; height:24px; }
.aqapp-tab-ico svg{ width:24px; height:24px; display:block; }
.aqapp-tab.is-active .aqapp-tab-ico svg{ stroke-width:2.1; }
.aqapp-tab-txt{ display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* contador do carrinho */
.aqapp-tab-badge{
  position:absolute; top:-5px; right:-8px; min-width:17px; height:17px; padding:0 4px;
  display:flex; align-items:center; justify-content:center;
  background:#e0592a; color:#fff; border-radius:999px;
  font-size:10px; font-weight:800; line-height:1; border:2px solid #fff;
}

/* ----- ajustes finos de conteudo no app ----- */

/* cabecalho mais compacto: no app o espaco vertical e precioso */
html.aqapp .elementor-location-header .elementor-section,
html.aqapp .elementor-location-header .e-con{ padding-top:6px; padding-bottom:6px; }

/* botoes com area de toque confortavel */
html.aqapp .button,
html.aqapp .wp-element-button,
html.aqapp .single_add_to_cart_button,
html.aqapp .checkout-button{ min-height:46px; display:inline-flex; align-items:center; justify-content:center; }

/* grade de produtos alinhada em duas colunas no celular */
@media (max-width:640px){
  html.aqapp ul.products{ display:grid !important; grid-template-columns:1fr 1fr; gap:12px; margin:0; padding:0; }
  html.aqapp ul.products::before,
  html.aqapp ul.products::after{ content:none !important; display:none !important; }
  html.aqapp ul.products li.product{
    width:auto !important; float:none !important; margin:0 !important; clear:none !important;
    display:flex; flex-direction:column;
  }
  html.aqapp ul.products li.product img{ width:100%; height:auto; aspect-ratio:1/1; object-fit:contain; }
  html.aqapp ul.products li.product .woocommerce-loop-product__title{
    font-size:13.5px; line-height:1.3; min-height:2.6em; margin:6px 0 2px;
  }
  html.aqapp ul.products li.product .price{ font-size:14.5px; }
  html.aqapp ul.products li.product .button{ width:100%; font-size:13px; padding:10px 8px; margin-top:auto; }
}

/* tabelas largas (tabela de precos do parceiro) rolam sem quebrar a tela */
html.aqapp .icap-price-wrap{ -webkit-overflow-scrolling:touch; }

/* formularios: iOS da zoom quando a fonte e menor que 16px */
html.aqapp input[type=text],html.aqapp input[type=email],html.aqapp input[type=tel],
html.aqapp input[type=password],html.aqapp input[type=number],html.aqapp input[type=search],
html.aqapp select,html.aqapp textarea{ font-size:16px; }

/* o popup do cupom precisa caber acima da barra inferior */
html.aqapp .icap-pop-caixa{ margin-bottom:calc(var(--aqapp-tab-altura) + 12px); }

/* ----- convite para instalar (so no navegador, nunca dentro do app) ----- */
.aqapp-instalar{
  display:none; position:fixed; left:12px; right:12px; bottom:12px; z-index:99980;
  align-items:center; gap:12px; padding:12px 14px;
  background:#0f7a63; color:#fff; border-radius:14px;
  box-shadow:0 10px 30px rgba(11,95,77,.28); font-size:14px; line-height:1.3;
}
.aqapp-instalar.is-on{ display:flex; }
.aqapp-instalar img{ width:38px; height:38px; border-radius:9px; flex:0 0 auto; }
.aqapp-instalar-txt{ flex:1 1 auto; min-width:0; }
.aqapp-instalar-txt strong{ display:block; font-size:14.5px; }
.aqapp-instalar-txt span{ opacity:.85; font-size:12.5px; }
.aqapp-instalar button{
  flex:0 0 auto; background:#fff; color:#0b5f4d; border:0; border-radius:999px;
  padding:9px 16px; font-weight:700; font-size:13px; cursor:pointer;
}
.aqapp-instalar .aqapp-instalar-x{
  background:transparent; color:#fff; opacity:.75; padding:4px 6px; font-size:19px; font-weight:400;
}

/* ---- polimento fino do modo aplicativo ---- */

/* titulo do produto: no celular o tamanho do site ocupa meia tela */
@media (max-width:640px){
  html.aqapp .product_title,
  html.aqapp .elementor-widget-woocommerce-product-title h1{
    font-size:22px !important; line-height:1.25 !important; margin-bottom:6px !important;
  }
  html.aqapp .woocommerce-breadcrumb{ font-size:12px; line-height:1.4; }
  /* preco em destaque, logo abaixo do titulo */
  html.aqapp .summary .price,
  html.aqapp .elementor-widget-woocommerce-product-price .price{ font-size:24px !important; }
}

/* botao do cartao de produto: cabe em uma linha */
@media (max-width:640px){
  html.aqapp ul.products li.product .button{
    font-size:12px; padding:10px 6px; letter-spacing:-.1px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
}

/* o cabecalho fixo do tema somado a barra inferior comia a tela;
   no app ele rola junto com o conteudo */
html.aqapp .elementor-sticky--active{ position:static !important; }

/* rolagem suave ao tocar, como app nativo */
html.aqapp{ scroll-behavior:smooth; }

/* a barra inferior nao pode cobrir o botao fixo de finalizar compra */
html.aqapp .wc-proceed-to-checkout,
html.aqapp .woocommerce-checkout-payment{ margin-bottom:12px; }