/* ══════════════════════════════════════════════════════════════════════════
   modelo-360.css — o MODELO visual do 360 aplicado à tela real.

   Diferente de `identidade-360.css`, que só troca valores de token, esta
   camada muda o DESENHO: largura, grade, forma do card, herói escuro,
   assinatura da plataforma no topo.

   ══ O QUE ELA NÃO FAZ ═══════════════════════════════════════════════════

   Nenhuma função, nenhuma consulta, nenhum identificador. A tela continua
   com as mesmas 132 funções, as mesmas 18 RPCs e as mesmas 3 tabelas. Isto
   é folha de estilo: se for removida, a tela volta ao que era.

   ══ A DIVISÃO DAS DUAS IDENTIDADES ══════════════════════════════════════

   MOLDURA = plataforma. A assinatura "360 foods" vai na barra do topo, que
   é o lugar do dono do sistema.

   CONTEÚDO = loja. O nome, o logo e o subtítulo do estabelecimento ganham o
   cartão escuro, que é a maior peça da tela. A loja fica MAIOR do que era
   antes, não menor: no PLIN o nome dela cabia numa linha de 18px na barra.

   Carregada depois de `identidade-360.css`: usa os tokens que ela define.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --m-esc:   #0C2620;   /* o escuro do herói — verde levado quase ao preto */
  --m-esc2:  #133A2E;   /* um degrau acima, para os pills dentro do herói */
  --m-claro: #E6F6EC;   /* névoa da marca: fundo de selo e de miniatura */
  --m-lima:  #50A830;   /* lima da marca: só na sobrelinha e em selo */
  --m-larg:  1180px;    /* a largura de trabalho do modelo */
  --m-raio:  14px;
}

/* ── página ─────────────────────────────────────────────────────────────
   A tela do PLIN é uma coluna de 540px, desenhada para o celular. O modelo
   é largo. Só a largura muda; o comportamento dentro dela é o mesmo. */
body{
  max-width: var(--m-larg) !important;
  background: var(--bg);
}

/* 🔑 A tela JÁ tinha desenho de desktop, e eu não o tinha visto:
     @media (min-width:600px){ body, .tb, .search-wrap, .cats { max-width:540px } }
     @media (min-width:900px){ .prods { max-width:980px } }
   Ou seja, ela não é só de celular — é de celular com uma coluna centrada no
   desktop. O modelo troca essa decisão por outra (largura de trabalho), e para
   isso precisa desfazer os limites um por um. Sem estas quatro linhas o herói
   ficava largo e a barra do topo estreita, cada um obedecendo a uma regra
   diferente. */
.tb, .search-wrap, .cats, .prods{ max-width: none }

/* 🔑 ESPECIFICIDADE — a lição que a Pérola deu.

   A tela tem temas por inquilino, e eles usam seletor de atributo:
     [data-tema="v4_escuro"] .prods { max-width: 600px }   -> (0,2,0)
   A minha regra acima é (0,1,0) e PERDE. O resultado foi um híbrido: corpo
   de 1180px com a grade presa em 600, cartões brancos sobre fundo preto.
   Não era "quase certo" — era duas decisões de layout brigando na mesma tela.

   Estas regras existem só para o caso em que o modelo é FORÇADO
   (?modelo=360) sobre uma loja que tem tema. No caminho normal o modelo sai
   de cena sozinho — ver modelo-360.js. */
:root[data-tema] .prods{ max-width: none; grid-template-columns: repeat(auto-fill, minmax(298px, 1fr)) }
:root[data-tema] .tb,
:root[data-tema] .search-wrap,
:root[data-tema] .cats{ max-width: none }

/* ── barra do topo: a assinatura da plataforma ──────────────────────────
   O logo e o nome da LOJA saem daqui e vão para o herói — quem os move é
   modelo-360.js, porque CSS não move elemento. Se o script não rodar, eles
   continuam aqui e a tela segue funcionando: degradação, não quebra. */
.tb{
  background: var(--s1);
  border-bottom: 1px solid var(--b1);
  padding: 14px 24px;
  gap: 14px;
  min-height: 62px;
}
.tb::before{
  /* O logotipo REAL, recortado da arte original. Era um texto enquanto a
     marca não existia em arquivo; agora é a marca. A proporção 1083×270 está
     travada em `aspect-ratio` para ele nunca esticar. */
  content: "";
  display: block;
  width: 132px;
  aspect-ratio: 1083 / 270;
  flex-shrink: 0;
  background: url("./marca/360foods-logo-compacta.png") no-repeat left center / contain;
}
/* O par nome+status da loja vira um selo discreto à direita. */
.tb .info{ flex: 1; min-width: 0; text-align: right }
.tb .nm{
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13px; font-weight: 700; color: var(--mu);
}
.tb .sub{
  justify-content: flex-end;
  background: var(--m-claro);
  color: var(--ac2);
  border-radius: 99px;
  padding: 4px 11px;
  display: inline-flex;
  font-size: 10.5px;
  margin-top: 4px;
}

/* ── herói: o cartão escuro com a identidade da LOJA ────────────────────
   `.hero-empresa-nome` existe no HTML e está `display:none` desde sempre
   (linha 62 do original). O modelo o acende — não inventa elemento. */
.hero{
  padding: 22px 24px 6px;
  background: var(--bg);
}
.hero-empresa-band{
  display: block;
  background: var(--m-esc);
  border-radius: 20px;
  padding: 26px 30px 24px;
  margin-bottom: 18px;
  position: relative;
  box-shadow: 0 10px 30px rgba(12,38,32,.16);
}
.hero-empresa-band::before{
  content: "CARDÁPIO";
  display: block;
  font-size: 11px; font-weight: 800; letter-spacing: .16em;
  color: var(--m-lima);
  margin-bottom: 10px;
}
.hero-empresa-nome{
  display: block !important;                 /* vence a regra original */
  font-family: var(--display);
  font-size: clamp(26px, 4.2vw, 38px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: #FDFDFD;
  text-wrap: balance;
}

/* O logo da loja, movido para cá por modelo-360.js. */
.hero-empresa-band .logo{
  width: 46px; height: 46px; border-radius: 13px;
  background: var(--m-esc2);
  display: flex; align-items: center; justify-content: center;
  color: #FDFDFD; font-weight: 900; font-size: 16px;
  overflow: hidden; flex-shrink: 0;
  position: absolute; top: 24px; right: 26px;
  box-shadow: none;
}
.hero-empresa-band .logo img{ width: 100%; height: 100%; object-fit: cover }

/* Faixa de informações da loja (horário, cidade, tempo), montada pelo
   script a partir do que a própria tela já tem. */
.hero-fatos{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px }
.hero-fatos span{
  background: var(--m-esc2);
  color: #D8EBDF;
  border-radius: 99px;
  padding: 6px 13px;
  font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 6px;
}

/* ── destaques ──────────────────────────────────────────────────────────
   Continuam existindo; ganham a largura da página. */
.hero-titulo{ padding: 0; margin-bottom: 12px; font-size: 19px }
.hero-scroll{ padding: 2px 0 12px; gap: 14px }
.hero-card{ flex: 0 0 300px; max-width: 320px; border-radius: var(--m-raio); border-color: var(--b1) }
.hero-card-img{ aspect-ratio: 1.9/1 }

/* ── busca ──────────────────────────────────────────────────────────────
   Deixa de ser grudada no topo: no modelo ela é parte do conteúdo. */
.search-wrap{
  position: static;
  padding: 4px 24px 12px;
  border-bottom: none;
  background: transparent;
  order: 2;
}
.search{ border-radius: 12px; padding: 13px 16px; border-color: var(--b1) }
.search input{ font-size: 14.5px; font-weight: 500 }

/* ── categorias: fileira de fichas ──────────────────────────────────────
   O dropdown original (`.cat-drop`) é UM botão; fichas são N elementos, e
   CSS não multiplica elemento. Quem as monta é modelo-360.js, chamando a
   própria `_selCat()` da tela. Sem o script, o dropdown volta a aparecer e
   tudo funciona igual. */
.cats{
  position: static;
  background: transparent;
  border-bottom: none;
  padding: 4px 24px 10px;
  display: flex; flex-wrap: wrap; gap: 9px;
  overflow: visible;
}
.cat-drop{ display: none }                  /* só quando as fichas existem */
.cats.sem-fichas .cat-drop{ display: flex; max-width: 320px }

.chip-360{
  background: var(--s1);
  border: 1.5px solid var(--b1);
  border-radius: 99px;
  padding: 9px 17px;
  font-size: 13.5px; font-weight: 700;
  color: var(--tx);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  transition: .14s;
  font-family: inherit;
  line-height: 1;
}
.chip-360:hover{ border-color: var(--b2) }
.chip-360[aria-pressed="true"]{
  background: var(--ac);
  border-color: var(--ac);
  color: #FDFDFD;
}
.chip-360 .n{ opacity: .6; font-size: 11.5px; font-weight: 800 }
.chip-360[aria-pressed="true"] .n{ opacity: .75 }

/* ── grade de produtos ──────────────────────────────────────────────────
   Três colunas onde couber; uma no celular. `auto-fill` com mínimo em px é
   o que faz a mesma regra servir aos dois sem media query. */
.prods{
  padding: 6px 24px 140px;
  grid-template-columns: repeat(auto-fill, minmax(298px, 1fr));
  gap: 16px;
  align-items: start;
}

/* O cartão vira LINHA: miniatura à esquerda, texto à direita. */
.prod{
  flex-direction: row;
  gap: 14px;
  padding: 15px;
  border-radius: var(--m-raio);
  border-color: var(--b1);
  box-shadow: none;
  align-items: flex-start;
}
.prod:hover{ border-color: var(--b2); box-shadow: 0 4px 16px rgba(12,38,32,.07) }

.prod-img{
  width: 58px; height: 58px;
  flex: 0 0 58px;
  aspect-ratio: auto;
  border-radius: 11px;
  background: var(--m-claro);
  font-size: 27px;
}
.prod-img img{ border-radius: 11px }

.prod-info{ padding: 0; gap: 5px; min-width: 0 }
/* Espaço reservado para o selo, só nos cartões que têm um. */
.prod:has(.badge) .prod-info{ padding-right: 48px }
.prod-nm{ font-size: 14.5px; -webkit-line-clamp: 2 }
.prod-desc{ font-size: 12.5px; line-height: 1.4; -webkit-line-clamp: 2 }
.prod-pr{
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 15.5px; font-weight: 900;
  color: var(--tx);
  padding-top: 3px;
}

/* O tempo de entrega vira pill no herói; a linha solta no topo viraria
   a mesma informação duas vezes na mesma dobra. Só some quando o herói
   realmente a mostra — quem decide é modelo-360.js. */
body.tem-fato-tempo #info-entrega{ display: none !important }

/* O selo "⭐ Top" era posicionado contra .prod-img, que na miniatura de 58px
   não tem onde caber. Soltando o posicionamento da miniatura, ele passa a se
   resolver contra o cartão inteiro e volta ao canto — sem sair do lugar no
   DOM, que CSS não moveria. */
.prod-img{ position: static }
.prod .badge{
  /* O original é `top:8px; left:8px`. Definir só `right` deixava os DOIS
     lados presos e o selo esticava por cima do nome do produto — apareceu na
     primeira olhada na loja roxa. `left:auto` solta o lado esquerdo. */
  position: absolute; top: 10px; right: 10px; left: auto;
  /* Soltar o lado esquerdo parou o esticamento, mas o selo continuava EM CIMA
     do nome: num cartão de 334px, `right:10px` cai dentro da faixa do texto.
     A correção não é mover o selo de novo, é o texto lhe dar lugar — ver
     .prod-info abaixo. Foi preciso medir duas vezes para ver isso. */
  background: var(--m-claro);
  color: var(--ac2);
  box-shadow: none;
  font-size: 9.5px; font-weight: 800;
  letter-spacing: .05em;
  padding: 3px 8px;
  border-radius: 99px;
}

.prod-add{
  width: 28px; height: 28px; font-size: 16px;
  box-shadow: none;
  background: var(--ac);
}

/* ── títulos de seção ───────────────────────────────────────────────────
   A tela já emite um cabeçalho por categoria; o modelo só o assenta. */
.cat-titulo, .sec, .sec-ttl, .cat-ttl{
  font-family: var(--display);
  font-size: 19px; font-weight: 900;
  color: var(--tx);
  padding: 20px 24px 10px;
  letter-spacing: -.01em;
  grid-column: 1 / -1;
}

/* ── carrinho ───────────────────────────────────────────────────────────
   Continua fixo no rodapé; acompanha a largura nova. */
.cart-fab{
  max-width: var(--m-larg);
  left: 50%; right: auto;
  transform: translateX(-50%);
  width: calc(100% - 48px);
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(11,128,72,.32);
}
.cart-fab.on{ display: flex }

/* ── faixa fechado ──────────────────────────────────────────────────────
   Cor semântica preservada; só o assentamento muda. */
.fechado-bar{ margin: 0 24px; border-radius: 12px }

/* ── celular ────────────────────────────────────────────────────────────
   Abaixo de 640px o modelo devolve a tela ao que ela sempre foi: uma
   coluna. As gordurinhas de desktop saem. */
@media (max-width: 640px){
  :root{ --m-larg: 100% }
  .tb{ padding: 12px 16px }
  .tb::before{ font-size: 17px }
  .hero{ padding: 14px 16px 4px }
  .hero-empresa-band{ padding: 20px 20px 18px; border-radius: 16px }
  .hero-empresa-band .logo{ width: 38px; height: 38px; top: 18px; right: 18px }
  .search-wrap, .cats{ padding-left: 16px; padding-right: 16px }
  .prods{ padding: 6px 16px 140px; grid-template-columns: 1fr; gap: 12px }
  .cat-titulo, .sec, .sec-ttl, .cat-ttl{ padding: 16px 16px 8px }
  .cart-fab{ width: calc(100% - 28px) }
  .fechado-bar{ margin: 0 16px }
}


/* ── convite de instalar o app ──────────────────────────────────────────
   Além do modal (desligado em preparar.cjs, T12c), a tela tem uma FAIXA no
   rodapé que aparece sozinha depois de um tempo. Na prévia ela instalaria um
   cardápio sintético como aplicativo, apontando para 127.0.0.1 — e ainda por
   cima cobre a barra de aviso da prévia. */
#pwa-banner{ display: none !important }


/* ajuste-logo-cabecalho-360: a marca da loja nunca é cortada */
.hero-empresa-nome{ padding-right: 82px }
.hero-empresa-band .logo{
  width: 62px; height: 62px; top: 20px; right: 24px;
  border: 2px solid rgba(255,255,255,.28);
  border-radius: 16px;
}
.hero-empresa-band .logo img{
  width: 100%; height: 100%; object-fit: contain; padding: 4px;
  border-radius: 12px;
}
@media (max-width:640px){
  .hero-empresa-nome{ padding-right: 60px }
  .hero-empresa-band .logo{ width: 50px; height: 50px; top: 16px; right: 16px; border-radius: 14px }
  .hero-empresa-band .logo img{ padding: 3px; border-radius: 10px }
}

/* destaque-fotos-360: a foto é a primeira leitura do produto */
.prod-img{
  width: 96px; height: 96px; flex: 0 0 96px;
  border-radius: 16px; background: var(--m-claro);
  box-shadow: inset 0 0 0 1px rgba(8,32,40,.08);
}
.prod-img img{
  display: block; width: 100%; height: 100%;
  object-fit: cover; border-radius: 16px;
}
@media (max-width:640px){
  .prod-img{ width: 84px; height: 84px; flex-basis: 84px; border-radius: 14px }
  .prod-img img{ border-radius: 14px }
}

/* categorias-faixa-360: navegação compacta, sem empurrar o cardápio */
.cats{
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 12px;
  gap: 8px;
  overscroll-behavior-x: contain;
}
.chip-360{
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 8px 13px;
  font-size: 12.5px;
}
@media (max-width:640px){
  .cats{ gap: 7px; padding-left: 16px; padding-right: 16px }
  .chip-360{ padding: 8px 12px; font-size: 12px }
}

/* vitrine-duas-colunas-360: referência mobile com foto como protagonista */
@media (max-width:640px){
  .prods{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 6px 16px 140px }
  .prod{ flex-direction: column; gap: 0; padding: 0; overflow: hidden; min-width: 0; border-radius: 16px }
  .prod-img{ width: 100%; height: auto; aspect-ratio: 1 / 1; flex: 0 0 auto; border-radius: 0; font-size: 28px }
  .prod-img img{ width: 100%; height: 100%; object-fit: cover; border-radius: 0 }
  .prod-info{ width: 100%; padding: 11px 11px 13px; gap: 4px; box-sizing: border-box }
  .prod:has(.badge) .prod-info{ padding-right: 11px }
  .prod-nm{ font-size: 13px; line-height: 1.18; -webkit-line-clamp: 2 }
  .prod-desc{ font-size: 11.5px; line-height: 1.3; -webkit-line-clamp: 2 }
  .prod-pr{ font-size: 15px; padding-top: 5px }
  .prod-add{ width: 32px; height: 32px; font-size: 18px; margin-top: 6px; align-self: flex-end }
}

/* selo-loja-oculto-mobile-360: abaixo de 640px o cabeçalho fica só com a
   plataforma. O par nome+status da loja é um SELO RESUMIDO: com três botões
   ao lado ele cabia em ~70px e mostrava "PÉ..." em vez de PÉROLA, com o
   status quebrando em três linhas. O nome completo da loja está no herói,
   logo abaixo, em corpo grande — o selo era a versão pior da mesma
   informação. `display:none` e não `visibility`, para não guardar espaço.
   Fica no DOM: quem lê `#tb-nome` por texto continua lendo. */
@media (max-width:640px){
  .tb .info{ display: none }
  .tb::before{ margin-right: auto }   /* o logo empurra os botões para a direita */
}