:root {
    --cor-menu: #1f2328;
    --cor-descricao: #444444;
    --cor-preco: #2f6fed;
    --cor-botao-fundo: #2f6fed;
    --cor-botao-texto: #ffffff;
}
* { box-sizing: border-box; }
img { max-width: 100%; height: auto; }
body {
    font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    background: #fafafa;
    color: #1f2328;
    margin: 0;
}
.site-header { background: #fff; border-bottom: 1px solid #eaeaea; }

.topo-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
    padding: 8px 16px;
    font-size: 13px;
    color: #444;
    border-bottom: 1px solid #f0f0f0;
    flex-wrap: wrap;
    gap: 6px;
}
.topo-info a { color: #444; text-decoration: none; }
.topo-info a:hover { text-decoration: underline; }
.topo-info .separador { margin: 0 8px; color: #ccc; }

.cabecalho-principal {
    display: flex;
    align-items: center;
    gap: 24px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 14px 16px;
    flex-wrap: wrap;
}
.logo { flex-shrink: 0; text-decoration: none; }
.logo img { height: 80px; display: block; }
.logo-texto { font-size: 22px; font-weight: 700; color: #1f2328; }

.nav-categorias {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    flex: 1;
}
.nav-categorias > a {
    color: var(--cor-menu);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    padding: 6px 0;
    text-transform: uppercase;
}
.nav-categorias > a:hover { opacity: 0.75; }

.item-categoria { position: relative; display: flex; align-items: center; }
.item-categoria > a {
    display: inline-block;
    color: var(--cor-menu);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    padding: 6px 0;
    text-transform: uppercase;
}
.item-categoria .submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border: 1px solid #e3e5e8;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    padding: 6px 0;
    min-width: 200px;
    z-index: 20;
}
.item-categoria .submenu a {
    display: block;
    padding: 8px 16px;
    color: #333;
    text-decoration: none;
    font-size: 13px;
    font-weight: 400;
    white-space: nowrap;
    text-transform: uppercase;
}
.item-categoria .submenu a:hover { background: #f4f6fb; color: #2f6fed; }
.item-categoria .submenu.aberto { display: block; }

.item-sub { position: relative; }
.item-sub.tem-submenu { display: flex; align-items: center; }
.item-sub.tem-submenu > a { flex: 1; }
.item-sub .submenu { top: -7px; left: 100%; }

/* A setinha de expandir funciona tanto no toque (celular) quanto como
   alternativa ao passar o mouse (computador). */
.seta-toggle {
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    font-size: 13px;
    padding: 6px 8px;
    line-height: 1;
    transition: transform 0.15s;
}
.seta-toggle.aberto { transform: rotate(180deg); }
.item-sub .seta-toggle.aberto { transform: rotate(90deg); }

/* Em telas com mouse de verdade (computador/notebook), o hover abre o submenu */
@media (hover: hover) and (pointer: fine) {
    .item-categoria:hover > .submenu,
    .item-categoria:focus-within > .submenu { display: block; }
    .item-sub:hover > .submenu,
    .item-sub:focus-within > .submenu { display: block; }
}

.cabecalho-acoes { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.campo-busca {
    display: flex;
    align-items: center;
}
.campo-busca input {
    border: 1px solid #d0d5dd;
    border-radius: 24px;
    outline: none;
    font-size: 14px;
    width: 220px;
    padding: 10px 16px;
    color: #333;
}
.campo-busca input::placeholder { color: #aaa; }

.carrinho-mini { display: flex; align-items: center; gap: 8px; text-decoration: none; color: #1f2328; }
.carrinho-icone { position: relative; font-size: 22px; }
.carrinho-contagem {
    position: absolute;
    top: -8px;
    right: -10px;
    background: #2f6fed;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 10px;
    padding: 1px 5px;
    min-width: 16px;
    text-align: center;
}
.carrinho-total { font-size: 13px; font-weight: 600; }

.banner-loja { display: block; width: 100%; max-height: 170px; object-fit: cover; border-radius: 10px; margin-bottom: 20px; }

.container { max-width: 1000px; margin: 0 auto; padding: 24px 16px 80px; }

.grade-produtos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 18px;
}
.produto-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: block;
}
.produto-card img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #f0f0f0; }
.produto-card .info { padding: 10px 12px; }
.produto-card .nome { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.produto-card .preco { font-size: 14px; color: var(--cor-preco); font-weight: 700; }

.categorias-filtro { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.categorias-filtro a {
    padding: 6px 14px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #ddd;
    font-size: 13px;
    text-decoration: none;
    color: #333;
}
.categorias-filtro a.ativa { background: #2f6fed; color: #fff; border-color: #2f6fed; }

.produto-detalhe { display: flex; gap: 30px; flex-wrap: wrap; background: #fff; padding: 24px; border-radius: 10px; border: 1px solid #eee; }
.produto-detalhe .fotos { flex: 1 1 320px; }
.foto-principal-wrap { position: relative; width: 100%; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: #f4f4f4; }
.foto-principal-wrap img { width: 100%; height: 100%; object-fit: contain; display: block; }
.seta-foto {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.85);
    color: #333;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.seta-foto:hover { background: #fff; }
.seta-anterior { left: 10px; }
.seta-proxima { right: 10px; }
.fotos-miniaturas { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.fotos-miniaturas .miniatura {
    width: 64px;
    height: 64px;
    object-fit: contain;
    background: #f0f0f0;
    border-radius: 6px;
    cursor: pointer;
    border: 2px solid transparent;
    opacity: 0.7;
}
.fotos-miniaturas .miniatura:hover { opacity: 1; }
.fotos-miniaturas .miniatura.ativa { border-color: var(--cor-botao-fundo); opacity: 1; }
.produto-detalhe .info { flex: 1 1 320px; }
.produto-detalhe h1 { font-size: 22px; margin: 0 0 8px; }
.preco-grande { font-size: 26px; font-weight: 700; color: var(--cor-preco); margin: 10px 0; }
.preco-grande.preco-aviso { font-size: 15px; font-weight: 600; color: #777; }
.descricao-produto { color: var(--cor-descricao); margin-top: 20px; }
.stepper-qtd { display: inline-flex; align-items: center; gap: 14px; }
.stepper-qtd button {
    background: none; border: none; font-size: 20px; line-height: 1;
    cursor: pointer; color: #333; width: 20px; padding: 0;
}
.stepper-qtd button:hover { color: var(--cor-botao-fundo); }
.stepper-qtd input {
    width: 56px; text-align: center; padding: 9px 6px;
    -moz-appearance: textfield;
}
.stepper-qtd input::-webkit-outer-spin-button,
.stepper-qtd input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Variante larga: mesma cara do <select> acima dela (borda única, ocupa a largura toda) */
.stepper-qtd-largo {
    width: 100%;
    border: 1px solid #d0d5dd;
    border-radius: 6px;
    justify-content: space-between;
    padding: 0 16px;
    box-sizing: border-box;
    gap: 0;
}
.card .stepper-qtd-largo input {
    border: none;
    flex: 1;
    width: auto;
    padding: 9px 6px;
}
.estoque-aviso { font-size: 13px; color: #c0392b; }
.ajuda-produto { font-size: 13px; color: #777; margin: 2px 0 8px; }

.form-linha { display: flex; gap: 10px; align-items: center; margin: 10px 0; }
select, input[type=text], input[type=email], input[type=password], input[type=number], input[type=tel], input[type=search], input[type=url], textarea {
    padding: 9px 10px; border: 1px solid #d0d5dd; border-radius: 6px; font-size: 14px; font-family: inherit;
}

.btn {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
    border: 1px solid transparent;
    background: var(--cor-botao-fundo);
    color: var(--cor-botao-texto);
}
.btn:hover { filter: brightness(0.9); }
.btn-secundario { background: #fff; color: #1f2328; border-color: #d0d5dd; }
.btn-secundario:hover { filter: none; background: #f5f5f5; }
.btn-pilula { border-radius: 999px; padding: 8px 20px; }

.tabela-carrinho { width: 100%; border-collapse: collapse; background: #fff; border-radius: 10px; overflow: hidden; }
.tabela-carrinho th, .tabela-carrinho td { padding: 12px; border-bottom: 1px solid #eee; text-align: left; font-size: 14px; }
.tabela-carrinho img { width: 50px; height: 50px; object-fit: contain; background: #f0f0f0; border-radius: 6px; }
.tabela-carrinho input[type=number] { width: 60px; }
.link-remover { background: none; border: none; padding: 0; color: #2f6fed; text-decoration: underline; cursor: pointer; font-size: 14px; }

.card { background: #fff; border: 1px solid #eee; border-radius: 10px; padding: 20px; margin-bottom: 16px; max-width: 420px; }
.card label { display: block; font-size: 13px; margin: 10px 0 4px; }
.card input { width: 100%; }
.card select { width: 100%; box-sizing: border-box; }

.total-carrinho { text-align: right; font-size: 18px; font-weight: 700; margin: 14px 0; }
.erro { background: #fdeceb; color: #c0392b; padding: 10px 14px; border-radius: 6px; font-size: 14px; margin-bottom: 14px; }
.sucesso { background: #e3f6e8; color: #17803d; padding: 14px 18px; border-radius: 8px; font-size: 15px; margin-bottom: 14px; }
.tabela-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ===== Versão mobile do cabeçalho (escondida no computador) ===== */
.mobile-header { display: none; }

.mobile-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid #eee;
}
.mbtn { background: none; border: none; font-size: 20px; cursor: pointer; color: var(--cor-menu); padding: 4px 8px; }
.mobile-titulo { font-weight: 600; font-size: 14px; letter-spacing: 0.3px; text-transform: uppercase; color: var(--cor-menu); }

.mobile-busca-form { display: none; padding: 0 12px 10px; }
.mobile-busca-form.aberto { display: block; }
.mobile-busca-form input {
    width: 100%;
    border: 1px solid #d0d5dd;
    border-radius: 20px;
    padding: 9px 16px;
    font-size: 14px;
    outline: none;
}

.mobile-iconbar {
    display: flex;
    border-bottom: 1px solid #eee;
}
.mobile-icon-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 4px;
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: none;
    color: #333;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
.mi-icone { position: relative; font-size: 20px; }

.mobile-logo { display: flex; justify-content: center; padding: 16px 12px; text-decoration: none; }
.mobile-logo img { height: 64px; }

/* Painel de categorias em "gaveta", nível por nível (igual ao app da loja original) */
.mobile-produtos-painel { display: none; background: #2b2b2b; color: #fff; }
.mobile-produtos-painel.aberto { display: block; }
.mobile-produtos-painel .painel-cabecalho {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.5px;
}
.mobile-produtos-painel .painel-voltar { background: none; border: none; color: #fff; font-size: 22px; cursor: pointer; line-height: 1; padding: 0; }
.mobile-produtos-painel .painel-ver-tudo {
    display: block;
    padding: 12px 16px;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
}
.mobile-produtos-painel .painel-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    font-size: 14px;
    cursor: pointer;
}
.mobile-produtos-painel .painel-chevron { font-size: 20px; color: rgba(255,255,255,0.6); }

/* Menu lateral do ☰ */
.mobile-drawer-fundo {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 40;
}
.mobile-drawer-fundo.aberto { display: block; }
.mobile-drawer {
    position: fixed;
    top: 0;
    left: -280px;
    width: 260px;
    height: 100%;
    background: #fff;
    z-index: 41;
    padding: 50px 20px 20px;
    transition: left 0.2s;
    overflow-y: auto;
}
.mobile-drawer.aberto { left: 0; }
.mobile-drawer-fechar { position: absolute; top: 10px; right: 14px; background: none; border: none; font-size: 26px; cursor: pointer; }
.mobile-drawer-secao { padding: 14px 0; border-bottom: 1px solid #eee; }
.mobile-drawer-secao p { margin: 0 0 8px; font-size: 14px; color: #333; }
.mobile-drawer-secao a { display: block; padding: 6px 0; color: #1f2328; text-decoration: none; font-size: 14px; }

@media (max-width: 780px) {
    .desktop-only { display: none !important; }
    .mobile-header { display: block; }

    .produto-detalhe { padding: 16px; }
    .grade-produtos { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
}

/* ---- Páginas de formulário centralizadas (cadastro) ---- */
.container-centro { max-width: 460px; min-height: 65vh; display: flex; flex-direction: column; justify-content: center; }
.container-centro h1 { text-align: center; }
.card-centro { max-width: none; width: 100%; }
.texto-centro { text-align: center; }
.dica-campo { color: #888; font-weight: 400; font-size: 12px; }
.campo-senha { position: relative; }
.campo-senha input { padding-right: 46px; }
.olho-senha { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: none; padding: 6px; cursor: pointer; color: #777; display: flex; align-items: center; }
.olho-senha:hover { color: #222; }

/* Cadastro: todos os campos com o mesmo tamanho, um pouco mais finos */
.card-centro input { height: 34px; padding: 0 10px; font-size: 14px; }
.card-centro .campo-senha input { padding-right: 46px; }

/* ---- Banners da página inicial (carrossel) ---- */
.banner-carrossel { position: relative; display: grid; width: 100%; aspect-ratio: 4 / 1; border-radius: 10px; overflow: hidden; margin-bottom: 20px; background: #f0f0f0; }
.banner-carrossel .banner-slide { grid-area: 1 / 1; display: block; width: 100%; height: 100%; opacity: 0; pointer-events: none; transition: opacity .7s ease; }
.banner-carrossel .banner-slide.ativo { opacity: 1; pointer-events: auto; }
.banner-carrossel .banner-slide img { display: block; width: 100%; height: 100%; object-fit: cover; margin: 0; border-radius: 0; max-height: none; }
.banner-carrossel a.banner-slide { cursor: pointer; }
.banner-pontos { z-index: 2; }
.banner-pontos { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; gap: 7px; }
.banner-ponto { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.9); background: rgba(0,0,0,.35); cursor: pointer; }
.banner-ponto.ativo { background: #fff; }
.banner-pontos { pointer-events: none; }
.banner-ponto { pointer-events: auto; }

/* Frase abaixo do banner (tela inicial) */
.frase-banner { text-align: center; font-size: 20px; font-weight: 600; line-height: 1.4; margin: 16px auto 6px; max-width: 900px; color: var(--cor-menu); }
@media (max-width: 600px) { .frase-banner { font-size: 16px; margin: 12px auto 4px; } }