/* Collore — barra inferior do celular. Só existe no mobile e só quando há item no carrinho (classe no controlada pelo JS, porque o carrinho muda por AJAX e a página pode vir de cache). */ .clre-barra{ display: none; } @media (max-width: 767px){ .clre-barra{ position: fixed; left: 0; right: 0; bottom: 0; z-index: 998; /* abaixo do painel do carrinho lateral */ display: grid; grid-template-columns: repeat(3, 1fr); background: #fff; border-top: 1px solid #ececec; box-shadow: 0 -6px 24px rgba(0,0,0,.08); padding-bottom: env(safe-area-inset-bottom, 0px); transform: translateY(110%); transition: transform .22s ease; visibility: hidden; } body.clre-barra-on .clre-barra{ transform: translateY(0); visibility: visible; } /* espaço pra barra não cobrir o fim da página */ body.clre-barra-on{ padding-bottom: 68px; } .clre-barra__item{ position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 60px; /* alvo de toque confortável */ padding: 8px 4px; color: #1a1a1a !important; text-decoration: none !important; font-size: 11px; letter-spacing: .04em; } .clre-barra__item + .clre-barra__item{ border-left: 1px solid #f0f0ee; } .clre-barra__item:active{ background: #f7f6f2; } .clre-barra__item svg{ width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .clre-barra__qtd{ position: absolute; top: 6px; left: 50%; margin-left: 6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #5b5e3f; color: #fff; font-size: 11px; font-style: normal; font-weight: 600; line-height: 18px; text-align: center; } }