/* ==========================================================================
   DMPR IMPORTS - estilo base da loja
   CSS puro, sem framework: menos peso na Hostinger e nada para atualizar.
   ========================================================================== */

/* Fonte hospedada no proprio servidor: nao depende do Google, carrega mais
   rapido e o site continua igual se o visitante estiver sem acesso a eles.
   Baixado de fonts.gstatic.com (Poppins v24, licenca SIL Open Font 1.1). */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/poppins-400-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/poppins-400-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(../fonts/poppins-600-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(../fonts/poppins-600-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/poppins-700-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/poppins-700-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url(../fonts/poppins-800-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url(../fonts/poppins-800-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* superficies */
    --cor-fundo: #f9f9f9;
    --cor-card: #ffffff;
    --cor-texto: #000000;
    --cor-texto-suave: #00000099;
    --cor-borda: #0000001a;
    --cor-borda-forte: #00000033;

    /* marca: verde-limao */
    --cor-primaria: #d4ee5e;          /* botoes, faixa de utilidades */
    --cor-primaria-escura: #c6d51e;   /* hover de botao */
    --cor-primaria-texto: #333333;    /* texto sobre a primaria */
    --cor-vibrante: #dbfb03;          /* busca, badge do carrinho */
    --cor-vibrante-texto: #000000;
    --cor-suave: #f4fad2;             /* faixa do topo */
    --cor-suave-texto: #01481e;
    --cor-destaque: #5ed668;

    /* header e rodape */
    --cor-header-texto: #3f3d38;
    --cor-rodape-fundo: #f0f2eb;
    --cor-rodape-texto: #000000;

    /* estados */
    --cor-sucesso: #4bb98c;
    --cor-sucesso-fundo: #eaf7f1;
    --cor-erro: #dd7774;
    --cor-erro-fundo: #fdeeee;
    --cor-atencao: #dc8f38;
    --cor-atencao-fundo: #fdf4e8;
    --cor-estoque: #d27611;           /* escassez: "so restam X" */
    --cor-etiqueta: #ff4242;          /* selo de % OFF */
    --cor-etiqueta-texto: #ffffff;
    --cor-escuro: #3f3d38;

    /* forma e ritmo */
    --raio: 8px;
    --raio-md: 6px;
    --raio-sm: 4px;
    --sombra: 0 0 8px 4px #0000000d;
    --largura: 1200px;
    --transicao: all .3s ease;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--cor-fundo);
    color: var(--cor-texto);
    font: 16px/1.5 "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4, h5, h6 { line-height: 1.25; margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: 33px; }
h2 { font-size: 23px; }
h3 { font-size: 19px; }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.pular-para-conteudo {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--cor-escuro); color: #fff; padding: 12px 16px;
}
.pular-para-conteudo:focus { left: 8px; top: 8px; }

/* ---- topo --------------------------------------------------------------- */

.topo__faixa {
    background: var(--cor-vibrante);
    color: var(--cor-vibrante-texto);
    font-weight: 700;
    font-size: 13px;
    padding: 8px 0;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.topo__faixa-track {
    display: flex;
    width: max-content;
    /* Duracao ajustada via JS (site.js) pra manter velocidade constante
       nao importa quantas vezes a frase se repete. Este valor aqui e so
       o fallback pra quando JS estiver desligado. */
    animation: topo-faixa-rolar var(--topo-faixa-duracao, 90s) linear infinite;
}
.topo__faixa:hover .topo__faixa-track,
.topo__faixa:focus-within .topo__faixa-track { animation-play-state: paused; }
.topo__faixa-grupo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding-right: 48px;
    white-space: nowrap;
}
.topo__faixa-sep { margin: 0 10px; opacity: .6; }

@keyframes topo-faixa-rolar {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .topo__faixa-track { animation: none; }
    .topo__faixa { text-align: center; }
    .topo__faixa-grupo:last-child { display: none; }
}

.topo__barra {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    max-width: var(--largura);
    margin: 0 auto;
    padding: 16px;
    background: var(--cor-card);
    border-bottom: 1px solid var(--cor-borda);
}

.marca { display: flex; align-items: center; }
.marca:hover { text-decoration: none; }
.marca__logo { display: block; width: 44px; height: 44px; border-radius: var(--raio-sm); object-fit: contain; }

.busca { display: flex; flex: 1 1 320px; min-width: 240px; }
.busca input {
    flex: 1;
    border: 1px solid var(--cor-borda);
    border-right: 0;
    border-radius: var(--raio-sm) 0 0 var(--raio-sm);
    padding: 11px 14px;
    font-size: 15px;
    background: var(--cor-fundo);
}
.busca input:focus { outline: 2px solid var(--cor-primaria-escura); outline-offset: -2px; }
.busca button {
    border: 0;
    background: var(--cor-vibrante);
    color: var(--cor-vibrante-texto);
    padding: 0 20px;
    border-radius: 0 var(--raio-sm) var(--raio-sm) 0;
    font-weight: 600;
    cursor: pointer;
}
.busca button:hover { filter: brightness(.94); }

.topo__acoes { display: flex; align-items: center; gap: 16px; font-size: 15px; }

.carrinho-link { position: relative; font-weight: 600; }
.carrinho-link__contador {
    background: var(--cor-vibrante);
    color: var(--cor-vibrante-texto);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    padding: 1px 7px;
    margin-left: 4px;
}

/* ---- menu de categorias ------------------------------------------------- */

.menu {
    background: var(--cor-card);
    border-bottom: 1px solid var(--cor-borda);
}
.menu__lista {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 4px;
    list-style: none;
    margin: 0 auto;
    padding: 0 16px;
    max-width: var(--largura);
}
.menu__item { position: relative; }
.menu__link {
    display: block;
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--cor-header-texto);
    border-bottom: 2px solid transparent;
    text-transform: uppercase;
    letter-spacing: .02em;
    transition: var(--transicao);
}
.menu__link:hover,
.menu__item:focus-within > .menu__link {
    text-decoration: none;
    color: var(--cor-suave-texto);
    border-bottom-color: var(--cor-primaria);
}
.menu__link--destaque { color: var(--cor-suave-texto); }
.menu__link--promocao { color: var(--cor-vibrante); }
.menu__link--promocao:hover { color: var(--cor-vibrante); }
.menu__item--fim { margin-left: auto; }
.menu__item--fim .menu__link { color: var(--cor-suave-texto); }

/* Submenu abre no hover e tambem no foco pelo teclado (focus-within). */
.menu__sub {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 30;
    display: none;
    min-width: 220px;
    margin: 0;
    padding: 8px 0;
    list-style: none;
    background: var(--cor-card);
    border: 1px solid var(--cor-borda);
    border-radius: 0 0 var(--raio-md) var(--raio-md);
    box-shadow: var(--sombra);
}
.menu__item--tem-sub:hover > .menu__sub,
.menu__item--tem-sub:focus-within > .menu__sub { display: block; }
.menu__sub a {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 16px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .02em;
}
.menu__sub a:hover { background: var(--cor-suave); text-decoration: none; }
.menu__qtd { color: var(--cor-texto-suave); font-size: 12px; }

@media (max-width: 720px) {
    .menu__lista {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .menu__lista::-webkit-scrollbar { display: none; }
    .menu__item { flex: 0 0 auto; }
    .menu__item--fim { margin-left: 0; }
    /* Sem hover confiavel no toque: o submenu vira so o atalho da mae. */
    .menu__sub { display: none !important; }
}

/* ---- botoes ------------------------------------------------------------- */

.btn {
    display: inline-block;
    border: 1px solid transparent;
    border-radius: var(--raio-sm);
    padding: 11px 20px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
}
.btn:hover { text-decoration: none; }

.btn--primario { background: var(--cor-primaria); color: var(--cor-primaria-texto); }
.btn--primario:hover { background: var(--cor-primaria-escura); color: var(--cor-primaria-texto); }

.btn--fantasma { background: transparent; color: var(--cor-texto); border-color: var(--cor-borda); }
.btn--fantasma:hover { border-color: var(--cor-primaria-escura); background: var(--cor-suave); }

/* ---- avisos / flash ----------------------------------------------------- */

.avisos { max-width: var(--largura); margin: 16px auto 0; padding: 0 16px; }
.aviso {
    border-radius: var(--raio-sm);
    padding: 12px 16px;
    margin-bottom: 8px;
    font-size: 15px;
    border: 1px solid transparent;
}
.aviso--sucesso { background: var(--cor-sucesso-fundo); color: var(--cor-sucesso); border-color: #bfe3cd; }
.aviso--erro    { background: var(--cor-erro-fundo);    color: var(--cor-erro);    border-color: #f3c6c6; }

/* ---- conteudo ----------------------------------------------------------- */

.conteudo { max-width: var(--largura); margin: 0 auto; padding: 24px 16px 56px; }

/* Os banners 1/2/3 sao artes prontas (ja vem com titulo, selos e call-to-action
   desenhados dentro da propria imagem), entao o carrossel so mostra as imagens
   inteiras, sem nenhum texto do site sobreposto — colidiria com a arte. Cada
   slide e um <img> real (nao background), com "contain" pra nunca cortar
   conteudo do banner mesmo com proporcoes diferentes entre eles. O JS troca
   entre banner1/2/3 sozinho (site.js); sem JS so o primeiro banner aparece
   (position:static o empilha em cima dos outros), e a pagina continua ok. */
.hero {
    position: relative;
    display: block;
    overflow: hidden;
    background-color: #f9f9f9;                     /* preenche a sobra do "contain" */
    border-radius: var(--raio);
    margin-bottom: 32px;
    aspect-ratio: 2 / 1;
    max-height: 585px;
}

.hero__slides { position: absolute; inset: 0; z-index: 0; display: block; }
.hero__slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    opacity: 0;
    transition: opacity .8s ease;
}
.hero__slide.ativo { opacity: 1; }

/* Bolinhas de navegacao do carrossel. */
.hero__dots {
    position: absolute;
    z-index: 2;
    right: 20px;
    bottom: 16px;
    display: flex;
    gap: 8px;
}
.hero__dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 1px solid #ffffffb0;
    border-radius: 50%;
    background: #ffffff4d;
    cursor: pointer;
}
.hero__dot.ativo { background: #fff; }

@media (prefers-reduced-motion: reduce) {
    .hero__slide { transition: none; }
}

/* Botao de WhatsApp do banner: verde da marca (mesmo tom do flutuante) e
   piscando de proposito, e a paleta lima do site: justamente o que faz o
   visitante clicar sem ler. Fica no canto oposto aos "dots" pra nao brigar
   com a navegacao do carrossel, e acima dos slides (z-index) mas sem
   interceptar o clique da arte, que tambem leva pro catalogo. */
.hero__zap-btn {
    position: absolute;
    z-index: 2;
    left: 20px;
    bottom: 16px;

    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;

    background: #fff;
    color: #2f5718;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;

    border-radius: 999px;
    box-shadow: 0 4px 14px #00000040;
    animation: hero-zap-piscar 500ms ease-in-out infinite;
}
.hero__zap-btn:hover,
.hero__zap-btn:focus {
    background: #1da851;
    color: #fff;
    text-decoration: none;
    animation-play-state: paused;
}
.hero__zap-btn:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}
.hero__zap-btn i { font-size: 18px; }

@keyframes hero-zap-piscar {
    0%, 100% { box-shadow: 0 4px 14px #00000040; }
    50% { box-shadow: 0 4px 18px #00000040, 0 0 0 6px #0feb604d; }
}

/* No celular vira so o circulo: a pilula com texto cobriria boa parte da arte
   do banner, que ja e mais baixa nas telas estreitas. */
@media (max-width: 640px) {
    .hero__zap-btn {
        left: 12px;
        bottom: 12px;
        width: 44px;
        height: 44px;
        padding: 0;
        justify-content: center;
        gap: 0;
    }
    .hero__zap-btn__texto { display: none; }
    .hero__zap-btn i { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .hero__zap-btn { animation: none; }
    .hero__zap-btn:hover,
    .hero__zap-btn:focus { transform: none; }
}

.secao { margin-bottom: 40px; }
.secao__titulo { font-size: 20px; }

/* ---- faixa de servicos -------------------------------------------------- */

.servicos { margin-bottom: 40px; }
.servicos__lista {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.servicos__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--cor-card);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-md);
    padding: 16px;
}
.servicos__icone {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    border-radius: 999px;
    background: var(--cor-suave);
    /* Icone FontAwesome: 18px cai melhor no circulo de 40 do que os 20 do
       emoji, que vinha com margem propria embutida no desenho. */
    font-size: 18px;
    line-height: 1;
    color: var(--cor-suave-texto);
}
.servicos__titulo { display: block; font-size: 14px; }
.servicos__texto { display: block; font-size: 13px; color: var(--cor-texto-suave); margin-top: 2px; }

.grade-categorias {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.grade-categorias a {
    display: block;
    background: var(--cor-card);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-sm);
    padding: 16px;
    font-weight: 600;
    color: var(--cor-texto);
    text-transform: uppercase;
    letter-spacing: .02em;
    box-shadow: var(--sombra);
}
.grade-categorias a:hover { border-color: var(--cor-primaria-escura); background: var(--cor-suave); text-decoration: none; }
.grade-categorias__item--promocao {
    background: var(--cor-vibrante) !important;
    color: var(--cor-vibrante-texto) !important;
    border-color: var(--cor-vibrante) !important;
}
.grade-categorias__item--promocao:hover { filter: brightness(.95); }

/* Variante em carrossel: rola de lado em vez de quebrar linha quando tem
   muitas categorias (reusa as setas/JS do carrossel de produtos). */
.grade-categorias--carrossel {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding-bottom: 4px;
    scrollbar-width: none;
}
.grade-categorias--carrossel::-webkit-scrollbar { display: none; }
.grade-categorias--carrossel > li {
    flex: 0 0 auto;
    scroll-snap-align: start;
}
.grade-categorias--carrossel a { white-space: nowrap; }

/* ---- vitrines demo (banners de categoria na home) ----------------------- */

.grade-vitrines-demo {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.grade-vitrines-demo li {
    border-radius: var(--raio-md);
    overflow: hidden;
    box-shadow: var(--sombra);
    aspect-ratio: 3 / 2;
}
.grade-vitrines-demo a { display: block; height: 100%; }
.grade-vitrines-demo img {
    display: block;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .2s ease;
}
.grade-vitrines-demo a:hover img { transform: scale(1.03); }

/* ---- banner simples (imagem unica full-width entre secoes) -------------- */

.banner-simples-wrap { position: relative; }
.banner-simples {
    display: block;
    border-radius: var(--raio-md);
    overflow: hidden;
    box-shadow: var(--sombra);
}
.banner-simples img {
    display: block;
    width: 100%; height: auto;
    transition: transform .2s ease;
}
.banner-simples:hover img { transform: scale(1.02); }

.nota-dev {
    background: #fff8e6;
    border: 1px dashed #e3b341;
    border-radius: var(--raio-sm);
    padding: 16px;
    color: #7a5a05;
}

/* ---- erro http ---------------------------------------------------------- */

.erro-http { text-align: center; padding: 64px 16px; }
.erro-http__codigo { font-size: 72px; font-weight: 800; color: var(--cor-borda); margin: 0; line-height: 1; }
.erro-http__titulo { font-size: 24px; margin-top: 8px; }
.erro-http__ajuda { color: var(--cor-texto-suave); margin-bottom: 24px; }

/* ---- rodape ------------------------------------------------------------- */

.rodape { background: var(--cor-rodape-fundo); color: var(--cor-rodape-texto); margin-top: 48px; }
.rodape__cols {
    max-width: var(--largura);
    margin: 0 auto;
    padding: 40px 16px;
    display: grid;
    gap: 32px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.rodape__titulo { color: var(--cor-rodape-texto); font-weight: 700; display: block; margin-bottom: 12px; }
.rodape__texto { font-size: 14px; margin: 0; }
.rodape__social {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    font-size: 14px;
    font-weight: 600;
}
.rodape__social i { font-size: 17px; }
.rodape__social:hover { text-decoration: none; color: var(--cor-suave-texto); }
.rodape__lista { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.rodape__lista li { margin-bottom: 8px; }
.rodape__lista i { width: 18px; text-align: center; margin-right: 6px; color: var(--cor-suave-texto); }
.rodape__lista a { display: inline-flex; align-items: center; }
.rodape__horario { color: #00000099; }
.rodape a { color: #00000099; }
.rodape a:hover { color: #000; }
.rodape__pagamentos {
    max-width: var(--largura);
    margin: 0 auto;
    padding: 0 16px 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    border-top: 1px solid #00000014;
    padding-top: 24px;
}
.rodape__pagamentos-titulo { font-size: 13px; font-weight: 600; color: #00000099; }
.rodape__pagamentos-icones { display: flex; align-items: center; gap: 14px; font-size: 22px; color: #00000099; }
.rodape__pagamentos-seguro {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #00000099;
}
.rodape__base {
    border-top: 1px solid #00000014;
    padding: 16px;
    color: #00000099;
    text-align: center;
    font-size: 13px;
}

/* ---- formularios (base, usados a partir da M3) -------------------------- */

.campo { margin-bottom: 16px; }
.campo label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.campo input, .campo select, .campo textarea {
    width: 100%;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-sm);
    padding: 11px 14px;
    font-size: 15px;
    font-family: inherit;
    background: var(--cor-card);
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
    outline: 2px solid var(--cor-primaria-escura); outline-offset: -2px;
}
.campo--erro input, .campo--erro select, .campo--erro textarea { border-color: var(--cor-erro); }
.campo__erro { color: var(--cor-erro); font-size: 13px; margin-top: 4px; }
.campo__dica { color: var(--cor-texto-suave); font-size: 13px; margin-top: 4px; }

@media (max-width: 640px) {
    .topo__barra { gap: 12px; }
    .busca { order: 3; flex-basis: 100%; }
}

/* ---- card de produto ----------------------------------------------------- */

.grade-produtos {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

/* ---- carrossel de produtos (seções com mais de 5 itens) ------------------- */

.carrossel {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
}

.grade-produtos--carrossel {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding-bottom: 4px;
    /* esconde a barra de rolagem mas mantém o scroll funcional */
    scrollbar-width: none;
}
.grade-produtos--carrossel::-webkit-scrollbar { display: none; }

.grade-produtos--carrossel > .card {
    flex: 0 0 220px;
    scroll-snap-align: start;
}

.carrossel__seta {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--cor-borda);
    background: var(--cor-card);
    color: var(--cor-texto-suave);
    cursor: pointer;
    transition: box-shadow .15s, color .15s;
}
.carrossel__seta:hover { box-shadow: var(--sombra); color: inherit; }
.carrossel__seta[hidden] { display: none; }

@media (max-width: 640px) {
    .carrossel__seta { display: none; }
    .grade-produtos--carrossel > .card { flex-basis: 68vw; }
}

.card {
    background: var(--cor-card);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow .15s, transform .15s;
}
.card:hover { box-shadow: var(--sombra); transform: translateY(-2px); }
.card__link { color: inherit; display: block; }
.card__link:hover { text-decoration: none; }

.card__imagem { position: relative; aspect-ratio: 1 / 1; background: #f5f5f5; }
.card__imagem img { width: 100%; height: 100%; object-fit: cover; }

.etiqueta {
    position: absolute; top: 8px; left: 8px;
    font-size: 12px; font-weight: 600; padding: 3px 8px;
    border-radius: var(--raio-sm); background: var(--cor-escuro); color: #fff;
}
.etiqueta--atacado  { background: var(--cor-primaria); color: var(--cor-primaria-texto); }
.etiqueta--oferta   { background: var(--cor-etiqueta); color: var(--cor-etiqueta-texto); }
.etiqueta--esgotado { background: #8a8781; }
.etiqueta--lancamento { top: 8px; left: auto; right: 8px; background: var(--cor-sucesso); color: #fff; }

.card__corpo { padding: 12px 14px 16px; }
.card__categoria { font-size: 12px; color: var(--cor-texto-suave); }
.card__nome { font-size: 15px; margin: 4px 0 10px; }
.card__precos { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.card__de { font-size: 13px; color: var(--cor-texto-suave); text-decoration: line-through; }
.card__por { font-size: 19px; color: var(--cor-sucesso); }
.card__atacado { display: block; font-size: 12px; color: var(--cor-suave-texto); font-weight: 600; margin-top: 6px; }
.card--esgotado .card__imagem img { opacity: .55; }

/* ---- vitrine (lista + filtros) ------------------------------------------ */

.vitrine { display: grid; grid-template-columns: 240px 1fr; gap: 28px; align-items: start; }

.vitrine__filtros {
    background: var(--cor-card);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    padding: 16px;
    position: sticky;
    top: 16px;
}
.filtros__titulo { font-size: 14px; text-transform: uppercase; letter-spacing: .04em; color: var(--cor-texto-suave); }
.filtros__lista { list-style: none; margin: 0 0 20px; padding: 0; }
.filtros__lista li { margin-bottom: 6px; }
.filtros__lista a { color: var(--cor-texto); font-size: 15px; text-transform: uppercase; letter-spacing: .02em; }
.filtros__lista a.ativo { font-weight: 700; color: var(--cor-suave-texto); }
.filtros__check { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 10px; }
.filtros__check input { width: auto; }
.filtros__form .campo { margin-bottom: 12px; }

.vitrine__cabecalho { display: flex; align-items: baseline; gap: 12px; justify-content: space-between; }
.vitrine__cabecalho h1 { font-size: 24px; }
.vitrine__contagem { color: var(--cor-texto-suave); font-size: 14px; margin: 0; }

.vazio {
    background: var(--cor-card); border: 1px dashed var(--cor-borda);
    border-radius: var(--raio); padding: 48px 24px; text-align: center;
}

.paginacao {
    display: flex; align-items: center; justify-content: center; gap: 16px;
    margin-top: 28px;
}
.paginacao__atual { color: var(--cor-texto-suave); font-size: 14px; }

/* ---- pagina de produto -------------------------------------------------- */

.migalhas { font-size: 13px; color: var(--cor-texto-suave); margin-bottom: 16px; }
.migalhas span { margin: 0 6px; }
.migalhas span[aria-current] { margin: 0; color: var(--cor-texto); }

.produto { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }

.produto__foto {
    width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
    background: var(--cor-card);
    border: 1px solid var(--cor-borda); border-radius: var(--raio);
}
/* Zoom na foto do produto: passa o mouse e amplia exatamente o ponto apontado */
.produto__foto-zoom {
    position: relative; overflow: hidden;
    border-radius: var(--raio); background: var(--cor-card);
}
.produto__foto-zoom .produto__foto {
    transition: transform .1s ease-out;
    cursor: zoom-in;
}
@media (hover: hover) and (pointer: fine) {
    .produto__foto-zoom.zoom-ativo .produto__foto { transform: scale(2.2); }
}
.produto__miniaturas { list-style: none; display: flex; gap: 8px; padding: 0; margin: 12px 0 0; flex-wrap: wrap; }
.miniatura {
    padding: 0; width: 72px; height: 72px; cursor: pointer; background: none;
    border: 2px solid var(--cor-borda); border-radius: var(--raio-sm); overflow: hidden;
}
.miniatura.ativo { border-color: var(--cor-primaria-escura); }
.miniatura img { width: 100%; height: 100%; object-fit: cover; }

.produto__marca { font-size: 13px; color: var(--cor-texto-suave); text-transform: uppercase; letter-spacing: .04em; }
.produto__nome { font-size: 26px; margin: 4px 0 6px; }
.produto__sku { font-size: 13px; color: var(--cor-texto-suave); margin: 0 0 12px; }
.produto__resumo { color: var(--cor-texto-suave); }

.produto__precos { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 20px 0 4px; }
.produto__de { color: var(--cor-texto-suave); text-decoration: line-through; }
.produto__por { font-size: 32px; }
.produto__faixa {
    background: var(--cor-sucesso-fundo); color: var(--cor-sucesso);
    border-radius: var(--raio-sm); padding: 10px 12px; font-size: 15px;
}
.produto__nota, .produto__estoque { font-size: 13px; color: var(--cor-texto-suave); }
.produto__esgotado { color: var(--cor-erro); font-weight: 600; }

.selo { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.selo--atacado { background: var(--cor-sucesso-fundo); color: var(--cor-sucesso); }

.produto__form {
    background: var(--cor-card); border: 1px solid var(--cor-borda);
    border-radius: var(--raio); padding: 16px; margin-top: 16px;
}
.campo--curto { max-width: 140px; }
.produto__botoes { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }

.produto__detalhes { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; margin-top: 40px; }
.tabela-specs { width: 100%; border-collapse: collapse; font-size: 15px; }
.tabela-specs th, .tabela-specs td { text-align: left; padding: 8px 0; border-bottom: 1px solid var(--cor-borda); vertical-align: top; }
.tabela-specs th { width: 40%; color: var(--cor-texto-suave); font-weight: 600; }

/* ---- carrinho ------------------------------------------------------------ */

.titulo-pagina { font-size: 24px; margin-bottom: 20px; }
.carrinho { display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start; }

.carrinho-item {
    display: grid;
    grid-template-columns: 96px 1fr auto auto;
    gap: 16px; align-items: center;
    background: var(--cor-card); border: 1px solid var(--cor-borda);
    border-radius: var(--raio); padding: 12px; margin-bottom: 12px;
}
.carrinho-item__foto img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--raio-sm); }
.carrinho-item__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.carrinho-item__nome { color: var(--cor-texto); font-weight: 600; }
.carrinho-item__variante, .carrinho-item__unitario { font-size: 13px; color: var(--cor-texto-suave); }
.carrinho-item__dica { font-size: 13px; color: var(--cor-sucesso); }
.carrinho-item__qtd { display: flex; gap: 6px; align-items: center; }
.carrinho-item__qtd input { width: 76px; padding: 8px; border: 1px solid var(--cor-borda); border-radius: var(--raio-sm); }
.carrinho-item__total { text-align: right; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.carrinho__limpar { margin-top: 4px; }

.carrinho__resumo {
    background: var(--cor-card); border: 1px solid var(--cor-borda);
    border-radius: var(--raio); padding: 20px; position: sticky; top: 16px;
}
.resumo-linhas { margin: 0 0 16px; }
.resumo-linhas > div { display: flex; justify-content: space-between; padding: 6px 0; }
.resumo-linhas dt, .resumo-linhas dd { margin: 0; }
.resumo-linhas__frete { color: var(--cor-texto-suave); font-size: 14px; }
.resumo-linhas__total { border-top: 1px solid var(--cor-borda); margin-top: 6px; padding-top: 10px; font-size: 18px; }
.resumo-nota { font-size: 14px; color: var(--cor-texto-suave); }
.resumo-nota--ok { color: var(--cor-sucesso); }
.resumo-gratis { color: var(--cor-sucesso); text-transform: uppercase; letter-spacing: .02em; }

/* Frete no carrinho. Funciona sem JS (cada opcao e um form); o JS so troca a
   caixa no lugar em vez de recarregar a pagina. */
.frete-caixa { border-top: 1px solid var(--cor-borda); margin: 16px 0; padding-top: 16px; }
.frete-caixa__titulo { font-size: 14px; font-weight: 700; margin: 0 0 8px; text-transform: uppercase; letter-spacing: .03em; color: var(--cor-texto-suave); }
.frete-form__linha { display: flex; gap: 8px; }
.frete-form__linha input {
    flex: 1 1 auto; min-width: 0; padding: 10px 12px; font: inherit;
    border: 1px solid var(--cor-borda); border-radius: var(--raio-md); background: #fff; color: var(--cor-texto);
}
.frete-form__linha input:focus { outline: 2px solid var(--cor-primaria); outline-offset: -2px; }
.frete-form__linha .btn { flex: 0 0 auto; }
.btn-link--mini { font-size: 12px; display: inline-block; margin-top: 6px; }
.frete-caixa--carregando { opacity: .55; pointer-events: none; }
.frete-erro { font-size: 13px; color: var(--cor-erro); margin: 8px 0 0; }
.frete-nota { font-size: 12px; color: var(--cor-texto-suave); margin: 8px 0 0; }
.frete-opcoes { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.frete-opcao {
    display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; width: 100%;
    padding: 10px 12px; text-align: left; cursor: pointer; font: inherit; color: var(--cor-texto);
    background: #fff; border: 1px solid var(--cor-borda); border-radius: var(--raio-md);
}
.frete-opcao:hover { border-color: var(--cor-primaria); }
.frete-opcao--ativa { border-color: var(--cor-primaria); box-shadow: 0 0 0 1px var(--cor-primaria) inset; }
.frete-opcao__nome { font-weight: 600; }
.frete-opcao__prazo { grid-column: 1; font-size: 12px; color: var(--cor-texto-suave); }
.frete-opcao__preco { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-weight: 700; }

/* No checkout a opcao e um radio dentro do label: abre uma coluna pra bolinha. */
.frete-opcoes--escolha .frete-opcao { grid-template-columns: auto 1fr auto; }
.frete-opcoes--escolha .frete-opcao input[type="radio"] {
    grid-column: 1; grid-row: 1 / span 2; align-self: center; margin: 0; accent-color: var(--cor-primaria);
}
.frete-opcoes--escolha .frete-opcao__nome,
.frete-opcoes--escolha .frete-opcao__prazo { grid-column: 2; }
.frete-opcoes--escolha .frete-opcao__preco { grid-column: 3; }
.frete-opcoes--carregando { opacity: .55; pointer-events: none; }

.btn--bloco { display: block; width: 100%; text-align: center; margin-bottom: 8px; }
.btn--mini { padding: 8px 10px; font-size: 13px; }
.btn-link { background: none; border: 0; padding: 0; cursor: pointer; color: var(--cor-suave-texto); font: inherit; text-decoration: underline; }
.btn-link--perigo { color: var(--cor-erro); font-size: 13px; }

.aviso--atencao { background: var(--cor-atencao-fundo); color: #8a5a15; border-color: #f0d5ae; }

.faixa-atacado {
    background: var(--cor-card); border: 1px solid var(--cor-borda);
    border-radius: var(--raio); padding: 28px; text-align: center;
}
.secao__cabecalho { display: flex; justify-content: space-between; align-items: baseline; }

.secao-instagram__cabecalho {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    margin-bottom: 8px;
}
.secao-instagram__titulo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 26px;
}
.secao-instagram__titulo .fa-instagram {
    font-size: 28px;
    background: linear-gradient(45deg, #f9ce34, #ee2a7b, #6228d7);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.secao-instagram__handle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(45deg, #f9ce34, #ee2a7b, #6228d7);
    padding: 8px 20px;
    border-radius: 999px;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
    box-shadow: 0 4px 14px rgba(238, 42, 123, .25);
}
.secao-instagram__handle:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 18px rgba(238, 42, 123, .35);
}

.grade-instagram {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    list-style: none;
    padding: 0;
    margin: 0;
}
.grade-instagram li {
    aspect-ratio: 1 / 1;
    border-radius: var(--raio);
    overflow: hidden;
    background: var(--cor-suave);
}
.grade-instagram img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .2s ease;
}
.grade-instagram a:hover img { transform: scale(1.05); }

@media (max-width: 900px) {
    .vitrine, .produto, .carrinho, .produto__detalhes { grid-template-columns: 1fr; }
    .vitrine__filtros, .carrinho__resumo { position: static; }
    .carrinho-item { grid-template-columns: 72px 1fr; }
    .carrinho-item__foto img { width: 72px; height: 72px; }
    .carrinho-item__qtd, .carrinho-item__total { grid-column: 2; justify-content: flex-start; align-items: flex-start; text-align: left; }
}

/* ---- complementos de layout --------------------------------------------- */

.btn--secundario { background: var(--cor-card); color: var(--cor-texto); border-color: var(--cor-borda); }
.btn--secundario:hover { border-color: var(--cor-primaria-escura); background: var(--cor-suave); }

.hero__texto { max-width: 640px; }
.secao__link { font-size: 14px; font-weight: 600; }

.vitrine__resultado { min-width: 0; }
.carrinho__itens { min-width: 0; }

.produto__galeria { min-width: 0; }
.produto__compra { min-width: 0; }
.produto__descricao { min-width: 0; }
.produto__descricao p { color: var(--cor-texto-suave); }
.produto__specs { min-width: 0; }

/* ==========================================================================
   Formularios: utilitarios usados nas telas de conta e autenticacao
   ========================================================================== */

/* Dois ou tres campos na mesma linha no desktop, empilhados no celular.
   auto-fit resolve sozinho: nao precisa de classe diferente por quantidade. */
.campo-linha {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0 16px;
    align-items: start;
}
.campo-linha .campo--curto { max-width: none; }

.campo-opcional { font-weight: 400; color: var(--cor-texto-suave); font-size: 13px; }

.campo-check { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.campo-check input { width: 18px; height: 18px; accent-color: var(--cor-primaria-escura); }
.campo-check label { margin: 0; font-weight: 400; font-size: 14px; }

/* Enquanto o CEP esta sendo consultado. Some sozinho no finally do fetch. */
.campo--carregando input {
    background-image: linear-gradient(90deg, transparent, #0000000d, transparent);
    background-size: 200% 100%;
    animation: campo-brilho 1s linear infinite;
}
@keyframes campo-brilho {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

.campo input:disabled {
    background: #00000008;
    color: var(--cor-texto-suave);
    cursor: not-allowed;
}

.btn--perigo { background: var(--cor-erro); color: #fff; border-color: transparent; }
.btn--perigo:hover { background: #c85d5a; color: #fff; }

/* ---- checkout -------------------------------------------------------------
   Colunas iguais ao carrinho: formulario a esquerda, resumo fixo a direita. */

.checkout__colunas {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 24px;
    align-items: start;
}

.checkout-bloco {
    background: var(--cor-card);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    padding: 20px 24px;
    margin-bottom: 20px;
}
.checkout-bloco:last-child { margin-bottom: 0; }
.checkout-bloco h2 { font-size: 17px; margin: 0 0 16px; }

.checkout-aviso { margin-bottom: 20px; }

.checkout-salvos { margin-bottom: 20px; }
.checkout-salvos__rotulo {
    display: block;
    font-size: 13px; font-weight: 600; color: var(--cor-texto-suave);
    margin-bottom: 8px;
}
.checkout-salvos__lista { display: flex; flex-wrap: wrap; gap: 8px; }
.checkout-salvos__lista .btn { text-align: left; }
.checkout-salvos__lista .btn small { display: block; font-weight: 400; color: var(--cor-texto-suave); }

/* O botao "Calcular entrega" nao tem label em cima; align-items:flex-end
   alinha ele com a base do input em vez de com o topo do rotulo. */
.campo-linha--cep {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px;
}
.campo-linha--cep .campo { flex: 1 1 160px; margin-bottom: 0; }
.campo-linha--cep .btn { flex: 0 0 auto; }

.checkout-caixa {
    background: var(--cor-card);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    padding: 20px;
    position: sticky;
    top: 16px;
}
.checkout-caixa h2 { font-size: 17px; margin: 0 0 16px; }

.checkout-itens {
    list-style: none;
    margin: 0 0 16px;
    padding: 0 0 16px;
    border-bottom: 1px solid var(--cor-borda);
    max-height: 280px;
    overflow-y: auto;
}
.checkout-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 2px 8px;
    padding: 8px 0;
    font-size: 14px;
}
.checkout-item + .checkout-item { border-top: 1px solid var(--cor-borda); }
.checkout-item__qtd { color: var(--cor-texto-suave); }
.checkout-item__nome { min-width: 0; }
.checkout-item__nome small { display: block; color: var(--cor-texto-suave); font-size: 12px; }
.checkout-item__total { font-weight: 600; white-space: nowrap; }

.checkout-totais { margin: 0 0 16px; }
.checkout-totais > div { display: flex; justify-content: space-between; padding: 6px 0; }
.checkout-totais dt, .checkout-totais dd { margin: 0; }
.checkout-totais .checkout-totais__total {
    border-top: 1px solid var(--cor-borda);
    margin-top: 6px;
    padding-top: 10px;
    font-size: 18px;
    font-weight: 700;
}

.checkout-nota { font-size: 13px; color: var(--cor-texto-suave); text-align: center; margin: 8px 0; }
.checkout-caixa .resumo-nota--ok { text-align: left; }
.checkout-caixa .btn-link { display: block; text-align: center; margin-top: 8px; }

@media (max-width: 900px) {
    .checkout__colunas { grid-template-columns: 1fr; }
    .checkout-caixa { position: static; }
}

.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Etiqueta de status. O tom vem do helper statusPedido(). */
.pilula {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.pilula--ok       { background: var(--cor-sucesso-fundo); color: #2e7d5b; }
.pilula--pendente { background: var(--cor-atencao-fundo); color: #8a5a15; }
.pilula--info     { background: var(--cor-suave);         color: var(--cor-suave-texto); }
.pilula--morto    { background: #00000010;                color: var(--cor-texto-suave); }

/* ==========================================================================
   Autenticacao (entrar, criar conta, recuperar senha)
   ========================================================================== */

.auth-caixa {
    max-width: 420px;
    margin: 40px auto;
    background: var(--cor-card);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    padding: 28px;
}
/* Cadastro tem o dobro de campos: cabe em duas colunas sem ficar apertado. */
.auth-caixa-larga { max-width: 640px; }
.auth-caixa h1 { font-size: 22px; margin-bottom: 4px; }
.auth-sub { color: var(--cor-texto-suave); font-size: 14px; margin-bottom: 20px; }
.auth-links { margin-top: 16px; font-size: 14px; text-align: center; }
.auth-links a { display: inline-block; margin: 0 6px; }
.auth-caixa-aviso { margin-bottom: 16px; }

/* Chamada pro atacado no rodape do login: e o motivo de metade dos cadastros. */
.auth-revenda {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--cor-borda);
    font-size: 14px;
    color: var(--cor-texto-suave);
    text-align: center;
}

/* ==========================================================================
   Minha conta
   ========================================================================== */

.conta-grade {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    margin: 24px 0 48px;
}
.conta-conteudo { min-width: 0; }

.conta-menu {
    background: var(--cor-card);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    padding: 8px;
    position: sticky;
    top: 16px;
}
.conta-menu ul { list-style: none; margin: 0; padding: 0; }
.conta-menu__link {
    display: block;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--cor-texto);
    font-size: 14px;
    font-weight: 500;
}
.conta-menu__link:hover { background: var(--cor-suave); text-decoration: none; }
.conta-menu__link.is-ativo {
    background: var(--cor-primaria);
    color: var(--cor-primaria-texto);
    font-weight: 600;
}
.conta-menu__link--sair { color: var(--cor-erro); }

/* "Sair" e um <button> dentro de <form> (a rota exige POST), mas precisa
   parecer e medir igual aos outros itens do menu. */
.conta-menu__form { margin: 0; }
button.conta-menu__link {
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    font-family: inherit;
    cursor: pointer;
}

.conta-topo { margin-bottom: 20px; }
.conta-topo h1 { font-size: 24px; margin-bottom: 4px; }
.conta-sub { color: var(--cor-texto-suave); font-size: 14px; }
.conta-topo--pedido {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

.conta-bloco {
    background: var(--cor-card);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    padding: 20px;
    margin-bottom: 20px;
}
.conta-bloco h2 { font-size: 16px; margin-bottom: 14px; }
.conta-bloco__topo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.conta-bloco__topo h2 { margin: 0; }
.conta-bloco--duplo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
}

.conta-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.conta-card {
    background: var(--cor-card);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    padding: 16px;
}
.conta-card__num { display: block; font-size: 24px; font-weight: 700; line-height: 1.2; }
.conta-card__rotulo { color: var(--cor-texto-suave); font-size: 13px; }

.conta-vazio { color: var(--cor-texto-suave); font-size: 14px; }

/* Lista de pedidos: cada linha e um link inteiro, alvo grande no celular. */
.conta-lista { list-style: none; margin: 0; padding: 0; }
.conta-lista__item {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 0;
    border-bottom: 1px solid var(--cor-borda);
    color: var(--cor-texto);
}
.conta-lista li:last-child .conta-lista__item { border-bottom: 0; }
.conta-lista__item:hover { text-decoration: none; background: #00000004; }
.conta-lista__codigo { font-weight: 600; }
.conta-lista__data { color: var(--cor-texto-suave); font-size: 13px; }
.conta-lista__item .num { margin-left: auto; font-weight: 600; }

.conta-tabela-rolagem { overflow-x: auto; }
.conta-tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.conta-tabela th, .conta-tabela td {
    padding: 10px 8px;
    border-bottom: 1px solid var(--cor-borda);
    text-align: left;
    vertical-align: top;
}
.conta-tabela th { font-size: 12px; text-transform: uppercase; color: var(--cor-texto-suave); }
.conta-item__variante { display: block; font-size: 13px; color: var(--cor-texto-suave); }
.conta-item__sku { display: block; font-size: 12px; color: var(--cor-texto-suave); }

.conta-resumo { margin-top: 16px; margin-left: auto; max-width: 320px; font-size: 14px; }
.conta-resumo div { display: flex; justify-content: space-between; padding: 4px 0; }
.conta-resumo dt { color: var(--cor-texto-suave); }
.conta-resumo dd { margin: 0; font-variant-numeric: tabular-nums; }
.conta-resumo__desconto dd { color: var(--cor-sucesso); }
.conta-resumo__total {
    border-top: 1px solid var(--cor-borda);
    margin-top: 6px;
    padding-top: 10px !important;
    font-size: 16px;
    font-weight: 700;
}

.conta-endereco { color: var(--cor-texto-suave); font-size: 14px; line-height: 1.6; }
.conta-rastreio { margin-top: 10px; font-size: 14px; }
.conta-voltar { margin-top: 8px; }

.conta-enderecos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}
.conta-endereco-card {
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    padding: 14px;
}
.conta-endereco-card.is-padrao { border-color: var(--cor-primaria-escura); }
.conta-endereco-card__topo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.conta-endereco-card__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}
.conta-endereco-card__acoes form { display: inline; }

.conta-botoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

@media (max-width: 860px) {
    .conta-grade { grid-template-columns: 1fr; }
    .conta-menu { position: static; }
    /* No celular o menu vira uma fila rolavel, igual a barra de categorias. */
    .conta-menu ul {
        display: flex;
        gap: 4px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .conta-menu__link { white-space: nowrap; }
}

@media (max-width: 560px) {
    /* Tabela de itens vira lista: cada celula ganha o titulo da coluna. */
    .conta-tabela thead { display: none; }
    .conta-tabela tr {
        display: block;
        padding: 10px 0;
        border-bottom: 1px solid var(--cor-borda);
    }
    .conta-tabela td {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        border: 0;
        padding: 3px 0;
        text-align: right;
    }
    .conta-tabela td::before {
        content: attr(data-rotulo);
        color: var(--cor-texto-suave);
        font-size: 13px;
        text-align: left;
    }
    .conta-tabela td[data-rotulo="Produto"] { display: block; text-align: left; }
    .conta-tabela td[data-rotulo="Produto"]::before { content: none; }
    .conta-resumo { max-width: none; }
}


/* ---- pedido publico (acompanhamento) ---------------------------------- */
.pedido-publico { max-width: 880px; margin: 0 auto; padding: 24px 16px 48px; }

.pedido-topo {
    display: flex; flex-wrap: wrap; gap: 12px;
    align-items: flex-start; justify-content: space-between;
    margin-bottom: 20px;
}
.pedido-sub { margin: 4px 0 0; color: var(--cor-texto-suave); font-size: 14px; }

.pedido-bloco {
    background: var(--cor-card); border: 1px solid var(--cor-borda);
    border-radius: var(--raio); padding: 20px; margin-bottom: 16px;
}
.pedido-bloco h2 { margin: 0 0 12px; font-size: 16px; }
.pedido-bloco--duplo {
    display: grid; gap: 24px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.pedido-endereco { font-style: normal; line-height: 1.6; color: var(--cor-texto-suave); }
.pedido-nota     { margin: 0; line-height: 1.6; color: var(--cor-texto-suave); font-size: 14px; }
.pedido-rastreio { margin: 12px 0 0; font-size: 14px; }

.pedido-acoes {
    display: flex; flex-wrap: wrap; gap: 12px;
    align-items: center; margin: 20px 0 8px;
}
.pedido-acoes form { margin: 0; }

.pedido-ajuda {
    margin: 24px 0 0; padding-top: 16px;
    border-top: 1px solid var(--cor-borda);
    color: var(--cor-texto-suave); font-size: 14px; line-height: 1.6;
}

@media (max-width: 640px) {
    .pedido-acoes { flex-direction: column; align-items: stretch; }
    .pedido-acoes .btn { width: 100%; }
}

/* ---- portao do pedido (informar e-mail para ver) ---------------------- */
.pedido-portao {
    max-width: 460px; margin: 48px auto; padding: 28px 24px;
    background: var(--cor-card); border: 1px solid var(--cor-borda);
    border-radius: var(--raio); text-align: left;
}
.pedido-portao__texto { margin: 0 0 20px; color: var(--cor-texto-suave); line-height: 1.6; }
.pedido-portao__form .btn { width: 100%; margin-top: 8px; }
.pedido-portao__ajuda {
    margin: 20px 0 0; padding-top: 16px;
    border-top: 1px solid var(--cor-borda);
    font-size: 13px; color: var(--cor-texto-suave); line-height: 1.6;
}

/* ---- paginas institucionais --------------------------------------------- */
/* Coluna estreita de proposito: linha longa demais cansa e ninguem le
   contrato de ponta a ponta se parecer parede de texto. */

.doc { max-width: 760px; }
.doc__lead {
    font-size: 17px; line-height: 1.7;
    padding: 16px 18px; margin: 0 0 32px;
    background: var(--cor-suave); color: var(--cor-suave-texto);
    border-radius: var(--raio);
}
.doc h2 {
    font-size: 19px; margin: 32px 0 10px;
    padding-top: 20px; border-top: 1px solid var(--cor-borda);
}
.doc h2:first-of-type { border-top: 0; padding-top: 0; }
.doc p { margin: 0 0 14px; line-height: 1.7; }
.doc ul, .doc ol { margin: 0 0 16px; padding-left: 22px; line-height: 1.7; }
.doc li { margin-bottom: 6px; }
.doc a { color: var(--cor-suave-texto); text-decoration: underline; }
.doc a:hover { color: var(--cor-primaria-escura); }

/* Cartoes de contato: viram coluna unica no celular sem media query. */
.doc__cards {
    display: grid; gap: 12px; margin: 0 0 32px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.doc__card {
    display: block; padding: 18px;
    background: var(--cor-card);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    text-decoration: none;
    transition: var(--transicao);
}
.doc__card:hover {
    text-decoration: none;
    border-color: var(--cor-primaria-escura);
    box-shadow: var(--sombra);
}
.doc__card i { font-size: 20px; color: var(--cor-suave-texto); }
.doc__card strong { display: block; margin: 8px 0 4px; font-size: 15px; }
.doc__card span { display: block; font-size: 14px; word-break: break-word; }
.doc__card small { display: block; margin-top: 6px; font-size: 12px; color: var(--cor-texto-suave); }

/* ==========================================================================
   Botao flutuante do WhatsApp
   Aparece em toda a loja (injetado no layout/site). Verde da marca de
   proposito, e nao a paleta lima do site: o reconhecimento do icone/cor e
   justamente o que faz o visitante clicar sem ler.
   ========================================================================== */
.zap-flutuante {
    position: fixed;
    right: 20px;
    bottom: 20px;
    /* Acima do submenu (30) e abaixo do "pular para o conteudo" (100), que
       precisa continuar sendo o primeiro alvo do teclado. */
    z-index: 60;

    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;

    background: #25d366;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;

    border-radius: 999px;
    box-shadow: 0 4px 14px #00000029;
    transition: var(--transicao);
}
.zap-flutuante:hover,
.zap-flutuante:focus {
    background: #1da851;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 6px 18px #00000038;
    transform: translateY(-2px);
}
.zap-flutuante:focus-visible {
    outline: 3px solid var(--cor-escuro);
    outline-offset: 3px;
}
.zap-flutuante i { font-size: 22px; }

/* No celular vira so o circulo: a pilula com texto cobriria botao de compra e
   o resumo do carrinho, que e onde o dinheiro acontece. */
@media (max-width: 640px) {
    .zap-flutuante {
        right: 16px;
        bottom: 16px;
        width: 54px;
        height: 54px;
        padding: 0;
        justify-content: center;
        gap: 0;
    }
    .zap-flutuante__texto { display: none; }
    .zap-flutuante i { font-size: 26px; }
}

/* Quem pediu menos movimento no sistema nao ganha o empurrao no hover. */
@media (prefers-reduced-motion: reduce) {
    .zap-flutuante { transition: none; }
    .zap-flutuante:hover,
    .zap-flutuante:focus { transform: none; }
}