/* =========================================================================
home-mrcd-v3.css • Multigiro Supermercado
Redesign da HOME (tema claro, full-width, seções de venda e cards turbinados)
Carregado por ÚLTIMO no do index.html, portanto sobrescreve os
estilos antigos (base/layout/components) onde for necessário.
Mantém compatibilidade com todo o JS existente (carrinho, modais, etc).
========================================================================= */
/* ---------------------------------------------------------------------------
1. TOKENS DE MARCA / TEMA
- Tema CLARO é o padrão. O tema escuro continua funcionando pelo
atributo html[data-theme="dark"].
--------------------------------------------------------------------------- */
:root{
/* Marca: amarelo/dourado Multigiro */
--mg-yellow: #FFC20E;
--mg-yellow-2: #F4A900;
--mg-ink: #1a1d24; /* texto principal */
--mg-ink-soft: #5b6470; /* texto secundário */
/* Cores de apoio (venda) */
--mg-red: #E53935; /* descontos */
--mg-green: #1e9e54; /* economia / frete grátis */
--mg-blue: #0d6efd;
/* Superfícies (tema claro) */
--mg-bg: #f4f6fb;
--mg-surface: #ffffff;
--mg-line: #e6e8ef;
--mg-shadow: 0 8px 28px rgba(20,30,55,0.08);
--mg-shadow-sm: 0 2px 10px rgba(20,30,55,0.06);
/* Largura útil (full-width controlado) */
--mg-wrap: min(1480px, 100% - 40px);
/* Reaproveita variáveis do projeto antigo p/ os componentes herdados */
--brand: var(--mg-yellow);
--brand2: var(--mg-yellow-2);
}
/* TEMA ESCURO (opcional, pelo botão de tema) */
html[data-theme="dark"]{
--mg-bg: #0b0f14;
--mg-surface: #11161e;
--mg-line: rgba(255,255,255,0.10);
--mg-ink: #e8eef6;
--mg-ink-soft:rgba(232,238,246,0.70);
--mg-shadow: 0 14px 40px rgba(0,0,0,0.45);
--mg-shadow-sm: 0 2px 12px rgba(0,0,0,0.40);
}
/* Fundo do site limpo (sobrescreve o gradiente escuro do base.css) */
body{
background: var(--mg-bg) !important;
color: var(--mg-ink);
}
html[data-theme="dark"] body{
background:
radial-gradient(900px 280px at 50% -40px, rgba(255,194,14,0.10), transparent 70%),
var(--mg-bg) !important;
}
/* Corrige o bug do menu inferior fixo "subindo" ao puxar o fim da página:
1) overscroll-behavior trava o efeito elástico (rubber-band) que arrasta
o menu fixo e mostra um vão preto no celular;
2) o fundo do passa a acompanhar o tema, para que qualquer área
exposta nunca apareça preta. */
html{
background: var(--mg-bg) !important;
overscroll-behavior: none;
}
body{
overscroll-behavior: none;
/* trava o "bounce" também via toque no iOS/Android */
overscroll-behavior-y: none;
}
/* Container mais largo para aproveitar a tela */
.container{ width: var(--mg-wrap) !important; }
/* Helper de acessibilidade: oculta visualmente mas mantém p/ leitores de tela */
.sr-only{
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0);
white-space: nowrap; border: 0;
}
/* Helper: faixa que ocupa 100% da largura (full-bleed) */
.full-bleed{
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
/* ---------------------------------------------------------------------------
2. TOP BAR DE UTILIDADES (diferenciais)
--------------------------------------------------------------------------- */
.utilbar{
background: linear-gradient(90deg, var(--mg-yellow), var(--mg-yellow-2));
color: #2a1d00;
font-weight: 700;
font-size: 13px;
}
.utilbar__inner{
display: flex;
align-items: center;
justify-content: center;
gap: 26px;
flex-wrap: wrap;
padding: 7px 0;
}
.utilbar__item{ display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.utilbar__item svg{ width: 16px; height: 16px; flex: 0 0 auto; }
.utilbar a{ color: inherit; text-decoration: underline; }
@media (max-width: 760px){
.utilbar__inner{ gap: 14px; font-size: 11.5px; padding: 6px 12px; }
/* esconde os 2 itens menos essenciais no celular */
.utilbar__item--opt{ display: none; }
}
/* ---------------------------------------------------------------------------
3. HEADER (logo • busca grande • conta/carrinho/WhatsApp)
--------------------------------------------------------------------------- */
.header{
position: sticky;
top: 0;
z-index: 30; /* abaixo do backdrop(40)/drawer(50)/modal(60) p/ não cobrir o carrinho */
background: var(--mg-surface) !important;
border-bottom: 1px solid var(--mg-line);
backdrop-filter: none;
box-shadow: var(--mg-shadow-sm);
}
.header__inner{
display: grid !important;
grid-template-columns: auto minmax(0,1fr) auto !important;
grid-template-areas: "brand search actions" !important;
align-items: center;
gap: 14px 20px !important;
padding: 12px 0 !important;
}
.brand{ grid-area: brand; display: flex !important; align-items: center; gap: 6px !important; }
.brand__mascot{ width: 70px !important; }
.brand__wordmark{ width: min(140px, 40vw) !important; }
.brand__tag{ font-size: 11px; color: var(--mg-ink-soft); }
/* Busca dominante e centralizada */
.search{ grid-area: search; max-width: 720px; width: 100%; margin: 0 auto; }
.search__input{
background: var(--mg-bg) !important;
border: 2px solid var(--mg-line) !important;
color: var(--mg-ink) !important;
padding: 14px 48px 14px 18px !important;
font-size: 15px;
}
.search__input::placeholder{ color: var(--mg-ink-soft); }
.search__input:focus{
border-color: var(--mg-yellow) !important;
box-shadow: 0 0 0 4px rgba(255,194,14,0.18) !important;
}
.search__clear{ color: var(--mg-ink-soft); }
/* Ações à direita */
.actions{
grid-area: actions;
display: flex !important;
align-items: center;
justify-content: flex-end;
flex-wrap: nowrap;
gap: 8px !important;
}
.actions .btn{
background: var(--mg-bg);
border: 1px solid var(--mg-line);
color: var(--mg-ink);
white-space: nowrap;
}
.actions .btn:hover{ background: #eef1f7; }
html[data-theme="dark"] .actions .btn:hover{ background: rgba(255,255,255,0.08); }
.actions .btn--primary{
background: linear-gradient(135deg, var(--mg-yellow), var(--mg-yellow-2)) !important;
color: #2a1d00 !important;
border: none !important;
font-weight: 800;
}
.actions .pill{
background: var(--mg-red);
border: none;
color: #fff;
}
/* Tablet/Mobile: marca + ações em cima; busca ocupa a linha inteira embaixo */
@media (max-width: 980px){
.header__inner{
grid-template-columns: 1fr auto !important;
grid-template-areas:
"brand actions"
"search search" !important;
gap: 10px !important;
padding: 10px 0 !important;
}
.search{ max-width: none !important; margin: 0 !important; }
}
@media (max-width: 520px){
.brand__mascot{ width: 36px !important; }
.brand__wordmark{ width: 92px !important; }
.brand__tag{ display: none; }
.header__inner{ gap: 6px !important; }
.actions{ gap: 4px !important; }
.actions .btn{ padding: 7px 8px !important; min-height: 34px; font-size: 13px; }
.actions .btn--offer{ padding: 7px 8px !important; }
.actions .btn--cart{ padding: 7px 9px !important; }
.btn--offer__pct{ width: 18px; height: 18px; font-size: 11px; }
.search__input{ padding: 12px 42px 12px 14px !important; font-size: 14px; }
}
/* telas estreitas: reduz marca p/ sobrar espaço aos botões */
@media (max-width: 430px){
.brand__mascot{ width: 30px !important; }
.brand__wordmark{ width: 80px !important; }
.actions{ gap: 3px !important; }
.actions .btn{ padding: 6px 7px !important; }
.actions .btn--offer{ padding: 6px 7px !important; }
.actions .btn--cart{ padding: 6px 8px !important; }
}
/* telas bem estreitas: esconde o mascote p/ sobrar espaço */
@media (max-width: 380px){
.brand__mascot{ display: none !important; }
.brand__wordmark{ width: 88px !important; }
.actions .btn{ padding: 6px 6px !important; }
}
/* ---------------------------------------------------------------------------
4. MENU DE DEPARTAMENTOS (barra horizontal)
--------------------------------------------------------------------------- */
.dept{
background: var(--mg-ink);
position: relative; /* não fixo: evita colidir com o header sticky */
z-index: 20; /* abaixo do header(30) e do backdrop(40) */
}
html[data-theme="dark"] .dept{ background: #060a0f; }
.dept__inner{
display: flex;
gap: 4px;
padding: 4px 0;
overflow-x: auto;
scrollbar-width: none;
}
.dept__inner::-webkit-scrollbar{ display: none; }
.dept__link{
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 7px;
padding: 12px 16px;
color: #f3f4f6;
font-weight: 700;
font-size: 14px;
border-radius: 10px;
white-space: nowrap;
}
.dept__link:hover{ background: rgba(255,255,255,0.12); }
.dept__link--hot{ color: var(--mg-yellow); }
/* ---------------------------------------------------------------------------
5. BANNER PRINCIPAL (reaproveita o carrossel .promo) + FAIXA DE MARCAS
--------------------------------------------------------------------------- */
.main{ padding: 0 0 48px !important; }
.hero{
display: block !important;
margin: 18px auto 6px !important;
}
.hero__card{
background: none !important;
border: 0 !important;
padding: 0 !important;
box-shadow: none !important;
}
.promo__slide{ border: 0 !important; background: transparent !important; }
.promo__slide img{
height: auto !important;
max-height: 420px;
object-fit: contain !important;
border-radius: 18px;
}
@media (max-width: 520px){
.promo__slide img{ max-height: 200px; }
}
/* Faixa de marcas vendidas */
.brands{
background: var(--mg-surface);
border-top: 1px solid var(--mg-line);
border-bottom: 1px solid var(--mg-line);
margin-top: 14px;
}
.brands__inner{
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
flex-wrap: wrap;
padding: 16px 0;
}
.brands__label{ font-weight: 800; color: var(--mg-ink-soft); font-size: 13px; }
.brands__list{
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
flex: 1 1 auto;
justify-content: center;
}
/* "logo" placeholder em pílula — troque por ![]()
da marca real */
.brand-chip{
border: 1px solid var(--mg-line);
border-radius: 999px;
padding: 8px 18px;
font-weight: 800;
font-size: 14px;
color: var(--mg-ink);
background: var(--mg-bg);
filter: grayscale(1) opacity(0.75);
transition: filter .2s ease, transform .2s ease;
}
.brand-chip:hover{ filter: none; transform: translateY(-2px); }
/* ---------------------------------------------------------------------------
6. PÍLULAS DE BENEFÍCIOS (4 blocos)
--------------------------------------------------------------------------- */
.benefits{
display: grid;
grid-template-columns: repeat(4, minmax(0,1fr));
gap: 14px;
margin: 22px auto;
}
.benefit{
display: flex;
align-items: center;
gap: 14px;
padding: 16px 18px;
background: var(--mg-surface);
border: 1px solid var(--mg-line);
border-radius: 16px;
box-shadow: var(--mg-shadow-sm);
transition: transform .15s ease, box-shadow .15s ease;
}
.benefit:hover{ transform: translateY(-3px); box-shadow: var(--mg-shadow); }
.benefit__icon{
flex: 0 0 auto;
width: 46px; height: 46px;
display: grid; place-items: center;
border-radius: 12px;
background: rgba(255,194,14,0.16);
color: var(--mg-yellow-2);
}
.benefit__icon svg{ width: 24px; height: 24px; }
.benefit__title{ font-weight: 800; font-size: 15px; }
.benefit__sub{ font-size: 12.5px; color: var(--mg-ink-soft); margin-top: 2px; }
@media (max-width: 900px){ .benefits{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 420px){ .benefits{ grid-template-columns: 1fr; } }
/* No TEMA CLARO: cards de benefício com fundo grafite e texto dourado */
html[data-theme="light"] .benefit{
background: #3f454e; /* grafite claro */
border-color: #4a515b;
box-shadow: 0 6px 18px rgba(20,30,55,0.12);
}
html[data-theme="light"] .benefit__title{ color: var(--mg-yellow); }
html[data-theme="light"] .benefit__sub{ color: rgba(255,194,14,0.78); }
html[data-theme="light"] .benefit__icon{
background: rgba(255,194,14,0.18);
color: var(--mg-yellow);
}
/* ---------------------------------------------------------------------------
7. FAIXA DE FRETE / ENTREGA
--------------------------------------------------------------------------- */
.shipband{
background: linear-gradient(90deg, var(--mg-green), #16a34a);
color: #fff;
margin: 8px 0 26px;
}
.shipband__inner{
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 14px 16px;
text-align: center;
font-weight: 700;
flex-wrap: wrap;
}
.shipband strong{ font-weight: 900; }
.shipband svg{ width: 22px; height: 22px; }
/* ---------------------------------------------------------------------------
8. TÍTULOS DE SEÇÃO
--------------------------------------------------------------------------- */
.sec{ margin: 30px auto; }
.sec__head{
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin-bottom: 16px;
}
.sec__title{
font-size: 24px;
font-weight: 900;
letter-spacing: -0.02em;
position: relative;
padding-left: 14px;
}
.sec__title::before{
content: "";
position: absolute;
left: 0; top: 4px; bottom: 4px;
width: 5px; border-radius: 4px;
background: linear-gradient(var(--mg-yellow), var(--mg-yellow-2));
}
.sec__link{ font-weight: 800; color: var(--mg-yellow-2); font-size: 14px; white-space: nowrap; }
.sec__link:hover{ text-decoration: underline; }
/* quando o "Ver todos" é um