/* Lista de Compras (página) e a tabela de produtos (componente). Prévia aprovada: artes/2026-09-29-lista-de-compras (29/09/2026). */
/* ===== Componente: tabela-produtos.css (também a base do Pedido rápido do atacado) ===== */
.tp-wrap{container-type:inline-size}

/* Topo: busca, filtro e ações */
.tp-topo{display:flex;flex-wrap:wrap;gap:14px 16px;align-items:end;justify-content:space-between;background:#fff;border-radius:var(--raio);box-shadow:var(--sombra-p);padding:16px 20px}
.tp-filtros{display:flex;gap:12px 20px;align-items:end;flex-wrap:wrap;flex:1 1 380px}
.tp-busca{flex:1 1 240px;display:grid;gap:6px}
.tp-busca label{font-size:.875rem;font-weight:700}
.tp-busca input{font:inherit;font-size:1rem;min-height:48px;width:100%;padding:12px 14px 12px 42px;border:1px solid var(--borda);border-radius:999px;color:var(--tinta);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b5b50' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 15px center/18px}
.tp-busca input:focus{outline:2px solid var(--terra-dk);outline-offset:1px;border-color:var(--terra-dk)}
.tp-filtros .check{min-height:48px;font-size:.9375rem}
.tp-acoes{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-left:auto}
.tp-acoes .btn{width:auto;min-height:48px;padding-inline:22px;font-size:1rem}
.tp-acoes .btn-sec{min-height:48px;padding-inline:16px;font-size:.9375rem}
.tp-cont{display:flex;justify-content:space-between;align-items:center;gap:8px 16px;flex-wrap:wrap;margin:16px 0 10px;font-size:.9375rem;color:var(--apoio)}
.tp-cont b{color:var(--tinta)}
.tp-cont .soma b{font-size:1.125rem;font-weight:900}

/* Tabela */
.tp{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border-radius:var(--raio);box-shadow:var(--sombra-p);overflow:hidden;font-size:.9375rem}
.tp th{text-align:left;font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--apoio);padding:12px;border-bottom:1px solid var(--linha);white-space:nowrap}
.tp td{padding:12px;border-bottom:1px solid var(--linha);vertical-align:middle}
.tp tbody tr:last-child td{border-bottom:0}
.tp .d{text-align:right}
.tp .c-sel{width:44px;padding-right:0}
.tp .c-sel input{width:20px;height:20px;accent-color:var(--terra-dk);cursor:pointer}
.tp .foto{width:80px}
.tp .foto img{width:56px;height:56px;object-fit:contain;border-radius:var(--raio-in);box-shadow:0 0 0 1px var(--linha);background:#fff}
.tp td.nome{min-width:220px}
.tp .nome a{display:block;color:var(--tinta);font-weight:700;line-height:1.3;text-decoration:none}
.tp .nome a:hover{color:var(--terra-dk);text-decoration:underline;text-underline-offset:3px}
.tp .nome small{display:block;color:var(--apoio);font-size:.8125rem;margin-top:2px}
.tp .selos{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.tp td.emb{font-weight:600;white-space:nowrap}
.tp td.preco{font-weight:900;font-size:1rem;white-space:nowrap}
.tp td.preco s{display:block;font-weight:500;font-size:.8125rem;color:var(--apoio)}
.tp td.preco small{display:block;font-weight:500;font-size:.75rem;color:var(--apoio)}
.pil{display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border-radius:999px;font-size:.75rem;font-weight:700;white-space:nowrap}
.pil svg{width:12px;height:12px}
.pil.ok{background:#e6f2ec;color:var(--ok)}
.pil.sem{background:var(--tinta);color:#fff}
.pil.frio{background:var(--frio-bg);color:var(--frio)}
.pil.of{background:var(--terra-dk);color:#fff}
.tp .qtd-p{height:46px}
.tp .qtd-p button{width:44px;height:44px;font-size:1.25rem}
.tp .qtd-p input{width:40px;height:44px;font-size:1rem}
.qtd-p.off{background:var(--papel);border-color:#cfc3b6}
.qtd-p.off button,.qtd-p.off input{color:#a89a8d;cursor:not-allowed;background:none}
.btn-add{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 14px;border:1px solid var(--borda);border-radius:var(--raio-in);background:#fff;color:var(--tinta);font:inherit;font-size:.9375rem;font-weight:700;cursor:pointer;white-space:nowrap;text-decoration:none}
.btn-add:hover{border-color:var(--terra-dk);color:var(--terra-dk)}
.btn-add svg{width:18px;height:18px}
.btn-add.feito{border-color:var(--ok);color:var(--ok)}
.btn-rem{display:inline-grid;place-items:center;width:44px;height:44px;border:0;background:none;border-radius:var(--raio-in);color:var(--apoio);cursor:pointer}
.btn-rem:hover{background:#fbe9e7;color:var(--erro)}
.btn-rem svg{width:20px;height:20px}
.tp tr.sel td{background:#fdf5f1}
.tp tr.sem td{background:var(--papel)}
.tp tr.sem .nome a,.tp tr.sem td.preco{color:var(--apoio)}
.tp tr.sem .foto img{opacity:.5}
.tp .cel{display:none}
.tp-rodape{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;font-size:.875rem;color:var(--apoio)}
.tp-rodape .btn{width:auto;min-height:48px;padding-inline:22px;font-size:1rem}
.tp-wrap .btn:disabled,.barra-fim .btn:disabled{background:#e5d9cc;color:var(--apoio);cursor:not-allowed}   /* nada marcado */
.tp-acoes .b-curto{display:none}

/* Bloco estreito (celular): cada linha vira um cartão compacto, com a caixa e a quantidade à vista */
@container (max-width:760px){
  .tp-topo{padding:14px 16px}
  .tp-filtros{flex-basis:100%}
  .tp-acoes{width:100%;margin-left:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr))}
  .tp-acoes .btn{display:none}          /* o "Adicionar os marcados" vai para a barra fixa de baixo */
  .tp-acoes .b-longo{display:none}
  .tp-acoes .b-curto{display:inline}
  .tp-acoes .btn-sec{padding-inline:10px}
  .tp-filtros{gap:4px 16px}
  .tp,.tp tbody{display:block;background:none;box-shadow:none;border-radius:0;overflow:visible}
  .tp thead{display:none}
  .tp tr{display:grid;grid-template-columns:28px 64px minmax(0,1fr);gap:8px 12px;align-items:start;background:#fff;border-radius:var(--raio);box-shadow:var(--sombra-p);padding:14px;margin-bottom:10px}
  .tp td{display:block;padding:0;border:0;background:none!important}
  .tp tr.sel{box-shadow:inset 0 0 0 2px var(--terra-dk),var(--sombra-p)}
  .tp tr.sem{background:var(--papel)}
  .tp .c-sel{grid-row:1;grid-column:1;padding-top:2px;width:auto}
  .tp .foto{grid-row:1/span 2;grid-column:2;width:auto}
  .tp .foto img{width:64px;height:64px}
  .tp td.nome{grid-column:3;min-width:0}
  .tp td.emb,.tp td.preco,.tp td.est,.tp td.q,.tp td.ac,.tp td.rm{display:none}
  .tp .cel{display:flex!important}
  .tp .cel-info{grid-column:3;align-items:baseline;gap:4px 10px;flex-wrap:wrap}
  .tp .cel-info b{font-size:1.0625rem;font-weight:900}
  .tp .cel-info s,.tp .cel-info small{font-size:.8125rem;color:var(--apoio)}
  .tp tr.sem .cel-info b{color:var(--apoio)}
  .tp .cel-acao{grid-column:1/-1;gap:10px;align-items:center;margin-top:2px}
  .tp .cel-acao .btn-add{flex:1}
  .tp-rodape .btn{display:none}
}

/* ===== Página: lista.css ===== */
.acoes-site a[aria-current="page"]{color:var(--terra-dk)}
.car-topo .conta-ok{display:inline-flex;align-items:center;gap:6px;font-size:.875rem;font-weight:600;color:var(--ok)}
.car-topo .conta-ok svg{width:16px;height:16px}

/* Aviso de quem não entrou na conta: informação, não alerta */
.aviso-lista{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--raio-in);background:#fff;border:1px solid var(--linha);font-size:.9375rem;margin-bottom:12px}
.aviso-lista svg{color:var(--terra-dk);margin-top:1px}
.aviso-lista a{font-weight:700;white-space:nowrap}
.compartilhada{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:14px 16px;border-radius:var(--raio-in);background:#fff7ef;border:1px solid #f1d9c6;font-size:.9375rem;margin-bottom:12px}
.compartilhada .btn-sec{min-height:44px}

/* Compartilhar pelo WhatsApp (aprovado pelo Franklin, 29/09) */
.btn-zap{display:flex;align-items:center;justify-content:center;gap:8px}
.zap-msg{background:#e7f6e7;border-radius:12px 12px 12px 4px;padding:14px 16px;font-size:.9375rem;line-height:1.5;max-width:460px;box-shadow:var(--sombra-p)}
.zap-msg a{word-break:break-all}

/* Busca sem resultado na lista */
.tp-vazio{background:#fff;border-radius:var(--raio);box-shadow:var(--sombra-p);padding:28px 20px;text-align:center;display:grid;gap:10px;justify-items:center}
.tp-vazio p{color:var(--apoio)}
.tp-vazio .btn-sec{min-height:44px}


/* ===== Montagem: moldura da página (a do carrinho), vazia, mensagens e barra do celular ===== */
.pag-lista{max-width:var(--largura-loja);margin-inline:auto;padding:28px clamp(16px,3vw,32px) 72px}
.pag-lista .num{white-space:nowrap}
.car-topo{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 12px;margin-bottom:20px}
.car-topo h1{font-size:1.75rem;font-weight:900;letter-spacing:-.01em}
.car-topo small{font-size:1rem;font-weight:500;color:var(--apoio)}
.an-lista-msg:empty{display:none}
.an-lista-msg{margin-bottom:12px}
.an-lista-msg a{color:var(--terra-dk);font-weight:700;margin-right:12px;display:inline-flex;align-items:center;min-height:44px}
.an-desfazer{color:var(--terra-dk);font-weight:700;background:none;border:0;padding:0;font:inherit;text-decoration:underline;cursor:pointer;min-height:44px}
.compartilhada p{font-weight:700}
.tp tr[hidden]{display:none!important}
.vazio{background:#fff;border-radius:var(--raio);box-shadow:var(--sombra-p);padding:48px 24px;display:grid;justify-items:center;text-align:center;gap:10px;margin-bottom:40px}
.vazio svg.grande{width:56px;height:56px;stroke:var(--terra-dk);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-bottom:6px}
.vazio h2{font-size:1.5rem;font-weight:900}
.vazio p{color:var(--apoio);font-size:1.0625rem;max-width:56ch}
.acoes-v{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:12px}
.acoes-v .btn{width:auto;text-decoration:none;padding-inline:28px}
.junto-car h2{font-size:1.375rem;font-weight:900;margin-bottom:14px}
.grade-cat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.grade-cat .card-p{display:flex;flex-direction:column}
.grade-cat .card-p .btn-sec{margin-top:auto}
.vazio[hidden],.junto-car[hidden],.tp-wrap[hidden],.compartilhada[hidden],.tp-vazio[hidden],.barra-fim[hidden]{display:none!important}
.barra-fim{display:none}
@media (max-width:960px){
  .pag-lista{padding-bottom:120px}
  .barra-fim{display:block;position:fixed;left:0;right:0;bottom:0;z-index:10;background:var(--branco);border-top:1px solid var(--linha);padding:12px 16px calc(12px + env(safe-area-inset-bottom));box-shadow:0 -8px 24px rgba(42,29,23,.08)}
}
@media (min-width:961px){.tp-barra{display:none!important}}
@media (max-width:640px){.grade-cat{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.car-topo h1{font-size:1.5rem}.acoes-v{flex-direction:column;width:100%}.acoes-v>*{width:100%}}

/* Busca que inclui produtos (ajuste de 29/09, lista.css aprovado) */
.tp-busca{position:relative}
.tp-busca .sugest{position:absolute;left:0;right:0;min-width:min(600px,calc(100vw - 32px));top:calc(100% + 8px);z-index:40;background:#fff;border-radius:var(--raio);box-shadow:0 12px 40px rgba(42,29,23,.18),0 0 0 1px rgba(42,29,23,.08);padding:10px 0 8px;max-height:min(70vh,620px);overflow:auto;text-align:left}
.sugest.estatico{position:static;box-shadow:var(--sombra-m);max-height:none;padding-top:10px;background:#fff;border-radius:var(--raio)}
.sugest .sg-lin small{display:block;margin-top:2px}
.sugest .ir{font-size:.8125rem;font-weight:700;color:var(--terra-dk);white-space:nowrap}
.sg-loja-l{list-style:none}
.sg-loja{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;min-height:60px;padding:8px 16px}
.sg-loja+.sg-loja{border-top:1px solid var(--linha)}
.sg-loja img{width:40px;height:40px;object-fit:contain}
.sugest .sg-loja a{display:inline;min-height:0;padding:0;color:var(--tinta);text-decoration:none;font-size:.9375rem;line-height:1.3}
.sugest .sg-loja a:hover{color:var(--terra-dk);text-decoration:underline;background:none}
.sg-loja small{display:flex !important;align-items:center;gap:8px;flex-wrap:wrap;margin-top:3px;color:var(--tinta) !important;font-weight:700}
.btn-incl{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border:1px solid var(--terra-dk);border-radius:var(--raio-in);background:#fff;color:var(--terra-dk);font:inherit;font-size:.875rem;font-weight:700;cursor:pointer;white-space:nowrap}
.btn-incl svg{width:16px;height:16px}
.btn-incl:hover{background:#fdf1ea}
.na-lista{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 4px;font-size:.8125rem;font-weight:700;color:var(--ok);white-space:nowrap}
.na-lista svg{width:16px;height:16px}
.sg-loja.novo{background:#f3faf6}
.sg-ok{display:flex;gap:8px;align-items:center;margin:0 12px 6px;padding:10px 12px;border-radius:var(--raio-in);background:#e6f2ec;font-size:.875rem;font-weight:600;line-height:1.35}
.sg-ok svg{color:var(--ok);width:18px;height:18px;flex:none}
.sg-nada{padding:4px 16px 10px}
.sg-nada p{font-size:.9375rem;color:var(--apoio)}
.sg-nada a{display:inline-flex !important;align-items:center;gap:8px;min-height:44px !important;padding:0 !important;font-weight:700;color:var(--terra-dk) !important}
.sg-nada a svg{width:18px;height:18px}
.tp tr.achado td{background:#fff3e6}
.tp tr.achado td:first-child{box-shadow:inset 4px 0 0 var(--terra-dk)}
.tp tr.novo td{background:#f3faf6}
.tp tr.novo td:first-child{box-shadow:inset 4px 0 0 var(--ok)}
.incluir-vazia{width:min(560px,100%);margin:8px auto 10px;text-align:left}
.tp-busca.grande{display:grid;gap:6px}
.tp-busca.grande label{font-size:.9375rem;font-weight:700}
.tp-busca.grande input{min-height:56px;font-size:1.0625rem}
@media (max-width:900px){
  .tp-busca .sugest{left:-16px;right:-16px;min-width:0}
  .sg-loja{grid-template-columns:40px minmax(0,1fr);padding:10px 14px}
  .sg-loja .btn-incl,.sg-loja .na-lista{grid-column:2;justify-self:start}
}
.tp-busca .sugest[hidden]{display:none}
.btn-incl .ic,.na-lista .ic{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.sugest a[aria-selected="true"],.btn-incl[aria-selected="true"]{background:var(--papel);outline:2px solid var(--terra-dk);outline-offset:-2px}
.selo-novo{display:inline-block;margin-right:6px;padding:1px 8px;border-radius:999px;background:var(--ok);color:#fff;font-size:.6875rem;font-weight:700;vertical-align:2px}
.tp tr.achada td{background:#fdf1ea;transition:background .3s}
.tp tr.achada td:first-child{box-shadow:inset 4px 0 0 var(--terra-dk)}
.busca-vazia-lista{width:100%;max-width:560px;margin:8px auto 4px;text-align:left}
.busca-vazia-lista .tp-busca{display:grid;gap:6px}
.busca-vazia-lista .tp-busca label{font-size:.9375rem;font-weight:700}
.busca-vazia-lista .tp-busca input{min-height:56px;font-size:1.0625rem}
.busca-vazia-lista:empty{display:none}
.como-lista{margin-top:10px}
.como-lista a{font-weight:700;color:var(--terra-dk);display:inline-flex;align-items:center;min-height:44px}
.sg-nada{padding:6px 16px 12px;color:var(--apoio);font-size:.9375rem}
.sg-nada a{color:var(--terra-dk);font-weight:700}
@media (prefers-reduced-motion:reduce){.tp tr.achada td{transition:none}}
.sugest .sg-nada a{display:inline;min-height:0;padding:0}