:root { --hp-food: #f97316; --hp-orange: #f97316; --safe-bottom: env(safe-area-inset-bottom); } * { -webkit-tap-highlight-color: transparent; } body { font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: radial-gradient(circle at 12% -12%, rgba(14, 165, 233, .10), transparent 30rem), radial-gradient(circle at 90% 4%, rgba(249, 115, 22, .08), transparent 28rem), linear-gradient(180deg, #f8fafc 0%, #f6f7f9 50%, #eef2f7 100%); } .dark body { background: radial-gradient(circle at 12% -10%, rgba(249, 115, 22, .12), transparent 34rem), radial-gradient(circle at 88% 8%, rgba(14, 165, 233, .10), transparent 28rem), linear-gradient(180deg, #020617 0%, #0f172a 52%, #020617 100%); } .hide-scrollbar::-webkit-scrollbar { display: none; } .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } .line-clamp-1 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .glass-panel { background: rgba(255, 255, 255, .78); border: 1px solid rgba(231, 229, 228, .85); box-shadow: 0 20px 80px rgba(15, 23, 42, .08); backdrop-filter: blur(22px); } .dark .glass-panel { background: rgba(15, 23, 42, .74); border-color: rgba(51, 65, 85, .78); box-shadow: 0 20px 90px rgba(0, 0, 0, .24); } .premium-card { isolation: isolate; } .premium-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, rgba(255,255,255,.88), rgba(14,165,233,.14), rgba(16,185,129,.08)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 2; opacity: .9; } .dark .premium-card::before { background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(14,165,233,.18), rgba(16,185,129,.14)); } .premium-card:hover .card-shine { transform: translateX(135%) rotate(14deg); } .card-shine { position: absolute; top: -45%; left: -80%; width: 55%; height: 190%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.24), transparent); transform: translateX(-25%) rotate(14deg); transition: transform .9s cubic-bezier(.16,1,.3,1); z-index: 18; pointer-events: none; } .premium-seal { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .premium-seal-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.55rem; height: 1.55rem; border-radius: 999px; animation: premiumSealIcon 1.9s ease-in-out infinite; transform-origin: center; } .premium-seal-diamond .premium-seal-icon { animation-name: premiumDiamondIcon; } .premium-seal-highlight .premium-seal-icon { animation-name: premiumCrownIcon; } @keyframes premiumDiamondIcon { 0%, 100% { transform: translateY(0) scale(1) rotate(0deg); filter: drop-shadow(0 2px 4px rgba(8, 47, 73, .18)); } 42% { transform: translateY(-1px) scale(1.12) rotate(-6deg); filter: drop-shadow(0 4px 8px rgba(14, 165, 233, .34)); } 68% { transform: translateY(0) scale(1.04) rotate(5deg); } } @keyframes premiumCrownIcon { 0%, 100% { transform: translateY(0) scale(1) rotate(0deg); filter: drop-shadow(0 2px 4px rgba(120, 53, 15, .18)); } 42% { transform: translateY(-1px) scale(1.12) rotate(-8deg); filter: drop-shadow(0 4px 8px rgba(245, 158, 11, .34)); } 68% { transform: translateY(0) scale(1.04) rotate(7deg); } } .skeleton-shimmer { background: linear-gradient(90deg, rgba(231,229,228,.65) 0%, rgba(245,245,244,.95) 45%, rgba(231,229,228,.65) 100%); background-size: 220% 100%; animation: shimmer 1.8s linear infinite; } .dark .skeleton-shimmer { background: linear-gradient(90deg, rgba(51,65,85,.62) 0%, rgba(71,85,105,.92) 45%, rgba(51,65,85,.62) 100%); background-size: 220% 100%; } .focus-premium:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(249, 115, 22, .20); } .hp-header-shell { position: relative; overflow: hidden; background: linear-gradient(135deg, rgba(255, 255, 255, .94), rgba(255, 247, 237, .90) 58%, rgba(240, 249, 255, .84)); border: 1px solid rgba(231, 229, 228, .90); box-shadow: 0 10px 30px rgba(15, 23, 42, .08), inset 0 1px 0 rgba(255,255,255,.82); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .hp-header-shell::after { content: ''; position: absolute; inset: auto 1rem 0 1rem; height: 1px; background: linear-gradient(90deg, transparent, rgba(249, 115, 22, .30), rgba(14, 165, 233, .22), transparent); pointer-events: none; } .dark .hp-header-shell { background: linear-gradient(135deg, rgba(15, 23, 42, .96), rgba(2, 6, 23, .91) 62%, rgba(15, 23, 42, .94)); border-color: rgba(51, 65, 85, .82); box-shadow: 0 12px 40px rgba(0, 0, 0, .26), inset 0 1px 0 rgba(255,255,255,.06); } .hp-header-orb, .hp-header-orb-one, .hp-header-orb-two { display: none; } .hp-brand-mark { box-shadow: inset 0 1px 0 rgba(255,255,255,.86), 0 10px 24px rgba(249, 115, 22, .16); } .hp-search-input { box-shadow: inset 0 1px 0 rgba(255,255,255,.90), 0 12px 26px rgba(15,23,42,.06); } .hp-action-btn, .hp-quick-btn { box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 8px 18px rgba(15,23,42,.06); } .hp-category-link { box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 6px 14px rgba(15,23,42,.04); } .hp-category-link:hover { transform: translateY(-1px); } .hp-card-hover { box-shadow: 0 14px 36px rgba(15,23,42,.07); } .hp-card-hover:hover { transform: translateY(-1px); box-shadow: 0 18px 45px rgba(15,23,42,.10); } @media (max-width: 639px) { .hp-header-shell { border-left: 0; border-right: 0; border-top: 0; } .hp-mobile-safe-sticky { padding-top: max(.35rem, env(safe-area-inset-top)); } } :root { --hp-catalog-surface: rgba(255, 255, 255, .92); --hp-catalog-surface-strong: #ffffff; --hp-catalog-border: rgba(226, 232, 240, .92); --hp-catalog-muted: #64748b; --hp-catalog-ink: #0f172a; --hp-catalog-shadow: 0 10px 28px rgba(15, 23, 42, .075); --hp-catalog-shadow-hover: 0 14px 34px rgba(15, 23, 42, .11); --hp-catalog-radius: 14px; --hp-catalog-radius-sm: 10px; } .dark { --hp-catalog-surface: rgba(15, 23, 42, .88); --hp-catalog-surface-strong: #0f172a; --hp-catalog-border: rgba(51, 65, 85, .86); --hp-catalog-muted: #94a3b8; --hp-catalog-ink: #f8fafc; --hp-catalog-shadow: 0 14px 34px rgba(0, 0, 0, .28); --hp-catalog-shadow-hover: 0 18px 42px rgba(0, 0, 0, .36); } html, body { min-height: 100%; } body { background: radial-gradient(circle at 12% -8%, rgba(249, 115, 22, .10), transparent 24rem), radial-gradient(circle at 96% 4%, rgba(14, 165, 233, .08), transparent 26rem), linear-gradient(180deg, #f8fafc 0%, #f3f6fa 48%, #eef2f7 100%) !important; color: var(--hp-catalog-ink); } .dark body { background: radial-gradient(circle at 12% -8%, rgba(249, 115, 22, .14), transparent 27rem), radial-gradient(circle at 92% 6%, rgba(14, 165, 233, .10), transparent 24rem), linear-gradient(180deg, #020617 0%, #0f172a 55%, #020617 100%) !important; } #main-header { will-change: transform; } .hp-header-shell { border-radius: var(--hp-catalog-radius) !important; background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.86)) !important; border-color: var(--hp-catalog-border) !important; box-shadow: var(--hp-catalog-shadow) !important; padding: .6rem !important; } .dark .hp-header-shell { background: linear-gradient(180deg, rgba(15,23,42,.94), rgba(15,23,42,.84)) !important; border-color: var(--hp-catalog-border) !important; } .hp-header-shell::after { display: none !important; } .hp-brand-mark, .hp-action-btn, .hp-quick-btn, #theme-toggle-btn, .hp-search-input, #form-busca button[type="submit"], .hp-category-link, .focus-premium, #grid-lojas .card-link, #grid-lojas .logo-img, .distancia-wrapper, nav.sm\:hidden > div, nav.sm\:hidden a, nav.sm\:hidden button { border-radius: var(--hp-catalog-radius-sm) !important; } .hp-brand-mark { border-color: rgba(249, 115, 22, .16) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.88), 0 6px 15px rgba(249, 115, 22, .12) !important; } .hp-action-btn, .hp-quick-btn, #theme-toggle-btn { min-height: 2.25rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.76), 0 4px 12px rgba(15,23,42,.055) !important; } .dark .hp-action-btn, .dark .hp-quick-btn, .dark #theme-toggle-btn { box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 8px 18px rgba(0,0,0,.20) !important; } .hp-search-input { background: rgba(255,255,255,.96) !important; border-color: var(--hp-catalog-border) !important; box-shadow: inset 0 1px 2px rgba(15,23,42,.04), 0 6px 14px rgba(15,23,42,.05) !important; } .dark .hp-search-input { background: rgba(2,6,23,.62) !important; border-color: rgba(51,65,85,.88) !important; } #categories-container { padding-top: .55rem !important; gap: .4rem !important; } .hp-category-link { border-width: 1px !important; min-height: 2rem; letter-spacing: .01em; box-shadow: 0 2px 8px rgba(15,23,42,.035) !important; } .hp-category-link.categoria-ativa, #categories-container .bg-orange-600 { box-shadow: 0 7px 16px rgba(249,115,22,.22) !important; } .hp-catalog-hero { border-radius: var(--hp-catalog-radius) !important; background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.84)) !important; border-color: var(--hp-catalog-border) !important; box-shadow: var(--hp-catalog-shadow) !important; padding: 1rem !important; } .dark .hp-catalog-hero { background: linear-gradient(180deg, rgba(15,23,42,.90), rgba(15,23,42,.78)) !important; } .hp-catalog-hero .rounded-full, .hp-catalog-hero button { border-radius: var(--hp-catalog-radius-sm) !important; } #titulo-busca { letter-spacing: -.04em; } #contador-busca { color: var(--hp-catalog-muted) !important; } #grid-lojas { gap: .75rem !important; } #grid-lojas .card-link { background: var(--hp-catalog-surface) !important; border-color: var(--hp-catalog-border) !important; box-shadow: var(--hp-catalog-shadow) !important; padding: .82rem !important; overflow: hidden; transform: translateZ(0); } #grid-lojas .card-link:hover { transform: translateY(-2px) !important; box-shadow: var(--hp-catalog-shadow-hover) !important; border-color: rgba(249, 115, 22, .30) !important; } .dark #grid-lojas .card-link:hover { border-color: rgba(249, 115, 22, .42) !important; } #grid-lojas .card-link::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.18), transparent 38%); opacity: .7; z-index: 1; } .dark #grid-lojas .card-link::after { background: linear-gradient(180deg, rgba(255,255,255,.045), transparent 38%); } #grid-lojas .card-shine { opacity: .35; } #grid-lojas .logo-img { width: 4.75rem !important; height: 4.75rem !important; border-color: rgba(226,232,240,.96) !important; box-shadow: 0 6px 16px rgba(15,23,42,.08) !important; } .dark #grid-lojas .logo-img { border-color: rgba(51,65,85,.95) !important; box-shadow: 0 8px 20px rgba(0,0,0,.24) !important; } #grid-lojas .loja-nome { min-height: auto !important; letter-spacing: -.025em !important; } #grid-lojas .loja-categoria, #grid-lojas .cta-label, #grid-lojas .store-info-row { color: var(--hp-catalog-muted) !important; } #grid-lojas .status-container > span, #grid-lojas .distancia-wrapper { border-radius: 999px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.65); } #grid-lojas .relative.z-10.mt-3 { margin-top: .7rem !important; padding-top: .7rem !important; } #grid-lojas .shrink-0.w-9.h-9 { border-radius: var(--hp-catalog-radius-sm) !important; box-shadow: 0 6px 16px rgba(15,23,42,.10); } .premium-card::before { border-radius: inherit !important; opacity: .7 !important; } .premium-seal { box-shadow: 0 8px 18px rgba(15,23,42,.16) !important; } #empty-state, footer { border-radius: var(--hp-catalog-radius) !important; border-color: var(--hp-catalog-border) !important; background: var(--hp-catalog-surface) !important; box-shadow: var(--hp-catalog-shadow) !important; } footer .rounded-2xl, footer a, #empty-state .rounded-3xl, #empty-state button { border-radius: var(--hp-catalog-radius-sm) !important; } nav.sm\:hidden > div { background: rgba(255,255,255,.96) !important; border-color: var(--hp-catalog-border) !important; box-shadow: 0 -10px 28px rgba(15,23,42,.13) !important; } .dark nav.sm\:hidden > div { background: rgba(15,23,42,.96) !important; box-shadow: 0 -12px 34px rgba(0,0,0,.36) !important; } @media (min-width: 640px) { main.max-w-6xl { max-width: 74rem !important; } } @media (max-width: 639px) { .hp-header-shell { border-radius: 0 0 var(--hp-catalog-radius) var(--hp-catalog-radius) !important; padding: .5rem !important; } .hp-catalog-hero { padding: .9rem !important; } #titulo-busca { font-size: 1.35rem !important; line-height: 1.06 !important; } #grid-lojas { gap: .55rem !important; } #grid-lojas .card-link { padding: .72rem !important; } #grid-lojas .logo-img { width: 4.45rem !important; height: 4.45rem !important; } #grid-lojas .shrink-0.w-9.h-9 { width: 2rem !important; height: 2rem !important; } } .card-link.is-whatsapp-disabled { cursor: not-allowed; } .card-link.is-whatsapp-disabled:hover { transform: none; border-color: rgba(244, 63, 94, .34) !important; box-shadow: 0 10px 26px rgba(15, 23, 42, .06); } .card-link.is-whatsapp-disabled .cta-label { color: #dc2626 !important; } .dark .card-link.is-whatsapp-disabled .cta-label { color: #fca5a5 !important; } .card-link.is-whatsapp-disabled .fa-arrow-right { opacity: .45; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } } .hp-catalog-hero-v3 { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .hp-network-signature { display: inline-flex; align-items: center; gap: .45rem; border: 1px solid rgba(249,115,22,.18); background: rgba(255,247,237,.82); color: #c2410c; border-radius: 999px; padding: .42rem .68rem; font-size: .58rem; line-height: 1; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; } .dark .hp-network-signature { background: rgba(124,45,18,.18); border-color: rgba(249,115,22,.26); color: #fdba74; } .hp-personal-section { margin: .75rem 0 1rem; border: 1px solid var(--hp-catalog-border); background: var(--hp-catalog-surface); box-shadow: var(--hp-catalog-shadow); border-radius: var(--hp-catalog-radius); padding: .8rem; } .hp-personal-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .6rem; } .hp-personal-title { display: flex; align-items: center; gap: .45rem; color: var(--hp-catalog-ink); font-size: .72rem; font-weight: 900; letter-spacing: .02em; } .hp-personal-subtitle { color: var(--hp-catalog-muted); font-size: .62rem; font-weight: 700; } .hp-personal-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .55rem; } .hp-personal-group[hidden] { display: none !important; } .hp-personal-group-title { margin-bottom: .4rem; color: var(--hp-catalog-muted); font-size: .56rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; } .hp-shortcut-row { display: flex; gap: .45rem; overflow-x: auto; scrollbar-width: none; padding-bottom: .15rem; } .hp-shortcut-row::-webkit-scrollbar { display:none; } .hp-shortcut-card { flex: 0 0 auto; width: 13.2rem; min-height: 3.6rem; display: grid; grid-template-columns: 2.75rem minmax(0,1fr) auto; align-items: center; gap: .55rem; border: 1px solid var(--hp-catalog-border); background: rgba(255,255,255,.72); border-radius: 11px; padding: .42rem; color: var(--hp-catalog-ink); transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; } .dark .hp-shortcut-card { background: rgba(2,6,23,.38); } .hp-shortcut-card:hover { transform: translateY(-1px); border-color: rgba(249,115,22,.28); box-shadow: 0 8px 18px rgba(15,23,42,.08); } .hp-shortcut-card img { width: 2.75rem; height: 2.75rem; border-radius: 9px; object-fit: cover; background: #f1f5f9; } .hp-shortcut-card strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .68rem; line-height: 1.2; } .hp-shortcut-card small { display: block; margin-top: .15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--hp-catalog-muted); font-size: .56rem; font-weight: 700; } .hp-shortcut-card i { color: #f97316; font-size: .62rem; } #grid-lojas .card-link.hp-store-card-v3 { padding: 0 !important; border-radius: 14px !important; } .hp-store-cover { position: relative; height: 8.3rem; overflow: hidden; background: linear-gradient(135deg,#f1f5f9,#e2e8f0); } .dark .hp-store-cover { background: linear-gradient(135deg,#0f172a,#1e293b); } .hp-store-cover .cover-img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.002); transition: transform .35s cubic-bezier(.16,1,.3,1); } .hp-store-card-v3:hover .cover-img { transform: scale(1.035); } .hp-store-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(15,23,42,.02) 25%,rgba(15,23,42,.38) 100%); pointer-events: none; } .hp-store-cover-top { position: absolute; inset: .55rem .55rem auto .55rem; z-index: 5; display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; } .hp-favorite-control { width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid rgba(255,255,255,.72); background: rgba(15,23,42,.48); color: #fff; box-shadow: 0 5px 16px rgba(15,23,42,.14); backdrop-filter: blur(10px); cursor: pointer; transition: transform .15s ease, background .15s ease, color .15s ease; } .hp-favorite-control:hover { transform: scale(1.06); } .hp-favorite-control.is-favorite { background: #fff; color: #e11d48; } .hp-store-logo-wrap { position: absolute; left: .7rem; bottom: -.9rem; z-index: 6; } #grid-lojas .hp-store-logo-wrap .logo-img { width: 3.8rem !important; height: 3.8rem !important; border-radius: 12px !important; border: 3px solid rgba(255,255,255,.96) !important; box-shadow: 0 8px 20px rgba(15,23,42,.16) !important; background: #fff; } .dark #grid-lojas .hp-store-logo-wrap .logo-img { border-color: rgba(15,23,42,.96) !important; } .hp-store-body { padding: 1.25rem .85rem .8rem; } .hp-store-head { display:flex; align-items:flex-start; justify-content:space-between; gap:.7rem; } .hp-store-head-copy { min-width:0; flex:1; } #grid-lojas .hp-store-head .loja-nome { font-size: .92rem; line-height:1.2; min-height:0 !important; } #grid-lojas .hp-store-head .loja-categoria { margin-top:.18rem; font-size:.66rem; } .hp-store-action-arrow { width: 2rem; height: 2rem; border-radius: 9px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; background:#0f172a; color:#fff; transition: background .15s ease, transform .15s ease; } .dark .hp-store-action-arrow { background:#fff; color:#0f172a; } .hp-store-card-v3:hover .hp-store-action-arrow { background:#f97316; color:#fff; transform:translateX(1px); } .hp-store-meta { display:flex; align-items:center; flex-wrap:wrap; gap:.35rem; margin-top:.58rem; min-height:1.45rem; } .hp-store-footer { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-top:.65rem; padding-top:.65rem; border-top:1px solid rgba(226,232,240,.82); } .dark .hp-store-footer { border-top-color:rgba(51,65,85,.72); } .hp-store-footer .hp-partner-mark { display:inline-flex; align-items:center; gap:.32rem; color:var(--hp-catalog-muted); font-size:.55rem; font-weight:850; letter-spacing:.05em; text-transform:uppercase; } .hp-store-footer .hp-access-label { color:#ea580c; font-size:.58rem; font-weight:900; text-transform:uppercase; letter-spacing:.06em; } .dark .hp-store-footer .hp-access-label { color:#fdba74; } @media (min-width: 1024px) { #grid-lojas { grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap:.85rem !important; } } @media (max-width: 639px) { .hp-personal-grid { grid-template-columns:1fr; } .hp-personal-section { margin-top:.55rem; padding:.68rem; } .hp-store-cover { height:7.5rem; } .hp-network-signature { display:none; } #grid-lojas .hp-store-logo-wrap .logo-img { width:3.5rem !important; height:3.5rem !important; } .hp-store-body { padding-top:1.15rem; } }
/* Ajuste de logos: preserva a marca inteira dentro do selo do card. */
#grid-lojas .hp-store-logo-wrap .logo-img {
    object-fit: contain !important;
    object-position: center !important;
    padding: .28rem !important;
    box-sizing: border-box !important;
}

#grid-lojas .hp-store-card-v3 .hp-store-cover {
    overflow: visible !important;
}

#grid-lojas .hp-store-card-v3 .hp-store-logo-wrap {
    z-index: 30 !important;
}

#grid-lojas .hp-store-card-v3 .hp-store-head {
    padding-left: 4.15rem;
    min-height: 3rem;
}

#grid-lojas .hp-store-card-v3 .hp-store-head-copy {
    min-width: 0;
    position: relative;
    z-index: 10;
}

#grid-lojas .hp-store-card-v3 .hp-store-body {
    padding-top: .72rem;
}

@media (max-width: 639px) {
    #grid-lojas .hp-store-card-v3 .hp-store-head {
        padding-left: 3.85rem;
        min-height: 2.8rem;
    }

    #grid-lojas .hp-store-card-v3 .hp-store-body {
        padding-top: .68rem;
    }
}