/* =====================================================
   RESET BÁSICO
===================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --linha: 2px solid #000;
  --linha-fina: 1px solid #000;
  --radius: 4px;
  --gap: 16px;
  --sidebar-largura: 240px;
  --header-altura: 70px;
  --navbar-altura: 50px;
  --altura-logo: 34px;
  --favorito-tamanho: 16px;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  color: var(--preenchimento-pagina-fundo-contraste, #000);
  background: var(--preenchimento-pagina-fundo, #fff);
  line-height: 1.4;
}

a {
  color: #000;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  background: transparent;
}

ul {
  list-style: none;
}

/* =====================================================
   ÍCONES DE SISTEMA (SVG inline, ver includes/icones.php e
   ICONES_DISPONIVEIS lá) — antes eram emoji, que não aceita CSS de cor
   nenhum. Cada ícone é 100% independente dos outros: tamanho, cor de
   borda (stroke) e cor de preenchimento (fill), configurados em
   admin-aparencia.php > seção "Ícones". Sem nenhuma personalização, o
   ícone sai sem preenchimento e com o traço na cor do texto ao redor
   (currentColor) — mesmo visual "de linha" pra todos por padrão.
===================================================== */
.icone-svg {
  display: inline-block;
  vertical-align: middle;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.icone-svg--busca         { width: var(--icone-busca-tamanho, 18px); height: var(--icone-busca-tamanho, 18px); stroke: var(--icone-busca-cor-borda, currentColor); fill: var(--icone-busca-cor-preenchimento, none); }
.icone-svg--conta         { width: var(--icone-conta-tamanho, 16px); height: var(--icone-conta-tamanho, 16px); stroke: var(--icone-conta-cor-borda, currentColor); fill: var(--icone-conta-cor-preenchimento, none); }
.icone-svg--carrinho      { width: var(--icone-carrinho-tamanho, 18px); height: var(--icone-carrinho-tamanho, 18px); stroke: var(--icone-carrinho-cor-borda, currentColor); fill: var(--icone-carrinho-cor-preenchimento, none); }
.icone-svg--fechar        { width: var(--icone-fechar-tamanho, 14px); height: var(--icone-fechar-tamanho, 14px); stroke: var(--icone-fechar-cor-borda, currentColor); fill: var(--icone-fechar-cor-preenchimento, none); }
.icone-svg--senha         { width: var(--icone-senha-tamanho, 18px); height: var(--icone-senha-tamanho, 18px); stroke: var(--icone-senha-cor-borda, currentColor); fill: var(--icone-senha-cor-preenchimento, none); }
.icone-svg--espiadinha    { width: var(--icone-espiadinha-tamanho, 18px); height: var(--icone-espiadinha-tamanho, 18px); stroke: var(--icone-espiadinha-cor-borda, currentColor); fill: var(--icone-espiadinha-cor-preenchimento, none); }
.icone-svg--filtro        { width: var(--icone-filtro-tamanho, 18px); height: var(--icone-filtro-tamanho, 18px); stroke: var(--icone-filtro-cor-borda, currentColor); fill: var(--icone-filtro-cor-preenchimento, none); }
.icone-svg--toast-sucesso { width: var(--icone-toast-sucesso-tamanho, 20px); height: var(--icone-toast-sucesso-tamanho, 20px); stroke: var(--icone-toast-sucesso-cor-borda, currentColor); fill: var(--icone-toast-sucesso-cor-preenchimento, none); }
.icone-svg--toast-erro    { width: var(--icone-toast-erro-tamanho, 20px); height: var(--icone-toast-erro-tamanho, 20px); stroke: var(--icone-toast-erro-cor-borda, currentColor); fill: var(--icone-toast-erro-cor-preenchimento, none); }
.icone-svg--toast-info    { width: var(--icone-toast-info-tamanho, 20px); height: var(--icone-toast-info-tamanho, 20px); stroke: var(--icone-toast-info-cor-borda, currentColor); fill: var(--icone-toast-info-cor-preenchimento, none); }
.icone-svg--selo-combo    { width: var(--icone-selo-combo-tamanho, 16px); height: var(--icone-selo-combo-tamanho, 16px); stroke: var(--icone-selo-combo-cor-borda, currentColor); fill: var(--icone-selo-combo-cor-preenchimento, none); }
.icone-svg--selo-entrega  { width: var(--icone-selo-entrega-tamanho, 16px); height: var(--icone-selo-entrega-tamanho, 16px); stroke: var(--icone-selo-entrega-cor-borda, currentColor); fill: var(--icone-selo-entrega-cor-preenchimento, none); }
.icone-svg--selo-seguro   { width: var(--icone-selo-seguro-tamanho, 16px); height: var(--icone-selo-seguro-tamanho, 16px); stroke: var(--icone-selo-seguro-cor-borda, currentColor); fill: var(--icone-selo-seguro-cor-preenchimento, none); }
.icone-svg--selo-garantia { width: var(--icone-selo-garantia-tamanho, 16px); height: var(--icone-selo-garantia-tamanho, 16px); stroke: var(--icone-selo-garantia-cor-borda, currentColor); fill: var(--icone-selo-garantia-cor-preenchimento, none); }
.icone-svg--microfone     { width: var(--icone-microfone-tamanho, 18px); height: var(--icone-microfone-tamanho, 18px); stroke: var(--icone-microfone-cor-borda, currentColor); fill: var(--icone-microfone-cor-preenchimento, none); }
.icone-svg--camera        { width: var(--icone-camera-tamanho, 18px); height: var(--icone-camera-tamanho, 18px); stroke: var(--icone-camera-cor-borda, currentColor); fill: var(--icone-camera-cor-preenchimento, none); }
.icone-svg--engrenagem    { width: var(--icone-engrenagem-tamanho, 16px); height: var(--icone-engrenagem-tamanho, 16px); stroke: var(--icone-engrenagem-cor-borda, currentColor); fill: var(--icone-engrenagem-cor-preenchimento, none); }
.icone-svg--estrela       { width: var(--icone-estrela-tamanho, 16px); height: var(--icone-estrela-tamanho, 16px); stroke: var(--icone-estrela-cor-borda, currentColor); fill: var(--icone-estrela-cor-preenchimento, #f5b301); }
.icone-svg--menu          { width: var(--icone-menu-tamanho, 22px); height: var(--icone-menu-tamanho, 22px); stroke: var(--icone-menu-cor-borda, currentColor); fill: var(--icone-menu-cor-preenchimento, none); }
.icone-svg--caixa         { width: var(--icone-caixa-tamanho, 16px); height: var(--icone-caixa-tamanho, 16px); stroke: var(--icone-caixa-cor-borda, currentColor); fill: var(--icone-caixa-cor-preenchimento, none); }
.icone-svg--impressora    { width: var(--icone-impressora-tamanho, 16px); height: var(--icone-impressora-tamanho, 16px); stroke: var(--icone-impressora-cor-borda, currentColor); fill: var(--icone-impressora-cor-preenchimento, none); }
.icone-svg--ferramenta    { width: var(--icone-ferramenta-tamanho, 18px); height: var(--icone-ferramenta-tamanho, 18px); stroke: var(--icone-ferramenta-cor-borda, currentColor); fill: var(--icone-ferramenta-cor-preenchimento, none); }
.icone-svg--aviso         { width: var(--icone-aviso-tamanho, 18px); height: var(--icone-aviso-tamanho, 18px); stroke: var(--icone-aviso-cor-borda, currentColor); fill: var(--icone-aviso-cor-preenchimento, none); }
.icone-svg--ajuda         { width: var(--icone-ajuda-tamanho, 15px); height: var(--icone-ajuda-tamanho, 15px); stroke: var(--icone-ajuda-cor-borda, currentColor); fill: var(--icone-ajuda-cor-preenchimento, none); }
.icone-svg--alto-falante      { width: var(--icone-alto-falante-tamanho, 22px); height: var(--icone-alto-falante-tamanho, 22px); stroke: var(--icone-alto-falante-cor-borda, currentColor); fill: var(--icone-alto-falante-cor-preenchimento, none); }
.icone-svg--alto-falante-mudo { width: var(--icone-alto-falante-mudo-tamanho, 22px); height: var(--icone-alto-falante-mudo-tamanho, 22px); stroke: var(--icone-alto-falante-mudo-cor-borda, currentColor); fill: var(--icone-alto-falante-mudo-cor-preenchimento, none); }

.wrapper {
  /* Largura e fundo personalizáveis em Aparência (--wrapper-*); sem personalizar = 1400px e sem fundo, como sempre foi */
  max-width: var(--wrapper-largura, 1400px);
  background-color: var(--wrapper-fundo, transparent);
  background-image: var(--wrapper-imagem, none);
  background-repeat: var(--wrapper-imagem-repeat, no-repeat);
  background-size: var(--wrapper-imagem-tamanho, auto);
  margin: 0 auto;
  border: var(--borda-pagina-moldura, var(--linha));
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* =====================================================
   FAIXA DE PÁGINAS (TOPO) — só aparece com pelo menos 1
   página marcada "Mostrar no topo" em admin-paginas.php
===================================================== */
.faixa-paginas-topo {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: var(--bloco-faixa-paginas-topo-padding, 6px var(--gap));
  background: var(--bloco-faixa-paginas-topo-fundo, #000);
  font-size: 12px;
}
.faixa-paginas-topo a {
  color: var(--bloco-faixa-paginas-topo-texto, #fff);
  opacity: .85;
  text-decoration: none;
}
.faixa-paginas-topo a:hover {
  opacity: 1;
  text-decoration: underline;
}

/* =====================================================
   TOPO (HEADER)
===================================================== */
.topo {
  display: flex;
  align-items: var(--topo-alinhamento, center);
  padding: 12px var(--gap);
  border-bottom: var(--borda-topo, var(--linha));
  min-height: var(--header-altura);
  background-color: var(--cor-topo, #fff);
  background-image: var(--topo-imagem-fundo, none);
  background-repeat: var(--topo-imagem-repeat, no-repeat);
  background-size: var(--topo-imagem-tamanho, cover);
  background-position: center;
  color: var(--cor-topo-contraste, inherit);
}

/* Conteúdo real (logo/busca/ações/hambúrguer) — separado do .topo em si
   de propósito: assim ele não estica pra ocupar toda a altura do header
   quando --header-altura é personalizado maior que o necessário, sobrando
   espaço pra uma imagem de fundo aparecer por cima/baixo do conteúdo
   (--topo-alinhamento, no .topo, decide onde esse bloco fica: em cima, no
   meio ou embaixo dessa sobra). O alinhamento ENTRE logo/busca/ações
   continua sempre centralizado, fixo — não é a mesma coisa que o
   alinhamento vertical do header. */
.topo__conteudo {
  display: flex;
  align-items: center;
  gap: var(--gap);
  flex-wrap: nowrap;
  width: 100%;
}
/* Mesmo cuidado já corrigido no rodapé: o reset global "a { color: #000; }"
   (topo do arquivo) vence a cor herdada do .topo — sem isso, os links
   (conta/sair) ficariam sempre pretos mesmo com um fundo escuro
   personalizado. */
.topo a { color: inherit; }

.topo__logo {
  border: var(--borda-logo, var(--linha));
  padding: 8px 14px;
  font-weight: bold;
  white-space: nowrap;
}

.topo__busca-wrap {
  flex: 1;
  position: relative;
  max-width: var(--busca-largura-max, none);
}

.topo__busca {
  display: flex;
  border: var(--borda-topo-busca, var(--linha));
  border-radius: var(--radius);
  overflow: hidden;
  min-height: var(--busca-altura, 0); /* 0 = altura natural (padding + texto), sem personalização */
}

.topo__busca-input {
  flex: 1;
  border: none;
  padding: 8px 10px;
  outline: none;
  min-width: 0;
}

.topo__busca-btn {
  border: none;
  border-left: var(--borda-busca-btn, var(--linha-fina));
  padding: 0 14px;
  background: var(--cor-busca-btn, transparent);
  color: var(--cor-busca-btn-contraste, inherit);
  transition: background 0.15s, color 0.15s;
}

.topo__busca-btn:hover {
  background: var(--cor-busca-btn-hover, var(--cor-busca-btn, transparent));
  color: var(--cor-busca-btn-hover-contraste, var(--cor-busca-btn-contraste, inherit));
}

/* Painel de sugestões AJAX (ver busca-sugestoes.php + script.js) — mesmo
   padrão visual dos outros dropdowns do projeto (.navbar__grupo-lista,
   .admin-nav-grupo__lista): position:absolute ancorado no wrap, z-index:50. */
.topo__busca-sugestoes {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;
  margin-top: 4px;
  max-height: 360px;
  overflow-y: auto;
  background: var(--preenchimento-busca-sugestoes-painel, #fff);
  border: var(--linha);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.topo__busca-sugestoes[hidden] { display: none !important; }

.topo__busca-sugestao {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  color: inherit;
  text-decoration: none;
}
.topo__busca-sugestao:hover { background: var(--preenchimento-busca-sugestao-hover, #f5f5f5); }

.topo__busca-sugestao__img {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: var(--radius);
  background: var(--preenchimento-busca-sugestao-thumb, #f0f0f0);
  object-fit: cover;
}

.topo__busca-sugestao__nome {
  overflow: hidden;
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Promoção por quantidade na loja (promocao-quantidade.js, script.js): linha "Promoção: ..." quando o preço do item veio dela,
   dica "Adicione mais N e ..." no carrinho, e o texto opcional no card e na página do produto (Vitrine). */
.pq-aplicada {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: #0a8a3e;
}
.pq-dica-slot { display: none; }
.pq-dica-slot--visivel {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: #0a8a3e;
}
.produto-card__promo-qtd,
.produto-detalhe__promo-qtd {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #0a8a3e;
}

/* Promoção por quantidade — telas do painel (admin-promocao-quantidade*.php). */
.pq-largura-total { grid-column: 1 / -1; }
.pq-subtitulo { font-weight: 700; margin-top: 14px; }
.pq-salvar { width: auto; padding: 12px 28px; }
.pq-acoes { white-space: nowrap; }
.pq-situacao--ativa { color: #1a7f37; font-weight: 600; }
.pq-situacao--cancelada { color: #b42318; }
.pq-situacao--outra { opacity: 0.6; }
.pq-sku { opacity: 0.5; font-size: 11px; font-family: monospace; }
.pq-aviso { color: #b42318; }
.pq-campo { width: 100%; min-width: 90px; }
.pq-campo--curto { max-width: 110px; }

/* Integração com ERP — botões "Sincronizar agora" / "Processar fila agora" e o resultado (admin-integracao-erp.php). */
.erp-sync-agora {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 12px;
}
.erp-sync-agora .erp-sync-agora__botao { width: auto; padding: 10px 22px; }
.erp-sync-agora .erp-sync-agora__botao:disabled { opacity: 0.5; cursor: not-allowed; }
.erp-sync-resultado {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 10px 0 14px;
  padding: 10px 14px;
  border: var(--linha);
  border-radius: var(--radius);
  font-size: 13px;
}
.erp-sync-resultado--atencao { border-color: #b42318; color: #b42318; }
/* Quadro "Sincronizações manuais" (fila de sincronização com o ERP): uma caixa por ordem, no mesmo estilo do resultado de antes */
.erp-sync-ordens { margin-top: 12px; }
.erp-sync-ordens__lista { display: flex; flex-direction: column; gap: 8px; }
.erp-sync-ordem { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border: var(--linha-fina); border-radius: var(--radius); font-size: 14px; }
.erp-sync-ordem__meta { font-size: 12px; opacity: 0.7; }
.erp-sync-ordem--pendente, .erp-sync-ordem--executando { border-style: dashed; }
.erp-sync-ordem--erro { border-color: #b42318; color: #b42318; }
.erp-historico { margin-top: 18px; border-top: 1px solid #d8d8d8; padding-top: 16px; }
.erp-historico__erro { color: #b42318; font-weight: 700; }

/* Preço opcional abaixo do nome (Vitrine > Listagem > "Sugestões da busca"). */
.topo__busca-sugestao__texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}
.topo__busca-sugestao__preco {
  font-size: 12px;
  font-weight: 700;
}
.topo__busca-sugestao__preco-antigo {
  font-weight: 400;
  opacity: 0.6;
}
.topo__busca-sugestao--esgotado { opacity: 0.55; }

.topo__busca-sugestao__vazio {
  padding: 10px 12px;
  font-size: 13px;
  opacity: 0.6;
}

.topo__acoes {
  display: flex;
  gap: 10px;
  white-space: nowrap;
  /* Garante o canto direito mesmo quando a busca tem largura máxima
     personalizada (--busca-largura-max) — sem isso, o espaço que sobra
     ficaria solto DEPOIS dos ícones em vez de ANTES, empurrando-os pra
     esquerda. Sem efeito no layout padrão (busca com flex:1 já consome
     todo o espaço sobrando). */
  margin-left: auto;
}

.topo__acao {
  border: var(--linha);
  padding: 8px 12px;
  border-radius: var(--radius);
}

/* Botão hambúrguer — escondido no desktop */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  /* Personalizável em admin-menu.php (Botão do menu — celular); sem
     personalização valem os fallbacks = visual original. */
  border: var(--borda-hamburguer, var(--linha));
  width: var(--hamburguer-largura, 42px);
  height: var(--hamburguer-altura, 42px);
  border-radius: var(--hamburguer-raio, var(--radius));
  background: var(--hamburguer-fundo, transparent);
  flex-shrink: 0;
}

.hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--hamburguer-linhas, var(--preenchimento-topo-hamburguer, #000));
  margin: 0 auto;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Hambúrguer animado para "X" quando o menu está aberto */
.hamburger.is-active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hamburger.is-active span:nth-child(2) {
  opacity: 0;
}
.hamburger.is-active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* =====================================================
   NAVBAR
===================================================== */
.navbar {
  background: var(--cor-menu, transparent);
  border-bottom: var(--borda-menu, var(--linha));
  min-height: var(--navbar-altura);
  color: var(--cor-menu-texto, inherit);
}
/* Mesmo cuidado já corrigido no topo/rodapé: o reset global "a { color:
   #000; }" vence a cor herdada do .navbar sem isso. */
.navbar a { color: inherit; }

/* Espaço abaixo do menu, até o banner (Menu de navegação > Espaçamento); sem personalizar = 0, como sempre foi. Só computador
   e tablet: no smartphone a barra fica recolhida atrás do botão e a margem criaria uma faixa vazia. */
@media (min-width: 721px) {
  .navbar { margin-bottom: var(--menu-espaco-abaixo, 0); }
}

.navbar__lista {
  display: flex;
  gap: var(--menu-espaco-itens, 4px);
  padding: 0 var(--gap);
}

.navbar__item {
  border-left: var(--borda-menu, var(--linha-fina));
  border-right: var(--borda-menu, var(--linha-fina));
}

.navbar__item a {
  display: block;
  padding: 16px var(--menu-espaco-interno, 16px);
  font-weight: 600;
  font-size: 14px;
  transition: background 0.15s, color 0.15s;
}

.navbar__item a:hover {
  background: var(--cor-menu-hover, transparent);
  color: var(--cor-menu-hover-contraste, inherit);
}

/* Grupo de departamento no menu (Departamento > Categoria) — mesma lógica
   de abrir/fechar do menu agrupado do admin (includes/admin-header.php:
   delegação em document, toggle de [hidden], fecha ao abrir outro/clicar
   fora — ver script.js), com visual próprio da loja. */
.navbar__grupo {
  position: relative;
  border-left: var(--borda-menu, var(--linha-fina));
  border-right: var(--borda-menu, var(--linha-fina));
}

.navbar__grupo-label {
  display: block;
  width: 100%;
  padding: 16px var(--menu-espaco-interno, 16px);
  font-weight: 600;
  font-size: 14px;
  font-family: inherit;
  background: none;
  color: inherit;
  border: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.navbar__grupo.is-aberto .navbar__grupo-label {
  background: var(--cor-menu-hover, transparent);
  color: var(--cor-menu-hover-contraste, inherit);
}
@media (hover: hover) and (pointer: fine) {
  .navbar__grupo:hover .navbar__grupo-label {
    background: var(--cor-menu-hover, transparent);
    color: var(--cor-menu-hover-contraste, inherit);
  }
}

.navbar__grupo-label::after {
  content: ' ▾';
  font-size: 16px;
  display: inline-block;
  transition: transform 0.18s ease;
}

/* Cascata: abre com fade + deslize (não é display:none/block, que não
   anima) — controlado por 2 gatilhos independentes, sem conflito entre
   eles porque os dois só ADICIONAM a condição "visível":
   1) .navbar__grupo.is-aberto — clique/toque (ver script.js), funciona
      em qualquer dispositivo.
   2) :hover/:focus-within — só em telas com mouse de verdade (ver media
      query abaixo), sem precisar clicar. */
.navbar__grupo-lista {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: var(--cor-menu-submenu, #fff);
  border: var(--borda-menu-submenu, var(--linha));
  padding: 6px 0;
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  border-radius: 0 0 8px 8px;

  max-height: calc(100vh - 260px);
  overflow-y: auto;

  
}

.navbar__grupo.is-aberto .navbar__grupo-lista {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.navbar__grupo.is-aberto .navbar__grupo-label::after {
  transform: rotate(180deg);
}

@media (hover: hover) and (pointer: fine) {
  .navbar__grupo:hover .navbar__grupo-lista,
  .navbar__grupo:focus-within .navbar__grupo-lista {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }
  .navbar__grupo:hover .navbar__grupo-label::after,
  .navbar__grupo:focus-within .navbar__grupo-label::after {
    transform: rotate(180deg);
  }
}

.navbar__grupo-lista li a {
  display: block;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 400;
  white-space: nowrap;
}

.navbar__grupo-lista li a:hover {
  background: var(--cor-menu-submenu-hover, #f5f5f5);
  color: var(--cor-menu-submenu-hover-contraste, inherit);
}

/* =====================================================
   CONTEÚDO: sidebar + main
===================================================== */
.conteudo {
  display: flex;
  flex: 1;
  position: relative;
}

/* ---------- SIDEBAR (padrão fixa no desktop) ---------- */
.sidebar {
  width: var(--sidebar-largura);
  flex-shrink: 0;
  border-right: var(--borda-sidebar, var(--linha));
  padding: var(--gap);
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  background: var(--cor-sidebar, #fff);
  color: var(--cor-sidebar-contraste, inherit);
}

.sidebar__cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sidebar__fechar {
  display: none; /* só aparece no mobile */
  border: var(--linha);
  width: 30px;
  height: 30px;
  border-radius: var(--radius);
}

.filtro {
  border: var(--linha-fina);
  padding: 10px;
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.filtro__titulo {
  font-size: 14px;
  margin-bottom: 4px;
  border-bottom: var(--linha-fina);
  padding-bottom: 6px;
}

.filtro__opcao {
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.filtro__limpar {
  border: var(--linha);
  padding: 10px;
  border-radius: var(--radius);
  font-weight: 600;
}

/* =====================================================
   SLIDER DUPLO (range duplo — preço e rating)
===================================================== */

/* Exibição dos valores selecionados acima da trilha */
.range-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 10px;
  gap: 4px;
}

.range-display__sep {
  opacity: 0.4;
  font-weight: 400;
}

.range-display__valor--estrelas {
  letter-spacing: 1px;
  font-size: 14px;
}

/* Container do slider duplo — posicionamento relativo para os dois inputs sobrepostos */
.range-duplo {
  position: relative;
  height: 36px;   /* altura suficiente para os dois thumbs sobrepostos */
  margin: 0 2px;
}

/* Trilha visual customizada */
.range-duplo__trilha {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 3px;
  transform: translateY(-50%);
  background: #ddd;          /* fundo cinza claro como trilha base */
  border: none;
  pointer-events: none;
  z-index: 1;
}

/* Faixa preenchida entre os dois thumbs */
.range-duplo__faixa {
  position: absolute;
  top: 0;
  height: 100%;
  background: var(--cor-primaria, #000); /* faixa ativa, dentro da trilha */
  pointer-events: none;
  z-index: 2;                /* sobre a trilha, abaixo dos inputs */
}

/* Os dois inputs sobrepostos — sem aparência nativa */
.range-duplo__input {
  position: absolute;
  top: 10px;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  pointer-events: none;   /* desabilitado por padrão; o JS ativa só o relevante */
  height: 36px;
  margin: 0;
  padding: 0;
  z-index: 2;
}

/* Ativa eventos de mouse/touch nos dois inputs */
.range-duplo__input--min { z-index: 3; }
.range-duplo__input--max { z-index: 4; }

/* Thumb — estilo wireframe: círculo com contorno preto, fundo branco */
.range-duplo__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: var(--linha);
  background: #fff;
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.range-duplo__input::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: var(--linha);
  background: #fff;
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Thumb ativo — leve aumento de escala e sombra discreta */
.range-duplo__input:focus::-webkit-slider-thumb,
.range-duplo__input:active::-webkit-slider-thumb {
  transform: scale(1.2);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
  outline: none;
}

.range-duplo__input:focus::-moz-range-thumb,
.range-duplo__input:active::-moz-range-thumb {
  transform: scale(1.2);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}

/* Remove a trilha nativa para usar só a nossa customizada */
.range-duplo__input::-webkit-slider-runnable-track {
  background: transparent;
  border: none;
  height: 3px;
}

.range-duplo__input::-moz-range-track {
  background: transparent;
  border: none;
  height: 3px;
}

/* Remove outline padrão do focus nos inputs */
.range-duplo__input:focus {
  outline: none;
}

/* =====================================================
   CESTA DE ASSINATURA — seleção de itens por bloco (botões clicáveis
   com selo de estoque na diagonal superior direita, inspirado no mockup
   original de assinatura/itens-cesta-media.html, com a paleta/tokens do
   storenovo). Usado tanto em assinatura-selecionar.php (cliente) quanto
   em admin-assinatura-ciclo.php (sugestão do admin) — ver
   includes/cesta-selecao.php.
===================================================== */
.cesta-bloco__titulo {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cesta-bloco__contador {
  font-weight: 400;
  opacity: .7;
}

.cesta-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
}

.cesta-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  padding: 8px 18px 8px 14px;
  margin: 0 10px 8px 0;
  border: var(--linha);
  border-radius: 20px;
  font-size: 13px;
  background: var(--preenchimento-cesta-item, #fff);
  transition: background .15s, color .15s;
  user-select: none;
}

/* Miniatura opcional (só quando o produto tem foto cadastrada) — tamanho
   controlado por classe de propósito, pra ajustar fácil sem mexer no PHP
   que gera o chip. */
.cesta-item__foto {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  margin-right: 8px;
}

.cesta-item:hover { background: var(--preenchimento-cesta-item-hover, #f2f2f2); }

.cesta-item.is-selecionado {
  background: var(--preenchimento-cesta-item-selecionado, #000);
  color: var(--preenchimento-cesta-item-selecionado-contraste, #fff);
}

.cesta-item.is-indisponivel {
  opacity: .35;
  text-decoration: line-through;
  cursor: not-allowed;
}

/* Aviso de estoque baixo — só nas telas do admin (ver $avisoAdmin em
   includes/cesta-selecao.php), já na lista de disponíveis, antes mesmo de
   selecionar o item. */
.cesta-item.is-aviso-baixo {
  border: 1px dashed #dc3545;
  background: var(--preenchimento-cesta-item-aviso-baixo, #fff8f8);
}

.cesta-item.is-aviso-baixo.is-selecionado {
  background: var(--preenchimento-cesta-item-selecionado, #000);
  border-style: solid;
  border-color: var(--preenchimento-cesta-item-selecionado, #000);
}

.cesta-item__aviso {
  margin-right: 4px;
}

/* =====================================================
   MODAL DO ADMIN — tela sobreposta genérica (hoje só usada pra escolher
   produtos de um bloco de assinatura, ver admin-bloco-produtos.js).
   Mesma ideia visual dos overlays/modais da loja (.login-modal,
   .carrinho-drawer), simplificada: mostra/esconde via atributo [hidden],
   sem animação — é uma ferramenta de admin, não uma vitrine.
===================================================== */
.admin-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 500;
}
.admin-modal-overlay[hidden] { display: none; }

.admin-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(640px, 92vw);
  max-height: 85vh;
  background: #fff;
  border: var(--linha);
  border-radius: 12px;
  z-index: 501;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.admin-modal[hidden] { display: none; }

/* Alça de redimensionar — injetada automaticamente em TODO .admin-modal
   pelo script em includes/admin-header.php (garantirAlcaRedimensionar()),
   sem precisar de HTML próprio em cada página. */
.admin-modal__resize {
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 14px;
  height: 14px;
  cursor: nwse-resize;
  background-image: repeating-linear-gradient(135deg, #000 0px, #000 1.5px, transparent 1.5px, transparent 5px);
  opacity: 0.35;
}
.admin-modal__resize:hover { opacity: 0.7; }

.admin-modal__cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: var(--modal-admin-cabecalho-fundo, transparent);
  color: var(--modal-admin-cabecalho-texto, inherit);
  border-bottom: var(--modal-admin-cabecalho-borda, var(--linha));
  flex-shrink: 0;
}
.admin-modal__cabecalho h3 { font-size: 15px; }

.admin-modal__fechar {
  width: 28px;
  height: 28px;
  border: var(--linha);
  border-radius: 50%;
  background: #fff;
  flex-shrink: 0;
}

.admin-modal__filtros {
  display: flex;
  gap: 8px;
  padding: 12px 20px 0;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.admin-modal__filtros input,
.admin-modal__filtros select {
  border: var(--linha-fina);
  border-radius: var(--radius);
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13px;
}
.admin-modal__filtros input { flex: 1; min-width: 160px; }

.admin-modal__corpo {
  padding: 10px 20px;
  overflow-y: auto;
  flex: 1;
  background: var(--modal-admin-corpo-fundo, transparent);
  color: var(--modal-admin-corpo-texto, inherit);
  border: var(--modal-admin-corpo-borda, none);
}

.admin-modal__rodape {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: var(--linha);
  flex-shrink: 0;
}

/* =====================================================
   SCANNER DE CÓDIGO (câmera) — modal genérico injetado via
   JS (scanner-codigo.js), usado tanto no admin quanto na loja pública
   (por isso não reaproveita .admin-modal — teria que entrar nas duas
   folhas de CSS/JS, e o resize automático do admin não faz sentido pra
   um visor de câmera). z-index acima de qualquer modal/drawer existente,
   abaixo só do toast (999), que deve continuar visível por cima pra
   avisar de erro de câmera.
===================================================== */
.scanner-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 600;
}
.scanner-modal-overlay[hidden] { display: none; }

.scanner-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(480px, 92vw);
  background: #fff;
  border-radius: 12px;
  z-index: 601;
  overflow: hidden;
}
.scanner-modal[hidden] { display: none; }

.scanner-modal__cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  background: var(--modal-scanner-cabecalho-fundo, transparent);
  color: var(--modal-scanner-cabecalho-texto, inherit);
  border-bottom: var(--modal-scanner-cabecalho-borda, var(--linha));
}
.scanner-modal__cabecalho h2 { font-size: 15px; }

.scanner-modal__fechar {
  width: 28px;
  height: 28px;
  border: var(--linha);
  border-radius: 50%;
  background: #fff;
  flex-shrink: 0;
  font-size: 16px;
  line-height: 1;
}

.scanner-modal__corpo {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: var(--modal-scanner-corpo-fundo, transparent);
  color: var(--modal-scanner-corpo-texto, inherit);
  border: var(--modal-scanner-corpo-borda, none);
}

.scanner-modal__video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
}

.scanner-modal__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Retículo de mira — só decorativo, a leitura funciona no quadro inteiro */
.scanner-modal__mira {
  position: absolute;
  inset: 18% 12%;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 8px;
  pointer-events: none;
}

.scanner-modal__dica {
  font-size: 13px;
  opacity: 0.6;
  text-align: center;
  margin: 0;
}

/* Botão de câmera genérico, colado em qualquer campo de busca já existente
   (ver scanner-codigo.js, listener delegado por .admin-scanner-btn). O
   wrapper só precisa virar flex — nenhuma outra mudança no campo. */
.admin-busca-scanner {
  display: flex;
  gap: 6px;
  align-items: center;
}
.admin-busca-scanner input {
  flex: 1;
  border: var(--borda-campo-formulario, var(--linha));
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
}

.admin-scanner-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border: var(--linha-fina);
  border-radius: var(--radius);
  background: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

/* =====================================================
   PÁGINAS DO ENTREGADOR — layout próprio, mobile-first (uso no celular em
   campo, ver entregador-login.php/entregador-rota.php/entregador-pedido.php
   etc.) — deliberadamente NÃO reaproveita o header/footer da loja
   (carrinho/login de cliente não fazem sentido aqui) nem o chrome do admin
   (menu lateral não cabe numa tela pequena de uso rápido no campo).
===================================================== */
.entregador-pagina {
  max-width: 480px;
  margin: 0 auto;
  padding: 16px;
  font-family: inherit;
}
.entregador-pagina--navegacao {
  width: 100%;
  max-width: 1280px;
  padding: 14px 22px;
}
.entregador-navegacao { width: 100%; }
.navegacao-topo {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}
.navegacao-topo p { margin: 0; }
.navegacao-topo h1 { margin: 0; font-size: 21px; }
.navegacao-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(290px, 360px);
  gap: 18px;
  align-items: start;
}
.navegacao-principal,
.navegacao-paradas { min-width: 0; }
.mapa-navegacao {
  width: 100%;
  height: min(58vh, 620px);
  min-height: 360px;
  margin: 10px 0;
  border: var(--linha-fina);
  border-radius: var(--radius);
  overflow: hidden;
}
.navegacao-paradas {
  position: sticky;
  top: 12px;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  padding-right: 4px;
}
.navegacao-paradas__titulo { margin: 0 0 10px; font-size: 16px; }
.navegacao-paradas .entregador-card { background: #fff; }
/* Marcadores numerados das paradas no mapa de navegação. */
.marcador-parada {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.marcador-parada--pendente { background: #5f6b7a; }
.marcador-parada--proxima { background: #d9480f; width: 34px; height: 34px; font-size: 15px; }
.marcador-parada--entregue { background: #2f9e44; }
.marcador-parada--cancelada { background: #aab2bd; }
.mapboxgl-ctrl-group button.mapa-seguir-botao {
  width: auto;
  height: auto;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 700;
}
@media (max-width: 760px) {
  .entregador-pagina--navegacao { padding: 10px; }
  .navegacao-topo { align-items: flex-start; flex-direction: column; gap: 6px; }
  .navegacao-layout { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .mapa-navegacao { height: 46vh; min-height: 280px; max-height: 480px; }
  .navegacao-paradas { position: static; max-height: none; overflow: visible; padding-right: 0; }
}
.entregador-pagina--login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.entregador-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: var(--linha);
  margin-bottom: 16px;
}
.entregador-header a { font-size: 13px; opacity: .7; text-decoration: none; }

.entregador-card {
  position: relative;
  border: var(--linha-fina);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
}
.navegacao-guia {
  display: grid;
  gap: 12px;
  padding: 14px;
  margin: 10px 0;
  border: var(--linha-fina);
  border-radius: var(--radius);
  background: #fff;
}
.navegacao-guia__rotulo {
  margin: 0 0 5px;
  font-size: 12px;
  font-weight: 700;
  color: #555;
}
.navegacao-guia__texto h2 {
  margin: 0;
  padding: 0;
  font-size: 18px;
  line-height: 1.25;
}
.navegacao-guia__texto p:not(.navegacao-guia__rotulo) {
  margin: 6px 0 0;
  font-size: 13px;
}
.navegacao-guia__erro { color: #b42318; }
.navegacao-guia__acoes {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
}
/* Botão redondo de voz da navegação: o ícone mostra o estado (desligado = alto-falante com ×; ligado = com ondas, botão preenchido). */
.navegacao-voz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  padding: 0;
  border: var(--linha);
  border-radius: 50%;
  background: #fff;
  color: #000;
  cursor: pointer;
}
.navegacao-voz-btn[aria-pressed="true"] { background: #000; color: #fff; border-color: #000; }
.navegacao-voz-btn[aria-pressed="false"] .navegacao-voz-btn__ligada,
.navegacao-voz-btn[aria-pressed="true"] .navegacao-voz-btn__desligada { display: none; }
/* Mini-carrossel dos itens na prévia da separação (admin-separacao-preview.php, opção em Configurações da separação) */
.sep-mini { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
/* width:0 + flex:1 1 0: a faixa NÃO informa ao layout da página o comprimento de todas as miniaturas (sem isso a coluna do admin crescia além da tela); ela ocupa o espaço disponível e rola por dentro */
.sep-mini__faixa { display: flex; gap: 10px; flex: 1 1 0; width: 0; min-width: 0; margin: 0; padding: 4px 2px 6px; list-style: none; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.sep-mini__item { flex: 0 0 76px; width: 76px; scroll-snap-align: start; text-align: center; cursor: default; }
.sep-mini__foto { position: relative; display: block; width: 76px; height: 76px; border: var(--linha-fina); border-radius: var(--radius); background: #f0f0f0; overflow: hidden; }
.sep-mini__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sep-mini__foto--vazia { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 10px; font-weight: 700; opacity: .4; }
.sep-mini__qtd { position: absolute; right: 3px; bottom: 3px; max-width: calc(100% - 6px); padding: 1px 6px; border-radius: 999px; background: rgba(0, 0, 0, .78); color: #fff; font-size: 10px; font-weight: 700; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sep-mini__nome { display: block; margin-top: 4px; font-size: 11px; font-weight: 600; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sep-mini__seta { flex: 0 0 auto; width: 32px; height: 32px; border: var(--linha-fina); border-radius: 50%; background: #fff; font-size: 18px; line-height: 1; cursor: pointer; }
.sep-mini__seta:hover:not(:disabled) { background: #000; color: #fff; }
.sep-mini__seta:disabled { opacity: .3; cursor: not-allowed; }
.sep-mini__seta[hidden] { display: none; }

/* Linha do tempo (andamento) do pedido — db/pedido-historico.php: cliente (Minha conta e página do pedido) e admin */
.pedido-tempo { list-style: none; margin: 0; padding: 0; }
.pedido-tempo__item { position: relative; padding: 0 0 18px 34px; }
.pedido-tempo__item:last-child { padding-bottom: 0; }
.pedido-tempo__item::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: #2f8f1f; color: #fff; font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; }
.pedido-tempo__item::after { content: ""; position: absolute; left: 9px; top: 23px; bottom: 3px; width: 2px; background: #2f8f1f; }
.pedido-tempo__item:last-child::after { display: none; }
.pedido-tempo__item.is-atual::before { content: ""; box-shadow: 0 0 0 4px rgba(47, 143, 31, .2); }
.pedido-tempo__item.is-ruim::before { background: #c53030; }
.pedido-tempo__item.is-ruim.is-atual::before { box-shadow: 0 0 0 4px rgba(197, 48, 48, .2); }
.pedido-tempo__item.is-ruim::after { background: #c53030; }
.pedido-tempo__titulo { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; }
.pedido-tempo__item.is-atual .pedido-tempo__titulo { color: #2f8f1f; }
.pedido-tempo__item.is-ruim.is-atual .pedido-tempo__titulo { color: #c53030; }
.pedido-tempo__quando { display: block; margin-top: 2px; font-size: 12px; opacity: .65; }
/* "Ver andamento" dentro do cartão do pedido (Minha conta): ocupa a linha inteira do cartão */
.pedido-tempo-det { flex: 0 0 100%; width: 100%; border-top: var(--linha-fina); padding-top: 8px; }
.pedido-tempo-det > summary { cursor: pointer; font-size: 13px; font-weight: 600; }
.pedido-tempo-det .pedido-tempo { margin: 12px 0 4px; }

/* Busca na Central de configurações: o atributo hidden precisa vencer o display das regras dos cartões/grupos */
.admin-config-card[hidden], .cfg-busca-grupo[hidden] { display: none !important; }

/* Blocos recolhíveis das telas de configuração do admin (admin-entrega-config.php) */
.cfg-bloco-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 6px; }
.cfg-bloco { border: var(--linha-fina); border-radius: var(--radius); margin-top: 12px; background: #fff; }
.cfg-bloco > summary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 13px 16px; cursor: pointer; font-size: 16px; font-weight: 700; list-style: none; }
.cfg-bloco > summary::-webkit-details-marker { display: none; }
.cfg-bloco > summary::before { content: "▸"; display: inline-block; width: 14px; transition: transform .15s; }
.cfg-bloco[open] > summary::before { transform: rotate(90deg); }
.cfg-bloco[open] > summary { border-bottom: var(--linha-fina); }
.cfg-bloco__corpo { padding: 14px 16px 18px; }
.cfg-bloco__selo { margin-left: auto; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: #ececec; color: #333; white-space: nowrap; }
.cfg-bloco__selo--on { background: #d3f9d8; color: #1b5e2b; }
.navegacao-voz-btn:focus-visible { outline: 3px solid rgba(13, 110, 253, .55); outline-offset: 2px; }
.navegacao-guia__botao {
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 10px 8px;
  font-size: 13px;
}
.entregador-card h2 { font-size: 16px; margin: 0 0 6px; padding-right: 30px; }
.entregador-card p { font-size: 13px; margin: 3px 0; }

/* Botão circular "remover" no canto superior direito do card — padrão
   tradicional de fechar/remover, só pra retirar o pedido da rota (não é
   um botão grande de ação principal, por isso fora do .entregador-btn). */
.entregador-card__remover {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: #000;
  color: #fff;
  font-size: 15px;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.entregador-card__remover:disabled { opacity: .4; cursor: not-allowed; }

.entregador-card--entregue { opacity: .6; }

/* Botões grandes de propósito — uso no celular, no campo, sem precisar de precisão de clique. */
.entregador-btn {
  display: block;
  width: 100%;
  padding: 14px;
  margin-top: 10px;
  border: none;
  border-radius: var(--radius);
  background: #000;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.entregador-btn:disabled { opacity: .4; cursor: not-allowed; }
.entregador-btn--secundario { background: #fff; color: #000; border: var(--linha); }

.entregador-erro {
  color: #b00020;
  font-size: 13px;
  margin: 8px 0;
}

.cesta-item.is-travado:not(.is-selecionado) {
  opacity: .4;
  cursor: not-allowed;
}

/* Selo de estoque — canto superior direito, na diagonal (mesma ideia do mockup) */
.cesta-item__estoque {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  line-height: 24px;
  border: 2px solid #fff;
  padding: 2px;
}

.cesta-item__estoque--alto { background: var(--preenchimento-cesta-estoque-alto, #28a745); }
.cesta-item__estoque--medio { background: var(--preenchimento-cesta-estoque-medio, #d4a017); }
.cesta-item__estoque--baixo { background: var(--preenchimento-cesta-estoque-baixo, #dc3545); }

/* Mini-formulário de substituto — só aparece quando o item de estoque
   baixo correspondente está selecionado (ver script.js). */
.cesta-substituto {
  flex-basis: 100%;
  margin: -4px 0 10px 0;
  padding: 10px 12px;
  border: var(--linha-fina);
  border-radius: var(--radius);
  background: #fffbea;
  font-size: 13px;
}

.cesta-substituto label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
}

.cesta-substituto select {
  width: 100%;
  max-width: 320px;
  padding: 8px 10px;
  border: var(--linha);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 13px;
}

/* Botão "Filtros" pra abrir sidebar no mobile (escondido no desktop) */
.filtro__abrir {
  display: none;
  border: var(--linha);
  padding: 8px 14px;
  border-radius: var(--radius);
  font-weight: 600;
}

/* Overlay escuro (só ativo no mobile, quando sidebar abre) */
.sidebar-overlay {
  display: none;
}

/* ---------- MAIN ---------- */
.main {
  flex: 1;
  padding: var(--gap);
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  min-width: 0;
}

.main__topo-lista {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.main__resultado {
  font-size: 14px;
}

/* =====================================================
   GRID DE PRODUTOS
===================================================== */
.grid-produtos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
}

/* Card mais estreito que a coluna da grade: centralizado (--card-alinhamento-grade só existe quando há largura máxima; sem ela
   "stretch" é o comportamento de sempre, o card ocupa a coluna inteira). No carrossel os cards se medem sozinhos. */
.grid-produtos > .produto-card { justify-self: var(--card-alinhamento-grade, stretch); }

/* =====================================================
   PRODUTO CARD
===================================================== */
.produto-card {
  /* Largura máxima do card (Aparência da loja > Card e selos de produto); sem personalizar = sem limite, como sempre foi */
  max-width: var(--card-largura-max, none);
  border: var(--borda-card, var(--linha));
  border-radius: var(--card-raio-tl, var(--radius)) var(--card-raio-tr, var(--radius)) var(--card-raio-br, var(--radius)) var(--card-raio-bl, var(--radius));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--cor-card, #fff);
  color: var(--cor-card-contraste, inherit);
}

.produto-card__badge {
  font-size: 11px;
  font-weight: bold;
  border: var(--linha-fina);
  padding: 3px 8px;
  border-radius: var(--radius);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.produto-card__imagem-wrap {
  position: relative; /* âncora do botão de favorito flutuando sobre a foto */
  margin: 0 8px;
}

.produto-card__fav {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--preenchimento-produto-card-favorito, #fff);
  border: var(--borda-favorito, var(--linha-fina));
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--cor-favorito-inativo, inherit);
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

/* Ícone SVG único (ver includes/produto-card.php) — contorno por padrão,
   preenchido só quando .is-favorito. Cor herdada de currentColor (mesma
   variável --cor-favorito-ativo/--cor-favorito-inativo do botão), tamanho
   em --favorito-tamanho — os 3 já prontos pra personalização futura em
   admin-aparencia.php, sem precisar mexer no SVG. */
.produto-card__fav svg {
  width: var(--favorito-tamanho, 16px);
  height: var(--favorito-tamanho, 16px);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  display: block;
}

.produto-card__fav--topo-direita  { top: 8px; right: 8px; }
.produto-card__fav--topo-esquerda { top: 8px; left: 8px; }
.produto-card__fav--base-direita  { bottom: 8px; right: 8px; }
.produto-card__fav--base-esquerda { bottom: 8px; left: 8px; }

.produto-card__fav:hover {
  transform: scale(1.15);
}

/* Badge de desconto flutuando no canto da imagem — alternativa a ficar
   junto do preço (ver htmlBadgeSeloImagem(), includes/produto-card.php).
   Os dois badges SEMPRE nascem no HTML; só um fica visível por vez,
   conforme data-selo-posicao no <body> (ver includes/header.php e
   admin-vitrine.php). Mesmas cores do selo tradicional (--cor-selo),
   canto superior esquerdo pra não disputar espaço com o favorito, que
   por padrão fica no superior direito. */
.produto-card__badge-imagem {
  display: none;
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
  font-size: 11px;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: var(--radius);
}
.produto-card__badge-imagem--desconto {
  background: var(--cor-selo, #000);
  color: var(--cor-selo-contraste, #fff);
  border: var(--borda-selo, var(--linha-fina));
}
body[data-selo-posicao="imagem"] .produto-card__badge-imagem--desconto { display: inline-block; }
/* Só esconde o selo tradicional nos CARDS (grade/lista) — a página de
   detalhe do produto (.produto-detalhe__valor) não ganhou o badge
   substituto na imagem, então o dela precisa continuar aparecendo sempre,
   mesmo com a posição "imagem" escolhida (ver produto.php, que reaproveita
   htmlValorComPromocao() sem o novo badge — só os 3 cards de
   includes/produto-card.php ganharam o par). */
body[data-selo-posicao="imagem"] .produto-card__badge--desconto { display: none; }
body[data-selo-posicao="imagem"] .produto-detalhe__valor .produto-card__badge--desconto { display: inline-block; }

.produto-card__fav.is-favorito {
  color: var(--cor-favorito-ativo, inherit);
}
.produto-card__fav.is-favorito svg {
  fill: currentColor;
}

.produto-card__imagem {
  display: block;
  width: 100%;
 /* border-top: var(--linha-fina);
  border-bottom: var(--linha-fina);*/
  height: var(--altura-imagem-card, 150px);
  position: relative; /* contexto para o carrossel */
  overflow: hidden;
  text-align: center;
}


.produto-card__imagem-placeholder {
  font-size: 12px;
  opacity: 0.5;
}

.produto-card__imagem-foto {
 /* width: 100%;*/
  height: 100%;
  object-fit: cover;
}

/* =====================================================
   CARROSSEL DE IMAGENS DO PRODUTO
===================================================== */
.carrossel {
  touch-action: pan-y; /* permite swipe horizontal sem travar o scroll vertical da página */
  cursor: grab;
}

.carrossel:active {
  cursor: grabbing;
}

.carrossel__track {
  display: flex;
  height: 100%;
  width: 100%;
  /* Cada slide ocupa 100% da largura do card; o track desliza via transform */
  transition: transform 0.3s ease;
  will-change: transform;
}

/* Durante o arraste (drag) no mobile, remove a transição para acompanhar o dedo 1:1 */
.carrossel__track.is-arrastando {
  transition: none;
}

.carrossel__slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-user-drag: none;
}

.carrossel__slide img {
  max-width: 100%;
  max-height: 100%;
  pointer-events: none; /* evita o navegador iniciar um drag nativo de imagem */
}

/* ---------- Setas (desktop / mouse) ---------- */
.carrossel__seta {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: var(--linha-fina);
  background: var(--preenchimento-produto-carrossel-seta, #fff);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 2;
}

.carrossel__seta--prev {
  left: 6px;
}

.carrossel__seta--next {
  right: 6px;
}

/* Setas só aparecem com hover, e só em dispositivos com mouse de fato */
@media (hover: hover) and (pointer: fine) {
  .carrossel:hover .carrossel__seta {
    opacity: 1;
  }
}

.carrossel__seta:hover {
  transform: translateY(-50%) scale(1.12);
}

/* Esconde a seta "anterior" no primeiro slide e a "próxima" no último */
.carrossel[data-indice="0"] .carrossel__seta--prev {
  display: none;
}

.carrossel.is-ultimo .carrossel__seta--next {
  display: none;
}

/* ---------- Dots (indicador de posição) ---------- */
.carrossel__dots {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  z-index: 2;
}

.carrossel__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: var(--linha-fina);
  background: #fff;
  padding: 0;
  transition: transform 0.2s ease, background 0.2s ease;
}

.carrossel__dot.is-ativo {
  background: var(--cor-primaria, #000);
  transform: scale(1.2);
}

.produto-card__info {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.produto-card__marca {
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  opacity: 0.65;
  letter-spacing: 0.5px;
}

.produto-card__nome {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.produto-card__rating {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.produto-card__estrelas {
  letter-spacing: 1px;
}

.produto-card__rating-num {
  opacity: 0.6;
}

.produto-card__preco {
  display: flex;
  flex-direction: column;
  margin-top: 2px;
}

.produto-card__valor {
  font-size: 18px;
  font-weight: bold;
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
}

/* Arranjo em 2 linhas (etiqueta acima / riscado acima — ver
   htmlValorComPromocao() em includes/produto-card.php e admin-vitrine.php,
   "Posição da etiqueta e do preço riscado"). */
/* Cor do preço atual no card (Aparência > Card de produto); sem personalizar, herda a cor do texto do card. Não vale na página do produto. */
.produto-card .produto-card__valor-num {
  color: var(--cor-preco-card, inherit);
}

.produto-card__valor--empilhado {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.produto-card__valor-linha {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

/* Preço original riscado, quando há promoção ativa. */
.preco-riscado {
  font-size: 13px;
  font-weight: 400;
  opacity: 0.55;
  text-decoration: line-through;
}

.produto-card__badge--desconto {
  background: var(--cor-selo, #000);
  color: var(--cor-selo-contraste, #fff);
  border: var(--borda-selo, var(--linha-fina));
}

/* Selo de combo — neutro de propósito (sem a cor de destaque do selo de
   desconto acima), pra não parecer uma promoção de preço; é só um aviso
   informativo. Fica numa linha própria, entre o nome e o preço. */
.produto-card__badge--combo {
  display: inline-block;
  margin: 2px 0;
  opacity: var(--opacidade-selo-combo, 85%);
  background: var(--cor-selo-combo, transparent);
  color: var(--cor-selo-combo-contraste, inherit);
  border: var(--borda-selo-combo, var(--linha-fina));
}

.produto-card__parcelas {
  font-size: 12px;
  opacity: 0.65;
}

/* ---------- Hortifruti: venda por Kg / Unidade ---------- */
.venda-toggle {
  display: flex;
  border: var(--borda-toggle, var(--linha-fina));
  border-radius: var(--radius);
  overflow: hidden;
  width: fit-content;
  margin-bottom: 4px;
}

.venda-toggle__opcao {
  border: none;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  opacity: 0.55;
}

.venda-toggle__opcao + .venda-toggle__opcao {
  border-left: var(--linha-fina);
}

.venda-toggle__opcao.is-ativo {
  background: var(--cor-toggle, var(--cor-primaria, #000));
  color: var(--cor-toggle-contraste, var(--cor-primaria-contraste, #fff));
  opacity: 1;
}

.produto-card__valor-unidade {
  font-size: 13px;
  font-weight: 400;
  opacity: 0.7;
  margin-left: 3px;
}

.produto-card__conversao,
.produto-detalhe__conversao {
  font-size: 11px;
  opacity: 0.65;
  margin-top: 2px;
  display: block;
}

.produto-card__qtd-aprox {
  display: block;
  text-align: center;
  font-size: 11px;
  opacity: 0.65;
  margin-top: 4px;
}

/* =====================================================
   VARIAÇÕES COMPACTAS DENTRO DO CARD (cor, tamanho,
   espécie, maturação etc.) — versão pequena do seletor
   .variacao usado na página de produto.
===================================================== */
.produto-card__variacoes {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 2px 0 4px;
}

.variacao-mini__titulo {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  opacity: 0.55;
  margin-bottom: 3px;
}

.variacao-mini__opcoes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.variacao-mini__opcao {
  border: var(--borda-primaria, var(--linha-fina));
  border-radius: var(--radius);
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  background: var(--preenchimento-variacao-mini-opcao, #fff);
  transition: background 0.15s, color 0.15s;
}

.variacao-mini__opcao:hover { background: var(--cor-primaria, #000); color: var(--cor-primaria-contraste, #fff); }
.variacao-mini__opcao.is-ativa { background: var(--cor-primaria, #000); color: var(--cor-primaria-contraste, #fff); }
.variacao-mini__opcao.is-indisponivel {
  opacity: 0.3;
  text-decoration: line-through;
  cursor: not-allowed;
}

/* Contador quando o passo é decimal (Kg) */
.btn-carrinho__qtd small {
  font-size: 10px;
  font-weight: 400;
  margin-left: 2px;
  opacity: 0.75;
}

.btn-carrinho--peso .btn-carrinho__menos,
.btn-carrinho--peso .btn-carrinho__mais {
  font-size: 15px;
}

/* ---------- Observação (textarea expansível) ---------- */
.produto-card__obs {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.produto-card__obs-btn {
  border: var(--linha-fina);
  border-radius: var(--radius);
  padding: 6px 10px;
  font-size: 12px;
  align-self: flex-start;
}

.produto-card__obs-campo {
  border: var(--linha-fina);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 13px;
  padding: 8px;
  resize: none;

  /* Escondido por padrão, expande com transição suave */
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
  overflow: hidden;
  transition: max-height 0.25s ease, opacity 0.2s ease, padding 0.25s ease, border-width 0.25s ease;
}

.produto-card__obs-campo.is-aberto {
  max-height: 80px;
  opacity: 1;
  padding-top: 8px;
  padding-bottom: 8px;
  border-width: 1px;
}

/* ---------- Botão Adicionar ao Carrinho (com morph) ---------- */
.produto-card__acao {
  margin-top: auto;
  padding-top: 6px;
}

.btn-carrinho {
  position: relative;
  width: 100%;
  border: var(--borda-carrinho, var(--linha));
  border-radius: var(--radius);
  height: 42px;
  overflow: hidden;
}

.btn-carrinho__label {
  position: absolute;
  inset: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 14px;
  font-family: inherit;
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.2s ease, transform 0.25s ease;
  background: var(--cor-carrinho, transparent);
  color: var(--cor-carrinho-contraste, inherit);
}

.btn-carrinho__contador {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  opacity: 0;
  transform: scale(0.9);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.25s ease;
}

/* Estado "ativo": carrinho já tem produto, mostra o contador */
.btn-carrinho.is-ativo .btn-carrinho__label {
  opacity: 0;
  transform: scale(0.9);
  pointer-events: none;
}

.btn-carrinho.is-ativo .btn-carrinho__contador {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.btn-carrinho__menos,
.btn-carrinho__mais {
  flex: 1;
  border: none;
  background: var(--cor-controles, var(--cor-carrinho, transparent));
  color: var(--cor-controles-contraste, var(--cor-carrinho-contraste, inherit));
  font-size: 18px;
  font-weight: bold;
}

.btn-carrinho__mais:disabled,
.btn-carrinho__menos:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}

/* ---- Combinação (produto + variação) sem estoque nesta seleção ---- */
.btn-carrinho.is-esgotado .btn-carrinho__label {
  background: var(--preenchimento-btn-carrinho-esgotado, #f2f2f2);
  color: #999;
  cursor: not-allowed;
  font-size: 12px;
  pointer-events: none;
}

.btn-carrinho__menos {
  border-right: var(--linha-fina);
}

.btn-carrinho__mais {
  border-left: var(--linha-fina);
}

.btn-carrinho__qtd {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  border-left: var(--linha-fina);
  border-right: var(--linha-fina);
}

/* =====================================================
   FOOTER
===================================================== */
.footer {
  border-top: var(--borda-footer, var(--linha));
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  padding: var(--bloco-rodape-padding, var(--gap));
  background: var(--cor-footer, #fff);
  color: var(--cor-footer-contraste, inherit);
  /* Empurra o rodapé pro fim do .wrapper (flex-column, min-height:100vh)
     em páginas com pouco conteúdo — sem isso ele ficava colado no fim
     do conteúdo, sobrando espaço em branco abaixo dele. */
  margin-top: auto;
}

/* O reset global (topo do arquivo) fixa "a { color: #000; }" — maior
   especificidade que a cor herdada do .footer, então os links (título
   de coluna é <div>, mas "Fale conosco" etc. são <a>) ficavam sempre
   pretos, ignorando --cor-footer-contraste. Documentado como já feito
   em db/config.php desde a criação do grupo Rodapé, mas nunca chegou a
   ser escrito aqui — achado ao usuário reportar que o texto clicável
   não acompanhava a cor personalizada. */
.footer a { color: inherit; }

.footer__colunas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  width: 100%;
}

.footer__coluna {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 160px;
  border: var(--borda-footer-coluna, var(--linha-fina));
  padding: 12px;
  border-radius: var(--radius);
  flex: 1;
}

.footer__coluna h4 {
  font-size: 14px;
  margin-bottom: 4px;
  border-bottom: var(--borda-footer-titulo, var(--linha-fina));
  padding-bottom: 6px;
}

.footer__coluna a {
  display: inline-block;
  align-self: flex-start;
  width: fit-content;
  max-width: 100%;
  font-size: 13px;
  opacity: 0.8;
}

.footer__copyright {
  width: 100%;
  text-align: center;
  font-size: 12px;
  opacity: 0.6;
  border-top: var(--borda-footer-copyright, var(--linha-fina));
  padding-top: 10px;
  margin-top: 6px;
}

.footer__copyright a {
  margin-left: 8px;
  font-weight: 600;
}

/* =====================================================
   BANNER SLIDE
===================================================== */
:root {
  --banner-altura-desktop: 320px;
  --banner-altura-tablet:  220px;
  --banner-altura-mobile:  160px;
  --banner-intervalo:        5s;    /* duração de cada slide */
  /* Hero (destaque único e estático, só home) — mais alto que o carrossel
     de propósito, pra se diferenciar visualmente como "banner principal". */
  --banner-hero-altura-desktop: 480px;
  --banner-hero-altura-tablet:  320px;
  --banner-hero-altura-mobile:  240px;
}

.banner {
  position: relative;
  border-bottom: var(--linha);
  height: var(--banner-altura-desktop);
  /* Espaço abaixo do banner (Aparência da loja > Navegação); sem personalizar = 0, como sempre foi */
  margin-bottom: var(--banner-espaco-abaixo, 0);
  /* Cantos do banner (Aparência da loja > Navegação); sem personalizar = retos, como sempre foi. O overflow:hidden recorta os slides */
  border-radius: var(--banner-raio, 0);
  /* Margem lateral do banner (Aparência da loja > Navegação); sem personalizar = 0 (borda a borda), como sempre foi */
  margin-left: var(--banner-margem-lateral, 0);
  margin-right: var(--banner-margem-lateral, 0);
  overflow: hidden;
  /* Medida do banner para a fonte fluida (cqi = 1% da largura do banner) */
  container-type: inline-size;
  /* Pausa o auto-avanço ao passar o mouse */
  --banner-pausado: running;
}

.banner:hover {
  --banner-pausado: paused;
}

/* ---------- Track (faixa que desliza) ---------- */
.banner__track {
  display: flex;
  height: 100%;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.banner__track.is-arrastando {
  transition: none;
}

/* ---------- Slide individual ---------- */
.banner__slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: stretch;
  border-right: var(--linha-fina);
  overflow: hidden;
  user-select: none;
}

.banner__slide:last-child {
  border-right: none;
}

/* Área de texto (lado esquerdo por padrão — ver .banner__slide--esquerda/
   --fundo abaixo pra outras posições, personalizáveis por banner em
   admin-banners.php). */
.banner__conteudo {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 32px 40px;
  border-right: var(--banner-borda, var(--linha-fina));
  background: var(--banner-cor-conteudo, transparent);
}

.banner__tag {
  display: inline-block;
  border: var(--banner-tag-borda, var(--linha));
  padding: 3px 10px;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  align-self: flex-start;
}

.banner__titulo {
  font-size: clamp(1rem, 2.2cqi, 26px);   /* teto 26px = tamanho de sempre no desktop */
  font-weight: 700;
  line-height: 1.2;
}

.banner__subtitulo {
  font-size: 14px;
  opacity: 0.65;
  max-width: 340px;
}

.banner__cta {
  display: inline-block;
  border: var(--linha);
  padding: 10px 24px;
  font-weight: 700;
  font-size: 14px;
  align-self: flex-start;
  border-radius: var(--radius);
  transition: background 0.15s, color 0.15s;
  /* Contraste automático contra a cor de fundo personalizada do bloco de
     texto (ver _corContrasteParaFundo(), db/banners-home.php) — o botão
     não tem controle de cor manual (só tag/título/subtítulo têm, via
     Quill), então sem isso ficaria sempre preto, ilegível em fundo
     escuro. "inherit" quando não há cor de fundo personalizada — mesmo
     comportamento de sempre. */
  color: var(--banner-cor-cta-contraste, inherit);
  border-color: var(--banner-cor-cta-contraste, currentColor);
}

.banner__cta:hover {
  background: var(--cor-primaria, #000);
  color: var(--cor-primaria-contraste, #fff);
}

/* Área de imagem (lado direito) — largura personalizável por banner via
   --banner-largura-imagem (ver admin-banners.php); 45% é o padrão original. */
.banner__imagem-area {
  flex: 0 0 var(--banner-largura-imagem, 45%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  border-left: var(--banner-borda, var(--linha-fina));
  overflow: hidden;
  background: var(--banner-cor-imagem, transparent);
}

.banner__imagem-placeholder {
  opacity: 0.35;
}

/* Posição da imagem, por banner (ver admin-banners.php) — "direita" é o
   padrão original (não precisa de classe). */
.banner__slide--esquerda {
  flex-direction: row-reverse;
}

.banner__slide--fundo {
  position: relative;
}
.banner__slide--fundo .banner__imagem-area {
  position: absolute;
  inset: 0;
  flex: none;
  width: 100%;
  height: 100%;
  border: none;
  z-index: 0;
}
.banner__slide--fundo .banner__conteudo {
  position: relative;
  z-index: 1;
  max-width: var(--banner-largura-conteudo-fundo, 60%);
  border-right: none;
  /* Fundo semitransparente — garante o texto legível em cima de QUALQUER
     foto; cor (padrão branco) e opacidade ajustáveis por banner (ver
     --banner-cor-conteudo-fundo-rgb/--banner-opacidade-conteudo-fundo em
     admin-banners.php). */
  background: rgba(var(--banner-cor-conteudo-fundo-rgb, 255, 255, 255), var(--banner-opacidade-conteudo-fundo, 88%));
}

/* Só a imagem, sem nenhum texto por cima — o link (se cadastrado) fica na
   imagem inteira, já que não existe botão visível neste modo. */
.banner__slide--somente-imagem .banner__conteudo {
  display: none;
}
.banner__slide--somente-imagem .banner__imagem-area {
  flex: 1;
  border-left: none;
}
.banner__slide--somente-imagem .banner__imagem-link {
  display: block;
  width: 100%;
  height: 100%;
}

/* =====================================================
   BANNER HERO — destaque único e estático (só home, ver index.php).
   Sem carrossel: nenhuma classe/id compartilhado com .banner/.banner__*
   (o JS do carrossel em script.js usa getElementById('banner')/
   ('bannerTrack') — reaproveitar os ids/classes ia colidir). Layout fixo
   "imagem de fundo + texto por cima", visualmente equivalente ao modo
   Fundo do carrossel (mesma ideia de véu semitransparente), só que maior
   e sem o <div class="banner__track"> que desliza.
===================================================== */
.banner-hero {
  position: relative;
  border-bottom: var(--linha);
  height: var(--banner-hero-altura-desktop);
  margin-bottom: var(--banner-espaco-abaixo, 0);
  border-radius: var(--banner-raio, 0);
  margin-left: var(--banner-margem-lateral, 0);
  margin-right: var(--banner-margem-lateral, 0);
  overflow: hidden;
}

.banner-hero__imagem-area {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  overflow: hidden;
  background: var(--preenchimento-banner-hero-placeholder, #f0f0f0);
}

.banner-hero__imagem {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.banner-hero__imagem-placeholder {
  opacity: 0.35;
}

.banner-hero__conteudo {
  position: relative;
  z-index: 1;
  height: 100%;
  max-width: var(--banner-hero-largura-conteudo, 60%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 32px 40px;
  border-right: var(--banner-hero-borda, var(--linha-fina));
  /* Mesmo véu semitransparente do modo Fundo do carrossel — cor (padrão
     branco) e opacidade ajustáveis por banner. */
  background: rgba(var(--banner-hero-cor-conteudo-fundo-rgb, 255, 255, 255), var(--banner-hero-opacidade-conteudo, 88%));
}

.banner-hero__tag {
  display: inline-block;
  border: var(--banner-hero-tag-borda, var(--linha));
  padding: 3px 10px;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  align-self: flex-start;
}

.banner-hero__titulo {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
}

.banner-hero__subtitulo {
  font-size: 15px;
  opacity: 0.65;
  max-width: 380px;
}

.banner-hero__cta {
  display: inline-block;
  border: var(--linha);
  padding: 10px 24px;
  font-weight: 700;
  font-size: 14px;
  align-self: flex-start;
  border-radius: var(--radius);
  transition: background 0.15s, color 0.15s;
}

.banner-hero__cta:hover {
  background: var(--cor-primaria, #000);
  color: var(--cor-primaria-contraste, #fff);
}

/* ---------- Setas de navegação ---------- */
.banner__seta {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: var(--linha);
  background: var(--preenchimento-banner-seta, #fff);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 10;
}

.banner__seta--prev { left: 12px; }
.banner__seta--next { right: 12px; }

/* Setas aparecem no hover do banner inteiro (dispositivos com mouse) */
@media (hover: hover) and (pointer: fine) {
  .banner:hover .banner__seta {
    opacity: 1;
  }
}

.banner__seta:hover {
  transform: translateY(-50%) scale(1.1);
}

/* ---------- Dots indicadores ---------- */
.banner__dots {
  position: absolute;
  bottom: 3px;   /* espaço para a barra de progresso abaixo */
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 10;
}

.banner__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: var(--linha);
  background: var(--preenchimento-banner-dot, #fff);
  padding: 0;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.banner__dot.is-ativo {
  background: var(--cor-primaria, #000);
  transform: scale(1.25);
}

/* ---------- Barra de progresso do auto-avanço ---------- */
.banner__progresso {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(0, 0, 0, 0.12);
  z-index: 10;
}

.banner__progresso-barra {
  height: 100%;
  background: var(--cor-primaria, #000);
  width: 0%;
  animation: bannerProgress var(--banner-intervalo) linear infinite;
  animation-play-state: var(--banner-pausado);
}

@keyframes bannerProgress {
  from { width: 0%; }
  to   { width: 100%; }
}

/* =====================================================
   RESPONSIVO
===================================================== */

/* ---- Tablet: grid de produtos cai para 3 / 2 colunas ---- */
@media (max-width: 1100px) {
  .banner {
    height: var(--banner-altura-tablet);
  }

  .banner__titulo  { font-size: 20px; }
  .banner__subtitulo { font-size: 13px; }
  .banner__conteudo { padding: 24px 28px; gap: 8px; }

  .banner-hero { height: var(--banner-hero-altura-tablet); }
  .banner-hero__titulo { font-size: 24px; }
  .banner-hero__subtitulo { font-size: 13px; }
  .banner-hero__conteudo { padding: 24px 28px; gap: 8px; }
  .grid-produtos {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .grid-produtos {
    grid-template-columns: repeat(2, 1fr);
  }

  :root {
    --sidebar-largura: 220px;
  }
}

/* ---- Mobile: navbar empilha, sidebar vira drawer ---- */
@media (max-width: 720px) {

  .banner {
    height: var(--banner-altura-mobile);
  }

  /* No mobile o slide mantém a divisão texto/imagem do desktop: as larguras vêm
     das variáveis do banner (--banner-largura-imagem / --banner-largura-conteudo-fundo,
     ver admin-banners.php), valem para todas as telas. */
  .banner__slide {
    flex-direction: row;
  }
  .banner__slide--esquerda {
    flex-direction: row-reverse;
  }

  .banner__imagem-area {
    display: flex;
  }
  .banner__imagem-area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* "Somente imagem" não tem texto pra focar — sem essa exceção o banner
     ficaria em branco no mobile (conteúdo já é display:none nesse modo). */
  .banner__slide--somente-imagem .banner__imagem-area {
    display: flex;
  }

  .banner__conteudo {
    flex: 1 1 0%;
    min-width: 0;
    padding: 12px 14px;
    gap: 6px;
  }

  /* Fontes fluidas: proporcionais à largura do banner, com piso legível e teto */
  .banner__titulo    { font-size: clamp(0.8rem, 4.2cqi, 1.1rem); line-height: 1.2; }
  .banner__subtitulo { display: none; }   /* subtítulo some para economizar espaço */
  .banner__tag       { font-size: clamp(0.6rem, 2.6cqi, 0.7rem); }
  .banner__cta       { padding: 0.5em 1em; font-size: clamp(0.7rem, 3.2cqi, 0.8rem); }
  .banner__dots     { bottom: 22px; }

  /* Hero mantém a foto de fundo no mobile (é o elemento principal dele,
     diferente do carrossel) — só encolhe altura/texto e larga o bloco de
     conteúdo, igual o carrossel faz com o modo Fundo. */
  .banner-hero { height: var(--banner-hero-altura-mobile); }
  .banner-hero__conteudo { max-width: none; padding: 16px 18px; gap: 6px; }
  .banner-hero__titulo    { font-size: 18px; }
  .banner-hero__subtitulo { display: none; }
  .banner-hero__tag       { font-size: 10px; }
  .banner-hero__cta       { padding: 7px 16px; font-size: 13px; }

  .topo {
    /* --header-altura é 1 valor só (sem versão mobile, diferente do
       carrossel de banners) — sem esse teto, uma altura personalizada
       grande pro desktop (pra caber uma imagem de fundo, por ex.) fica
       desproporcional/esticada no celular. Alturas menores que 160px
       (a maioria) não são afetadas. */
    min-height: min(var(--header-altura), 160px);
  }

  .topo__conteudo {
    flex-wrap: wrap;
  }

  .topo__busca-wrap {
    order: 3;
    flex-basis: 100%;
  }

  .hamburger {
    display: flex;
  }

  /* Variações do botão do menu (admin-menu.php): com texto ao lado do ícone,
     à direita da barra, e fixo no topo da lista quando ela rola. */
  .hamburger--com-texto {
    display: grid;
    grid-template-columns: auto auto;
    align-content: center;
    justify-content: center;
    align-items: center;
    column-gap: 8px;
    row-gap: 5px;
    width: fit-content;
    min-width: var(--hamburguer-largura, 42px);
    padding: 0 12px;
  }
  .hamburger--com-texto span {
    grid-column: 1;
  }
  .hamburger--com-texto .hamburger__texto {
    grid-column: 2;
    grid-row: 1 / 4;
    width: auto;
    height: auto;
    background: none;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--hamburguer-linhas, var(--preenchimento-topo-hamburguer, #000));
  }
  .hamburger--direita {
    margin-left: auto;
  }
  .hamburger--fixo {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--hamburguer-fundo, var(--cor-menu, #fff));
  }

  /* Navbar colapsa e só aparece quando ativada pelo hambúrguer */
  .navbar {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .navbar.is-aberto {
    /* Antes era um max-height fixo de 300px — com os grupos de
       departamento (mais itens empilhados que a lista plana de antes),
       um teto fixo podia deixar categoria inacessível, cortada pelo
       overflow:hidden. Agora estica bem mais e rola por dentro se ainda
       assim não couber. */
    max-height: 70vh;
    overflow-y: auto;
  }

  .navbar__lista {
    flex-direction: column;
    padding: 0;
  }

  .navbar__item {
    border-left: none;
    border-right: none;
    border-bottom: var(--borda-menu, var(--linha-fina));
  }

  /* Grupo de departamento no mobile: rótulo vira uma linha normal da
     lista (não dropdown flutuante — a lista de categorias abre embutida,
     empurrando o resto do menu pra baixo, dentro do próprio drawer). */
  .navbar__grupo {
    border-left: none;
    border-right: none;
    border-bottom: var(--borda-menu, var(--linha-fina));
  }

  .navbar__grupo-lista {
    position: static;
    border: none;
    padding: 0;
    background: none;
    /* No mobile a lista fica embutida (empurra o resto pra baixo, não
       flutua), então a animação de opacidade/deslize do desktop não se
       aplica — precisa de display:none/block de verdade, senão
       visibility:hidden deixaria um vão vazio no lugar de cada grupo
       fechado. */
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    transition: none;
    display: none;
  }

  .navbar__grupo.is-aberto .navbar__grupo-lista {
    display: block;
  }

  .navbar__grupo-lista li a {
    padding: 10px 16px 10px 32px;
    border-bottom: var(--linha-fina);
  }

  /* Sidebar: vira drawer fixo, fora da tela por padrão */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 80%;
    max-width: 300px;
    background: var(--preenchimento-menu-mobile-painel, #fff);
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
  }

  .sidebar.is-aberta {
    transform: translateX(0);
  }

  .sidebar__fechar {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sidebar-overlay.is-visivel {
    display: block;
    position: fixed;
    inset: 0;
    background: var(--preenchimento-menu-mobile-overlay, rgba(0, 0, 0, 0.4));
    z-index: 99;
  }

  .filtro__abrir {
    display: inline-block;
  }

  .grid-produtos {
    grid-template-columns: 1fr;
  }
}

/* =====================================================
   BADGE DE CONTAGEM NO BOTÃO DO CARRINHO (topo)
===================================================== */
.topo__acao--carrinho {
  position: relative;
  border: none;
  padding: 8px 12px;
  border-radius: var(--radius);
  font-size: inherit;
  font-family: inherit;
}

.carrinho-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  background: var(--preenchimento-carrinho-contador, #000);
  color: var(--preenchimento-carrinho-contador-contraste, #fff);
  font-size: 10px;
  font-weight: bold;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
  pointer-events: none;
  transition: transform 0.2s ease;
}

/* Garante que [hidden] funcione mesmo com display:flex declarado */
.carrinho-badge[hidden] {
  display: none !important;
}

.carrinho-badge.pulsar {
  animation: badgePulse 0.3s ease;
}

@keyframes badgePulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.4); }
  100% { transform: scale(1); }
}

/* =====================================================
   OVERLAY DO CARRINHO
===================================================== */
.carrinho-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--preenchimento-carrinho-overlay, rgba(0, 0, 0, 0.4));
  z-index: 199;
  transition: opacity 0.3s ease;
}

.carrinho-overlay.is-visivel {
  display: block;
}

/* =====================================================
   DRAWER DO CARRINHO (desliza da direita)
===================================================== */
.carrinho-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 380px;
  max-width: 95vw;
  background: var(--preenchimento-carrinho-painel, #fff);
  border-left: var(--borda-modal-carrinho, var(--linha));
  z-index: 200;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.32s ease;
  overflow: hidden;
}

.carrinho-drawer.is-aberto {
  transform: translateX(0);
}

/* ---------- Cabeçalho ---------- */
.carrinho-drawer__cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: var(--modal-carrinho-cabecalho-fundo, transparent);
  color: var(--modal-carrinho-cabecalho-texto, inherit);
  border-bottom: var(--modal-carrinho-cabecalho-borda, var(--linha));
  flex-shrink: 0;
}

.carrinho-drawer__cabecalho h2 {
  font-size: 18px;
}

.carrinho-drawer__fechar {
  border: var(--linha);
  width: 32px;
  height: 32px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

/* ---------- Lista de itens (scroll) ---------- */
.carrinho-lista {
  flex: 1;
  overflow-y: auto;
  list-style: none;
  padding: 0;
  margin: 0;
  background: var(--modal-carrinho-corpo-fundo, transparent);
  color: var(--modal-carrinho-corpo-texto, inherit);
  border: var(--modal-carrinho-corpo-borda, none);
}

/* Estado vazio */
.carrinho-vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 60px 20px;
  opacity: 0.45;
  font-size: 14px;
}

.carrinho-vazio span {
  font-size: 40px;
}

/* ---------- Item do carrinho ---------- */
.carrinho-item {
  display: grid;
  /* thumb | info | controles */
  grid-template-columns: var(--carrinho-thumb-tamanho, 60px) 1fr auto;
  gap: 10px;
  align-items: start;
  padding: 12px 16px;
  border-bottom: var(--linha-fina);
}

/* Miniatura do item na gaveta do carrinho: tamanho, cantos, borda e ajuste da imagem vêm de Aparência da loja (carrinho e
   Bordas diversas); sem personalizar = 60px, borda fina, cantos do tema e imagem preenchendo, como sempre foi. */
.carrinho-item__thumb {
  width: var(--carrinho-thumb-tamanho, 60px);
  aspect-ratio: 1 / 1;
  border: var(--borda-modal-carrinho-thumb, var(--linha-fina));
  border-radius: var(--carrinho-thumb-raio, var(--radius));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.carrinho-item__thumb img {
  width: 100%;
  height: 100%;
  object-fit: var(--carrinho-thumb-ajuste, cover);
}

.carrinho-item__thumb-placeholder {
  font-size: 9px;
  opacity: 0.45;
}

.carrinho-item__info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.carrinho-item__marca {
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  opacity: 0.55;
  letter-spacing: 0.4px;
}

.carrinho-item__nome {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  /* trunca nomes longos em 2 linhas */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.carrinho-item__variantes {
  font-size: 11px;
  opacity: 0.6;
}

.carrinho-item__sku {
  font-size: 10px;
  opacity: 0.45;
  font-family: monospace;
}

.carrinho-item__preco-unit {
  font-size: 12px;
  opacity: 0.6;
  margin-top: 2px;
}

.carrinho-item__preco-total {
  font-size: 14px;
  font-weight: bold;
  margin-top: 4px;
}

/* Controles: − qtd + e × remover */
.carrinho-item__controles {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.carrinho-item__remover {
  border: none;
  background: transparent;
  font-size: 16px;
  opacity: 0.4;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  transition: opacity 0.15s;
}

.carrinho-item__remover:hover {
  opacity: 1;
}

.carrinho-item__qtd-ctrl {
  display: flex;
  align-items: center;
  border: var(--linha);
  border-radius: var(--radius);
  overflow: hidden;
  height: 28px;
}

.carrinho-item__qtd-btn {
  width: 26px;
  height: 100%;
  border: none;
  background: transparent;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
}

.carrinho-item__qtd-btn:hover {
  background: var(--preenchimento-carrinho-qtd-hover, #f0f0f0);
}

.carrinho-item__qtd-num {
  min-width: 24px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  border-left: var(--linha-fina);
  border-right: var(--linha-fina);
  padding: 0 4px;
  line-height: 28px;
  display: block;
}

/* Animação de entrada do item (slide + fade) */
.carrinho-item {
  animation: itemEntrar 0.22s ease;
}

@keyframes itemEntrar {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ---------- Rodapé fixo: subtotal + botão ---------- */
.carrinho-drawer__rodape {
  border-top: var(--linha);
  padding: 16px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.carrinho-subtotal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.carrinho-subtotal__label {
  font-size: 14px;
  font-weight: 600;
}

.carrinho-subtotal__valor {
  font-size: 20px;
  font-weight: bold;
}

.carrinho-finalizar {
  border: var(--linha);
  padding: 12px;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  width: 100%;
  cursor: pointer;
  background: var(--cor-primaria, #000);
  color: var(--cor-primaria-contraste, #fff);
  transition: background 0.15s, color 0.15s;
}

.carrinho-finalizar:hover {
  background: var(--cor-primaria-contraste, #fff);
  color: var(--cor-primaria, #000);
}

/* Mobile: drawer ocupa quase a tela toda */
@media (max-width: 480px) {
  .carrinho-drawer {
    width: 100vw;
    max-width: 100vw;
    border-left: none;
  }
}

/* =====================================================
   BANNER INTERMEDIÁRIO DO GRID
   Ocupa todas as colunas via grid-column: 1 / -1
===================================================== */
.banner-grid {
  grid-column: 1 / -1;        /* estica por todas as colunas do grid */
  border: var(--linha);
  border-radius: var(--radius);
  display: flex;
  align-items: stretch;
  overflow: hidden;
  min-height: 140px;
}

/* Lado esquerdo — texto */
.banner-grid__conteudo {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 28px 32px;
  border-right: var(--linha-fina);
}

.banner-grid__tag {
  display: inline-block;
  border: var(--linha);
  padding: 3px 10px;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  align-self: flex-start;
}

.banner-grid__titulo {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
}

.banner-grid__subtitulo {
  font-size: 13px;
  opacity: 0.6;
  max-width: 420px;
}

.banner-grid__cta {
  display: inline-block;
  border: var(--linha);
  padding: 9px 22px;
  font-weight: 700;
  font-size: 13px;
  align-self: flex-start;
  border-radius: var(--radius);
  transition: background 0.15s, color 0.15s;
}

.banner-grid__cta:hover {
  background: var(--cor-primaria, #000);
  color: var(--cor-primaria-contraste, #fff);
}

/* Lado direito — imagem */
.banner-grid__imagem {
  flex: 0 0 38%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  opacity: 0.35;
  border-left: var(--linha-fina);
}

/* Tablet: reduz o lado da imagem */
@media (max-width: 900px) {
  .banner-grid__imagem {
    flex-basis: 28%;
  }
  .banner-grid__titulo    { font-size: 17px; }
  .banner-grid__conteudo  { padding: 22px 24px; }
}

/* Mobile: empilha verticalmente, oculta a imagem */
@media (max-width: 720px) {
  .banner-grid {
    min-height: 110px;
  }
  .banner-grid__imagem {
    display: none;
  }
  .banner-grid__conteudo {
    border-right: none;
    padding: 18px 16px;
    gap: 6px;
  }
  .banner-grid__titulo    { font-size: 15px; }
  .banner-grid__subtitulo { display: none; }
  .banner-grid__tag       { font-size: 10px; }
  .banner-grid__cta       { padding: 7px 16px; font-size: 12px; }
}

/* =====================================================
   BOTÃO CONTA (topo)
===================================================== */
.topo__acao--conta {
  border: var(--borda-topo-conta, var(--linha));
  padding: 8px 12px;
  border-radius: var(--radius);
  font-size: inherit;
  font-family: inherit;
  background: var(--cor-topo-conta, transparent);
  color: var(--cor-topo-conta-contraste, inherit);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

/* Quando logado, o botão é um <a> (ver includes/header.php) — nesse caso
   ".topo a { color: inherit; }" (mais acima) tem especificidade maior
   (classe + elemento) que ".topo__acao--conta" sozinha (só classe) e
   vencia, ignorando a cor de contraste calculada contra o PRÓPRIO fundo
   do botão (--cor-topo-conta) e herdando a cor de texto do .topo em vez
   disso — texto podia sair da mesma cor do fundo do botão. Repete aqui
   com especificidade igual/maior pra garantir a prioridade certa. */
.topo a.topo__acao--conta {
  color: var(--cor-topo-conta-contraste, inherit);
}

.topo__acao--conta:hover {
  background: var(--cor-topo-conta-hover, #000);
  color: var(--cor-topo-conta-hover-contraste, #fff);
}

/* =====================================================
   MODAL DE LOGIN — mesmo padrão da Espiadinha
===================================================== */

/* Overlay */
.login-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--preenchimento-modal-login-overlay, rgba(0, 0, 0, 0.45));
  z-index: 399;
}

.login-overlay.is-visivel {
  display: block;
}

/* Modal */
.login-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.96);
  width: min(440px, 90vw);
  background: var(--preenchimento-modal-login-painel, #fff);
  border: var(--borda-modal-login, var(--linha));
  border-radius: 12px;
  z-index: 400;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}

.login-modal.is-aberto {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  pointer-events: auto;
}

/* Cabeçalho */
.login-modal__cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: var(--modal-login-cabecalho-fundo, transparent);
  color: var(--modal-login-cabecalho-texto, inherit);
  border-bottom: var(--modal-login-cabecalho-borda, var(--linha));
  flex-shrink: 0;
}

.login-modal__titulo {
  font-size: 17px;
  font-weight: 700;
}

.login-modal__fechar {
  border: var(--linha);
  width: 32px;
  height: 32px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  background: transparent;
  transition: background 0.15s, color 0.15s;
}

.login-modal__fechar:hover {
  background: var(--preenchimento-modal-login-fechar-hover, #000);
  color: var(--preenchimento-modal-login-fechar-hover-contraste, #fff);
}

/* Corpo */
.login-modal__corpo {
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  background: var(--modal-login-corpo-fundo, transparent);
  color: var(--modal-login-corpo-texto, inherit);
  border: var(--modal-login-corpo-borda, none);
}

/* ── Formulário ── */
.login-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.login-form__campo {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.login-form__label {
  font-size: 13px;
  font-weight: 600;
}

.login-form__input {
  border: var(--borda-campo-formulario, var(--linha));
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
  width: 100%;
  box-sizing: border-box;
}

.login-form__input:focus {
  border-color: #000;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.08);
}

/* Estado de erro no input */
.login-form__input.is-erro {
  border-color: #000;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.15);
}

.login-form__erro {
  font-size: 12px;
  color: #000;
  opacity: 0.7;
  min-height: 16px;
  font-style: italic;
}

/* Wrap da senha com botão de olho */
.login-form__senha-wrap {
  position: relative;
}

.login-form__senha-wrap .login-form__input {
  padding-right: 42px;
}

.login-form__olho {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 15px;
  opacity: 0.5;
  padding: 0;
  transition: opacity 0.15s;
}

.login-form__olho:hover {
  opacity: 1;
}

.login-form__esqueci {
  font-size: 12px;
  align-self: flex-end;
  opacity: 0.6;
  text-decoration: underline;
}

.login-form__submit {
  border: var(--borda-botao-login-entrar, var(--linha));
  border-radius: var(--radius);
  padding: 12px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  background: var(--cor-primaria, #000);
  color: var(--cor-primaria-contraste, #fff);
  transition: background 0.15s, color 0.15s;
  margin-top: 4px;
}

.login-form__submit:hover {
  background: var(--cor-primaria-contraste, #fff);
  color: var(--cor-primaria, #000);
}

/* ── Separador "ou" ── */
.login-modal__separador {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  opacity: 0.4;
}

.login-modal__separador::before,
.login-modal__separador::after {
  content: '';
  flex: 1;
  border-top: var(--linha-fina);
}

/* ── Criar conta ── */
.login-modal__criar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.login-modal__criar p {
  font-size: 13px;
  opacity: 0.65;
}

.login-modal__btn-criar {
  width: 100%;
  border: var(--borda-botao-criar-conta, var(--linha));
  border-radius: var(--radius);
  padding: 11px;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  display: block;
  transition: background 0.15s, color 0.15s;
}

.login-modal__btn-criar:hover {
  background: var(--preenchimento-modal-login-criar-hover, #000);
  color: var(--preenchimento-modal-login-criar-hover-contraste, #fff);
}

/* =====================================================
   BOTÃO ESPIADINHA (dentro do card)
===================================================== */
.btn-espiadinha {
  width: 100%;
  border: var(--borda-espiadinha, var(--linha));
  border-radius: var(--radius);
  padding: 9px 0;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  background: transparent;
  letter-spacing: 0.3px;
  transition: background 0.15s ease, color 0.15s ease;
  margin-bottom: 8px;    /* espaço antes do botão de carrinho */
}

.btn-espiadinha:hover {
  background: var(--cor-espiadinha, var(--cor-primaria, #000));
  color: var(--cor-espiadinha-contraste, var(--cor-primaria-contraste, #fff));
}

/* =====================================================
   OVERLAY DA ESPIADINHA
===================================================== */
.espiadinha-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--preenchimento-espiadinha-overlay, rgba(0, 0, 0, 0.45));
  z-index: 299;
}

.espiadinha-overlay.is-visivel {
  display: block;
}

/* =====================================================
   DRAWER ESPIADINHA — centralizado em todos os displays
   Animação: opacity + scale (sem conflito com translateY)
===================================================== */
.espiadinha-drawer {
  position: fixed;
  /* Centralização universal: funciona em qualquer viewport */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.96);

  /* Dimensões: 90% da viewport, com máximos para não crescer demais */
  width: 90vw;
  height: 90vh;

  background: var(--preenchimento-espiadinha-painel, #fff);
  border: var(--borda-modal-espiadinha, var(--linha));
  border-radius: 12px;
  z-index: 300;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  /* Estado fechado: invisível e ligeiramente reduzido */
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.28s ease,
    transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}

/* Estado aberto */
.espiadinha-drawer.is-aberto {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  pointer-events: auto;
}

/* ---------- Cabeçalho ---------- */
.espiadinha-drawer__cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: var(--modal-espiadinha-cabecalho-fundo, transparent);
  color: var(--modal-espiadinha-cabecalho-texto, inherit);
  border-bottom: var(--modal-espiadinha-cabecalho-borda, var(--linha));
  flex-shrink: 0;
  position: relative;
}

/* Alça visual decorativa no topo */
.espiadinha-drawer__cabecalho::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 4px;
  background: var(--preenchimento-espiadinha-alca, #ccc);
  border-radius: 2px;
}

.espiadinha-drawer__titulo-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.espiadinha-drawer__olho {
  font-size: 18px;
  line-height: 1;
}

.espiadinha-drawer__titulo {
  font-size: 16px;
  font-weight: 700;
}

.espiadinha-drawer__fechar {
  border: var(--linha);
  width: 32px;
  height: 32px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  background: transparent;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}

.espiadinha-drawer__fechar:hover {
  background: var(--preenchimento-espiadinha-fechar-hover, #000);
  color: var(--preenchimento-espiadinha-fechar-hover-contraste, #fff);
}

/* ---------- Corpo (scroll) ---------- */
.espiadinha-drawer__corpo {
  flex: 1;
  overflow-y: auto;
  padding: 20px 18px;
  -webkit-overflow-scrolling: touch;
  background: var(--modal-espiadinha-corpo-fundo, transparent);
  color: var(--modal-espiadinha-corpo-texto, inherit);
  border: var(--modal-espiadinha-corpo-borda, none);
}

/* ---------- Espelho de produto.php (iframe) ---------- */
.espiadinha-drawer__corpo--espelho {
  padding: 0;
  overflow: hidden;
}

.espiadinha-drawer__quadro {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Dentro do iframe (produto.php?embutido=1): só o miolo do produto; o carrinho de fora é quem aparece. */
body.pagina-embutida .faixa-paginas-topo,
body.pagina-embutida .topo,
body.pagina-embutida .navbar,
body.pagina-embutida .breadcrumb,
body.pagina-embutida .footer,
body.pagina-embutida .btn-espiadinha,
body.pagina-embutida .carrinho-overlay,
body.pagina-embutida .carrinho-drawer {
  display: none;
}

/* ---------- Placeholder interno ---------- */
.espiadinha-placeholder {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.espiadinha-placeholder__imagem {
  flex: 0 0 45%;
  aspect-ratio: 1 / 1;
  border: var(--linha);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  opacity: 0.35;
}

.espiadinha-placeholder__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.espiadinha-placeholder__label {
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.55;
}

.espiadinha-placeholder__desc {
  font-size: 13px;
  line-height: 1.5;
  opacity: 0.75;
}

/* Mobile: empilha placeholder verticalmente */
@media (max-width: 520px) {
  .espiadinha-placeholder {
    flex-direction: column;
  }

  .espiadinha-placeholder__imagem {
    flex: none;
    width: 100%;
  }
}

/* =====================================================
   TOAST DE NOTIFICAÇÃO
===================================================== */
.toast-container {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 500;
  pointer-events: none;
}

.toast {
  border: var(--borda-toast-caixa, var(--linha));
  background: var(--preenchimento-toast-fundo, #fff);
  border-radius: var(--radius);
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  pointer-events: auto;
  white-space: nowrap;
  max-width: 90vw;
  overflow: hidden;

  /* Animação de entrada */
  animation: toastEntrar 0.25s ease forwards;
}

.toast.is-saindo {
  animation: toastSair 0.25s ease forwards;
}

/* Ícone do toast */
.toast__icone {
  font-size: 16px;
  flex-shrink: 0;
}

/* Variantes */
.toast--sucesso { border-left: 4px solid #000; }
.toast--erro    { border-left: 4px solid #000; background-color: var(--preenchimento-toast-erro-fundo, #ffe985); opacity: 0.7; }

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

@keyframes toastSair {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(8px) scale(0.96); }
}

/* Mobile: toast fica mais compacto */
@media (max-width: 480px) {
  .toast-container {
    bottom: 16px;
    width: calc(100vw - 32px);
    left: 16px;
    transform: none;
  }

  .toast {
    width: 100%;
    white-space: normal;
  }
}

/* =====================================================
   BALÃO DE DICA (substitui o tooltip nativo do "title",
   ver tooltip-balao.js) — mesma cor de destaque usada nos
   botões principais, pra herdar a personalização da loja.
===================================================== */
.tooltip-balao {
  position: fixed;
  z-index: 1000; /* acima de qualquer modal/drawer/toast já existente */
  max-width: 260px;
  padding: 8px 12px;
  border-radius: var(--radius);
  background: var(--cor-primaria, #000);
  color: var(--cor-primaria-contraste, #fff);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.tooltip-balao.is-visivel { opacity: 1; transform: translateY(0); }

/* "Bico" do balão — quadrado rotacionado 45°, herda a mesma cor de fundo
   (uma fonte só de cor, nunca dessincroniza se a personalização mudar). */
.tooltip-balao::after {
  content: '';
  position: absolute;
  left: var(--tooltip-seta-esquerda, 50%);
  width: 10px;
  height: 10px;
  background: inherit;
  transform: translateX(-50%) rotate(45deg);
}
.tooltip-balao--topo::after  { bottom: -5px; }
.tooltip-balao--baixo::after { top: -5px; }

@media (max-width: 480px) {
  .tooltip-balao { max-width: calc(100vw - 32px); }
}

/* =====================================================
   TOAST DO PAINEL ADMIN — mesma mecânica do toast da loja,
   mas com fundo colorido por tipo de resultado (aqui o público
   é o admin, então o alto-contraste importa mais que o
   minimalismo preto/branco da vitrine).
===================================================== */
.admin-toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  z-index: 999;
  pointer-events: none;
}

.admin-toast {
  border-radius: var(--radius);
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  pointer-events: auto;
  max-width: min(90vw, 420px);
  color: #fff;
  animation: toastEntrar 0.25s ease forwards;
}
.admin-toast.is-saindo { animation: toastSair 0.25s ease forwards; }

.admin-toast__icone { font-size: 16px; flex-shrink: 0; }

.admin-toast--sucesso { background: #0a7a2f; }
.admin-toast--erro    { background: #b00020; }
.admin-toast--info    { background: #1f2937; }

@media (max-width: 480px) {
  .admin-toast-container { top: 12px; right: 12px; left: 12px; align-items: stretch; }
  .admin-toast { max-width: none; }
}

/* =====================================================================
   PÁGINAS ADICIONAIS — BREADCRUMB
===================================================================== */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: var(--bloco-breadcrumb-padding, 14px var(--gap) 0);
  background: var(--bloco-breadcrumb-fundo, transparent);
  color: var(--bloco-breadcrumb-texto, inherit);
  font-size: 13px;
  opacity: 0.7;
}

.breadcrumb a { opacity: 0.7; }
.breadcrumb a:hover { opacity: 1; text-decoration: underline; }
.breadcrumb__atual { font-weight: 700; opacity: 1; }
.breadcrumb__sep { opacity: 0.4; }

/* =====================================================================
   CABEÇALHO GENÉRICO DE PÁGINA (título + descrição curta)
===================================================================== */
.pagina-titulo {
  padding: 10px var(--gap) 0;
}
.pagina-titulo h1 {
  font-size: 22px;
}
.pagina-titulo p {
  font-size: 14px;
  opacity: 0.65;
  margin-top: 4px;
}

/* =====================================================================
   CATEGORIA — cabeçalho + chips de subcategoria
===================================================================== */
.categoria-header {
  margin: var(--gap);
  border: var(--borda-categoria-cabecalho, var(--linha));
  border-radius: var(--radius);
  padding: var(--bloco-categoria-cabecalho-padding, 20px);
  background: var(--bloco-categoria-cabecalho-fundo, transparent);
  color: var(--bloco-categoria-cabecalho-texto, inherit);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.categoria-header h1 {
  font-size: 24px;
}

.categoria-header p {
  font-size: 14px;
  opacity: 0.65;
  max-width: 640px;
}

.categoria-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.categoria-chip {
  border: var(--borda-chip, var(--linha));
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.categoria-chip:hover { background: var(--cor-chip, var(--cor-primaria, #000)); color: var(--cor-chip-contraste, var(--cor-primaria-contraste, #fff)); }
.categoria-chip.is-ativo { background: var(--cor-chip, var(--cor-primaria, #000)); color: var(--cor-chip-contraste, var(--cor-primaria-contraste, #fff)); }

/* Filtro de status em "Meus pedidos" (minha-conta.php) — mesma pílula do
   chip de categoria (var(--cor-chip)), só que fora da vitrine; storefront
   nunca reaproveita .admin-filtro-status (é do painel administrativo). */
.conta-filtro-status {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.conta-filtro-status button {
  border: var(--borda-chip, var(--linha));
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  background: transparent;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.conta-filtro-status button:hover,
.conta-filtro-status button.is-ativo {
  background: var(--cor-chip, var(--cor-primaria, #000));
  color: var(--cor-chip-contraste, var(--cor-primaria-contraste, #fff));
}

.categoria-ordenar {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.categoria-ordenar select {
  border: var(--linha);
  border-radius: var(--radius);
  padding: 7px 10px;
  font-family: inherit;
  font-size: 13px;
  background: var(--preenchimento-categoria-ordenar-select, #fff);
}

/* =====================================================================
   PRODUTO — página de detalhe
===================================================================== */
.produto-detalhe {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: calc(var(--gap) * 1.5);
  padding: var(--bloco-produto-detalhe-padding, var(--gap));
  background: var(--bloco-produto-detalhe-fundo, transparent);
  color: var(--bloco-produto-detalhe-texto, inherit);
}

/* ---- Galeria ---- */
.produto-detalhe__galeria {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.produto-detalhe__imagem-principal {
  border: var(--borda-produto-imagem-principal, var(--linha));
  border-radius: var(--radius);
  aspect-ratio: 1 / 1;
  position: relative;
  overflow: hidden;
}

/* ---- Slider (galeria em slides) ---- */
.produto-detalhe__slider {
  border: var(--borda-produto-slider, var(--linha));
  border-radius: var(--radius);
  aspect-ratio: 1 / 1;
  position: relative;
  overflow: hidden;
  touch-action: pan-y;
}

.produto-detalhe__slider-track {
  display: flex;
  height: 100%;
  width: 100%;
  transition: transform 0.4s ease;
  will-change: transform;
}

.produto-detalhe__slider-track.is-arrastando {
  transition: none;
}

.produto-detalhe__slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-user-drag: none;
}

.produto-detalhe__slide img {
  max-width: 100%;
  max-height: 100%;
  pointer-events: none;
}

/* ---- Setas (sempre visíveis — é a imagem principal do produto) ---- */
.produto-detalhe__seta {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: var(--linha);
  background: var(--preenchimento-produto-detalhe-seta, #fff);
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background 0.15s, color 0.15s, transform 0.15s;
}

.produto-detalhe__seta:hover {
  background: var(--preenchimento-produto-detalhe-seta-hover, #000);
  color: var(--preenchimento-produto-detalhe-seta-hover-contraste, #fff);
  transform: translateY(-50%) scale(1.06);
}

.produto-detalhe__seta--prev { left: 10px; }
.produto-detalhe__seta--next { right: 10px; }

/* Esconde a seta no início/fim do slider (sem loop) */
.produto-detalhe__slider[data-indice="0"] .produto-detalhe__seta--prev {
  display: none;
}
.produto-detalhe__slider.is-ultimo .produto-detalhe__seta--next {
  display: none;
}

/* ---- Contador (ex.: "2 / 4") ---- */
.produto-detalhe__contador {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: var(--preenchimento-produto-detalhe-contador, #fff);
  border: var(--linha-fina);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 700;
  z-index: 2;
}

/* ---- Botão de slide automático (liga/desliga) ---- */
.produto-detalhe__autoplay {
  position: absolute;
  bottom: 10px;
  left: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--preenchimento-produto-detalhe-autoplay, #fff);
  border: var(--linha-fina);
  border-radius: 999px;
  padding: 5px 12px 5px 10px;
  font-size: 12px;
  font-weight: 600;
  z-index: 2;
  transition: background 0.15s, color 0.15s;
}

.produto-detalhe__autoplay:hover {
  background: var(--preenchimento-produto-detalhe-autoplay-ativo, #000);
  color: var(--preenchimento-produto-detalhe-autoplay-ativo-contraste, #fff);
}

.produto-detalhe__autoplay[aria-pressed="true"] {
  background: var(--preenchimento-produto-detalhe-autoplay-ativo, #000);
  color: var(--preenchimento-produto-detalhe-autoplay-ativo-contraste, #fff);
}

.produto-detalhe__autoplay-icone { font-size: 11px; }

/* ---- Miniaturas ---- */
.produto-detalhe__miniaturas {
  display: flex;
  gap: 8px;
}

.produto-detalhe__miniatura {
  width: 72px;
  height: 72px;
  border: var(--borda-produto-miniatura, var(--linha-fina));
  border-radius: var(--radius);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-family: inherit;
  background: var(--preenchimento-produto-detalhe-miniatura, #fff);
  opacity: 0.55;
  cursor: pointer;
  transition: border 0.15s, opacity 0.15s;
}

.produto-detalhe__miniatura.is-ativa {
  border: var(--linha);
  opacity: 1;
}

@media (max-width: 480px) {
  .produto-detalhe__seta { width: 32px; height: 32px; font-size: 16px; }
  .produto-detalhe__autoplay-texto { display: none; }
}

/* ---- Informações ---- */
.produto-detalhe__info {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.produto-detalhe__marca {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  opacity: 0.6;
  text-transform: uppercase;
}

.produto-detalhe__nome {
  font-size: 26px;
  line-height: 1.25;
}

.produto-detalhe__rating {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.produto-detalhe__rating a { opacity: 0.6; text-decoration: underline; }

.produto-detalhe__preco {
 /* border-top: var(--linha-fina);
  border-bottom: var(--linha-fina);*/
  padding: 14px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.produto-detalhe__valor {
  font-size: 30px;
  font-weight: bold;
}

.produto-detalhe__parcelas {
  font-size: 13px;
  opacity: 0.65;
}

/* ---- Variações (cor / tamanho) ---- */
.variacao {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.variacao__titulo {
  font-size: 13px;
  font-weight: 700;
}

.variacao__opcoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.variacao__opcao {
  border: var(--linha);
  min-width: 42px;
  padding: 8px 12px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  transition: background 0.15s, color 0.15s;
}

.variacao__opcao:hover { background: var(--cor-primaria, #000); color: var(--cor-primaria-contraste, #fff); }
.variacao__opcao.is-ativa { background: var(--cor-primaria, #000); color: var(--cor-primaria-contraste, #fff); }
.variacao__opcao.is-indisponivel {
  opacity: 0.3;
  text-decoration: line-through;
  cursor: not-allowed;
}

/* ---- Ação (quantidade + comprar) reaproveita .btn-carrinho já existente ---- */
.produto-detalhe__acao {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 50%;
  position: relative;
  right: -200px;

}

/* ---- Combo com desconto ("compre junto e tenha desconto") — aviso na
   página do produto quando ele participa de algum combo ativo (ver
   combosAtivosDoProduto(), db/combos.php). Mesmo tratamento visual de
   .frete-calc logo abaixo (borda fina, cantos arredondados). ---- */
.produto-detalhe__combo {
  border: var(--borda-produto-combo, var(--linha-fina));
  border-radius: var(--radius);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.produto-detalhe__combo-titulo {
  font-size: var(--tamanho-titulo-combo, 13px);
  color: var(--cor-titulo-combo, inherit);
  background: var(--cor-fundo-titulo-combo, transparent);
}

.produto-detalhe__combo-texto {
  font-size: 13px;
  opacity: 0.8;
}

.produto-detalhe__combo-produtos {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 2px;
}

.produto-detalhe__combo-produto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 90px;
  text-align: center;
  text-decoration: none;
  color: inherit;
}

.produto-detalhe__combo-produto__imagem-wrap {
  width: 70px;
  height: 70px;
  border: var(--linha-fina);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--preenchimento-produto-detalhe-combo-imagem, #fff);
}

.produto-detalhe__combo-produto__imagem {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.produto-detalhe__combo-produto__imagem-placeholder {
  font-size: 9px;
  opacity: 0.35;
}

.produto-detalhe__combo-produto__nome {
  font-size: 11px;
  line-height: 1.3;
}

.produto-detalhe__combo-produto__preco {
  font-size: 12px;
  font-weight: 700;
}

.produto-detalhe__combo-produto:hover .produto-detalhe__combo-produto__nome { text-decoration: underline; }

/* ---- Frete / CEP ---- */
.frete-calc {
  border: var(--borda-produto-frete-calc, var(--linha-fina));
  border-radius: var(--radius);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.frete-calc__titulo {
  font-size: 13px;
  font-weight: 700;
}

.frete-calc__form {
  display: flex;
  gap: 8px;
}

.frete-calc__input {
  flex: 1;
  border: var(--linha);
  border-radius: var(--radius);
  padding: 9px 10px;
  font-family: inherit;
  font-size: 13px;
}

.frete-calc__btn {
  border: var(--borda-botao-calcular-frete, var(--linha));
  border-radius: var(--radius);
  padding: 9px 16px;
  font-weight: 700;
  font-size: 13px;
}

.frete-calc__resultado {
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 8px;
  margin-top: 4px;
  border-top: var(--linha-fina);
}

/* ---- Opções de envio (checkout), agrupadas por modalidade (Delivery x
   Terceirizada — ver cotarFrete(), db/frete.php) ---- */
.frete-grupo {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.frete-grupo__titulo {
  font-size: 12px;
  font-weight: 700;
  opacity: 0.6;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.frete-opcao {
  display: flex;
  align-items: center;
  gap: 10px;
  border: var(--linha-fina);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: 13px;
  cursor: pointer;
  transition: border 0.15s, background 0.15s;
}
.frete-opcao.is-selecionada {
  border: var(--linha);
  background: var(--preenchimento-frete-opcao-selecionada, #fafafa);
}
.frete-opcao input[type="radio"] { flex-shrink: 0; }
.frete-opcao__info { flex: 1; }
.frete-opcao__info small { display: block; opacity: 0.6; font-size: 11px; margin-top: 2px; }
.frete-opcao__valor { font-weight: 700; white-space: nowrap; }

/* ---- Selos de garantia ---- */
.produto-detalhe__selos {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  opacity: 0.7;
}

.produto-detalhe__selo {
  border: var(--linha-fina);
  border-radius: var(--radius);
  padding: 6px 10px;
}

/* =====================================================================
   TABS (descrição / especificações / avaliações)
===================================================================== */
.tabs {
  margin: 0 var(--gap) var(--gap);
}

.tabs__nav {
  display: flex;
  border-bottom: var(--linha);
  gap: 4px;
}

.tabs__botao {
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 700;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  opacity: 0.55;
}

.tabs__botao.is-ativo {
  opacity: 1;
  border-bottom: 3px solid #000;
}

.tabs__painel {
  display: none;
  padding: 20px 4px;
  font-size: 14px;
  line-height: 1.7;
}

.tabs__painel.is-ativo { display: block; }

.tabs__tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.tabs__tabela th, .tabs__tabela td {
  border: var(--linha-fina);
  padding: 8px 12px;
  text-align: left;
}

.tabs__tabela th {
  width: 220px;
  opacity: 0.6;
  font-weight: 700;
}

/* Conteúdo HTML das abas Descrição/Informação nutricional/Advertências
   (editado com Quill, ver vendor/quill/, sempre sanitizado antes de
   chegar aqui — includes/sanitizar-html.php). */
.tabs__html p { margin: 0 0 10px; }
.tabs__html p:last-child { margin-bottom: 0; }
.tabs__html ul, .tabs__html ol { margin: 0 0 10px; padding-left: 22px; }
.tabs__html li { margin-bottom: 4px; }
.tabs__html h3, .tabs__html h4 { margin: 14px 0 8px; }
.tabs__html blockquote { margin: 0 0 10px; padding-left: 14px; border-left: var(--linha); opacity: 0.8; }
.tabs__html table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 10px; }
.tabs__html th, .tabs__html td { border: var(--linha-fina); padding: 6px 10px; text-align: left; }
.tabs__html th { opacity: 0.6; font-weight: 700; }

/* ---- Avaliações ---- */
.avaliacao-resumo {
  display: flex;
  gap: 24px;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: var(--linha-fina);
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.avaliacao-resumo__media {
  font-size: 40px;
  font-weight: bold;
  line-height: 1;
}

.avaliacao-resumo__estrelas {
  font-size: 16px;
}

.avaliacao-resumo__total {
  font-size: 12px;
  opacity: 0.6;
}

.avaliacao {
  border-bottom: var(--linha-fina);
  padding: 14px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.avaliacao__topo {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 700;
}

.avaliacao__data { font-weight: 400; opacity: 0.55; }
.avaliacao__estrelas { font-size: 13px; }
.avaliacao__texto { font-size: 13px; opacity: 0.85; }

/* ---- Formulário de nova avaliação ---- */
.avaliacao-form {
  border: var(--linha-fina);
  border-radius: var(--radius);
  padding: 16px;
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.avaliacao-form__titulo {
  font-size: 14px;
  font-weight: 700;
}

.avaliacao-form__estrelas {
  display: flex;
  gap: 4px;
}

.avaliacao-form__estrela {
  display: inline-flex;
  opacity: 0.3;
  cursor: pointer;
}
.avaliacao-form__estrela:hover,
.avaliacao-form__estrela.is-ativa { opacity: 1; }

.avaliacao-form textarea {
  border: var(--linha);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
  min-height: 70px;
}

.avaliacao-form button[type="submit"] {
  align-self: flex-start;
  border: var(--linha);
  border-radius: var(--radius);
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 700;
  background: var(--cor-primaria, #000);
  color: var(--cor-primaria-contraste, #fff);
  transition: background 0.15s, color 0.15s;
}
.avaliacao-form button[type="submit"]:hover { background: var(--cor-primaria-contraste, #fff); color: var(--cor-primaria, #000); }

/* =====================================================================
   SEÇÃO DE RELACIONADOS
===================================================================== */
.secao-relacionados {
  padding: 0 var(--gap) var(--gap);
}

.secao-relacionados h2 {
  font-size: 18px;
  margin-bottom: 12px;
}

/* =====================================================================
   CARRINHO — PÁGINA CHEIA
===================================================================== */
.carrinho-pagina {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  gap: var(--gap);
  padding: var(--gap);
  align-items: start;
}

.carrinho-pagina__lista {
  border: var(--borda-carrinho-lista, var(--linha));
  border-radius: var(--radius);
  overflow: hidden;
}

.carrinho-pagina__cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: var(--linha);
}

.carrinho-pagina__cabecalho h1 { font-size: 18px; }
.carrinho-pagina__continuar { font-size: 13px; text-decoration: underline; opacity: 0.7; }
.carrinho-pagina__continuar:hover { opacity: 1; }

.carrinho-linha {
  display: grid;
  grid-template-columns: 90px 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border-bottom: var(--linha-fina);
}

.carrinho-linha:last-child { border-bottom: none; }

.carrinho-linha__thumb {
  width: 90px;
  aspect-ratio: 1/1;
  border: var(--borda-carrinho-item-thumb, var(--linha-fina));
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.carrinho-linha__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carrinho-linha__thumb-placeholder {
  font-size: 10px;
  opacity: 0.45;
}

.carrinho-linha__info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.carrinho-linha__marca { font-size: 11px; font-weight: 700; opacity: 0.55; text-transform: uppercase; }
.carrinho-linha__nome { font-size: 14px; font-weight: 600; }
.carrinho-linha__variantes { font-size: 12px; opacity: 0.6; }
.carrinho-linha__observacao {
  border: var(--linha);
  border-radius: var(--radius);
  padding: 6px 8px;
  font-family: inherit;
  font-size: 12px;
  max-width: 320px;
}
.carrinho-linha__remover { font-size: 12px; opacity: 0.5; text-decoration: underline; align-self: flex-start; }
.carrinho-linha__remover:hover { opacity: 1; }

.carrinho-linha__qtd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: var(--borda-carrinho-qtd-controle, var(--linha));
  border-radius: var(--radius);
  overflow: hidden;
  height: 34px;
  width: 120px;
}
.carrinho-linha__qtd button {
  width: 32px; height: 100%; font-size: 16px;
}
.carrinho-linha__qtd button:hover { background: var(--preenchimento-carrinho-resumo-qtd-hover, #f0f0f0); }
.carrinho-linha__qtd span {
  min-width: 30px; text-align: center; font-size: 13px; font-weight: 600;
  /* border-left: var(--linha-fina); border-right: var(--linha-fina);  line-height: 34px;*/
}

.carrinho-linha__preco { font-size: 15px; font-weight: bold; text-align: right; white-space: nowrap; }

.carrinho-linha__preco-unit {
  display: block;
  font-size: 12px;
  font-weight: 400;
  opacity: 0.6;
  margin-top: 2px;
}

.carrinho-pagina__vazio {
  padding: 60px 20px;
  text-align: center;
  opacity: 0.5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.carrinho-pagina__vazio span { font-size: 44px; }

/* ---- Resumo lateral ---- */
.resumo-pedido {
  border: var(--borda-carrinho-resumo, var(--linha));
  border-radius: var(--radius);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: var(--gap);
}

.resumo-pedido h2 { font-size: 16px; }

.resumo-pedido__linha {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}

.resumo-pedido__linha--total {
  font-size: 18px;
  font-weight: bold;
  border-top: var(--linha-fina);
  padding-top: 12px;
}

.resumo-pedido__cupom {
  display: flex;
  gap: 8px;
}

.resumo-pedido__cupom input {
  flex: 1;
  border: var(--linha);
  border-radius: var(--radius);
  padding: 9px 10px;
  font-family: inherit;
  font-size: 13px;
}

.resumo-pedido__cupom button {
  border: var(--linha);
  border-radius: var(--radius);
  padding: 9px 14px;
  font-weight: 700;
  font-size: 13px;
}

.resumo-pedido__btn {
  border: var(--borda-primaria, var(--linha));
  border-radius: var(--radius);
  padding: 13px;
  font-weight: 700;
  font-size: 15px;
  background: var(--cor-primaria, #000);
  color: var(--cor-primaria-contraste, #fff);
  text-align: center;
  transition: background 0.15s, color 0.15s;
}
.resumo-pedido__btn:hover { background: var(--cor-primaria-contraste, #fff); color: var(--cor-primaria, #000); }

.resumo-pedido__selos {
  font-size: 11px;
  opacity: 0.6;
  text-align: center;
  border-top: var(--linha-fina);
  padding-top: 10px;
}

/* =====================================================================
   CHECKOUT — stepper + formulário + resumo
===================================================================== */
.checkout-etapas {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 18px var(--gap) 6px;
  flex-wrap: wrap;
}

.checkout-etapa {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  opacity: 0.4;
}

.checkout-etapa.is-ativa, .checkout-etapa.is-concluida { opacity: 1; }

.checkout-etapa__num {
  width: 24px;
  height: 24px;
  border: var(--borda-checkout-etapa-num, var(--linha));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}

.checkout-etapa.is-ativa .checkout-etapa__num,
.checkout-etapa.is-concluida .checkout-etapa__num {
  background: var(--cor-primaria, #000);
  color: var(--cor-primaria-contraste, #fff);
}

.checkout-etapa__sep {
  width: 30px;
  border-top: var(--linha-fina);
  opacity: 0.5;
}

.checkout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  gap: var(--gap);
  padding: var(--gap);
  align-items: start;
}

.checkout-secao {
  border: var(--borda-checkout-secao, var(--linha));
  border-radius: var(--radius);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: var(--gap);
}

.checkout-secao h2 {
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.checkout-secao__num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--preenchimento-checkout-etapa-circulo, #000);
  color: var(--preenchimento-checkout-etapa-circulo-contraste, #fff);
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Reaproveita o grid de formulário do login-form, com colunas */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.promocao-validade-etapa {
  grid-column: 1 / -1;
  align-items: end;
  min-width: 0;
  margin: 0 0 10px;
  padding: 12px;
  border: var(--linha-fina);
  border-radius: var(--radius);
}

.promocao-validade-etapa legend {
  padding: 0 6px;
  font-weight: 600;
}

.promocao-validade-etapa__remover {
  grid-column: 1 / -1;
  justify-self: end;
}

.form-grid--3 { grid-template-columns: repeat(3, 1fr); }

.form-campo { display: flex; flex-direction: column; gap: 5px; grid-column: span 2; min-width: 0; }
.form-campo[hidden] { display: none !important; }
.form-campo--metade { grid-column: span 1; }
.form-campo--terco { grid-column: span 1; }

/* Blocos separados do modal "Preencher com IA" (admin-produto.php) — cada
   opção (URL/web/imagem/atualizar imagens) e os resultados ficam em caixas
   próprias, nunca lado a lado na mesma linha (pedido do usuário). */
.admin-ia-bloco {
  border: var(--linha-fina);
  border-radius: var(--radius);
  padding: 14px;
  margin-top: 14px;
}
.admin-ia-bloco:first-child { margin-top: 0; }

/* Editor de texto rico (Quill) — descrição/informação nutricional/
   advertências em admin-produto.php. O <textarea> real fica hidden
   (sincronizado via JS), isso aqui é só a casca visual do editor. */
.admin-editor-rico {
  border: var(--borda-campo-formulario, var(--linha));
  border-radius: var(--radius);
  overflow: hidden;
}
.admin-editor-rico .ql-toolbar { border: none; border-bottom: var(--borda-campo-formulario, var(--linha)); font-family: inherit; }
.admin-editor-rico .ql-container { border: none; font-family: inherit; font-size: 14px; min-height: 100px; }
.admin-editor-rico .ql-editor { min-height: 100px; }

/* Variante pra campo de 1 linha só (tag/título/subtítulo de banner, ver
   admin-banners.php) — mesmo editor rico, só bem mais baixo, sem o espaço
   vazio de um editor pensado pra parágrafo/texto corrido. */
.admin-editor-rico--linha .ql-container,
.admin-editor-rico--linha .ql-editor {
  min-height: 38px;
}

/* Linha de botões de cor pros editores de banner — fora do Quill de
   propósito (ver criarBotoesCorBanner(), admin-banners.php: o picker de
   cor embutido do Quill não funciona nesta build vendorizada). */
.admin-editor-cores {
  display: flex;
  gap: 4px;
  margin-top: 6px;
}
.admin-editor-cores__botao {
  width: 22px;
  height: 22px;
  border: var(--linha-fina);
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
}
.admin-editor-cores__botao--limpar {
  background: #fff;
  font-size: 10px;
  line-height: 1;
}

/* Tamanho de texto do Quill (negrito/itálico/cor/tamanho, ver
   $permitirEstiloTexto em includes/sanitizar-html.php) — mesmos valores de
   vendor/quill/quill.snow.css (.ql-editor .ql-size-*), só que SEM o
   seletor ".ql-editor" na frente: aqui também precisa valer na loja
   pública (banners reais em index.php/categoria.php/ofertas.php), que não
   carrega o CSS do Quill. */
.ql-size-small { font-size: 0.75em; }
.ql-size-large { font-size: 1.5em; }
.ql-size-huge { font-size: 2.5em; }

.form-campo label { font-size: 13px; font-weight: 600; }
.form-campo input, .form-campo select, .form-campo textarea {
  border: var(--borda-campo-formulario, var(--linha));
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  width: 100%;
}

/* Autocomplete do campo NCM (admin-produto.php) — mesmo padrão visual dos
   outros dropdowns do admin (.admin-nav-grupo__lista): position:absolute
   ancorado no próprio .form-campo, z-index:50. */
.admin-ncm-campo { position: relative; }

.admin-ncm-resultados {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;
  margin-top: 4px;
  max-height: 280px;
  overflow-y: auto;
  background: #fff;
  border: var(--linha);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.admin-ncm-resultados[hidden] { display: none !important; }

/* Dentro de modal (.admin-modal__corpo tem rolagem própria) o painel
   flutuante ficaria cortado pela área rolável — aqui ele empurra o
   conteúdo abaixo em vez de flutuar por cima. */
.admin-modal__corpo .admin-ncm-resultados {
  position: static;
  margin-top: 6px;
}

.admin-ncm-resultado {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  cursor: pointer;
}
.admin-ncm-resultado:hover { background: #f5f5f5; }

.admin-ncm-resultado__codigo {
  font-size: 13px;
  font-weight: 700;
}

.admin-ncm-resultado__desc {
  font-size: 12px;
  opacity: 0.7;
}

.checkbox-linha {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

/* ---- Forma de pagamento: grupos (Online / Na entrega) — só aparece
   quando há forma indireta cadastrada, antes das abas de cada grupo. ---- */
.pagamento-grupos {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}

.pagamento-grupo {
  flex: 1;
  padding: 12px;
  border: var(--linha);
  border-radius: var(--radius);
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  opacity: 0.5;
  cursor: pointer;
}

.pagamento-grupo.is-ativo { opacity: 1; border-color: #000; }

/* ---- Forma de pagamento: abas ---- */
.pagamento-abas {
  display: flex;
  gap: 8px;
  border-bottom: var(--borda-checkout-pagamento-abas, var(--linha));
  margin-bottom: 4px;
}

/* Só some quando faz parte de um grupo (--grupo) — abas sem grupo (loja
   sem nenhuma forma indireta cadastrada, ou telas que nunca teriam esse
   agrupamento) continuam sempre visíveis, sem precisar de nenhuma classe
   extra pra isso. */
.pagamento-abas.pagamento-abas--grupo { display: none; }
.pagamento-abas.pagamento-abas--grupo.is-ativo { display: flex; }

.pagamento-aba {
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 700;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  opacity: 0.5;
}

.pagamento-aba.is-ativo { opacity: 1; border-bottom: 3px solid #000; }

.pagamento-painel { display: none; flex-direction: column; gap: 14px; }
.pagamento-painel.is-ativo { display: flex; }

.pagamento-parcelas select {
  border: var(--linha);
  border-radius: var(--radius);
  padding: 9px 10px;
  font-family: inherit;
  font-size: 13px;
  width: 100%;
}

.pix-box, .boleto-box {
  border: var(--borda-checkout-pix-boleto, var(--linha-fina));
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.pix-box__qr {
  width: 140px;
  height: 140px;
  border: var(--linha);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  opacity: 0.5;
}

.checkout-finalizar {
  border: var(--borda-primaria, var(--linha));
  border-radius: var(--radius);
  padding: 13px;
  font-weight: 700;
  font-size: 15px;
  background: var(--cor-primaria, #000);
  color: var(--cor-primaria-contraste, #fff);
  width: 100%;
  transition: background 0.15s, color 0.15s;
}
.checkout-finalizar:hover { background: var(--cor-primaria-contraste, #fff); color: var(--cor-primaria, #000); }

.resumo-pedido__itens {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 220px;
  overflow-y: auto;
  border-bottom: var(--linha-fina);
  padding-bottom: 12px;
}

.resumo-pedido__item {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
}
.resumo-pedido__item span:first-child { opacity: 0.7; }
.resumo-pedido__item-observacao { font-size: 11px; opacity: 0.6; margin: -4px 0 4px; font-style: italic; }

/* =====================================================================
   MINHA CONTA
===================================================================== */
.conta {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--gap);
  padding: var(--gap);
  align-items: start;
}

.conta-menu {
  border: var(--borda-conta-menu, var(--linha));
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.conta-menu__item {
  padding: 13px 16px;
  font-size: 14px;
  font-weight: 600;
  border-bottom: var(--linha-fina);
  text-align: left;
  transition: background 0.15s, color 0.15s;
}
.conta-menu__item:last-child { border-bottom: none; }
.conta-menu__item:hover { background: var(--preenchimento-conta-menu-item-hover, #f5f5f5); }
.conta-menu__item.is-ativo { background: var(--cor-primaria, #000); color: var(--cor-primaria-contraste, #fff); }

.conta-painel {
  display: none;
  border: var(--borda-conta-painel, var(--linha));
  border-radius: var(--radius);
  padding: 20px;
  flex-direction: column;
  gap: 16px;
}
.conta-painel.is-ativo { display: flex; }

.conta-painel h1 { font-size: 18px; }

/* ---- Pedidos ---- */
.pedido-card {
  border: var(--borda-conta-pedido-card, var(--linha-fina));
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.pedido-card__info { display: flex; flex-direction: column; gap: 3px; }
.pedido-card__numero { font-size: 14px; font-weight: 700; }
.pedido-card__data { font-size: 12px; opacity: 0.6; }
.pedido-card__valor { font-size: 14px; font-weight: 700; }

.pedido-status {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border: var(--linha-fina);
  border-radius: 999px;
  padding: 4px 10px;
}
/* Preenchimento por status — cores do Bootstrap (RECEBIDO=dark,
  EM PRODUÇÃO=warning, PRODUZIDO=orange, LIBERADO=primary,
   ENTREGUE=success, CANCELADO=danger), texto branco/preto conforme
   contraste de cada cor (mesma regra de contrasteDaCor() em
   db/config-aparencia.php: luminância > 0.6 = preto, senão branco). */
.pedido-status--recebido    { background: #212529; color: #fff; border: none; }
.pedido-status--processando { background: #ffc107; color: #000; border: none; }
.pedido-status--produzido   { background: #0dcaf0; color: #000; border: none; }
.pedido-status--aguardando_retirada { background: #fd7e14; color: #000; border: none; }
.pedido-status--liberado    { background: #0d6efd; color: #fff; border: none; }
.pedido-status--em_rota     { background: #6610f2; color: #fff; border: none; }
.pedido-status--entregue    { background: #198754; color: #fff; border: none; }
.pedido-status--cancelado   { background: #dc3545; color: #fff; border: none; text-decoration: line-through; }

.pedido-card__acao {
  border: var(--linha);
  border-radius: var(--radius);
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 700;
}

/* ---- Endereços ---- */
.endereco-card {
  border: var(--borda-conta-endereco-card, var(--linha-fina));
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}
.endereco-card__tag {
  font-size: 11px;
  font-weight: 700;
  border: var(--linha-fina);
  border-radius: var(--radius);
  padding: 2px 8px;
  display: inline-block;
  margin-bottom: 6px;
}
.endereco-card__texto { font-size: 13px; line-height: 1.5; opacity: 0.85; }
.endereco-card__acoes { display: flex; gap: 8px; flex-shrink: 0; }
.endereco-card__acoes button { font-size: 12px; text-decoration: underline; opacity: 0.7; }
.endereco-card__acoes button:hover { opacity: 1; }

.btn-secundario {
  border: var(--borda-primaria, var(--linha));
  border-radius: var(--radius);
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 700;
  align-self: flex-start;
}
.btn-secundario:hover { background: var(--cor-primaria, #000); color: var(--cor-primaria-contraste, #fff); }

/* =====================================================================
   PÁGINAS DE AUTENTICAÇÃO (login / cadastro em página cheia)
===================================================================== */
.pagina-auth {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px var(--gap);
}

.auth-card {
  width: min(440px, 100%);
  border: var(--borda-conta-auth-card, var(--linha));
  border-radius: 12px;
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.auth-card__titulo { font-size: 22px; text-align: center; }
.auth-card__subtitulo { font-size: 13px; opacity: 0.6; text-align: center; margin-top: -10px; }

.auth-card__rodape { text-align: center; font-size: 13px; opacity: 0.7; }
.auth-card__rodape a { text-decoration: underline; opacity: 1; font-weight: 600; }

/* =====================================================================
   RESPONSIVO — PÁGINAS ADICIONAIS
===================================================================== */
@media (max-width: 900px) {
  .produto-detalhe { grid-template-columns: 1fr; }
  .carrinho-pagina { grid-template-columns: 1fr; }
  .checkout { grid-template-columns: 1fr; }
  .conta { grid-template-columns: 1fr; }
  .conta-menu { flex-direction: row; overflow-x: auto; }
  .conta-menu__item { border-bottom: none; border-right: var(--linha-fina); white-space: nowrap; }
}

@media (max-width: 720px) {
  .form-grid { grid-template-columns: 1fr; }
  .form-campo, .form-campo--metade, .form-campo--terco { grid-column: span 1; }
  .carrinho-linha { grid-template-columns: 70px 1fr; grid-template-areas: "thumb info" "qtd preco"; }
  .carrinho-linha__thumb { grid-area: thumb; width: 70px; }
  .carrinho-linha__info { grid-area: info; }
  .carrinho-linha__qtd { grid-area: qtd; }
  .carrinho-linha__preco { grid-area: preco; }
}

/* =====================================================================
   HOME — SEÇÕES POR CATEGORIA (carrossel de 4 itens + banner opcional)
===================================================================== */
.secoes-categorias {
  display: flex;
  flex-direction: column;
}

/* Cabeçalho de Departamento, um nível acima de .categoria-secao__titulo —
   só aparece quando há mais de 1 departamento com categorias (ver
   index.php). */
.secoes-categorias__departamento {
  padding: 28px var(--gap) 6px;
  font-size: 26px;
  font-weight: 700;
  border-top: var(--linha);
}
.secoes-categorias__departamento:first-child {
  border-top: none;
  padding-top: 8px;
}

.categoria-secao {
  padding: 22px var(--gap);
  border-bottom: var(--borda-categoria-secao, var(--linha));
}

.categoria-secao:last-child {
  border-bottom: none;
}

/* Variante usada quando a seção fica dentro de .main (que já tem padding
   lateral próprio) — ex.: subcategorias dentro de categoria.html */
.categoria-secao--aninhada {
  padding-left: 0;
  padding-right: 0;
}

.categoria-secao__cabecalho {
  padding: var(--bloco-categoria-secao-cabecalho-padding, 0);
  background: var(--bloco-categoria-secao-cabecalho-fundo, transparent);
  color: var(--bloco-categoria-secao-cabecalho-texto, inherit);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
}

.categoria-secao__titulo {
  font-size: 20px;
}

.categoria-secao__ver-tudo {
  font-size: 13px;
  font-weight: 600;
  opacity: 0.7;
  white-space: nowrap;
}
.categoria-secao__ver-tudo:hover { opacity: 1; text-decoration: underline; }

/* ---- Carrossel de produtos (4 por vez) ---- */
.categoria-carrossel {
  display: flex;
  align-items: center;
  gap: 10px;
}

.categoria-carrossel__seta {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border: var(--borda-seta-vitrine, var(--linha));
  border-radius: 50%;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s, opacity 0.15s;
  background: var(--cor-fundo-seta-vitrine, #000);
  color: var(--cor-fundo-seta-vitrine-contraste, #fff);
}
.categoria-carrossel__seta:hover:not(:disabled) {
  background: var(--cor-seta-vitrine, #5b5b5b);
  color: var(--cor-seta-vitrine-contraste, #fff);
}
.categoria-carrossel__seta:disabled { opacity: 0.25; cursor: not-allowed; }

.categoria-carrossel__viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  /* Aparência da loja > "Janela do carrossel de produtos": sem personalização valem estes padrões */
  background: var(--cor-janela-carrossel, transparent);
  border: var(--borda-janela-carrossel, #ebebeb 1px solid);
  padding: var(--padding-janela-carrossel, 20px);
  border-radius: var(--raio-janela-carrossel, 10px);
}

.categoria-carrossel__track {
  display: flex;
  gap: var(--gap);
  transition: transform 0.35s ease;
}

.categoria-carrossel__track > .produto-card {
  flex: 0 0 calc((100% - 3 * var(--gap)) / 4);
  min-width: 0;
}

/* ---- ÓRFÃO desde 2026-09-26: banner de categoria virou múltiplos banners
        (tab_mktplace_categoria_banners, ver db/categoria-banners.php),
        reaproveitando .banner/.banner__slide (o mesmo carrossel da home)
        em categoria.php — nunca mais gera .categoria-banner. Bloco mantido
        aqui só por precaução (nunca remover CSS solto), sem uso real. ---- */
.categoria-banner {
  margin-top: 18px;
  height: 200px;
  border: var(--borda-categoria-banner, var(--linha));
  border-radius: var(--radius);
  display: flex;
  align-items: stretch;
  overflow: hidden;
  background: #f7f7f7;
}

.categoria-banner__conteudo {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 24px 32px;
}

.categoria-banner__tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  opacity: 0.6;
}

.categoria-banner__conteudo h3 { font-size: 20px; }
.categoria-banner__conteudo p { font-size: 13px; opacity: 0.65; max-width: 340px; }

.categoria-banner__cta {
  align-self: flex-start;
  margin-top: 6px;
  border: var(--linha);
  border-radius: var(--radius);
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 700;
  transition: background 0.15s, color 0.15s;
}
.categoria-banner__cta:hover { background: var(--cor-primaria, #000); color: var(--cor-primaria-contraste, #fff); }

.categoria-banner__imagem {
  flex: 0 0 42%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  border-left: var(--linha-fina);
  overflow: hidden;
  background: #fff;
}

.categoria-banner__imagem-placeholder {
  opacity: 0.5;
}

/* ---- Estado "banner desativado" (apenas para deixar visível no wireframe
        que este bloco é opcional / controlado via painel admin) ---- */
.categoria-banner--desativado {
  height: auto;
  min-height: 80px;
  background: transparent;
  border: 2px dashed #000;
  opacity: 0.45;
  justify-content: center;
  text-align: center;
}
.categoria-banner--desativado .categoria-banner__conteudo { max-width: 100%; align-items: center; }

/* =====================================================================
   RESPONSIVO — CARROSSEL DE CATEGORIAS
===================================================================== */
@media (max-width: 1100px) {
  .categoria-carrossel__track > .produto-card {
    flex: 0 0 calc((100% - 2 * var(--gap)) / 3);
  }
}

@media (max-width: 900px) {
  .categoria-carrossel__track > .produto-card {
    flex: 0 0 calc((100% - 1 * var(--gap)) / 2);
  }
  .categoria-banner { flex-direction: column; align-items: stretch; height: auto; }
  .categoria-banner__conteudo { padding: 18px 20px; }
  .categoria-banner__imagem { flex: none; width: 100%; height: 140px; border-left: none; border-top: var(--linha-fina); }
}

@media (max-width: 480px) {
  .categoria-carrossel__track > .produto-card {
    /* flex: 0 0 100%; */
  }
  .categoria-carrossel__seta { width: 30px; height: 30px; font-size: 15px; }
}

/* =====================================================================
   PAINEL ADMINISTRATIVO — cadastro de produto
   (Área separada da loja: sem header/navbar/carrinho do site. Reaproveita
   os tokens --linha/--radius/--gap e componentes já existentes:
   .checkout-secao, .form-grid/.form-campo, .pagamento-abas, .tabs__tabela)
===================================================================== */
.admin-body {
  background: #fafafa;
  /* Rede de segurança contra overflow-x pontual em formulários grandes
     (ex.: admin-aparencia.php) — não corrige a causa (algum campo ainda
     recusando encolher), só evita a barra de rolagem horizontal da
     página inteira enquanto a causa exata não é achada. */
  overflow-x: hidden;
}

.acesso-equipe-pagina {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.acesso-equipe {
  width: min(100%, 880px);
}

.acesso-equipe__cabecalho {
  margin-bottom: 24px;
}

.acesso-equipe__cabecalho h1 {
  font-size: 28px;
}

.acesso-equipe__cabecalho p {
  margin-top: 6px;
  color: #666;
}

.acesso-equipe__opcoes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.acesso-equipe__link {
  min-height: 116px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 18px;
  border: var(--linha);
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
  background: #fff;
  transition: border-color .15s, background .15s;
}

.acesso-equipe__link:hover {
  border-color: var(--cor-primaria, #000);
  background: #f5f5f5;
}

.acesso-equipe__link:focus-visible {
  outline: 3px solid var(--cor-primaria, #000);
  outline-offset: 2px;
}

.acesso-equipe__nome {
  font-size: 18px;
  font-weight: 700;
}

.acesso-equipe__descricao {
  color: #666;
  font-size: 13px;
}

.acesso-equipe__voltar {
  margin-top: 20px;
  font-size: 13px;
}

.entregador-login__alternar {
  margin-top: 14px;
  font-size: 13px;
  text-align: center;
}

@media (max-width: 700px) {
  .acesso-equipe__opcoes {
    grid-template-columns: 1fr;
  }

  .acesso-equipe__link {
    min-height: 88px;
  }
}

.admin-shell {
  max-width: 1400px;
  margin: 0 auto;
  min-height: 100vh;
  border-left: var(--linha);
  border-right: var(--linha);
  background: #fff;
}

.admin-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px var(--gap);
  border-bottom: var(--linha);
}

.admin-topbar__logo {
  font-weight: bold;
  font-size: 18px;
  letter-spacing: 0.3px;
}

.admin-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0 var(--gap);
  border-bottom: var(--linha);
}

.admin-nav a {
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  opacity: 0.55;
}
.admin-nav a:hover { opacity: 1; }
.admin-nav a.is-atual {
  opacity: 1;
  border-bottom: 3px solid #000;
}

/* Menu agrupado (dropdown por grupo) — ver $navMenu/toggle em
   includes/admin-header.php. Cada grupo é um item do <nav class="admin-nav">
   (flex, herdado acima); o dropdown abre ancorado embaixo do rótulo. */
.admin-nav-grupo {
  position: relative;
}

.admin-nav-grupo__label {
  font: inherit;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0.55;
  cursor: pointer;
}
.admin-nav-grupo__label:hover { opacity: 1; }
.admin-nav-grupo.is-atual .admin-nav-grupo__label {
  opacity: 1;
  border-bottom: 3px solid #000;
}

.admin-nav-grupo__lista {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  min-width: 220px;
  background: #fff;
  border: var(--linha);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  padding: 6px;
}
.admin-nav-grupo__lista[hidden] { display: none !important; }

.admin-nav-grupo__lista a {
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--radius);
  opacity: 0.75;
}
.admin-nav-grupo__lista a:hover { opacity: 1; background: #f5f5f5; }
.admin-nav-grupo__lista a.is-atual { opacity: 1; background: #000; color: #fff; }

.admin-topbar__hamburguer {
  display: none;
  font: inherit;
  background: none;
  border: var(--linha-fina);
  border-radius: var(--radius);
  width: 34px;
  height: 34px;
  font-size: 16px;
  cursor: pointer;
}

/* Abaixo do breakpoint: o rótulo do topo vira hamburguer, e o <nav> inteiro
   passa a gaveta (drawer) fixa, aberta/fechada por .is-aberto (ver
   includes/admin-header.php). Cada grupo some de "dropdown ancorado" e vira
   bloco cheio, empilhado, com a lista sempre visível (sem position:absolute
   — senão ela ficaria flutuando fora da gaveta). */
@media (max-width: 900px) {
  .admin-topbar__hamburguer { display: block; }

  .admin-nav {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    top: 0; /* corrigido em JS (posicionarNavMobile()) pra ficar logo abaixo do topbar real */
    bottom: 0;
    z-index: 100;
    flex-direction: column;
    overflow-y: auto;
    background: #fff;
    padding: 8px;
    border-bottom: none;
  }
  .admin-nav.is-aberto { display: flex; }

  .admin-nav-grupo__label {
    display: block;
    width: 100%;
    text-align: left;
    padding: 14px 10px;
  }

  .admin-nav-grupo__lista {
    position: static;
    box-shadow: none;
    border: none;
    border-left: var(--linha-fina);
    border-radius: 0;
    margin: 0 0 4px 14px;
  }
}
/*
.admin-conteudo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--gap);
  padding: var(--gap);
  align-items: start;
}
*/

.admin-conteudo {
  display: grid;
 grid-template-columns: 1fr;   
  gap: var(--gap);
  padding: var(--gap);
  align-items: start;
}
.admin-conteudo > * { grid-column: 1 / -1; }


/* Página carregada dentro do modal-iframe de cadastro rápido (ver
   admin-nfe-recebida.php) — sem topo/nav (já ocultos no PHP), sem borda
   nem largura máxima do shell, pra ocupar o modal por inteiro. */
.admin-body--embutido .admin-shell {
  max-width: none;
  border-left: none;
  border-right: none;
}
.admin-body--embutido .admin-conteudo {
  padding: 16px;
}

/* ---- Botões de exemplo (carregar Maçã / Laranja Pera / Camisa Social) ---- */
.admin-exemplos {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  border: 2px dashed #000;
  border-radius: var(--radius);
  padding: 14px 16px;
  font-size: 13px;
}

.admin-exemplos__label {
  font-weight: 700;
  opacity: 0.7;
}

.admin-exemplo-btn {
  border: var(--linha);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 700;
  transition: background 0.15s, color 0.15s;
}
.admin-exemplo-btn:hover { background: #000; color: #fff; }

.admin-exemplo-btn--limpar {
  opacity: 0.5;
  border-style: dashed;
}

/* ---- Formulário ---- */
.admin-form {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  min-width: 0;
}

.admin-form__acoes {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* ---- Upload de imagens (só visual) ---- */
.admin-upload {
  border: 2px dashed #000;
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
  font-size: 13px;
  opacity: 0.6;
  cursor: pointer;
}
.admin-upload:hover { opacity: 1; background: #fafafa; }

.admin-upload-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.admin-upload-thumb {
  width: 64px;
  height: 64px;
  border: var(--linha-fina);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  opacity: 0.5;
}

/* ---- Abas "Forma de venda" (reaproveita visual das abas de pagamento) ---- */
.pagamento-abas, .admin-tabs {
  display: flex;
  gap: 8px;
  border-bottom: var(--linha);
  margin-bottom: 4px;
}
.pagamento-aba, .admin-tab {
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 700;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  opacity: 0.5;
}
.pagamento-aba.is-ativo, .admin-tab.is-ativo { opacity: 1; border-bottom: 3px solid #000; }
.pagamento-painel, .admin-tab-painel { display: none; flex-direction: column; gap: 14px; }
.pagamento-painel.is-ativo, .admin-tab-painel.is-ativo { display: flex; }

.admin-dica {
  font-size: 12px;
  opacity: 0.6;
  border-left: 3px solid #000;
  padding-left: 10px;
}

/* Central de configurações (admin-configuracoes.php) — grade de cards-link,
   um por tela de configuração. */
.admin-config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.admin-config-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  border: var(--linha-fina);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
}
.admin-config-card:hover { border-color: #000; }
.admin-config-card strong { font-size: 14px; }
.admin-config-card span { font-size: 12px; opacity: 0.6; }

/* ---- Editor de grupos de variação (Cor, Tamanho, Espécie...) ---- */
.admin-variacoes {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.admin-variacao-grupo {
  border: var(--linha-fina);
  border-radius: var(--radius);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-variacao-grupo__cabecalho {
  display: flex;
  gap: 8px;
  align-items: center;
}

.admin-variacao-grupo__nome {
  flex: 1;
  min-width: 0;
  border: var(--linha);
  border-radius: var(--radius);
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
}

.admin-variacao-remover {
  border: var(--linha-fina);
  border-radius: var(--radius);
  padding: 7px 10px;
  font-size: 12px;
  opacity: 0.6;
  white-space: nowrap;
}
.admin-variacao-remover:hover { opacity: 1; background: #000; color: #fff; }

.admin-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  border: var(--linha-fina);
  border-radius: 999px;
  padding: 4px 6px 4px 12px;
  font-size: 12px;
  font-weight: 600;
  background: #fafafa;
  cursor: default; /* sem isso, passar o mouse sobre o texto vira cursor de seleção (barra) */
}

.admin-chip__remover {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #000;
  color: #fff;
  font-size: 10px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.admin-chip-adicionar {
  display: flex;
  gap: 6px;
}
.admin-chip-adicionar input {
  border: var(--linha-fina);
  border-radius: var(--radius);
  padding: 6px 10px;
  font-size: 12px;
  font-family: inherit;
  width: 140px;
}
.admin-chip-adicionar button {
  border: var(--linha-fina);
  border-radius: var(--radius);
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
}
.admin-chip-adicionar button:hover { background: #000; color: #fff; }

.admin-add-grupo {
  align-self: flex-start;
  border: 2px dashed #000;
  border-radius: var(--radius);
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 700;
  opacity: 0.7;
}
.admin-add-grupo:hover { opacity: 1; background: #fafafa; }

/* ---- Busca de produtos já cadastrados / lista de ligados (modo agrupado) ---- */
.admin-busca-resultado,
.admin-grupo-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: var(--linha-fina);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-top: 6px;
  font-size: 13px;
}

.admin-busca-resultado__info,
.admin-grupo-item__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.admin-busca-resultado__nome,
.admin-grupo-item__nome {
  font-weight: 700;
}

.admin-busca-resultado__meta,
.admin-grupo-item__meta {
  font-size: 11px;
  opacity: 0.6;
}

.admin-busca-resultado__acao,
.admin-grupo-item__acao {
  border: var(--linha-fina);
  border-radius: var(--radius);
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}
.admin-busca-resultado__acao:hover { background: #000; color: #fff; }
.admin-grupo-item__acao:hover { background: #000; color: #fff; }

.admin-grupo-item--esgotado .admin-grupo-item__meta { color: #b00; }

/* ---- Tabela "estoque por combinação" (reaproveita .tabs__tabela) ---- */
.admin-estoque-vazio {
  grid-column: 1 / -1;
  font-size: 13px;
  opacity: 0.6;
}
.admin-estoque-tabela input[type="number"] {
  width: 90px;
  border: var(--linha-fina);
  border-radius: var(--radius);
  padding: 6px 8px;
  font-size: 13px;
  font-family: inherit;
}

.admin-estoque-tabela input.admin-estoque-sku {
  width: 100%;
  min-width: 140px;
  border: var(--linha-fina);
  border-radius: var(--radius);
  padding: 6px 8px;
  font-size: 12px;
  font-family: monospace;
}

/* ---- Pré-visualização (lateral, sticky) ---- */
.admin-preview {
  position: sticky;
  top: var(--gap);
  border: var(--linha);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.admin-preview h2 { font-size: 14px; }
.admin-preview__legenda {
  font-size: 11px;
  opacity: 0.55;
  text-align: center;
}
.admin-preview__card-wrap {
  width: 100%;
  max-width: 260px;
  margin: 0 auto;
}

/* =====================================================================
   RESPONSIVO — PAINEL ADMIN
===================================================================== */
@media (max-width: 900px) {
  .admin-conteudo { grid-template-columns: 1fr; }
  .admin-preview { position: static; }
}

/* Cabeçalho de grupo/atributo/volume de compra (admin-produto.php, blocos
   5 e 7): em tela estreita, os dois campos de texto/número lado a lado
   (nome+valor, nome+peso) empurravam o card pra fora da largura da tela,
   já que flex:1 sem min-width:0 não deixa o input encolher. Em telas
   estreitas cada campo passa a ocupar a linha inteira (empilha), e o
   botão "Remover" fica numa linha própria. */
@media (max-width: 480px) {
  .admin-variacao-grupo__cabecalho {
    flex-wrap: wrap;
  }
  .admin-variacao-grupo__nome {
    flex: 1 1 100%;
  }
}

/* =====================================================================
   ADMIN — LISTAGENS (produtos, pedidos, cupons)
===================================================================== */
.admin-lista-topo {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.admin-lista-busca {
  display: flex;
  gap: 8px;
  flex: 1;
  max-width: 340px;
}
.admin-lista-busca input {
  flex: 1;
  border: var(--linha);
  border-radius: var(--radius);
  padding: 9px 12px;
  font-size: 13px;
  font-family: inherit;
}

.admin-btn-novo {
  border: var(--linha);
  border-radius: var(--radius);
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 700;
  background: #000;
  color: #fff;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.admin-btn-novo:hover { background: #fff; color: #000; }

.admin-tabela-wrap {
  grid-column: 1 / -1;
  overflow-x: auto;
}

.admin-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.admin-tabela th, .admin-tabela td {
  border-bottom: var(--linha-fina);
  padding: 10px 12px;
  text-align: left;
  white-space: nowrap;
}
.admin-tabela th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  opacity: 0.55;
  border-bottom: var(--linha);
}
.admin-tabela tbody tr:hover { background: #fafafa; }

.admin-tabela-acao {
  border: var(--linha-fina);
  border-radius: var(--radius);
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 700;
  margin-right: 4px;
}
.admin-tabela-acao:hover { background: #000; color: #fff; }

/* Toggle simples ativo/inativo */
.admin-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}
.admin-toggle__trilho {
  width: 34px;
  height: 18px;
  border-radius: 999px;
  border: var(--linha-fina);
  position: relative;
  transition: background 0.15s;
}
.admin-toggle__bola {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #000;
  transition: left 0.15s;
}
.admin-toggle.is-ativo .admin-toggle__trilho { background: #000; }
.admin-toggle.is-ativo .admin-toggle__bola { left: 17px; background: #fff; }

/* Variante do toggle usada dentro de FORMULÁRIO — mesmo visual acima, mas
   com um <input type="checkbox"> de verdade por baixo (em vez de um <a>
   com ação imediata), pra continuar funcionando com submit de form. O
   estado visual é só CSS (:checked + combinador de irmão), sem JS
   nenhum — ver padrão de marcação em admin-vitrine.php/admin-cupons.php.
   O checkbox fica visualmente escondido mas continua acessível via
   teclado/leitor de tela (mesma técnica de ".sr-only"). */
.admin-toggle__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.admin-toggle__input:checked ~ .admin-toggle__trilho { background: #000; }
.admin-toggle__input:checked ~ .admin-toggle__trilho .admin-toggle__bola { left: 17px; background: #fff; }
.admin-toggle__input:focus-visible ~ .admin-toggle__trilho { outline: 2px solid #000; outline-offset: 2px; }

/* Mesmo peso/tamanho de texto de .checkbox-linha (o padrão que esta
   variante substitui em formulário) — .admin-toggle sozinho é bold/menor,
   pensado pro link de listagem, não pra rótulo de campo de formulário. */
.admin-toggle--campo {
  font-size: 13px;
  font-weight: 400;
  gap: 8px;
  cursor: pointer;
}
.admin-toggle--campo .admin-toggle__trilho { flex-shrink: 0; }
.admin-toggle--sep { margin-top: 16px; }

/* Toggle "Dicas" no topo do painel (includes/admin-header.php): no centro, embaixo do breadcrumb; a escolha fica no navegador. */
.admin-topbar__centro { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.admin-topbar__usuario { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.admin-topbar__usuario-linha { display: flex; align-items: center; gap: 10px; }
.admin-topbar__dicas { font-size: 12px; }
.admin-topbar__dicas .admin-toggle__trilho { width: 28px; height: 16px; }
.admin-topbar__dicas .admin-toggle__bola { width: 12px; height: 12px; }
.admin-topbar__dicas .admin-toggle__input:checked ~ .admin-toggle__trilho .admin-toggle__bola { left: 13px; }
/* Dicas ocultas (classe posta no <html> pelo script do <head> do painel): só no painel, nunca na loja nem no entregador. */
html.admin-sem-dicas body.admin-body .admin-dica { display: none; }

/* Telas de configuração em bloco único (ex.: admin-pedido-sku-config.php) */
.checkout-secao--larga { grid-column: 1 / -1; }
.admin-dica--colada { margin-top: 6px; }
.admin-form-topo { margin-top: 14px; }
.admin-form-topo--curto { margin-top: 10px; }
.admin-form__acoes--topo { margin-top: 20px; }
.checkout-finalizar--auto { width: auto; padding: 12px 28px; }
/* Campos da impressão do pedido (admin-pedido-imprimir-config.php) */
.admin-dica--erro { color: #b02a2a; margin-top: 10px; }
.imp-campos { margin-top: 14px; }
.imp-campos__linha { width: 70px; }
.imp-campos__grupo th { padding-top: 18px; opacity: 1; }
.imp-campos__exemplo { margin-left: 6px; font-size: 12px; opacity: .6; }
.imp-campos__restaurar { margin-top: 16px; }
.imp-modelos { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.imp-modelos__opcao { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.5; }
.imp-modelos__opcao input { margin-top: 4px; }
/* Recibo em dois blocos (admin-pedido-imprimir-blocos.php) */
.imp-blocos__texto { width: 100%; font-family: monospace; font-size: 13px; line-height: 1.5; }
.imp-blocos__titulo-lista { margin-top: 18px; font-weight: 700; }
.imp-blocos__variaveis, .imp-blocos__ligados { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.imp-blocos__ligado { display: flex; align-items: center; gap: 6px; margin-right: 14px; font-size: 13px; }
.campo-maiusculo { text-transform: uppercase; }
.admin-sku-bloco { max-width: 640px; padding:15px }
.admin-sku-campo { max-width: 240px; }
.admin-sku-campo--sep { margin-top: 16px; }
.admin-sku-rotulo { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.admin-sku-titulo { margin-top: 26px; font-size: 15px; }
.admin-lista-recuo { margin: 6px 0 0 18px; }
.admin-acoes-lote { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0; }
.admin-acoes-lote[hidden] { display: none; }
/* Pendência de revisão de produto importado do Mobne com regras liberadas (lista de produtos) */
.admin-pendencia-import { display: inline-block; vertical-align: middle; margin-left: 4px; line-height: 0; cursor: pointer; }
.admin-pendencia-import svg { width: 16px; height: 16px; fill: #facc15; stroke: #a16207; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
/* Lista de produtos: chips de situação e miniatura da imagem principal */
.admin-chips-situacao { margin: 4px 0 14px; }
.admin-miniatura { display: block; width: 44px; height: 44px; object-fit: cover; border-radius: 6px; background: #eee; }
.admin-miniatura--vazia { display: flex; align-items: center; justify-content: center; font-size: 12px; color: #999; }
/* Configuração dos e-mails do pedido (admin-email-pedidos-config.php): etapas, blocos por mensagem e campos */
.ep-passos { display: flex; gap: 6px; flex-wrap: wrap; list-style: none; margin: 12px 0 0; padding: 0; }
.ep-passos li { border: var(--linha-fina); border-radius: var(--radius); padding: 7px 12px; font-size: 13px; font-weight: 600; cursor: pointer; user-select: none; opacity: .6; }
.ep-passos li.is-atual { background: #000; color: #fff; opacity: 1; }
.checkout-secao[data-ep-etapa][hidden] { display: none; }
.ep-acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ep-campo { max-width: 640px; width: 100%; }
.ep-campo--curto { max-width: 380px; }
.ep-bloco { border: var(--linha-fina); border-radius: var(--radius); margin: 10px 0; max-width: 760px; }
.ep-bloco__titulo { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; cursor: pointer; font-weight: 600; }
.ep-bloco__estado { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: #eee; color: #666; }
.ep-bloco__estado.is-ligado { background: #d9f2e1; color: #1a7f37; }
.ep-bloco__corpo { padding: 4px 14px 14px; border-top: var(--linha-fina); }
.ep-variaveis { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ep-aviso-pendente { color: #b54708; }/* Escolha de itens da assinatura por link, sem login (assinatura-escolher.php) */
.asl-cesta { padding: 0 20px; display: flex; flex-direction: column; gap: 16px; }
.asl-acoes { padding: 20px; }
.asl-form-telefone { max-width: 380px; padding: 0 20px; }
.asl-aviso--erro { color: #b42318; font-weight: 600; }
.admin-assinatura-link-linha { font-size: 14px; line-height: 1.6; }
.admin-assinatura-link-url { width: 100%; max-width: 640px; }
/* Log de e-mails ao cliente na tela do pedido (db/email-pedidos.php) */
.admin-email-pedido-linha { font-size: 14px; line-height: 1.6; }
.admin-email-pedido-reenviar { display: inline-block; margin-left: 8px; }
/* Paginação das listagens do painel (db/paginacao-admin.php) */
.admin-paginacao { justify-content: center; margin: 12px 0 24px; }
.admin-paginacao-info { text-align: center; margin-top: 12px; }
.admin-paginacao__reticencias { cursor: default; }
.admin-resultado { font-weight: 700; }
.admin-resultado--ok { color: #1a7f37; }
.admin-resultado--erro { color: #b42318; }
.checkout-finalizar--link { display: inline-block; text-decoration: none; }

.admin-select-status {
  border: var(--linha-fina);
  border-radius: var(--radius);
  padding: 6px 8px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 700;
}

.admin-filtro-status {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.admin-filtro-status button,
.admin-filtro-status a {
  border: var(--linha-fina);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  opacity: 0.6;
  text-decoration: none;
  color: inherit;
}
.admin-filtro-status button.is-ativo,
.admin-filtro-status a.is-ativo {
  opacity: 1;
  background: #000;
  color: #fff;
}

/* Chip estático de status — mesmo visual de pílula de .admin-filtro-status,
   só que informativo (não é botão/link), usado onde o status não deve ser
   editável ali (ex.: lista de pedidos — status só muda no detalhe). Cor
   varia por status (ver variantes abaixo) — verde/vermelho reaproveitam os
   mesmos tons já usados em admin-estoque-historico.php pra entrada/saída,
   as demais seguem a mesma progressão neutro→azul→roxo→laranja. */
.admin-status-chip {
  display: inline-block;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  background: #000;
  color: #fff;
}
.admin-status-chip--recebido    { background: #6b7280; }
.admin-status-chip--processando { background: #1d4ed8; }
.admin-status-chip--produzido   { background: #7c3aed; }
.admin-status-chip--aguardando_retirada { background: #0f766e; }
.admin-status-chip--liberado    { background: #b45309; }
.admin-status-chip--em_rota     { background: #4338ca; }
.admin-status-chip--entregue    { background: #1a7f37; }
.admin-status-chip--cancelado   { background: #b42318; }

/* ---- Cards de item da separação (admin-separacao-preview.php e
   admin-separacao-pedido.php) — mesmo espírito de .admin-grupo-item
   (linha com thumb + info), mas em grade, já que aqui cada item é
   clicável e abre um modal, não uma ação inline. ---- */
.admin-separacao-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.admin-separacao-grid[hidden] { display: none !important; }

.admin-separacao-item {
  display: flex;
  align-items: center;
  gap: 10px;
  border: var(--linha-fina);
  border-radius: var(--radius);
  padding: 10px 12px;
  cursor: pointer;
}
.admin-separacao-item:hover { background: #fafafa; }
.admin-separacao-item.is-desativado {
  opacity: 0.55;
  cursor: default;
}
.admin-separacao-item.is-desativado:hover { background: none; }

.admin-separacao-item__thumb {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: var(--radius);
  object-fit: cover;
  background: #f0f0f0;
}
.admin-separacao-item__thumb--vazia {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  opacity: 0.4;
  border: var(--linha-fina);
}

.admin-separacao-item__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.admin-separacao-item__nome {
  font-size: 13px;
  font-weight: 700;
}

.admin-separacao-item__qtd {
  font-size: 12px;
  opacity: 0.65;
}
.admin-separacao-item__qtd--separado { font-weight: 700; opacity: 1; }

.admin-separacao-item__motivo {
  font-size: 12px;
  font-weight: 700;
  color: #b00;
}

.admin-separacao-item__observacao {
  font-size: 12px;
  font-weight: 700;
}

.admin-separacao-item__substituir {
  align-self: flex-start;
  margin-top: 2px;
  font-size: 12px;
  text-decoration: underline;
  opacity: 0.7;
}
.admin-separacao-item__substituir:hover { opacity: 1; }

.admin-separacao-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 10px 0;
}
.admin-separacao-stepper[hidden] { display: none !important; }
.admin-separacao-stepper span {
  min-width: 40px;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
}

.admin-separacao-btn-furo {
  border: var(--linha-fina);
  border-color: #b00;
  border-radius: var(--radius);
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 700;
  color: #b00;
}
.admin-separacao-btn-furo:hover { background: #b00; color: #fff; }

.admin-estatisticas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: var(--gap);
}
.admin-estatistica {
  border: var(--linha-fina);
  border-radius: var(--radius);
  padding: 14px;
}
.admin-estatistica__valor { font-size: 24px; font-weight: bold; }
.admin-estatistica__label { font-size: 12px; opacity: 0.6; }

/* =====================================================================
   DASHBOARD DO PAINEL (admin-dashboard.php) — mobile-first, 100%
   responsivo: grade que vira coluna única no celular, sem rolagem
   horizontal, alvos de toque >= 44px. Plano: docs/dev/plano-dashboard.md
===================================================================== */
.dash { min-width: 0; }
.dash * { min-width: 0; overflow-wrap: anywhere; }
.dash-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.dash-titulo { margin: 0; font-size: 22px; }
.dash-sub { margin: 2px 0 0; }
.dash-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.dash-botao {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  text-decoration: none;
}
.dash-bloco { margin-top: 20px; }
.dash-bloco__titulo { margin: 0 0 10px; font-size: 16px; }
.dash-nota { margin-top: 8px; }
.dash-ok {
  margin: 0;
  padding: 14px;
  border: var(--linha-fina);
  border-radius: var(--radius);
  font-size: 14px;
}

.dash-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--gap);
}
.dash-cartao {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  border: var(--linha-fina);
  border-radius: var(--radius);
  background: #fff;
}
.dash-cartao__rotulo { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; opacity: .7; }
.dash-cartao__valor { font-size: 26px; line-height: 1.15; }
.dash-cartao__comp { font-size: 12px; opacity: .85; }
.dash-var--sobe { color: #1a7f37; }
.dash-var--desce { color: #b02a2a; }
.dash-var--neutro { color: #555; }

.dash-funil {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}
.dash-funil__etapa {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  min-height: 64px;
  padding: 10px 12px;
  border: var(--linha-fina);
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
  background: #fff;
}
.dash-funil__etapa strong { font-size: 22px; line-height: 1.1; }
.dash-funil__etapa span { font-size: 12px; }
.dash-funil__etapa--vazia { opacity: .5; }
.dash-funil__etapa:hover { background: #f5f5f5; }

.dash-atencao { display: flex; flex-wrap: wrap; gap: 10px; }
.dash-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 10px 12px;
  border: var(--linha-fina);
  border-left-width: 6px;
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
  background: #fff;
  width: 49.5%;
}
.dash-item:hover { background: #f5f5f5; }
.dash-item--alta { border-left-color: #b02a2a; }
.dash-item--media { border-left-color: #b45309; }
.dash-item--baixa { border-left-color: #888; }
.dash-item__qtd {
  min-width: 36px;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
}
.dash-item__texto { display: flex; flex-direction: column; gap: 2px; }
.dash-item__texto strong { font-size: 14px; }
.dash-item__texto small { font-size: 12px; opacity: .8; }
.dash-item__selo {
  font-size: 11px;
  padding: 2px 8px;
  border: var(--linha-fina);
  border-radius: 999px;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .dash-titulo { font-size: 20px; }
  .dash-acoes { width: 100%; }
  .dash-acoes .dash-botao { flex: 1 1 0; }
  .dash-cartao__valor { font-size: 24px; }
  .dash-item { grid-template-columns: auto minmax(0, 1fr); }
  .dash-item__selo { grid-column: 2; justify-self: start; }
}

/* Aviso fixo no rodapé das telas que ainda NÃO são responsivas: a página
   define $telaNaoResponsiva = true antes de incluir includes/admin-footer.php.
   Só aparece em tela pequena. */
.admin-aviso-nao-responsivo { display: none; }
@media (max-width: 900px) {
  .admin-aviso-nao-responsivo {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    padding: 10px 14px;
    background: #fff8e6;
    border-top: 2px solid #b45309;
    font-size: 12px;
    line-height: 1.4;
  }
}
/* ---- Dashboard — Etapa 2 (abas Vendas / Estoque / Entrega): abas, período,
   gráficos (Chart.js em vendor/chartjs) e listas com barras. Mobile-first. ---- */
.dash-abas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 10px;
  border-bottom: var(--linha-fina);
  padding-bottom: 8px;
}
.dash-aba {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: var(--linha-fina);
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
  background: #fff;
}
.dash-aba:hover { background: #f5f5f5; }
.dash-aba.is-ativa { background: #000; color: #fff; }
.dash-periodos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.dash-periodo {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 12px;
  border: var(--linha-fina);
  border-radius: 999px;
  font-size: 13px;
  color: inherit;
  text-decoration: none;
  background: #fff;
}
.dash-periodo:hover { background: #f5f5f5; }
.dash-periodo.is-ativo { background: #000; color: #fff; }

.dash-duas-colunas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--gap);
  margin-top: 20px;
}
.dash-duas-colunas > .dash-bloco { margin-top: 0; }
.dash-grafico {
  position: relative;
  width: 100%;
  height: 260px;
  padding: 8px;
  border: var(--linha-fina);
  border-radius: var(--radius);
  background: #fff;
}
.dash-grafico--alto { height: 320px; }
.dash-vazio {
  margin: 0;
  padding: 14px;
  border: 1px dashed #999;
  border-radius: var(--radius);
  font-size: 13px;
  opacity: .85;
}

.dash-lista { display: flex; flex-direction: column; border: var(--linha-fina); border-radius: var(--radius); background: #fff; }
.dash-lista__linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid #e5e5e5;
  font-size: 13px;
  color: inherit;
  text-decoration: none;
}
.dash-lista__linha:last-child { border-bottom: none; }
a.dash-lista__linha:hover { background: #f5f5f5; }
.dash-lista__nome { font-weight: 600; }
.dash-lista__valor { text-align: right; white-space: nowrap; }
.dash-lista__sub { grid-column: 1 / -1; font-size: 12px; opacity: .8; }
.dash-barra { grid-column: 1 / -1; height: 6px; background: #ececec; border-radius: 3px; overflow: hidden; }
.dash-barra > span { display: block; height: 100%; background: #000; }
.dash-lista-nota { margin: 6px 0 0; }

@media (max-width: 600px) {
  .dash-duas-colunas { grid-template-columns: 1fr; }
  .dash-grafico { height: 230px; }
  .dash-aba { flex: 1 1 calc(50% - 6px); justify-content: center; }
}
/* ---- Dashboard: aba Ao vivo (Etapa 3) ---- */
.dash-bloco__cabecalho { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.dash-bloco__cabecalho .dash-bloco__titulo { margin: 0; }
.dash-mapa { width: 100%; height: 420px; border: var(--linha-fina); border-radius: var(--radius); overflow: hidden; background: #ececec; }
.dash-rotas { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--gap); }
.dash-rota { display: flex; flex-direction: column; gap: 6px; padding: 14px; border: var(--linha-fina); border-radius: var(--radius); background: #fff; border-left: 4px solid #aab2bd; }
.dash-rota--ok { border-left-color: #2f9e44; }
.dash-rota--sem_sinal, .dash-rota--nunca { border-left-color: #d9480f; }
.dash-rota__topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dash-rota__nome { margin: 0; font-size: 16px; }
.dash-rota__sub { margin: 0; }
.dash-selo { padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: #ececec; color: #333; white-space: nowrap; }
.dash-selo--ok { background: #d3f9d8; color: #1b5e2b; }
.dash-selo--sem_sinal, .dash-selo--nunca { background: #ffe3d1; color: #8a3200; }
.dash-paradas { list-style: none; margin: 4px 0 8px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.dash-paradas__item { display: flex; flex-direction: column; padding: 6px 8px; border-radius: 6px; background: #f6f6f6; font-size: 13px; overflow-wrap: anywhere; }
.dash-paradas__item--proxima { background: #fff1e6; border: 1px solid #d9480f; }
.dash-paradas__item--entregue { opacity: .6; }
.dash-paradas__item--cancelada { opacity: .5; text-decoration: line-through; }
.dash-paradas__extra { opacity: .85; }
.dash-marcador-entregador { width: 22px; height: 22px; border-radius: 50%; background: #1971c2; border: 3px solid #fff; box-shadow: 0 0 0 2px #1971c2, 0 2px 6px rgba(0,0,0,.4); }
.dash-marcador-entregador--sem-sinal { background: #868e96; box-shadow: 0 0 0 2px #868e96, 0 2px 6px rgba(0,0,0,.4); }
@media (max-width: 600px) {
  .dash-mapa { height: 320px; }
}
/* ---- Dashboard: aba Saúde (Etapa 3) ---- */
.dash-saude-resumo { margin: 16px 0 0; padding: 14px; border-radius: var(--radius); border: var(--linha-fina); background: #fff; font-weight: 600; display: flex; flex-direction: column; gap: 2px; border-left: 4px solid #2f9e44; }
.dash-saude-resumo small { font-weight: 400; opacity: .8; }
.dash-saude-resumo--aviso { border-left-color: #f08c00; }
.dash-saude-resumo--erro { border-left-color: #c92a2a; }
.dash-saude { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--gap); }
.dash-saude__item { display: flex; flex-direction: column; gap: 6px; padding: 14px; border: var(--linha-fina); border-radius: var(--radius); background: #fff; border-left: 4px solid #aab2bd; }
.dash-saude__item--ok { border-left-color: #2f9e44; }
.dash-saude__item--aviso { border-left-color: #f08c00; }
.dash-saude__item--erro { border-left-color: #c92a2a; }
.dash-saude__topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dash-saude__detalhe { margin: 0; font-size: 13px; overflow-wrap: anywhere; }
.dash-saude__selo--ok { background: #d3f9d8; color: #1b5e2b; }
.dash-saude__selo--aviso { background: #fff3bf; color: #7a5200; }
.dash-saude__selo--erro { background: #ffe0e0; color: #8a1c1c; }
.dash-saude__teste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dash-saude__resultado--ok { color: #1b5e2b; }
.dash-saude__resultado--erro { color: #8a1c1c; }
/* ---- Dashboard: Etapa 4 (metas) ---- */
.dash-meta { border-left: 4px solid #aab2bd; }
.dash-meta--batida, .dash-meta--no_ritmo { border-left-color: #2f9e44; }
.dash-meta--atencao { border-left-color: #f08c00; }
.dash-meta--atrasada { border-left-color: #c92a2a; }
.dash-meta .dash-cartao__valor small { font-size: 14px; font-weight: 400; opacity: .75; }
.dash-anomalia--queda { border-left-color: #c92a2a; }
.dash-anomalia--alta { border-left-color: #1971c2; }
.dash-anomalia--normal { border-left-color: #2f9e44; }
.dash-anomalia--sem_base { border-left-color: #aab2bd; }
/* ---- Dashboard: modo telão ---- */
.telao { margin: 0; min-height: 100vh; background: #0f1419; color: #f1f3f5; font-family: inherit; display: flex; flex-direction: column; }
.telao__topo { display: flex; align-items: center; gap: 16px; padding: 16px 24px; flex-wrap: wrap; }
.telao__titulo { margin: 0; font-size: 28px; flex: 1 1 auto; }
.telao__relogio { font-size: 40px; font-weight: 700; font-variant-numeric: tabular-nums; }
.telao__acoes { display: flex; gap: 8px; }
.telao__botao { min-height: 44px; display: inline-flex; align-items: center; padding: 0 16px; border: 1px solid #495057; border-radius: 8px; background: transparent; color: #f1f3f5; font-size: 14px; text-decoration: none; cursor: pointer; }
.telao__grade { flex: 1 1 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; padding: 0 24px 16px; align-content: start; }
.telao__cartao { background: #1a2129; border: 1px solid #2b333c; border-radius: 12px; padding: 18px 22px; display: flex; flex-direction: column; gap: 6px; }
.telao__cartao--larga { grid-column: 1 / -1; }
.telao__cartao h2 { margin: 0; font-size: 16px; text-transform: uppercase; letter-spacing: .06em; color: #adb5bd; font-weight: 600; }
.telao__cartao p { margin: 0; font-size: 16px; color: #ced4da; }
.telao__valor { font-size: clamp(40px, 6vw, 84px); line-height: 1.05; font-variant-numeric: tabular-nums; }
.telao__ok { font-size: 28px !important; color: #69db7c !important; }
.telao__funil { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px; }
.telao__etapa { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 10px; background: #232c36; }
.telao__etapa strong { font-size: 40px; line-height: 1.1; }
.telao__etapa span { font-size: 14px; color: #ced4da; }
.telao__etapa--vazia { opacity: .4; }
.telao__meta { display: flex; flex-direction: column; gap: 6px; font-size: 20px; margin-top: 6px; }
.telao__barra { display: block; height: 14px; border-radius: 7px; background: #2b333c; overflow: hidden; }
.telao__barra > span { display: block; height: 100%; background: #adb5bd; }
.telao__meta--batida .telao__barra > span, .telao__meta--no_ritmo .telao__barra > span { background: #51cf66; }
.telao__meta--atencao .telao__barra > span { background: #ffa94d; }
.telao__meta--atrasada .telao__barra > span { background: #ff6b6b; }
.telao__atencao { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 8px; }
.telao__item { font-size: 20px; padding: 10px 14px; border-radius: 8px; background: #232c36; border-left: 6px solid #868e96; }
.telao__item b { font-size: 26px; margin-right: 6px; }
.telao__item--alta { border-left-color: #ff6b6b; }
.telao__item--media { border-left-color: #ffa94d; }
.telao__rodape { padding: 8px 24px 14px; font-size: 13px; color: #868e96; }

/* Selo "Leve X, pague Y" sobre a imagem do card (htmlSeloLevePagueImagem(),
   includes/produto-card.php). Posição configurável em admin-vitrine.php:
   os 4 cantos (mesmos do botão de favorito) + topo e base CENTRALIZADOS.
   Sempre visível (diferente do selo de desconto, que depende de
   data-selo-posicao); cores do selo de desconto (--cor-selo). */
.produto-card__badge-imagem--leve-pague {
  display: inline-block;
  background: var(--cor-selo, #000);
  color: var(--cor-selo-contraste, #fff);
  border: var(--borda-selo, var(--linha-fina));
  white-space: nowrap;
  max-width: calc(100% - 16px);
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.produto-card__badge-imagem--pos-topo-esquerda { top: 8px; bottom: auto; left: 8px; right: auto; }
.produto-card__badge-imagem--pos-topo-direita  { top: 8px; bottom: auto; left: auto; right: 8px; }
.produto-card__badge-imagem--pos-base-esquerda { top: auto; bottom: 8px; left: 8px; right: auto; }
.produto-card__badge-imagem--pos-base-direita  { top: auto; bottom: 8px; left: auto; right: 8px; }
.produto-card__badge-imagem--pos-topo-centro   { top: 8px; bottom: auto; left: 50%; right: auto; transform: translateX(-50%); }
.produto-card__badge-imagem--pos-base-centro   { top: auto; bottom: 8px; left: 50%; right: auto; transform: translateX(-50%); }

/* Ícone "?" ao lado de um valor do resumo do pedido (taxa de serviços): mensagem em balão
   ao passar o mouse, focar (teclado) ou tocar. Só estas classes novas; nada existente muda. */
.resumo-ajuda { position: relative; display: inline-flex; vertical-align: middle; margin-left: 6px; }
.resumo-ajuda__btn { display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; opacity: .65; line-height: 1; }
.resumo-ajuda__btn:hover, .resumo-ajuda__btn:focus-visible { opacity: 1; }
.resumo-ajuda__msg { display: none; position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); width: 240px; max-width: 70vw; padding: 8px 10px; background: #fff; color: #000; border: 1px solid #000; border-radius: var(--radius, 4px); font-size: 12px; font-weight: 400; line-height: 1.4; text-align: left; z-index: 20; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.resumo-ajuda:hover .resumo-ajuda__msg, .resumo-ajuda:focus-within .resumo-ajuda__msg, .resumo-ajuda.is-aberto .resumo-ajuda__msg { display: block; }

/* Chip "Adicione mais N e ganhe..." (promoção Leve mais, pague menos) dentro do produto no carrinho — carrinho.php e gaveta.
   Segue a cor principal da loja; cores/formato personalizáveis em admin-vitrine.php (variáveis --lp-dica-* em includes/header.php). */
.lp-dica-slot:empty { display: none; }
.lp-dica-slot { display: flex; flex-wrap: wrap; gap: 6px; }
.lp-dica-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  max-width: 100%;
  padding: 4px 11px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  background: var(--lp-dica-fundo, var(--cor-primaria, #000));
  color: var(--lp-dica-texto, var(--cor-primaria-contraste, #fff));
  border: 1px solid var(--lp-dica-borda, var(--lp-dica-fundo, var(--cor-primaria, #000)));
  border-radius: var(--lp-dica-raio, 999px);
}
.lp-dica-chip__icone { display: inline-flex; flex: 0 0 auto; }
.lp-dica-chip .icone-svg { width: 14px; height: 14px; stroke: currentColor; fill: none; }

/* =====================================================================
   FUNDO DOS BOTÕES COM CONTORNO — nenhum botão com contorno fica sem fundo.
   Cada família tem uma cor própria em Aparência da loja > Preenchimentos
   avulsos > "Botões com contorno" (variáveis --preenchimento-botao-*, emitidas
   pelos cabeçalhos da loja, do painel e do entregador). Sem personalizar, o
   fundo é o "Fundo geral da página" (--preenchimento-pagina-fundo) e, sem
   ele, a cor de fundo do sistema (Canvas): nenhuma cor fixa aqui. Nos botões
   que ficam sobre áreas escuras o texto acompanha (…-contraste, senão o
   contraste do fundo da página, senão CanvasText). Os estados :hover e
   .is-ativo/.is-ativa têm mais especificidade e continuam valendo.
   Regra para botão novo com contorno: adicionar aqui + item em
   includes/preenchimentos.php (tests/botoes-contorno-test.php confere).
===================================================================== */
.admin-tabela-acao { background: var(--preenchimento-botao-tabela-acao, var(--preenchimento-pagina-fundo, Canvas)); }
.btn-secundario { background: var(--preenchimento-botao-secundario, var(--preenchimento-pagina-fundo, Canvas)); }
.admin-filtro-status button, .admin-filtro-status a { background: var(--preenchimento-botao-filtro-chip, var(--preenchimento-pagina-fundo, Canvas)); }
.tabs__botao, .pagamento-aba, .admin-tab, .ap-passos li { background: var(--preenchimento-botao-aba, var(--preenchimento-pagina-fundo, Canvas)); }
.variacao__opcao { background: var(--preenchimento-botao-variacao-opcao, var(--preenchimento-pagina-fundo, Canvas)); }
.resumo-pedido__cupom button { background: var(--preenchimento-botao-cupom-aplicar, var(--preenchimento-pagina-fundo, Canvas)); }
.topo__acao:not(.topo__acao--conta):not(.topo__acao--carrinho) {
  background: var(--preenchimento-botao-topo-acao, var(--preenchimento-pagina-fundo, Canvas));
  color: var(--preenchimento-botao-topo-acao-contraste, var(--preenchimento-pagina-fundo-contraste, CanvasText));
}
.login-modal__fechar {
  background: var(--preenchimento-botao-fechar-login, var(--preenchimento-pagina-fundo, Canvas));
  color: var(--preenchimento-botao-fechar-login-contraste, var(--preenchimento-pagina-fundo-contraste, CanvasText));
}
.carrinho-drawer__fechar {
  background: var(--preenchimento-botao-fechar-carrinho, var(--preenchimento-pagina-fundo, Canvas));
  color: var(--preenchimento-botao-fechar-carrinho-contraste, var(--preenchimento-pagina-fundo-contraste, CanvasText));
}
.espiadinha-drawer__fechar {
  background: var(--preenchimento-botao-fechar-espiadinha, var(--preenchimento-pagina-fundo, Canvas));
  color: var(--preenchimento-botao-fechar-espiadinha-contraste, var(--preenchimento-pagina-fundo-contraste, CanvasText));
}
.btn-espiadinha { background: var(--preenchimento-botao-espiadinha, var(--preenchimento-pagina-fundo, Canvas)); }
.banner__cta {
  background: var(--preenchimento-botao-banner-cta, var(--preenchimento-pagina-fundo, Canvas));
  color: var(--preenchimento-botao-banner-cta-contraste, var(--preenchimento-pagina-fundo-contraste, CanvasText));
}
.banner-hero__cta {
  background: var(--preenchimento-botao-banner-hero-cta, var(--preenchimento-pagina-fundo, Canvas));
  color: var(--preenchimento-botao-banner-hero-cta-contraste, var(--preenchimento-pagina-fundo-contraste, CanvasText));
}
.admin-topbar__hamburguer { background: var(--preenchimento-botao-admin-hamburguer, var(--preenchimento-pagina-fundo, Canvas)); }
.admin-add-grupo { background: var(--preenchimento-botao-admin-adicionar-grupo, var(--preenchimento-pagina-fundo, Canvas)); }
.admin-exemplo-btn { background: var(--preenchimento-botao-admin-exemplo, var(--preenchimento-pagina-fundo, Canvas)); }
.admin-variacao-remover { background: var(--preenchimento-botao-admin-variacao-remover, var(--preenchimento-pagina-fundo, Canvas)); }
.telao__botao {
  background: var(--preenchimento-botao-telao, var(--preenchimento-pagina-fundo, Canvas));
  color: var(--preenchimento-botao-telao-contraste, var(--preenchimento-pagina-fundo-contraste, CanvasText));
}
.admin-chip-adicionar button { background: var(--preenchimento-botao-admin-chip-adicionar, var(--preenchimento-pagina-fundo, Canvas)); }

/* =========================================================
   Celular (até 640px): textos e alvos de toque maiores.
   Só vale em tela estreita — desktop e tablet ficam como estavam.
   ========================================================= */
@media (max-width: 640px) {
  .produto-card__marca { font-size: 12.5px; }
  .produto-card__conversao { font-size: 13px; }
  .produto-card__valor-unidade { font-size: 14px; }
  .variacao-mini__titulo { font-size: 12px; }
  .variacao-mini__opcao { font-size: 14px; padding: 8px 12px; min-height: 38px; }
  .venda-toggle__opcao { font-size: 13px; padding: 9px 14px; min-height: 38px; }
  .btn-espiadinha { font-size: 15px; padding: 12px 0; min-height: 44px; }
  .btn-carrinho__label { font-size: 16px; }
  .btn-carrinho.is-esgotado .btn-carrinho__label { font-size: 14px; }
  .btn-carrinho__menos, .btn-carrinho__mais { min-height: 44px; min-width: 44px; font-size: 20px; }
  .categoria-secao__ver-tudo { font-size: 15px; padding: 12px 4px; }
  .categoria-carrossel__seta { width: 34px; height: 34px; font-size: 18px; }
  .banner__seta { width: 44px; height: 44px; }
  .banner__dot { width: 12px; height: 12px; position: relative; }
  .banner__dot::after { content: ""; position: absolute; inset: -10px; }
  .banner__tag { font-size: 12px; }
  .banner__cta, .banner-hero__cta { font-size: 15px; padding: 11px 18px; min-height: 44px; }
  .login-form__label { font-size: 15px; }
  .login-form__input { font-size: 16px; padding: 12px; min-height: 46px; }
  .login-form__esqueci { font-size: 14px; padding: 8px 0; }
  .footer__copyright { font-size: 13px; }
  .footer__coluna a { font-size: 15px; display: inline-block; padding: 8px 0; }
  .breadcrumb, .breadcrumb__sep, .breadcrumb__atual { font-size: 14px; }
  .breadcrumb a { display: inline-block; padding: 8px 2px; }
  .carrinho-pagina__continuar { font-size: 15px; padding: 10px 0; display: inline-block; }
  .btn-secundario { font-size: 15px; min-height: 44px; }
  .frete-calc__titulo { font-size: 15px; }
  .frete-calc__input { font-size: 16px; min-height: 44px; }
  .frete-calc__btn { font-size: 15px; min-height: 44px; }
  .variacao__titulo { font-size: 15px; }
  .variacao__opcao { font-size: 15px; min-height: 42px; padding: 8px 14px; }
  .produto-detalhe__seta { width: 40px; height: 40px; }
  .produto-detalhe__selo, .produto-detalhe__contador, .produto-detalhe__contador-atual { font-size: 14px; }
  .produto-detalhe__conversao { font-size: 13px; }
  .login-modal__fechar, .carrinho-drawer__fechar, .espiadinha-drawer__fechar { width: 44px; height: 44px; }
  .login-form__olho { min-width: 40px; min-height: 40px; font-size: 18px; }
  .login-form__submit, .login-modal__btn-criar { min-height: 46px; font-size: 16px; }
  .resumo-pedido__selos { font-size: 13px; }
  .resumo-ajuda__btn { min-width: 32px; min-height: 32px; }
  .checkout-etapa, .checkout-etapa__num, .checkout-secao__num { font-size: 14px; }
  .checkout-secao label, .checkbox-linha { font-size: 15px; }
  .pagamento-grupo, .pagamento-aba { font-size: 15px; min-height: 44px; }
  .admin-dica { font-size: 13.5px; }
  .produto-detalhe__acao { width: 100%; right: 0; }
  .tabs__nav { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .tabs__botao { font-size: 15px; padding: 14px 16px; white-space: nowrap; flex: 0 0 auto; }
  .tabs__html table { font-size: 14px; }
}
/* =========================================================
   Painel admin no celular (até 640px): textos e alvos de toque maiores.
   Só em tela estreita — o painel no computador fica como estava.
   ========================================================= */
@media (max-width: 640px) {
  .admin-body { font-size: 16px; }
  .admin-body .admin-topbar__hamburguer { min-width: 44px; min-height: 44px; font-size: 20px; }
  .admin-body .admin-tabela th { font-size: 12.5px; }
  .admin-body .admin-tabela td { font-size: 14.5px; }
  .admin-body .admin-tabela-acao { font-size: 14px; padding: 10px 14px; min-height: 40px; display: inline-flex; align-items: center; margin-bottom: 4px; }
  .admin-body .admin-status-chip { font-size: 13px; }
  .admin-body .admin-estatistica__label { font-size: 13.5px; }
  .admin-body .admin-filtro-status button, .admin-body .admin-filtro-status a { font-size: 14px; padding: 10px 14px; min-height: 40px; }
  .admin-body .btn-secundario, .admin-body .admin-btn-novo { font-size: 15px; min-height: 44px; }
  .admin-body .checkout-finalizar { font-size: 16px; min-height: 46px; }
  .admin-body .admin-dica { font-size: 14px; }
  .admin-body label { font-size: 14.5px; }
  .admin-body input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]),
  .admin-body select, .admin-body textarea { font-size: 16px; min-height: 44px; }
  .admin-body input[type=checkbox], .admin-body input[type=radio] { width: 20px; height: 20px; }
  .admin-body .dash-cartao__comp, .admin-body .dash-cartao__rotulo { font-size: 13.5px; }
  .admin-body .dash-item__selo { font-size: 13px; }
  .admin-body .dash-var { font-size: 13.5px; }
  .admin-body .dash-cartao small, .admin-body .dash-item small { font-size: 13.5px; }
  .admin-body .cfg-bloco__selo { font-size: 13px; }
  .admin-body a[href$="admin-logout.php"] { font-size: 14px !important; padding: 10px 14px !important; min-height: 40px; }
}
/* =========================================================
   Painel do entregador no celular (até 640px): textos e botões maiores.
   Só em tela estreita; vale para todos os modelos de visual.
   ========================================================= */
@media (max-width: 640px) {
  body.entregador-pagina { font-size: 16px; }
  body.entregador-pagina .entregador-header a,
  body.entregador-pagina .ent-hero__sair { font-size: 15px; padding: 10px 16px; min-height: 44px; display: inline-flex; align-items: center; }
  body.entregador-pagina .ent-hero__quem small { font-size: 14px; }
  body.entregador-pagina .ent-hero__quem strong { font-size: 17px; }
  body.entregador-pagina .ent-hero__avatar { font-size: 16px; }
  body.entregador-pagina .entregador-card h2 { font-size: 18px; }
  body.entregador-pagina .entregador-card p, body.entregador-pagina .parada-card__resumo { font-size: 15px; }
  body.entregador-pagina .entregador-btn { font-size: 16px; min-height: 50px; padding: 14px 16px; }
  body.entregador-pagina .btn-secundario { font-size: 15px; min-height: 46px; }
  body.entregador-pagina .entregador-card__remover { min-width: 44px; min-height: 44px; font-size: 18px; }
  body.entregador-pagina .parada-card__subir, body.entregador-pagina .parada-card__descer { min-width: 44px; min-height: 40px; font-size: 16px; }
  body.entregador-pagina .navegacao-guia__rotulo { font-size: 14px; }
  body.entregador-pagina .navegacao-guia__botao, body.entregador-pagina .parada-lista__todas { font-size: 15px; min-height: 46px; }
  body.entregador-pagina .admin-dica { font-size: 14.5px; }
  body.entregador-pagina .form-campo label, body.entregador-pagina .login-form__label { font-size: 15px; }
  body.entregador-pagina input:not([type=checkbox]):not([type=radio]), body.entregador-pagina select, body.entregador-pagina textarea { font-size: 16px; min-height: 46px; }
  body.entregador-pagina .entregador-login__alternar { font-size: 15px; }
  body.entregador-pagina .entregador-erro { font-size: 15px; }
}
/* =====================================================
   ADMIN > VITRINE: grade por dispositivo (pré-visualização)
===================================================== */
.vit-grade__faixas { display: flex; flex-wrap: wrap; gap: 16px; }
.vit-grade__faixas .form-campo { min-width: 150px; }
.vit-grade__altura { display: flex; align-items: center; gap: 10px; max-width: 320px; margin: 4px 0 10px; }
.vit-grade__altura input { flex: 1; }
.vit-grade__altura output { min-width: 44px; text-align: right; font-family: monospace; }
.vit-prev { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; }
.vit-prev__tela { border: 1px solid var(--cor-borda, #d9d9d9); border-radius: 8px; padding: 8px; background: #fafafa; }
.vit-prev__tela--desktop { flex: 1 1 360px; }
.vit-prev__tela--tablet { flex: 0 1 240px; }
.vit-prev__tela--celular { flex: 0 1 140px; }
.vit-prev__rotulo { display: block; font-size: 12px; font-weight: 700; margin-bottom: 6px; }
.vit-prev__grade { display: grid; gap: 4px; }
.vit-prev__card { background: #fff; border: 1px solid #e3e3e3; border-radius: 4px; padding: 3px; }
.vit-prev__img { background: #dcdcdc; border-radius: 2px; margin-bottom: 3px; }
.vit-prev__linha { height: 4px; background: #e6e6e6; border-radius: 2px; margin-top: 3px; }
.vit-prev__linha--curta { width: 60%; }

/* =====================================================
   PRODUTO SEM ESTOQUE (Vitrine > "Produto sem estoque - aparencia")
   .is-sem-estoque e posto por sincronizarCardVisual() (script.js) no card ou na pagina do produto;
   body[data-esgotado-modo] vem de includes/header.php. Modo "padrao" nao tem regra aqui.
===================================================== */
body[data-esgotado-modo="cinza"] .produto-card.is-sem-estoque .produto-card__imagem,
body[data-esgotado-modo="cinza_esmaecido"] .produto-card.is-sem-estoque .produto-card__imagem,
body[data-esgotado-modo="cinza"] .produto-detalhe.is-sem-estoque .produto-detalhe__galeria,
body[data-esgotado-modo="cinza_esmaecido"] .produto-detalhe.is-sem-estoque .produto-detalhe__galeria {
  filter: grayscale(1);
}
body[data-esgotado-modo="cinza_esmaecido"] .produto-card.is-sem-estoque { opacity: 0.7; }
body[data-esgotado-modo="cinza_esmaecido"] .produto-detalhe.is-sem-estoque .produto-detalhe__galeria { opacity: 0.7; }
/* =====================================================
   ADMIN > APARENCIA: etapas (abas) - ver script no fim de admin-aparencia.php
===================================================== */
.ap-etapas { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ap-etapas__aba {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border: var(--linha); border-radius: 999px;
  background: transparent; color: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.ap-etapas__aba:hover { opacity: 0.8; }
.ap-etapas__aba.is-ativa { background: var(--cor-primaria, #000); color: var(--cor-primaria-contraste, #fff); border-color: transparent; }
.ap-etapas__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; font-size: 11px;
  background: rgba(127, 127, 127, 0.25);
}
.ap-etapas__tudo { margin-left: auto; }

/* Cartão de opção com controle deslizante (Aparência da loja e Menu de navegação): "Personalizar" liga o controle */
.ap-cartao { border: var(--linha-fina); border-radius: var(--radius); padding: 14px; margin-top: 14px; }
.ap-cartao__titulo { font-weight: 700; margin-top: 0; }
.ap-espaco-abaixo { margin-top: 10px; }
.ap-slider { display: flex; align-items: center; gap: 10px; margin-top: 8px; max-width: 320px; }
.ap-slider input[type="range"] { flex: 1; }
.ap-slider--oculto { display: none; }
.ap-slider__valor { min-width: 44px; text-align: right; font-family: monospace; }
.ap-slider__rotulo { min-width: 76px; font-size: 12px; }
/* Blocos da página (admin-aparencia.php seção 11): um item por bloco, cor com seletor + hex. */
.ap-bloco { border-top: var(--linha-fina); margin-top: 12px; padding-top: 12px; min-width: 0; }
.ap-cartao > .ap-cartao__titulo + .ap-bloco { border-top: none; margin-top: 0; padding-top: 0; }
.ap-bloco__titulo { font-size: 13px; font-weight: 600; margin: 0; }
.ap-bloco__linha { margin-top: 8px; }
.ap-cor { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.ap-cor--oculto { display: none; }
.ap-cor__seletor { width: 48px; height: 38px; padding: 2px; cursor: pointer; }
.ap-cor__hex { width: 100px; font-family: monospace; }
/* Mensagem depois da compra da assinatura (pedido-detalhe.php): destaque com o botão que leva à escolha dos itens. */
.assinatura-poscompra { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: var(--gap); padding: 14px 18px; border: var(--linha); border-radius: var(--radius); }
.assinatura-poscompra__texto { flex: 1 1 260px; margin: 0; font-size: 15px; font-weight: 600; }
.assinatura-poscompra__botao { display: inline-block; width: auto; padding: 12px 28px; text-align: center; text-decoration: none; }
/* Tela "Assinatura no carrinho" (admin-assinatura-carrinho-config.php), seção "Depois da compra da assinatura". */
.ass-poscompra__form { margin-top: 10px; }
.ass-poscompra__campo { max-width: 640px; margin-top: 18px; }
.ass-poscompra__campo--curto { max-width: 280px; }
.ass-poscompra__acoes { margin-top: 20px; }
.ass-poscompra__botao { width: auto; padding: 12px 28px; }
/* Resultado de uma conferência numa tela de configuração (ex.: produto da taxa de serviços no ERP): faixa à esquerda pelo nível. */
.cfg-resultado { margin-top: 14px; padding: 10px 12px; border: var(--linha-fina); border-left-width: 4px; border-radius: var(--radius); font-size: 13px; }
.cfg-resultado--ok { border-left-color: #1a7f37; }
.cfg-resultado--aviso { border-left-color: #b54708; }
.cfg-resultado--erro { border-left-color: #b42318; }
/* Envio da taxa de serviços ao ERP (admin-taxa-servico-config.php): opções em linha e campos lado a lado. */
.taxa-erp__form { margin-top: 10px; }
.taxa-erp__opcao { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; padding: 10px 12px; border: var(--linha-fina); border-radius: var(--radius); cursor: pointer; font-size: 13px; }
.taxa-erp__opcao input { margin-top: 3px; flex-shrink: 0; }
.taxa-erp__campos { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.taxa-erp__campo { max-width: 260px; }
.taxa-erp__acoes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.taxa-erp__botao { width: auto; padding: 12px 28px; }
/* Diagnóstico da cotação de frete (admin-frete-config.php): formulário em linha e uma linha por etapa, com o status à esquerda. */
.frete-diag__form { display: flex; gap: 14px; align-items: end; flex-wrap: wrap; margin-top: 10px; }
.frete-diag__campo { max-width: 220px; }
.frete-diag__botao { width: auto; padding: 12px 28px; }
.frete-diag__conclusao { margin-top: 16px; padding: 10px 12px; border: var(--linha-fina); border-left-width: 4px; border-radius: var(--radius); font-weight: 600; }
.frete-diag__conclusao--ok { border-left-color: #1a7f37; }
.frete-diag__conclusao--erro { border-left-color: #b42318; }
.frete-diag__lista { list-style: none; padding: 0; margin: 10px 0 0; }
.frete-diag__etapa { display: flex; gap: 12px; align-items: flex-start; margin-top: 6px; padding: 8px 10px; border: var(--linha-fina); border-left-width: 4px; border-radius: var(--radius); font-size: 13px; }
.frete-diag__status { flex: 0 0 64px; font-size: 11px; font-weight: 700; letter-spacing: 0.4px; }
.frete-diag__texto { min-width: 0; overflow-wrap: anywhere; }
.frete-diag__etapa--ok { border-left-color: #1a7f37; }
.frete-diag__etapa--erro { border-left-color: #b42318; }
.frete-diag__etapa--aviso { border-left-color: #b54708; }
.frete-diag__etapa--info { opacity: 0.8; }
.ap-etapas__nav { display: flex; justify-content: space-between; gap: 10px; }
.ap-etapas__passo {
  padding: 10px 18px; border: var(--linha); border-radius: var(--radius);
  background: transparent; color: inherit; font-weight: 600; cursor: pointer;
}
.ap-etapas__passo:disabled { opacity: 0.35; cursor: not-allowed; }
.ap-etapas__salvar {
  position: sticky; bottom: 0; z-index: 5;
  padding: 10px 0; border-top: var(--linha-fina);
  background: var(--preenchimento-pagina-fundo, #fff);
}
/* =====================================================
   BUSCA FIXA NO CELULAR - ligada por body[data-busca-fixa="1"]; classe .topo-busca-fixa vem de script.js.
   A barra fixa e o proprio .topo__conteudo (logo + busca; as acoes de conta/carrinho ficam so no cabecalho).
===================================================== */
@media (max-width: 720px) {
  body.topo-busca-fixa .topo__conteudo {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: auto;
    z-index: 90;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 8px var(--gap);
    background-color: var(--cor-topo, #fff);
    color: var(--cor-topo-contraste, inherit);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    animation: busca-fixa-entra 0.18s ease-out;
  }
  body.topo-busca-fixa .topo__acoes { display: none; }
  body.topo-busca-fixa .topo__logo {
    padding: 4px 8px;
    max-width: 96px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body.topo-busca-fixa .topo__logo img { max-height: 28px !important; width: auto; }
  body.topo-busca-fixa .topo__busca-wrap { order: 0; flex: 1 1 0; min-width: 0; }
  /* Menu "fixo" do hamburguer (admin-menu.php) desce para nao ficar escondido atras da barra */
  body.topo-busca-fixa .hamburger--fixo { top: var(--busca-fixa-altura, 0); }
}
@keyframes busca-fixa-entra {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}
/* =====================================================
   BANNER: imagem no celular (admin-banners.php > "Mostrar a imagem tambem no celular")
   Sem a classe, o celular segue como sempre foi (so o texto). Com ela, a imagem cobre o slide e o texto
   fica por cima, num bloco com fundo. Nao afeta "somente imagem" nem Hero (ja mostram a imagem).
===================================================== */
@media (max-width: 720px) {
  .banner__slide--img-celular { position: relative; }
  .banner__slide--img-celular .banner__imagem-area {
    display: flex;
    position: absolute;
    inset: 0;
    flex: none;
    width: 100%;
    height: 100%;
    border: none;
    z-index: 0;
  }
  .banner__slide--img-celular .banner__conteudo {
    position: relative;
    z-index: 1;
    flex: none;
    align-self: flex-start;
    max-width: var(--banner-largura-conteudo-fundo, 60%);
    background: var(--banner-cor-conteudo, rgba(255, 255, 255, 0.88));
  }
  /* Direita/Esquerda: o texto fica com o que sobra da largura da imagem configurada no banner. */
  .banner__slide--img-celular:not(.banner__slide--fundo) .banner__conteudo {
    max-width: calc(100% - var(--banner-largura-imagem, 45%));
  }
  .banner__slide--fundo.banner__slide--img-celular .banner__conteudo {
    background: rgba(var(--banner-cor-conteudo-fundo-rgb, 255, 255, 255), var(--banner-opacidade-conteudo-fundo, 88%));
  }
}
/* =====================================================
   BANNER no celular em retrato (ate 480px): bloco "congelado", como se fosse uma imagem.
   A altura vem da proporcao 9:4 (= 360x160, o banner de sempre num celular de 360px) e TODA medida de dentro
   (fonte, espacos, botao) e em cqi = 1% da largura do banner, sem minimo nem maximo. Tudo escala junto, entao as
   quebras de linha sao as mesmas em qualquer largura: o texto que cabe em 360px cabe em 320px e em 430px.
   Fica depois dos blocos de 720px e 640px de proposito (sobrescreve a fonte/botao fixos de la).
   Acima de 480px segue como antes (altura fixa e fontes com clamp).
===================================================== */
@media (max-width: 480px) {
  .banner {
    height: auto;
    aspect-ratio: 9 / 4;
  }
  .banner__conteudo { padding: 3.3cqi 3.9cqi; gap: 1.7cqi; }
  .banner__titulo { font-size: 4.2cqi; line-height: 1.2; }
  .banner__tag { font-size: 2.8cqi; padding: 0.8cqi 2.8cqi; letter-spacing: 0.3cqi; }
  .banner__cta { font-size: 3.4cqi; padding: 1.4cqi 3.4cqi; min-height: 0; }

  /* Tamanho próprio do banner no celular em retrato (admin-banners.php > "Tamanho próprio no smartphone"): sem a variável do
     celular, vale a mesma das outras telas (a imagem de sempre: 45% / texto 60% no Fundo). */
  .banner__imagem-area { flex-basis: var(--banner-largura-imagem-celular, var(--banner-largura-imagem, 45%)); }
  .banner__slide--fundo .banner__conteudo { max-width: var(--banner-largura-conteudo-fundo-celular, var(--banner-largura-conteudo-fundo, 60%)); }
  .banner__slide--img-celular:not(.banner__slide--fundo) .banner__conteudo {
    max-width: calc(100% - var(--banner-largura-imagem-celular, var(--banner-largura-imagem, 45%)));
  }
}
/* =====================================================
   BOTAO DE COMPRAR DO CARD - compacto (Vitrine > "Botao de comprar do card")
   Ligado por body[data-botao-card="compacto"] (includes/header.php); "padrao" nao tem regra aqui.
   So nos cards (.produto-card), nao na pagina do produto.
===================================================== */
body[data-botao-card="compacto"] .produto-card .btn-carrinho { height: 32px; }
body[data-botao-card="compacto"] .produto-card .btn-carrinho__label {
  width: 30px;
  max-width: 30px;
  height: 30px;
  margin: auto;
  font-size: 0;
  overflow: hidden;
}
body[data-botao-card="compacto"] .produto-card .btn-carrinho__label::before {
  content: "+";
  font-size: 18px;
  line-height: 1;
}
body[data-botao-card="compacto"] .produto-card .btn-carrinho.is-esgotado .btn-carrinho__label::before { content: "\00d7"; }
body[data-botao-card="compacto"] .produto-card .btn-carrinho__menos,
body[data-botao-card="compacto"] .produto-card .btn-carrinho__mais { font-size: 13px; }
body[data-botao-card="compacto"] .produto-card .btn-carrinho__qtd { font-size: 12px; }
/* Botao "+" compacto redondo (Vitrine > "Botao + redondo"): circulo com a borda/cor do botao de comprar; a moldura
   da barra some enquanto o produto nao esta no carrinho (com o contador ativo ela volta ao normal). */
body[data-botao-card="compacto"][data-botao-card-redondo="1"] .produto-card .btn-carrinho:not(.is-ativo) { border-color: transparent; }
body[data-botao-card="compacto"][data-botao-card-redondo="1"] .produto-card .btn-carrinho__label {
  border: var(--borda-carrinho, var(--linha));
  border-radius: 50%;
}
/* Etapas da Vitrine: reaproveita .ap-etapas*; ocupa a linha inteira da grade do painel */
.vit-etapas { grid-column: 1 / -1; }

/* =====================================================
   AVISO DE COOKIES (LGPD) — Privacidade e cookies, no painel (admin-privacidade-config.php). Desligado por padrão.
   Fica abaixo das gavetas e modais (z-index 500+) para nunca cobrir o carrinho aberto.
===================================================== */
.aviso-cookies {
  position: fixed;
  z-index: 450;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  background: var(--preenchimento-pagina-fundo, Canvas);
  color: var(--preenchimento-pagina-fundo-contraste, CanvasText);
  border: var(--linha);
}
.aviso-cookies[hidden] { display: none; }
.aviso-cookies--rodape { left: 0; right: 0; bottom: 0; border-width: 2px 0 0; }
.aviso-cookies--canto { right: 16px; bottom: 16px; max-width: 380px; flex-direction: column; align-items: stretch; border-radius: var(--radius); }
.aviso-cookies__conteudo { flex: 1; min-width: 0; }
.aviso-cookies__titulo { display: block; font-size: 15px; margin-bottom: 4px; }
.aviso-cookies__texto { margin: 0; font-size: 13px; line-height: 1.45; }
.aviso-cookies__texto a { text-decoration: underline; font-weight: 700; }
.aviso-cookies__botao { width: auto; flex: 0 0 auto; padding: 10px 24px; }
.priv-form__salvar, .pagonline-form__salvar { width: auto; padding: 12px 28px; }
/* Pré-visualização no painel: mesma aparência, mas no fluxo da página (não fixa). */
.aviso-cookies--previa { position: static; max-width: 640px; margin-top: 8px; border-width: 2px; }
@media (max-width: 640px) {
  .aviso-cookies--rodape { flex-direction: column; align-items: stretch; }
  .aviso-cookies--canto { left: 12px; right: 12px; bottom: 12px; max-width: none; }
  .aviso-cookies__botao { min-height: 44px; }
}