/* GreenConnect — identidade AgTech premium: verde-escuro, dourado, cartões brancos arredondados, letra grande.
   Feito primeiro para o celular; notebook e computador alargam a mesma linguagem. */
:root {
  --verde-900: #0B3A2C; --verde-800: #0F4D3A; --verde-700: #176B4B; --verde-600: #237A50; --verde-500: #3E9A5E; --verde-400: #5BB873;
  --verde-300: #9EE2A8; --verde-200: #CBEBD3; --verde-100: #E6F4EA; --verde-50: #F1F7F2;
  --ouro: #E9C46A; --ouro-forte: #C9971E; --ouro-100: #FFF4D6; --ouro-200: #F6DC9A;
  --vermelho: #C0392B; --vermelho-100: #FBE4E1; --vermelho-texto: #8E2419;
  --azul: #2F6F8F; --azul-100: #E3EEF8; --roxo: #7B3FA0; --roxo-100: #EFE6F6;
  --fundo: #F3F6F1; --superficie: #FFFFFF; --linha: #DCE5DE; --linha-forte: #B9C9BF;
  --texto: #14302A; --suave: #5C6F68; --branco: #fff;
  --petroleo: var(--verde-900); --floresta: var(--verde-800); --verde: var(--verde-500); --verde-texto: var(--verde-700); --verde-claro: var(--verde-100); --menta: var(--verde-300);
  --sombra: 0 2px 6px rgba(11,58,44,.05), 0 10px 26px rgba(11,58,44,.08);
  --sombra-forte: 0 6px 16px rgba(11,58,44,.12), 0 18px 40px rgba(11,58,44,.14);
  --raio: 20px; --raio-m: 16px; --raio-p: 12px;
  --fonte: "Segoe UI", "Segoe UI Variable Text", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 400 17px/1.45 var(--fonte); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p { margin: 0; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--ouro-forte); outline-offset: 2px; }
#blazor-error-ui:not([hidden]) { position: fixed; inset: auto 0 0 0; background: var(--ouro-100); padding: 12px 16px; z-index: 50; }
.ic { width: 1em; height: 1em; flex: none; display: inline-block; vertical-align: -.15em; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- carregando ---------- */
.carregando { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; text-align: center; color: #BFD8CB; background: linear-gradient(170deg, #07261D 0%, #0B3A2C 55%, #124537 100%); }
.marca { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 34px; line-height: 1.1; color: #F4F8F2; letter-spacing: -.01em; }
.marca em { font-style: normal; color: var(--verde-300); }
.marca .folha { width: .95em; height: .95em; flex: none; }
.barra-carga { width: 180px; height: 5px; border-radius: 3px; background: #ffffff22; overflow: hidden; }
.barra-carga i { display: block; height: 100%; width: 40%; border-radius: 3px; background: var(--ouro); animation: vai 1.2s ease-in-out infinite; }
@keyframes vai { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }

/* ---------- topo (cabeçalho escuro com ondas) ---------- */
.topo { position: sticky; top: 0; z-index: 20; color: #fff; background: linear-gradient(110deg, #0B3A2C 0%, #0F4D3A 55%, #11573F 100%); padding-top: env(safe-area-inset-top); overflow: hidden; box-shadow: 0 4px 18px rgba(5,30,22,.25); }
.topo .ondas { position: absolute; inset: 0; pointer-events: none; opacity: .55; }
.topo .ondas path { fill: none; stroke: #7FC796; stroke-width: 1.4; }
.topo .ondas .cheia { fill: #ffffff10; stroke: none; }
.topo .fileira { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px 0; }
.topo .identidade { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 12px 0; }
.topo .marca { font-size: 23px; }
.topo .marca .folha { width: 28px; height: 28px; }
.topo .papel { display: inline-block; padding: 1px 14px; border-radius: 999px; background: var(--verde-500); color: #fff; font-size: 14px; font-weight: 600; letter-spacing: .01em; }
.topo .titulo-tela { display: none; flex: 1; min-width: 0; font-weight: 600; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pilula { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; padding: 0 14px; border-radius: 999px; border: 2px solid #ffffff; background: #fff; color: var(--verde-900); font-size: 17px; font-weight: 700; cursor: pointer; text-decoration: none; white-space: nowrap; line-height: 1; min-width: 0; }
.pilula .ic { font-size: 21px; }
@media (min-width: 400px) { .pilula { padding: 0 18px; font-size: 18px; gap: 8px; } }
.pilula.vazia { background: transparent; color: #fff; border-color: #ffffffcc; }
.pilula.vazia:hover { background: #ffffff1c; }
.pilula.nome { max-width: 150px; }
.pilula.nome span { overflow: hidden; text-overflow: ellipsis; }
.topo .acoes-topo { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 10px 10px 14px; position: relative; }
.topo .acoes-topo .pilula.nome { flex: 0 1 auto; }
.topo .acoes-topo .meio { display: none; gap: 8px; justify-content: center; flex: 1; min-width: 0; }

/* abas do consumidor: pílulas brancas dentro do cabeçalho */
.abas-consumidor { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 0 12px 14px; }
.abas-consumidor a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 6px 12px; border-radius: 999px; background: #fff; color: var(--verde-900); font-size: 16px; font-weight: 700; text-decoration: none; text-align: center; line-height: 1.15; border: 2px solid #fff; }
.abas-consumidor a .ic { font-size: 22px; color: var(--verde-700); }
.abas-consumidor a.ativo { background: linear-gradient(180deg, #D8F3DE, #BFE9C8); border-color: #BFE9C8; color: #0B3A2C; }
.abas-motoboy { grid-template-columns: repeat(3, 1fr); }
.abas-motoboy a { font-size: 15px; padding-inline: 6px; }
.faixa-simulacao { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; background: var(--ouro-100); color: #3A2A00; font-size: 15px; font-weight: 600; }
.faixa-simulacao .botao { min-height: 40px; font-size: 15px; }

/* ---------- estrutura ---------- */
.pagina { width: 100%; max-width: 860px; margin: 0 auto; padding: 18px 14px 48px; }
.pagina.larga { max-width: 1080px; }
.titulo-grande { font-size: 32px; line-height: 1.12; font-weight: 800; color: var(--verde-900); letter-spacing: -.01em; overflow-wrap: anywhere; }
.subtitulo { color: var(--suave); font-size: 17px; margin: 6px 0 16px; }
.secao { font-size: 14px; font-weight: 800; letter-spacing: .08em; color: var(--verde-700); margin: 24px 0 10px; text-transform: uppercase; }
.pergunta { font-size: 23px; line-height: 1.22; font-weight: 800; color: var(--verde-900); margin-bottom: 8px; letter-spacing: -.01em; }
.texto { margin-bottom: 8px; white-space: pre-line; font-size: 17px; }
.forte { font-weight: 700; }
.detalhe { font-size: 15px; color: var(--suave); margin-bottom: 6px; line-height: 1.4; }
.rotulo { display: block; font-size: 17px; font-weight: 700; margin: 10px 0 6px; color: var(--texto); }
.rotulo-peq { font-size: 13px; font-weight: 800; letter-spacing: .08em; color: var(--verde-700); margin: 10px 0 3px; text-transform: uppercase; }
.cartao { background: var(--superficie); border: 1px solid #E6EDE8; border-radius: var(--raio); padding: 18px; margin-bottom: 14px; box-shadow: var(--sombra); }
.cartao.info { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: start; }
.cartao.info .disco-info { width: 44px; height: 44px; border-radius: 50%; background: var(--verde-100); color: var(--verde-700); display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 800; }
.cartao.info .pergunta { margin: 8px 0 0; }
.cartao.info > .texto, .cartao.info > details { grid-column: 1 / -1; margin-bottom: 0; }
.aviso { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; border: 2px solid; border-radius: var(--raio-m); padding: 14px 16px; margin-bottom: 12px; font-weight: 700; font-size: 17px; line-height: 1.3; }
.aviso .ic { font-size: 40px; padding-right: 14px; border-right: 2px solid currentColor; opacity: .95; }
.aviso.verde { background: #E8F5EC; border-color: var(--verde-500); color: var(--verde-900); }
.aviso.verde .ic { color: var(--verde-500); border-right-color: #BFD9C6; }
.aviso.ambar { background: var(--ouro-100); border-color: var(--ouro); color: #3A2A00; }
.aviso.ambar .ic { color: #E0A400; border-right-color: #EFD79A; }
.aviso.vermelho { background: var(--vermelho-100); border-color: #E09A92; color: var(--vermelho-texto); }
.aviso.vermelho .ic { color: var(--vermelho); border-right-color: #EFBDB7; }
.aviso.grande { font-size: 20px; }
.aviso.sem-icone { grid-template-columns: 1fr; }
.erro { color: #A61B1B; font-weight: 700; font-size: 16px; margin: 6px 0 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 13px; border-radius: 999px; font-size: 14px; font-weight: 700; white-space: normal; line-height: 1.2; }
.chip::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: none; }
.chip.sem-ponto::before, .chip.ouro::before, .chip.roxo::before, .chip.azul::before, .chip.cinza::before { display: none; }
.chip.verde { background: var(--verde-100); color: var(--verde-700); } .chip.ambar { background: var(--ouro-100); color: #8A5A00; } .chip.vermelho { background: var(--vermelho-100); color: #9B2C2C; }
.chip.azul { background: var(--azul-100); color: #1B3F7A; } .chip.roxo { background: var(--roxo-100); color: #5A2D7A; } .chip.ouro { background: #F6C445; color: #3A2A00; letter-spacing: .04em; } .chip.cinza { background: #ECECEC; color: #555; }
.chip.grande { font-size: 16px; padding: 7px 16px; }
.resumo-estoque { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 10px 0; }
.resumo-estoque .chip { justify-content: flex-start; font-size: 16px; padding: 9px 14px; border-radius: 999px; }
.linha-info { display: flex; align-items: flex-start; gap: 10px; color: var(--suave); font-size: 15px; margin: 8px 0 14px; }
.linha-info .disco-info { width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--verde-100); color: var(--verde-700); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 17px; }
.situacao { display: flex; align-items: center; gap: 8px; font-size: 17px; color: var(--suave); margin: 6px 0 16px; }
.situacao i { width: 14px; height: 14px; border-radius: 50%; background: var(--verde-500); flex: none; } .situacao i.pendente { background: var(--ouro-forte); }

/* ---------- botões e campos ---------- */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-align: center; min-height: 52px; padding: 10px 22px; border-radius: 999px; border: 2px solid var(--verde-800); background: var(--verde-800); color: #fff; font-size: 18px; font-weight: 700; cursor: pointer; text-decoration: none; line-height: 1.2; transition: background .15s, transform .1s; }
.botao .ic { font-size: 22px; }
.botao:hover { background: var(--verde-700); border-color: var(--verde-700); }
.botao:active { transform: scale(.98); }
.botao.contorno { background: #fff; color: var(--verde-900); border-color: var(--verde-800); }
.botao.contorno:hover { background: var(--verde-50); }
.botao.suave { background: var(--verde-100); color: var(--verde-900); border-color: var(--verde-100); }
.botao.verde { background: var(--verde-500); border-color: var(--verde-500); }
.botao.ouro { background: var(--ouro); border-color: var(--ouro); color: #3A2A00; }
.botao.perigo { background: #fff; color: var(--vermelho-texto); border-color: #E6B5AF; }
.botao:disabled { opacity: .45; cursor: default; transform: none; }
.botao.mini { min-height: 44px; padding: 6px 16px; font-size: 16px; }
.botao.inteiro { width: 100%; }
.acoes { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
.acoes.par { display: grid; grid-template-columns: repeat(2, 1fr); }
.acoes.par .botao { width: 100%; padding-inline: 10px; }
@media (max-width: 559px) { .acoes.empilha { flex-direction: column; } .acoes.empilha .botao { width: 100%; } .botao.longo { width: 100%; } }
.campo { width: 100%; min-height: 54px; padding: 12px 16px; border: 2px solid var(--linha-forte); border-radius: var(--raio-m); background: #fff; font-size: 18px; margin-bottom: 12px; color: var(--texto); }
select.campo { appearance: none; -webkit-appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F4D3A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 22px; padding-right: 46px; }
textarea.campo { min-height: 96px; resize: vertical; }
.campo:focus { outline: 3px solid var(--verde-300); outline-offset: 0; border-color: var(--verde-500); }
.busca { display: flex; align-items: center; gap: 8px; padding: 0 8px 0 16px; background: #fff; border: 2px solid var(--linha-forte); border-radius: 999px; }
.busca .ic { font-size: 22px; color: var(--verde-700); }
.busca input { flex: 1; min-width: 0; min-height: 50px; border: 0; outline: 0; background: transparent; font-size: 17px; }
.opcao-check { display: flex; align-items: flex-start; gap: 12px; min-height: 48px; padding: 10px 0; cursor: pointer; font-size: 17px; }
.opcao-check input { width: 24px; height: 24px; flex: none; accent-color: var(--verde-600); margin: 1px 0 0; }
.opcao { display: block; width: 100%; text-align: left; padding: 14px 16px; margin-bottom: 10px; border: 2px solid var(--linha); border-radius: var(--raio-m); background: #fff; cursor: pointer; box-shadow: var(--sombra); }
.opcao b { font-size: 18px; }
.opcao.marcada { background: var(--verde-100); border-color: var(--verde-500); }
.opcao small { display: block; font-size: 15px; color: var(--suave); margin: 3px 0 0 22px; }
details.recolhe > summary { min-height: 48px; display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 17px; cursor: pointer; color: var(--verde-700); padding: 6px 0; list-style: none; }
details.recolhe > summary::-webkit-details-marker { display: none; }
details.recolhe > summary::before { content: ""; width: 10px; height: 10px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(-45deg); margin: 0 6px 0 2px; transition: transform .15s; flex: none; }
details.recolhe[open] > summary::before { transform: rotate(45deg); }
details.recolhe > summary[style*="display:block"]::before { display: none; }
details.recolhe > summary[style*="display:block"] { display: block; color: inherit; }
details.recolhe.cartao > summary { margin: -4px 0; }
.link { background: none; border: 0; padding: 8px 0; min-height: 44px; font-weight: 700; font-size: 17px; color: var(--verde-700); cursor: pointer; text-decoration: underline; }

/* ---------- entrada ---------- */
.entrada { position: relative; min-height: 100dvh; padding: 36px 16px 44px; color: #fff; overflow: hidden; background: linear-gradient(175deg, #06201A 0%, #0B3A2C 45%, #0F4D3A 100%); }
.entrada .campo-foto { position: absolute; left: 0; right: 0; bottom: 0; height: 42vh; min-height: 260px; background: url("Assets/exemplos/paisagem.jpg") center bottom / cover no-repeat; pointer-events: none; }
.entrada .campo-foto::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #0B3A2C 0%, #0B3A2Ccc 35%, #0B3A2C22 100%); }
.entrada .ondas { position: absolute; top: 0; left: 0; width: 100%; height: 260px; opacity: .5; pointer-events: none; }
.entrada .ondas path { fill: none; stroke: #7FC796; stroke-width: 1.5; }
.entrada .interno { position: relative; max-width: 980px; margin: 0 auto; }
.entrada .marca { display: flex; justify-content: center; font-size: clamp(34px, 10.5vw, 48px); white-space: nowrap; }
.entrada .marca .folha { width: 1.05em; height: 1.05em; }
.entrada .lema { text-align: center; color: #E6F2EA; font-size: 19px; line-height: 1.3; margin: 8px auto 14px; max-width: 400px; }
.entrada .selo-demo { display: flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%; margin: 0 auto 30px; padding: 6px 14px; border-radius: 999px; background: #ffffff14; border: 1.5px solid #E9C46A99; color: var(--ouro); font-size: 13px; font-weight: 700; letter-spacing: .02em; text-align: center; white-space: nowrap; }
.entrada h2 { text-align: center; font-size: 30px; font-weight: 800; margin-bottom: 18px; letter-spacing: -.01em; }
.perfis { display: grid; gap: 14px; }
.perfil { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 16px 14px; border-radius: 22px; border: 2px solid transparent; background: #F7FAF6; color: #10372C; cursor: pointer; box-shadow: var(--sombra-forte); transition: transform .12s; }
.perfil:hover { transform: translateY(-2px); }
.perfil .quadro { width: 68px; height: 68px; border-radius: 17px; display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: inset 0 -4px 10px rgba(0,0,0,.18); }
.perfil .quadro .ic { font-size: 36px; }
.perfil .meio { padding-left: 14px; border-left: 2px solid #D5E2DA; min-width: 0; }
.perfil b { display: block; font-size: 24px; line-height: 1.1; font-weight: 800; margin-bottom: 4px; }
.perfil span { font-size: 15.5px; color: #4C6559; line-height: 1.3; display: block; }
.perfil ul { display: none; margin: 8px 0 0; padding-left: 18px; font-size: 14px; color: #35564A; }
.perfil .seta { width: 46px; height: 46px; border-radius: 13px; background: var(--verde-800); color: #fff; display: flex; align-items: center; justify-content: center; }
.perfil .seta .ic { font-size: 24px; }
@media (min-width: 400px) { .perfil b { font-size: 27px; } .perfil span { font-size: 16.5px; } .perfil .quadro { width: 76px; height: 76px; } }
.login { max-width: 480px; margin: 0 auto; padding: 22px; border-radius: 22px; background: #F7FAF6; color: #10372C; border: 2px solid var(--verde-500); box-shadow: var(--sombra-forte); }
.login h3 { font-size: 24px; margin-bottom: 14px; font-weight: 800; }
.demo-contas { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 14px; }
.entrada .rodape-nota { position: relative; color: #CFE3D6; text-align: center; margin-top: 22px; font-size: 15px; }
.entrada .rodape-nota .link { color: var(--ouro); display: block; margin: 4px auto 0; }

/* ---------- mapa ---------- */
.mapa { position: relative; border-radius: var(--raio); overflow: hidden; box-shadow: var(--sombra); background: #dfe7df; }
.mapa img { width: 100%; height: auto; }
.pino { position: absolute; transform: translate(-50%, -100%); display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; min-height: 42px; white-space: nowrap; border: 2px solid #fff; border-radius: 999px; background: var(--verde-800); color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.35); animation: pulsa 2s ease-in-out infinite; }
.pino .ic { font-size: 20px; color: var(--ouro); }
@keyframes pulsa { 50% { box-shadow: 0 0 0 9px #3E9A5E33, 0 4px 14px rgba(0,0,0,.35); } }
@media (prefers-reduced-motion: reduce) { .pino, .barra-carga i, .rota-anim { animation: none; } }
/* fora das feiras o mapa fica só um pouco mais apagado e acinzentado: claro de ver, com as feiras em destaque */
.escurece { position: absolute; inset: 0; background: rgba(5, 25, 20, .2); -webkit-backdrop-filter: grayscale(.45) brightness(.97); backdrop-filter: grayscale(.45) brightness(.97); pointer-events: none; }
.pino .nome-curto { display: none; }
@media (max-width: 559px) {
  /* celular: o mesmo ponto com o nome, só que pequeno, para não cobrir o mapa */
  .mapa .pino { gap: 3px; padding: 2px 8px 2px 5px; font-size: 10.5px; line-height: 1.2; min-height: 0; border-width: 1.5px; box-shadow: 0 2px 5px rgba(0,0,0,.3); }
  .mapa .pino .ic { font-size: 12px; }
  .mapa .pino .nome-longo { display: none; }
  .mapa .pino .nome-curto { display: inline; }
  /* área de toque continua confortável, sem ocupar o mapa */
  .mapa .pino::after { content: ""; position: absolute; inset: -8px; }
}
.lista-cartoes { display: grid; gap: 12px; margin-top: 14px; }
.cartao-link { display: block; width: 100%; text-align: left; background: #fff; border: 1px solid #E6EDE8; border-radius: var(--raio); padding: 16px; box-shadow: var(--sombra); cursor: pointer; text-decoration: none; color: inherit; }
.cartao-link.mudo { box-shadow: none; opacity: .75; cursor: default; background: #F1F4F0; }
.cartao-link .ir { display: flex; align-items: center; gap: 6px; color: var(--verde-700); font-weight: 700; margin-top: 6px; }
.fatos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 10px 0; }
.fatos div { background: var(--verde-100); border-radius: var(--raio-p); padding: 8px 12px; font-size: 14px; color: var(--suave); }
.fatos b { display: block; color: var(--verde-900); font-size: 17px; }

/* ---------- cena ---------- */
.cena { position: relative; aspect-ratio: 1600 / 947; border-radius: var(--raio); overflow: hidden; background: #0B2F25; box-shadow: var(--sombra); }
.cena iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cena .sobre { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 10px; text-align: center; color: #fff; background: #07221Baa; font-weight: 600; font-size: 15px; }
.cena.cheia { position: fixed; inset: 0; z-index: 40; border-radius: 0; aspect-ratio: auto; background: #000; }
.cena .fechar { position: absolute; top: 10px; right: 10px; z-index: 3; }
.cena .ampliar { position: absolute; right: 8px; bottom: 8px; z-index: 3; }

/* ---------- barraca e produtos ---------- */
.linha-barraca { display: flex; align-items: center; gap: 14px; }
.avatar { flex: none; border-radius: 50%; object-fit: cover; border: 3px solid var(--verde-500); background: var(--verde-100); display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--verde-700); overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.nome-barraca { font-size: 23px; font-weight: 800; color: var(--verde-900); line-height: 1.15; letter-spacing: -.01em; }
.foto-barraca { width: 100%; height: auto; border-radius: var(--raio-m); }
.cabeca-barraca { position: relative; overflow: hidden; }
.cabeca-barraca .campo-fundo { position: absolute; right: -10px; bottom: -6px; width: 170px; height: 90px; opacity: .9; pointer-events: none; }
.medalhas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.medalha { width: 34px; height: 44px; flex: none; }
.medalha.grande { width: 60px; height: 78px; }
.medalha.apagada { opacity: .35; filter: grayscale(.6); }
.selo { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; width: 28px; height: 28px; font-size: 15px; color: #fff; background: var(--verde-500); flex: none; }
.selo.grande { width: 60px; height: 60px; font-size: 30px; }
.selo.apagado { opacity: .4; }
.selo.azul { background: #2F6F8F; } .selo.amarelo { background: #C9971E; } .selo.laranja { background: #E07B2D; } .selo.roxo { background: #7B3FA0; }
.tile { flex: none; display: flex; align-items: center; justify-content: center; border-radius: var(--raio-m); background: var(--verde-100); overflow: hidden; }
.tile img { width: 100%; height: 100%; object-fit: cover; }
.tile.baixo { background: #FBEFC8; } .tile.esgotado { background: #F3DEDE; filter: grayscale(.5); }
.produto { display: grid; grid-template-columns: auto 1fr; gap: 12px 14px; padding: 14px 0; border-top: 1px solid #EDF2EE; align-items: center; }
.produto:first-of-type { border-top: 0; }
.produto .nome { font-size: 21px; font-weight: 800; line-height: 1.2; color: var(--verde-900); overflow-wrap: anywhere; letter-spacing: -.01em; }
.produto .preco { font-size: 19px; margin-top: 2px; }
.produto .informou { display: flex; align-items: flex-start; gap: 6px; color: var(--suave); font-size: 15px; margin-top: 4px; line-height: 1.3; }
.produto .informou .ic { font-size: 18px; margin-top: 1px; }
.preco-antigo { text-decoration: line-through; color: var(--suave); font-weight: 500; }
.preco-novo { font-weight: 800; color: var(--verde-900); }
.contador { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.contador b { min-width: 36px; text-align: center; font-size: 26px; color: var(--verde-900); }
.sinal { width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--linha-forte); background: #fff; font-size: 26px; line-height: 1; color: var(--verde-900); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(11,58,44,.08); }
.sinal .ic { font-size: 26px; }
.sinal.cheio { background: var(--verde-500); color: #fff; border-color: var(--verde-500); }
.sinal:disabled { opacity: .35; cursor: default; }
/* cartões de produto em lista (consumidor) */
.lista-produtos { display: grid; gap: 10px; }
.cartao-produto { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; background: #fff; border-radius: var(--raio); padding: 14px; box-shadow: var(--sombra); border: 1px solid #E6EDE8; }
.cartao-produto .tile { width: 84px; height: 84px; font-size: 42px; }
.cartao-produto.esgotado { opacity: .85; }
.cartao-produto .contador { grid-column: auto; gap: 8px; }
.cartao-produto .contador b { min-width: 30px; font-size: 24px; }
.cartao-produto .sinal { width: 48px; height: 48px; }
/* cartão de produto do feirante (estoque) */
.cartao-estoque { background: #fff; border-radius: var(--raio); padding: 16px; margin-bottom: 14px; box-shadow: var(--sombra); border: 1px solid #E6EDE8; }
.cartao-estoque .topo-produto { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.cartao-estoque .tile { width: 84px !important; height: 84px !important; font-size: 44px !important; }
.cartao-estoque .cabeca { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.cartao-estoque .cabeca .chip { font-size: 13px; padding: 4px 10px; }
.cartao-estoque .nome { font-size: 22px; font-weight: 800; line-height: 1.15; color: var(--verde-900); letter-spacing: -.01em; }
.cartao-estoque .quantia { font-size: 18px; margin: 6px 0 2px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px; }
.cartao-estoque .quantia b { font-size: 21px; }
.cartao-estoque .detalhe { font-size: 14px; }
.cartao-estoque .mais { margin-top: 12px; border-top: 1px solid #EDF2EE; padding-top: 4px; }

/* ---------- carrinho ---------- */
.barra-carrinho { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; padding-bottom: max(12px, env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--linha); box-shadow: 0 -8px 24px rgba(11,58,44,.14); border-radius: 22px 22px 0 0; }
.barra-carrinho .resumo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.barra-carrinho .resumo .ic { font-size: 30px; color: var(--verde-900); flex: none; }
.barra-carrinho b { display: block; font-size: 19px; color: var(--verde-900); }
.barra-carrinho small { font-size: 16px; color: var(--suave); display: block; }
.barra-carrinho .botao { flex: none; }
.com-barra { padding-bottom: 110px; }
.resumo-linha { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: 17px; }
.resumo-linha.total { font-size: 21px; font-weight: 800; color: var(--verde-900); border-top: 1px solid var(--linha); padding-top: 8px; margin-top: 4px; }
.colhido-grade { display: block; }
.codigo-pedido { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 22px; border-radius: var(--raio-m); background: var(--verde-900); color: #fff; }
.codigo-pedido small { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--verde-300); font-weight: 700; }
.codigo-pedido b { font-size: 34px; letter-spacing: .22em; font-variant-numeric: tabular-nums; }
.estrelas { display: flex; gap: 6px; margin: 6px 0 10px; }
.estrelas button { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--linha); background: #fff; font-size: 26px; color: #C9D3CD; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.estrelas button.acesa { color: var(--ouro-forte); border-color: var(--ouro); background: var(--ouro-100); }
.gorjetas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 8px 0 10px; }
.gorjetas button { min-height: 50px; border-radius: 999px; border: 2px solid var(--linha-forte); background: #fff; font-size: 16px; font-weight: 700; color: var(--verde-900); cursor: pointer; white-space: nowrap; padding: 0 4px; }
.gorjetas button.marcada { background: var(--verde-800); color: #fff; border-color: var(--verde-800); }
.etapas-entrega { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 10px 0; }
.etapas-entrega div { text-align: center; font-size: 14px; color: var(--suave); font-weight: 600; }
.etapas-entrega i { display: block; height: 8px; border-radius: 4px; background: var(--linha); margin-bottom: 6px; }
.etapas-entrega .feita i { background: var(--verde-500); } .etapas-entrega .feita { color: var(--verde-700); }

/* ---------- área do feirante ---------- */
.cabeca-feirante { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cabeca-feirante .titulo-grande { font-size: clamp(26px, 7.4vw, 34px); min-width: 0; }
.abas-feirante { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 18px; }
.aba-feirante { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 150px; padding: 14px 10px; text-align: center; border-radius: 22px; border: 1px solid #E6EDE8; background: #fff; color: var(--verde-900); cursor: pointer; text-decoration: none; box-shadow: var(--sombra); transition: transform .12s; }
.aba-feirante:hover { transform: translateY(-2px); }
.aba-feirante .ic { font-size: 44px; color: var(--verde-800); margin-bottom: 4px; }
.aba-feirante b { font-size: 25px; line-height: 1.1; font-weight: 800; letter-spacing: -.01em; }
.aba-feirante span { font-size: 16px; line-height: 1.2; color: var(--texto); margin-top: 3px; }
.aba-feirante.ativa { background: var(--verde-800); border-color: var(--verde-800); color: #fff; box-shadow: var(--sombra-forte); }
.aba-feirante.ativa .ic, .aba-feirante.ativa span { color: #fff; }
.passos-compacto { margin-bottom: 14px; }
.passos-compacto p { font-size: 18px; color: var(--verde-900); margin-bottom: 8px; }
.passos-compacto .seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 5px; }
.passos-compacto .seg i { height: 8px; border-radius: 4px; background: var(--linha-forte); }
.passos-compacto .seg i.feito { background: var(--verde-500); }
.passos-completo { display: none; grid-auto-flow: column; grid-auto-columns: 1fr; margin-bottom: 16px; text-align: center; }
.passos-completo i { display: flex; align-items: center; justify-content: center; margin: 0 auto 5px; width: 34px; height: 34px; border-radius: 50%; font-style: normal; font-weight: 800; font-size: 15px; border: 2px solid var(--linha-forte); color: var(--suave); background: #fff; }
.passos-completo span { font-size: 13.5px; color: var(--suave); }
.passos-completo .feito i { background: var(--verde-500); border-color: var(--verde-500); color: #fff; }
.passos-completo .atual i { background: var(--verde-800); border-color: var(--verde-800); color: #fff; }
.passos-completo .atual span { color: var(--verde-800); font-weight: 800; }
.grade-selos { display: grid; gap: 12px; }
.cartao-selo { text-align: center; }
.cartao-selo .medalha { margin: 0 auto 8px; }
.grade-modelos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.cartao-modelo { padding: 8px; border: 2px solid var(--linha); border-radius: var(--raio-m); background: #fff; cursor: pointer; text-align: left; }
.cartao-modelo.em-uso { border-color: var(--verde-500); background: var(--verde-50); }
.cartao-modelo img { aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; width: 100%; background: #EFEBDD; }
.cartao-modelo b { display: block; font-size: 15px; margin-top: 6px; line-height: 1.2; }
.modelo-atual { display: flex; gap: 14px; align-items: center; }
.modelo-atual img { width: 120px; height: 90px; object-fit: cover; border-radius: 12px; flex: none; background: #EFEBDD; }
.indicadores { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.indicador { padding: 14px; border-radius: var(--raio); background: #fff; border: 1px solid #E6EDE8; cursor: pointer; text-align: left; box-shadow: var(--sombra); text-decoration: none; color: inherit; }
.indicador.ativo { border: 2px solid var(--verde-500); }
.indicador b { display: block; font-size: 36px; line-height: 1.1; color: var(--verde-900); font-weight: 800; }
.indicador span { font-size: 15px; font-weight: 700; line-height: 1.2; display: block; color: var(--suave); margin-top: 4px; }
.abas-admin { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; margin: 0 -14px 10px; padding-inline: 14px; scrollbar-width: none; }
.abas-admin .botao { flex: none; }

/* ---------- motoboy ---------- */
.painel-rota { background: var(--verde-900); color: #fff; border-radius: var(--raio); padding: 18px; margin-bottom: 14px; box-shadow: var(--sombra-forte); position: relative; overflow: hidden; }
.painel-rota .rotulo-peq { color: var(--verde-300); }
.painel-rota h2 { font-size: 26px; font-weight: 800; line-height: 1.15; }
.painel-rota .numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.painel-rota .numeros div { background: #ffffff14; border-radius: var(--raio-p); padding: 10px 8px; text-align: center; }
.painel-rota .numeros b { display: block; font-size: 24px; line-height: 1.1; color: #fff; }
.painel-rota h2, .painel-rota b { color: #fff; }
.painel-rota .numeros span { font-size: 13px; color: #CFE3D6; }
.painel-rota .ondas { position: absolute; right: -40px; top: -30px; width: 260px; height: 160px; opacity: .35; pointer-events: none; }
.painel-rota .ondas path { fill: none; stroke: #7FC796; stroke-width: 1.5; }
.parada { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; background: #fff; border-radius: var(--raio); padding: 14px 16px; margin-bottom: 10px; box-shadow: var(--sombra); border: 1px solid #E6EDE8; }
.parada .numero { width: 46px; height: 46px; border-radius: 50%; background: var(--verde-800); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; }
.parada.feita .numero { background: var(--verde-500); }
.parada .nome { font-size: 20px; font-weight: 800; color: var(--verde-900); line-height: 1.15; }
.parada .detalhe { margin: 2px 0 0; }
.parada .itens { grid-column: 2 / -1; font-size: 16px; color: var(--texto); }
.parada .itens div { padding: 2px 0; }
.rota-mapa { position: relative; border-radius: var(--raio-m); background: linear-gradient(180deg, #EEF6F0, #DDEDE2); overflow: hidden; margin: 12px 0 6px; border: 1px solid #D5E6DA; }
.rota-mapa svg { display: block; width: 100%; height: auto; }
.rota-mapa .ruas path { stroke: #fff; stroke-width: 9; fill: none; opacity: .85; }
.rota-mapa .quadras rect { fill: #CFE4D5; opacity: .55; }
.rota-mapa .contorno { fill: none; stroke: #fff; stroke-width: 8; stroke-linecap: round; }
.rota-mapa .trecho { fill: none; stroke-width: 4; stroke-linecap: round; }
.rota-mapa .trecho.feito { stroke: var(--verde-500); }
.rota-mapa .trecho.falta { stroke: var(--verde-800); stroke-dasharray: 7 6; animation: anda 1.4s linear infinite; }
@keyframes anda { to { stroke-dashoffset: -26; } }
@media (prefers-reduced-motion: reduce) { .rota-mapa .trecho.falta { animation: none; } }
.rota-mapa .feira rect { fill: var(--verde-900); stroke: var(--ouro); stroke-width: 2; }
.rota-mapa text { font-family: var(--fonte); text-anchor: middle; }
.rota-mapa .feira .t1 { font-size: 9px; font-weight: 800; letter-spacing: .12em; fill: var(--ouro); }
.rota-mapa .feira .t2 { font-size: 12px; font-weight: 700; fill: #fff; }
.rota-mapa .alfinete { fill: #fff; stroke: var(--verde-800); stroke-width: 2.5; }
.rota-mapa .casa .num { font-size: 12px; font-weight: 800; fill: var(--verde-900); }
.rota-mapa .casa.feita .alfinete { fill: var(--verde-500); stroke: var(--verde-500); }
.rota-mapa .casa.feita .num { fill: #fff; }
.rota-mapa .cliente { font-size: 11px; font-weight: 700; fill: var(--verde-900); paint-order: stroke; stroke: #fff; stroke-width: 3.5px; stroke-linejoin: round; }
.legenda-rota { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 14px; color: var(--suave); margin: 0 0 14px; }
.legenda-rota i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.legenda-rota .leg-feira { background: var(--verde-900); border: 2px solid var(--ouro); border-radius: 4px; }
.legenda-rota .leg-casa { background: #fff; border: 2.5px solid var(--verde-800); }
.legenda-rota .leg-feita { background: var(--verde-500); }
.legenda-rota .km { margin-left: auto; font-weight: 700; color: var(--verde-800); }
.campo-codigo { font-size: 30px; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; max-width: 240px; }
.cartao-gorjeta { background: linear-gradient(135deg, #FFF4D6, #FBE7B0); border: 2px solid var(--ouro); border-radius: var(--raio); padding: 16px 18px; margin-bottom: 14px; display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; color: #3A2A00; }
.cartao-gorjeta .ic { font-size: 44px; color: var(--ouro-forte); }
.cartao-gorjeta b { font-size: 30px; display: block; line-height: 1.1; }
.cartao-gorjeta span { font-size: 15px; }
.cartao-gorjeta .lista { grid-column: 1 / -1; border-top: 1px solid #E9C46A88; padding-top: 8px; font-size: 15px; }
.cartao-gorjeta .lista div { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; }

/* ---------- demonstração da entrega ---------- */
.demo-passos { display: grid; gap: 10px; }
.demo-passo { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; background: #fff; border-radius: var(--raio); padding: 16px; border: 1px solid #E6EDE8; box-shadow: var(--sombra); opacity: .55; }
.demo-passo.ativa, .demo-passo.feita { opacity: 1; }
.demo-passo.ativa { border: 2px solid var(--verde-500); }
.demo-passo .bola { width: 46px; height: 46px; border-radius: 50%; background: var(--verde-100); color: var(--verde-800); display: flex; align-items: center; justify-content: center; }
.demo-passo .bola .ic { font-size: 26px; }
.demo-passo.feita .bola { background: var(--verde-500); color: #fff; }
.demo-passo.ativa .bola { background: var(--verde-800); color: #fff; }
.demo-passo b { font-size: 20px; display: block; color: var(--verde-900); line-height: 1.15; }
.demo-passo p { font-size: 16px; margin-top: 4px; }
.demo-passo .extra { grid-column: 1 / -1; }

/* ---------- notebook e computador ---------- */
@media (min-width: 560px) {
  .passos-completo { display: grid; } .passos-compacto { display: none; }
  .perfis { grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 980px; margin: 0 auto; }
  .perfil ul { display: block; }
  .grade-selos { grid-template-columns: repeat(2, 1fr); }
  .grade-modelos { grid-template-columns: repeat(3, 1fr); }
  .indicadores { grid-template-columns: repeat(3, 1fr); }
  .fatos { grid-template-columns: repeat(4, 1fr); }
  .lista-cartoes.duas { grid-template-columns: repeat(2, 1fr); }
  .pagina { padding: 24px 22px 56px; }
  .abas-admin { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }
  .resumo-estoque { grid-template-columns: repeat(4, 1fr); }
  .resumo-estoque .chip { justify-content: center; }
}
@media (min-width: 760px) {
  .topo .identidade { display: none; }
  .topo .acoes-topo { padding: 12px 22px; gap: 14px; }
  .topo .acoes-topo .meio { display: flex; justify-content: flex-start; align-items: center; gap: 14px; }
  .topo .acoes-topo .meio .marca { font-size: 24px; }
  .topo .acoes-topo .meio .marca .folha { width: 28px; height: 28px; }
  .topo .titulo-tela { display: block; text-align: center; }
  .abas-consumidor { display: flex; justify-content: center; gap: 8px; padding: 0 22px 12px; }
  .abas-consumidor a { min-height: 44px; padding: 0 18px; font-size: 15px; }
  .abas-feirante { grid-template-columns: repeat(4, 1fr); }
  .aba-feirante { min-height: 160px; }
  .cabeca-feirante .titulo-grande { font-size: 36px; }
  .titulo-grande { font-size: 36px; }
  .indicadores { grid-template-columns: repeat(5, 1fr); }
  .grade-modelos { grid-template-columns: repeat(4, 1fr); }
  .grade-selos { grid-template-columns: repeat(3, 1fr); }
  .contador { grid-column: auto; justify-content: flex-end; }
  .produto { grid-template-columns: auto 1fr auto; }
  .lista-produtos { grid-template-columns: repeat(2, 1fr); }
  .demo-passos { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .colhido-grade { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 22px; align-items: start; }
  .colhido-lateral { position: sticky; top: 90px; }
  .barra-carrinho { display: none; }
  .com-barra { padding-bottom: 56px; }
  .lista-produtos { grid-template-columns: 1fr; }
}

/* ---------- feira: o mapa fica aberto e a barraca abre no painel ao lado ---------- */
.feira-pagina { max-width: 1500px; }
.feira-cabeca { margin-bottom: 10px; }
.feira-cabeca .titulo-grande { font-size: 26px; }
.feira-painel .produto { grid-template-columns: auto 1fr; }
@media (max-width: 959px) and (min-height: 600px) {
  .feira-mapa { display: contents; }
  .feira-cena { position: sticky; top: 0; z-index: 10; padding: 6px 0; background: var(--fundo); }
  .feira-cena:has(.cena.cheia) { z-index: 30; }
}
@media (min-width: 960px) {
  .feira-grade { display: grid; grid-template-columns: minmax(0, 1fr) 430px; gap: 22px; align-items: start; }
  .feira-mapa { position: sticky; top: 90px; }
  .feira-painel { position: sticky; top: 90px; max-height: calc(100dvh - 110px); overflow-y: auto; padding: 2px 6px 16px 2px; }
}

/* ---------- Colhido: primeiro os vendedores; cada um abre os próprios produtos, em cartões compactos ---------- */
.vendedor-colhido { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer; margin-bottom: 10px; padding: 12px 14px; font: inherit; color: inherit; }
.vendedor-colhido .texto-vendedor { display: flex; flex-direction: column; min-width: 0; }
.vendedor-colhido .texto-vendedor .detalhe { margin: 1px 0 0; }
.vendedor-colhido .resumo-vendedor { font-size: 14.5px; font-weight: 700; color: var(--verde-700); margin-top: 2px; }
.vendedor-colhido .medalhas { margin-top: 4px; }
.vendedor-colhido .seta-vendedor { font-size: 20px; color: var(--verde-700); transition: transform .2s; }
.vendedor-colhido.aberta { border: 2px solid var(--verde-500); margin-bottom: 8px; }
.vendedor-colhido.aberta .seta-vendedor { transform: rotate(90deg); }
.vendedor-colhido .no-pedido { font-size: 12.5px; padding: 3px 9px; }
.lista-produtos.compacta { gap: 8px; margin: 0 0 16px 10px; padding-left: 10px; border-left: 3px solid #D5E6DA; }
.lista-produtos.compacta .cartao-produto { grid-template-columns: auto 1fr; gap: 6px 12px; padding: 10px 12px; box-shadow: none; }
.lista-produtos.compacta .cartao-produto .tile { width: 56px; height: 56px; font-size: 28px; }
.lista-produtos.compacta .nome { font-size: 16.5px; line-height: 1.25; }
.lista-produtos.compacta .preco { font-size: 15.5px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.lista-produtos.compacta .preco .chip { font-size: 12px; padding: 2px 8px; }
.lista-produtos.compacta .informou { font-size: 13.5px; color: var(--suave); margin-top: 2px; }
.lista-produtos.compacta .contador { grid-column: 1 / -1; justify-content: flex-end; gap: 8px; }
.lista-produtos.compacta .contador b { font-size: 21px; min-width: 28px; }
.lista-produtos.compacta .sinal { width: 42px; height: 42px; }
@media (min-width: 760px) {
  .lista-produtos.compacta .cartao-produto { grid-template-columns: auto 1fr auto; }
  .lista-produtos.compacta .contador { grid-column: auto; }
}
@media (max-width: 420px) { .vendedor-colhido { grid-template-columns: auto 1fr auto; } .vendedor-colhido .no-pedido { grid-column: 2; justify-self: start; } }

/* ---------- recurso Premium (Destaques do feirante) ---------- */
.premium { display: flex; gap: 12px; align-items: flex-start; background: linear-gradient(135deg, #FFF7DD, #FBE9B5); border: 1.5px solid var(--ouro); border-radius: var(--raio-m); padding: 12px 14px; margin: 4px 0 12px; color: #3A2A00; }
.premium > div { display: flex; flex-direction: column; gap: 2px; font-size: 15.5px; line-height: 1.35; }
.premium span:not(.selo-premium) { color: #6B5310; }
.selo-premium { flex: none; display: inline-flex; align-items: center; gap: 4px; background: var(--verde-900); color: var(--ouro); font-size: 12px; font-weight: 800; letter-spacing: .08em; border-radius: 999px; padding: 4px 10px; }