.header-action-list .header_login_button { background-color: transparent; color: #ffffff; border-radius: 6px; } .header-action-list .header_login_button--logged { background-color: transparent !important; border: none !important; padding: 0 !important; } .header-action-list .header_login_button a.btn { padding: 10px; display: flex; align-items: center; justify-content: center; border-radius: 6px; text-decoration: none; white-space: nowrap; background-color: #007aff; border: thin solid #007aff; color: #ffffff; } .header-action-list .header_login_button a.btn:hover { background: #ffffff; color: #007aff; } .header-action-list .header_login_button a.btn svg { width: 20px; height: 20px; } .header-action-list .header_login_button a.btn div { margin-left: 5px; display: flex; flex-direction: column; font-weight: 400; font-size: 14px; line-height: 14px; } /* LOi — Botão logado */ .header_login_button--logged { position: relative; } .loi-account-btn { display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 20px; cursor: pointer; border: none; background: #1565C0; color: #ffffff; font-size: 13px; font-weight: 600; white-space: nowrap; transition: background 0.2s; line-height: 1; height: 36px; } .loi-account-btn:hover { background: #1255a8; } .loi-avatar { width: 26px; height: 26px; min-width: 26px; border-radius: 50%; background: #ffffff; color: #1565C0; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; letter-spacing: 0; line-height: 1; text-transform: uppercase; font-style: normal; text-decoration: none; } .loi-greeting { color: #ffffff; font-weight: 600; font-size: 13px; } .loi-chevron { transition: transform 0.2s ease; flex-shrink: 0; color: #ffffff; opacity: 0.7; } .loi-account-btn[aria-expanded="true"] .loi-chevron { transform: rotate(180deg); } /* Dropdown desktop */ .loi-dropdown { display: none; position: absolute; top: calc(100% + 10px); right: 0; min-width: 260px; background: #fff; border: 1px solid #e0e0e0; border-radius: 14px; box-shadow: 0 12px 32px rgba(0,0,0,0.14); z-index: 9999; overflow: hidden; } .loi-dropdown.is-open { display: block; animation: loiFadeIn 0.18s ease; } @keyframes loiFadeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .loi-dropdown__header { display: flex; align-items: center; gap: 12px; padding: 16px; background: #1565C0; } .loi-dropdown__avatar-big { width: 42px; height: 42px; min-width: 42px; border-radius: 50%; background: #ffffff; color: #1565C0; font-size: 16px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; letter-spacing: 0; line-height: 1; text-transform: uppercase; font-style: normal; } .loi-dropdown__name { font-size: 14px; font-weight: 700; color: #ffffff; line-height: 1.3; } .loi-dropdown__email { font-size: 11px; color: rgba(255,255,255,0.75); margin-top: 2px; } .loi-dropdown__list { list-style: none; padding: 6px 0; margin: 0; } .loi-dropdown__item { display: flex; align-items: center; gap: 12px; padding: 11px 18px; font-size: 13px; font-weight: 500; color: #1a1a2e; text-decoration: none; background: none; border: none; border-bottom: 1px solid #f2f2f2; width: 100%; text-align: left; cursor: pointer; transition: background 0.15s; } .loi-dropdown__list li:last-child .loi-dropdown__item { border-bottom: none; } .loi-dropdown__item:hover { background: #f0f4ff; } .loi-dropdown__item svg { flex-shrink: 0; color: #1565C0; fill: none; opacity: 1; width: 16px; height: 16px; } .loi-dropdown__item--logout { color: #c0392b; font-weight: 500; border-bottom: none !important; } .loi-dropdown__item--logout svg { color: #c0392b; } .loi-dropdown__item--logout:hover { background: #fff5f5; } /* LOi Mobile Account */ .loi-mobile-account-btn { background: none; border: none; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; } .loi-mobile-avatar { width: 28px; height: 28px; min-width: 28px; border-radius: 50%; background: #1565C0; color: #ffffff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; letter-spacing: 0; line-height: 1; text-transform: uppercase; } .loi-mobile-dropdown { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-radius: 16px 16px 0 0; box-shadow: 0 -4px 24px rgba(0,0,0,0.15); z-index: 99999; overflow: hidden; } .loi-mobile-dropdown.is-open { display: block; animation: loiSlideUp 0.25s ease; } @keyframes loiSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } } .loi-mobile-dropdown__header { display: flex; align-items: center; gap: 12px; padding: 16px; background: #1565C0; } .loi-mobile-dropdown__avatar { width: 42px; height: 42px; min-width: 42px; border-radius: 50%; background: #ffffff; color: #1565C0; font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; text-transform: uppercase; line-height: 1; } .loi-mobile-dropdown__name { font-size: 14px; font-weight: 700; color: #ffffff; line-height: 1.3; } .loi-mobile-dropdown__email { font-size: 11px; color: rgba(255,255,255,0.70); margin-top: 2px; } .loi-mobile-dropdown__close { margin-left: auto; background: none; border: none; color: #ffffff; font-size: 18px; cursor: pointer; padding: 4px; opacity: 0.8; flex-shrink: 0; line-height: 1; } .loi-mobile-dropdown__list { list-style: none; padding: 8px 0 24px; margin: 0; } .loi-mobile-dropdown__item { display: flex; align-items: center; gap: 12px; padding: 14px 20px; font-size: 14px; font-weight: 500; color: #1a1a2e; text-decoration: none; background: none; border: none; border-bottom: 1px solid #f2f2f2; width: 100%; text-align: left; cursor: pointer; transition: background 0.15s; } .loi-mobile-dropdown__item:hover, .loi-mobile-dropdown__item:active { background: #f0f4ff; } .loi-mobile-dropdown__item svg { flex-shrink: 0; color: #1565C0; opacity: 1; width: 18px; height: 18px; } .loi-mobile-dropdown__divider { height: 1px; background: #eeeeee; margin: 4px 0; } .loi-mobile-dropdown__item--logout { color: #c0392b; border-bottom: none !important; } .loi-mobile-dropdown__item--logout svg { color: #c0392b; } .loi-mobile-dropdown__item--logout:hover, .loi-mobile-dropdown__item--logout:active { background: #fff5f5; } .loi-mobile-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 99998; } .loi-mobile-overlay.is-open { display: block; } /* LOi Header CEP */ .loi-header-cep { position: relative; } .loi-header-cep__trigger { display: flex; align-items: center; gap: 6px; background: #1565C0; color: #fff; border: none; border-radius: 8px; padding: 7px 12px; font-size: 12px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background 0.2s; height: 36px; } .loi-header-cep__trigger:hover { background: #1255a8; } .loi-header-cep__trigger svg { flex-shrink: 0; } .loi-header-cep__dropdown { display: none; position: absolute; top: calc(100% + 10px); right: 0; width: 300px; background: #fff; border: 1px solid #e0e0e0; border-radius: 14px; box-shadow: 0 12px 32px rgba(0,0,0,0.14); z-index: 9999; overflow: hidden; } .loi-header-cep__dropdown.is-open { display: block; animation: loiFadeIn 0.18s ease; } .loi-header-cep__head { background: #1565C0; padding: 13px 16px; font-size: 13px; font-weight: 600; color: #fff; display: flex; align-items: center; gap: 8px; } .loi-header-cep__body { padding: 16px; } .loi-header-cep__row { display: flex; gap: 8px; margin-bottom: 14px; } .loi-header-cep__input { flex: 1; height: 38px; border-radius: 8px; border: 1.5px solid #ddd; padding: 0 12px; font-size: 14px; color: #1a1a2e; background: #f9f9f9; outline: none; min-width: 0; } .loi-header-cep__input:focus { border-color: #1565C0; background: #fff; } .loi-header-cep__btn { height: 38px; border-radius: 8px; background: #1565C0; border: none; padding: 0 16px; font-size: 13px; font-weight: 700; color: #fff; cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: background 0.2s; } .loi-header-cep__btn:hover { background: #1255a8; } .loi-header-cep__btn:disabled { opacity: 0.6; cursor: not-allowed; } .loi-header-cep__results { display: flex; flex-direction: column; margin-bottom: 8px; } .loi-header-cep__location { font-size: 11px; color: #1565C0; font-weight: 600; display: flex; align-items: center; gap: 4px; margin-bottom: 10px; } .loi-header-cep__option { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #f2f2f2; } .loi-header-cep__option:last-child { border-bottom: none; } .loi-header-cep__option-left { display: flex; align-items: center; gap: 10px; } .loi-header-cep__option-name { font-size: 13px; font-weight: 600; color: #1a1a2e; } .loi-header-cep__option-prazo { font-size: 11px; color: #888; margin-top: 2px; } .loi-header-cep__option-price { font-size: 13px; font-weight: 700; color: #1565C0; flex-shrink: 0; } .loi-header-cep__option-price.gratis { color: #27ae60; } .loi-header-cep__error { font-size: 12px; color: #c0392b; margin: 4px 0 8px; } .loi-header-cep__loading { font-size: 12px; color: #888; text-align: center; padding: 12px 0; } .loi-header-cep__link { display: block; font-size: 11px; color: #999; text-align: center; text-decoration: none; margin-top: 8px; } .loi-header-cep__link:hover { color: #1565C0; } .header-action-list .loi-avatar, button.loi-account-btn .loi-avatar, .loi-account-btn span.loi-avatar { background: #ffffff !important; color: #1565C0 !important; font-size: 10px !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: 0 !important; text-transform: uppercase !important; font-family: inherit !important; font-style: normal !important; } .header-action-list .loi-dropdown__avatar-big, .loi-dropdown__header .loi-dropdown__avatar-big { background: #ffffff !important; color: #1565C0 !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: 0 !important; text-transform: uppercase !important; font-family: inherit !important; font-style: normal !important; } (function() { function attachLoiDropdown() { var trigger = document.getElementById('loi-account-trigger'); var dropdown = document.getElementById('loi-dropdown'); if (!trigger || !dropdown || trigger._loiReady) return; trigger._loiReady = true; trigger.addEventListener('click', function(e) { e.stopPropagation(); var isOpen = dropdown.classList.contains('is-open'); dropdown.classList.toggle('is-open', !isOpen); trigger.setAttribute('aria-expanded', String(!isOpen)); }); document.addEventListener('click', function(e) { if (!dropdown.contains(e.target) && e.target !== trigger) { dropdown.classList.remove('is-open'); trigger.setAttribute('aria-expanded', 'false'); } }); document.addEventListener('keydown', function(e) { if (e.key === 'Escape') { dropdown.classList.remove('is-open'); trigger.setAttribute('aria-expanded', 'false'); trigger.focus(); } }); } attachLoiDropdown(); var observer = new MutationObserver(function() { attachLoiDropdown(); attachLoiMobileDropdown(); // 👈 também chama o mobile aqui }); observer.observe(document.body, { childList: true, subtree: true }); setTimeout(function() { observer.disconnect(); }, 10000); // ✅ Mobile dropdown — cola aqui function attachLoiMobileDropdown() { var trigger = document.getElementById('loi-mobile-trigger'); var dropdown = document.getElementById('loi-mobile-dropdown'); var closeBtn = document.getElementById('loi-mobile-close'); if (!trigger || !dropdown || trigger._loiMobileReady) return; trigger._loiMobileReady = true; var overlay = document.createElement('div'); overlay.className = 'loi-mobile-overlay'; overlay.id = 'loi-mobile-overlay'; document.body.appendChild(overlay); function openMenu() { dropdown.classList.add('is-open'); overlay.classList.add('is-open'); document.body.style.overflow = 'hidden'; } function closeMenu() { dropdown.classList.remove('is-open'); overlay.classList.remove('is-open'); document.body.style.overflow = ''; } trigger.addEventListener('click', function(e) { e.stopPropagation(); openMenu(); }); if (closeBtn) closeBtn.addEventListener('click', closeMenu); overlay.addEventListener('click', closeMenu); document.addEventListener('keydown', function(e) { if (e.key === 'Escape') closeMenu(); }); } attachLoiMobileDropdown(); // CEP Calculator header function initLoiHeaderCep() { var trigger = document.getElementById('loi-cep-trigger'); var dropdown = document.getElementById('loi-cep-dropdown'); var input = document.getElementById('loi-cep-input'); var btn = document.getElementById('loi-cep-btn'); var results = document.getElementById('loi-cep-results'); var label = document.getElementById('loi-cep-label'); if (!trigger || !dropdown || trigger._loiCepReady) return; trigger._loiCepReady = true; var WORKER_URL = 'https://loi-frete.SEU-USUARIO.workers.dev'; function formatCEP(v) { v = v.replace(/\D/g, '').substring(0, 8); if (v.length > 5) v = v.substring(0, 5) + '-' + v.substring(5); return v; } function formatBRL(val) { return 'R$ ' + parseFloat(val).toFixed(2).replace('.', ','); } function isGrandeSP(cep) { var num = parseInt(cep.replace(/\D/g, '')); return num >= 1000000 && num <= 9999999; } function getIcon(nome) { var n = (nome || '').toLowerCase(); if (n.includes('sedex') || n.includes('express') || n.includes('rápid')) return '⚡'; if (n.includes('pac') || n.includes('econom')) return '📦'; if (n.includes('loggi')) return '🛵'; if (n.includes('jadlog')) return '🚚'; return '📦'; } trigger.addEventListener('click', function(e) { e.stopPropagation(); var isOpen = dropdown.classList.contains('is-open'); dropdown.classList.toggle('is-open', !isOpen); dropdown.setAttribute('aria-hidden', String(isOpen)); if (!isOpen && input) setTimeout(function() { input.focus(); }, 100); }); document.addEventListener('click', function(e) { var container = document.getElementById('loi-header-cep'); if (container && !container.contains(e.target)) { dropdown.classList.remove('is-open'); dropdown.setAttribute('aria-hidden', 'true'); } }); if (input) { input.addEventListener('input', function() { this.value = formatCEP(this.value); }); input.addEventListener('keydown', function(e) { if (e.key === 'Enter') btn.click(); }); var saved = localStorage.getItem('loi_cep_header'); if (saved) { input.value = formatCEP(saved); label.textContent = formatCEP(saved); } } if (btn) { btn.addEventListener('click', function() { var cep = input.value.replace(/\D/g, ''); if (cep.length !== 8) { results.innerHTML = '<p class="loi-header-cep__error">CEP inválido.</p>'; return; } btn.disabled = true; btn.textContent = '...'; results.innerHTML = '<div class="loi-header-cep__loading">Consultando...</div>'; localStorage.setItem('loi_cep_header', cep); var options = []; if (isGrandeSP(cep)) { options.push({ icon: '🏎️', nome: 'Entrega Hoje', prazo: 'Pedidos até 12h', preco: 0 }); } fetch('https://loi-frete.dan-074.workers.dev', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ cepDestino: cep, peso: 1, altura: 16, largura: 20, comprimento: 40, valor: 100 }) }) .then(function(r) { return r.json(); }) .then(function(data) { var cidade = data.cidade || ''; label.textContent = formatCEP(cep); var servicos = data.ShippingSevicesArray || data.ShippingServicesArray || []; servicos.forEach(function(s) { if (s.Error || s.Erro) return; options.push({ icon: getIcon(s.ServiceDescription || s.Carrier), nome: (s.ServiceDescription || s.Carrier || '').split('|')[0].trim(), prazo: (s.DeliveryTime || s.PrazoEntrega || '?') + ' dia(s) útil(eis)', preco: parseFloat(s.ShippingPrice || s.Preco || 0) }); }); if (options.length === 0) { results.innerHTML = '<p class="loi-header-cep__error">Nenhuma opção disponível.</p>'; btn.disabled = false; btn.textContent = 'Calcular'; return; } var html = '<div class="loi-header-cep__results">'; options.forEach(function(op) { html += '<div class="loi-header-cep__option">'; html += '<div class="loi-header-cep__option-left">'; html += '<span style="font-size:16px">' + op.icon + '</span>'; html += '<div><div class="loi-header-cep__option-name">' + op.nome + '</div>'; html += '<div class="loi-header-cep__option-prazo">' + op.prazo + '</div></div>'; html += '</div>'; html += '<div class="loi-header-cep__option-price' + (op.preco === 0 ? ' gratis' : '') + '">'; html += op.preco === 0 ? 'GRÁTIS' : formatBRL(op.preco); html += '</div></div>'; }); html += '</div>'; results.innerHTML = html; btn.disabled = false; btn.textContent = 'Calcular'; }) .catch(function(err) { results.innerHTML = '<p class="loi-header-cep__error">Erro: ' + err.message + '</p>'; btn.disabled = false; btn.textContent = 'Calcular'; }); });; } } initLoiHeaderCep(); // Também chama no MutationObserver — já está configurado acima })();

Frete grátis para todo o estado de São Paulo

10% de Desconto no PIX

Entrega no mesmo dia em toda São Paulo

Entrega no Modo Turbo

Suas compras chegam voando até você.

Pedidos feitos até as 15h chegam em até 2 horas. Apenas em dias úteis Santo André e região do ABC.

Ver produtos

Produtos em Modo Turbo

Oferta

Entrega Turbo

Oferta

Entrega Turbo

Oferta

Entrega Turbo

Oferta

Entrega Turbo

Oferta

Entrega Turbo

Oferta

Entrega Turbo

Oferta

Entrega Turbo

Oferta

Entrega Turbo

Oferta

Entrega Turbo

Oferta

Entrega Turbo

Oferta

Entrega Turbo

Oferta

Entrega Turbo

Oferta

Entrega Turbo

Oferta

Entrega Turbo

Oferta

Entrega Turbo

Oferta

Entrega Turbo

Oferta

Entrega Turbo

Oferta

Entrega Turbo

Oferta

Entrega Turbo

Oferta

Entrega Turbo

Oferta

Entrega Turbo

Oferta

Entrega Turbo

Ficou com dúvida?Fale com a gente pelo WhatsApp.

Chamar no WhatsApp

✔️ Produto adicionado com sucesso.

✔️ Produto adicionado com sucesso.