/* ==========================================================================
   Vitrine no computador — layout inspirado no iFood para PC.

   TUDO neste arquivo vive dentro do @media (min-width:1000px). A única regra
   de fora é `.pc-so{display:none}`, que esconde no celular os elementos que
   só existem aqui. É de propósito: o app.css continua sendo a verdade do
   celular, e nenhuma mudança daqui pode vazar pra lá. Se algo quebrar no
   telefone, não foi este arquivo.

   O tema escuro herda as variáveis do app.css — por isso quase nada aqui usa
   cor fixa: `var(--bg)`, `var(--linha)` e `var(--texto)` já viram as do tema.
   ========================================================================== */

/* --------------------------------------------------------------- no celular
   A barra do topo não existe no telefone, mas o "Minha conta", o modo escuro
   e o carrinho moram DENTRO dela no HTML. `display:contents` resolve os dois
   ao mesmo tempo: apaga as caixas da barra sem apagar os filhos, que voltam a
   se posicionar como se fossem filhos diretos do body — e como são
   `position:fixed`, flutuam sobre a capa exatamente como sempre flutuaram.

   Preferi isto a mover os elementos com JavaScript: mover dependia de o
   evento de mudança de tamanho disparar, e quando ele não disparava os botões
   ficavam presos numa barra escondida e sumiam da tela. Aqui não há o que
   falhar — é o próprio motor de layout aplicando a regra. */
.pc-topo, .pc-topo-in, .pc-acoes { display: contents; }
.pc-marca, .pc-status { display: none; }
.pc-so { display: none; }
/* Os cortes ficam no HTML em qualquer tela, mas só abrem no PC. No celular o
   toque continua levando pra página do produto, que é onde cabe foto grande e
   descrição. */
.var-exp { display: none; }

@media (min-width: 1000px) {

  /* ---------------------------------------------------------------- base
     No celular o body é a própria coluna de 480px. No PC ele vira a tela
     inteira e quem centraliza é cada bloco — assim a faixa cinza de fundo e
     a barra do topo podem ir de ponta a ponta, como no iFood. */
  body.loja { max-width: none; padding-bottom: 40px; background: var(--bg); }

  body.loja > .capa,
  body.loja > main,
  body.loja > .cupons-faixa,
  body.loja > .promo-banner,
  body.loja > .busca-wrap,
  body.loja > .cat-tabs,
  body.loja > .aviso-topo { max-width: 1200px; margin-left: auto; margin-right: auto; }

  /* O seletor de idioma flutuava sobre a capa; aqui ele tem barra pra morar. */
  .lang-sel { position: fixed; top: 15px; right: 22px; }

  /* ------------------------------------------------------------ barra do topo
     Fica grudada porque é o único ponto fixo da página: o cliente rola dez
     categorias e continua vendo de que loja é e se está aberta. */
  /* Aqui as caixas da barra voltam a existir (no celular são `contents`). */
  .pc-topo {
    display: block; position: sticky; top: 0; z-index: 40;
    background: #fff; border-bottom: 1px solid var(--linha);
  }
  .pc-marca { display: flex; }
  .pc-status { display: flex; }
  body.escuro .pc-topo { background: #1b1b1f; }
  .pc-topo-in {
    max-width: 1200px; margin: 0 auto; height: 64px;
    display: flex; align-items: center; gap: 14px; padding: 0 8px;
  }
  /* Encolhe antes de empurrar o resto pra fora: o nome tem reticências, o
     carrinho não pode sumir da tela. */
  .pc-marca { display: flex; align-items: center; gap: 11px; min-width: 0; flex: 0 1 auto; }
  .pc-marca img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
  .pc-marca span {
    font-weight: 900; font-size: 17px; color: var(--cor);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* Aberto/fechado fica colado no nome da loja, não solto no canto. */
  .pc-status {
    display: flex; align-items: center; gap: 7px; flex: 0 0 auto;
    font-size: 12.5px; padding: 5px 11px; border-radius: 999px; background: var(--bg);
  }
  .pc-status .bolota { width: 8px; height: 8px; border-radius: 50%; background: #1a9d4b; }
  .pc-status.fechada .bolota { background: #c0242a; }
  .pc-status b { font-weight: 800; }

  /* Canto direito da barra: Minha conta · modo escuro · carrinho. */
  .pc-acoes { display: flex; align-items: center; gap: 9px; margin-left: auto; flex: 0 0 auto; }
  .pc-acoes .topo-esq { position: static; left: auto; top: auto; z-index: auto; }
  /* Na capa eles ficavam brancos sobre foto escura; aqui o fundo é branco. */
  .pc-acoes .btn-conta, .pc-acoes .btn-tema {
    background: var(--bg); color: var(--texto); height: 38px;
  }
  /* O carrinho perde o `fixed` e vira só mais um item da fileira, mantendo a
     mesma pílula bordô de sempre. */
  .pc-acoes .barra-carrinho {
    position: static; transform: none; left: auto; right: auto; bottom: auto;
    min-width: 0; width: auto; height: 38px; padding: 0 16px; gap: 9px;
    box-shadow: none; font-size: 13.5px;
  }
  .pc-acoes .barra-carrinho .total { margin-left: 6px; }

  /* --------------------------------------------------------------- capa
     Banner largo com cantos arredondados, como o do restaurante no iFood. */
  /* Faixa mais fina, e o cabeçalho CENTRALIZADO (como no celular, só que
     maior): logo centralizada sobre a faixa, e o nome + a frase embaixo,
     centralizados. Antes era logo-à-esquerda com muito vazio à direita. */
  .capa { padding-top: 18px; }
  .capa-img { height: 150px; border-radius: 12px; }

  .capa-info {
    display: block; text-align: center;
    margin-top: calc(-1 * var(--logo-offset, 80px));
    padding: 0 4px 22px;
  }
  .capa-info .logo {
    width: 112px; height: 112px; margin: 0 auto 6px;
    border: 4px solid #fff; box-shadow: 0 4px 16px rgba(0,0,0,.12);
  }
  body.escuro .capa-info .logo { border-color: #1b1b1f; }
  .capa-info h1 { font-size: 36px; line-height: 1.12; margin-top: 10px; }
  .capa-info .desc {
    font-size: 16.5px; margin: 8px auto 0; max-width: 620px; line-height: 1.4;
  }
  .capa-info .endereco { justify-content: center; }
  .status-lista, .status-row { justify-content: center; }

  /* ------------------------------------------------------- busca e categorias
     Empilhadas logo abaixo da barra do topo (64px), na mesma ordem do celular:
     busca em cima, chips de categoria embaixo. Os `top` têm que somar certo,
     senão uma cobre a outra quando a página rola. */
  .busca-wrap { top: 64px; padding: 10px 4px; }
  .busca-campo { max-width: 560px; }
  .cat-tabs { top: 118px; padding: 8px 4px; }
  .cat-chip { font-size: 14px; }

  /* --------------------------------------------------------------- produtos */
  .categoria { padding: 26px 4px 10px; scroll-margin-top: 130px; }
  .cat-titulo { font-size: 22px; margin-bottom: 16px; }

  /* Grade de e-commerce: cartões verticais (foto em cima, texto embaixo), em
     quantas colunas couberem — 210px de largura mínima dá de 3 a 5 colunas
     conforme a tela. É o formato de loja online, não a lista horizontal. */
  .produtos {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 18px;
  }

  .produto {
    position: relative; display: flex; flex-direction: column; align-items: stretch;
    padding: 0; gap: 0; overflow: hidden;
    border: 1px solid var(--linha); border-radius: 12px; background: #fff;
    transition: box-shadow .15s, transform .15s;
  }
  body.escuro .produto { background: #1b1b1f; }
  .produto:hover { box-shadow: 0 8px 22px rgba(0, 0, 0, .10); transform: translateY(-2px); }

  /* Foto no topo, ocupando a largura do cartão. */
  .produto-foto { order: 0; width: 100%; height: 190px; flex: 0 0 auto; border-radius: 0; }
  .produto-foto img, .produto-foto .sem-foto {
    width: 100%; height: 100%; border-radius: 0; object-fit: cover;
  }
  /* Texto embaixo, e o cartão empurra a ação pro rodapé (`flex:1` no texto)
     pra que os botões de todos os cartões da linha fiquem alinhados. */
  .produto-texto { order: 1; padding: 12px 14px 8px; flex: 1 1 auto; }
  .produto-texto h3 { font-size: 15px; line-height: 1.25; }
  .preco { font-size: 16px; margin-top: 6px; }

  /* Ação (adicionar / régua de quantidade) no rodapé do cartão, à direita. */
  .produto-acao {
    order: 2; align-self: flex-end; padding: 0 14px 14px; position: static;
  }

  /* A descrição fica escondida por padrão; o "+" na foto abre. Numa grade de
     cartões, descrição sempre aberta deixaria as alturas desiguais. */
  .produto .produto-desc { margin-top: 8px; font-size: 12.5px; }

  /* ------------------------------------------------- cortes dentro do cartão
     O painel de cortes ocupa a largura toda do cartão, embaixo. */
  .produto .var-exp {
    display: none; order: 3; width: 100%;
    border-top: 1px solid var(--linha); margin: 0; padding: 12px 14px 14px;
  }
  .produto.aberto .var-exp { display: block; }
  /* O "+" gira e vira "×" quando aberto — mesma pista visual do resto do site. */
  .produto .produto-acao .mais { transition: transform .18s; }
  .produto.aberto .produto-acao .mais { transform: rotate(45deg); }
  .produto.aberto { box-shadow: 0 6px 18px rgba(0, 0, 0, .09); }

  .var-exp-topo { font-size: 12px; font-weight: 800; color: var(--cinza);
    text-transform: uppercase; letter-spacing: .3px; margin-bottom: 9px; }
  /* Uma coluna de opções: no cartão estreito da grade, duas colunas de cortes
     ficariam espremidas. */
  .var-exp-lista { display: grid; grid-template-columns: 1fr; gap: 7px; }
  .var-op {
    display: flex; align-items: center; gap: 9px; padding: 6px 9px;
    border: 1px solid var(--linha); border-radius: 9px; font-size: 13px;
  }
  .var-op.ativa { border-color: var(--cor); background: rgba(109, 15, 31, .05); }
  .var-op .vo-nome { flex: 1; min-width: 0; font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .var-op .vo-preco { font-weight: 800; white-space: nowrap; }
  .var-op .vo-st { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
  .var-op .vo-st button {
    width: 24px; height: 24px; border: none; border-radius: 6px; cursor: pointer;
    background: var(--bg); color: var(--cor); font-size: 15px; font-weight: 800;
    line-height: 1; font-family: inherit;
  }
  .var-op .vo-st button:hover { background: var(--linha); }
  .var-op .vo-qtd { min-width: 18px; text-align: center; font-weight: 800; font-size: 13px; }

  /* ------------------------------------------------------------- destaques
     A faixa já é um grid com o número de colunas que você escolhe no painel;
     aqui ela só ganha o tamanho e a moldura da versão de PC. */
  .destaques { max-width: 1100px; margin: 0 auto; padding: 26px 4px 10px; }
  .destaques-lista { gap: 16px; }
  .destaque-card {
    border: 1px solid var(--linha); border-radius: 10px; overflow: hidden;
    background: #fff; transition: box-shadow .15s, transform .15s;
  }
  body.escuro .destaque-card { background: #1b1b1f; }
  .destaque-card:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, .09); transform: translateY(-1px); }
  .destaque-foto { height: 190px; }
  .destaque-nome { font-size: 15px; padding: 12px 14px 0; }
  .destaque-preco { padding: 6px 14px 14px; }

  /* --------------------------------------------------------------- cupons */
  .cupons-faixa { padding: 14px 4px; }

  /* O carrinho no PC não fica mais flutuando embaixo: o script o levou pra
     barra do topo (regras em `.pc-acoes`, acima). */

  /* ---------------------------------------------------------------- modal
     A folha subia de baixo (gesto de celular). No PC ela é uma janela no
     centro — subir do rodapé numa tela de 1080px de altura fica estranho. */
  .sheet {
    max-width: 620px; margin: auto; border-radius: 14px;
    max-height: 86vh; animation: none;
  }
  .sheet-overlay { display: flex; align-items: center; justify-content: center; }
}