:root {
  --cor-primaria: #c0392b;
  --cor-texto: #222;
  --cor-texto-suave: #6b6b6b;
  --cor-fundo: #f5f3ef;
  --cor-card: #ffffff;
  --borda: #e7e3dc;
  --sombra: 0 1px 3px rgba(20,15,10,0.06), 0 8px 20px rgba(20,15,10,0.04);
  --raio: 12px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  -webkit-font-smoothing: antialiased;
}

header.topo {
  background: var(--cor-primaria);
  color: #fff;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);
  position: sticky;
  top: 0;
  z-index: 40;
}

header.topo img.logo {
  height: 48px;
  max-width: 120px;
  object-fit: contain;
  border-radius: 6px;
  background: #fff;
  padding: 4px;
}

header.topo .placeholder-logo {
  height: 48px;
  width: 48px;
  flex-shrink: 0;
  border-radius: 6px;
  background: rgba(255,255,255,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  text-align: center;
}

header.topo h1 {
  font-size: 20px;
  margin: 0;
  line-height: 1.2;
  word-break: break-word;
}

nav.acoes {
  margin-left: auto;
  display: flex;
  gap: 10px;
}

nav.acoes a {
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  opacity: 0.9;
  border: 1px solid rgba(255,255,255,0.5);
  padding: 6px 12px;
  border-radius: 6px;
  white-space: nowrap;
}
nav.acoes a:hover { opacity: 1; background: rgba(255,255,255,0.15); }

@media (max-width: 560px) {
  header.topo { padding: 12px 16px; gap: 10px; }
  header.topo h1 { font-size: 17px; }
  header.topo img.logo, header.topo .placeholder-logo { height: 38px; }
  header.topo .placeholder-logo { width: 38px; font-size: 9px; }
  nav.acoes a { padding: 5px 10px; font-size: 12px; }
}

main { max-width: 1200px; margin: 0 auto; padding: 24px; }

@media (max-width: 560px) {
  main { padding: 14px; }
}

.layout-catalogo {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  align-items: start;
}

.barra-categorias {
  background: var(--cor-card);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 16px;
  position: sticky;
  top: 84px;
}
.barra-categorias h3 {
  margin: 0 0 10px 0;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #888;
}
.barra-categorias ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 60vh;
  overflow-y: auto;
}
.cat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 9px 10px;
  border-radius: 6px;
  font-size: 14px;
  color: var(--cor-texto);
  cursor: pointer;
}
.cat-item:hover { background: var(--cor-fundo); }
.cat-item.ativa {
  background: var(--cor-primaria);
  color: #fff;
  font-weight: 600;
}
.cat-item .contagem {
  font-size: 11px;
  opacity: 0.75;
}

.conteudo-catalogo { min-width: 0; }

/* No mobile, a barra lateral vira um select simples pra economizar espaço */
#filtro-categoria-mobile { display: none; }

@media (max-width: 800px) {
  .layout-catalogo { grid-template-columns: 1fr; }
  .barra-categorias { display: none; }
  #filtro-categoria-mobile { display: block; }
}

.filtros {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.filtros input, .filtros select {
  padding: 8px 10px;
  border: 1px solid var(--borda);
  border-radius: 6px;
  font-size: 14px;
}

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

@media (max-width: 560px) {
  .grade {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}
@media (max-width: 380px) {
  .grade { grid-template-columns: 1fr; }
}

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

.card .imagem {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #efeae3 center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 13px;
}

.card .conteudo { padding: 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card .categoria { font-size: 11px; text-transform: uppercase; color: var(--cor-primaria); font-weight: 600; }
.card h3 { margin: 0; font-size: 16px; }
.card .preco { font-weight: 700; font-size: 17px; margin-top: auto; }
.card .descricao { font-size: 13px; color: #555; }

@media (max-width: 560px) {
  .card .conteudo { padding: 10px; gap: 4px; }
  .card h3 { font-size: 14px; }
  .card .preco { font-size: 15px; }
  .card .descricao {
    font-size: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

.variacoes-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.variacoes-tags span {
  font-size: 11px;
  background: var(--cor-fundo);
  border: 1px solid var(--borda);
  border-radius: 20px;
  padding: 2px 8px;
}

.vazio {
  text-align: center;
  color: #888;
  padding: 60px 20px;
}

footer.rodape {
  text-align: center;
  padding: 24px;
  color: #888;
  font-size: 13px;
}

/* ---- Painel Admin ---- */
.login-box {
  max-width: 360px;
  margin: 90px auto;
  background: #fff;
  padding: 32px;
  border-radius: var(--raio);
  border: 1px solid var(--borda);
  box-shadow: var(--sombra);
  text-align: center;
}
.login-box h2 { margin-top: 0; }
.login-box input {
  width: 100%;
  padding: 11px 12px;
  margin: 14px 0;
  border: 1px solid var(--borda);
  border-radius: 8px;
  font-size: 14px;
  background: #fdfcfb;
}
.login-box input:focus {
  outline: none;
  border-color: var(--cor-primaria);
  box-shadow: 0 0 0 3px rgba(192,57,43,0.12);
}

@media (max-width: 560px) {
  .login-box { margin: 40px auto; padding: 24px; max-width: 100%; }
}
.btn {
  background: var(--cor-primaria);
  color: #fff;
  border: none;
  padding: 11px 18px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: filter .15s ease, transform .05s ease;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }
.btn.secundario { background: #eceae5; color: var(--cor-texto); }
.btn.secundario:hover { background: #e2ded6; }
.btn.perigo { background: #fdecea; color: #a83232; }
.btn.perigo:hover { background: #fadbd8; }

.painel { display: grid; grid-template-columns: 380px 1fr; gap: 24px; align-items: start; }
@media (max-width: 900px) {
  .painel { grid-template-columns: 1fr; }
  .form-produto { position: static; }
}

.form-produto {
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 84px;
}
.form-produto h2 {
  margin: 0 0 4px 0;
  font-size: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--borda);
}
.form-produto label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--cor-texto-suave);
  margin-bottom: -6px;
}
.form-produto input, .form-produto textarea, .form-produto select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  font-size: 14px;
  background: #fdfcfb;
  font-family: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-produto input:focus, .form-produto textarea:focus, .form-produto select:focus {
  outline: none;
  border-color: var(--cor-primaria);
  box-shadow: 0 0 0 3px rgba(192,57,43,0.12);
}
.form-produto textarea { min-height: 70px; resize: vertical; }

.lista-imagens { display: flex; flex-wrap: wrap; gap: 8px; }
.lista-imagens .miniatura {
  position: relative;
  width: 64px; height: 64px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--borda);
}
.lista-imagens img { width: 100%; height: 100%; object-fit: cover; }
.lista-imagens button {
  position: absolute; top: 0; right: 0;
  background: rgba(0,0,0,0.6); color: #fff; border: none;
  width: 18px; height: 18px; font-size: 11px; cursor: pointer;
}

.bloco-variacao {
  border: 1px solid var(--borda);
  background: #fbfaf8;
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bloco-variacao .linha { display: flex; gap: 6px; }
.bloco-variacao .linha input { flex: 1; }
.bloco-variacao .linha button {
  background: #fdecea;
  color: #a83232;
  border: none;
  border-radius: 6px;
  width: 34px;
  cursor: pointer;
  font-size: 13px;
}

.lista-produtos-box {
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 22px;
}
.lista-produtos-box h2 {
  margin: 0 0 16px 0;
  font-size: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--borda);
}

.lista-produtos-admin {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.item-admin {
  background: #fdfcfb;
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  transition: box-shadow .15s ease;
}
.item-admin:hover { box-shadow: var(--sombra); }
.item-admin img {
  width: 56px; height: 56px; object-fit: cover; border-radius: 8px;
  background: #efeae3;
  flex-shrink: 0;
}
.item-admin .info { flex: 1; min-width: 160px; line-height: 1.5; }
.item-admin .info small { color: var(--cor-texto-suave); }
.item-admin .acoes-item { display: flex; gap: 6px; }

@media (max-width: 560px) {
  .item-admin { padding: 10px; }
  .item-admin .acoes-item { width: 100%; justify-content: flex-end; }
}

.aviso { font-size: 13px; padding: 12px 14px; border-radius: 8px; }
.aviso.erro { background: #fdecea; color: #a83232; }
.aviso.ok { background: #eafaf0; color: #227044; }

.config-box {
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 22px 24px;
  margin-bottom: 24px;
}
.config-box h2 {
  margin: 0 0 4px 0;
  font-size: 18px;
}
.config-box > p {
  color: var(--cor-texto-suave);
}
.config-box label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--cor-texto-suave);
  margin-bottom: 6px;
}
.config-box input[type="text"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  font-size: 14px;
  background: #fdfcfb;
  font-family: inherit;
}
.config-box input[type="text"]:focus {
  outline: none;
  border-color: var(--cor-primaria);
  box-shadow: 0 0 0 3px rgba(192,57,43,0.12);
}
.config-box input[type="color"] {
  width: 100%;
  height: 42px;
  padding: 4px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  cursor: pointer;
  background: #fdfcfb;
}
.config-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 16px 0;
}
@media (max-width: 560px) {
  .config-grid { grid-template-columns: 1fr; }
}

/* ---- Código do produto / disponibilidade ---- */
.card .codigo {
  font-size: 11px;
  color: #999;
}
.badge-estoque {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  width: fit-content;
}
.badge-estoque.disponivel { background: #eafaf0; color: #227044; }
.badge-estoque.indisponivel { background: #fdecea; color: #a83232; }

.card .acoes-card {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.btn-whats {
  flex: 1;
  background: #25D366;
  color: #fff;
  border: none;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.btn-whats:hover { opacity: 0.9; }
.btn-whats.desabilitado {
  background: #bbb;
  pointer-events: none;
  opacity: 0.7;
}
.btn-carrinho {
  background: var(--cor-fundo);
  border: 1px solid var(--borda);
  color: var(--cor-texto);
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}
.btn-carrinho.no-carrinho {
  background: var(--cor-primaria);
  color: #fff;
  border-color: var(--cor-primaria);
}

@media (max-width: 560px) {
  .card .acoes-card { flex-direction: column; }
  .btn-whats, .btn-carrinho { font-size: 12px; padding: 8px 6px; width: 100%; }
}

.selects-variacao {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}
.selects-variacao select {
  padding: 5px 6px;
  border: 1px solid var(--borda);
  border-radius: 6px;
  font-size: 12px;
}

/* ---- Carrinho flutuante ---- */
.botao-flutuante-carrinho {
  position: fixed;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  right: 18px;
  background: var(--cor-primaria);
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 50;
}
.botao-flutuante-carrinho .contador {
  background: #fff;
  color: var(--cor-primaria);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 560px) {
  .botao-flutuante-carrinho {
    right: 14px;
    padding: 12px 16px;
    font-size: 13px;
  }
}

.painel-carrinho-fundo {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 100;
  display: none;
  align-items: flex-end;
  justify-content: flex-end;
}
.painel-carrinho-fundo.aberto { display: flex; }

.painel-carrinho {
  background: #fff;
  width: 100%;
  max-width: 380px;
  height: 100%;
  padding: 20px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
}
.painel-carrinho h2 { margin: 0; display:flex; justify-content:space-between; align-items:center; }
.painel-carrinho .fechar { cursor: pointer; font-size: 20px; background:none; border:none; }

.item-carrinho {
  display: flex;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid var(--borda);
  padding-bottom: 10px;
}
.item-carrinho img {
  width: 48px; height: 48px; border-radius: 6px; object-fit: cover; background: #efeae3;
}
.item-carrinho .info { flex: 1; font-size: 13px; }
.item-carrinho .remover {
  background: none; border: none; color: #a83232; cursor: pointer; font-size: 13px;
}

.carrinho-vazio { text-align: center; color: #999; padding: 30px 0; }

/* Ajustes de navegação, acessibilidade e tema do sistema */
:root { color-scheme: light dark; }
button, input, select, textarea { font: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid color-mix(in srgb, var(--cor-primaria), transparent 48%); outline-offset: 2px; }
.link-produto { color: inherit; text-decoration: none; }
.link-produto:hover { color: var(--cor-primaria); text-decoration: underline; }
.btn-whats svg, .btn-carrinho svg { width: 19px; height: 19px; fill: currentColor; flex: 0 0 auto; }
.btn-whats { min-height: 40px; font-weight: 650; gap: 8px; }
.btn-carrinho { width: 42px; min-width: 42px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 8px; }
.card .acoes-card { align-items: stretch; }
.paginacao { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 22px 0 4px; color: var(--cor-texto-suave); font-size: 13px; }
.paginacao button:disabled { opacity: .45; cursor: not-allowed; }
.config-ajuda { color: var(--cor-texto-suave); font-size: 13px; line-height: 1.6; margin: 8px 0 18px; }
.config-box { padding: 26px; }
.config-box h2 { font-size: 20px; }
.config-grid { gap: 18px; }
.campo-largo { grid-column: 1 / -1; }
.config-acoes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.diagnostico { margin-top: 12px; border-top: 1px solid var(--borda); padding-top: 12px; }
.diagnostico summary { cursor: pointer; color: var(--cor-texto-suave); font-size: 13px; font-weight: 600; }
.diagnostico pre { background: var(--cor-fundo); color: var(--cor-texto); max-height: 260px; overflow: auto; }
.config-box input, .form-produto input, .form-produto textarea, .form-produto select, .login-box input { color: var(--cor-texto); }
.painel { align-items: stretch; }
.form-produto { position: static; }
.lista-produtos-box { min-width: 0; display: flex; flex-direction: column; min-height: 100%; }
.lista-produtos-admin { min-height: 0; max-height: 700px; overflow-y: auto; padding-right: 3px; }
.item-admin .info { overflow-wrap: anywhere; }
.item-admin .acoes-item { flex-wrap: wrap; }
.produto-detalhe { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr); gap: clamp(24px, 5vw, 64px); align-items: start; background: var(--cor-card); border: 1px solid var(--borda); border-radius: 18px; padding: clamp(18px, 4vw, 42px); box-shadow: var(--sombra); }
.voltar-catalogo { display: inline-block; margin: 0 0 18px; color: var(--cor-texto-suave); text-decoration: none; }
.voltar-catalogo:hover { color: var(--cor-primaria); }
.foto-principal { width: 100%; aspect-ratio: 1 / 1; display: grid; place-items: center; background: var(--cor-fundo); color: var(--cor-texto-suave); border-radius: 14px; overflow: hidden; }
.foto-principal img { width: 100%; height: 100%; object-fit: contain; }
.miniaturas-produto { display: flex; gap: 10px; overflow-x: auto; padding: 12px 2px 2px; }
.miniatura-produto { width: 72px; height: 72px; padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; flex: 0 0 auto; background: var(--cor-fundo); cursor: pointer; }
.miniatura-produto.ativa { border-color: var(--cor-primaria); }
.miniatura-produto img { width: 100%; height: 100%; object-fit: cover; }
.detalhe-info { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.detalhe-info h2 { font-size: clamp(24px, 3vw, 34px); line-height: 1.15; margin: 0; }
.detalhe-info .preco { font-size: 28px; font-weight: 750; }
.detalhe-descricao { line-height: 1.7; color: var(--cor-texto-suave); white-space: normal; }
.variacao-detalhe { width: 100%; display: grid; gap: 7px; font-size: 13px; font-weight: 650; }
.variacao-detalhe select { width: 100%; padding: 11px 12px; border-radius: 8px; border: 1px solid var(--borda); background: var(--cor-card); color: var(--cor-texto); }
.acoes-detalhe { display: grid; grid-template-columns: 1fr; gap: 10px; width: 100%; margin-top: 8px; }
.acoes-detalhe .btn-whats, .acoes-detalhe .btn-carrinho { width: 100%; min-height: 48px; border-radius: 9px; font-size: 15px; }
.acoes-detalhe .btn-carrinho { gap: 9px; }
.btn-carrinho:disabled { opacity: .55; cursor: not-allowed; }

@media (max-width: 800px) {
  .produto-detalhe { grid-template-columns: 1fr; gap: 24px; }
  .painel { align-items: start; }
  .lista-produtos-box { min-height: 0; }
  .lista-produtos-admin { max-height: 520px; }
}
@media (max-width: 560px) {
  .config-box { padding: 18px; }
  .config-grid { grid-template-columns: 1fr; }
  .campo-largo { grid-column: auto; }
  .card .acoes-card { flex-direction: row; }
  .btn-whats { font-size: 12px; padding: 8px; }
  .btn-carrinho { width: 40px; min-width: 40px; }
  .produto-detalhe { border-radius: 13px; padding: 16px; }
}

@media (prefers-color-scheme: dark) {
  :root {
    --cor-texto: #f2f3f5;
    --cor-texto-suave: #a8adb7;
    --cor-fundo: #121419;
    --cor-card: #1c2028;
    --borda: #333945;
    --sombra: 0 2px 6px rgba(0,0,0,.24), 0 12px 30px rgba(0,0,0,.2);
  }
  body { background: var(--cor-fundo); color: var(--cor-texto); }
  .login-box, .config-box, .form-produto, .lista-produtos-box, .produto-detalhe, .painel-carrinho { background: var(--cor-card); }
  .login-box input, .form-produto input, .form-produto textarea, .form-produto select, .config-box input[type="text"], .config-box input[type="color"], .variacao-detalhe select { background: #171a20; color: var(--cor-texto); border-color: var(--borda); }
  .cat-item:hover, .btn.secundario { background: #292e38; color: var(--cor-texto); }
  .item-admin, .bloco-variacao { background: #171a20; }
  .card .imagem, .foto-principal, .miniatura-produto, .item-carrinho img { background-color: #292e38; }
  .card .descricao { color: #c0c5ce; }
  .painel-carrinho { color: var(--cor-texto); }
  .painel-carrinho .fechar { color: var(--cor-texto); }
  .btn.perigo { background: #48292c; color: #ffb4b4; }
  .diagnostico pre { background: #171a20 !important; color: var(--cor-texto) !important; }
}

/* Cabeçalho de loja, sem moldura branca forçada na imagem da marca */
header.topo {
  background: var(--cor-card);
  color: var(--cor-texto);
  padding: 12px max(24px, calc((100vw - 1200px) / 2));
  min-height: 76px;
  border-bottom: 3px solid var(--cor-primaria);
  box-shadow: 0 5px 20px rgba(20, 22, 28, .07);
  gap: 16px;
}
header.topo #logo-container { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
header.topo img.logo { display: block; height: 48px; max-width: min(160px, 28vw); object-fit: contain; border-radius: 0; background: transparent; padding: 0; }
header.topo .placeholder-logo { background: var(--cor-primaria); color: white; border-radius: 12px; font-weight: 750; }
header.topo h1 { font-size: clamp(17px, 2vw, 21px); font-weight: 700; letter-spacing: -.02em; }
nav.acoes a { color: var(--cor-texto); border-color: var(--borda); background: var(--cor-fundo); opacity: 1; font-weight: 600; transition: border-color .15s ease, background .15s ease, color .15s ease; }
nav.acoes a:hover { color: var(--cor-primaria); border-color: var(--cor-primaria); background: var(--cor-card); }

.destaques-promocao { margin: 0 0 26px; padding: clamp(16px, 2.4vw, 26px); overflow: hidden; border: 1px solid color-mix(in srgb, var(--cor-primaria), var(--borda) 58%); border-radius: 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--cor-primaria), var(--cor-card) 94%), var(--cor-card) 62%); }
.cabecalho-destaques { margin-bottom: 16px; }
.cabecalho-destaques .sobretitulo { color: var(--cor-primaria); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.cabecalho-destaques h2 { margin: 5px 0 4px; font-size: clamp(21px, 2.4vw, 27px); }
.cabecalho-destaques p { color: var(--cor-texto-suave); margin: 0; font-size: 13px; }
.grade-destaques { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 28px) / 3); gap: 14px; overflow-x: auto; padding: 2px 2px 12px; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.grade-destaques::-webkit-scrollbar { display: none; }
.carrossel-promocoes { position: relative; min-width: 0; }
.seta-promocoes { position: absolute; z-index: 4; top: 50%; display: grid; place-items: center; width: 38px; height: 48px; padding: 0; border: 1px solid var(--borda); border-radius: 14px; background: var(--cor-card); color: var(--cor-texto); box-shadow: 0 4px 14px rgba(0,0,0,.18); cursor: pointer; transform: translateY(-50%); }
.seta-promocoes svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.seta-promocoes:hover:not(:disabled) { color: var(--cor-primaria); border-color: var(--cor-primaria); }
.seta-promocoes:disabled { opacity: .42; cursor: default; }
.seta-promocoes[hidden] { display: none; }
.seta-anterior { left: 2px; }
.seta-proxima { right: 2px; }
.com-setas .grade-destaques { padding-right: 42px; padding-left: 42px; }
.grade-destaques .card { scroll-snap-align: start; border-color: color-mix(in srgb, var(--cor-primaria), var(--borda) 45%); box-shadow: 0 5px 16px rgba(20, 22, 28, .08); }
.card-promocao { position: relative; }
.card-promocao .imagem { aspect-ratio: 1 / .78; }
.card .imagem { position: relative; }
.badges-imagem { position: absolute; z-index: 2; top: 10px; right: 10px; left: 10px; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; pointer-events: none; }
.badges-imagem .badge-estoque { flex: 0 1 auto; max-width: 65%; padding: 5px 9px; background: rgba(234, 250, 240, .96); color: #17633a; box-shadow: 0 2px 8px rgba(0, 0, 0, .13); }
.badges-imagem .badge-estoque.indisponivel { background: rgba(253, 236, 234, .96); color: #9c302b; }
.tag-promocao { display: inline-flex; width: fit-content; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; background: #fff0ee; color: #9f241f; font-size: 11px; line-height: 1.35; font-weight: 800; }
.badges-imagem .tag-promocao { flex: 0 0 auto; padding: 6px 10px; border-radius: 999px; background: #48201f; color: #ffd0ca; box-shadow: 0 2px 8px rgba(0, 0, 0, .2); }
.condicao-promocao { color: var(--cor-texto-suave); font-size: 12px; line-height: 1.5; }
.preco-normal { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.preco-normal small, .precos-promocao small { font-size: 10px; color: var(--cor-texto-suave); letter-spacing: .04em; }
.precos-promocao { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.preco-antigo { display: inline-flex; align-items: baseline; gap: 5px; color: var(--cor-texto-suave); font-size: 13px; font-weight: 500; }
.preco-atual { display: inline-flex; align-items: baseline; gap: 6px; color: #b12721; font-size: 19px; font-weight: 800; }
.preco-atual small { color: #b12721; font-weight: 800; }
.cat-item.cat-promocao { color: #ad2923; font-weight: 700; }
.card .categoria { color: var(--cor-primaria); }
.item-carrinho .remover { color: var(--cor-primaria); font-weight: 650; }
.grupo-preco { display: grid; gap: 10px; }
.grupo-preco[hidden] { display: none; }
.opcao-promocao { display: flex !important; align-items: center; gap: 9px; padding: 12px 14px; margin: 2px 0 0 !important; border: 1px solid var(--borda); border-radius: 10px; background: var(--cor-fundo); color: var(--cor-texto) !important; font-size: 13px !important; letter-spacing: 0 !important; text-transform: none !important; }
.opcao-promocao input { width: 18px; height: 18px; margin: 0; accent-color: var(--cor-primaria); }
.grupo-preco label { margin-bottom: -5px; }
.linha-opcao-variacao { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 38px; gap: 7px; align-items: end; }
.linha-opcao-variacao label { display: grid; min-width: 0; gap: 5px; margin: 0; font-size: 10px; }
.ajuda-variacoes { margin: -8px 0 0; color: var(--cor-texto-suave); font-size: 12px; line-height: 1.5; }
.linha-opcao-variacao input { min-width: 0; }
.linha-opcao-variacao .btn-remover-opcao { width: 38px; height: 40px; padding: 0; font-size: 20px; }
.btn-remover-variacao { width: auto; flex: 0 0 auto; padding: 9px 11px; }
.btn-adicionar-opcao { width: fit-content; padding: 8px 11px; font-size: 12px; }
.btn-escolher-opcoes { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 10px; border-radius: 7px; background: var(--cor-primaria); color: #fff; font-size: 13px; font-weight: 700; text-decoration: none; text-align: center; }
.btn-escolher-opcoes:hover { filter: brightness(1.08); }
.codigo-variante { width: 100%; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 9px; background: var(--cor-fundo); color: var(--cor-texto-suave); font-size: 13px; }
.codigo-carrinho, .opcoes-carrinho { color: var(--cor-texto-suave); }
.opcoes-carrinho { margin-top: 2px; font-size: 12px; }

@media (max-width: 800px) {
  .grade-destaques { grid-auto-columns: calc((100% - 14px) / 2); }
  .seta-promocoes { display: none; }
  .com-setas .grade-destaques { padding-inline: 2px; }
}
@media (max-width: 560px) {
  header.topo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; padding: 10px 14px; min-height: 0; }
  header.topo #logo-container { grid-row: 1; grid-column: 1; }
  header.topo img.logo { height: 42px; max-width: 86px; }
  header.topo .placeholder-logo { width: 42px; height: 42px; border-radius: 10px; }
  header.topo h1 { grid-row: 1; grid-column: 2; min-width: 0; font-size: 16px; }
  header.topo nav.acoes { grid-row: 2; grid-column: 1 / -1; margin: 0; justify-content: flex-end; }
  nav.acoes a { padding: 6px 10px; }
  .destaques-promocao { margin-bottom: 18px; border-radius: 14px; }
  .grade-destaques { grid-auto-columns: calc((100% - 10px) / 2); gap: 10px; touch-action: pan-x pan-y; }
  .badges-imagem { top: 7px; right: 7px; left: 7px; gap: 4px; }
  .badges-imagem .badge-estoque { max-width: 58%; padding: 4px 6px; font-size: 9px; }
  .badges-imagem .tag-promocao { padding: 4px 6px; font-size: 9px; }
  .preco-atual { font-size: 17px; }
  .opcao-promocao { font-size: 12px !important; }
  .card .acoes-card .btn-whats { width: auto; min-width: 0; flex: 1; }
}

@media (prefers-color-scheme: dark) {
  header.topo { box-shadow: 0 5px 20px rgba(0, 0, 0, .22); }
  .tag-promocao { background: #482522; color: #ffc0b7; }
  .preco-atual, .preco-atual small, .cat-item.cat-promocao, .card .categoria, .item-carrinho .remover { color: #ff9287; }
  .cat-item.cat-promocao.ativa { color: #fff; }
  .badges-imagem .badge-estoque { background: #183d2c; color: #a7efc2; }
  .badges-imagem .badge-estoque.indisponivel { background: #482522; color: #ffc0b7; }
}

/* Layout compacto para celulares: cabeçalho em uma linha, filtros táteis e grade dupla */
.filtro-select-wrap { display: none; }
.botao-flutuante-carrinho svg { width: 21px; height: 21px; fill: currentColor; }

@media (max-width: 800px) {
  .filtro-select-wrap { display: block; position: relative; min-width: 0; }
  #filtro-categoria-mobile { display: block; }
}

@media (max-width: 560px) {
  header.topo {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px 10px;
    min-height: 66px;
    padding: 9px 12px;
  }
  header.topo #logo-container { grid-row: 1; grid-column: 1; }
  header.topo img.logo { height: 40px; max-width: 42px; }
  header.topo .placeholder-logo { width: 40px; height: 40px; }
  header.topo h1 {
    grid-row: 1;
    grid-column: 2;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
  }
  header.topo nav.acoes {
    grid-row: 1;
    grid-column: 3;
    min-width: 0;
    margin: 0;
    gap: 5px;
    flex-wrap: nowrap;
  }
  header.topo nav.acoes a { padding: 6px 8px; font-size: 11px; }

  .filtros { display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; margin-bottom: 16px; }
  .filtros input#busca, .filtros .filtro-select-wrap select {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid var(--borda);
    border-radius: 12px;
    background: var(--cor-card);
    color: var(--cor-texto);
    box-shadow: 0 2px 8px rgba(20, 22, 28, .05);
    font-size: 15px;
    line-height: 1.3;
    -webkit-appearance: none;
    appearance: none;
  }
  .filtros input#busca::placeholder { color: var(--cor-texto-suave); opacity: .85; }
  .filtros .filtro-select-wrap select { padding-right: 44px; cursor: pointer; }
  .filtro-select-wrap > svg {
    position: absolute;
    top: 50%;
    right: 14px;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    pointer-events: none;
    fill: none;
    stroke: var(--cor-texto-suave);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .filtro-select-wrap:focus-within select { border-color: var(--cor-primaria); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor-primaria), transparent 82%); }

  .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .card { min-width: 0; border-radius: 11px; }
  .card .imagem { aspect-ratio: 1 / 1; }
  .card .conteudo { min-width: 0; padding: 9px; gap: 5px; }
  .card h3 { font-size: 13px; line-height: 1.25; overflow-wrap: anywhere; }
  .card .categoria { font-size: 9px; }
  .card .codigo { font-size: 10px; }
  .badge-estoque { font-size: 9px; padding: 3px 7px; }
  .card .descricao { font-size: 11px; line-height: 1.35; }
  .variacoes-tags { gap: 4px; }
  .variacoes-tags span { font-size: 9px; padding: 2px 6px; }
  .card .preco { font-size: 13px; line-height: 1.3; }
  .precos-promocao { gap: 4px 8px; }
  .preco-antigo { font-size: 11px; }
  .preco-atual { font-size: 14px; }
  .preco-normal small, .precos-promocao small { font-size: 9px; }
  .tag-promocao { font-size: 9px; padding: 3px 7px; }
  .condicao-promocao { font-size: 10px; }
  .card .acoes-card { gap: 5px; margin-top: 5px; }
  .card .acoes-card .btn-whats { min-height: 36px; padding: 6px; border-radius: 7px; font-size: 10px; gap: 4px; }
  .card .acoes-card .btn-escolher-opcoes { min-height: 36px; padding: 6px; border-radius: 7px; font-size: 10px; }
  .card .acoes-card .btn-whats svg { width: 16px; height: 16px; }
  .card .acoes-card .btn-carrinho { min-width: 36px; width: 36px; height: 36px; padding: 6px; border-radius: 7px; }
  .card .acoes-card .btn-carrinho svg { width: 17px; height: 17px; }

  .botao-flutuante-carrinho {
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    width: 54px;
    height: 54px;
    padding: 0;
    justify-content: center;
    gap: 0;
    border-radius: 50%;
    font-size: 0;
  }
  .botao-flutuante-carrinho svg { width: 22px; height: 22px; }
  .botao-flutuante-carrinho .texto-botao-carrinho { display: none; }
  .botao-flutuante-carrinho .contador { position: absolute; top: -4px; right: -4px; width: 21px; height: 21px; font-size: 11px; border: 2px solid var(--cor-card); }
  main { padding-bottom: 82px; }
}

@media (max-width: 380px) {
  .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card .acoes-card .btn-whats span { display: none; }
  .card .acoes-card .btn-whats { justify-content: center; }
}

@media (prefers-color-scheme: dark) and (max-width: 560px) {
  .filtros input#busca, .filtros .filtro-select-wrap select {
    background-color: #1c2028;
    border-color: #3a414d;
    color: #f2f3f5;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .16);
  }
  .filtros .filtro-select-wrap option { background: #1c2028; color: #f2f3f5; }
}