/* Loja · MODO APP no CELULAR (< 48rem), padrão desde 02/11/2026. Só CSS: reaproveita o cabeçalho, a gaveta, o minicarrinho e as telas da loja e muda o layout.
   Experiência de app da Apple: barra de cima translúcida e compacta, BARRA DE ABAS embaixo (Modelos · Calculadora · Carrinho · Conta · Menu),
   folhas de baixo (menu e carrinho) com alça e curva de gaveta, telas que entram com movimento curto, toque que afunda (scale .97).
   Tablet e computador NÃO mudam: tudo está dentro de html.cs-lapp (classe posta por loja-app.js só em telas estreitas) e da media query de celular.
   Desligar: ?app=0 na loja (fica guardado); ligar de novo: ?app=1.

   ===== VARIÁVEIS POR APARELHO E POR TELA (tabela única da loja) =====
   --lja-aparelho   celular | tablet | computador (só para depurar)
   --lja-tab-h      altura da barra de abas (0 = sem barra: tablet, computador e telas de pagamento)
   --lja-raio       canto das folhas de baixo
   --lja-vidro      fundo translúcido das barras
   --lja-ease       curva de gaveta do iOS
   Por tela (loja-app.js põe data-rota no <html>): home | produto | carrinho | pagar | calculadora | pedidos | outra.
   As regras de cada tela só mexem nessas variáveis; assim uma tela nova herda o padrão e nada quebra. */
:root { --lja-aparelho: computador; --lja-tab-h: 0px; --lja-raio: 1.75rem; --lja-vidro: color-mix(in srgb, var(--surface) 86%, transparent); --lja-ease: cubic-bezier(0.32, 0.72, 0, 1); }
@media (max-width: 63.99rem) { :root { --lja-aparelho: tablet; } }

@media (max-width: 47.99rem) {
  :root { --lja-aparelho: celular; --lja-tab-h: 3.5rem; }
  html[data-rota="pagar"] { --lja-tab-h: 0px; }            /* pagamento: sem abas, só o fluxo de pagar */

  html.cs-lapp { -webkit-tap-highlight-color: transparent; scroll-padding-block: 7rem calc(var(--lja-tab-h) + 1rem); }
  html.cs-lapp body { padding-block-end: calc(var(--lja-tab-h) + env(safe-area-inset-bottom, 0px)); overscroll-behavior-y: none; }
  html.cs-lapp :where(a, button, summary, label, [role="tab"]) { -webkit-touch-callout: none; touch-action: manipulation; }

  /* ---- barra de cima: faixa de modo compacta, logo e tema; a busca vira o campo em pílula do iOS ---- */
  /* o vidro fica num pseudo-elemento: backdrop-filter no próprio cabeçalho viraria o bloco de contenção das abas (position: fixed) e elas sumiriam */
  html.cs-lapp .cs-header { padding-top: env(safe-area-inset-top, 0px); isolation: isolate; background: none; border-block-end: 0.5px solid color-mix(in srgb, var(--border-strong) 30%, transparent); box-shadow: none; }
  html.cs-lapp .cs-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--lja-vidro); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
  html.cs-lapp .cs-promo { padding-block: var(--space-1); font-size: var(--lj-t-xs); line-height: 1.25; }
  html.cs-lapp .cs-header__bar { justify-content: space-between; min-height: 3rem; padding-block: var(--space-1); }
  html.cs-lapp .cs-header__bar > :has(#h-cart) { display: contents; }
  html.cs-lapp #h-lang, html.cs-lapp .cs-nav a#h-sob, html.cs-lapp .cs-nav .h-cats { display: none; }
  html.cs-lapp .cs-msearch { margin-block: 0 var(--space-2); }
  html.cs-lapp[data-estilo] .cs-msearch input.cs-input { min-height: 2.5rem; border: 0; border-radius: 99px; background: color-mix(in srgb, var(--ink) 8%, transparent); box-shadow: none; padding-inline-start: 2.5rem; }
  html.cs-lapp[data-estilo] .cs-msearch input.cs-input:focus { background: var(--surface); box-shadow: 0 0 0 2px var(--primary); }

  /* ---- barra de abas (as peças do cabeçalho viram as abas; o rótulo vem do aria-label) ---- */
  html.cs-lapp body::after { content: ""; position: fixed; inset: auto 0 0 0; height: calc(var(--lja-tab-h) + env(safe-area-inset-bottom, 0px)); z-index: calc(var(--z-sticky, 100) - 10); pointer-events: none; background: var(--lja-vidro); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-block-start: 0.5px solid color-mix(in srgb, var(--border-strong) 35%, transparent); animation: lja-aba-sobe 460ms var(--lja-ease) both; }
  html.cs-lapp .cs-nav { display: contents; }
  html.cs-lapp #h-modelos, html.cs-lapp #h-cart, html.cs-lapp #h-conta, html.cs-lapp #h-menu {
    position: fixed; z-index: calc(var(--z-sticky, 100) + 5); inset: auto auto env(safe-area-inset-bottom, 0px) calc(var(--aba, 0) * 25vw); width: 25vw; height: var(--lja-tab-h); margin: 0; padding: 0.4rem 0 0.3rem;
    display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem; border: 0; border-radius: 0; background: none; box-shadow: inset 0 3px 0 transparent; color: color-mix(in srgb, var(--ink) 58%, var(--surface));
    font: 700 0.6875rem/1 var(--font-title, inherit); text-decoration: none; transition: color 160ms ease, transform 160ms ease, box-shadow 200ms ease; animation: lja-aba-sobe 460ms var(--lja-ease) both;
  }
  html.cs-lapp #h-modelos { --aba: 0; } html.cs-lapp #h-cart { --aba: 1; animation-delay: 40ms; } html.cs-lapp #h-conta { --aba: 2; animation-delay: 80ms; } html.cs-lapp #h-menu { --aba: 3; animation-delay: 120ms; }   /* 4 abas: a Calculadora está oculta dos menus */
  html.cs-lapp #h-cart::after { content: "Carrinho"; } html.cs-lapp #h-conta::after { content: "Conta"; } html.cs-lapp #h-menu::after { content: "Menu"; }
  html.cs-lapp[lang^="en"] #h-cart::after { content: "Cart"; } html.cs-lapp[lang^="en"] #h-conta::after { content: "Account"; }
  html.cs-lapp #amb-faixa { inset: auto auto calc(var(--lja-tab-h) + env(safe-area-inset-bottom, 0px) + 0.25rem) 50% !important; border-radius: 8px !important; }   /* faixa do ambiente de teste acima das abas */
  html.cs-lapp #h-modelos::before { content: ""; width: 1.5rem; height: 1.5rem; background: currentColor; -webkit-mask: var(--aba-icone) center / contain no-repeat; mask: var(--aba-icone) center / contain no-repeat; }
  html.cs-lapp #h-modelos { --aba-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M4 4h6.5v6.5H4zM13.5 4H20v6.5h-6.5zM4 13.5h6.5V20H4zM13.5 13.5H20V20h-6.5z'/%3E%3C/svg%3E"); }
  html.cs-lapp #h-cart .cs-i, html.cs-lapp #h-conta .cs-i, html.cs-lapp #h-menu .cs-i { width: 1.5rem; height: 1.5rem; }
  html.cs-lapp #h-modelos[aria-current], html.cs-lapp #h-menu[aria-expanded="true"], html.cs-lapp[data-rota="carrinho"] #h-cart { color: var(--ink); box-shadow: inset 0 3px 0 var(--primary); }
  html.cs-lapp #h-modelos:active, html.cs-lapp #h-cart:active, html.cs-lapp #h-conta:active, html.cs-lapp #h-menu:active { transform: scale(0.9); }
  html.cs-lapp #h-cart .cs-iconbtn__n { inset: 0.15rem auto auto calc(50% + 0.35rem); }
  html[data-rota="pagar"].cs-lapp body::after, html[data-rota="pagar"].cs-lapp :is(#h-modelos, #h-cart, #h-conta, #h-menu) { display: none !important; }
  html[data-rota="pagar"].cs-lapp .cs-header__bar { gap: var(--space-2); }

  /* ---- as telas entram com movimento curto (só opacity e translate); os cartões entram em cascata ---- */
  html.cs-lapp #view > * { animation: lja-entra 340ms var(--lja-ease) backwards; }   /* backwards (não both): terminada a entrada nada fica aplicado; um translate ativo viraria o bloco de contenção da barra de compra (position: fixed) */
  html.cs-lapp #view .cs-card { animation: lja-entra 380ms var(--lja-ease) backwards; }
  html.cs-lapp #view .cs-card:nth-child(2) { animation-delay: 45ms; } html.cs-lapp #view .cs-card:nth-child(3) { animation-delay: 90ms; } html.cs-lapp #view .cs-card:nth-child(4) { animation-delay: 135ms; }
  html.cs-lapp #view .cs-card:nth-child(n+5) { animation-delay: 170ms; }
  html.cs-lapp .cs-card, html.cs-lapp .btn, html.cs-lapp .cs-btn { transition: transform 160ms ease-out, background-color 160ms ease, filter 160ms ease; }
  html.cs-lapp .cs-card:active { transform: scale(0.975); }
  html.cs-lapp .btn:not(:disabled):active, html.cs-lapp .cs-btn:not(:disabled):active { transform: scale(0.97); }

  /* ---- menu e carrinho viram folhas de baixo (alça, canto redondo, curva de gaveta) ---- */
  html.cs-lapp .h-gaveta { align-items: flex-end; }
  html.cs-lapp .h-gaveta .cs-drawer-nav, html.cs-lapp .mc__p {
    position: absolute; inset: auto 0 0 0; width: 100%; max-width: none; height: auto; max-height: 88dvh; border: 0; border-radius: var(--lja-raio) var(--lja-raio) 0 0; padding-block-start: 1.25rem;
    padding-block-end: env(safe-area-inset-bottom, 0px); box-shadow: 0 -0.5rem 2rem -0.75rem color-mix(in srgb, var(--ink) 40%, transparent);
    transform: translateY(100%); transition: transform 240ms var(--lja-ease); overscroll-behavior: contain;
  }
  html.cs-lapp .h-gaveta.aberta .cs-drawer-nav, html.cs-lapp .mc.aberta .mc__p { transform: none; transition: transform 400ms var(--lja-ease); }
  html.cs-lapp .h-gaveta .cs-drawer-nav::before, html.cs-lapp .mc__p::before { content: ""; position: absolute; inset: 0.5rem auto auto 50%; width: 2.25rem; height: 0.3125rem; margin-inline-start: -1.125rem; border-radius: 99px; background: color-mix(in srgb, var(--ink) 24%, transparent); }
  html.cs-lapp .h-gaveta .cs-drawer-nav { display: flex; flex-direction: column; }
  html.cs-lapp .h-gaveta .cs-drawer-nav > a { min-height: 3rem; display: flex; align-items: center; }
  html.cs-lapp .mc__topo { padding-block-start: var(--space-2); }

  /* ---- revisão "cara de app Apple" (02/11): telas empilhadas têm UM botão "‹ Modelos" (o Voltar do iOS, com o título da tela anterior) no lugar da trilha
     e do "← Voltar à loja"; a barra de cima não repete links de menu (Personalizados está no Menu); a barra de compra do produto fica acima das abas ---- */
  html.cs-lapp #h-pers { display: none; }
  html.cs-lapp .cs-crumbs { margin-block: 0; }
  html.cs-lapp .cs-crumbs li:not(:first-child) { display: none; }
  html.cs-lapp .cs-crumbs li:first-child a { display: inline-flex; align-items: center; min-height: 2.75rem; margin-inline-start: -0.25rem; color: var(--ink); font-weight: 700; text-decoration: none; }
  html.cs-lapp .cs-crumbs li:first-child a::before { content: ""; width: 0.65rem; height: 0.65rem; margin-inline-end: 0.4rem; border: solid currentColor; border-width: 0 0 2.5px 2.5px; border-radius: 1px; transform: rotate(45deg); }
  html.cs-lapp .cs-crumbs li:first-child a:active { opacity: 0.45; }
  html.cs-lapp:has(.cs-crumbs) .voltar { display: none; }
  html.cs-lapp .buybar { inset-block-end: calc(var(--lja-tab-h) + env(safe-area-inset-bottom, 0px)); background: var(--lja-vidro); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-block-start: 0.5px solid color-mix(in srgb, var(--border-strong) 35%, transparent); box-shadow: none; }
  html.cs-lapp .prod:has(.buybar) { padding-bottom: calc(5.25rem + var(--lja-tab-h) + env(safe-area-inset-bottom, 0px)); }

  /* ---- títulos grandes (as telas das abas abrem com o título em corpo grande, como no iOS) ---- */
  html.cs-lapp #view h1:not(.hero h1) { font-size: 2.125rem; line-height: 1.08; letter-spacing: -0.02em; margin-block: var(--space-2) var(--space-3); }
  html.cs-lapp[data-rota="home"] #view::before { content: "Modelos"; display: block; padding-block: var(--space-3) var(--space-1); font: 800 2.125rem/1.08 var(--font-display, var(--font-title, inherit)); letter-spacing: -0.02em; }
  html.cs-lapp[data-rota="home"][lang^="en"] #view::before { content: "Models"; }

  /* ---- campos no estilo nativo: sem moldura grossa, fundo suave, canto 12, 16 px (o iOS não dá zoom na página), foco com anel ---- */
  html.cs-lapp #view :is(.cs-input, .cs-select, .cs-textarea), html.cs-lapp[data-estilo] #view :is(.cs-input, .cs-select, .cs-textarea), html.cs-lapp #view :is(.cs-field, label.f) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]), select, textarea) { min-height: 2.75rem; border: 0; border-radius: 12px; background-color: color-mix(in srgb, var(--ink) 6%, var(--surface)); box-shadow: none; font-size: 1rem; }
  html.cs-lapp #view :is(.cs-input, .cs-select, .cs-textarea, label.f input, label.f select, label.f textarea):focus-visible { outline: none; box-shadow: 0 0 0 2px var(--primary); background-color: var(--surface); }

  /* ---- Calculadora: lista agrupada (cada campo é uma linha: rótulo à esquerda, valor à direita, filete entre as linhas) ---- */
  html.cs-lapp .calc-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; overflow: hidden; border-radius: 14px; background: var(--surface); box-shadow: 0 0 0 0.5px color-mix(in srgb, var(--border-strong) 35%, transparent); }
  html.cs-lapp .calc-tempo { display: contents; }
  html.cs-lapp .calc-form label { min-width: 0; display: flex; align-items: center; gap: var(--space-3); min-height: 3rem; padding: 0 var(--space-4); border-block-end: 0.5px solid color-mix(in srgb, var(--border-strong) 22%, transparent); }
  html.cs-lapp .calc-form label > span { flex: 0 0 38%; font-weight: 600; }
  html.cs-lapp .calc-form label > :is(input:not([type="file"]), select) { flex: 1; min-width: 0; min-height: 2.75rem; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; outline: none; text-align: right; text-align-last: right; font-size: 1rem; }
  html.cs-lapp .calc-form label > input[type="file"] { flex: 1; min-width: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font-size: 0.8125rem; }
  html.cs-lapp .calc-form label:has(.hint) { flex-wrap: wrap; padding-block: var(--space-2); }
  html.cs-lapp .calc-form label .hint { flex: 1 0 100%; text-align: right; }
  html.cs-lapp .calc-form > .hint { padding: var(--space-2) var(--space-4); }

  /* ---- avisos: o toast sobe acima da barra de abas ---- */
  html.cs-lapp .toast { inset-block-end: calc(var(--lja-tab-h) + env(safe-area-inset-bottom, 0px) + 0.75rem); }
  html.cs-lapp .cs-footer { padding-block-end: var(--space-6); }

  @keyframes lja-entra { from { opacity: 0; translate: 0 0.75rem; } to { opacity: 1; translate: none; } }   /* translate: none no fim (não 0 0): um translate ativo viraria o bloco de contenção da barra de compra (position: fixed) */
  @keyframes lja-aba-sobe { from { opacity: 0; translate: 0 100%; } to { opacity: 1; translate: 0 0; } }
  @media (prefers-reduced-motion: reduce) {
    html.cs-lapp #view > *, html.cs-lapp #view .cs-card, html.cs-lapp body::after, html.cs-lapp :is(#h-modelos, #h-cart, #h-conta, #h-menu) { animation: none; }
    html.cs-lapp .h-gaveta .cs-drawer-nav, html.cs-lapp .mc__p { transition: none; transform: none; }
    html.cs-lapp .h-gaveta:not(.aberta) .cs-drawer-nav, html.cs-lapp .mc:not(.aberta) .mc__p { display: none; }
  }
}