/* ============================================================
   ADEGA DA ESQUINA - Loja publica
   WS WebSoftware

   Escrito MOBILE FIRST: a regra base e a do celular, e as media
   queries so acrescentam espaco quando a tela cresce. Nenhuma
   regra "desfaz" desktop para caber no telefone.
   ============================================================ */

/* ------------------------------------------------------------
   1. CABECALHO
   ------------------------------------------------------------ */
.cabecalho-loja {
    position: sticky;
    top: 0;
    z-index: var(--z-cabecalho);
    background: var(--marca-carvao);
    color: var(--texto-invertido);
    padding-top: env(safe-area-inset-top, 0px);
}

.cabecalho-topo {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    min-height: var(--altura-cabecalho);
    padding-block: var(--e-2);
}

.cabecalho-marca { display: flex; align-items: center; gap: var(--e-3); min-width: 0; }
.cabecalho-marca .simbolo { width: 38px; height: 38px; flex-shrink: 0; }

.cabecalho-marca .nome {
    font-family: var(--fonte-titulo);
    font-size: var(--t-md);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.02em;
    color: #fff;
}

.cabecalho-marca .nome span { display: block; color: var(--marca-vermelho-claro); }

.cabecalho-acoes { margin-left: auto; display: flex; align-items: center; gap: var(--e-1); }

.cabecalho-acoes .botao-icone { color: rgba(255,249,244,.82); }
.cabecalho-acoes .botao-icone:hover { background: rgba(255,255,255,.1); color: #fff; }

/* Contador do carrinho */
.selo-carrinho { position: relative; }

.selo-carrinho .contagem {
    position: absolute;
    top: 4px; right: 3px;
    min-width: 19px; height: 19px;
    padding: 0 5px;
    display: grid;
    place-items: center;
    background: var(--marca-vermelho);
    color: var(--marca-carvao);
    border-radius: var(--raio-pill);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    border: 2px solid var(--marca-carvao);
}

.selo-carrinho .contagem:empty,
.selo-carrinho .contagem[data-zero="1"] { display: none; }

/* Faixa de informacao: taxa, prazo e estado da loja */
.faixa-info {
    display: flex;
    align-items: center;
    gap: var(--e-4);
    padding: var(--e-3) 0;
    border-top: 1px solid rgba(255,255,255,.1);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.faixa-info::-webkit-scrollbar { display: none; }

.faixa-info .item {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    font-size: var(--t-xs);
    color: rgba(255,249,244,.72);
    white-space: nowrap;
    flex-shrink: 0;
}

.faixa-info .item strong { color: #fff; font-weight: 600; }
.faixa-info .item svg { opacity: .75; flex-shrink: 0; }

.estado-loja { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.estado-loja.aberta  { color: #6EE7A8; }
.estado-loja.fechada { color: #FCA5A5; }

/* ------------------------------------------------------------
   2. BUSCA
   ------------------------------------------------------------ */
.busca-loja { position: relative; padding-bottom: var(--e-3); }

.busca-loja input {
    width: 100%;
    min-height: 44px;
    padding: var(--e-2) var(--e-4) var(--e-2) var(--e-10);
    font-size: 16px;
    color: #fff;
    background: rgba(255,255,255,.09);
    border: 1.5px solid rgba(255,255,255,.14);
    border-radius: var(--raio-pill);
    transition: background var(--rapido), border-color var(--rapido);
}

.busca-loja input::placeholder { color: rgba(255,249,244,.5); }

.busca-loja input:focus {
    outline: none;
    background: rgba(255,255,255,.14);
    border-color: var(--marca-vermelho-claro);
}

.busca-loja .lupa {
    position: absolute;
    left: var(--e-4);
    top: 50%;
    transform: translateY(-50%);
    margin-top: calc(var(--e-3) / -2);
    color: rgba(255,249,244,.55);
    pointer-events: none;
}

/* ------------------------------------------------------------
   3. HERO
   ------------------------------------------------------------ */
.hero {
    position: relative;
    background:
        radial-gradient(120% 90% at 15% 0%, rgba(245,184,0,.30), transparent 62%),
        linear-gradient(160deg, var(--marca-carvao) 0%, #2A211C 100%);
    color: var(--texto-invertido);
    padding: var(--e-10) 0 var(--e-12);
    overflow: hidden;
}

/* Marca d'agua do simbolo - presenca da marca sem poluir o texto */
.hero::after {
    content: '';
    position: absolute;
    right: -70px;
    bottom: -60px;
    width: 280px; height: 280px;
    background: url('../img/simbolo-adega.svg') no-repeat center / contain;
    opacity: .06;
    pointer-events: none;
}

.hero .conteudo { position: relative; z-index: 1; max-width: 34ch; }

.hero h1 {
    font-size: clamp(1.75rem, 7vw, 2.75rem);
    line-height: 1.12;
    color: #fff;
    margin-bottom: var(--e-4);
    letter-spacing: -.03em;
}

.hero p {
    font-size: var(--t-md);
    color: rgba(255,249,244,.76);
    margin-bottom: var(--e-6);
    max-width: 42ch;
}

.hero .acoes { display: flex; flex-wrap: wrap; gap: var(--e-3); }

@media (min-width: 900px) {
    .hero { padding: var(--e-20) 0; }
    .hero::after { width: 420px; height: 420px; right: 0; bottom: -80px; opacity: .07; }
    .hero .conteudo { max-width: 46ch; }
}

/* ------------------------------------------------------------
   4. CATEGORIAS (chips horizontais)

   O concorrente empilha as categorias na vertical e o texto
   estoura o chip no celular. Aqui a lista rola na horizontal,
   com o chip dimensionado pelo conteudo e sem quebra de linha.
   ------------------------------------------------------------ */
.barra-categorias {
    position: sticky;
    top: calc(var(--altura-cabecalho) + env(safe-area-inset-top, 0px));
    z-index: 30;
    background: var(--fundo);
    border-bottom: 1px solid var(--borda);
    padding-block: var(--e-3);
}

.trilho-categorias {
    display: flex;
    gap: var(--e-2);
    overflow-x: auto;
    scroll-snap-type: x proximate;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-inline: var(--e-4);
    margin-inline: calc(var(--e-4) * -1);
}

.trilho-categorias::-webkit-scrollbar { display: none; }

@media (min-width: 768px) {
    .trilho-categorias { padding-inline: var(--e-6); margin-inline: calc(var(--e-6) * -1); }
}

.chip-categoria {
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    flex: 0 0 auto;
    scroll-snap-align: start;
    min-height: 42px;
    padding: 0 var(--e-4);
    background: var(--superficie);
    border: 1.5px solid var(--borda);
    border-radius: var(--raio-pill);
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--texto-2);
    white-space: nowrap;
    transition: background var(--rapido), border-color var(--rapido), color var(--rapido);
}

.chip-categoria:hover { border-color: var(--borda-forte); color: var(--texto); }

.chip-categoria.ativo {
    background: var(--marca-vermelho);
    border-color: var(--marca-vermelho);
    color: var(--marca-carvao);
}

.chip-categoria .conta {
    font-size: var(--t-xs);
    font-weight: 700;
    opacity: .6;
}

/* ------------------------------------------------------------
   5. SECAO
   ------------------------------------------------------------ */
.secao { padding-block: var(--e-8); scroll-margin-top: 130px; }

.secao-topo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--e-3);
    margin-bottom: var(--e-5);
}

.secao-topo h2 { font-size: var(--t-xl); }

/* O padding negativo aumenta a area de toque sem deslocar o texto:
   o link continua alinhado ao titulo, mas fica confortavel no dedo. */
.secao-topo .link {
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--marca-texto);
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding-inline: var(--e-2);
    margin-inline: calc(var(--e-2) * -1);
}

@media (min-width: 900px) {
    .secao-topo h2 { font-size: var(--t-2xl); }
}

/* ------------------------------------------------------------
   6. GRADE DE PRODUTOS

   Uma coluna no celular (o cartao mostra foto + nome + preco +
   acao numa linha confortavel), duas a partir de 560px.
   ------------------------------------------------------------ */
.grade-produtos {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--e-3);
}

@media (min-width: 560px) { .grade-produtos { grid-template-columns: repeat(2, 1fr); gap: var(--e-4); } }
@media (min-width: 900px) { .grade-produtos { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1140px){ .grade-produtos { grid-template-columns: repeat(4, 1fr); } }

/* --- Cartao do produto: horizontal no celular ---------------- */
.cartao-produto {
    position: relative;
    display: flex;
    gap: var(--e-4);
    padding: var(--e-3);
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    transition: border-color var(--normal), box-shadow var(--normal), transform var(--normal);
}

.cartao-produto:hover {
    border-color: var(--borda-forte);
    box-shadow: var(--sombra-sm);
}

.cartao-produto .foto {
    position: relative;
    flex: 0 0 96px;
    width: 96px;
    height: 96px;
    border-radius: var(--raio-sm);
    overflow: hidden;
    background: var(--superficie-2);
}

.cartao-produto .foto img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--suave);
}

.cartao-produto:hover .foto img { transform: scale(1.05); }

.cartao-produto .info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--e-1);
}

.cartao-produto .nome {
    font-family: var(--fonte-titulo);
    font-size: var(--t-base);
    font-weight: 700;
    line-height: 1.28;
    letter-spacing: -.01em;
    /* Duas linhas no maximo: mantem todos os cartoes na mesma altura */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cartao-produto .descricao {
    font-size: var(--t-xs);
    color: var(--texto-3);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cartao-produto .rodape {
    margin-top: auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--e-2);
    padding-top: var(--e-2);
}

.cartao-produto .valores { min-width: 0; }
.cartao-produto .preco { font-size: var(--t-md); color: var(--texto); }
.cartao-produto .preco-antigo { display: block; font-size: var(--t-xs); }

/* Botao de adicionar: circulo de 42px, alvo confortavel no toque */
.botao-adicionar {
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    flex-shrink: 0;
    background: var(--marca-vermelho);
    color: var(--marca-carvao);
    border-radius: var(--raio-sm);
    box-shadow: var(--sombra-xs);
    transition: background var(--rapido), transform var(--rapido);
}

.botao-adicionar:hover { background: var(--marca-vermelho-forte); }
.botao-adicionar:active { transform: scale(.92); }

/* Selo de destaque/promocao no canto da foto */
.selo-produto {
    position: absolute;
    top: var(--e-2); left: var(--e-2);
    padding: 3px var(--e-2);
    background: var(--marca-vermelho);
    color: var(--marca-carvao);
    border-radius: var(--raio-xs);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    z-index: 1;
}

.selo-produto.escuro { background: var(--marca-carvao); }

/* Produto indisponivel: continua visivel, mas claramente fora */
.cartao-produto.indisponivel { opacity: .62; }
.cartao-produto.indisponivel .foto::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(251,248,245,.55);
}

.tarja-indisponivel {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: 3px;
    background: var(--marca-carvao);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* ------------------------------------------------------------
   7. VITRINE HORIZONTAL (destaques)
   ------------------------------------------------------------ */
.vitrine {
    display: flex;
    gap: var(--e-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-inline: var(--e-4);
    margin-inline: calc(var(--e-4) * -1);
    padding-bottom: var(--e-2);
}

.vitrine::-webkit-scrollbar { display: none; }

@media (min-width: 768px) {
    .vitrine { padding-inline: var(--e-6); margin-inline: calc(var(--e-6) * -1); }
}

.vitrine .cartao-produto {
    flex: 0 0 min(78vw, 300px);
    scroll-snap-align: start;
}

/* ------------------------------------------------------------
   8. PAGINA DO PRODUTO
   ------------------------------------------------------------ */
.produto-foto {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: var(--superficie-2);
    overflow: hidden;
}

.produto-foto img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 900px) {
    .produto-detalhe { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--e-10); align-items: start; }
    .produto-foto { border-radius: var(--raio-lg); aspect-ratio: 1; position: sticky; top: 100px; }
}

.produto-cabecalho { padding-block: var(--e-5) var(--e-4); }

.produto-cabecalho h1 {
    font-size: var(--t-2xl);
    line-height: 1.15;
    margin-bottom: var(--e-2);
}

.produto-cabecalho .categoria {
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--marca-texto);
    margin-bottom: var(--e-2);
    display: block;
}

.produto-preco {
    display: flex;
    align-items: baseline;
    gap: var(--e-2);
    flex-wrap: wrap;
    margin-block: var(--e-4);
}

.produto-preco .preco { font-size: var(--t-2xl); color: var(--marca-texto); }

.produto-descricao {
    color: var(--texto-2);
    line-height: 1.65;
    font-size: var(--t-base);
}

/* Grupo de opcao (corte, preparo) */
.grupo-opcao { margin-block: var(--e-6); }

.grupo-opcao .titulo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--e-2);
    margin-bottom: var(--e-3);
}

.grupo-opcao .titulo h3 { font-size: var(--t-md); }
.grupo-opcao .opcoes { display: flex; flex-direction: column; gap: var(--e-2); }

/* Seletor de peso: degraus prontos + o passo livre */
.seletor-peso { display: flex; flex-wrap: wrap; gap: var(--e-2); }

.pilula-peso {
    min-height: 44px;
    padding: 0 var(--e-4);
    background: var(--superficie);
    border: 1.5px solid var(--borda-forte);
    border-radius: var(--raio-sm);
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--texto-2);
    transition: all var(--rapido);
}

.pilula-peso:hover { border-color: var(--texto-3); }

.pilula-peso.ativo {
    background: var(--marca-vermelho);
    border-color: var(--marca-vermelho);
    color: var(--marca-carvao);
}

/*
   Barra de "adicionar ao carrinho".

   No celular ela e FIXA no rodape, nao sticky: sticky dentro do
   formulario fazia a barra flutuar no meio do conteudo e tapar o
   seletor de peso enquanto a pessoa rolava. Fixa, ela fica sempre
   no mesmo lugar e o padding do body reserva o espaco dela.
*/
.barra-produto {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: var(--z-barra);
    display: flex;
    align-items: center;
    gap: var(--e-3);
    padding: var(--e-3) var(--e-4) calc(var(--e-3) + env(safe-area-inset-bottom, 0px));
    background: var(--superficie);
    border-top: 1px solid var(--borda);
    box-shadow: 0 -6px 22px rgba(28,22,20,.10);
}

.barra-produto .botao { flex: 1; }

/* Espaco no fim da pagina para a barra nao tapar o ultimo conteudo */
body.com-barra-produto { padding-bottom: 88px; }

@media (min-width: 900px) {
    /* No desktop o botao volta para o fluxo, logo abaixo das opcoes. */
    .barra-produto {
        position: static;
        padding-inline: 0;
        border: 0;
        box-shadow: none;
        background: transparent;
    }

    body.com-barra-produto { padding-bottom: 0; }
}

/* ------------------------------------------------------------
   9. BARRA DO CARRINHO (flutuante no mobile)
   ------------------------------------------------------------ */
.barra-carrinho {
    position: fixed;
    left: var(--e-4);
    right: var(--e-4);
    bottom: calc(var(--e-4) + env(safe-area-inset-bottom, 0px));
    z-index: var(--z-barra);
    display: flex;
    align-items: center;
    gap: var(--e-3);
    padding: var(--e-3) var(--e-3) var(--e-3) var(--e-5);
    background: var(--marca-carvao);
    color: var(--texto-invertido);
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra-lg);
    animation: subir var(--suave);
}

@keyframes subir {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.barra-carrinho .resumo { flex: 1; min-width: 0; line-height: 1.3; }
.barra-carrinho .resumo .itens { font-size: var(--t-xs); color: rgba(255,249,244,.66); }
.barra-carrinho .resumo .valor { font-size: var(--t-md); font-weight: 700; font-variant-numeric: tabular-nums; }

.barra-carrinho .botao-principal { min-height: 44px; }

@media (min-width: 900px) {
    .barra-carrinho { left: auto; right: var(--e-6); bottom: var(--e-6); min-width: 340px; }
}

/* Espaco no fim da pagina para a barra nao tapar conteudo */
body.com-barra-carrinho { padding-bottom: 96px; }

/*
   Na pagina do produto as duas barras existem ao mesmo tempo: a de
   "adicionar" fica colada no rodape e a do carrinho sobe acima dela,
   em vez de uma cobrir a outra.
*/
body.com-barra-produto.com-barra-carrinho .barra-carrinho {
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
}

body.com-barra-produto.com-barra-carrinho { padding-bottom: 168px; }

@media (min-width: 900px) {
    body.com-barra-produto.com-barra-carrinho .barra-carrinho {
        bottom: var(--e-6);
    }

    body.com-barra-produto.com-barra-carrinho { padding-bottom: 0; }
}

/* ------------------------------------------------------------
   10. CARRINHO E CHECKOUT
   ------------------------------------------------------------ */
.item-carrinho {
    display: flex;
    gap: var(--e-3);
    padding: var(--e-4) 0;
    border-bottom: 1px solid var(--borda);
}

.item-carrinho:last-child { border-bottom: 0; }

.item-carrinho .foto {
    flex: 0 0 68px;
    width: 68px; height: 68px;
    border-radius: var(--raio-sm);
    overflow: hidden;
    background: var(--superficie-2);
}

.item-carrinho .foto img { width: 100%; height: 100%; object-fit: cover; }
.item-carrinho .info { flex: 1; min-width: 0; }

.item-carrinho .nome {
    font-weight: 600;
    font-size: var(--t-base);
    line-height: 1.3;
    margin-bottom: 2px;
}

.item-carrinho .detalhe { font-size: var(--t-xs); color: var(--texto-3); line-height: 1.45; }
.item-carrinho .linha-final {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-2);
    margin-top: var(--e-2);
}

.item-carrinho .subtotal { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Resumo de valores */
.resumo-valores { display: flex; flex-direction: column; gap: var(--e-2); }

.resumo-valores .linha {
    display: flex;
    justify-content: space-between;
    gap: var(--e-3);
    font-size: var(--t-sm);
    color: var(--texto-2);
}

.resumo-valores .linha span:last-child { font-variant-numeric: tabular-nums; color: var(--texto); }

.resumo-valores .total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--e-3);
    padding-top: var(--e-3);
    margin-top: var(--e-1);
    border-top: 1.5px solid var(--borda);
    font-family: var(--fonte-titulo);
    font-size: var(--t-lg);
    font-weight: 700;
}

.resumo-valores .total .valor { color: var(--marca-texto); font-size: var(--t-xl); }

/* Passos do checkout */
.passos-checkout {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    margin-bottom: var(--e-6);
}

.passos-checkout .passo {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--e-2);
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--texto-3);
}

.passos-checkout .passo .barra {
    height: 4px;
    background: var(--superficie-3);
    border-radius: var(--raio-pill);
    transition: background var(--normal);
}

.passos-checkout .passo.ativo { color: var(--marca-texto); }
.passos-checkout .passo.ativo .barra,
.passos-checkout .passo.feito .barra { background: var(--marca-vermelho); }
.passos-checkout .passo.feito { color: var(--texto-2); }

/* ------------------------------------------------------------
   11. CONFIRMACAO DO PEDIDO
   ------------------------------------------------------------ */
.confirmacao { text-align: center; padding-block: var(--e-10); }

.confirmacao .marca-ok {
    display: grid;
    place-items: center;
    width: 84px; height: 84px;
    margin: 0 auto var(--e-5);
    border-radius: 50%;
    background: var(--sucesso-bg);
    color: var(--sucesso);
    animation: aparecer var(--suave);
}

@keyframes aparecer {
    from { opacity: 0; transform: scale(.82); }
    to   { opacity: 1; transform: scale(1); }
}

.confirmacao .numero-pedido {
    font-family: var(--fonte-titulo);
    font-size: var(--t-3xl);
    font-weight: 800;
    color: var(--marca-texto);
    letter-spacing: -.03em;
    line-height: 1;
    margin-block: var(--e-2) var(--e-3);
}

/* Linha do tempo do pedido (acompanhamento do cliente) */
.linha-tempo { display: flex; flex-direction: column; gap: 0; text-align: left; }

.linha-tempo .etapa {
    display: flex;
    gap: var(--e-4);
    padding-bottom: var(--e-5);
    position: relative;
}

.linha-tempo .etapa:last-child { padding-bottom: 0; }

.linha-tempo .etapa::before {
    content: '';
    position: absolute;
    left: 13px;
    top: 30px;
    bottom: -2px;
    width: 2px;
    background: var(--borda);
}

.linha-tempo .etapa:last-child::before { display: none; }

.linha-tempo .marca {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--superficie-3);
    color: var(--texto-3);
    border: 2px solid var(--fundo);
}

.linha-tempo .etapa.feita .marca { background: var(--sucesso); color: #fff; }
.linha-tempo .etapa.atual .marca { background: var(--marca-vermelho); color: var(--marca-carvao); }
.linha-tempo .etapa.feita::before { background: var(--sucesso); }

.linha-tempo .texto strong { display: block; font-size: var(--t-base); }
.linha-tempo .texto span { font-size: var(--t-xs); color: var(--texto-3); }
.linha-tempo .etapa.pendente .texto strong { color: var(--texto-3); font-weight: 500; }

/* ------------------------------------------------------------
   12. RODAPE
   ------------------------------------------------------------ */
.rodape-loja {
    margin-top: var(--e-12);
    padding-block: var(--e-10) var(--e-8);
    background: var(--marca-carvao);
    color: rgba(255,249,244,.68);
    font-size: var(--t-sm);
}

.rodape-loja .colunas { display: grid; gap: var(--e-8); }

@media (min-width: 720px) {
    .rodape-loja .colunas { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--e-10); }
}

.rodape-loja h4 {
    color: #fff;
    font-size: var(--t-sm);
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: var(--e-3);
}

.rodape-loja a { color: rgba(255,249,244,.68); transition: color var(--rapido); }
.rodape-loja a:hover { color: #fff; }

/* Contato: cada linha e um alvo de toque de verdade (telefone,
   WhatsApp), nao um texto fino de 20px de altura. */
.rodape-loja .lista { display: flex; flex-direction: column; gap: var(--e-1); }

.rodape-loja .lista > a,
.rodape-loja .lista > span {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    min-height: 40px;
}

.rodape-loja .assinatura {
    margin-top: var(--e-8);
    padding-top: var(--e-5);
    border-top: 1px solid rgba(255,255,255,.1);
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-3);
    justify-content: space-between;
    font-size: var(--t-xs);
    color: rgba(255,249,244,.45);
}

/* Horarios no rodape */
.tabela-horarios { display: flex; flex-direction: column; gap: 6px; font-size: var(--t-xs); }
.tabela-horarios .dia { display: flex; justify-content: space-between; gap: var(--e-3); }
.tabela-horarios .dia.hoje { color: #fff; font-weight: 700; }
.tabela-horarios .dia .fechado { color: rgba(255,249,244,.4); }