/* Start Grana | camada visual comum do Grana Mercado.
   Carregado depois do CSS próprio de cada página: fontes, pílulas e superfícies no padrão Atrivo. */

body { font-family: "Plus Jakarta Sans", system-ui, sans-serif; }
h1, h2, h3 { letter-spacing: -0.02em; }

.hdr { background: rgba(255, 255, 255, .92) !important; backdrop-filter: blur(12px); box-shadow: 0 1px 2px rgba(20, 20, 20, .05), 0 10px 28px -18px rgba(20, 20, 20, .25); border-bottom: 0 !important; }
.logo img { height: 20px !important; width: auto !important; }
.hbtn, .mob-cta { background: #ffc400 !important; color: #141414 !important; border-radius: 999px !important; padding-left: 18px !important; padding-right: 18px !important; }
.hbtn:hover, .mob-cta:hover { background: #ffd43b !important; }
.srch input { border-radius: 999px !important; }
.rb { border-radius: 999px !important; }
.rb:hover, .rb.on { background: #ffc400 !important; color: #141414 !important; border-color: #ffc400 !important; }
.subnav, .sdp, .mob-menu { box-shadow: 0 10px 28px -12px rgba(20, 20, 20, .25); }
.sn-badge { background: #fff3c2 !important; color: #7a5d00 !important; border-color: transparent !important; border-radius: 999px !important; }
footer .atrivo { color: inherit; text-decoration: none; font-weight: 600; }
footer .atrivo:hover { text-decoration: underline; }