/* ============================================================
   ADEGAONE - 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(--menu-fundo);
    color: var(--menu-texto);
    border-bottom: 1px solid var(--menu-borda);
    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: var(--menu-texto);
}

.cabecalho-marca .nome span { display: inline; color: var(--menu-destaque); }

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

.cabecalho-acoes .botao-icone { color: var(--menu-texto-2); }
.cabecalho-acoes .botao-icone:hover { background: var(--menu-hover); color: var(--menu-texto); }

/* 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(--menu-fundo);
}

.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 var(--menu-borda);
    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: var(--menu-texto-2);
    white-space: nowrap;
    flex-shrink: 0;
}

.faixa-info .item strong { color: var(--menu-texto); 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: var(--menu-aberta); }
.estado-loja.fechada { color: var(--menu-fechada); }

/* ------------------------------------------------------------
   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: var(--menu-texto);
    background: var(--menu-campo);
    border: 1.5px solid var(--menu-campo-borda);
    border-radius: var(--raio-pill);
    transition: background var(--rapido), border-color var(--rapido);
}

.busca-loja input::placeholder { color: var(--menu-texto-3); }

.busca-loja input:focus {
    outline: none;
    background: var(--menu-campo);
    border-color: var(--menu-destaque);
}

.busca-loja .lupa {
    position: absolute;
    left: var(--e-4);
    top: 50%;
    transform: translateY(-50%);
    margin-top: calc(var(--e-3) / -2);
    color: var(--menu-texto-3);
    pointer-events: none;
}

/* Sugestoes enquanto digita (loja.js). Acima da barra de categorias,
   abaixo do cabecalho. */
.busca-viva-caixa { position: relative; }

.sugestoes-busca {
    position: absolute;
    top: calc(100% + var(--e-1));
    left: 0;
    right: 0;
    z-index: 35;
    max-height: min(60vh, 420px);
    overflow-y: auto;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra-lg);
    color: var(--texto);
    text-align: left;
}

.sugestao-busca {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-3);
    min-height: 48px;
    padding: var(--e-2) var(--e-4);
    border-top: 1px solid var(--borda);
    color: var(--texto);
    font-size: var(--t-sm);
}

.sugestao-busca:first-child { border-top: 0; }
.sugestao-busca:hover,
.sugestao-busca.ativa { background: var(--superficie-2); }
.sugestao-busca .foto {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: var(--raio-xs);
    object-fit: cover;
    background: var(--superficie-2);
}

.sugestao-busca .nome { flex: 1; min-width: 0; font-weight: 600; }
.sugestao-busca .valor { flex: none; font-weight: 800; color: var(--marca-texto); white-space: nowrap; }

.sugestao-busca.ver-todos { justify-content: center; font-weight: 700; color: var(--marca-texto); }

.sugestoes-busca .sem-sugestao {
    padding: var(--e-4);
    font-size: var(--t-sm);
    color: var(--texto-2);
    text-align: center;
}

/* ------------------------------------------------------------
   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;
}

/* Com o banner de Configuracoes > Loja: a foto cobre o destaque, e uma
   pelicula escura (--banner-veu, 0 a .85) garante a leitura do texto -
   mais forte a esquerda, onde fica o titulo. background-position vem do
   "ponto de foco" escolhido na tela de configuracao. */
.hero.com-imagem {
    background-color: var(--marca-carvao);
    background-size: cover;
    background-repeat: no-repeat;
}

.hero.com-imagem::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, #17120F 0%, rgba(23, 18, 15, .55) 60%, rgba(23, 18, 15, .15) 100%);
    opacity: var(--banner-veu, .55);
    pointer-events: none;
}

.hero.com-imagem::after { display: none; } /* sem marca d'agua sobre a foto */

.hero.com-imagem h1,
.hero.com-imagem p { text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }

.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); }
}

.linha-categorias { display: flex; align-items: center; gap: var(--e-2); }
.linha-categorias .trilho-categorias { flex: 1; min-width: 0; }

/* Busca do celular: nao rola junto (as categorias somem por tras dela) e
   chama atencao - contorno dourado, icone forte e a palavra "Buscar".
   ".chip-categoria.chip-busca": a regra do chip vem depois neste arquivo e,
   com o mesmo peso, apertava o icone ate 8px. */
.chip-categoria.chip-busca {
    flex: none;
    justify-content: center;
    gap: 6px;
    padding: 0 var(--e-3) 0 var(--e-3);
    background: var(--ouro-suave);
    border-color: var(--marca-vermelho);
    color: var(--marca-texto);
    font-weight: 700;
    box-shadow: var(--sombra-xs);
}

.chip-categoria.chip-busca svg { flex-shrink: 0; }
.chip-categoria.chip-busca:hover,
.chip-categoria.chip-busca:active { background: var(--marca-vermelho); color: var(--marca-carvao); }

@media (max-width: 767px) {
    .chip-busca + .trilho-categorias { margin-left: 0; padding-left: 0; }
}

.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;
    min-width: 0; /* na grade, texto de uma linha (condicao da oferta) nao estica o cartao */
    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;
}

/* Fundo escuro pede letra clara: herdava a cor carvao e sumia (preto no preto).
   No tema escuro ganha uma borda para nao se perder na foto. */
.selo-produto.escuro { background: var(--marca-carvao); color: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.18); }

/* Oferta de cupom no cartao: selo verde compacto + condicao numa linha */
.cartao-produto .oferta-cupom { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.cartao-produto .oferta-cupom strong {
    padding: 1px 7px;
    border-radius: var(--raio-pill);
    background: var(--sucesso-bg);
    color: var(--sucesso);
    font-size: 11px;
    letter-spacing: .02em;
}
.cartao-produto .oferta-cupom .condicao {
    flex-basis: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

.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);
    /* O encaixe respeita o recuo: o primeiro cartao nao cola na borda e a fila comeca no zero */
    scroll-padding-inline: var(--e-4);
    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); scroll-padding-inline: var(--e-6); }
}

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

/* Slide no computador: setas no topo da secao (loja.js). No celular, o dedo rola. */
.vitrine-acoes { display: flex; align-items: center; gap: var(--e-4); }
.vitrine-setas { display: none; gap: var(--e-2); }

@media (min-width: 768px) {
    .vitrine-setas:not([hidden]) { display: flex; }
    .vitrine { scroll-behavior: smooth; }

    /* Bordas esmaecidas: o cartao cortado some aos poucos em vez de cortar seco */
    .vitrine {
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--e-6), #000 calc(100% - var(--e-6)), transparent 100%);
                mask-image: linear-gradient(to right, transparent 0, #000 var(--e-6), #000 calc(100% - var(--e-6)), transparent 100%);
    }
}

.vitrine-seta {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    border: 1.5px solid var(--borda);
    border-radius: var(--raio-pill);
    background: var(--superficie);
    color: var(--texto);
    transition: background var(--rapido), border-color var(--rapido), opacity var(--rapido);
}

.vitrine-seta:hover:not(:disabled) { border-color: var(--marca-vermelho); background: var(--marca-vermelho); color: var(--marca-carvao); }
.vitrine-seta:disabled { opacity: .35; cursor: default; }

/* ------------------------------------------------------------
   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; }

/* 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; }

/* Codigo de entrega: o cliente le em voz alta para o entregador */
.codigo-entrega {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--e-1);
    padding: var(--e-4);
    text-align: center;
    background: var(--superficie);
    border: 2px dashed var(--borda-forte);
    border-radius: var(--raio);
}

.codigo-entrega-rotulo {
    display: inline-flex;
    align-items: center;
    gap: var(--e-1);
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--texto-2);
}

.codigo-entrega-numero {
    font-family: var(--fonte-titulo);
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: .3em;
    margin-right: -.3em; /* o espacamento do ultimo digito nao desloca o centro */
    font-variant-numeric: tabular-nums;
}

.codigo-entrega-ajuda { font-size: var(--t-xs); color: var(--texto-3); max-width: 34ch; }

/* Quem leva o pedido, no fim do andamento */
.entregador-pedido {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    padding: var(--e-3);
    background: var(--superficie-2);
    border-radius: var(--raio-sm);
}

.entregador-pedido-icone {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--marca-carvao);
    color: var(--texto-invertido);
}

.entregador-pedido-rotulo { display: block; font-size: var(--t-xs); color: var(--texto-3); }
.entregador-pedido-texto { font-size: var(--t-sm); color: var(--texto-2); }

/* ------------------------------------------------------------
   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); }

/* ============================================================
   PORTAL DO CLIENTE (/conta) e conta no checkout
   ------------------------------------------------------------ */
.conta-caixa { max-width: 520px; margin-inline: auto; }
.conta-caixa.conta-larga { max-width: 680px; }

.conta-topo { margin-bottom: var(--e-5); }
.conta-topo h1 { margin: 2px 0 var(--e-1); }

.conta-topo-linha { display: flex; align-items: center; gap: var(--e-4); }

.conta-avatar {
    display: grid;
    place-items: center;
    width: 56px; height: 56px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--marca-carvao);
    color: var(--marca-vermelho);
    font-family: var(--fonte-titulo);
    font-weight: 800;
    font-size: var(--t-md);
}

.lista-conta { display: flex; flex-direction: column; }

.item-conta {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    padding: var(--e-3) var(--e-5);
    border-top: 1px solid var(--borda);
    color: var(--texto);
    min-height: 60px;
}

.item-conta:first-child { border-top: 0; }
.item-conta .crescer { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.item-conta .direita { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
a.item-conta:hover { background: var(--superficie-2); }

/* Meus dados: formulario de endereco aberto logo abaixo do item */
.form-endereco {
    border-top: 1px solid var(--borda);
    background: var(--superficie-2);
}

/* Checkout: "comprando como" e o bloco de criar conta */
.conta-checkout {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    padding: var(--e-3) var(--e-4);
    margin-bottom: var(--e-4);
    border-radius: var(--raio-sm);
    background: var(--superficie-2);
    font-size: var(--t-sm);
}

.conta-checkout .conta-avatar { width: 38px; height: 38px; font-size: var(--t-sm); }

.criar-conta-checkout {
    margin-top: var(--e-4);
    padding: var(--e-4);
    border: 1.5px dashed var(--borda-forte);
    border-radius: var(--raio-sm);
}

.criar-conta-checkout h4 { font-size: var(--t-base); margin-bottom: 2px; }

/* Checkout: cliente com conta confirma o endereco salvo antes de pedir */
.confirmar-endereco {
    margin-bottom: var(--e-4);
    padding: var(--e-4);
    border: 1.5px solid var(--marca-vermelho);
    border-radius: var(--raio);
    background: var(--ouro-suave-2);
    box-shadow: var(--sombra-sm);
}

.confirmar-endereco .topo { display: flex; align-items: flex-start; gap: var(--e-3); }

.confirmar-endereco .pino {
    display: grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: var(--raio-pill);
    background: var(--ouro-suave);
    color: var(--marca-texto);
}

.confirmar-endereco .pergunta {
    display: block;
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--marca-texto);
}

.confirmar-endereco .linha-1 { display: block; font-size: var(--t-md); line-height: 1.35; margin-top: 2px; }
.confirmar-endereco .linha-2 { display: block; font-size: var(--t-sm); color: var(--texto-2); }

.confirmar-endereco .dica { margin: var(--e-3) 0; font-size: var(--t-sm); color: var(--texto-2); }

.confirmar-endereco .acoes { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.confirmar-endereco .acoes .botao { flex: 1 1 180px; }

/* Tentou pedir sem responder: o cartao chama a atencao */
.confirmar-endereco.chamar { animation: chamar-endereco .5s ease-in-out 2; }

@keyframes chamar-endereco {
    0%, 100% { transform: none; box-shadow: var(--sombra-sm); }
    50%      { transform: scale(1.015); box-shadow: 0 0 0 4px var(--ouro-suave), var(--sombra); }
}

.endereco-confirmado {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    padding: var(--e-3) var(--e-4);
    border: 1px solid var(--sucesso-borda);
    border-radius: var(--raio-sm);
    background: var(--sucesso-bg);
    color: var(--sucesso-texto);
}

.endereco-confirmado strong,
.endereco-confirmado span { display: block; }
.endereco-confirmado strong { color: var(--texto); }

/* "Minha localizacao" abaixo do CEP: preenche o endereco pelo GPS */
.botao-localizacao {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    margin-top: var(--e-1);
    padding: 0 var(--e-1);
    border: 0;
    border-radius: var(--raio-xs);
    background: transparent;
    color: var(--marca-texto);
    font: inherit;
    font-size: var(--t-sm);
    font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.botao-localizacao:hover { background: var(--ouro-suave-2); }
.botao-localizacao:focus-visible { outline: 2px solid var(--marca-vermelho); outline-offset: 2px; }
.botao-localizacao:disabled { cursor: progress; opacity: .75; }
.botao-localizacao.carregando svg { animation: localizando 1s ease-in-out infinite; }

@keyframes localizando {
    50% { transform: scale(.7); opacity: .5; }
}

.localizacao-aviso {
    display: block;
    margin-top: 2px;
    font-size: var(--t-xs);
    line-height: 1.4;
    color: var(--texto-2);
}

.localizacao-aviso.ok     { color: var(--sucesso-texto); }
.localizacao-aviso.alerta { color: var(--alerta-texto); }
.localizacao-aviso.erro   { color: var(--erro-texto); }

/* Lista "Usar um endereco salvo" acima do formulario de endereco */
.enderecos-salvos { display: flex; flex-direction: column; gap: var(--e-2); }

.enderecos-salvos .titulo { font-size: var(--t-sm); font-weight: 700; color: var(--texto-2); }

.endereco-salvo {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    width: 100%;
    padding: var(--e-3) var(--e-4);
    border: 1.5px solid var(--borda);
    border-radius: var(--raio-sm);
    background: var(--superficie);
    color: var(--texto);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--rapido), background var(--rapido);
}

.endereco-salvo:hover,
.endereco-salvo:focus-visible { border-color: var(--marca-vermelho); background: var(--ouro-suave-2); }

.endereco-salvo > svg { flex: none; color: var(--marca-texto); }
.endereco-salvo .crescer { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.endereco-salvo .crescer span { font-size: var(--t-sm); color: var(--texto-2); }

.enderecos-salvos .ou {
    font-size: var(--t-xs);
    color: var(--texto-3);
    text-align: center;
    margin-top: var(--e-1);
}

/* Modal de login (partials/modal-entrar.php). Fechado, fica invisivel de
   verdade: no desktop o .modal fechado so tem opacidade 0 e ainda pegaria
   o clique no meio da tela. */
.modal-login { visibility: hidden; transition: transform var(--suave), visibility var(--suave); }
.modal-login.aberto { visibility: visible; }

@media (min-width: 720px) {
    .modal-login {
        width: min(420px, calc(100vw - var(--e-10)));
        transition: transform var(--normal), opacity var(--normal), visibility var(--normal);
    }
}

.modal-login .modal-topo h3 { display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-md); }

.links-modal-login {
    display: grid;
    gap: var(--e-2);
    margin-top: var(--e-4);
    text-align: center;
    font-size: var(--t-sm);
    color: var(--texto-2);
}

.links-modal-login a { color: var(--marca-texto); font-weight: 600; }

body.com-modal { overflow: hidden; }

/* Pedido dentro da conta (conta/pedido.php): trilha do portal por cima
   da tela de pedido da loja, sem o respiro grande entre as duas. */
.conta-trilha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-3);
    padding-top: var(--e-5);
}

.conta-trilha .linha-2 { min-height: 40px; }
.conta-nova-aviso { margin: var(--e-3) 0 0; }
.secao.secao-colada { padding-top: var(--e-4); }

/* Convite para instalar o app (estilo base em base.css): por cima das
   barras fixas do carrinho e do produto. */
body.com-barra-carrinho .convite-app,
body.com-barra-produto .convite-app { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }

/* Botao "Baixar o app" no rodape escuro da loja. O :not mantem o [hidden]
   de base.css valendo enquanto nao da para instalar. */
.rodape-loja .botao-app:not([hidden]) {
    display: flex;
    width: fit-content;
    height: 44px;
    margin-top: var(--e-4);
    padding-inline: 8px 14px;
    color: #fff;
    border-color: rgba(255,249,244,.32);
    font-size: var(--t-sm);
}

.rodape-loja .botao-app:hover { border-color: #fff; }

/* Aviso de maioridade: no rodape de toda a loja e no fim do checkout. */
.selo-18 {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: 2px solid currentColor;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}

.rodape-loja .aviso-idade {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    margin: var(--e-8) 0 0;
    color: #fff;
    font-size: var(--t-xs);
    line-height: 1.4;
}

.rodape-loja .aviso-idade + .assinatura { margin-top: var(--e-5); }

/* ---- Endereco no rodape: cartao de mapa (grade de ruas, pino com radar)
   que abre a rota no Google Maps */
.rodape-loja .mapa-loja {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--e-3);
    max-width: 340px;
    margin-top: var(--e-4);
    padding: var(--e-3) var(--e-3) var(--e-3) var(--e-3);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--raio);
    color: #fff;
    /* "Mapa": grade fina de ruas + um brilho dourado onde fica a adega */
    background:
        radial-gradient(circle at 34px 50%, rgba(245, 184, 0, .22), transparent 60px),
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 18px 18px,
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 18px 18px,
        linear-gradient(135deg, #221B17, #17120F);
    transition: border-color var(--normal), transform var(--rapido), box-shadow var(--normal);
}

.rodape-loja .mapa-loja:hover {
    color: #fff;
    border-color: rgba(245, 184, 0, .55);
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .35), 0 0 0 1px rgba(245, 184, 0, .2);
}

.rodape-loja .mapa-loja:focus-visible { outline: 2px solid #FFE38A; outline-offset: 3px; }

.mapa-loja-pino {
    position: relative;
    display: grid;
    place-items: center;
    flex: none;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
}

.mapa-loja-pino svg { position: relative; z-index: 1; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .4)); }

/* Radar: uma onda sai do pino de tempos em tempos */
.mapa-loja-onda {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(234, 67, 53, .7);
    animation: mapa-radar 2.4s ease-out infinite;
}

@keyframes mapa-radar {
    0%   { transform: scale(.6); opacity: .9; }
    100% { transform: scale(1.7); opacity: 0; }
}

.mapa-loja-texto { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.mapa-loja-texto strong { font-size: var(--t-sm); overflow-wrap: anywhere; }
.mapa-loja-texto > span:not(.mapa-loja-sobre) { font-size: var(--t-xs); color: rgba(255, 249, 244, .6); }
.mapa-loja-sobre {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #F5B800;
}

.mapa-loja-acao {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: none;
    padding: 6px 10px;
    border-radius: var(--raio-pill);
    background: #F5B800;
    color: var(--marca-carvao);
    font-size: var(--t-xs);
    font-weight: 800;
    transition: gap var(--rapido);
}

.rodape-loja .mapa-loja:hover .mapa-loja-acao { gap: 8px; }

@media (prefers-reduced-motion: reduce) {
    .mapa-loja-onda { animation: none; opacity: 0; }
}

/* ---- Compartilhe a loja (rodape): vidro escuro com borda em gradiente
   dourado que gira devagar; ao tocar, o menu nativo ou o painel (loja.js) */
@property --giro { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

.compartilhar-loja { position: relative; margin-top: var(--e-5); max-width: 320px; }

.compartilhar-botao {
    --giro: 0deg;
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--e-3);
    width: 100%;
    padding: var(--e-3) var(--e-4) var(--e-3) var(--e-3);
    border-radius: var(--raio-pill);
    color: #fff;
    text-align: left;
    /* Duas camadas: o vidro por dentro, o gradiente que gira aparece so na borda */
    border: 1.5px solid transparent;
    background:
        linear-gradient(rgba(23, 18, 15, .92), rgba(23, 18, 15, .92)) padding-box,
        conic-gradient(from var(--giro), #F5B800, #FFE38A, #8A6100, #F5B800 60%, #FFF4CC, #F5B800) border-box;
    box-shadow: 0 8px 28px rgba(245, 184, 0, .14), inset 0 1px 0 rgba(255, 255, 255, .06);
    animation: compartilhar-giro 6s linear infinite;
    transition: transform var(--rapido), box-shadow var(--normal);
}

.compartilhar-botao:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(245, 184, 0, .26), inset 0 1px 0 rgba(255, 255, 255, .08); }
.compartilhar-botao:active { transform: scale(.98); }
.compartilhar-botao:focus-visible { outline: 2px solid #FFE38A; outline-offset: 3px; }

@keyframes compartilhar-giro { to { --giro: 360deg; } }

.compartilhar-icone {
    display: grid;
    place-items: center;
    flex: none;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 25%, #FFE38A, #F5B800 55%, #B58600);
    color: var(--marca-carvao);
    box-shadow: 0 0 0 4px rgba(245, 184, 0, .14), 0 0 18px rgba(245, 184, 0, .45);
}

.compartilhar-rotulo { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.compartilhar-rotulo strong { font-size: var(--t-sm); letter-spacing: .01em; }
.compartilhar-rotulo span {
    font-size: var(--t-xs);
    color: rgba(255, 249, 244, .55);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Painel: abre para cima, sobre o rodape, com as redes e o "Copiar link" */
.compartilhar-painel:not([hidden]) {
    position: absolute;
    left: 0; right: 0;
    bottom: calc(100% + var(--e-2));
    z-index: 20;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--e-2);
    padding: var(--e-3);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--raio);
    background: rgba(29, 24, 21, .96);
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
    animation: compartilhar-surgir .18s ease-out;
}

@keyframes compartilhar-surgir { from { opacity: 0; transform: translateY(6px) scale(.98); } }

.compartilhar-painel a,
.compartilhar-painel button {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    min-height: 44px;
    padding: 0 var(--e-3);
    border-radius: var(--raio-sm);
    background: rgba(255, 255, 255, .05);
    color: #fff;
    font-size: var(--t-sm);
    font-weight: 600;
    transition: background var(--rapido);
}

.rodape-loja .compartilhar-painel a { color: #fff; }
.compartilhar-painel a:hover,
.compartilhar-painel button:hover { background: rgba(255, 255, 255, .11); }
.compartilhar-painel svg { flex: none; }
.compartilhar-painel .whatsapp svg { color: #25D366; }
.compartilhar-painel .telegram svg { color: #2AABEE; }
.compartilhar-painel .facebook svg { color: #4C8DF6; }
.compartilhar-painel .copiar svg { color: #F5B800; }
.compartilhar-painel .copiar.copiado { background: rgba(37, 211, 102, .16); }
.compartilhar-painel .copiar.copiado svg { color: #25D366; }

@media (prefers-reduced-motion: reduce) {
    .compartilhar-botao { animation: none; }
    .compartilhar-painel:not([hidden]) { animation: none; }
}

.aceite-idade {
    display: flex;
    align-items: flex-start;
    gap: var(--e-3);
    margin-top: var(--e-4);
    padding: var(--e-3);
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio);
    font-size: var(--t-sm);
    line-height: 1.4;
    cursor: pointer;
}

.aceite-idade input {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin: 0;
    accent-color: var(--marca-texto);
}

.aceite-idade.com-erro { border-color: var(--erro); }

/* Sino no cabecalho escuro da loja */
.cabecalho-loja .sino-botao { color: inherit; }

/* ------------------------------------------------------------
   INSPIRE-SE na pagina inicial (cartao em base.css)
   ------------------------------------------------------------ */
/* Slide que passa um card por vez (setas no topo + arraste com encaixe).
   Quantos aparecem: 1 no celular, 2 no tablet em pe, 3 deitado, 4 no computador. */
.inspire-galeria {
    --inspire-gap: var(--e-3);
    --inspire-por-vez: 1;
    display: flex;
    gap: var(--inspire-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--e-1);
}

.inspire-galeria::-webkit-scrollbar { display: none; }

.inspire-galeria > .inspire-cartao {
    flex: 0 0 calc((100% - (var(--inspire-por-vez) - 1) * var(--inspire-gap)) / var(--inspire-por-vez));
    min-width: 0;
    scroll-snap-align: start;
}

@media (min-width: 600px)  { .inspire-galeria { --inspire-por-vez: 2; --inspire-gap: var(--e-4); } }
@media (min-width: 900px)  { .inspire-galeria { --inspire-por-vez: 3; } }
@media (min-width: 1080px) { .inspire-galeria { --inspire-por-vez: 4; } }

/* Setas "sempre": tambem no celular (as das vitrines so aparecem no computador) */
.vitrine-setas.sempre:not([hidden]) { display: flex; }

@media (max-width: 480px) {
    .inspire-galeria .inspire-texto { padding-inline: var(--e-3); }
    .inspire-galeria .inspire-compartilhar { margin-inline: var(--e-3); }
}

/* ------------------------------------------------------------
   AVALIACOES na pagina inicial (slider) e na pagina do pedido
   ------------------------------------------------------------ */
.avaliacoes-topo { flex-wrap: wrap; align-items: center; }

.avaliacoes-resumo {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    font-size: var(--t-sm);
    color: var(--texto-2);
}

.avaliacoes-resumo strong {
    font-family: var(--fonte-titulo);
    font-size: var(--t-xl);
    line-height: 1;
    color: var(--texto);
}

.slider-trilho {
    --slider-gap: var(--e-3);
    display: flex;
    gap: var(--slider-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

.slider-trilho::-webkit-scrollbar { display: none; }
.slider-trilho:focus-visible { outline: 2px solid var(--marca-vermelho); outline-offset: 2px; }

.slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }

.avaliacao {
    display: flex;
    flex-direction: column;
    gap: var(--e-3);
    margin: 0;
    padding: var(--e-5);
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
}

.avaliacao .estrelas { font-size: var(--t-md); }

.avaliacao blockquote {
    flex: 1;
    margin: 0;
    font-size: var(--t-base);
    line-height: 1.5;
    color: var(--texto);
    overflow-wrap: anywhere;
}

.avaliacao figcaption { display: flex; align-items: center; gap: var(--e-3); }

.avaliacao-avatar {
    display: grid;
    place-items: center;
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--ouro-suave);
    color: var(--marca-texto);
    font-size: var(--t-xs);
    font-weight: 700;
}

.avaliacao-autor { display: flex; flex-direction: column; min-width: 0; font-size: var(--t-xs); color: var(--texto-3); }
.avaliacao-autor strong { font-size: var(--t-sm); color: var(--texto); }

.slider-controles { display: flex; align-items: center; justify-content: center; gap: var(--e-4); margin-top: var(--e-4); }
.slider-controles[hidden] { display: none; }

.slider-seta {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--borda-forte);
    border-radius: 50%;
    background: var(--superficie);
    color: var(--texto);
    cursor: pointer;
    transition: border-color var(--rapido), opacity var(--rapido);
}

.slider-seta:hover:not(:disabled) { border-color: var(--marca-vermelho); }
.slider-seta:disabled { opacity: .35; cursor: default; }

.slider-pontos { display: flex; gap: var(--e-2); }
.slider-ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--borda-forte); transition: background var(--rapido), transform var(--rapido); }
.slider-ponto.ativo { background: var(--marca-vermelho); transform: scale(1.3); }

@media (min-width: 760px) {
    .slide { flex-basis: calc((100% - var(--slider-gap)) / 2); }
}

@media (min-width: 1080px) {
    .slide { flex-basis: calc((100% - 2 * var(--slider-gap)) / 3); }
}

/* Formulario do pedido: os radios vem de 5 a 1 e a fila e invertida na tela,
   para o "~" do CSS pintar as estrelas a esquerda da escolhida. */
.avaliar { scroll-margin-top: 175px; } /* cabecalho fixo do computador: 161px */
.avaliar-form { display: grid; gap: var(--e-4); }

.estrelas-escolha {
    position: relative;
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: var(--e-1);
    margin: 0;
    padding: 0;
    border: 0;
}

.estrelas-escolha input { position: absolute; opacity: 0; pointer-events: none; }

.estrelas-escolha label {
    padding: 2px var(--e-1);
    font-size: 2.25rem;
    line-height: 1;
    color: var(--borda-forte);
    cursor: pointer;
    transition: color var(--rapido);
}

.estrelas-escolha label:hover,
.estrelas-escolha label:hover ~ label,
.estrelas-escolha input:checked ~ label { color: var(--marca-vermelho); }

.estrelas-escolha input:focus-visible + label { outline: 2px solid var(--marca-vermelho); outline-offset: 2px; border-radius: var(--raio-xs); }

.avaliar-nota .estrelas { font-size: 1.5rem; }
.avaliar-comentario { overflow-wrap: anywhere; }

/* ------------------------------------------------------------
   POLITICA DE PRIVACIDADE
   ------------------------------------------------------------ */
.legal { max-width: 760px; margin-inline: auto; line-height: 1.65; color: var(--texto-2); overflow-wrap: anywhere; }
.legal h1 { margin-top: var(--e-1); font-size: var(--t-2xl); color: var(--texto); }
.legal h2 { margin: var(--e-8) 0 var(--e-3); font-size: var(--t-lg); color: var(--texto); }
.legal h3 { margin: var(--e-5) 0 var(--e-2); font-size: var(--t-md); color: var(--texto); }
.legal p { margin-top: var(--e-3); }
.legal ul { display: grid; gap: var(--e-2); margin-top: var(--e-2); padding-left: 1.2em; list-style: disc; }
.legal strong { color: var(--texto); }
.legal a { color: var(--marca-texto); font-weight: 600; text-decoration: underline; }
.legal code { font-size: .9em; }

.assinatura a { color: inherit; text-decoration: underline; }

/* "Avaliar compra" na lista de pedidos da conta */
.item-avaliar {
    display: inline-flex;
    align-items: center;
    gap: var(--e-1);
    margin-top: 2px;
    font-size: var(--t-xs);
    font-weight: 700;
    color: var(--marca-texto);
}