feat: icons in the header and on the Montagem controls

The header's search, account and cart get icons, with the item count on the
cart instead of "Carrinho (N)"; on phones only the icons show. The upload
zone, remove, rotate and mirror buttons used Unicode symbols that look
different, or are missing, depending on the system's fonts; they are now
Lucide icons (ISC licence) drawn inline, so nothing new is loaded and the
CSP is unchanged.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

web/index.html

@@ -728,12 +728,12 @@ footer a:hover{color:var(--laranja2)}
 <header class="topo"><div class="w">
   <a class="logo" href="https://www.dropstaratacado.com.br" aria-label="Dropstar Atacado"><img src="https://cdn.vnda.com.br/dropstar/2025/12/17/logo-header-15125700-16129080.png?v=1766009286" alt="Dropstar"></a>
   <div class="busca">
-    <span class="lupa">⌕</span>
+    <span class="lupa"><svg class="ic" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg></span>
     <input type="search" placeholder="Buscar" aria-label="Buscar">
   </div>
   <div class="acts">
-    <a href="/portal.html">Minha conta</a>
+    <a href="/portal.html"><svg class="ic" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg><span class="actTx">Minha conta</span></a>
-    <a href="/carrinho" id="cartLink">Carrinho (0)</a><span class="cartEnvio" id="cartEnvio" aria-live="polite"></span>
+    <a href="/carrinho" id="cartLink" aria-label="Carrinho, 0 itens"><span class="cartIc"><svg class="ic" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/></svg><b class="cartN" id="cartN" hidden>0</b></span><span class="actTx">Carrinho</span></a><span class="cartEnvio" id="cartEnvio" aria-live="polite"></span>
   </div>
 </div></header>
 
@@ -919,7 +919,7 @@ footer a:hover{color:var(--laranja2)}
             <div id="lista"></div>
             <p class="avisoEnvio" id="avisoEnvio" role="note" hidden></p>
             <div class="zona" id="zona" tabindex="0" role="button">
-              <div class="ico">↑</div>
+              <div class="ico"><svg class="ic" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m17 8-5-5-5 5"/><path d="M12 3v12"/></svg></div>
               <b id="zTit">Arraste aqui</b><span id="zSub"></span>
               <span id="zLimite">Até 5 GB por arquivo.</span>
               <span class="bt">ou escolher no computador</span>
@@ -1031,7 +1031,7 @@ footer a:hover{color:var(--laranja2)}
           </aside>
           <dialog class="ampliaDlg" id="ampliaDlg" aria-labelledby="ampliaTit">
             <div class="ampliaCab"><b id="ampliaTit">Sua folha</b>
-              <button type="button" id="ampliaFecha" aria-label="Fechar">×</button></div>
+              <button type="button" id="ampliaFecha" aria-label="Fechar"><svg class="ic" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button></div>
             <div id="ampliaArea"></div>
           </dialog>
         </div>

web/site-cart.js

@@ -61,7 +61,8 @@ function pintaPedido(){
     : 'Ir para o pagamento';
   $('bPagar').disabled = !cartPodeEnviar() || !entrega.cotado || !clienteOk() || !enderecoOk();
   if(pedido.length || itemAtual) $('carr').classList.add('on');
-  if($('cartLink')) $('cartLink').textContent='Carrinho ('+n+')';
+  if($('cartN')){ $('cartN').textContent=n>99?'99+':n; $('cartN').hidden=!n;
+    $('cartLink').setAttribute('aria-label','Carrinho, '+n+(n===1?' item':' itens')); }
   window.dispatchEvent(new Event('dtf-cart-changed'));
 }
 

web/site-config.js

@@ -5,6 +5,18 @@
 
 const $=id=>document.getElementById(id);
 const rs=v=>'R$ '+v.toFixed(2).replace('.',',');
+// Ícones (Lucide, licença ISC) desenhados no próprio HTML: nada a carregar, e a
+// cor vem do texto em volta. Os que ficam no HTML estático são os mesmos.
+const ICONES={
+  busca:'<circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>',
+  conta:'<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>',
+  sacola:'<path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/>',
+  enviar:'<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m17 8-5-5-5 5"/><path d="M12 3v12"/>',
+  girar:'<path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/>',
+  espelhar:'<path d="m3 7 5 5-5 5V7"/><path d="m21 7-5 5 5 5V7"/><path d="M12 20v2"/><path d="M12 14v2"/><path d="M12 8v2"/><path d="M12 2v2"/>',
+  fechar:'<path d="M18 6 6 18"/><path d="m6 6 12 12"/>',
+};
+const icone=n=>'<svg class="ic" viewBox="0 0 24 24" aria-hidden="true" focusable="false">'+ICONES[n]+'</svg>';
 const fmt=b=>b<1048576?(b/1024).toFixed(0)+' KB'
   :b<1073741824?(b/1048576).toFixed(1).replace('.',',')+' MB':(b/1073741824).toFixed(1).replace('.',',')+' GB';
 

web/site-pdf.js

@@ -473,7 +473,7 @@ function pintaFolha(){
     return '<div class="rep" data-folha="'+i+'">'+
       '<div class="repTopo"><div class="miniF">'+mini+'</div><div class="repInfo">'+
         '<div class="l1"><b>'+(folhas.length>1? (i+1)+'. ':'')+escapeHTML(x.f.name)+'</b>'+
-        '<button data-rmf="'+i+'" aria-label="Remover '+escapeHTML(x.f.name)+'">×</button></div>'+
+        '<button data-rmf="'+i+'" aria-label="Remover '+escapeHTML(x.f.name)+'">'+icone('fechar')+'</button></div>'+
         (lido || x.measurementError ? '' : '<span class="repPeso">'+escapeHTML(extDe(x.f.name))+' · '+fmt(x.f.size)+'</span>')+
         barra+medida+
       '</div></div>'+copias+
@@ -570,7 +570,7 @@ function pintaArtes(){
     return '<div class="rep art2'+(a===recemChegada?' nova':'')+'" data-arte="'+i+'">'+
       '<div class="repTopo"><div class="miniF">'+mini+'</div><div class="repInfo">'+
         '<div class="l1"><b>'+escapeHTML(a.f.name)+'</b>'+(a===recemChegada?'<em class="novaT">nova</em>':'')+
-          '<button data-rm="'+i+'" aria-label="Remover '+escapeHTML(a.f.name)+'">×</button></div>'+
+          '<button data-rm="'+i+'" aria-label="Remover '+escapeHTML(a.f.name)+'">'+icone('fechar')+'</button></div>'+
         '<div class="repMed">'+medida+'<span>'+(a.px>0? a.px+' × '+a.py+' px · ' : '')+
           escapeHTML(extDe(a.f.name))+' · '+fmt(a.f.size)+'</span></div>'+
         barra+chips+aviso+dica+
@@ -584,8 +584,8 @@ function pintaArtes(){
           '<input type="number" id="q'+i+'" min="1" max="200" data-q="'+i+'" value="'+a.q+'">'+
           '<button type="button" data-passoa="1" data-i="'+i+'" aria-label="Mais uma cópia">+</button></span></div>'+
         '<span class="giros">'+
-          '<button class="gr'+(a.giro?' on':'')+'" data-giro="'+i+'" title="Girar 90°" aria-label="Girar 90°">⟳</button>'+
+          '<button class="gr'+(a.giro?' on':'')+'" data-giro="'+i+'" title="Girar 90°" aria-label="Girar 90°">'+icone('girar')+'</button>'+
-          '<button class="gr'+(a.esp?' on':'')+'" data-esp="'+i+'" title="Espelhar" aria-label="Espelhar">⇋</button></span>'+
+          '<button class="gr'+(a.esp?' on':'')+'" data-esp="'+i+'" title="Espelhar" aria-label="Espelhar">'+icone('espelhar')+'</button></span>'+
         (sub? '<div class="conta">'+sub+'</div>' : '')+
         '<div class="atalhos">'+(TAMANHOS[larguraFilme()]||[]).map(t=>'<button class="tm'+
           (Math.abs(a.cm-t)<0.05?' on':'')+'" data-tam="'+i+'" data-t="'+t+'">'+n1(t)+' cm</button>').join('')+'</div>'+

web/site-v2.css

@@ -334,6 +334,21 @@ html:is([data-rota="pagamento"],[data-rota="pix"]) .checkout{max-width:1040px;ma
 html:is([data-rota="pagamento"],[data-rota="pix"]) .pagGrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:32px;align-items:start}
 .avisoEnvio{margin:10px 0 0;padding:10px 12px;border-radius:8px;background:var(--aviso-fundo);color:#5A3A00;font-size:13px;line-height:1.5}
 .avisoEnvio[hidden]{display:none}
+.ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
+.busca .lupa{display:flex;font-size:0}
+.busca .lupa .ic{width:15px;height:15px}
+.acts a .ic{width:20px;height:20px}
+.cartIc{position:relative;display:inline-flex}
+.acts #cartLink{gap:11px}
+.cartN{position:absolute;top:-7px;right:-9px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--laranja);color:var(--preto);font-size:10.5px;font-weight:800;line-height:17px;text-align:center}
+.cartN[hidden]{display:none}
+.zona .ico .ic{width:22px;height:22px}
+.art2 .giros .gr{display:inline-flex;align-items:center;justify-content:center}
+.art2 .giros .gr .ic{width:19px;height:19px}
+.rep .l1 button{display:inline-flex;align-items:center;justify-content:center}
+.rep .l1 button .ic{width:17px;height:17px}
+#ampliaFecha .ic{width:20px;height:20px}
+@media (max-width:600px){.acts .actTx{display:none}.acts{gap:16px}}
 .envioArq{font-size:13px;color:var(--texto2);margin-top:14px;line-height:1.5}
 .envioArq.ok{color:var(--verde)}
 .envioArq.erro{color:#B42318}