/* =====================================================================
   NEXA AURA — Override Block
   Aplicado em cascata. Somente propriedades visuais.
   ===================================================================== */

/* Tipografia global */
body, button, input, textarea, select, label {
  font-family: var(--na-font) !important;
}

/* Fundos das páginas */
#pagina-notificacoes,
#pagina-usuario,
#pagina-configuracoes,
#pagina-config-conta-seguranca,
#pagina-config-meus-enderecos,
#pagina-config-contas-cartoes,
#pagina-config-notificacoes,
#pagina-config-idioma,
#pagina-config-avaliar,
#pagina-config-sobre,
#pagina-config-excluir-conta,
#pagina-pedido,
#pagina-mensagens,
#pagina-carrinho { background-color: var(--na-bg) !important; }

/* Sidebar */
.caixa { background: var(--na-surface) !important; border-right: 1px solid var(--na-border); }
.caixa::after { background: var(--na-border) !important; }
/* SVG da sidebar: cor herdada do botão via currentColor */
.caixa button svg { color: inherit; }

/* Busca */
.busca-input-wrap {
  background: var(--na-surface-elevated) !important;
  border: 1px solid var(--na-border) !important;
}
.busca-input-wrap input { color: var(--na-text) !important; background: transparent !important; }
.busca-input-wrap input::placeholder { color: var(--na-text-tertiary) !important; }
.sugestoes-busca {
  background: var(--na-surface-elevated) !important;
  border: 1px solid var(--na-border) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.5) !important;
}
.sugestao-item { color: var(--na-text) !important; border-bottom-color: var(--na-border) !important; }
.sugestao-item:hover { background: var(--na-surface-hover) !important; }

/* Cards de produto */
.produto-card {
  background: var(--na-gradient-card) !important;
  border-color: var(--na-border) !important;
  border-radius: var(--na-radius-md) !important;
  box-shadow: var(--na-shadow-card) !important;
  position: relative !important;
  overflow: hidden !important;
}
.produto-card:hover {
  border-color: var(--na-primary) !important;
  box-shadow: var(--na-shadow-elevated) !important;
  transform: translateY(-4px);
}
.nome-produto { color: var(--na-text) !important; }
.marca-produto { color: var(--na-text-secondary) !important; }
.preco-produto { color: var(--na-text) !important; font-weight: 700; }
.produto-card-badges {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  pointer-events: none;
}
.produto-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 8px;
  border-radius: var(--na-radius-full);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  box-shadow: 0 6px 16px rgba(0,0,0,0.28);
}
.produto-badge-best {
  background: var(--na-gradient-primary);
}
.produto-badge-3d {
  margin-left: auto;
  background: rgba(13,13,21,0.9);
  border: 1px solid rgba(255,255,255,0.16);
  color: var(--na-text);
}
.produto-card-indisponivel {
  background: rgba(239,68,68,0.15) !important;
  color: var(--na-error) !important;
  border: 1px solid rgba(239,68,68,0.3) !important;
}

/* Badges */
.pedido-badge-novo {
  background: var(--na-success) !important;
  color: #fff !important;
  border-radius: var(--na-radius-full) !important;
}
.pedido-badge-promo {
  background: var(--na-attention) !important;
  color: #fff !important;
  border-radius: var(--na-radius-full) !important;
}
.pedido-badge-best {
  background: var(--na-gradient-primary) !important;
  color: #fff !important;
  border-radius: var(--na-radius-full) !important;
}
.pedido-badge-3d {
  background: rgba(34,197,238,0.16) !important;
  border: 1px solid rgba(34,197,238,0.35) !important;
  color: var(--na-secondary) !important;
  border-radius: var(--na-radius-full) !important;
}
.pedido-sem-estoque {
  background: rgba(239,68,68,0.1) !important;
  border-color: rgba(239,68,68,0.35) !important;
  color: var(--na-error) !important;
}

/* Botões primários */
.btn-comprar,
.btn-comprar-selecionados,
.btn-cadastro-continuar,
.btn-adicionar-endereco-lista,
.btn-confirmar-localizacao,
.cartao-btn-add {
  background: var(--na-gradient-primary) !important;
  color: #fff !important;
  border-radius: var(--na-radius-full) !important;
  box-shadow: var(--na-shadow-primary) !important;
  font-weight: 600 !important;
  border: none !important;
}
.btn-comprar:hover,
.btn-comprar-selecionados:hover,
.btn-cadastro-continuar:hover,
.btn-confirmar-localizacao:hover {
  box-shadow: 0 8px 28px rgba(52,131,250,0.5) !important;
}

/* Botão enviar (chat) */
.btn-enviar { background: var(--na-gradient-accent) !important; }

/* Botões de pedido */
.btn-pedido {
  background: var(--na-gradient-primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--na-radius-full) !important;
  box-shadow: var(--na-shadow-primary) !important;
  font-weight: 600 !important;
}
.btn-pedido:disabled {
  opacity: 0.4 !important;
  pointer-events: none !important;
  box-shadow: none !important;
}

/* Configurações icon */
.btn-configuracoes svg { fill: var(--na-text-secondary) !important; }
.btn-configuracoes:hover svg { fill: var(--na-text) !important; }
.btn-configuracoes:hover { background-color: var(--na-surface-hover) !important; }

/* Chat */
.lista-conversas { background: var(--na-surface) !important; border-right-color: var(--na-border) !important; }
.conversas-header { border-bottom-color: var(--na-border) !important; }
.conversas-header h2 { color: var(--na-text) !important; }
.conversa-item { border-bottom-color: var(--na-border-subtle) !important; }
.conversa-item:hover { background: var(--na-surface-elevated) !important; }
.ativa-chat { background: var(--na-primary-dim) !important; border-left-color: var(--na-primary) !important; }
.conversa-info strong { color: var(--na-text) !important; }
.conversa-status { color: var(--na-text-tertiary) !important; }
.conversa-status.online { color: var(--na-success) !important; }
.atendimento-avatar { background: rgba(52,131,250,0.18) !important; color: var(--na-primary) !important; }
.ia-avatar { background: rgba(34,197,238,0.15) !important; color: var(--na-secondary) !important; }

.chat-area { background: var(--na-bg) !important; }
.chat-topo { background: var(--na-surface) !important; border-bottom-color: var(--na-border) !important; }
.chat-topo-info h3 { color: var(--na-text) !important; }
.chat-status-texto { color: var(--na-success) !important; }
.chat-topo-avatar { background: var(--na-primary-dim) !important; color: var(--na-primary) !important; }

.mensagem { border-radius: var(--na-radius-md) !important; }
.mensagem.recebida {
  background: var(--na-surface-elevated) !important;
  border-color: var(--na-border) !important;
  color: var(--na-text) !important;
  border-bottom-left-radius: 4px !important;
}
.mensagem.enviada {
  background: var(--na-gradient-primary) !important;
  color: #fff !important;
  border-bottom-right-radius: 4px !important;
}

.chat-link-acao {
  color: var(--na-primary) !important;
  font-weight: 800 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

.chat-input-area { background: var(--na-surface) !important; border-top-color: var(--na-border) !important; }
.chat-input {
  background: var(--na-surface-elevated) !important;
  border-color: var(--na-border) !important;
  color: var(--na-text) !important;
  border-radius: var(--na-radius-full) !important;
}
.chat-input:focus {
  border-color: var(--na-primary) !important;
  box-shadow: 0 0 0 3px var(--na-primary-dim) !important;
}
.chat-input::placeholder { color: var(--na-text-tertiary) !important; }
.typing-dots span { background: var(--na-primary) !important; }
.typing-label { color: var(--na-text-secondary) !important; }

/* Notificações */
.notificacoes-container { color: var(--na-text) !important; }
.titulo-notificacoes h2 { color: var(--na-text) !important; }
.linha-notificacao {
  background: var(--na-gradient-card) !important;
  border-color: var(--na-border) !important;
  border-radius: var(--na-radius-sm) !important;
}
.linha-notificacao.lida { opacity: 0.65 !important; }
.linha-notificacao:hover {
  border-color: var(--na-primary) !important;
  box-shadow: var(--na-shadow-elevated) !important;
}
.notif-icone { position: relative !important; }
.notif-dot-nao-lida {
  position: absolute !important;
  top: 0 !important; right: 0 !important;
  width: 8px !important; height: 8px !important;
  border-radius: 50% !important;
  background: var(--na-primary) !important;
}
.texto-linha { color: var(--na-text) !important; }
.estado-vazio {
  background: var(--na-gradient-card) !important;
  border-color: var(--na-border) !important;
  border-radius: var(--na-radius-sm) !important;
}
.estado-vazio h3,
.estado-vazio p { color: var(--na-text) !important; }

/* Configurações */
.configuracoes-container { color: var(--na-text) !important; }
.configuracoes-topo h2 { color: var(--na-text) !important; }
.configuracoes-card {
  background: var(--na-surface-elevated) !important;
  border-color: var(--na-border) !important;
  border-radius: var(--na-radius-md) !important;
}
.configuracoes-card h3 { color: var(--na-text) !important; }
.configuracoes-card label { color: var(--na-text-secondary) !important; }
.configuracoes-card input,
.configuracoes-card textarea,
.configuracoes-card select {
  background: var(--na-surface) !important;
  border-color: var(--na-border) !important;
  border-radius: var(--na-radius-sm) !important;
  color: var(--na-text) !important;
}
.configuracoes-card input:focus,
.configuracoes-card textarea:focus {
  border-color: var(--na-primary) !important;
  box-shadow: 0 0 0 3px var(--na-primary-dim) !important;
}

/* Perfil / usuário */
.usuario-container { color: var(--na-text) !important; }
.usuario-topo h2 { color: var(--na-text) !important; }
.usuario-card {
  background: var(--na-surface-elevated) !important;
  border-color: var(--na-border) !important;
  border-radius: var(--na-radius-md) !important;
}
.usuario-card strong { color: var(--na-text) !important; }
.usuario-card p { color: var(--na-text-secondary) !important; }

/* Página de produto */
#pagina-pedido { color: var(--na-text) !important; }
.pedido-card {
  background: var(--na-gradient-card) !important;
  border-color: var(--na-border) !important;
  border-radius: var(--na-radius-lg) !important;
  box-shadow: var(--na-shadow-card) !important;
}
.pedido-imagem-box {
  background: var(--na-surface-elevated) !important;
  border-radius: var(--na-radius-lg) !important;
}
.pedido-miniatura {
  background: var(--na-surface-elevated) !important;
  border-radius: var(--na-radius-sm) !important;
}
.pedido-miniatura:hover { border-color: var(--na-primary) !important; }
.pedido-miniatura.ativa {
  border-color: var(--na-primary) !important;
  box-shadow: 0 0 0 3px var(--na-primary-dim) !important;
}
.btn-galeria { background: rgba(13,13,21,0.82) !important; color: var(--na-text) !important; }
.btn-galeria:hover { background: rgba(13,13,21,0.96) !important; }
.product-360-viewer {
  min-height: 360px;
  border: 1px solid var(--na-border);
  border-radius: var(--na-radius-lg);
  background:
    radial-gradient(ellipse at center, rgba(52,131,250,0.24), transparent 58%),
    linear-gradient(180deg, rgba(20,20,26,0.98), rgba(10,10,15,0.98));
  display: grid;
  place-items: center;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  cursor: grab;
}
.product-360-viewer[hidden],
.pedido-tabs-3d[hidden] { display: none !important; }
.product-360-viewer.girando { cursor: grabbing; }
.product-360-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 520px);
  min-height: 310px;
}
.product-360-halo {
  position: absolute;
  width: 70%;
  height: 26%;
  bottom: 32px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(52,131,250,0.55), rgba(34,197,238,0.12), transparent 68%);
  border: 1px solid rgba(52,131,250,0.35);
  filter: blur(1px);
}
.product-360-image {
  position: relative;
  z-index: 1;
  max-width: 82%;
  max-height: 300px;
  object-fit: contain;
  filter: drop-shadow(0 28px 30px rgba(0,0,0,0.58));
}
.product-360-indicator {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--na-radius-full);
  padding: 6px 9px;
  color: var(--na-text);
  background: rgba(13,13,21,0.78);
  font-size: 12px;
  font-weight: 800;
}
.product-360-help {
  position: absolute;
  bottom: 16px;
  z-index: 2;
  color: var(--na-text-secondary);
  font-size: 13px;
}
.product-360-empty {
  color: var(--na-text-secondary);
  padding: 24px;
  text-align: center;
}
.pedido-tabs-3d {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
  padding: 6px;
  border: 1px solid var(--na-border);
  border-radius: var(--na-radius-md);
  background: rgba(13,13,21,0.82);
}
.pedido-tab-3d {
  min-height: 42px;
  border: 0;
  border-radius: var(--na-radius-sm);
  background: transparent;
  color: var(--na-text-secondary);
  font-weight: 700;
  cursor: pointer;
  transition: var(--na-transition);
}
.pedido-tab-3d:hover,
.pedido-tab-3d.ativa {
  color: #fff;
  background: var(--na-gradient-primary);
  box-shadow: var(--na-shadow-primary);
}

/* Carrinho */
.titulo-carrinho { color: var(--na-text) !important; }
.recomendados h2 { color: var(--na-text) !important; }
.barra-selecao-carrinho {
  background: var(--na-surface-elevated) !important;
  border-color: var(--na-border) !important;
  border-radius: var(--na-radius-md) !important;
}
#pagina-carrinho .checkbox-selecionar-todos {
  color: var(--na-text) !important;
}
.checkbox-selecionar-todos input,
.checkbox-item-carrinho { accent-color: var(--na-primary) !important; }
#pagina-carrinho .barra-selecao-acoes {
  color: var(--na-text-secondary) !important;
}

/* Login / Cadastro */
.cadastro-card {
  background: var(--na-gradient-card) !important;
  border: 1px solid var(--na-border) !important;
  border-radius: var(--na-radius-lg) !important;
  color: var(--na-text) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,0.5) !important;
}
.cadastro-card h2 { color: var(--na-text) !important; }
.cadastro-card p { color: var(--na-text-secondary) !important; }
.cadastro-campo label { color: var(--na-text) !important; }
.cadastro-campo input {
  background: var(--na-surface) !important;
  border-color: var(--na-border) !important;
  border-radius: var(--na-radius-sm) !important;
  color: var(--na-text) !important;
}
.cadastro-campo input:focus {
  border-color: var(--na-primary) !important;
  box-shadow: 0 0 0 3px var(--na-primary-dim) !important;
}
.auth-status { background: var(--na-primary-dim) !important; color: var(--na-primary) !important; }
.btn-auth-alternar { color: var(--na-primary) !important; }

/* Filtros de categoria */
.filtro-btn {
  background: var(--na-surface-elevated) !important;
  border: 1px solid var(--na-border) !important;
  color: var(--na-text-secondary) !important;
  border-radius: var(--na-radius-full) !important;
}
.filtro-btn:hover {
  border-color: var(--na-primary) !important;
  color: var(--na-text) !important;
}
.filtro-btn.ativo {
  background: var(--na-primary-dim) !important;
  border-color: var(--na-primary) !important;
  color: var(--na-primary) !important;
}

/* Endereço */
.endereco-box {
  background: var(--na-surface-elevated) !important;
  border-color: var(--na-border) !important;
  border-radius: var(--na-radius-md) !important;
}

/* Splash */
#splash-screen { background: var(--na-bg) !important; }

/* Skeleton */
.skeleton {
  background: linear-gradient(90deg,
    var(--na-surface-elevated) 25%,
    var(--na-surface-hover) 50%,
    var(--na-surface-elevated) 75%) !important;
  background-size: 200% 100% !important;
  animation: na-shimmer 1.5s infinite !important;
}
@keyframes na-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Itens do Carrinho ──────────────────────────────────────────────────── */
#pagina-carrinho .item-carrinho {
  background: var(--na-gradient-card) !important;
  border: 1px solid var(--na-border) !important;
  box-shadow: var(--na-shadow-card) !important;
}
.item-carrinho:hover {
  border-color: var(--na-primary) !important;
  box-shadow: 0 10px 22px rgba(52,131,250,0.15) !important;
}
.item-carrinho.selecionado {
  border-color: var(--na-primary) !important;
  box-shadow: 0 0 0 1px var(--na-primary-dim), 0 10px 22px rgba(52,131,250,0.16) !important;
}
#pagina-carrinho .item-carrinho-imagem {
  background: var(--na-surface-elevated) !important;
}

#pagina-carrinho .item-carrinho-info h3 {
  color: var(--na-text) !important;
}

#pagina-carrinho .item-carrinho-info p {
  color: var(--na-text-secondary) !important;
}
#pagina-carrinho .btn-qtd-carrinho {
  background: var(--na-surface-elevated) !important;
  color: var(--na-text) !important;
  border: 1px solid var(--na-border) !important;
}
.btn-qtd-carrinho:hover {
  background: var(--na-gradient-primary) !important;
  border-color: transparent !important;
}
#pagina-carrinho .item-carrinho-valor-qtd {
  color: var(--na-text) !important;
}
#pagina-carrinho .btn-remover-carrinho {
  background: var(--na-surface-elevated) !important;
  color: var(--na-text-secondary) !important;
  border: 1px solid var(--na-border) !important;
}
#pagina-carrinho .btn-remover-carrinho:hover {
  background: transparent !important;
  color: #ef4444 !important;
}

/* ── Checkout / Pagamento ─────────────────────────────────────────────── */
.pagina-pagamento-conteudo {
  background: var(--na-surface) !important;
  border: 1px solid var(--na-border) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6) !important;
}
.topo-pagamento h2 { color: var(--na-text) !important; }
.btn-fechar-pagamento {
  background: var(--na-surface-elevated) !important;
  color: var(--na-text) !important;
}
.btn-fechar-pagamento:hover { background: var(--na-surface-hover) !important; }
.pagamento-bloco {
  background: var(--na-surface-elevated) !important;
  border: 1px solid var(--na-border) !important;
  box-shadow: none !important;
}
.pagamento-bloco h3 { color: var(--na-text) !important; }
.resumo-item-pagamento {
  background: var(--na-bg) !important;
  color: var(--na-text) !important;
  border: 1px solid var(--na-border) !important;
}
.pagamento-opcao-conteudo {
  background: var(--na-surface) !important;
  border-color: var(--na-border) !important;
}
.pagamento-opcao-conteudo strong { color: var(--na-text) !important; }
.pagamento-opcao-conteudo p { color: var(--na-text-secondary) !important; }
.pagamento-opcao input[type="radio"]:checked + .pagamento-opcao-conteudo {
  border-color: var(--na-primary) !important;
  background: var(--na-primary-dim) !important;
}
.linha-resumo { color: var(--na-text) !important; }
.total-geral { border-top-color: var(--na-border) !important; }
.btn-confirmar-pagamento {
  background: var(--na-gradient-primary) !important;
  border-radius: var(--na-radius-md) !important;
  box-shadow: var(--na-shadow-primary) !important;
  color: #fff !important;
  border: none !important;
  font-weight: 700 !important;
}
.btn-confirmar-pagamento:hover { box-shadow: 0 8px 28px rgba(52,131,250,0.5) !important; }

/* ── Botões de quantidade (página produto) ───────────────────────────── */
.btn-qtd {
  background: var(--na-surface-elevated) !important;
  border: 1px solid var(--na-border) !important;
  color: var(--na-text) !important;
}
.btn-qtd:hover {
  background: var(--na-gradient-primary) !important;
  border-color: transparent !important;
}
.btn-qtd:disabled { opacity: 0.3 !important; }
.qtd-display { color: var(--na-text) !important; }

/* ── Frete container ─────────────────────────────────────────────────── */
.frete-container {
  background: linear-gradient(180deg, var(--na-bg) 0%, var(--na-surface) 100%) !important;
  border-left-color: var(--na-border) !important;
}

/* ── Página produto — detalhes extras ───────────────────────────────── */
.pedido-preco       { color: var(--na-text) !important; font-weight: 700 !important; }
.pedido-preco-parcelado { color: var(--na-text-secondary) !important; }
.pedido-nome        { color: var(--na-text) !important; }
.pedido-marca       { color: var(--na-text-secondary) !important; }
.pedido-descricao   { color: var(--na-text-secondary) !important; }
.pedido-info-entrega { color: var(--na-text-secondary) !important; }

/* ── Recomendados no carrinho ────────────────────────────────────────── */
#pagina-carrinho .recomendados-lista {
  background: transparent !important;
}

#pagina-carrinho .recomendados-lista .produto-card {
  background: var(--na-surface-elevated) !important;
  border: 1px solid var(--na-border) !important;
  box-shadow: var(--na-shadow-card) !important;
}

/* ── Header — botões de topo ─────────────────────────────────────────── */
.carrinho-contador {
  background: var(--na-primary) !important;
  color: #fff !important;
}

/* ── Endereço — inputs de CEP e formulário ──────────────────────────── */
.input-cep,
.campo-frete input,
.campo-frete select {
  background: var(--na-surface-elevated) !important;
  border-color: var(--na-border) !important;
  color: var(--na-text) !important;
}
.input-cep:focus,
.campo-frete input:focus { border-color: var(--na-primary) !important; }

/* ── Scrollbar global (tema escuro) ─────────────────────────────────── */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--na-border) transparent;
}
*::-webkit-scrollbar { width: 5px; height: 5px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--na-border); border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: var(--na-primary); }

/* ═══════════════════════════════════════════════════════════════════════════
   REDESIGN — Tela Principal Nexa Aura
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Reset da borda fixa do body ─────────────────────────────────────── */
body::before { display: none !important; }

/* ── Sidebar redesenhada ─────────────────────────────────────────────── */
.caixa {
  width: 260px !important;
  padding: 0 !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  flex-direction: column !important;
  gap: 0 !important;
  border-right: 1px solid var(--na-border) !important;
  background: var(--na-surface) !important;
  z-index: 100 !important;
}
.caixa::after { display: none !important; }

/* Logo na sidebar */
.sidebar-brand {
  padding: 28px 24px 20px !important;
  border-bottom: 1px solid var(--na-border) !important;
  flex-shrink: 0 !important;
}
.sidebar-logo {
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

/* Nav items */
.sidebar-nav-items {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  padding: 16px 12px !important;
  overflow-y: auto !important;
}

.caixa .menu-btn {
  width: 100% !important;
  min-height: 52px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  padding: 0 14px !important;
  border-radius: 12px !important;
  text-align: left !important;
  font-family: var(--na-font) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--na-text-secondary) !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  transition: background var(--na-transition), color var(--na-transition) !important;
  position: relative !important;
  box-sizing: border-box !important;
}
.caixa .menu-btn svg {
  flex-shrink: 0 !important;
  flex-basis: 22px !important;
  width: 22px !important;
  height: 22px !important;
  margin-right: 14px !important;
  transition: var(--na-transition) !important;
}
.caixa .menu-btn > span:not(.sidebar-badge) {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  line-height: 1.2 !important;
}
.caixa .menu-btn:hover {
  background: var(--na-surface-elevated) !important;
  color: var(--na-text) !important;
}
.caixa .menu-btn.ativo {
  background: var(--na-primary-dim) !important;
  color: var(--na-primary) !important;
  font-weight: 600 !important;
}

/* Badge na sidebar */
.sidebar-badge {
  margin-left: auto !important;
  flex: 0 0 auto !important;
  background: var(--na-primary) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  min-width: 20px !important;
  height: 20px !important;
  border-radius: 999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 5px !important;
  line-height: 1 !important;
}

/* Notificação badge (dot) existente — manter funcionando */
.menu-badge-notificacoes {
  position: absolute !important;
  top: 6px !important;
  right: 10px !important;
}

/* Card Frete grátis */
.sidebar-frete-card {
  margin: 12px !important;
  padding: 18px 16px !important;
  background: linear-gradient(135deg, rgba(52,131,250,0.18) 0%, rgba(34,197,238,0.10) 100%) !important;
  border: 1px solid rgba(52,131,250,0.3) !important;
  border-radius: 16px !important;
  text-align: center !important;
  flex-shrink: 0 !important;
}
.sidebar-frete-icon {
  display: flex !important;
  justify-content: center !important;
  margin-bottom: 10px !important;
  color: var(--na-primary) !important;
}
.sidebar-frete-titulo {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--na-text) !important;
  margin: 0 0 2px !important;
}
.sidebar-frete-sub {
  font-size: 12px !important;
  color: var(--na-text-secondary) !important;
  margin: 0 !important;
}
.sidebar-frete-valor {
  font-size: 17px !important;
  font-weight: 800 !important;
  background: var(--na-gradient-primary) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  margin: 4px 0 0 !important;
}

/* ── Header redesenhado ──────────────────────────────────────────────── */
.topo {
  position: fixed !important;
  top: 0 !important;
  left: 260px !important;
  right: 0 !important;
  height: 68px !important;
  background: rgba(10,10,15,0.92) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid var(--na-border) !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 0 24px !important;
  margin-left: 0 !important;
  z-index: 90 !important;
  box-sizing: border-box !important;
}

/* Oculta o logo do topo (agora está na sidebar) */
.topo .logo { display: none !important; }

/* Busca ocupa todo espaço disponível */
.topo .busca-box {
  flex: 1 !important;
  position: relative !important;
}
.busca-input-wrap {
  background: var(--na-surface-elevated) !important;
  border: 1px solid var(--na-border) !important;
  border-radius: 999px !important;
  height: 42px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 16px !important;
}
.busca-input-wrap svg { color: var(--na-text-tertiary) !important; flex-shrink: 0 !important; }
.busca-input-wrap input {
  background: transparent !important;
  border: none !important;
  color: var(--na-text) !important;
  font-size: 14px !important;
  font-family: var(--na-font) !important;
  outline: none !important;
  flex: 1 !important;
}
.busca-input-wrap input::placeholder { color: var(--na-text-tertiary) !important; }
.busca-input-wrap:focus-within {
  border-color: var(--na-primary) !important;
  box-shadow: 0 0 0 3px var(--na-primary-dim) !important;
}
.limpar-busca {
  background: transparent !important;
  border: none !important;
  color: var(--na-text-tertiary) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
}
.limpar-busca:hover { color: var(--na-text) !important; }

/* Ícones do topo */
.topo-icons {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}
.topo-icon-btn {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  border: 1px solid var(--na-border) !important;
  background: var(--na-surface-elevated) !important;
  color: var(--na-text-secondary) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: var(--na-transition) !important;
  position: relative !important;
}
.topo-icon-btn:hover {
  background: var(--na-surface-hover) !important;
  color: var(--na-text) !important;
  border-color: var(--na-primary) !important;
}
.topo-icon-btn svg { flex-shrink: 0 !important; }
.topo-badge {
  position: absolute !important;
  top: -4px !important;
  right: -4px !important;
  min-width: 18px !important;
  height: 18px !important;
  background: var(--na-primary) !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 4px !important;
  border: 2px solid var(--na-bg) !important;
  line-height: 1 !important;
}

/* ── Páginas deslocadas para nova sidebar e header ───────────────────── */
.pagina {
  margin-left: 260px !important;
  padding-top: 68px !important;
}
#pagina-home {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ── Home: cabeçalho da seção ────────────────────────────────────────── */
.home-section-header {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  padding: 32px 28px 20px !important;
}
.home-titulo {
  font-size: 26px !important;
  font-weight: 700 !important;
  color: var(--na-text) !important;
  margin: 0 0 4px !important;
}
.home-subtitulo {
  font-size: 14px !important;
  color: var(--na-text-secondary) !important;
  margin: 0 !important;
}
.home-subtitulo-brand {
  background: var(--na-gradient-accent) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-weight: 600 !important;
}
.home-section-controls {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* Sort dropdown */
.home-sort-wrap {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}
.home-sort-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: var(--na-surface-elevated) !important;
  border: 1px solid var(--na-border) !important;
  border-radius: 10px !important;
  color: var(--na-text) !important;
  font-family: var(--na-font) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 8px 32px 8px 14px !important;
  cursor: pointer !important;
  outline: none !important;
  transition: var(--na-transition) !important;
}
.home-sort-select:focus { border-color: var(--na-primary) !important; }
.home-sort-chevron {
  position: absolute !important;
  right: 10px !important;
  pointer-events: none !important;
  color: var(--na-text-tertiary) !important;
}

/* Grid / List toggle */
.home-view-toggle {
  display: flex !important;
  border: 1px solid var(--na-border) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}
.view-toggle-btn {
  width: 36px !important;
  height: 36px !important;
  background: transparent !important;
  border: none !important;
  color: var(--na-text-tertiary) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: var(--na-transition) !important;
}
.view-toggle-btn:hover { background: var(--na-surface-elevated) !important; color: var(--na-text) !important; }
.view-toggle-btn.active {
  background: var(--na-primary-dim) !important;
  color: var(--na-primary) !important;
}

/* ── Grade de produtos ───────────────────────────────────────────────── */
.produtos {
  padding: 0 28px 32px !important;
  margin-top: 0 !important;
  padding-left: 28px !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 18px !important;
}

/* Modo lista */
.produtos.view-lista {
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}
.view-lista .produto-card {
  width: 100% !important;
  flex-direction: row !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 16px !important;
}
.view-lista .produto-img-wrap { width: 80px !important; flex-shrink: 0 !important; }
.view-lista .produto-img-halo { display: none !important; }
.view-lista .produto-card-body { flex: 1 !important; }

/* ── Card de produto — redesenhado ───────────────────────────────────── */
.produto-card {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  background: var(--na-surface-elevated) !important;
  border: 1px solid var(--na-border) !important;
  border-radius: 20px !important;
  padding: 14px !important;
  box-sizing: border-box !important;
  position: relative !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease !important;
  display: flex !important;
  flex-direction: column !important;
}
.produto-card:hover {
  border-color: rgba(52,131,250,0.5) !important;
  box-shadow: 0 0 0 1px rgba(52,131,250,0.15), 0 12px 28px rgba(52,131,250,0.18), 0 4px 8px rgba(0,0,0,0.4) !important;
  transform: translateY(-4px) !important;
}

/* Badges */
.produto-card-badges {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  display: flex !important;
  gap: 5px !important;
  z-index: 3 !important;
}
.produto-badge {
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  line-height: 1.4 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
}
.produto-badge-novo  { background: var(--na-primary) !important; color: #fff !important; }
.produto-badge-promo { background: var(--na-attention) !important; color: #fff !important; }
.produto-badge-best  { background: var(--na-secondary) !important; color: var(--na-bg) !important; }
.produto-badge-3d    { background: var(--na-success) !important; color: #fff !important; }

/* Botão favorito */
.produto-btn-fav {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  border: 1px solid var(--na-border) !important;
  background: var(--na-surface) !important;
  color: var(--na-text-tertiary) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: var(--na-transition) !important;
  z-index: 3 !important;
  padding: 0 !important;
}
.produto-btn-fav:hover {
  border-color: #EF4444 !important;
  color: #EF4444 !important;
  background: rgba(239,68,68,0.1) !important;
}
.produto-btn-fav.ativo {
  background: rgba(239,68,68,0.15) !important;
  border-color: #EF4444 !important;
  color: #EF4444 !important;
}
.produto-btn-fav.ativo svg { fill: #EF4444 !important; stroke: #EF4444 !important; }

/* Área da imagem com halo */
.produto-img-wrap {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 170px !important;
  margin-bottom: 10px !important;
}
.produto-img-halo {
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 70% !important;
  height: 28px !important;
  background: radial-gradient(ellipse at center, rgba(52,131,250,0.5) 0%, rgba(34,197,238,0.15) 55%, transparent 75%) !important;
  filter: blur(8px) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 0 !important;
  transition: opacity 0.3s ease !important;
}
.produto-card:hover .produto-img-halo {
  background: radial-gradient(ellipse at center, rgba(52,131,250,0.75) 0%, rgba(34,197,238,0.25) 55%, transparent 75%) !important;
}
.imagem-produto {
  width: 100% !important;
  height: 160px !important;
  object-fit: contain !important;
  display: block !important;
  background: transparent !important;
  border-radius: 12px !important;
  padding: 8px !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Info do card */
.produto-card-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}
.nome-produto {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--na-text) !important;
  margin: 0 0 3px !important;
  font-family: var(--na-font) !important;
  line-height: 1.3 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.marca-produto {
  font-size: 12px !important;
  color: var(--na-text-tertiary) !important;
  margin: 0 0 10px !important;
}

/* Footer do card: preço + botão carrinho */
.produto-card-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: auto !important;
}
.produto-preco-wrap { display: flex !important; flex-direction: column !important; }
.preco-produto {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--na-text) !important;
  margin: 0 !important;
}

/* Botão adicionar ao carrinho no card */
.produto-btn-cart {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  border: none !important;
  background: var(--na-gradient-primary) !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  box-shadow: 0 4px 12px rgba(52,131,250,0.35) !important;
  transition: transform 0.15s, box-shadow 0.15s, filter 0.15s !important;
  padding: 0 !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
  -webkit-appearance: none;
  appearance: none;
}
.produto-btn-cart:hover {
  transform: scale(1.08) !important;
  box-shadow: 0 6px 18px rgba(52,131,250,0.5) !important;
}
.produto-btn-cart:focus,
.produto-btn-cart:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
.produto-btn-cart:active {
  transform: scale(0.92) !important;
  filter: brightness(0.95) !important;
  box-shadow: none !important;
  outline: none !important;
}
.produto-btn-cart.adicionado {
  background: var(--na-success) !important;
  box-shadow: 0 4px 12px rgba(34,197,94,0.4) !important;
  animation: na-btn-cart-pop 0.35s ease !important;
}
@keyframes na-btn-cart-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(0.92); }
  100% { transform: scale(1); }
}

/* Indisponível */
.produto-card-indisponivel {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: rgba(239,68,68,0.12) !important;
  color: var(--na-error) !important;
  border: 0 !important;
  border-top: 1px solid rgba(239,68,68,0.3) !important;
  border-radius: 0 0 20px 20px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-align: center !important;
  padding: 8px !important;
  z-index: 2 !important;
}

/* ── Ajustes de layout para páginas internas ─────────────────────────── */

/* Mensagens: remove margin-left duplo e ajusta height */
.mensagens-container {
  margin-left: 0 !important;
  height: calc(100vh - 68px) !important;
}

/* Carrinho: remove padding-left do antigo sidebar */
.carrinho-container {
  padding-left: 20px !important;
  padding-right: 20px !important;
  max-width: 900px !important;
  margin: 0 auto !important;
}

/* ── Sugestões de busca ──────────────────────────────────────────────── */
#sugestoes-busca.sugestoes-busca {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  right: 0 !important;
  border-radius: 16px !important;
  border: 1px solid var(--na-border) !important;
  background: var(--na-surface-elevated) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.5) !important;
  z-index: 200 !important;
  overflow: hidden !important;
}

/* ── Responsividade ──────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .produtos { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 900px) {
  .produtos { grid-template-columns: repeat(2, 1fr) !important; }
  .caixa { width: 220px !important; }
  .topo { left: 220px !important; }
  .pagina { margin-left: 220px !important; }
}
@media (max-width: 768px) {
  .caixa {
    width: 100% !important;
    height: 60px !important;
    position: fixed !important;
    bottom: 0 !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    flex-direction: row !important;
    justify-content: space-around !important;
    align-items: center !important;
    border-right: none !important;
    border-top: 1px solid var(--na-border) !important;
    z-index: 100 !important;
    padding: 0 !important;
  }
  .sidebar-brand,
  .sidebar-frete-card { display: none !important; }
  .sidebar-nav-items {
    flex-direction: row !important;
    padding: 0 !important;
    gap: 0 !important;
    flex: none !important;
    width: 100% !important;
    justify-content: space-around !important;
    overflow: visible !important;
  }
  .caixa .menu-btn {
    flex-direction: column !important;
    gap: 3px !important;
    padding: 8px 6px !important;
    font-size: 10px !important;
    border-radius: 0 !important;
    width: auto !important;
    flex: 1 !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .caixa .menu-btn svg {
    flex-basis: auto !important;
    width: 18px !important;
    height: 18px !important;
    margin-right: 0 !important;
  }
  .sidebar-badge { display: none !important; }
  .topo {
    left: 0 !important;
    height: 56px !important;
    padding: 0 14px !important;
  }
  .pagina {
    margin-left: 0 !important;
    padding-top: 56px !important;
    padding-bottom: 70px !important;
  }
  .produtos {
    grid-template-columns: repeat(2, 1fr) !important;
    padding: 0 12px 20px !important;
    gap: 12px !important;
  }
  .home-section-header {
    padding: 20px 14px 12px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .home-titulo { font-size: 20px !important; }
  /* Sidebar virou bottom nav: mensagens não precisam mais de offset lateral */
  .mensagens-container { margin-left: 0 !important; }
}
@media (max-width: 400px) {
  .produtos { grid-template-columns: 1fr !important; }
}

/* ── Fix: sidebar SVG fill conflict ─────────────────────────────────────
   styles.css sets fill on .menu-btn svg for the old icon-only sidebar.
   Stroke-based icons (fill="none") must have fill: none or they appear filled.
   Fill-based icons (fill="currentColor") must use currentColor to follow
   the button's color property (inactive / hover / active states). */
.caixa .menu-btn svg[fill="none"]         { fill: none !important; stroke: currentColor !important; }
.caixa .menu-btn svg[fill="currentColor"] { fill: currentColor !important; stroke: none !important; }

/* ── Fix: list-view image wrap should not keep the 170px min-height ───── */
.view-lista .produto-img-wrap { min-height: 0 !important; height: 80px !important; }
.view-lista .imagem-produto   { height: 80px !important; }

/* ── Fix: busca-box explicit width from styles.css (420px) ────────────── */
.topo .busca-box { width: auto !important; max-width: 600px !important; }

/* ── Ensure active sidebar label text inherits primary color ──────────── */
.caixa .menu-btn span { transition: color var(--na-transition) !important; }

/* Checkout: estrutura limpa para resumo do produto, quantidade e totais */
#pagina-compra .compra-overlay {
  background: rgba(0, 0, 0, 0.55) !important;
  backdrop-filter: blur(8px) !important;
}

#pagina-compra .compra-container {
  width: min(820px, 100%) !important;
  padding: 32px !important;
  background: linear-gradient(180deg, #070b16 0%, #0c1222 54%, #080d18 100%) !important;
}

#pagina-compra .btn-fechar-compra {
    position: fixed !important;

    /* aumenta esse valor para descer o botão */
    top: 24px !important;

    /* aumenta esse valor para afastar da direita */
    right: 18px !important;

    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;

    border-radius: 50% !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;

    background: #ffffff !important;
    color: #061126 !important;

    box-shadow: 0 5px 14px rgba(15, 23, 42, 0.10) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;
    margin: 0 !important;

    font-size: 22px !important;
    font-weight: 800 !important;
    line-height: 1 !important;

    z-index: 999999 !important;
  }

#pagina-compra .compra-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 220px !important;
  gap: 22px !important;
  align-items: stretch !important;
  margin-top: 34px !important;
  padding: 22px !important;
  border: 1px solid var(--na-border) !important;
  border-radius: 20px !important;
  background: var(--na-surface-elevated) !important;
}

#pagina-compra .compra-esquerda {
  display: grid !important;
  grid-template-columns: 132px minmax(0, 1fr) !important;
  gap: 18px !important;
  align-items: center !important;
  min-width: 0 !important;
}

#pagina-compra .compra-imagem-box {
  width: 132px !important;
  min-width: 0 !important;
  aspect-ratio: 1 !important;
  padding: 12px !important;
  border-radius: 18px !important;
  background: #f4f4f6 !important;
  box-shadow: none !important;
}

#pagina-compra.ativa .compra-imagem-box {
  animation: none !important;
}

#pagina-compra .compra-imagem-box img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

#pagina-compra .compra-detalhes {
  min-width: 0 !important;
  gap: 8px !important;
}

#pagina-compra .compra-detalhes h2 {
  font-size: 22px !important;
  line-height: 1.22 !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  max-width: 100% !important;
}

#pagina-compra #compra-preco {
  font-size: 30px !important;
  line-height: 1.08 !important;
  color: var(--na-text) !important;
}

#pagina-compra #compra-pagamento,
#pagina-compra #compra-estoque,
#pagina-compra .compra-quantidade-info {
  color: var(--na-text-secondary) !important;
}

#pagina-compra .compra-direita {
  min-width: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 12px !important;
}

#pagina-compra .compra-direita h3 {
  margin: 0 !important;
  font-size: 20px !important;
}

#pagina-compra .controle-quantidade {
  gap: 10px !important;
  margin: 0 !important;
}

#pagina-compra .btn-qtd,
#pagina-compra #input-quantidade {
  width: 48px !important;
  height: 48px !important;
  border-radius: 12px !important;
  border: 1px solid var(--na-border) !important;
  background: var(--na-surface) !important;
}

#pagina-compra #input-quantidade {
  width: 72px !important;
}

#pagina-compra .compra-secoes-alinhadas {
  gap: 18px !important;
  margin-top: 18px !important;
}

#pagina-compra .compra-resumo-itens,
#pagina-compra .endereco-box,
#pagina-compra .frete-box-compra,
#pagina-compra .compra-resumo-final {
  padding: 22px !important;
  border: 1px solid var(--na-border) !important;
  border-radius: 18px !important;
  background: var(--na-surface-elevated) !important;
}

#pagina-compra .compra-resumo-topo h3,
#pagina-compra .endereco-topo h3,
#pagina-compra .frete-topo-compra h3,
#pagina-compra .compra-resumo-final h3 {
  margin: 0 !important;
  font-size: 22px !important;
  color: var(--na-text) !important;
}

#pagina-compra .compra-item-resumo {
  display: grid !important;
  grid-template-columns: minmax(0, 1.4fr) minmax(120px, 0.8fr) minmax(120px, 0.8fr) !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 16px !important;
  border-radius: 14px !important;
  background: var(--na-surface) !important;
}

#pagina-compra .compra-item-resumo-info {
  min-width: 0 !important;
}

#pagina-compra .compra-item-resumo-info strong {
  display: block !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

#pagina-compra .compra-item-resumo-unitario,
#pagina-compra .compra-item-resumo-total {
  text-align: right !important;
}

#pagina-compra .compra-subtotal-linha,
#pagina-compra .compra-total-linha {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  color: var(--na-text) !important;
}

#pagina-compra .compra-resumo-final {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

#pagina-compra .compra-resumo-final-topo {
  margin-bottom: 2px !important;
}

#pagina-compra .compra-total-linha-destaque {
  padding-top: 14px !important;
  margin-top: 4px !important;
  border-top: 1px solid var(--na-border) !important;
  font-size: 18px !important;
}

#pagina-compra .compra-total-linha-destaque strong {
  font-size: 24px !important;
  color: var(--na-primary) !important;
}

#pagina-compra .btn-finalizar-compra {
  height: 56px !important;
  margin-top: 6px !important;
  border-radius: 14px !important;
  background: var(--na-gradient-primary) !important;
}

@media (max-width: 760px) {
  #pagina-compra .compra-container {
    padding: 22px 16px 86px !important;
  }

  #pagina-compra .compra-card {
    grid-template-columns: 1fr !important;
    padding: 18px !important;
  }

  #pagina-compra .compra-esquerda {
    grid-template-columns: 96px minmax(0, 1fr) !important;
  }

  #pagina-compra .compra-imagem-box {
    width: 96px !important;
  }

  #pagina-compra .compra-direita {
    align-items: flex-start !important;
  }

  #pagina-compra .compra-item-resumo {
    grid-template-columns: 1fr !important;
  }

  #pagina-compra .compra-item-resumo-unitario,
  #pagina-compra .compra-item-resumo-total {
    text-align: left !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PÁGINA DE DETALHES DO PRODUTO — Redesign Nexa Aura
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Container principal da página ──────────────────────────────────────── */
#pagina-pedido { background: var(--na-bg) !important; overflow-x: hidden; }
.pd-page-inner {
  max-width: 1160px !important;
  margin: 0 auto !important;
  padding: 24px 28px 48px !important;
  box-sizing: border-box !important;
}

/* ── Breadcrumb ─────────────────────────────────────────────────────────── */
.pd-breadcrumb {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 20px !important;
  flex-wrap: wrap !important;
}
.pd-bc-btn {
  background: none !important;
  border: none !important;
  color: var(--na-primary) !important;
  font-size: 13px !important;
  font-family: var(--na-font) !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: opacity var(--na-transition) !important;
}
.pd-bc-btn:hover { opacity: 0.75 !important; }
.pd-bc-sep { color: var(--na-text-tertiary) !important; font-size: 13px !important; }
.pd-bc-item {
  color: var(--na-text-secondary) !important;
  font-size: 13px !important;
  font-family: var(--na-font) !important;
}
.pd-bc-atual { color: var(--na-text) !important; font-weight: 500 !important; }

/* ── Grade principal: galeria + informacoes ─────────────────────────────── */
.pd-main-grid {
  display: grid !important;
  grid-template-columns: minmax(420px, 520px) minmax(0, 1fr) !important;
  gap: 36px !important;
  align-items: start !important;
  margin-bottom: 24px !important;
}

/* ── Coluna Galeria ─────────────────────────────────────────────────────── */
.pd-col-galeria { position: relative !important; }

.pd-badges-flutuantes {
  position: absolute !important;
  top: 14px !important;
  left: 76px !important;
  z-index: 5 !important;
  display: flex !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  pointer-events: none !important;
}

/* Galeria wrapper: miniaturas verticais + imagem principal */
.pd-galeria-wrapper {
  display: flex !important;
  gap: 10px !important;
  align-items: flex-start !important;
}

/* Miniaturas verticais */
.pd-miniaturas-vertical {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 64px !important;
  flex-shrink: 0 !important;
  overflow-y: auto !important;
  max-height: 440px !important;
}
.pd-miniaturas-vertical .pedido-miniatura {
  width: 62px !important;
  height: 62px !important;
  border-radius: 10px !important;
  background: var(--na-surface-elevated) !important;
  border: 2px solid var(--na-border) !important;
  flex-shrink: 0 !important;
}
.pd-miniaturas-vertical .pedido-miniatura.ativa {
  border-color: var(--na-primary) !important;
  box-shadow: 0 0 0 3px var(--na-primary-dim) !important;
}

/* Caixa principal redesenhada */
.pd-imagem-box-redesign {
  flex: 1 !important;
  width: auto !important;
  min-width: 0 !important;
  height: 440px !important;
  background: var(--na-surface-elevated) !important;
  border: 1px solid var(--na-border) !important;
  border-radius: 20px !important;
  position: relative !important;
  overflow: hidden !important;
}
.pd-imagem-box-redesign .pedido-imagem {
  background: transparent !important;
}

/* Botão compartilhar (overlay no canto superior direito da imagem) */
.pd-btn-share {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 1px solid var(--na-border) !important;
  background: rgba(10,10,15,0.75) !important;
  backdrop-filter: blur(8px) !important;
  color: var(--na-text-secondary) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: var(--na-transition) !important;
  z-index: 4 !important;
  font-size: 11px !important;
  font-family: var(--na-font) !important;
  white-space: nowrap !important;
  padding: 0 !important;
}
.pd-btn-share:hover { background: rgba(10,10,15,0.92) !important; color: var(--na-text) !important; border-color: var(--na-primary) !important; }
.pd-btn-share.pd-btn-share-ok {
  background: rgba(34,197,94,0.9) !important;
  color: #ffffff !important;
  border-color: rgba(187,247,208,0.9) !important;
}

/* Botão favorito circular sobreposto (empilhado abaixo do compartilhar) */
.pd-btn-fav-img {
  position: absolute !important;
  top: 64px !important;
  right: 12px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 1px solid var(--na-border) !important;
  background: rgba(10,10,15,0.75) !important;
  backdrop-filter: blur(8px) !important;
  color: var(--na-text-secondary) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: var(--na-transition) !important;
  z-index: 4 !important;
  padding: 0 !important;
}
.pd-btn-fav-img:hover { background: rgba(10,10,15,0.92) !important; color: var(--na-text) !important; border-color: var(--na-primary) !important; }
.pd-btn-fav-img.ativo { color: #EF4444 !important; border-color: rgba(239,68,68,0.45) !important; background: rgba(239,68,68,0.12) !important; }
.pd-btn-fav-img.ativo path { fill: #EF4444 !important; stroke: #EF4444 !important; }
.pd-btn-fav-img path { transition: fill var(--na-transition), stroke var(--na-transition) !important; }

@media (min-width: 768px) {
  #pagina-pagamento.pagina-pagamento-cartao-desktop #bloco-cartao .desktop-mp-secure-field,
  #pagina-pagamento.pagina-pagamento-cartao-desktop #bloco-cartao .desktop-card-form input,
  #pagina-pagamento.pagina-pagamento-cartao-desktop #bloco-cartao .desktop-card-form select {
    background: rgba(15, 15, 24, 0.92) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: none !important;
  }

  #pagina-pagamento.pagina-pagamento-cartao-desktop #bloco-cartao .desktop-card-field-group label {
    color: #cbd5e1 !important;
    -webkit-text-fill-color: #cbd5e1 !important;
  }

  #pagina-pagamento.pagina-pagamento-cartao-desktop #bloco-cartao .desktop-card-form input::placeholder {
    color: #71717a !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #71717a !important;
  }
}

/* ============================================================
   Desktop checkout integrado: forma de pagamento no resumo
   Mobile permanece usando #card-pagamento-inline.
   ============================================================ */
@media (max-width: 767px) {
  #checkout-forma-pagamento-desktop {
    display: none !important;
  }
}

/* ============================================================
   Desktop: tela Salvar cartão com campos seguros MP sem skeleton infinito
   ============================================================ */
@media (min-width: 768px) {
  #pagina-pagamento.pagina-pagamento-cartao-desktop,
  #pagina-pagamento.pagina-pagamento-cartao-desktop.ativa {
    background:
      radial-gradient(circle at top right, rgba(124, 58, 237, 0.18), transparent 42%),
      radial-gradient(circle at bottom left, rgba(37, 99, 235, 0.12), transparent 36%),
      #0f0f17 !important;
    color: #f8fafc !important;
  }

  #pagina-pagamento.pagina-pagamento-cartao-desktop .pagina-pagamento-conteudo {
    width: min(760px, calc(100vw - 48px)) !important;
    max-width: 760px !important;
    margin: 32px auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #f8fafc !important;
  }

  #pagina-pagamento.pagina-pagamento-cartao-desktop .topo-pagamento {
    margin: 0 0 16px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    color: #f8fafc !important;
  }

  #pagina-pagamento.pagina-pagamento-cartao-desktop .topo-pagamento h2::after {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }

  #pagina-pagamento.pagina-pagamento-cartao-desktop .btn-fechar-pagamento {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #f8fafc !important;
    box-shadow: none !important;
  }

  #pagina-pagamento.pagina-pagamento-cartao-desktop #bloco-cartao {
    width: 100% !important;
    max-width: 760px !important;
    margin: 0 auto !important;
    padding: 26px !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, 0.045) !important;
    color: #f8fafc !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.32) !important;
  }

  #pagina-pagamento.pagina-pagamento-cartao-desktop #bloco-cartao h3 {
    margin: 0 0 18px !important;
    color: #ffffff !important;
    font-size: 21px !important;
    font-weight: 900 !important;
    -webkit-text-fill-color: #ffffff !important;
  }

  #pagina-pagamento.pagina-pagamento-cartao-desktop #cardPaymentBrick_container {
    display: none !important;
  }

  #pagina-pagamento.pagina-pagamento-cartao-desktop .desktop-card-loading,
  #pagina-pagamento.pagina-pagamento-cartao-desktop .desktop-card-error {
    min-height: 220px !important;
    display: grid !important;
    place-items: center !important;
    gap: 12px !important;
    padding: 28px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: rgba(15, 15, 24, 0.72) !important;
    color: #cbd5e1 !important;
    text-align: center !important;
  }

  #pagina-pagamento.pagina-pagamento-cartao-desktop .desktop-card-loading[hidden],
  #pagina-pagamento.pagina-pagamento-cartao-desktop .desktop-card-error[hidden] {
    display: none !important;
  }

  #pagina-pagamento.pagina-pagamento-cartao-desktop .desktop-card-spinner {
    width: 38px !important;
    height: 38px !important;
    border-radius: 999px !important;
    border: 4px solid rgba(124, 58, 237, 0.20) !important;
    border-top-color: #7c3aed !important;
    animation: desktop-card-spin 0.85s linear infinite !important;
  }

  #pagina-pagamento.pagina-pagamento-cartao-desktop .desktop-card-loading p,
  #pagina-pagamento.pagina-pagamento-cartao-desktop .desktop-card-error p {
    margin: 0 !important;
    color: #a1a1aa !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    -webkit-text-fill-color: #a1a1aa !important;
  }

  #pagina-pagamento.pagina-pagamento-cartao-desktop .desktop-card-error strong {
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    -webkit-text-fill-color: #ffffff !important;
  }

  #pagina-pagamento.pagina-pagamento-cartao-desktop #desktop-card-retry {
    min-height: 40px !important;
    padding: 0 16px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #f97316 !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    cursor: pointer !important;
  }

  #pagina-pagamento.pagina-pagamento-cartao-desktop .desktop-card-form {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    width: 100% !important;
    color: #f8fafc !important;
  }

  #pagina-pagamento.pagina-pagamento-cartao-desktop .desktop-card-form[hidden] {
    display: none !important;
  }

  #pagina-pagamento.pagina-pagamento-cartao-desktop .desktop-card-field-full {
    grid-column: 1 / -1 !important;
  }

  #pagina-pagamento.pagina-pagamento-cartao-desktop .desktop-card-row {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  #pagina-pagamento.pagina-pagamento-cartao-desktop .desktop-card-field-group {
    display: grid !important;
    gap: 7px !important;
    min-width: 0 !important;
  }

  #pagina-pagamento.pagina-pagamento-cartao-desktop .desktop-card-field-group label {
    color: #cbd5e1 !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    -webkit-text-fill-color: #cbd5e1 !important;
  }

  #pagina-pagamento.pagina-pagamento-cartao-desktop .desktop-mp-secure-field,
  #pagina-pagamento.pagina-pagamento-cartao-desktop .desktop-card-form input,
  #pagina-pagamento.pagina-pagamento-cartao-desktop .desktop-card-form select {
    width: 100% !important;
    min-width: 0 !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 14px !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 12px !important;
    background: rgba(15, 15, 24, 0.92) !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    -webkit-text-fill-color: #ffffff !important;
  }

  #pagina-pagamento.pagina-pagamento-cartao-desktop .desktop-mp-secure-field {
    padding: 0 12px !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
  }

  #pagina-pagamento.pagina-pagamento-cartao-desktop .desktop-mp-secure-field iframe {
    width: 100% !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    border: 0 !important;
    display: block !important;
  }

  #pagina-pagamento.pagina-pagamento-cartao-desktop .desktop-card-form input::placeholder {
    color: #71717a !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #71717a !important;
  }

  #pagina-pagamento.pagina-pagamento-cartao-desktop .desktop-mp-secure-field:focus-within,
  #pagina-pagamento.pagina-pagamento-cartao-desktop .desktop-card-form input:focus,
  #pagina-pagamento.pagina-pagamento-cartao-desktop .desktop-card-form select:focus {
    border-color: #7c3aed !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.16) !important;
    outline: none !important;
  }

  #pagina-pagamento.pagina-pagamento-cartao-desktop .desktop-document-row {
    display: grid !important;
    grid-template-columns: 94px minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  #pagina-pagamento.pagina-pagamento-cartao-desktop .campo-erro {
    border-color: #f97316 !important;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.16) !important;
  }

  #pagina-pagamento.pagina-pagamento-cartao-desktop .desktop-card-form-error {
    grid-column: 1 / -1 !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(249, 115, 22, 0.28) !important;
    background: rgba(249, 115, 22, 0.12) !important;
    color: #fed7aa !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
  }

  #pagina-pagamento.pagina-pagamento-cartao-desktop .desktop-card-form-error[hidden] {
    display: none !important;
  }

  #pagina-pagamento.pagina-pagamento-cartao-desktop .btn-salvar-cartao {
    grid-column: 1 / -1 !important;
    min-height: 48px !important;
    margin-top: 4px !important;
    border: none !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #7c3aed, #2563eb) !important;
    color: #ffffff !important;
    font-size: 15px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.22) !important;
    cursor: pointer !important;
    -webkit-text-fill-color: #ffffff !important;
  }

  #pagina-pagamento.pagina-pagamento-cartao-desktop .btn-salvar-cartao:disabled {
    cursor: progress !important;
    opacity: 0.72 !important;
  }

  @keyframes desktop-card-spin {
    to {
      transform: rotate(360deg);
    }
  }
}

@media (min-width: 768px) {
  #pagina-compra.pagina.ativa .checkout-forma-pagamento-desktop {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 22px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    color: #f8fafc !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22) !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  #pagina-compra.pagina.ativa .checkout-forma-pagamento-desktop h3 {
    margin: 0 0 14px !important;
    color: #ffffff !important;
    font-size: 22px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    -webkit-text-fill-color: #ffffff !important;
  }

  #pagina-compra.pagina.ativa .checkout-pagamento-desktop-opcoes {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    width: 100% !important;
  }

  #pagina-compra.pagina.ativa .pagamento-opcao-desktop {
    position: relative !important;
    display: block !important;
    min-width: 0 !important;
    min-height: 112px !important;
    padding: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    background: rgba(15, 15, 24, 0.92) !important;
    color: #ffffff !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease, transform 0.12s ease !important;
    box-sizing: border-box !important;
  }

  #pagina-compra.pagina.ativa .pagamento-opcao-desktop input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  #pagina-compra.pagina.ativa .pagamento-opcao-desktop:hover {
    border-color: rgba(124, 58, 237, 0.56) !important;
    background: rgba(124, 58, 237, 0.10) !important;
  }

  #pagina-compra.pagina.ativa .pagamento-opcao-desktop:active {
    transform: scale(0.99) !important;
  }

  #pagina-compra.pagina.ativa .pagamento-opcao-desktop.selected,
  #pagina-compra.pagina.ativa .pagamento-opcao-desktop.selecionado,
  #pagina-compra.pagina.ativa .pagamento-opcao-desktop:has(input[type="radio"]:checked) {
    border-color: #7c3aed !important;
    background: rgba(124, 58, 237, 0.16) !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12) !important;
  }

  #pagina-compra.pagina.ativa .pagamento-opcao-desktop-conteudo {
    display: grid !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #pagina-compra.pagina.ativa .pagamento-opcao-desktop-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #pagina-compra.pagina.ativa .pagamento-opcao-desktop strong {
    color: #ffffff !important;
    font-size: 17px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    -webkit-text-fill-color: #ffffff !important;
  }

  #pagina-compra.pagina.ativa .pagamento-opcao-desktop p,
  #pagina-compra.pagina.ativa .pagamento-opcao-desktop small {
    margin: 0 !important;
    color: #a1a1aa !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    -webkit-text-fill-color: #a1a1aa !important;
  }

  #pagina-compra.pagina.ativa .btn-adicionar-cartao-desktop,
  #pagina-compra.pagina.ativa .btn-editar-cartao-desktop {
    flex-shrink: 0 !important;
    min-height: 30px !important;
    height: 30px !important;
    padding: 0 13px !important;
    border: none !important;
    border-radius: 999px !important;
    background: #f97316 !important;
    color: #ffffff !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    box-shadow: 0 8px 18px rgba(249, 115, 22, 0.22) !important;
    cursor: pointer !important;
    -webkit-text-fill-color: #ffffff !important;
  }

  #pagina-compra.pagina.ativa .btn-adicionar-cartao-desktop[hidden],
  #pagina-compra.pagina.ativa .btn-editar-cartao-desktop[hidden] {
    display: none !important;
  }

  #pagina-compra.pagina.ativa .checkout-forma-pagamento-desktop.checkout-card-erro {
    border-color: #f97316 !important;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.16), 0 14px 34px rgba(0, 0, 0, 0.22) !important;
  }

  #pagina-pagamento.pagina-pagamento-cartao-desktop .pagamento-bloco:not(#bloco-cartao),
  #pagina-pagamento.pagina-pagamento-cartao-desktop .resumo-pagamento,
  #pagina-pagamento.pagina-pagamento-cartao-desktop .btn-confirmar-pagamento {
    display: none !important;
  }

  #pagina-pagamento.pagina-pagamento-cartao-desktop .topo-pagamento h2 {
    font-size: 0 !important;
  }

  #pagina-pagamento.pagina-pagamento-cartao-desktop .topo-pagamento h2::after {
    content: "Salvar cartão" !important;
    font-size: 28px !important;
  }
}

/* ============================================================
   Checkout mobile compacto: endereco + forma de pagamento
   Apenas ajustes visuais. Desktop e logica inalterados.
   ============================================================ */
@media (max-width: 767px) {
  #pagina-compra.pagina.ativa .endereco-box,
  #pagina-compra.pagina.ativa .pagamento-inline-box {
    min-height: auto !important;
  }

  #pagina-compra.pagina.ativa .endereco-topo {
    padding: 8px 12px 6px !important;
  }

  #pagina-compra.pagina.ativa .endereco-topo h3,
  #pagina-compra.pagina.ativa .pagamento-inline-label {
    font-size: 11px !important;
    line-height: 1 !important;
  }

  #pagina-compra.pagina.ativa .endereco-topo::after {
    height: 24px !important;
    line-height: 24px !important;
    padding: 0 9px !important;
    font-size: 10.5px !important;
  }

  #pagina-compra.pagina.ativa #endereco-preenchido {
    min-height: auto !important;
    padding: 10px 12px 10px 44px !important;
  }

  #pagina-compra.pagina.ativa #endereco-preenchido::before {
    left: 10px !important;
    top: 10px !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 10px !important;
    line-height: 28px !important;
    font-size: 13px !important;
  }

  #pagina-compra.pagina.ativa #mostrar-nome {
    font-size: 12px !important;
    line-height: 1.2 !important;
    margin: 0 0 2px !important;
  }

  #pagina-compra.pagina.ativa #mostrar-whats,
  #pagina-compra.pagina.ativa #mostrar-endereco,
  #pagina-compra.pagina.ativa #mostrar-localizacao {
    font-size: 11px !important;
    line-height: 1.28 !important;
    margin: 0 0 1px !important;
  }

  #pagina-compra.pagina.ativa #endereco-vazio {
    padding: 12px !important;
    margin: 4px !important;
    border-radius: 12px !important;
  }

  #pagina-compra.pagina.ativa #endereco-vazio strong {
    font-size: 13px !important;
    line-height: 1.2 !important;
    margin: 0 0 4px !important;
  }

  #pagina-compra.pagina.ativa #endereco-vazio p {
    font-size: 11px !important;
    line-height: 1.3 !important;
    margin: 0 0 10px !important;
  }

  #pagina-compra.pagina.ativa .endereco-vazio-btn {
    min-height: 36px !important;
    padding: 0 12px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    line-height: 36px !important;
  }

  #pagina-compra.pagina.ativa .pagamento-inline-topo-row {
    padding: 8px 12px !important;
    gap: 8px !important;
  }

  #pagina-compra.pagina.ativa .pagamento-inline-label-group {
    gap: 2px !important;
  }

  #pagina-compra.pagina.ativa .pagamento-inline-sub {
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  #pagina-compra.pagina.ativa .pagamento-inline-pill-btn {
    height: 26px !important;
    min-height: 26px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
    line-height: 26px !important;
  }

  #pagina-compra.pagina.ativa .pagamento-inline-secao-titulo {
    padding: 10px 12px 6px !important;
    font-size: 13px !important;
    line-height: 1 !important;
  }

  #pagina-compra.pagina.ativa .pagamento-inline-opcoes {
    gap: 6px !important;
    padding: 0 8px 10px !important;
  }

  #pagina-compra.pagina.ativa .pagamento-inline-opcao {
    min-height: auto !important;
    padding: 10px 12px !important;
    border-radius: 14px !important;
  }

  #pagina-compra.pagina.ativa .pagamento-inline-opcao-conteudo {
    gap: 2px !important;
  }

  #pagina-compra.pagina.ativa .pagamento-opcao-header {
    gap: 8px !important;
    margin-bottom: 3px !important;
  }

  #pagina-compra.pagina.ativa .pagamento-opcao-titulo,
  #pagina-compra.pagina.ativa .pagamento-inline-opcao-conteudo strong {
    gap: 7px !important;
    font-size: 13px !important;
    line-height: 1.15 !important;
  }

  #pagina-compra.pagina.ativa .pagamento-metodo-simbolo {
    width: 16px !important;
    height: 16px !important;
    font-size: 14px !important;
  }

  #pagina-compra.pagina.ativa .pagamento-opcao-subtitulo,
  #pagina-compra.pagina.ativa .pagamento-inline-opcao-conteudo span:not(.pagamento-metodo-simbolo),
  #pagina-compra.pagina.ativa .pagamento-opcao-vazio,
  #pagina-compra.pagina.ativa .pagamento-opcao-detalhe,
  #pagina-compra.pagina.ativa .pagamento-inline-card-detail {
    font-size: 11px !important;
    line-height: 1.25 !important;
    margin-top: 2px !important;
  }

  #pagina-compra.pagina.ativa .btn-adicionar-cartao,
  #pagina-compra.pagina.ativa .btn-editar-cartao {
    min-height: 24px !important;
    height: 24px !important;
    padding: 0 9px !important;
    font-size: 10.5px !important;
    border-radius: 999px !important;
  }
}

/* ============================================================
   Home mobile redesign - camada final no fim da cascata.
   Somente mobile; preserva estrutura, dados e eventos existentes.
   ============================================================ */
@media (max-width: 767px) {
  body:not(.nexa-carrinho-ativa):not(.nexa-mensagens-ativa):not(.nexa-configuracoes-ativa):not(.nexa-avisos-ativa):not(.nexa-produto-ativa):not(.nexa-compra-ativa) {
    background: #f6f7fb !important;
  }

  body:not(.nexa-carrinho-ativa):not(.nexa-mensagens-ativa):not(.nexa-configuracoes-ativa):not(.nexa-avisos-ativa):not(.nexa-produto-ativa):not(.nexa-compra-ativa) .topo {
    position: sticky !important;
    top: 0 !important;
    z-index: 70 !important;
    height: auto !important;
    min-height: 140px !important;
    padding: calc(20px + env(safe-area-inset-top, 0px)) 18px 14px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "brand icons"
      "search search" !important;
    align-items: center !important;
    gap: 18px 14px !important;
    background: linear-gradient(180deg, #f7f7ff 0%, #f5f7ff 58%, rgba(246, 247, 251, 0.94) 100%) !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body:not(.nexa-carrinho-ativa):not(.nexa-mensagens-ativa):not(.nexa-configuracoes-ativa):not(.nexa-avisos-ativa):not(.nexa-produto-ativa):not(.nexa-compra-ativa) .topo::before {
    content: "Nexa Story" !important;
    grid-area: brand !important;
    display: block !important;
    min-width: 0 !important;
    font-size: clamp(30px, 9vw, 40px) !important;
    font-weight: 950 !important;
    line-height: 0.96 !important;
    letter-spacing: 0 !important;
    background: linear-gradient(135deg, #7c3aed 0%, #2563eb 58%, #1d4ed8 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
  }

  body:not(.nexa-carrinho-ativa):not(.nexa-mensagens-ativa):not(.nexa-configuracoes-ativa):not(.nexa-avisos-ativa):not(.nexa-produto-ativa):not(.nexa-compra-ativa) .topo .busca-box {
    grid-area: search !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  body:not(.nexa-carrinho-ativa):not(.nexa-mensagens-ativa):not(.nexa-configuracoes-ativa):not(.nexa-avisos-ativa):not(.nexa-produto-ativa):not(.nexa-compra-ativa) .busca-input-wrap {
    width: 100% !important;
    height: 64px !important;
    min-height: 64px !important;
    padding: 0 18px !important;
    gap: 14px !important;
    border-radius: 24px !important;
    border: 1px solid rgba(148, 163, 184, 0.12) !important;
    background: #ffffff !important;
    color: #7c3aed !important;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.07) !important;
  }

  body:not(.nexa-carrinho-ativa):not(.nexa-mensagens-ativa):not(.nexa-configuracoes-ativa):not(.nexa-avisos-ativa):not(.nexa-produto-ativa):not(.nexa-compra-ativa) .busca-input-wrap > svg {
    width: 27px !important;
    height: 27px !important;
    color: #7c3aed !important;
    stroke-width: 2.4 !important;
    flex: 0 0 auto !important;
  }

  body:not(.nexa-carrinho-ativa):not(.nexa-mensagens-ativa):not(.nexa-configuracoes-ativa):not(.nexa-avisos-ativa):not(.nexa-produto-ativa):not(.nexa-compra-ativa) .busca-input-wrap input {
    min-width: 0 !important;
    height: 100% !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
  }

  body:not(.nexa-carrinho-ativa):not(.nexa-mensagens-ativa):not(.nexa-configuracoes-ativa):not(.nexa-avisos-ativa):not(.nexa-produto-ativa):not(.nexa-compra-ativa) .busca-input-wrap input::placeholder {
    color: #9ca3af !important;
    opacity: 1 !important;
  }

  body:not(.nexa-carrinho-ativa):not(.nexa-mensagens-ativa):not(.nexa-configuracoes-ativa):not(.nexa-avisos-ativa):not(.nexa-produto-ativa):not(.nexa-compra-ativa) .limpar-busca {
    color: #94a3b8 !important;
  }

  body:not(.nexa-carrinho-ativa):not(.nexa-mensagens-ativa):not(.nexa-configuracoes-ativa):not(.nexa-avisos-ativa):not(.nexa-produto-ativa):not(.nexa-compra-ativa) .topo-icons {
    grid-area: icons !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0 !important;
  }

  body:not(.nexa-carrinho-ativa):not(.nexa-mensagens-ativa):not(.nexa-configuracoes-ativa):not(.nexa-avisos-ativa):not(.nexa-produto-ativa):not(.nexa-compra-ativa) .topo-icons #btn-favoritos-topo,
  body:not(.nexa-carrinho-ativa):not(.nexa-mensagens-ativa):not(.nexa-configuracoes-ativa):not(.nexa-avisos-ativa):not(.nexa-produto-ativa):not(.nexa-compra-ativa) .topo-icons #btn-carrinho-topo {
    display: none !important;
  }

  body:not(.nexa-carrinho-ativa):not(.nexa-mensagens-ativa):not(.nexa-configuracoes-ativa):not(.nexa-avisos-ativa):not(.nexa-produto-ativa):not(.nexa-compra-ativa) .topo-profile-btn {
    display: inline-flex !important;
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    min-height: 54px !important;
    border-radius: 999px !important;
    padding: 3px !important;
    border: 3px solid #7c3aed !important;
    background: #ffffff !important;
    color: #7c3aed !important;
    box-shadow: 0 12px 28px rgba(124, 58, 237, 0.20) !important;
    overflow: hidden !important;
  }

  body:not(.nexa-carrinho-ativa):not(.nexa-mensagens-ativa):not(.nexa-configuracoes-ativa):not(.nexa-avisos-ativa):not(.nexa-produto-ativa):not(.nexa-compra-ativa) .topo-profile-btn .topo-profile-initial {
    width: 100% !important;
    height: 100% !important;
    border-radius: 999px !important;
    display: grid !important;
    place-items: center !important;
    background: linear-gradient(135deg, #eef2ff, #ffffff) !important;
    color: #6d28d9 !important;
    -webkit-text-fill-color: #6d28d9 !important;
    font-size: 20px !important;
    font-weight: 950 !important;
  }

  body:not(.nexa-carrinho-ativa):not(.nexa-mensagens-ativa):not(.nexa-configuracoes-ativa):not(.nexa-avisos-ativa):not(.nexa-produto-ativa):not(.nexa-compra-ativa) .topo-profile-btn.has-photo .topo-profile-img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 999px !important;
    object-fit: cover !important;
    display: block !important;
  }

  #pagina-home.pagina,
  [data-theme="light"] #pagina-home.pagina {
    background: #f6f7fb !important;
    color: #111827 !important;
    overflow-x: hidden !important;
    padding-bottom: calc(98px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #pagina-home .home-section-header {
    display: none !important;
  }

  #mobile-promos.bc-wrapper:not([hidden]) {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    margin: 14px 18px 22px !important;
    padding: 0 !important;
    border-radius: 24px !important;
    overflow: visible !important;
    background: transparent !important;
    box-shadow: 0 18px 36px rgba(71, 85, 105, 0.14) !important;
  }

  #mobile-promos .bc-clip {
    width: 100% !important;
    height: clamp(190px, 52vw, 230px) !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    background:
      radial-gradient(circle at 78% 42%, rgba(255, 255, 255, 0.88) 0 25%, transparent 26%),
      linear-gradient(135deg, #7c3aed 0%, #2563eb 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.75) !important;
  }

  #mobile-promos .bc-track,
  #mobile-promos .bc-slide {
    height: 100% !important;
  }

  #mobile-promos .bc-slide {
    min-height: 100% !important;
    background-size: cover !important;
    background-position: center right !important;
  }

  #mobile-promos .bc-slide:not(.bc-slide--has-img) {
    background:
      radial-gradient(circle at 78% 42%, rgba(255, 255, 255, 0.84) 0 25%, rgba(255, 255, 255, 0.18) 26%, transparent 48%),
      linear-gradient(135deg, #7c3aed 0%, #2563eb 100%) !important;
  }

  #mobile-promos .bc-slide--has-img::before {
    background:
      linear-gradient(90deg, rgba(109, 40, 217, 0.92) 0%, rgba(37, 99, 235, 0.72) 43%, rgba(255, 255, 255, 0.08) 100%),
      linear-gradient(180deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.18)) !important;
  }

  #mobile-promos .bc-slide-inner {
    left: 32px !important;
    top: 50% !important;
    bottom: auto !important;
    right: auto !important;
    transform: translateY(-50%) !important;
    width: min(58%, 250px) !important;
    max-width: 250px !important;
    padding: 0 !important;
    gap: 10px !important;
    align-items: flex-start !important;
  }

  #mobile-promos .bc-tag {
    min-height: 30px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.16) !important;
    border: 1px solid rgba(255, 255, 255, 0.30) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  #mobile-promos .bc-title {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: clamp(30px, 8.5vw, 42px) !important;
    font-weight: 950 !important;
    line-height: 0.98 !important;
    letter-spacing: 0 !important;
    text-shadow: 0 7px 24px rgba(30, 41, 59, 0.22) !important;
  }

  #mobile-promos .bc-text {
    color: rgba(255, 255, 255, 0.92) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.92) !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    opacity: 1 !important;
  }

  #mobile-promos .bc-cta {
    min-height: 44px !important;
    padding: 0 18px !important;
    margin-top: 8px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    border: 0 !important;
    color: #7c3aed !important;
    -webkit-text-fill-color: #7c3aed !important;
    box-shadow: 0 12px 24px rgba(30, 41, 59, 0.18) !important;
    font-size: 15px !important;
    font-weight: 950 !important;
  }

  #mobile-promos .bc-dots {
    bottom: 20px !important;
    padding: 6px 9px !important;
    gap: 8px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.72) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }

  #mobile-promos .bc-dot {
    width: 9px !important;
    height: 9px !important;
    max-width: 9px !important;
    max-height: 9px !important;
    min-width: 9px !important;
    min-height: 9px !important;
    background: #cbd5e1 !important;
    border-radius: 999px !important;
  }

  #mobile-promos .bc-dot.ativa {
    width: 24px !important;
    max-width: 24px !important;
    background: #7c3aed !important;
  }

  #pagina-home #grade-produtos,
  [data-theme="light"] #pagina-home #grade-produtos {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    padding: 14px 18px 28px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  #pagina-home .produto-card,
  [data-theme="light"] #pagina-home .produto-card {
    position: relative !important;
    min-width: 0 !important;
    min-height: 240px !important;
    padding: 14px !important;
    border-radius: 24px !important;
    border: 1px solid rgba(226, 232, 240, 0.78) !important;
    background: #ffffff !important;
    background-image: none !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    transform: none !important;
  }

  #pagina-home .produto-card:active,
  [data-theme="light"] #pagina-home .produto-card:active {
    transform: scale(0.985) !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.10) !important;
  }

  #pagina-home .produto-card-badges,
  #pagina-home .produto-btn-fav,
  [data-theme="light"] #pagina-home .produto-card-badges,
  [data-theme="light"] #pagina-home .produto-btn-fav {
    display: none !important;
  }

  #pagina-home .produto-img-wrap,
  [data-theme="light"] #pagina-home .produto-img-wrap {
    width: 100% !important;
    height: 132px !important;
    min-height: 132px !important;
    margin: 0 0 14px !important;
    padding: 10px !important;
    border-radius: 20px !important;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.88) !important;
    box-shadow: inset 0 0 0 1px rgba(226, 232, 240, 0.55) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  #pagina-home .produto-img-halo,
  [data-theme="light"] #pagina-home .produto-img-halo {
    display: none !important;
  }

  #pagina-home .imagem-produto,
  [data-theme="light"] #pagina-home .imagem-produto {
    width: 100% !important;
    height: 112px !important;
    max-height: 112px !important;
    object-fit: contain !important;
    padding: 0 !important;
    display: block !important;
  }

  #pagina-home .produto-card-body,
  [data-theme="light"] #pagina-home .produto-card-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  #pagina-home .nome-produto,
  [data-theme="light"] #pagina-home .nome-produto {
    margin: 0 0 6px !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    font-size: 16px !important;
    font-weight: 950 !important;
    line-height: 1.14 !important;
    letter-spacing: 0 !important;
  }

  #pagina-home .marca-produto,
  [data-theme="light"] #pagina-home .marca-produto {
    margin: 0 0 12px !important;
    color: #9ca3af !important;
    -webkit-text-fill-color: #9ca3af !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
  }

  #pagina-home .produto-card-footer,
  [data-theme="light"] #pagina-home .produto-card-footer {
    margin-top: auto !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }

  #pagina-home .preco-produto,
  [data-theme="light"] #pagina-home .preco-produto {
    color: #F97316 !important;
    -webkit-text-fill-color: #F97316 !important;
    font-size: 17px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
  }

  #pagina-home .produto-btn-cart,
  [data-theme="light"] #pagina-home .produto-btn-cart {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    border-radius: 16px !important;
    border: 0 !important;
    background: linear-gradient(135deg, #7c3aed 0%, #2563eb 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 12px 24px rgba(88, 28, 135, 0.24) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
  }

  #pagina-home .produto-btn-cart svg,
  [data-theme="light"] #pagina-home .produto-btn-cart svg {
    width: 25px !important;
    height: 25px !important;
    stroke-width: 2.2 !important;
  }

  @media (max-width: 374px) {
    body:not(.nexa-carrinho-ativa):not(.nexa-mensagens-ativa):not(.nexa-configuracoes-ativa):not(.nexa-avisos-ativa):not(.nexa-produto-ativa):not(.nexa-compra-ativa) .topo {
      padding-left: 14px !important;
      padding-right: 14px !important;
    }

    #pagina-home #grade-produtos {
      gap: 12px !important;
      padding-left: 14px !important;
      padding-right: 14px !important;
    }

    #pagina-home .produto-card {
      padding: 12px !important;
      border-radius: 22px !important;
    }

    #pagina-home .produto-img-wrap {
      height: 116px !important;
      min-height: 116px !important;
    }

    #pagina-home .imagem-produto {
      height: 98px !important;
      max-height: 98px !important;
    }

    #pagina-home .nome-produto {
      font-size: 14px !important;
    }

    #pagina-home .marca-produto {
      font-size: 12px !important;
    }

    #pagina-home .preco-produto {
      font-size: 15px !important;
    }

    #pagina-home .produto-btn-cart {
      width: 46px !important;
      height: 46px !important;
      min-width: 46px !important;
      min-height: 46px !important;
      border-radius: 14px !important;
    }
  }

  .caixa {
    height: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
    min-height: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 6px 12px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    border-top: 1px solid rgba(226, 232, 240, 0.78) !important;
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 -12px 36px rgba(15, 23, 42, 0.10) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
  }

  .sidebar-nav-items {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 4px !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
  }

  .caixa .menu-btn {
    min-width: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 7px 2px 4px !important;
    border-radius: 18px !important;
    background: transparent !important;
    color: #8b95a1 !important;
    -webkit-text-fill-color: #8b95a1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    overflow: visible !important;
  }

  .caixa .menu-btn::before {
    display: none !important;
    content: none !important;
  }

  .caixa .menu-btn svg {
    width: 30px !important;
    height: 30px !important;
    margin: 0 !important;
    filter: none !important;
  }

  .caixa .menu-btn > span:not(.sidebar-badge) {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .caixa .menu-btn.ativo {
    color: #6d28d9 !important;
    -webkit-text-fill-color: #6d28d9 !important;
    background: transparent !important;
  }

  .caixa .menu-btn.ativo svg {
    color: #6d28d9 !important;
    filter: drop-shadow(0 8px 14px rgba(109, 40, 217, 0.18)) !important;
  }

  .caixa .sidebar-badge,
  .menu-badge-notificacoes {
    top: 7px !important;
    right: 18px !important;
    border-color: #ffffff !important;
    background: #F97316 !important;
  }
}

/* ============================================================
   Home mobile redesign - visual claro estilo marketplace app.
   Somente mobile; preserva HTML, dados e eventos existentes.
   ============================================================ */
@media (max-width: 767px) {
  body:not(.nexa-carrinho-ativa):not(.nexa-mensagens-ativa):not(.nexa-configuracoes-ativa):not(.nexa-avisos-ativa):not(.nexa-produto-ativa):not(.nexa-compra-ativa) {
    background: #f6f7fb !important;
  }

  body:not(.nexa-carrinho-ativa):not(.nexa-mensagens-ativa):not(.nexa-configuracoes-ativa):not(.nexa-avisos-ativa):not(.nexa-produto-ativa):not(.nexa-compra-ativa) .topo {
    position: sticky !important;
    top: 0 !important;
    z-index: 70 !important;
    height: auto !important;
    min-height: 140px !important;
    padding: calc(20px + env(safe-area-inset-top, 0px)) 18px 14px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "brand icons"
      "search search" !important;
    align-items: center !important;
    gap: 18px 14px !important;
    background: linear-gradient(180deg, #f7f7ff 0%, #f5f7ff 58%, rgba(246, 247, 251, 0.94) 100%) !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body:not(.nexa-carrinho-ativa):not(.nexa-mensagens-ativa):not(.nexa-configuracoes-ativa):not(.nexa-avisos-ativa):not(.nexa-produto-ativa):not(.nexa-compra-ativa) .topo::before {
    content: "Nexa Story" !important;
    grid-area: brand !important;
    display: block !important;
    min-width: 0 !important;
    font-size: clamp(30px, 9vw, 40px) !important;
    font-weight: 950 !important;
    line-height: 0.96 !important;
    letter-spacing: 0 !important;
    background: linear-gradient(135deg, #7c3aed 0%, #2563eb 58%, #1d4ed8 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
  }

  body:not(.nexa-carrinho-ativa):not(.nexa-mensagens-ativa):not(.nexa-configuracoes-ativa):not(.nexa-avisos-ativa):not(.nexa-produto-ativa):not(.nexa-compra-ativa) .topo .busca-box {
    grid-area: search !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    position: relative !important;
  }

  body:not(.nexa-carrinho-ativa):not(.nexa-mensagens-ativa):not(.nexa-configuracoes-ativa):not(.nexa-avisos-ativa):not(.nexa-produto-ativa):not(.nexa-compra-ativa) .busca-input-wrap {
    width: 100% !important;
    height: 64px !important;
    min-height: 64px !important;
    padding: 0 18px !important;
    gap: 14px !important;
    border-radius: 24px !important;
    border: 1px solid rgba(148, 163, 184, 0.12) !important;
    background: #ffffff !important;
    color: #7c3aed !important;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.07) !important;
  }

  body:not(.nexa-carrinho-ativa):not(.nexa-mensagens-ativa):not(.nexa-configuracoes-ativa):not(.nexa-avisos-ativa):not(.nexa-produto-ativa):not(.nexa-compra-ativa) .busca-input-wrap > svg {
    width: 27px !important;
    height: 27px !important;
    color: #7c3aed !important;
    stroke-width: 2.4 !important;
    flex: 0 0 auto !important;
  }

  body:not(.nexa-carrinho-ativa):not(.nexa-mensagens-ativa):not(.nexa-configuracoes-ativa):not(.nexa-avisos-ativa):not(.nexa-produto-ativa):not(.nexa-compra-ativa) .busca-input-wrap input {
    min-width: 0 !important;
    height: 100% !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
  }

  body:not(.nexa-carrinho-ativa):not(.nexa-mensagens-ativa):not(.nexa-configuracoes-ativa):not(.nexa-avisos-ativa):not(.nexa-produto-ativa):not(.nexa-compra-ativa) .busca-input-wrap input::placeholder {
    color: #9ca3af !important;
    opacity: 1 !important;
  }

  body:not(.nexa-carrinho-ativa):not(.nexa-mensagens-ativa):not(.nexa-configuracoes-ativa):not(.nexa-avisos-ativa):not(.nexa-produto-ativa):not(.nexa-compra-ativa) .limpar-busca {
    color: #94a3b8 !important;
  }

  body:not(.nexa-carrinho-ativa):not(.nexa-mensagens-ativa):not(.nexa-configuracoes-ativa):not(.nexa-avisos-ativa):not(.nexa-produto-ativa):not(.nexa-compra-ativa) .topo-icons {
    grid-area: icons !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0 !important;
  }

  body:not(.nexa-carrinho-ativa):not(.nexa-mensagens-ativa):not(.nexa-configuracoes-ativa):not(.nexa-avisos-ativa):not(.nexa-produto-ativa):not(.nexa-compra-ativa) .topo-icons #btn-favoritos-topo,
  body:not(.nexa-carrinho-ativa):not(.nexa-mensagens-ativa):not(.nexa-configuracoes-ativa):not(.nexa-avisos-ativa):not(.nexa-produto-ativa):not(.nexa-compra-ativa) .topo-icons #btn-carrinho-topo {
    display: none !important;
  }

  body:not(.nexa-carrinho-ativa):not(.nexa-mensagens-ativa):not(.nexa-configuracoes-ativa):not(.nexa-avisos-ativa):not(.nexa-produto-ativa):not(.nexa-compra-ativa) .topo-profile-btn {
    display: inline-flex !important;
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    min-height: 54px !important;
    border-radius: 999px !important;
    padding: 3px !important;
    border: 3px solid #7c3aed !important;
    background: #ffffff !important;
    color: #7c3aed !important;
    box-shadow: 0 12px 28px rgba(124, 58, 237, 0.20) !important;
    overflow: hidden !important;
  }

  body:not(.nexa-carrinho-ativa):not(.nexa-mensagens-ativa):not(.nexa-configuracoes-ativa):not(.nexa-avisos-ativa):not(.nexa-produto-ativa):not(.nexa-compra-ativa) .topo-profile-btn .topo-profile-initial {
    width: 100% !important;
    height: 100% !important;
    border-radius: 999px !important;
    display: grid !important;
    place-items: center !important;
    background: linear-gradient(135deg, #eef2ff, #ffffff) !important;
    color: #6d28d9 !important;
    -webkit-text-fill-color: #6d28d9 !important;
    font-size: 20px !important;
    font-weight: 950 !important;
  }

  body:not(.nexa-carrinho-ativa):not(.nexa-mensagens-ativa):not(.nexa-configuracoes-ativa):not(.nexa-avisos-ativa):not(.nexa-produto-ativa):not(.nexa-compra-ativa) .topo-profile-btn.has-photo .topo-profile-img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 999px !important;
    object-fit: cover !important;
    display: block !important;
  }

  #pagina-home.pagina,
  [data-theme="light"] #pagina-home.pagina {
    background: #f6f7fb !important;
    color: #111827 !important;
    overflow-x: hidden !important;
    padding-bottom: calc(98px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #pagina-home.pagina.ativa {
    display: block !important;
  }

  #pagina-home .home-section-header {
    display: none !important;
  }

  #mobile-promos.bc-wrapper:not([hidden]) {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    margin: 14px 18px 22px !important;
    padding: 0 !important;
    border-radius: 24px !important;
    overflow: visible !important;
    background: transparent !important;
    box-shadow: 0 18px 36px rgba(71, 85, 105, 0.14) !important;
  }

  #mobile-promos .bc-clip {
    width: 100% !important;
    height: clamp(190px, 52vw, 230px) !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    background:
      radial-gradient(circle at 78% 42%, rgba(255, 255, 255, 0.88) 0 25%, transparent 26%),
      linear-gradient(135deg, #7c3aed 0%, #2563eb 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.75) !important;
  }

  #mobile-promos .bc-track,
  #mobile-promos .bc-slide {
    height: 100% !important;
  }

  #mobile-promos .bc-slide {
    min-height: 100% !important;
    background-size: cover !important;
    background-position: center right !important;
  }

  #mobile-promos .bc-slide:not(.bc-slide--has-img) {
    background:
      radial-gradient(circle at 78% 42%, rgba(255, 255, 255, 0.84) 0 25%, rgba(255, 255, 255, 0.18) 26%, transparent 48%),
      linear-gradient(135deg, #7c3aed 0%, #2563eb 100%) !important;
  }

  #mobile-promos .bc-slide--has-img::before {
    background:
      linear-gradient(90deg, rgba(109, 40, 217, 0.92) 0%, rgba(37, 99, 235, 0.72) 43%, rgba(255, 255, 255, 0.08) 100%),
      linear-gradient(180deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.18)) !important;
  }

  #mobile-promos .bc-slide-inner {
    left: 32px !important;
    top: 50% !important;
    bottom: auto !important;
    right: auto !important;
    transform: translateY(-50%) !important;
    width: min(58%, 250px) !important;
    max-width: 250px !important;
    padding: 0 !important;
    gap: 10px !important;
    align-items: flex-start !important;
  }

  #mobile-promos .bc-tag {
    min-height: 30px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.16) !important;
    border: 1px solid rgba(255, 255, 255, 0.30) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  #mobile-promos .bc-title {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: clamp(30px, 8.5vw, 42px) !important;
    font-weight: 950 !important;
    line-height: 0.98 !important;
    letter-spacing: 0 !important;
    text-shadow: 0 7px 24px rgba(30, 41, 59, 0.22) !important;
  }

  #mobile-promos .bc-text {
    color: rgba(255, 255, 255, 0.92) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.92) !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    opacity: 1 !important;
  }

  #mobile-promos .bc-cta {
    min-height: 44px !important;
    padding: 0 18px !important;
    margin-top: 8px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    border: 0 !important;
    color: #7c3aed !important;
    -webkit-text-fill-color: #7c3aed !important;
    box-shadow: 0 12px 24px rgba(30, 41, 59, 0.18) !important;
    font-size: 15px !important;
    font-weight: 950 !important;
  }

  #mobile-promos .bc-dots {
    bottom: 20px !important;
    padding: 6px 9px !important;
    gap: 8px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.72) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }

  #mobile-promos .bc-dot {
    width: 9px !important;
    height: 9px !important;
    max-width: 9px !important;
    max-height: 9px !important;
    min-width: 9px !important;
    min-height: 9px !important;
    background: #cbd5e1 !important;
    border-radius: 999px !important;
  }

  #mobile-promos .bc-dot.ativa {
    width: 24px !important;
    max-width: 24px !important;
    background: #7c3aed !important;
  }

  #pagina-home #grade-produtos,
  [data-theme="light"] #pagina-home #grade-produtos {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    padding: 14px 18px 28px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  #pagina-home .produto-card,
  [data-theme="light"] #pagina-home .produto-card {
    position: relative !important;
    min-width: 0 !important;
    min-height: 240px !important;
    padding: 14px !important;
    border-radius: 24px !important;
    border: 1px solid rgba(226, 232, 240, 0.78) !important;
    background: #ffffff !important;
    background-image: none !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    transform: none !important;
  }

  #pagina-home .produto-card:active,
  [data-theme="light"] #pagina-home .produto-card:active {
    transform: scale(0.985) !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.10) !important;
  }

  #pagina-home .produto-card-badges,
  #pagina-home .produto-btn-fav,
  [data-theme="light"] #pagina-home .produto-card-badges,
  [data-theme="light"] #pagina-home .produto-btn-fav {
    display: none !important;
  }

  #pagina-home .produto-img-wrap,
  [data-theme="light"] #pagina-home .produto-img-wrap {
    width: 100% !important;
    height: 132px !important;
    min-height: 132px !important;
    margin: 0 0 14px !important;
    padding: 10px !important;
    border-radius: 20px !important;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.88) !important;
    box-shadow: inset 0 0 0 1px rgba(226, 232, 240, 0.55) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  #pagina-home .produto-img-halo,
  [data-theme="light"] #pagina-home .produto-img-halo {
    display: none !important;
  }

  #pagina-home .imagem-produto,
  [data-theme="light"] #pagina-home .imagem-produto {
    width: 100% !important;
    height: 112px !important;
    max-height: 112px !important;
    object-fit: contain !important;
    padding: 0 !important;
    display: block !important;
  }

  #pagina-home .produto-card-body,
  [data-theme="light"] #pagina-home .produto-card-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  #pagina-home .nome-produto,
  [data-theme="light"] #pagina-home .nome-produto {
    margin: 0 0 6px !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    font-size: 16px !important;
    font-weight: 950 !important;
    line-height: 1.14 !important;
    letter-spacing: 0 !important;
  }

  #pagina-home .marca-produto,
  [data-theme="light"] #pagina-home .marca-produto {
    margin: 0 0 12px !important;
    color: #9ca3af !important;
    -webkit-text-fill-color: #9ca3af !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
  }

  #pagina-home .produto-card-footer,
  [data-theme="light"] #pagina-home .produto-card-footer {
    margin-top: auto !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }

  #pagina-home .preco-produto,
  [data-theme="light"] #pagina-home .preco-produto {
    color: #F97316 !important;
    -webkit-text-fill-color: #F97316 !important;
    font-size: 17px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
  }

  #pagina-home .produto-btn-cart,
  [data-theme="light"] #pagina-home .produto-btn-cart {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    border-radius: 16px !important;
    border: 0 !important;
    background: linear-gradient(135deg, #7c3aed 0%, #2563eb 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 12px 24px rgba(88, 28, 135, 0.24) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
  }

  #pagina-home .produto-btn-cart svg,
  [data-theme="light"] #pagina-home .produto-btn-cart svg {
    width: 25px !important;
    height: 25px !important;
    stroke-width: 2.2 !important;
  }

  @media (max-width: 374px) {
    body:not(.nexa-carrinho-ativa):not(.nexa-mensagens-ativa):not(.nexa-configuracoes-ativa):not(.nexa-avisos-ativa):not(.nexa-produto-ativa):not(.nexa-compra-ativa) .topo {
      padding-left: 14px !important;
      padding-right: 14px !important;
    }

    #pagina-home #grade-produtos {
      gap: 12px !important;
      padding-left: 14px !important;
      padding-right: 14px !important;
    }

    #pagina-home .produto-card {
      padding: 12px !important;
      border-radius: 22px !important;
    }

    #pagina-home .produto-img-wrap {
      height: 116px !important;
      min-height: 116px !important;
    }

    #pagina-home .imagem-produto {
      height: 98px !important;
      max-height: 98px !important;
    }

    #pagina-home .nome-produto {
      font-size: 14px !important;
    }

    #pagina-home .marca-produto {
      font-size: 12px !important;
    }

    #pagina-home .preco-produto {
      font-size: 15px !important;
    }

    #pagina-home .produto-btn-cart {
      width: 46px !important;
      height: 46px !important;
      min-width: 46px !important;
      min-height: 46px !important;
      border-radius: 14px !important;
    }
  }

  .caixa {
    height: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
    min-height: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 6px 12px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    border-top: 1px solid rgba(226, 232, 240, 0.78) !important;
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 -12px 36px rgba(15, 23, 42, 0.10) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
  }

  .sidebar-nav-items {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 4px !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
  }

  .caixa .menu-btn {
    min-width: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 7px 2px 4px !important;
    border-radius: 18px !important;
    background: transparent !important;
    color: #8b95a1 !important;
    -webkit-text-fill-color: #8b95a1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    overflow: visible !important;
  }

  .caixa .menu-btn::before {
    display: none !important;
    content: none !important;
  }

  .caixa .menu-btn svg {
    width: 30px !important;
    height: 30px !important;
    margin: 0 !important;
    filter: none !important;
  }

  .caixa .menu-btn > span:not(.sidebar-badge) {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .caixa .menu-btn.ativo {
    color: #6d28d9 !important;
    -webkit-text-fill-color: #6d28d9 !important;
    background: transparent !important;
  }

  .caixa .menu-btn.ativo svg {
    color: #6d28d9 !important;
    filter: drop-shadow(0 8px 14px rgba(109, 40, 217, 0.18)) !important;
  }

  .caixa .sidebar-badge,
  .menu-badge-notificacoes {
    top: 7px !important;
    right: 18px !important;
    border-color: #ffffff !important;
    background: #F97316 !important;
  }
}

/* ============================================================
   Checkout compra: acabamento final de topo, produtos e endereco
   Mantem logica intacta; ajusta apenas renderizacao visual.
   ============================================================ */
@media (min-width: 768px) {
  #pagina-compra.pagina.ativa .compra-header-mobile {
    position: sticky !important;
    top: 18px !important;
    z-index: 80 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: 100% !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  #pagina-compra.pagina.ativa .compra-header-titulo {
    display: none !important;
  }

  #pagina-compra.pagina.ativa .btn-fechar-compra {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: auto !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    background: rgba(255, 255, 255, 0.075) !important;
    color: #f8fafc !important;
    -webkit-text-fill-color: #f8fafc !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: transform 0.14s ease, background 0.14s ease, border-color 0.14s ease !important;
  }

  #pagina-compra.pagina.ativa .btn-fechar-compra:hover,
  #pagina-compra.pagina.ativa .btn-fechar-compra:focus-visible {
    background: rgba(124, 58, 237, 0.22) !important;
    border-color: rgba(167, 139, 250, 0.48) !important;
    outline: none !important;
  }

  #pagina-compra.pagina.ativa .btn-fechar-compra:active {
    transform: scale(0.94) !important;
  }

  #pagina-compra.pagina.ativa .btn-fechar-compra::before,
  #pagina-compra.pagina.ativa .btn-fechar-compra::after {
    content: none !important;
    display: none !important;
  }

  #pagina-compra.pagina.ativa .compra-card {
    margin-top: 0 !important;
    position: relative !important;
    overflow: visible !important;
  }

  #pagina-compra.pagina.ativa .compra-direita,
  #pagina-compra.pagina.ativa .compra-quantidade-info {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
  }

  #pagina-compra.pagina.ativa .compra-quantidade-info {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    clear: both !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    color: #a1a1aa !important;
    -webkit-text-fill-color: #a1a1aa !important;
  }

  #pagina-compra.pagina.ativa .compra-resumo-topo {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin-bottom: 14px !important;
  }

  #pagina-compra.pagina.ativa #compra-resumo-contagem {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 28px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    background: rgba(124, 58, 237, 0.16) !important;
    color: #ddd6fe !important;
    -webkit-text-fill-color: #ddd6fe !important;
    border: 1px solid rgba(167, 139, 250, 0.28) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
  }

  #pagina-compra.pagina.ativa .lista-compra-itens {
    display: grid !important;
    gap: 10px !important;
  }

  #pagina-compra.pagina.ativa .compra-item-resumo.compra-item-card {
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) minmax(126px, auto) !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 14px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: rgba(255, 255, 255, 0.045) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  }

  #pagina-compra.pagina.ativa .compra-item-resumo-imagem {
    width: 72px !important;
    height: 72px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background: #f8fafc !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #71717a !important;
    -webkit-text-fill-color: #71717a !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    text-align: center !important;
  }

  #pagina-compra.pagina.ativa .compra-item-resumo-imagem img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
  }

  #pagina-compra.pagina.ativa .compra-item-resumo-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    min-width: 0 !important;
  }

  #pagina-compra.pagina.ativa .compra-item-resumo-info strong {
    color: #f8fafc !important;
    -webkit-text-fill-color: #f8fafc !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere !important;
  }

  #pagina-compra.pagina.ativa .compra-item-resumo-marca {
    color: #a1a1aa !important;
    -webkit-text-fill-color: #a1a1aa !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
  }

  #pagina-compra.pagina.ativa .compra-item-resumo-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  #pagina-compra.pagina.ativa .compra-item-resumo-meta span {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 24px !important;
    padding: 0 9px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: #cbd5e1 !important;
    -webkit-text-fill-color: #cbd5e1 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }

  #pagina-compra.pagina.ativa .compra-item-resumo-preco {
    justify-self: end !important;
    text-align: right !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    min-width: 112px !important;
  }

  #pagina-compra.pagina.ativa .compra-item-resumo-preco span {
    color: #a1a1aa !important;
    -webkit-text-fill-color: #a1a1aa !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
  }

  #pagina-compra.pagina.ativa .compra-item-resumo-preco strong {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 17px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 767px) {
  #pagina-compra.pagina.ativa .btn-fechar-compra {
    background: #ede9fe !important;
    border-color: rgba(124, 58, 237, 0.18) !important;
    color: #5b21b6 !important;
    -webkit-text-fill-color: #5b21b6 !important;
    box-shadow: 0 6px 16px rgba(88, 28, 135, 0.12) !important;
  }

  #pagina-compra.pagina.ativa .btn-fechar-compra:focus-visible {
    outline: 3px solid rgba(124, 58, 237, 0.24) !important;
    outline-offset: 2px !important;
  }

  #pagina-compra.pagina.ativa #endereco-preenchido::before {
    content: "" !important;
    background-color: rgba(220, 38, 38, 0.08) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23dc2626'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center 40% !important;
    background-size: 18px 18px !important;
    border: none !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
  }

  #pagina-compra.pagina.ativa .compra-resumo-topo {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
  }

  #pagina-compra.pagina.ativa #compra-resumo-contagem {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 24px !important;
    padding: 0 9px !important;
    border-radius: 999px !important;
    background: rgba(124, 58, 237, 0.10) !important;
    color: #6d28d9 !important;
    -webkit-text-fill-color: #6d28d9 !important;
    font-size: 10.5px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
  }

  #pagina-compra.pagina.ativa .lista-compra-itens {
    display: grid !important;
    gap: 8px !important;
  }

  #pagina-compra.pagina.ativa .compra-item-resumo.compra-item-card {
    display: grid !important;
    grid-template-columns: 80px minmax(0, 1fr) !important;
    grid-template-areas:
      "imagem info"
      "imagem preco" !important;
    gap: 0 14px !important;
    align-items: start !important;
    padding: 14px !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 1px 4px rgba(15,23,42,0.05) !important;
  }

  #pagina-compra.pagina.ativa .compra-item-resumo-imagem {
    grid-area: imagem !important;
    width: 80px !important;
    height: 80px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: #f8fafc !important;
    border: 1px solid #e8edf2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #94a3b8 !important;
    -webkit-text-fill-color: #94a3b8 !important;
    font-size: 9px !important;
    font-weight: 500 !important;
    text-align: center !important;
  }

  #pagina-compra.pagina.ativa .compra-item-resumo-imagem img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
  }

  #pagina-compra.pagina.ativa .compra-item-resumo-info {
    grid-area: info !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    padding-bottom: 8px !important;
  }

  #pagina-compra.pagina.ativa .compra-item-resumo-info strong {
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    overflow-wrap: anywhere !important;
  }

  #pagina-compra.pagina.ativa .compra-item-resumo-marca {
    color: #7b33ff !important;
    -webkit-text-fill-color: #7b33ff !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
  }

  #pagina-compra.pagina.ativa .compra-item-resumo-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    margin-top: 2px !important;
  }

  #pagina-compra.pagina.ativa .compra-item-resumo-meta span {
    display: inline !important;
    min-height: auto !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    border: none !important;
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
  }

  #pagina-compra.pagina.ativa .compra-item-resumo-meta span + span::before {
    content: " · " !important;
    color: #cbd5e1 !important;
    -webkit-text-fill-color: #cbd5e1 !important;
  }

  #pagina-compra.pagina.ativa .compra-item-resumo-preco {
    grid-area: preco !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    padding: 8px 0 0 !important;
    border-top: 1px solid #f1f5f9 !important;
    text-align: left !important;
  }

  #pagina-compra.pagina.ativa .compra-item-resumo-preco span {
    color: #94a3b8 !important;
    -webkit-text-fill-color: #94a3b8 !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
  }

  #pagina-compra.pagina.ativa .compra-item-resumo-preco strong {
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
  }
}

/* ── Coluna Info (centro) ───────────────────────────────────────────────── */
.pd-col-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  min-width: 0 !important;
}

.pd-marca {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--na-text-secondary) !important;
  margin: 0 !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
}
.pd-nome {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: var(--na-text) !important;
  margin: 0 !important;
  line-height: 1.25 !important;
  font-family: Arial, Helvetica, sans-serif !important;
}

/* Preço */
.pd-preco-bloco { display: flex !important; flex-direction: column !important; gap: 4px !important; }
.pd-preco-old {
  font-size: 13px !important;
  color: var(--na-text-tertiary) !important;
  text-decoration: line-through !important;
  margin: 0 !important;
}
.pd-preco-principal {
  font-size: 30px !important;
  font-weight: 800 !important;
  color: var(--na-text) !important;
  margin: 0 !important;
  line-height: 1.1 !important;
}
.pd-parcelamento {
  font-size: 13px !important;
  color: var(--na-success) !important;
  font-weight: 500 !important;
}

/* Benefícios */
.pd-beneficios {
  display: flex !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  padding: 12px 0 !important;
  border-top: 1px solid var(--na-border) !important;
  border-bottom: 1px solid var(--na-border) !important;
}
.pd-beneficio-item {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  color: var(--na-text-secondary) !important;
}
.pd-beneficio-item svg { flex-shrink: 0 !important; color: var(--na-primary) !important; }

/* Descrição curta */
.pd-descricao-curta {
  font-size: 14px !important;
  color: var(--na-text-secondary) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Controle de Quantidade */
.pd-qty-row {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}
.pd-qty-label {
  font-size: 14px !important;
  color: var(--na-text-secondary) !important;
  font-family: var(--na-font) !important;
}
.pd-qty-control {
  display: flex !important;
  align-items: center !important;
  background: var(--na-surface-elevated) !important;
  border: 1px solid var(--na-border) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}
.pd-qty-btn {
  width: 36px !important;
  height: 36px !important;
  background: transparent !important;
  border: none !important;
  color: var(--na-text-secondary) !important;
  font-size: 18px !important;
  cursor: pointer !important;
  transition: var(--na-transition) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--na-font) !important;
}
.pd-qty-btn:hover:not(:disabled) { background: var(--na-surface-hover) !important; color: var(--na-text) !important; }
.pd-qty-btn:disabled { opacity: 0.35 !important; cursor: not-allowed !important; }
.pd-qty-valor {
  min-width: 40px !important;
  text-align: center !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--na-text) !important;
  font-family: var(--na-font) !important;
  border-left: 1px solid var(--na-border) !important;
  border-right: 1px solid var(--na-border) !important;
  padding: 0 4px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Botões de ação */
.pd-acoes {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.pd-btn-cart {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 48px !important;
  border-radius: 12px !important;
  border: none !important;
  background: var(--na-gradient-primary) !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  font-family: var(--na-font) !important;
  cursor: pointer !important;
  transition: transform 0.15s, box-shadow 0.15s !important;
  box-shadow: 0 4px 16px rgba(52,131,250,0.35) !important;
}
.pd-btn-cart:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 24px rgba(52,131,250,0.5) !important; }
.pd-btn-cart:disabled { opacity: 0.45 !important; cursor: not-allowed !important; transform: none !important; }
.pd-btn-cart.pd-btn-adicionado { background: var(--na-success) !important; box-shadow: 0 4px 16px rgba(34,197,94,0.4) !important; }

.pd-btn-buy {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 48px !important;
  border-radius: 12px !important;
  border: 1px solid var(--na-border) !important;
  background: var(--na-surface-elevated) !important;
  color: var(--na-text) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  font-family: var(--na-font) !important;
  cursor: pointer !important;
  transition: var(--na-transition) !important;
}
.pd-btn-buy:hover { background: var(--na-surface-hover) !important; border-color: var(--na-primary) !important; color: var(--na-primary) !important; }
.pd-btn-buy:disabled { opacity: 0.45 !important; cursor: not-allowed !important; }

.pd-btn-fav-detalhe {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 40px !important;
  border-radius: 10px !important;
  border: 1px solid var(--na-border) !important;
  background: transparent !important;
  color: var(--na-text-secondary) !important;
  font-size: 13px !important;
  font-family: var(--na-font) !important;
  cursor: pointer !important;
  transition: var(--na-transition) !important;
}
.pd-btn-fav-detalhe:hover { color: #EF4444 !important; border-color: #EF4444 !important; background: rgba(239,68,68,0.08) !important; }
.pd-btn-fav-detalhe.ativo { color: #EF4444 !important; border-color: #EF4444 !important; background: rgba(239,68,68,0.1) !important; }

/* Override estoque disabled em botões novos */
#pagina-pedido #btn-adicionar-carrinho:disabled,
#pagina-pedido #btn-abrir-compra:disabled { opacity: 0.45 !important; cursor: not-allowed !important; }

/* ── Coluna Lateral ─────────────────────────────────────────────────────── */
.pd-col-lateral {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}
.pd-col-lateral[hidden] { display: none !important; }
.pd-card-lateral {
  background: var(--na-surface-elevated) !important;
  border: 1px solid var(--na-border) !important;
  border-radius: 16px !important;
  padding: 18px !important;
}
.pd-card-titulo {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--na-text) !important;
  margin: 0 0 14px !important;
  font-family: var(--na-font) !important;
}

/* Frete */
.pd-cep-row {
  display: flex !important;
  gap: 8px !important;
}
.pd-cep-input {
  flex: 1 !important;
  background: var(--na-surface) !important;
  border: 1px solid var(--na-border) !important;
  border-radius: 10px !important;
  padding: 0 12px !important;
  height: 40px !important;
  color: var(--na-text) !important;
  font-size: 14px !important;
  font-family: var(--na-font) !important;
  outline: none !important;
  transition: border-color var(--na-transition) !important;
}
.pd-cep-input::placeholder { color: var(--na-text-tertiary) !important; }
.pd-cep-input:focus { border-color: var(--na-primary) !important; box-shadow: 0 0 0 3px var(--na-primary-dim) !important; }
.pd-cep-btn {
  height: 40px !important;
  padding: 0 16px !important;
  border-radius: 10px !important;
  border: none !important;
  background: var(--na-gradient-primary) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  font-family: var(--na-font) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: opacity var(--na-transition) !important;
}
.pd-cep-btn:disabled { opacity: 0.6 !important; cursor: not-allowed !important; }
.pd-cep-erro {
  margin: 8px 0 0 !important;
  font-size: 12px !important;
  color: var(--na-error) !important;
  font-family: var(--na-font) !important;
}
.pd-frete-opcoes { margin-top: 14px !important; display: flex !important; flex-direction: column !important; }
.pd-frete-opcao {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid var(--na-border) !important;
}
.pd-frete-icone { color: var(--na-primary) !important; flex-shrink: 0 !important; }
.pd-frete-texto { flex: 1 !important; min-width: 0 !important; }
.pd-frete-nome { font-size: 13px !important; font-weight: 600 !important; color: var(--na-text) !important; margin: 0 !important; font-family: var(--na-font) !important; }
.pd-frete-prazo { font-size: 11px !important; color: var(--na-text-tertiary) !important; margin: 2px 0 0 !important; font-family: var(--na-font) !important; }
.pd-frete-valor { font-size: 13px !important; font-weight: 700 !important; color: var(--na-text) !important; white-space: nowrap !important; flex-shrink: 0 !important; }
.pd-frete-gratis { color: var(--na-success) !important; }

/* Garantia */
.pd-garantia-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 12px !important;
}
.pd-garantia-header .pd-card-titulo { margin: 0 !important; }
.pd-garantia-icone { color: var(--na-primary) !important; }
.pd-garantia-lista {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.pd-garantia-lista li {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: 13px !important;
  color: var(--na-text-secondary) !important;
  font-family: var(--na-font) !important;
}
.pd-garantia-lista li svg { color: var(--na-success) !important; flex-shrink: 0 !important; }

/* Segurança */
.pd-seguranca-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid var(--na-border) !important;
}
.pd-seguranca-item > svg { color: var(--na-primary) !important; flex-shrink: 0 !important; margin-top: 2px !important; }
.pd-seg-titulo { font-size: 13px !important; font-weight: 600 !important; color: var(--na-text) !important; margin: 0 !important; font-family: var(--na-font) !important; }
.pd-seg-sub { font-size: 11px !important; color: var(--na-text-tertiary) !important; margin: 2px 0 0 !important; font-family: var(--na-font) !important; }

/* ── Seção de Abas ───────────────────────────────────────────────────────── */
.pd-tabs-section {
  border-top: 1px solid var(--na-border) !important;
  margin-bottom: 32px !important;
}
.pd-tabs-nav {
  display: flex !important;
  gap: 0 !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  border-bottom: 1px solid var(--na-border) !important;
}
.pd-tabs-nav::-webkit-scrollbar { display: none !important; }
.pd-tab {
  flex-shrink: 0 !important;
  padding: 14px 22px !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
  color: var(--na-text-secondary) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  font-family: var(--na-font) !important;
  cursor: pointer !important;
  transition: var(--na-transition) !important;
  margin-bottom: -1px !important;
}
.pd-tab:hover { color: var(--na-text) !important; }
.pd-tab.ativa { color: var(--na-primary) !important; border-bottom-color: var(--na-primary) !important; font-weight: 600 !important; }
.pd-tab-corpo { padding: 22px 0 !important; }
.pd-tab-painel { display: none !important; }
.pd-tab-painel.ativo { display: block !important; }
.pd-tab-texto {
  font-size: 14px !important;
  color: var(--na-text-secondary) !important;
  line-height: 1.75 !important;
  font-family: var(--na-font) !important;
  max-width: 800px !important;
  margin: 0 !important;
}
.pd-vazio-tab {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 32px 0 !important;
  color: var(--na-text-tertiary) !important;
  text-align: center !important;
}
.pd-vazio-tab svg { opacity: 0.4 !important; }
.pd-vazio-tab p { font-size: 14px !important; font-family: var(--na-font) !important; margin: 0 !important; }
.pd-btn-msg-tab {
  margin-top: 4px !important;
  padding: 10px 20px !important;
  border-radius: 10px !important;
  border: 1px solid var(--na-primary) !important;
  background: var(--na-primary-dim) !important;
  color: var(--na-primary) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  font-family: var(--na-font) !important;
  cursor: pointer !important;
  transition: var(--na-transition) !important;
}
.pd-btn-msg-tab:hover { background: var(--na-primary) !important; color: #fff !important; }

.pd-detalhes-resumo-card {
  display: none !important;
}

.pd-detalhes-resumo-topo h3 {
  margin: 0 0 8px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--na-text) !important;
}

.pd-detalhes-resumo-texto {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: var(--na-text-secondary) !important;
}

.pd-link-detalhes-produto {
  display: inline-flex !important;
  margin-top: 10px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--na-primary) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

.pd-detalhes-sheet {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100050 !important;
  pointer-events: none !important;
}

.pd-detalhes-sheet.ativo {
  pointer-events: auto !important;
}

.pd-detalhes-sheet-backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(15, 23, 42, 0.36) !important;
  opacity: 0 !important;
  transition: opacity 0.28s ease !important;
}

.pd-detalhes-sheet.ativo .pd-detalhes-sheet-backdrop {
  opacity: 1 !important;
}

.pd-detalhes-sheet-painel {
  position: absolute !important;
  left: 50% !important;
  bottom: 0 !important;
  width: min(480px, 100vw) !important;
  max-height: 55dvh !important;
  transform: translateX(-50%) translateY(100%) !important;
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1) !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 18px 18px 0 0 !important;
  background: var(--na-surface) !important;
  border: 1px solid var(--na-border) !important;
  box-shadow: 0 -18px 46px rgba(0, 0, 0, 0.28) !important;
  overflow: hidden !important;
}

.pd-detalhes-sheet.ativo .pd-detalhes-sheet-painel {
  transform: translateX(-50%) translateY(0) !important;
}

.pd-detalhes-sheet-handle {
  width: 42px !important;
  height: 4px !important;
  border-radius: 999px !important;
  background: var(--na-border) !important;
  margin: 10px auto 6px !important;
  flex-shrink: 0 !important;
}

.pd-detalhes-sheet-topo {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 8px 18px 14px !important;
  border-bottom: 1px solid var(--na-border) !important;
}

.pd-detalhes-sheet-topo h3 {
  margin: 0 !important;
  font-size: 18px !important;
  color: var(--na-text) !important;
}

.pd-detalhes-sheet-fechar {
  width: 32px !important;
  height: 32px !important;
  border-radius: 999px !important;
  border: 1px solid var(--na-border) !important;
  background: var(--na-surface-elevated) !important;
  color: var(--na-text) !important;
  font-size: 20px !important;
  cursor: pointer !important;
}

.pd-detalhes-sheet-conteudo {
  overflow: auto !important;
  padding: 16px 18px 26px !important;
}

.pd-detalhes-sheet-secao + .pd-detalhes-sheet-secao {
  margin-top: 18px !important;
  padding-top: 16px !important;
  border-top: 1px solid var(--na-border) !important;
}

.pd-detalhes-sheet-secao h4 {
  margin: 0 0 8px !important;
  font-size: 15px !important;
  color: var(--na-text) !important;
}

.pd-detalhes-sheet-secao p,
.pd-detalhes-sheet-lista,
.pd-detalhes-sheet-vazio {
  margin: 0 !important;
  color: var(--na-text-secondary) !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
}

.pd-detalhes-sheet-lista {
  padding-left: 18px !important;
}

.pd-detalhes-sheet-faq {
  display: grid !important;
  gap: 12px !important;
}

.pd-detalhes-sheet-faq-item strong {
  display: block !important;
  margin-bottom: 4px !important;
  color: var(--na-text) !important;
  font-size: 14px !important;
}

.pd-detalhes-sheet-aberta {
  overflow: hidden !important;
}

/* ── Produtos Relacionados ───────────────────────────────────────────────── */
.pd-relacionados { margin-top: 8px !important; }
.pd-relacionados-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 20px !important;
}
.pd-relacionados-titulo {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--na-text) !important;
  margin: 0 !important;
  font-family: var(--na-font) !important;
}
.pd-btn-ver-todos {
  background: transparent !important;
  border: 1px solid var(--na-border) !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  color: var(--na-primary) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  font-family: var(--na-font) !important;
  cursor: pointer !important;
  transition: var(--na-transition) !important;
}
.pd-btn-ver-todos:hover { background: var(--na-primary-dim) !important; border-color: var(--na-primary) !important; }
.pd-grade-relacionados {
  grid-template-columns: repeat(4, 1fr) !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ── Override estilos antigos da pedido-imagem-box para novo layout ─────── */
#pagina-pedido .pedido-imagem-box {
  background: var(--na-surface-elevated) !important;
}
#pagina-pedido .pedido-miniatura {
  background: var(--na-surface) !important;
}

/* ── Responsividade da página de detalhes ───────────────────────────────── */
@media (max-width: 1100px) {
  .pd-main-grid { grid-template-columns: minmax(360px, 440px) minmax(0, 1fr) !important; gap: 28px !important; }
  .pd-imagem-box-redesign { height: 380px !important; }
}
@media (max-width: 900px) {
  .pd-main-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .pd-col-galeria { order: 1; }
  .pd-col-info { order: 2; }
  .pd-badges-flutuantes { left: 76px !important; }
  .pd-imagem-box-redesign { height: 320px !important; }
  .pd-grade-relacionados { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
  .pd-page-inner { padding: 16px 14px 40px !important; }
  .pd-nome { font-size: 20px !important; }
  .pd-preco-principal { font-size: 24px !important; }
  .pd-tabs-nav { gap: 0 !important; }
  .pd-tab { padding: 12px 14px !important; font-size: 13px !important; }
  .pd-grade-relacionados { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .pd-galeria-wrapper { flex-direction: column !important; }
  .pd-miniaturas-vertical {
    flex-direction: row !important;
    width: 100% !important;
    max-height: none !important;
    overflow-x: auto !important;
  }
  .pd-miniaturas-vertical .pedido-miniatura { width: 56px !important; height: 56px !important; }
  .pd-imagem-box-redesign { height: 260px !important; }
  .pd-badges-flutuantes { left: 14px !important; top: calc(100% + 70px) !important; }
}

/* Mobile Nexa Aura */
@media (max-width: 767px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    background: var(--na-bg) !important;
  }

  body {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .topo {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 50 !important;
    height: 104px !important;
    padding: 10px 14px 8px !important;
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "brand icons"
      "search search" !important;
    gap: 8px 12px !important;
    align-items: center !important;
    align-content: end !important;
    border-bottom: none !important;
    background: rgba(6,7,12,0.94) !important;
  }

  .topo::before {
    content: "Nexa Story";
    grid-area: brand;
    font-family: var(--na-font) !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    background: var(--na-gradient-logo) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
  }

  .topo .busca-box {
    grid-area: search !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  .busca-input-wrap {
    height: 42px !important;
    border-radius: 14px !important;
    padding: 0 12px !important;
    background: rgba(255,255,255,0.045) !important;
  }

  .busca-input-wrap input {
    font-size: 12px !important;
  }

  .topo-icons {
    grid-area: icons !important;
    gap: 6px !important;
  }

  .topo-icon-btn {
    width: 34px !important;
    height: 34px !important;
    background: rgba(255,255,255,0.045) !important;
  }

  .topo-icons #btn-favoritos-topo,
  .topo-icons #btn-carrinho-topo {
    display: none !important;
  }

  .caixa {
    width: 100% !important;
    height: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    min-height: 64px !important;
    position: fixed !important;
    inset: auto 0 0 0 !important;
    padding: 0 6px env(safe-area-inset-bottom, 0px) !important;
    border-right: none !important;
    border-top: 1px solid rgba(0,0,0,0.08) !important;
    background: #ffffff !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    z-index: 600 !important;
  }

  .sidebar-brand,
  .sidebar-frete-card {
    display: none !important;
  }

  .sidebar-nav-items {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 0 !important;
    overflow: visible !important;
  }

  .caixa .menu-btn {
    min-height: 0 !important;
    height: 100% !important;
    width: 100% !important;
    padding: 8px 1px 7px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    border-radius: 0 !important;
    font-size: 9px !important;
    line-height: 1.1 !important;
    color: rgba(10,10,15,0.45) !important;
    position: relative !important;
    overflow: hidden !important;
  }

  /* Label do botão: não quebra linha, trunca se necessário */
  .caixa .menu-btn > span:not(.sidebar-badge) {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
    width: 100% !important;
    text-align: center !important;
  }

  .caixa .menu-btn svg {
    flex-basis: auto !important;
    flex-shrink: 0 !important;
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
  }

  .caixa .menu-btn.ativo {
    background: transparent !important;
    color: var(--na-primary) !important;
  }

  .caixa .menu-btn:hover {
    background: transparent !important;
  }

  .caixa .menu-btn.ativo svg {
    filter: drop-shadow(0 0 8px rgba(52,131,250,0.55)) !important;
  }

  .caixa .sidebar-badge,
  .menu-badge-notificacoes {
    display: flex !important;
    position: absolute !important;
    top: 6px !important;
    right: 20px !important;
    min-width: 16px !important;
    height: 16px !important;
    padding: 0 4px !important;
    border-radius: 999px !important;
    border: 1px solid var(--na-bg) !important;
    background: var(--na-primary) !important;
    color: #fff !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
  }

  /* Respeita o display:none do JS quando carrinho/notificações estão vazios */
  .caixa .sidebar-badge[style*="display: none"],
  .caixa .sidebar-badge[style*="display:none"],
  .menu-badge-notificacoes[style*="display: none"],
  .menu-badge-notificacoes[style*="display:none"] {
    display: none !important;
  }

  .pagina {
    margin-left: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
    min-height: 100dvh !important;
    box-sizing: border-box !important;
  }

  #pagina-home,
  #pagina-notificacoes,
  #pagina-configuracoes,
  #pagina-pedido {
    background:
      radial-gradient(circle at 18% 8%, rgba(52,131,250,0.16), transparent 32%),
      radial-gradient(circle at 88% 18%, rgba(56,130,246,0.12), transparent 30%),
      var(--na-bg) !important;
  }

  #pagina-mensagens,
  #pagina-mensagens.ativa {
    background: #f4f5fb !important;
    background-color: #f4f5fb !important;
    color: #061126 !important;
  }

  #pagina-carrinho,
#pagina-carrinho.ativa {
    background: #f4f5fb !important;
    background-color: #f4f5fb !important;
    color: #061126 !important;
  }

  #pagina-carrinho .carrinho-container {
    background: #f4f5fb !important;
    color: #061126 !important;
  }

  #pagina-carrinho .titulo-carrinho,
  #pagina-carrinho .recomendados h2 {
    color: #061126 !important;
  }

  #pagina-carrinho .carrinho-vazio {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08) !important;
    color: #061126 !important;
  }

  #pagina-carrinho .carrinho-vazio h3 {
    color: #061126 !important;
  }

  #pagina-carrinho .carrinho-vazio p {
    font-size: 13px !important;
    color: rgba(6, 17, 38, 0.62) !important;
    margin: 0 0 22px !important;
    line-height: 1.5 !important;
  }

  #pagina-carrinho .produto-card {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08) !important;
  }

  #pagina-carrinho .nome-produto,
  #pagina-carrinho .preco-produto {
    color: #061126 !important;
  }

  #pagina-carrinho .marca-produto {
    color: rgba(6, 17, 38, 0.58) !important;
  }

  #pagina-carrinho .imagem-produto {
    background: #ffffff !important;
  }

  .home-section-header {
    display: none !important;
  }

  /* banner: regras movidas para bloco #mobile-promos no final do arquivo */
  #mobile-promos {
    margin: 0 !important;
    padding: 0 !important;
  }
  .produtos,
  #grade-produtos {
    margin-top: 6px !important;
  }

  .pd-detalhes-sheet-painel {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    transform: translateY(100%) !important;
    max-height: 72dvh !important;
  }

  .pd-detalhes-sheet.ativo .pd-detalhes-sheet-painel {
    transform: translateY(0) !important;
  }

  .home-sort-select {
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    color: transparent !important;
    border-radius: 12px !important;
  }

  .home-sort-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 17px;
    height: 17px;
    pointer-events: none;
    background: currentColor;
    color: var(--na-text-secondary);
    -webkit-mask: linear-gradient(#000 0 0) center / 100% 2px no-repeat,
      linear-gradient(#000 0 0) center / 2px 100% no-repeat;
    mask: linear-gradient(#000 0 0) center / 100% 2px no-repeat,
      linear-gradient(#000 0 0) center / 2px 100% no-repeat;
    transform: rotate(45deg);
  }

  .home-sort-chevron,
  .home-view-toggle {
    display: none !important;
  }

  .produtos,
  #grade-produtos,
  #grade-recomendados,
  .pd-grade-relacionados {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 0 12px 24px !important;
  }

  .produto-card {
    min-height: 238px !important;
    padding: 10px !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.035)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 12px 28px rgba(0,0,0,0.24) !important;
  }

  .produto-card:hover {
    transform: none !important;
  }

  .produto-card:active {
    transform: scale(0.985) !important;
  }

  .produto-card-badges {
    top: 8px !important;
    left: 8px !important;
  }

  .produto-badge {
    font-size: 8px !important;
    padding: 3px 7px !important;
  }

  .produto-btn-fav {
    top: 7px !important;
    right: 7px !important;
    width: 28px !important;
    height: 28px !important;
    background: rgba(8,9,15,0.68) !important;
  }

  .produto-img-wrap {
    min-height: 126px !important;
    margin-bottom: 8px !important;
  }

  .imagem-produto {
    height: 122px !important;
    padding: 6px !important;
  }

  .produto-img-halo {
    width: 78% !important;
    height: 24px !important;
    filter: blur(7px) !important;
  }

  .nome-produto {
    font-size: 12px !important;
    line-height: 1.22 !important;
    margin-bottom: 3px !important;
  }

  .marca-produto {
    font-size: 10px !important;
    margin-bottom: 7px !important;
  }

  .preco-produto {
    font-size: 12px !important;
  }

  .produto-btn-cart {
    width: 30px !important;
    height: 30px !important;
    border-radius: 9px !important;
  }

  .carrinho-container,
  .notificacoes-container,
  .configuracoes-container,
  .usuario-container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 18px 14px 92px !important;
    box-sizing: border-box !important;
  }

  .titulo-carrinho,
  .titulo-notificacoes h2,
  .configuracoes-topo h2,
  .usuario-topo h2 {
    font-size: 22px !important;
    margin: 0 0 18px !important;
  }

  #pagina-carrinho .carrinho-vazio {
    min-height: auto !important;
    height: auto !important;
    padding: 22px 18px 18px !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.09) !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06) !important;
    color: #061126 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .carrinho-vazio::before {
    content: "";
    width: 92px;
    height: 92px;
    margin-bottom: 22px;
    border-radius: 28px;
    background: linear-gradient(135deg, #3483FA, #2968C8);
    box-shadow: 0 0 36px rgba(52,131,250,0.45);
  }

  .lista-carrinho {
    gap: 12px !important;
  }

  .item-carrinho {
    grid-template-columns: auto 1fr !important;
    gap: 12px !important;
    padding: 12px !important;
    border-radius: 18px !important;
    align-items: center !important;
  }

  .item-carrinho-esquerda {
    min-width: 0 !important;
  }

  #pagina-carrinho .item-carrinho-imagem {
    width: 62px !important;
    height: 62px !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    padding: 6px !important;
    box-sizing: border-box !important;
  }

  #pagina-carrinho .item-carrinho-imagem img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    background: transparent !important;
  }

  #pagina-carrinho .item-carrinho-info h3 {
    font-size: 13px !important;
    line-height: 1.25 !important;
    color: #061126 !important;
    font-weight: 800 !important;
  }

  #pagina-carrinho .item-carrinho-info p {
    font-size: 12px !important;
    color: rgba(6, 17, 38, 0.70) !important;
    font-weight: 700 !important;
  }

  #pagina-carrinho .item-carrinho-qtd {
    grid-column: 2 !important;
    justify-self: start !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  #pagina-carrinho .btn-qtd-carrinho {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    padding: 0 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color: #061126 !important;
    border: 1px solid rgba(15, 23, 42, 0.16) !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.06) !important;
  }

  #pagina-carrinho .item-carrinho-valor-qtd {
    min-width: 18px !important;
    color: #061126 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    text-align: center !important;
  }

  #pagina-carrinho .btn-remover-carrinho {
    grid-column: 2 !important;
    justify-self: start !important;
    background: transparent !important;
    color: #061126 !important;
    border: none !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    padding: 4px 0 !important;
    opacity: 1 !important;
  }

  #pagina-carrinho .btn-remover-carrinho:disabled,
#pagina-carrinho .btn-remover-carrinho[disabled] {
    color: #061126 !important;
    -webkit-text-fill-color: #061126 !important;
    opacity: 1 !important;
  }

  #pagina-carrinho .barra-selecao-carrinho {
    position: sticky !important;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 10 !important;
    border-radius: 18px !important;
    padding: 12px !important;
    background: rgba(255,255,255,0.94) !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    color: #061126 !important;
    backdrop-filter: blur(14px) !important;
  }

  #pagina-carrinho .checkbox-selecionar-todos {
    color: #061126 !important;
    opacity: 1 !important;
    font-weight: 700 !important;
  }

  #pagina-carrinho .checkbox-selecionar-todos span,
  #pagina-carrinho .checkbox-selecionar-todos label {
    color: #061126 !important;
    opacity: 1 !important;
  }

  #pagina-carrinho .barra-selecao-acoes {
    color: #061126 !important;
    opacity: 1 !important;
    font-weight: 700 !important;
  }

  .mensagens-container {
    margin: 0 !important;
    height: calc(100dvh - 118px - 72px) !important;
    display: flex !important;
    padding: 0 !important;
    background: transparent !important;
  }

  .lista-conversas {
    display: none !important;
  }

  #pagina-mensagens .chat-area {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    border-radius: 0 !important;
    background: #f4f5fb !important;
  }

  .chat-topo {
    min-height: 64px !important;
    padding: 12px 14px !important;
    background: rgba(10,12,20,0.72) !important;
  }

  .chat-mensagens {
    padding: 16px 14px 12px !important;
  }

  .mensagem {
    max-width: 82% !important;
    border-radius: 16px !important;
  }

  .mensagem.enviada {
    margin-left: auto !important;
    background: var(--na-gradient-primary) !important;
    color: #fff !important;
    border-bottom-right-radius: 5px !important;
  }

  #pagina-mensagens .mensagem.recebida {
    background: transparent !important;
    border: none !important;
    color: #061126 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }

  .chat-input-area {
    position: sticky !important;
    bottom: 0 !important;
    padding: 10px 12px !important;
    background: rgba(8,9,15,0.92) !important;
    backdrop-filter: blur(12px) !important;
    border-top: 1px solid var(--na-border) !important;
  }

  .chat-input {
    height: 44px !important;
    border-radius: 16px !important;
  }

  .btn-enviar {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
  }

  .wpp-secao {
    padding: 10px 12px 14px !important;
    background: transparent !important;
  }

  .wpp-botoes {
    gap: 8px !important;
  }

  .btn-wpp {
    border-radius: 15px !important;
    padding: 12px !important;
  }

  #lista-notificacoes {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .linha-notificacao,
  .estado-vazio {
    border-radius: 18px !important;
    background: var(--na-surface-elevated) !important;
    border: 1px solid var(--na-border) !important;
  }

  .configuracoes-lista {
    gap: 12px !important;
  }

  .config-group {
    border-radius: 18px !important;
    overflow: hidden !important;
    background: var(--na-surface-elevated) !important;
    border: 1px solid var(--na-border) !important;
  }

  .config-item {
    min-height: 56px !important;
    padding: 12px 14px !important;
  }

  .config-item-label {
    font-size: 13px !important;
    line-height: 1.25 !important;
  }

  .config-item-icon {
    width: 34px !important;
    height: 34px !important;
    border-radius: 11px !important;
  }

  .pd-page-inner {
    padding: 14px 12px 92px !important;
  }

  .pd-breadcrumb {
    margin-bottom: 12px !important;
    font-size: 12px !important;
  }

  .pd-main-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-bottom: 18px !important;
  }

  .pd-galeria-wrapper {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .pd-miniaturas-vertical {
    order: 2 !important;
    flex-direction: row !important;
    width: 100% !important;
    max-height: none !important;
    overflow-x: auto !important;
  }

  .pd-imagem-box-redesign {
    order: 1 !important;
    height: clamp(280px, 78vw, 360px) !important;
    border-radius: 18px !important;
  }

  .pd-badges-flutuantes {
    left: 12px !important;
    top: 12px !important;
  }

  .pd-col-info {
    gap: 12px !important;
  }

  .pd-marca {
    font-size: 11px !important;
  }

  .pd-nome {
    font-size: 22px !important;
  }

  .pd-preco-principal {
    font-size: 30px !important;
  }

  .pd-beneficios {
    gap: 8px !important;
    padding: 10px 0 !important;
  }

  .pd-beneficio-item {
    font-size: 11px !important;
  }

  .pd-qty-row {
    justify-content: space-between !important;
    padding: 10px 0 !important;
  }

  .pd-acoes {
    gap: 9px !important;
  }

  .pd-btn-cart,
  .pd-btn-buy,
  .pd-btn-perguntas {
    height: 52px !important;
    border-radius: 14px !important;
  }

  .pd-btn-fav-detalhe {
    height: 44px !important;
    border-radius: 13px !important;
  }

  .pd-tabs-section {
    margin-bottom: 0 !important;
  }

  .pd-tab {
    padding: 12px 14px !important;
    font-size: 12px !important;
  }

  .pd-tab-corpo {
    padding: 18px 0 !important;
  }

  /* ── Detalhes do produto (mobile only) ─────────────────────────────────── */
  .pd-detalhes-resumo-card {
    display: block !important;
    border: 1px solid var(--na-border) !important;
    border-radius: 14px !important;
    background: var(--na-surface-elevated) !important;
    padding: 16px !important;
    margin: 20px 0 6px !important;
  }

  .pd-detalhes-resumo-topo h3 {
    margin: 0 0 8px !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    color: var(--na-text) !important;
  }

  .pd-detalhes-resumo-texto {
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    color: var(--na-text-secondary) !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .pd-link-detalhes-produto {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin-top: 10px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--na-primary) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
  }

  /* sheet: full width + maior altura no mobile */
  .pd-detalhes-sheet-painel {
    width: 100vw !important;
    max-height: 60dvh !important;
    height: 60dvh !important;
    border-radius: 20px 20px 0 0 !important;
  }

  #pagina-compra {
    z-index: 9999 !important;
  }

  #pagina-compra .compra-overlay {
    justify-content: center !important;
    align-items: stretch !important;
    background: var(--na-bg) !important;
  }

  #pagina-compra .compra-container {
    width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    padding: 18px 14px calc(92px + env(safe-area-inset-bottom, 0px)) !important;
    border-left: none !important;
  }

  #pagina-compra .btn-fechar-compra {
    width: 42px !important;
    height: 42px !important;
    right: 14px !important;
    top: 14px !important;
  }

  #pagina-compra .compra-card {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-top: 48px !important;
    padding: 16px !important;
  }

  #pagina-compra .compra-esquerda {
    grid-template-columns: 92px minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  #pagina-compra .compra-imagem-box {
    width: 92px !important;
    border-radius: 18px !important;
  }

  #pagina-compra .compra-detalhes h2 {
    font-size: 18px !important;
  }

  #pagina-compra #compra-preco {
    font-size: 26px !important;
  }

  #pagina-compra .compra-direita {
    align-items: stretch !important;
  }

  #pagina-compra .controle-quantidade {
    justify-content: flex-start !important;
  }

  #pagina-compra .compra-item-resumo {
    grid-template-columns: 1fr !important;
  }

  #pagina-compra .compra-item-resumo-unitario,
  #pagina-compra .compra-item-resumo-total {
    text-align: left !important;
  }

  #pagina-compra .frete-opcao-compra-conteudo {
    padding: 14px !important;
    gap: 10px !important;
  }

  #pagina-compra .frete-opcao-compra-texto strong,
  #pagina-compra .frete-opcao-compra span {
    font-size: 14px !important;
  }

  .pagina-pagamento-conteudo,
  .pagina-endereco-conteudo,
  .pagina-localizacao-conteudo {
    width: min(100%, 420px) !important;
    padding: 18px 14px calc(92px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 360px) {
  .produtos,
  #grade-produtos,
  #grade-recomendados,
  .pd-grade-relacionados {
    gap: 8px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .produto-card {
    min-height: 226px !important;
  }

  .imagem-produto {
    height: 112px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE — Componentes adicionais e polimento
   ═══════════════════════════════════════════════════════════════════════════ */

/* Cabeçalho mobile da página de Mensagens (oculto no desktop) */
.mensagens-mobile-topo {
  display: none;
}

@media (max-width: 767px) {

  /* MOBILE — remove efeito feio de toque/click */
  button,
  a,
  .menu-btn,
  .topo-icon-btn,
  .produto-card,
  .produto-btn-cart,
  .produto-btn-fav,
  .btn-qtd-carrinho,
  .btn-remover-carrinho,
  .linha-notificacao,
  .config-item {
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
  }


  .mensagens-mobile-topo {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 16px !important;
    height: 52px !important;
    min-height: 52px !important;
    flex-shrink: 0 !important;
    background: rgba(8, 9, 15, 0.9) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid var(--na-border) !important;
    box-sizing: border-box !important;
  }

  .mensagens-mobile-topo h2 {
    margin: 0 !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--na-text) !important;
    font-family: var(--na-font) !important;
    letter-spacing: -0.3px !important;
  }

  /* Ajusta o layout da página de mensagens para acomodar o cabeçalho mobile */
  #pagina-mensagens.ativa {
    display: flex !important;
    flex-direction: column !important;
    /* Altura exata: viewport - header fixo - bottom nav */
    height: calc(100dvh - calc(64px + env(safe-area-inset-bottom, 0px))) !important;
    min-height: 0 !important;
    padding-top: 118px !important;  /* espaço do header fixo */
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* O container de mensagens expande para preencher o espaço restante */
  #pagina-mensagens .mensagens-container {
    flex: 1 !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
  }

  /* ── Notificações: cards com ícone e estilo melhorado ─────────────────── */
  body.nexa-avisos-ativa .linha-notificacao {
  width: 100% !important;
  min-height: 52px !important;
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 9px 12px !important;
  margin: 0 0 8px !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.10) !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.07) !important;
  color: #061126 !important;
  -webkit-text-fill-color: #061126 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

  .linha-notificacao:active {
    border-color: var(--na-primary) !important;
  }

  .texto-linha {
  flex: 1 !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  color: #061126 !important;
  -webkit-text-fill-color: #061126 !important;
  font-weight: 700 !important;

  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;

  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

  .seta-linha {
    color: var(--na-text-tertiary) !important;
    font-size: 16px !important;
    flex-shrink: 0 !important;
  }

  /* ── Carrinho: empty state com ícone de sacola premium ───────────────── */
  .carrinho-vazio::before {
    content: "" !important;
    display: block !important;
    width: 88px !important;
    height: 88px !important;
    margin: 0 auto 22px !important;
    border-radius: 28px !important;
    background: linear-gradient(135deg, rgba(123, 51, 255, 0.9), rgba(56, 130, 246, 0.9)) !important;
    box-shadow: 0 0 40px rgba(123, 51, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E") center/56% no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E") center/56% no-repeat !important;
  }

  #pagina-carrinho .carrinho-vazio h3 {
    font-size: 20px !important;
    font-weight: 700 !important;
    margin: 0 0 10px !important;
    color: #061126 !important;
  }

  .carrinho-vazio p {
    font-size: 13px !important;
    color: var(--na-text-secondary) !important;
    margin: 0 0 22px !important;
    line-height: 1.5 !important;
  }

  .carrinho-vazio .btn-comprar {
    min-width: 160px !important;
    height: 48px !important;
    font-size: 14px !important;
  }

  /* ── Bottom nav: indicador ativo com linha superior ──────────────────── */
  .caixa .menu-btn.ativo::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 20px !important;
    height: 2px !important;
    border-radius: 0 0 3px 3px !important;
    background: var(--na-primary) !important;
  }

  /* ── Home: badge "Novo"/"Promoção" estilo pill ───────────────────────── */
  .produto-badge-novo {
    background: linear-gradient(135deg, #22c55e, #16a34a) !important;
  }

  .produto-badge-promo {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  }

  /* ── Configurações: rodapé com botão sair ────────────────────────────── */
  .configuracoes-rodape {
    padding: 16px 0 8px !important;
    border-top: 1px solid var(--na-border) !important;
    margin-top: 8px !important;
  }

  .sair-btn {
    width: 100% !important;
    height: 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    border-radius: 14px !important;
    color: var(--na-error) !important;
    background: rgba(239, 68, 68, 0.06) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
  }

  /* ── iOS: evita zoom automático no input de busca ──────────────────── */
  @supports (-webkit-touch-callout: none) {
    .busca-input-wrap input { font-size: 16px !important; }
  }

  /* ══════════════════════════════════════════════════════
     NOTIFICAÇÕES — layout limpo e card largo
     ══════════════════════════════════════════════════════ */

  .titulo-notificacoes {
    text-align: left !important;
    margin-bottom: 20px !important;
    padding: 0 !important;
  }

  .titulo-notificacoes h2 {
    font-size: 24px !important;
    font-weight: 800 !important;
    letter-spacing: -0.3px !important;
    color: var(--na-text) !important;
    margin: 0 !important;
  }

  /* Estado vazio: card largo, texto fluido, premium */
  .estado-vazio {
    width: 100% !important;
    max-width: none !important;
    padding: 52px 28px !important;
    text-align: center !important;
    border-radius: 22px !important;
    background: var(--na-surface-elevated) !important;
    border: 1px solid var(--na-border) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.04),
      0 20px 48px rgba(0,0,0,0.3) !important;
    box-sizing: border-box !important;
  }

  /* Ícone decorativo do estado vazio */
  .estado-vazio::before {
    content: "" !important;
    display: block !important;
    width: 64px !important;
    height: 64px !important;
    margin: 0 auto 20px !important;
    border-radius: 22px !important;
    background: linear-gradient(135deg, rgba(52,131,250,0.85), rgba(56,130,246,0.85)) !important;
    box-shadow: 0 0 32px rgba(52,131,250,0.4) !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E") center/54% no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E") center/54% no-repeat !important;
  }

  .estado-vazio h3 {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--na-text) !important;
    margin: 0 0 10px !important;
    line-height: 1.3 !important;
    letter-spacing: -0.2px !important;
    white-space: normal !important;   /* garante quebra natural */
    word-break: normal !important;
  }

  .estado-vazio p {
    font-size: 13px !important;
    color: var(--na-text-secondary) !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    max-width: 260px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Linhas de notificação (quando há notificações) */
  .linha-notificacao {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    border-radius: 16px !important;
    min-height: 62px !important;
    margin-bottom: 10px !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  .texto-linha {
    flex: 1 !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    color: var(--na-text) !important;
    word-break: break-word !important;
  }

  .seta-linha {
    color: var(--na-text-tertiary) !important;
    font-size: 18px !important;
    flex-shrink: 0 !important;
    font-weight: 400 !important;
  }

  /* ══════════════════════════════════════════════════════
     CONFIGURAÇÕES — hierarquia e cards premium
     ══════════════════════════════════════════════════════ */

  .configuracoes-container {
    padding-top: 8px !important;
  }

  .configuracoes-topo {
    padding: 0 0 4px !important;
    margin-bottom: 4px !important;
  }

  .configuracoes-topo h2,
  .titulo-carrinho,
  .titulo-notificacoes h2,
  .usuario-topo h2 {
    font-size: 24px !important;
    font-weight: 800 !important;
    letter-spacing: -0.3px !important;
    margin: 0 0 20px !important;
    color: var(--na-text) !important;
  }

  .configuracoes-lista {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .config-group-label {
    color: var(--na-text-tertiary) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    padding: 16px 4px 8px !important;
    margin: 0 !important;
  }

  .config-group {
    width: 100% !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    background: var(--na-surface-elevated) !important;
    border: 1px solid var(--na-border) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04) !important;
  }

  .config-item {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    min-height: 58px !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--na-border-subtle) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--na-text) !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  .config-item:last-child {
    border-bottom: none !important;
  }

  .config-item-icon {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 12px !important;
    flex-shrink: 0 !important;
  }

  .config-item-icon svg {
    width: 18px !important;
    height: 18px !important;
  }

  .config-item-label {
    flex: 1 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--na-text) !important;
    line-height: 1.3 !important;
  }

  .config-chevron {
    width: 16px !important;
    height: 16px !important;
    color: var(--na-text-tertiary) !important;
    flex-shrink: 0 !important;
  }

  .configuracoes-rodape {
    padding: 20px 0 8px !important;
    border-top: 1px solid var(--na-border) !important;
    margin-top: 12px !important;
  }

  .sair-btn {
    width: 100% !important;
    height: 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    border-radius: 16px !important;
    color: var(--na-error) !important;
    background: rgba(239, 68, 68, 0.06) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
  }

  /* ══════════════════════════════════════════════════════
     MENSAGENS — WPP compacto, bolhas espaçadas
     ══════════════════════════════════════════════════════ */

  /* Seção WhatsApp: compacta no mobile, não invade a conversa */
  .wpp-secao {
    flex-shrink: 0 !important;
    padding: 8px 12px 12px !important;
    background: rgba(8,9,15,0.6) !important;
    border-top: 1px solid var(--na-border) !important;
    backdrop-filter: blur(8px) !important;
  }

  .wpp-secao-titulo {
    font-size: 9px !important;
    letter-spacing: 0.1em !important;
    margin: 0 0 7px !important;
    color: rgba(255,255,255,0.3) !important;
  }

  /* Botões WPP — layout em coluna no mobile */
  .wpp-botoes {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .btn-wpp {
    min-height: 72px !important;
    padding: 13px 14px !important;
    border-radius: 16px !important;
    gap: 12px !important;
  }

  .wpp-icone {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 12px !important;
  }

  .wpp-icone svg {
    width: 19px !important;
    height: 19px !important;
  }

  .btn-wpp-conteudo {
    gap: 3px !important;
  }

  .btn-wpp-conteudo strong {
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
  }

  .btn-wpp-conteudo small {
    font-size: 11px !important;
    opacity: 0.65 !important;
    line-height: 1.3 !important;
  }

  /* Bolhas de mensagem: espaçamento e tamanho confortáveis */
  .mensagem {
    max-width: 82% !important;
    padding: 10px 14px !important;
    border-radius: 18px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  .mensagem p {
    margin: 0 !important;
    line-height: 1.5 !important;
  }

  #pagina-mensagens .chat-mensagens {
    padding: 14px 12px 10px !important;
    gap: 10px !important;
    background: #f4f5fb !important;
  }

  /* Input de mensagem ajustado */
  #pagina-mensagens .chat-input-area {
    padding: 10px 12px !important;
    gap: 10px !important;
    background: #ffffff !important;
    border-top: 1px solid rgba(15, 23, 42, 0.10) !important;
  }

  #pagina-mensagens .chat-input {
    font-size: 14px !important;
    padding: 11px 16px !important;
    height: auto !important;
    min-height: 44px !important;
    background: #f4f5fb !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    color: #061126 !important;
  }

  #pagina-mensagens .chat-input::placeholder {
    color: rgba(6, 17, 38, 0.48) !important;
  }

  .btn-enviar {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
  }

  /* Chat topo: visual mais limpo */
  #pagina-mensagens .chat-topo {
    padding: 12px 14px !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.10) !important;
    background: #ffffff !important;
    backdrop-filter: blur(12px) !important;
    min-height: 60px !important;
  }

  #pagina-mensagens .chat-topo-info h3 {
    color: #061126 !important;
  }

  #pagina-mensagens .chat-status-texto {
    color: #16a34a !important;
  }

  .chat-topo-avatar {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
  }

  .chat-topo-info h3 {
    font-size: 15px !important;
    font-weight: 700 !important;
    margin: 0 !important;
  }

  .chat-status-texto {
    font-size: 11px !important;
  }

  /* ── Outros ─────────────────────────────────────────── */

  /* Produto: halo desativado no mobile */
  .produto-img-halo { display: none !important; }

  /* Recomendados no carrinho */
  #pagina-carrinho .recomendados {
    background: #f4f5fb !important;
  }

  #pagina-carrinho .recomendados h2 {
    font-size: 16px !important;
    margin: 24px 0 12px !important;
    padding: 0 12px !important;
    color: #061126 !important;
  }

  #pagina-carrinho .produto-btn-fav {
    display: none !important;
  }

  /* Produtos relacionados na página de produto */
  .pd-related-titulo {
    font-size: 16px !important;
    margin: 0 0 14px !important;
  }

  /* Bottom nav: indicador ativo */
  .caixa .menu-btn.ativo::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 24px !important;
    height: 2px !important;
    border-radius: 0 0 3px 3px !important;
    background: var(--na-primary) !important;
  }

  /* Badge pills */
  .produto-badge-novo {
    background: linear-gradient(135deg, #22c55e, #16a34a) !important;
  }
  .produto-badge-promo {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  }

  /* Checkout */
  #pagina-compra.ativa { display: block !important; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE FIX — Correções focadas (consolidadas)
   ═══════════════════════════════════════════════════════════════ */

/* ── Global: scroll horizontal bloqueado ─────────────────────── */
html, body { overflow-x: hidden !important; max-width: 100% !important; }

/* ── Global: botão enviar — remove pseudo-elemento duplicado ─── */
/* O HTML do botão já usa SVG; o ::before com "➤" causava ícone duplo */
.btn-enviar::before { display: none !important; }

/* ── Global: inputs e selects respeitam a tela ───────────────── */
input, textarea, select {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 767px) {

  /* ─────────────────────────────────────────────────────────────
     CHAT — layout de grid para garantir botão sempre visível
     ───────────────────────────────────────────────────────────── */

  /* Grid elimina o problema de flex+overflow:hidden que fazia o botão
     sair da tela ou ficar atrás do menu inferior */
  .chat-input-area {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 44px !important;
    gap: 10px !important;
    align-items: center !important;
    position: relative !important; /* sticky falha em ancestor overflow:hidden */
    padding: 10px 12px !important;
  }

  .chat-input {
    min-width: 0 !important;
    width: 100% !important;
    grid-column: 1 !important;
  }

  .btn-enviar {
    grid-column: 2 !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
  }

  /* Mensagens: altura via flex (não calc fixo que vaza para fora) */
  #pagina-mensagens .mensagens-container {
    flex: 1 !important;
    min-height: 0 !important;
    height: auto !important;
  }

  /* ─────────────────────────────────────────────────────────────
     CONFIG SUBPÁGINAS — padding lateral interno
     ───────────────────────────────────────────────────────────── */

  /* A .pagina zera o padding externo; o container precisa de
     padding próprio para o conteúdo não tocar as bordas */
  .config-subpagina-container {
    padding-left: 14px !important;
    padding-right: 14px !important;
    box-sizing: border-box !important;
  }

  .config-subtopo {
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
    align-items: center !important;
  }

  .config-subtopo h2 {
    font-size: 20px !important;
    word-break: break-word !important;
    flex: 1 !important;
    min-width: 0 !important;
  }

  .config-subcard {
    padding: 16px !important;
    border-radius: 16px !important;
  }

  /* ─────────────────────────────────────────────────────────────
     CONTA E SEGURANÇA — hero em coluna no mobile
     ───────────────────────────────────────────────────────────── */

  .security-hero {
    flex-direction: column !important;
    gap: 16px !important;
    align-items: flex-start !important;
  }

  .security-hero-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .security-hero-actions .config-btn-acao {
    flex: 1 !important;
    min-width: 0 !important;
    text-align: center !important;
  }

  /* ─────────────────────────────────────────────────────────────
     FORMULÁRIOS — campos 100% na tela
     ───────────────────────────────────────────────────────────── */

  .security-field input,
  .campo-formulario input,
  .campo-formulario select,
  .campo-formulario textarea,
  .endereco-field input,
  .modal-campo input,
  .modal-campo select,
  .modal-campo textarea {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Botão de adicionar endereço: ocupa toda a largura disponível */
  #btn-adicionar-endereco-config {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* ─────────────────────────────────────────────────────────────
     TEXTOS LONGOS — sem estouro horizontal
     ───────────────────────────────────────────────────────────── */

  .config-subitem strong,
  .config-subitem p,
  .config-item-label,
  .endereco-info-item strong,
  .nome-produto,
  .item-carrinho-info h3,
  .item-carrinho-info p,
  .pd-nome,
  p, li {
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    max-width: 100% !important;
  }

  /* ─────────────────────────────────────────────────────────────
     PRODUTO — design legado (.pedido-card) em coluna no mobile
     ───────────────────────────────────────────────────────────── */

  .pedido-card {
    flex-direction: column !important;
    gap: 20px !important;
    padding: 18px !important;
  }

  .pedido-galeria {
    width: 100% !important;
    min-width: 0 !important;
  }

  .pedido-imagem-box {
    width: 100% !important;
    min-width: 0 !important;
    height: clamp(220px, 70vw, 320px) !important;
  }

  #pedido-nome {
    font-size: clamp(18px, 5.5vw, 26px) !important;
  }

  #pedido-preco {
    font-size: clamp(26px, 7.5vw, 38px) !important;
  }

  .pedido-parcelamento { font-size: 14px !important; }
  .pedido-descricao    { font-size: 14px !important; max-width: 100% !important; }
  .pedido-frete        { font-size: 17px !important; max-width: 100% !important; }

  /* ─────────────────────────────────────────────────────────────
     360PX — ajustes extra para telas muito pequenas
     ───────────────────────────────────────────────────────────── */

  @media (max-width: 360px) {
    .config-subtopo h2 { font-size: 17px !important; }
    .config-voltar { padding: 6px 10px !important; font-size: 12px !important; }
    .security-hero-actions .config-btn-acao { font-size: 13px !important; }
    .btn-enviar { width: 40px !important; min-width: 40px !important; height: 40px !important; }
    .chat-input-area { grid-template-columns: minmax(0, 1fr) 40px !important; }
  }
}

/* ═══════════════════════════════════════════════════════════════
   REDESIGN VISUAL MOBILE — Componentes premium
   Implementação baseada em referências de app marketplace escuro
   ═══════════════════════════════════════════════════════════════ */

/* ── Header: perfil icon melhorado ──────────────────────────── */
@media (max-width: 767px) {

  /* ── Notificações: subtítulo e filtros ─────────────────────── */
  .notif-subtitulo {
    font-size: 13px !important;
    color: var(--na-text-secondary) !important;
    margin: -12px 0 20px !important;
    line-height: 1.4 !important;
  }

  .notif-filtros {
    display: flex !important;
    gap: 8px !important;
    margin-bottom: 20px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-bottom: 2px !important;
  }

  .notif-filtros::-webkit-scrollbar { display: none !important; }

  .notif-filtro {
    display: inline-flex !important;
    align-items: center !important;
    height: 34px !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    border: 1px solid var(--na-border) !important;
    background: var(--na-surface-elevated) !important;
    color: var(--na-text-secondary) !important;
    transition: background 0.18s, color 0.18s, border-color 0.18s !important;
  }

  .notif-filtro.ativo {
    background: var(--na-gradient-primary) !important;
    border-color: transparent !important;
    color: #fff !important;
  }

  /* ── Config: card de perfil no topo ───────────────────────── */
  .config-perfil-card {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 16px !important;
    margin-bottom: 20px !important;
    border-radius: 20px !important;
    background: var(--na-surface-elevated) !important;
    border: 1px solid var(--na-border) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 8px 24px rgba(0,0,0,0.22) !important;
    cursor: pointer !important;
  }

  .config-perfil-avatar {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    border-radius: 16px !important;
    background: var(--na-gradient-primary) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 16px rgba(52,131,250,0.35) !important;
    flex-shrink: 0 !important;
  }

  .config-perfil-avatar svg {
    stroke: #fff !important;
  }

  .config-perfil-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    flex: 1 !important;
    min-width: 0 !important;
  }

  .config-perfil-nome {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--na-text) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .config-perfil-email {
    font-size: 12px !important;
    color: var(--na-text-secondary) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* ── Carrinho: resumo do pedido ───────────────────────────── */
  .carrinho-resumo-card {
    margin-top: 20px !important;
    padding: 20px !important;
    border-radius: 20px !important;
    background: var(--na-surface-elevated) !important;
    border: 1px solid var(--na-border) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 12px 32px rgba(0,0,0,0.25) !important;
    box-sizing: border-box !important;
  }

  .carrinho-resumo-titulo {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--na-text) !important;
    margin: 0 0 16px !important;
  }

  .carrinho-resumo-linha {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 14px !important;
    color: var(--na-text-secondary) !important;
    padding: 7px 0 !important;
  }

  .carrinho-resumo-valor-desconto {
    color: #22c55e !important;
    font-weight: 600 !important;
  }

  .carrinho-resumo-frete-gratis {
    color: #22c55e !important;
    font-weight: 600 !important;
  }

  .carrinho-resumo-divisor {
    height: 1px !important;
    background: var(--na-border) !important;
    margin: 10px 0 !important;
  }

  .carrinho-resumo-total {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--na-text) !important;
    padding: 10px 0 !important;
  }

  .carrinho-resumo-total span:last-child {
    font-size: 20px !important;
    color: var(--na-primary) !important;
  }

  .btn-finalizar-compra {
    width: 100% !important;
    height: 54px !important;
    margin-top: 16px !important;
    border-radius: 16px !important;
    background: var(--na-gradient-primary) !important;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 20px rgba(52,131,250,0.45) !important;
    letter-spacing: 0.01em !important;
  }

  .btn-finalizar-compra:active {
    transform: scale(0.98) !important;
    box-shadow: 0 2px 10px rgba(52,131,250,0.35) !important;
  }

  /* ── Chat: botão enviar gradiente roxo ────────────────────── */
  .btn-enviar {
    background: var(--na-gradient-primary) !important;
    box-shadow: 0 2px 12px rgba(52,131,250,0.4) !important;
  }

  .btn-enviar:active {
    transform: scale(0.92) !important;
    box-shadow: 0 1px 6px rgba(52,131,250,0.3) !important;
  }

  .btn-enviar svg {
    stroke: #fff !important;
  }

  /* ── Chat: área de input com fundo sólido ──────────────────── */
  .chat-input-area {
    background: rgba(10,12,20,0.97) !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    padding: 10px 12px 12px !important;
  }

  .chat-input {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: var(--na-text) !important;
    border-radius: 22px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .chat-input:focus {
    border-color: var(--na-primary) !important;
    outline: none !important;
  }

  /* ── Chat topo: avatar gradiente roxo ─────────────────────── */
  .chat-topo-avatar {
    background: var(--na-gradient-primary) !important;
    border-radius: 14px !important;
  }

  .chat-topo-avatar svg {
    stroke: #fff !important;
  }

  /* ── Carrinho: itens com borda e fundo ──────────────────────── */
  .item-carrinho {
    background: var(--na-surface-elevated) !important;
    border: 1px solid var(--na-border) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04) !important;
  }

  /* ── Produto card: preço melhorado ──────────────────────────── */
  .preco-produto {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--na-text) !important;
    line-height: 1.15 !important;
  }

  /* ── Config: grupos ─────────────────────────────────────────── */
  .configuracoes-lista {
    gap: 4px !important;
  }

  .config-group-label {
    padding: 12px 4px 6px !important;
    font-size: 10px !important;
  }

  #pagina-configuracoes .configuracoes-container {
    padding-top: 10px !important;
  }

  /* ── Bottom nav: fontes ajustadas ───────────────────────────── */
  .caixa .menu-btn {
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em !important;
  }

  .caixa .menu-btn.ativo {
    font-weight: 700 !important;
  }

  /* ── Home: títulos ──────────────────────────────────────────── */
  .home-section-header {
    padding-top: 22px !important;
    padding-bottom: 14px !important;
  }

  .home-titulo {
    font-size: 20px !important;
    font-weight: 800 !important;
    letter-spacing: -0.3px !important;
  }

  /* ── Barra seleção carrinho ──────────────────────────────────── */
  .barra-selecao-carrinho {
    border-radius: 0 !important;
    padding: 14px 16px !important;
    background: rgba(10,12,20,0.98) !important;
    border-top: 1px solid var(--na-border) !important;
    border-bottom: 1px solid var(--na-border) !important;
    margin: 12px -14px !important;
  }

  .checkbox-selecionar-todos {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    cursor: pointer !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--na-text) !important;
  }

  .btn-comprar-selecionados {
    height: 40px !important;
    padding: 0 20px !important;
    border-radius: 12px !important;
    background: var(--na-gradient-primary) !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border: none !important;
    cursor: pointer !important;
  }

  /* ── Notificação: ícone colorido e dot ───────────────────────── */
  .notif-icone {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(52,131,250,0.18) !important;
    flex-shrink: 0 !important;
  }

  .notif-icone svg {
    width: 18px !important;
    height: 18px !important;
    stroke: var(--na-primary) !important;
  }

  .notif-dot {
    width: 8px !important;
    height: 8px !important;
    min-width: 8px !important;
    border-radius: 50% !important;
    background: var(--na-primary) !important;
    flex-shrink: 0 !important;
  }
  .notif-dot-nao-lida {
    position: absolute !important;
    top: 0 !important; right: 0 !important;
    width: 8px !important; height: 8px !important;
    border-radius: 50% !important;
    background: var(--na-primary) !important;
  }
  .linha-notificacao.lida { opacity: 0.6 !important; }

  .notif-tempo {
    font-size: 11px !important;
    color: var(--na-text-tertiary) !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* ── Typing indicator ────────────────────────────────────────── */
  .chat-typing-indicator {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 14px !important;
    color: var(--na-text-secondary) !important;
    font-size: 12px !important;
  }

  .typing-dots {
    display: flex !important;
    gap: 4px !important;
    align-items: center !important;
  }

  .typing-dots span {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: var(--na-primary) !important;
    animation: typing-bounce 1.2s ease-in-out infinite !important;
  }

  .typing-dots span:nth-child(2) { animation-delay: 0.2s !important; }
  .typing-dots span:nth-child(3) { animation-delay: 0.4s !important; }

}

@keyframes typing-bounce {
  0%, 80%, 100% { transform: scale(0.75); opacity: 0.5; }
  40% { transform: scale(1); opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════
   FIX DESKTOP — Página de mensagens: altura exata + scroll correto
   Causa: styles.css usa calc(100vh - 120px) calibrado para header
   antigo (120px). O override define header = 68px, gerando 52px de
   fundo preto abaixo do container. Também remove margin-left: 80px
   do sidebar antigo que vaza no desktop.
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  #pagina-mensagens {
    padding-top: 0 !important;
    margin-top: 68px !important;
    height: calc(100dvh - 68px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  #pagina-mensagens .mensagens-container {
    flex: 1 !important;
    min-height: 0 !important;
    height: auto !important;
    margin-left: 0 !important;
  }
}

/* Fix final: mensagens alinhadas ao header/sidebar */
@media (min-width: 901px) {
  :root {
    --na-sidebar-current: 260px;
    --na-header-current: 68px;
  }

  .caixa {
    width: var(--na-sidebar-current) !important;
    height: 100dvh !important;
    top: 0 !important;
    left: 0 !important;
    border-right: 1px solid var(--na-border) !important;
  }

  .topo {
    left: var(--na-sidebar-current) !important;
    height: var(--na-header-current) !important;
    border-bottom: 1px solid var(--na-border) !important;
  }

  #pagina-mensagens.pagina {
    margin-left: var(--na-sidebar-current) !important;
    margin-top: 0 !important;
    padding-top: var(--na-header-current) !important;
    padding-bottom: 0 !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    background: var(--na-bg) !important;
  }

  #pagina-mensagens .mensagens-container {
    width: 100% !important;
    height: calc(100dvh - var(--na-header-current)) !important;
    min-height: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: 325px minmax(0, 1fr) !important;
    overflow: hidden !important;
    background: var(--na-bg) !important;
  }

  #pagina-mensagens .lista-conversas,
  #pagina-mensagens .chat-area {
    height: 100% !important;
    min-height: 0 !important;
  }

  #pagina-mensagens .lista-conversas {
    border-right: 1px solid var(--na-border) !important;
  }

  #pagina-mensagens .conversas-header,
  #pagina-mensagens .chat-topo {
    min-height: 86px !important;
    box-sizing: border-box !important;
    border-bottom: 1px solid var(--na-border) !important;
  }
}

@media (min-width: 768px) and (max-width: 900px) {
  #pagina-mensagens.pagina {
    margin-left: 220px !important;
    margin-top: 0 !important;
    padding-top: 68px !important;
    padding-bottom: 0 !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  #pagina-mensagens .mensagens-container {
    height: calc(100dvh - 68px) !important;
    min-height: 0 !important;
    margin: 0 !important;
    display: flex !important;
  }
}

@media (max-width: 767px) {
  #pagina-mensagens.ativa {
    height: 100dvh !important;
    min-height: 100dvh !important;
    padding-top: 118px !important;
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  #pagina-mensagens .mensagens-container {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
  }

  #pagina-mensagens .chat-topo {
    border-top: 0 !important;
  }
}

/* Correção definitiva: mensagens fora da briga de margin/padding antigo */
@media (min-width: 901px) {
  #pagina-mensagens.pagina.ativa {
    position: fixed !important;
    top: 68px !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 260px !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    overflow: hidden !important;
    background: var(--na-bg) !important;
  }

  #pagina-mensagens.pagina.ativa .mensagens-container {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: 325px minmax(0, 1fr) !important;
    overflow: hidden !important;
    background: var(--na-bg) !important;
  }

  #pagina-mensagens.pagina.ativa .lista-conversas {
    display: flex !important;
    height: 100% !important;
    min-height: 0 !important;
    border-right: 1px solid var(--na-border) !important;
    background: var(--na-surface) !important;
    overflow-y: auto !important;
  }

  #pagina-mensagens.pagina.ativa .chat-area {
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    background: var(--na-bg) !important;
    overflow: hidden !important;
  }

  #pagina-mensagens.pagina.ativa .conversas-header,
  #pagina-mensagens.pagina.ativa .chat-topo {
    height: 86px !important;
    min-height: 86px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    border-bottom: 1px solid var(--na-border) !important;
  }

  #pagina-mensagens.pagina.ativa .conversas-header {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  #pagina-mensagens.pagina.ativa .chat-topo {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  #pagina-mensagens.pagina.ativa .chat-mensagens {
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }
}

@media (min-width: 768px) and (max-width: 900px) {
  #pagina-mensagens.pagina.ativa {
    position: fixed !important;
    top: 68px !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 220px !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    overflow: hidden !important;
  }

  #pagina-mensagens.pagina.ativa .mensagens-container {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    overflow: hidden !important;
  }
}

@media (max-width: 767px) {
  #pagina-mensagens.pagina.ativa {
    position: fixed !important;
    top: 118px !important;
    right: 0 !important;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    left: 0 !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    overflow: hidden !important;
    background: var(--na-bg) !important;
  }

  #pagina-mensagens.pagina.ativa .mensagens-container {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    overflow: hidden !important;
  }
}

/* Estado de navegação: página inativa nunca pode aparecer misturada */
.pagina:not(.ativa),
#pagina-mensagens.pagina:not(.ativa) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#pagina-mensagens.pagina.ativa {
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Notificacoes: layout final da pagina ativa */
@media (min-width: 901px) {
  #pagina-notificacoes.pagina.ativa {
    position: fixed !important;
    top: 68px !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 260px !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 34px 40px 48px !important;
    display: block !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: var(--na-bg) !important;
    box-sizing: border-box !important;
  }

  #pagina-notificacoes.pagina.ativa .notificacoes-container {
    width: min(100%, 980px) !important;
    max-width: 980px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--na-text) !important;
  }

  #pagina-notificacoes.pagina.ativa .titulo-notificacoes {
    margin: 0 0 22px !important;
    padding: 0 !important;
    text-align: left !important;
  }

  #pagina-notificacoes.pagina.ativa .titulo-notificacoes h2 {
    margin: 0 0 8px !important;
    font-size: 40px !important;
    line-height: 1.08 !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    color: var(--na-text) !important;
  }

  #pagina-notificacoes.pagina.ativa .notif-subtitulo {
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
    color: var(--na-text-secondary) !important;
  }

  #pagina-notificacoes.pagina.ativa .notif-filtros {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }

  #pagina-notificacoes.pagina.ativa .notif-filtros::-webkit-scrollbar {
    display: none !important;
  }

  #pagina-notificacoes.pagina.ativa .notif-filtro {
    appearance: none !important;
    -webkit-appearance: none !important;
    height: 38px !important;
    min-width: 0 !important;
    padding: 0 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    border: 1px solid var(--na-border) !important;
    border-radius: 999px !important;
    background: var(--na-surface-elevated) !important;
    color: var(--na-text-secondary) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    cursor: pointer !important;
  }

  #pagina-notificacoes.pagina.ativa .notif-filtro.ativo {
    border-color: transparent !important;
    background: var(--na-gradient-primary) !important;
    color: #fff !important;
    box-shadow: var(--na-shadow-primary) !important;
  }

  #pagina-notificacoes.pagina.ativa #lista-notificacoes {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #pagina-notificacoes.pagina.ativa .estado-vazio {
    width: 100% !important;
    max-width: none !important;
    min-height: 260px !important;
    margin: 0 !important;
    padding: 46px 32px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    border-radius: 18px !important;
    border: 1px solid var(--na-border) !important;
    background: linear-gradient(180deg, rgba(20,20,26,0.96), rgba(13,13,21,0.98)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 18px 42px rgba(0,0,0,0.28) !important;
  }

  #pagina-notificacoes.pagina.ativa .estado-vazio::before {
    content: "" !important;
    width: 58px !important;
    height: 58px !important;
    margin: 0 0 18px !important;
    border-radius: 18px !important;
    background: var(--na-gradient-primary) !important;
    box-shadow: 0 0 34px rgba(52,131,250,0.38) !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E") center/56% no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E") center/56% no-repeat !important;
  }

  #pagina-notificacoes.pagina.ativa .estado-vazio h3 {
    margin: 0 0 10px !important;
    font-size: 24px !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
    color: var(--na-text) !important;
  }

  #pagina-notificacoes.pagina.ativa .estado-vazio p {
    max-width: 420px !important;
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
    color: var(--na-text-secondary) !important;
  }

  #pagina-notificacoes.pagina.ativa .linha-notificacao {
    width: 100% !important;
    max-width: none !important;
    min-height: 86px !important;
    margin: 0 0 12px !important;
    padding: 14px !important;
    border-radius: 12px !important;
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) 16px !important;
    align-items: center !important;
    gap: 10px !important;
    background: linear-gradient(145deg, rgba(255,255,255,0.055), rgba(52,131,250,0.065)) !important;
    border: 1px solid var(--na-border) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18) !important;
  }

  #pagina-notificacoes.pagina.ativa .notif-icone {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 10px !important;
    background: rgba(123, 51, 255, 0.18) !important;
  }

  #pagina-notificacoes.pagina.ativa .notif-conteudo,
  #pagina-notificacoes.pagina.ativa .notif-linha-topo {
    min-width: 0 !important;
    display: flex !important;
  }

  #pagina-notificacoes.pagina.ativa .notif-conteudo {
    flex-direction: column !important;
    gap: 5px !important;
  }

  #pagina-notificacoes.pagina.ativa .notif-linha-topo {
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  #pagina-notificacoes.pagina.ativa .texto-linha {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
  }

  #pagina-notificacoes.pagina.ativa .notif-detalhe {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    color: var(--na-text-secondary) !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  #pagina-notificacoes.pagina.ativa .notif-rodape {
    width: fit-content !important;
    min-height: 18px !important;
    padding: 0 7px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    background: rgba(123, 51, 255, 0.16) !important;
    color: #bba7ff !important;
    font-size: 9px !important;
    font-weight: 800 !important;
  }

  #pagina-notificacoes.pagina.ativa .seta-linha {
    color: var(--na-text-tertiary) !important;
    font-size: 20px !important;
    line-height: 1 !important;
  }
}

@media (min-width: 768px) and (max-width: 900px) {
  #pagina-notificacoes.pagina.ativa {
    position: fixed !important;
    top: 68px !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 220px !important;
    margin: 0 !important;
    padding: 28px 28px 42px !important;
    overflow-y: auto !important;
    background: var(--na-bg) !important;
  }
}

@media (max-width: 767px) {
  #pagina-notificacoes.pagina.ativa {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* Meus enderecos: topo e botoes normalizados */
#pagina-config-meus-enderecos.pagina.ativa {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: var(--na-bg) !important;
}

#pagina-config-meus-enderecos.pagina.ativa .config-subpagina-container {
  width: min(100%, 1180px) !important;
  max-width: 1180px !important;
  margin: 0 !important;
  padding: 34px 40px 56px !important;
  box-sizing: border-box !important;
}

#pagina-config-meus-enderecos.pagina.ativa .config-subtopo-enderecos {
  width: 100% !important;
  margin: 0 0 28px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  flex-wrap: nowrap !important;
}

#pagina-config-meus-enderecos.pagina.ativa .config-subtopo-esquerda {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  flex: 1 1 auto !important;
  flex-wrap: nowrap !important;
}

#pagina-config-meus-enderecos.pagina.ativa .config-subtopo h2 {
  margin: 0 !important;
  min-width: 0 !important;
  flex: 0 1 auto !important;
  font-size: 32px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  color: var(--na-text) !important;
  white-space: nowrap !important;
}

#pagina-config-meus-enderecos.pagina.ativa .config-voltar,
#pagina-config-meus-enderecos.pagina.ativa .endereco-btn-add-topo,
#pagina-config-meus-enderecos.pagina.ativa .endereco-btn {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  letter-spacing: 0 !important;
}

#pagina-config-meus-enderecos.pagina.ativa .config-voltar {
  height: 46px !important;
  padding: 0 18px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(52,131,250,0.38) !important;
  background: rgba(52,131,250,0.12) !important;
  color: var(--na-text) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}

#pagina-config-meus-enderecos.pagina.ativa .endereco-btn-add-topo {
  height: 52px !important;
  padding: 0 24px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: var(--na-gradient-primary) !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  box-shadow: 0 12px 28px rgba(52,131,250,0.28) !important;
  flex: 0 0 auto !important;
}

#pagina-config-meus-enderecos.pagina.ativa .enderecos-area-config,
#pagina-config-meus-enderecos.pagina.ativa .enderecos-grid {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
}

#pagina-config-meus-enderecos.pagina.ativa .endereco-card-pro {
  width: 100% !important;
  margin: 0 !important;
  padding: 28px 30px !important;
  border-radius: 20px !important;
  border: 1px solid var(--na-border) !important;
  background: linear-gradient(135deg, rgba(20,20,26,0.98), rgba(16,13,27,0.98)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 18px 42px rgba(0,0,0,0.28) !important;
  box-sizing: border-box !important;
}

#pagina-config-meus-enderecos.pagina.ativa .endereco-card-topo {
  margin: 0 0 22px !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
}

#pagina-config-meus-enderecos.pagina.ativa .endereco-card-titulos {
  min-width: 0 !important;
}

#pagina-config-meus-enderecos.pagina.ativa .endereco-card-titulos h3 {
  margin: 0 0 8px !important;
  font-size: 26px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  color: var(--na-text) !important;
}

#pagina-config-meus-enderecos.pagina.ativa .endereco-card-resumo {
  max-width: 760px !important;
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  color: var(--na-text-secondary) !important;
}

#pagina-config-meus-enderecos.pagina.ativa .endereco-card-badges {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex: 0 0 auto !important;
}

#pagina-config-meus-enderecos.pagina.ativa .endereco-badge {
  height: 34px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

#pagina-config-meus-enderecos.pagina.ativa .endereco-card-info {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin: 0 0 20px !important;
}

#pagina-config-meus-enderecos.pagina.ativa .endereco-info-item {
  min-width: 0 !important;
  padding: 16px 18px !important;
  border-radius: 16px !important;
  border: 1px solid var(--na-border) !important;
  background: rgba(255,255,255,0.035) !important;
}

#pagina-config-meus-enderecos.pagina.ativa .endereco-card-acoes {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

#pagina-config-meus-enderecos.pagina.ativa .endereco-btn {
  height: 44px !important;
  padding: 0 18px !important;
  border-radius: 14px !important;
  border: 1px solid var(--na-border) !important;
  background: rgba(255,255,255,0.04) !important;
  color: var(--na-text) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}

#pagina-config-meus-enderecos.pagina.ativa .endereco-btn-primario {
  border-color: transparent !important;
  background: var(--na-gradient-primary) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(52,131,250,0.24) !important;
}

#pagina-config-meus-enderecos.pagina.ativa .endereco-inline-form {
  margin-top: 20px !important;
  border-radius: 18px !important;
  border: 1px solid var(--na-border) !important;
  background: var(--na-surface-elevated) !important;
}

#pagina-config-meus-enderecos.pagina.ativa .endereco-inline-form {
  padding: 24px !important;
  border-top: 1px solid var(--na-border) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

#pagina-config-meus-enderecos.pagina.ativa .endereco-inline-topo {
  margin: 0 0 20px !important;
}

#pagina-config-meus-enderecos.pagina.ativa .endereco-inline-topo h4 {
  margin: 0 0 6px !important;
  font-size: 24px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  color: var(--na-text) !important;
}

#pagina-config-meus-enderecos.pagina.ativa .endereco-inline-topo p {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: var(--na-text-secondary) !important;
}

#pagina-config-meus-enderecos.pagina.ativa .endereco-inline-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

#pagina-config-meus-enderecos.pagina.ativa .endereco-inline-field {
  min-width: 0 !important;
}

#pagina-config-meus-enderecos.pagina.ativa .endereco-inline-field label {
  display: block !important;
  margin: 0 0 8px !important;
  color: var(--na-text-secondary) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
}

#pagina-config-meus-enderecos.pagina.ativa .endereco-inline-field input,
#pagina-config-meus-enderecos.pagina.ativa .endereco-inline-field select {
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 14px !important;
  border-radius: 14px !important;
  border: 1px solid var(--na-border) !important;
  background: rgba(255,255,255,0.045) !important;
  color: var(--na-text) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  outline: none !important;
  box-sizing: border-box !important;
}

#pagina-config-meus-enderecos.pagina.ativa .endereco-inline-field input::placeholder {
  color: var(--na-text-tertiary) !important;
}

#pagina-config-meus-enderecos.pagina.ativa .endereco-inline-field input:focus,
#pagina-config-meus-enderecos.pagina.ativa .endereco-inline-field select:focus {
  border-color: var(--na-primary) !important;
  box-shadow: 0 0 0 3px var(--na-primary-dim) !important;
}

#pagina-config-meus-enderecos.pagina.ativa .endereco-inline-checkbox {
  align-self: end !important;
  display: flex !important;
  align-items: stretch !important;
}

#pagina-config-meus-enderecos.pagina.ativa .endereco-inline-checkbox > label {
  width: 100% !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 8px 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  border-radius: 14px !important;
  border: 1px solid var(--na-border) !important;
  background: rgba(255,255,255,0.045) !important;
  color: var(--na-text) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

#pagina-config-meus-enderecos.pagina.ativa .endereco-inline-checkbox input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 22px !important;
  min-width: 22px !important;
  height: 22px !important;
  min-height: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 7px !important;
  border: 1px solid var(--na-border) !important;
  background: rgba(255,255,255,0.06) !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
}

#pagina-config-meus-enderecos.pagina.ativa .endereco-inline-checkbox input[type="checkbox"]::before {
  content: "" !important;
  width: 11px !important;
  height: 7px !important;
  border-left: 3px solid #fff !important;
  border-bottom: 3px solid #fff !important;
  transform: rotate(-45deg) scale(0) !important;
  transform-origin: center !important;
  transition: transform 0.14s ease !important;
}

#pagina-config-meus-enderecos.pagina.ativa .endereco-inline-checkbox input[type="checkbox"]:checked {
  border-color: transparent !important;
  background: var(--na-gradient-primary) !important;
}

#pagina-config-meus-enderecos.pagina.ativa .endereco-inline-checkbox input[type="checkbox"]:checked::before {
  transform: rotate(-45deg) scale(1) !important;
}

#pagina-config-meus-enderecos.pagina.ativa .endereco-inline-actions {
  margin-top: 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

#pagina-config-meus-enderecos.pagina.ativa .endereco-inline-cancelar {
  appearance: none !important;
  -webkit-appearance: none !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 14px !important;
  border: 1px solid var(--na-border) !important;
  background: rgba(255,255,255,0.04) !important;
  color: var(--na-text) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

/* ─── Página de adicionar/editar endereço (config) ──────────────────────────── */

#pagina-config-form-endereco.pagina.ativa .endereco-inline-topo {
  display: none !important;
}

#pagina-config-form-endereco.pagina.ativa .endereco-inline-form {
  margin-top: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#pagina-config-form-endereco.pagina.ativa .endereco-inline-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

#pagina-config-form-endereco.pagina.ativa .endereco-inline-field {
  min-width: 0 !important;
}

#pagina-config-form-endereco.pagina.ativa .endereco-inline-field label {
  display: block !important;
  margin: 0 0 8px !important;
  color: var(--na-text-secondary) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
}

#pagina-config-form-endereco.pagina.ativa .endereco-inline-field input,
#pagina-config-form-endereco.pagina.ativa .endereco-inline-field select {
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 14px !important;
  border-radius: 14px !important;
  border: 1px solid var(--na-border) !important;
  background: rgba(255,255,255,0.045) !important;
  color: var(--na-text) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  outline: none !important;
  box-sizing: border-box !important;
}

#pagina-config-form-endereco.pagina.ativa .endereco-inline-field input::placeholder {
  color: var(--na-text-tertiary) !important;
}

#pagina-config-form-endereco.pagina.ativa .endereco-inline-field input:focus,
#pagina-config-form-endereco.pagina.ativa .endereco-inline-field select:focus {
  border-color: var(--na-primary) !important;
  box-shadow: 0 0 0 3px var(--na-primary-dim) !important;
}

#pagina-config-form-endereco.pagina.ativa .endereco-inline-checkbox {
  align-self: end !important;
  display: flex !important;
  align-items: stretch !important;
}

#pagina-config-form-endereco.pagina.ativa .endereco-inline-checkbox > label {
  width: 100% !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 8px 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  border-radius: 14px !important;
  border: 1px solid var(--na-border) !important;
  background: rgba(255,255,255,0.045) !important;
  color: var(--na-text) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

#pagina-config-form-endereco.pagina.ativa .endereco-inline-checkbox input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 22px !important;
  min-width: 22px !important;
  height: 22px !important;
  min-height: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 7px !important;
  border: 2px solid var(--na-border) !important;
  background: transparent !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}

#pagina-config-form-endereco.pagina.ativa .endereco-inline-checkbox input[type="checkbox"]:checked {
  background: var(--na-primary) !important;
  border-color: var(--na-primary) !important;
}

#pagina-config-form-endereco.pagina.ativa .endereco-inline-actions {
  margin-top: 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

#pagina-config-form-endereco.pagina.ativa .endereco-inline-actions .endereco-btn {
  height: 50px !important;
  min-height: 50px !important;
  padding: 0 24px !important;
  border-radius: 14px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}

#pagina-config-form-endereco.pagina.ativa .endereco-inline-actions .endereco-btn-primario {
  background: var(--na-gradient-primary) !important;
  border: 0 !important;
  color: #fff !important;
}

#pagina-config-form-endereco.pagina.ativa .endereco-inline-cancelar {
  appearance: none !important;
  -webkit-appearance: none !important;
  height: 50px !important;
  min-height: 50px !important;
  padding: 0 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 14px !important;
  border: 1px solid var(--na-border) !important;
  background: rgba(255,255,255,0.04) !important;
  color: var(--na-text) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

/* ─── Mobile: página de form de endereço ─────────────────────────────────── */
@media (max-width: 767px) {
  #pagina-config-form-endereco.pagina.ativa .config-subpagina-container {
    width: 100% !important;
    min-height: 100% !important;
    padding: 18px 14px 92px !important;
    color: var(--na-text) !important;
  }

  #pagina-config-form-endereco.pagina.ativa .endereco-inline-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  #pagina-config-form-endereco.pagina.ativa .endereco-inline-actions {
    flex-direction: column !important;
    gap: 10px !important;
  }

  #pagina-config-form-endereco.pagina.ativa .endereco-inline-actions .endereco-btn,
  #pagina-config-form-endereco.pagina.ativa .endereco-inline-cancelar {
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    border-radius: 12px !important;
    font-size: 15px !important;
  }
}

@media (max-width: 767px) {
  #pagina-config-meus-enderecos.pagina.ativa .config-subpagina-container {
    padding: 18px 14px 92px !important;
  }

  #pagina-config-meus-enderecos.pagina.ativa .config-subtopo-enderecos,
  #pagina-config-meus-enderecos.pagina.ativa .config-subtopo-esquerda,
  #pagina-config-meus-enderecos.pagina.ativa .endereco-card-topo {
    flex-wrap: wrap !important;
  }

  #pagina-config-meus-enderecos.pagina.ativa .config-subtopo h2 {
    font-size: 22px !important;
    white-space: normal !important;
  }

  #pagina-config-meus-enderecos.pagina.ativa .endereco-btn-add-topo {
    width: 100% !important;
  }

  #pagina-config-meus-enderecos.pagina.ativa .endereco-card-pro {
    padding: 20px 16px !important;
  }

  #pagina-config-meus-enderecos.pagina.ativa .endereco-card-titulos h3 {
    font-size: 20px !important;
  }

  #pagina-config-meus-enderecos.pagina.ativa .endereco-card-info {
    grid-template-columns: 1fr !important;
  }

  #pagina-config-meus-enderecos.pagina.ativa .endereco-inline-form {
    padding: 18px 14px !important;
  }

  #pagina-config-meus-enderecos.pagina.ativa .endereco-inline-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  #pagina-config-meus-enderecos.pagina.ativa .endereco-inline-actions .endereco-btn,
  #pagina-config-meus-enderecos.pagina.ativa .endereco-inline-cancelar {
    width: 100% !important;
  }
}

/* Configuracoes: subpaginas abrindo no enquadramento correto */
@media (min-width: 901px) {
  #pagina-config-conta-seguranca.pagina.ativa,
  #pagina-config-contas-cartoes.pagina.ativa,
  #pagina-config-notificacoes.pagina.ativa,
  #pagina-config-idioma.pagina.ativa,
  #pagina-config-avaliar.pagina.ativa,
  #pagina-config-sobre.pagina.ativa,
  #pagina-config-excluir-conta.pagina.ativa {
    position: fixed !important;
    top: 68px !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 260px !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 34px 40px 56px !important;
    display: block !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: var(--na-bg) !important;
    box-sizing: border-box !important;
  }

  #pagina-config-conta-seguranca.pagina.ativa .config-subpagina-container,
  #pagina-config-contas-cartoes.pagina.ativa .config-subpagina-container,
  #pagina-config-notificacoes.pagina.ativa .config-subpagina-container,
  #pagina-config-idioma.pagina.ativa .config-subpagina-container,
  #pagina-config-avaliar.pagina.ativa .config-subpagina-container,
  #pagina-config-sobre.pagina.ativa .config-subpagina-container,
  #pagina-config-excluir-conta.pagina.ativa .config-subpagina-container {
    width: min(100%, 1080px) !important;
    max-width: 1080px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--na-text) !important;
    box-sizing: border-box !important;
  }
}

@media (min-width: 768px) and (max-width: 900px) {
  #pagina-config-conta-seguranca.pagina.ativa,
  #pagina-config-contas-cartoes.pagina.ativa,
  #pagina-config-notificacoes.pagina.ativa,
  #pagina-config-idioma.pagina.ativa,
  #pagina-config-avaliar.pagina.ativa,
  #pagina-config-sobre.pagina.ativa,
  #pagina-config-excluir-conta.pagina.ativa {
    position: fixed !important;
    top: 68px !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 220px !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 28px 28px 46px !important;
    display: block !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: var(--na-bg) !important;
    box-sizing: border-box !important;
  }
}

#pagina-config-conta-seguranca.pagina.ativa .config-subtopo,
#pagina-config-contas-cartoes.pagina.ativa .config-subtopo,
#pagina-config-notificacoes.pagina.ativa .config-subtopo,
#pagina-config-idioma.pagina.ativa .config-subtopo,
#pagina-config-avaliar.pagina.ativa .config-subtopo,
#pagina-config-sobre.pagina.ativa .config-subtopo,
#pagina-config-excluir-conta.pagina.ativa .config-subtopo {
  width: 100% !important;
  margin: 0 0 28px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  flex-wrap: nowrap !important;
}

#pagina-config-conta-seguranca.pagina.ativa .config-subtopo h2,
#pagina-config-contas-cartoes.pagina.ativa .config-subtopo h2,
#pagina-config-notificacoes.pagina.ativa .config-subtopo h2,
#pagina-config-idioma.pagina.ativa .config-subtopo h2,
#pagina-config-avaliar.pagina.ativa .config-subtopo h2,
#pagina-config-sobre.pagina.ativa .config-subtopo h2,
#pagina-config-excluir-conta.pagina.ativa .config-subtopo h2 {
  margin: 0 !important;
  min-width: 0 !important;
  font-size: 32px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  color: var(--na-text) !important;
}

#pagina-config-conta-seguranca.pagina.ativa .config-voltar,
#pagina-config-contas-cartoes.pagina.ativa .config-voltar,
#pagina-config-notificacoes.pagina.ativa .config-voltar,
#pagina-config-idioma.pagina.ativa .config-voltar,
#pagina-config-avaliar.pagina.ativa .config-voltar,
#pagina-config-sobre.pagina.ativa .config-voltar,
#pagina-config-excluir-conta.pagina.ativa .config-voltar {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: auto !important;
  height: 46px !important;
  min-width: 0 !important;
  min-height: 46px !important;
  padding: 0 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  border-radius: 14px !important;
  border: 1px solid rgba(52,131,250,0.38) !important;
  background: rgba(52,131,250,0.12) !important;
  color: var(--na-text) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

#pagina-config-conta-seguranca.pagina.ativa .config-subcard,
#pagina-config-contas-cartoes.pagina.ativa .config-subcard,
#pagina-config-notificacoes.pagina.ativa .config-subcard,
#pagina-config-idioma.pagina.ativa .config-subcard,
#pagina-config-avaliar.pagina.ativa .config-subcard,
#pagina-config-sobre.pagina.ativa .config-subcard,
#pagina-config-excluir-conta.pagina.ativa .config-subcard {
  width: 100% !important;
  margin: 0 !important;
  padding: 28px 30px !important;
  border-radius: 20px !important;
  border: 1px solid var(--na-border) !important;
  background: linear-gradient(180deg, rgba(20,20,26,0.98), rgba(13,13,21,0.98)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 18px 42px rgba(0,0,0,0.28) !important;
  box-sizing: border-box !important;
}

#pagina-config-avaliar.pagina.ativa .config-subcard-avaliar {
  max-width: 980px !important;
  min-height: 360px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 22px !important;
}

#pagina-config-avaliar.pagina.ativa .config-avaliar-hint {
  margin: 0 !important;
  color: var(--na-text-secondary) !important;
  font-size: 16px !important;
  line-height: 1.45 !important;
  text-align: center !important;
}

#pagina-config-avaliar.pagina.ativa .avaliacao-estrelas {
  margin: 0 !important;
  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;
}

#pagina-config-avaliar.pagina.ativa .avaliacao-estrela {
  width: 48px !important;
  height: 48px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  background: transparent !important;
  color: rgba(226,226,240,0.18) !important;
  font-size: 40px !important;
  line-height: 1 !important;
}

#pagina-config-avaliar.pagina.ativa .avaliacao-estrela.ativa,
#pagina-config-avaliar.pagina.ativa .avaliacao-estrela:hover {
  color: #f5b83d !important;
}

#pagina-config-avaliar.pagina.ativa .config-textarea {
  width: 100% !important;
  min-height: 140px !important;
  max-height: 220px !important;
  padding: 18px 20px !important;
  border-radius: 16px !important;
  border: 1px solid var(--na-border) !important;
  background: rgba(255,255,255,0.045) !important;
  color: var(--na-text) !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  resize: vertical !important;
}

#pagina-config-avaliar.pagina.ativa #btn-enviar-avaliacao {
  height: 50px !important;
  min-width: 190px !important;
  padding: 0 24px !important;
  border-radius: 14px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}

@media (max-width: 767px) {
  #pagina-config-conta-seguranca.pagina.ativa,
  #pagina-config-contas-cartoes.pagina.ativa,
  #pagina-config-notificacoes.pagina.ativa,
  #pagina-config-idioma.pagina.ativa,
  #pagina-config-avaliar.pagina.ativa,
  #pagina-config-sobre.pagina.ativa,
  #pagina-config-excluir-conta.pagina.ativa {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  #pagina-config-conta-seguranca.pagina.ativa .config-subtopo,
  #pagina-config-contas-cartoes.pagina.ativa .config-subtopo,
  #pagina-config-notificacoes.pagina.ativa .config-subtopo,
  #pagina-config-idioma.pagina.ativa .config-subtopo,
  #pagina-config-avaliar.pagina.ativa .config-subtopo,
  #pagina-config-sobre.pagina.ativa .config-subtopo,
  #pagina-config-excluir-conta.pagina.ativa .config-subtopo {
    flex-wrap: wrap !important;
    margin-bottom: 18px !important;
  }

  #pagina-config-conta-seguranca.pagina.ativa .config-subtopo h2,
  #pagina-config-contas-cartoes.pagina.ativa .config-subtopo h2,
  #pagina-config-notificacoes.pagina.ativa .config-subtopo h2,
  #pagina-config-idioma.pagina.ativa .config-subtopo h2,
  #pagina-config-avaliar.pagina.ativa .config-subtopo h2,
  #pagina-config-sobre.pagina.ativa .config-subtopo h2,
  #pagina-config-excluir-conta.pagina.ativa .config-subtopo h2 {
    font-size: 22px !important;
  }

  #pagina-config-conta-seguranca.pagina.ativa .config-subcard,
  #pagina-config-contas-cartoes.pagina.ativa .config-subcard,
  #pagina-config-notificacoes.pagina.ativa .config-subcard,
  #pagina-config-idioma.pagina.ativa .config-subcard,
  #pagina-config-avaliar.pagina.ativa .config-subcard,
  #pagina-config-sobre.pagina.ativa .config-subcard,
  #pagina-config-excluir-conta.pagina.ativa .config-subcard {
    padding: 20px 16px !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   CONTA E SEGURANÇA — header mobile com gradiente
   ───────────────────────────────────────────────────────────── */

.security-topo-mobile {
  display: none;
}

.config-subtopo-desktop-only {
  display: flex;
}

@media (max-width: 767px) {
  .security-topo-mobile {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    min-height: 64px !important;
    padding: calc(12px + env(safe-area-inset-top, 0px)) 18px 12px !important;
    background: linear-gradient(135deg, #7c3aed 0%, #2563eb 100%) !important;
    color: #ffffff !important;
    box-sizing: border-box !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    margin: 0 !important;
    border: none !important;
  }

  .security-topo-mobile h2 {
    margin: 0 !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    letter-spacing: -0.01em !important;
    line-height: 1.2 !important;
  }

  .security-voltar-mobile {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255,255,255,0.15) !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    color: #ffffff !important;
    cursor: pointer !important;
    transition: background 0.15s ease !important;
  }

  .security-voltar-mobile:active {
    background: rgba(255,255,255,0.25) !important;
  }

  #pagina-config-conta-seguranca.pagina.ativa .config-subtopo.config-subtopo-desktop-only {
    display: none !important;
  }

  #pagina-config-conta-seguranca.pagina.ativa {
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #pagina-config-conta-seguranca .config-subpagina-container {
    padding: 16px 16px 32px !important;
  }

  #pagina-config-conta-seguranca .security-card {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 18px !important;
    padding: 20px 18px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
    gap: 18px !important;
    display: flex !important;
    flex-direction: column !important;
  }

  #pagina-config-conta-seguranca .security-hero {
    padding-bottom: 16px !important;
    border-bottom: 1px solid #e5e7eb !important;
  }

  #pagina-config-conta-seguranca .security-badge {
    background: rgba(124, 58, 237, 0.08) !important;
    color: #7c3aed !important;
    font-size: 11px !important;
    padding: 6px 12px !important;
    gap: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  #pagina-config-conta-seguranca .security-badge svg {
    stroke: #7c3aed !important;
    width: 13px !important;
    height: 13px !important;
  }

  #pagina-config-conta-seguranca .security-hero h3 {
    color: #18172A !important;
    font-size: 20px !important;
  }

  #pagina-config-conta-seguranca .security-hero p {
    color: #6b7280 !important;
    font-size: 14px !important;
  }

  #pagina-config-conta-seguranca .security-hero-actions .config-btn-acao {
    border-radius: 12px !important;
    font-size: 14px !important;
    padding: 12px 18px !important;
    font-weight: 600 !important;
  }

  #pagina-config-conta-seguranca .security-hero-actions .config-btn-primario {
    background: linear-gradient(135deg, #7c3aed, #2563eb) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.25) !important;
  }

  #pagina-config-conta-seguranca .security-hero-actions .config-btn-acao:not(.config-btn-primario) {
    background: #f3f4f6 !important;
    border: 1px solid #e5e7eb !important;
    color: #374151 !important;
  }

  #pagina-config-conta-seguranca .security-info-card {
    background: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 14px !important;
    padding: 16px !important;
  }

  #pagina-config-conta-seguranca .security-info-card:hover {
    border-color: #e5e7eb !important;
    box-shadow: none !important;
  }

  #pagina-config-conta-seguranca .security-label {
    color: #9ca3af !important;
    font-size: 11px !important;
    letter-spacing: 0.06em !important;
    margin-bottom: 6px !important;
  }

  #pagina-config-conta-seguranca .security-info-card p {
    color: #18172A !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  #pagina-config-conta-seguranca .security-panel {
    background: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 16px !important;
    padding: 20px 18px !important;
  }

  #pagina-config-conta-seguranca .security-panel-topo h4 {
    color: #18172A !important;
    font-size: 18px !important;
  }

  #pagina-config-conta-seguranca .security-panel-topo p {
    color: #6b7280 !important;
  }

  #pagina-config-conta-seguranca .security-field label {
    color: #374151 !important;
    font-size: 13px !important;
  }

  #pagina-config-conta-seguranca .security-field input {
    background: #ffffff !important;
    border: 1px solid #d1d5db !important;
    color: #18172A !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    font-size: 15px !important;
  }

  #pagina-config-conta-seguranca .security-field input:focus {
    border-color: #7c3aed !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12) !important;
  }

  #pagina-config-conta-seguranca .security-field input::placeholder {
    color: #9ca3af !important;
  }

  #pagina-config-conta-seguranca .security-panel-actions .config-btn-acao:not(.config-btn-primario) {
    background: #f3f4f6 !important;
    border: 1px solid #e5e7eb !important;
    color: #374151 !important;
  }

  #pagina-config-conta-seguranca .security-panel-actions .config-btn-primario {
    background: linear-gradient(135deg, #7c3aed, #2563eb) !important;
    border: none !important;
    color: #fff !important;
  }

  #pagina-config-conta-seguranca .security-field-erro {
    background: rgba(239, 68, 68, 0.06) !important;
    border-color: rgba(239, 68, 68, 0.2) !important;
    color: #dc2626 !important;
  }

  #pagina-config-conta-seguranca .config-btn-sair {
    color: #dc2626 !important;
    border-color: rgba(220, 38, 38, 0.25) !important;
    font-size: 15px !important;
  }

  #pagina-config-conta-seguranca .config-btn-sair:hover {
    background: rgba(220, 38, 38, 0.06) !important;
  }

  #pagina-config-conta-seguranca .security-footer-actions {
    justify-content: center !important;
    padding-top: 8px !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   MEUS ENDEREÇOS — header mobile com gradiente
   ───────────────────────────────────────────────────────────── */

.enderecos-topo-mobile {
  display: none;
}

.enderecos-add-mobile-wrap {
  display: none;
}

@media (max-width: 767px) {
  .enderecos-topo-mobile {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    min-height: 64px !important;
    padding: calc(12px + env(safe-area-inset-top, 0px)) 18px 12px !important;
    background: linear-gradient(135deg, #7c3aed 0%, #2563eb 100%) !important;
    color: #ffffff !important;
    box-sizing: border-box !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    margin: 0 !important;
    border: none !important;
  }

  .enderecos-topo-mobile h2 {
    margin: 0 !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    letter-spacing: -0.01em !important;
    line-height: 1.2 !important;
  }

  .enderecos-voltar-mobile {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255,255,255,0.15) !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    color: #ffffff !important;
    cursor: pointer !important;
    transition: background 0.15s ease !important;
  }

  .enderecos-voltar-mobile:active {
    background: rgba(255,255,255,0.25) !important;
  }

  #pagina-config-meus-enderecos.pagina.ativa .config-subtopo.config-subtopo-desktop-only {
    display: none !important;
  }

  #pagina-config-meus-enderecos.pagina.ativa {
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #pagina-config-meus-enderecos .config-subpagina-container {
    padding: 16px 16px 32px !important;
  }

  .enderecos-add-mobile-wrap {
    display: block !important;
    margin-bottom: 16px !important;
  }

  .endereco-btn-add-mobile {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 100% !important;
    height: 50px !important;
    padding: 0 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    border: none !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #7c3aed, #2563eb) !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    box-shadow: 0 6px 18px rgba(124, 58, 237, 0.25) !important;
    transition: opacity 0.15s ease !important;
  }

  .endereco-btn-add-mobile:active {
    opacity: 0.9 !important;
  }

  #pagina-config-meus-enderecos .endereco-card-pro {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 18px !important;
    padding: 20px 18px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
    position: relative !important;
  }

  #pagina-config-meus-enderecos .endereco-card-pro::before {
    display: none !important;
  }

  #pagina-config-meus-enderecos .endereco-card-pro:hover {
    transform: none !important;
    border-color: #e5e7eb !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
  }

  #pagina-config-meus-enderecos .endereco-card-topo {
    border-bottom: 1px solid #f3f4f6 !important;
    padding-bottom: 14px !important;
    margin-bottom: 14px !important;
  }

  #pagina-config-meus-enderecos .endereco-card-titulos h3 {
    color: #18172A !important;
    font-size: 18px !important;
    font-weight: 700 !important;
  }

  #pagina-config-meus-enderecos .endereco-card-resumo {
    color: #6b7280 !important;
    font-size: 14px !important;
  }

  #pagina-config-meus-enderecos .endereco-badge {
    height: 28px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  #pagina-config-meus-enderecos .endereco-badge-tipo {
    background: rgba(124, 58, 237, 0.08) !important;
    color: #7c3aed !important;
    border: none !important;
  }

  #pagina-config-meus-enderecos .endereco-badge-principal {
    background: rgba(34, 197, 94, 0.08) !important;
    color: #16a34a !important;
    border: none !important;
  }

  #pagina-config-meus-enderecos .endereco-card-info {
    margin-bottom: 16px !important;
  }

  #pagina-config-meus-enderecos .endereco-info-item {
    background: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
  }

  #pagina-config-meus-enderecos .endereco-info-item strong {
    color: #9ca3af !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    font-weight: 600 !important;
  }

  #pagina-config-meus-enderecos .endereco-info-item p {
    color: #18172A !important;
    font-size: 14px !important;
    font-weight: 600 !important;
  }

  #pagina-config-meus-enderecos .endereco-card-acoes {
    gap: 10px !important;
  }

  #pagina-config-meus-enderecos .endereco-btn {
    height: 42px !important;
    padding: 0 18px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    flex: 1 !important;
    text-align: center !important;
    justify-content: center !important;
    background: #f3f4f6 !important;
    border: 1px solid #e5e7eb !important;
    color: #374151 !important;
    box-shadow: none !important;
  }

  #pagina-config-meus-enderecos .endereco-btn-primario {
    background: linear-gradient(135deg, #7c3aed, #2563eb) !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.2) !important;
  }

  #pagina-config-meus-enderecos .endereco-btn-remover {
    background: #fef2f2 !important;
    border: 1px solid rgba(239, 68, 68, 0.2) !important;
    color: #dc2626 !important;
  }

  #pagina-config-meus-enderecos .endereco-inline-form {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 16px !important;
    padding: 20px 16px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
  }

  #pagina-config-meus-enderecos .endereco-inline-topo h4 {
    color: #18172A !important;
    font-size: 18px !important;
  }

  #pagina-config-meus-enderecos .endereco-inline-topo p {
    color: #6b7280 !important;
  }

  #pagina-config-meus-enderecos .endereco-inline-field label {
    color: #374151 !important;
  }

  #pagina-config-meus-enderecos .endereco-inline-field input,
  #pagina-config-meus-enderecos .endereco-inline-field select {
    background: #ffffff !important;
    border: 1px solid #d1d5db !important;
    color: #18172A !important;
    border-radius: 12px !important;
  }

  #pagina-config-meus-enderecos .endereco-inline-field input:focus,
  #pagina-config-meus-enderecos .endereco-inline-field select:focus {
    border-color: #7c3aed !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12) !important;
  }

  #pagina-config-meus-enderecos .endereco-inline-field input::placeholder {
    color: #9ca3af !important;
  }

  #pagina-config-meus-enderecos .endereco-inline-actions .endereco-btn-primario {
    background: linear-gradient(135deg, #7c3aed, #2563eb) !important;
    border: none !important;
    color: #fff !important;
  }

  #pagina-config-meus-enderecos .endereco-inline-cancelar {
    background: #f3f4f6 !important;
    border: 1px solid #e5e7eb !important;
    color: #374151 !important;
  }

  #pagina-config-meus-enderecos .enderecos-vazio {
    color: #6b7280 !important;
  }

  #pagina-config-meus-enderecos .enderecos-vazio h3 {
    color: #18172A !important;
  }
}

/* Botao voltar padrao em todas as subpaginas */
.pagina.ativa .config-subtopo .config-voltar {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: auto !important;
  max-width: none !important;
  height: 46px !important;
  min-width: 0 !important;
  min-height: 46px !important;
  padding: 0 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  border-radius: 14px !important;
  border: 1px solid rgba(52,131,250,0.46) !important;
  background: rgba(52,131,250,0.14) !important;
  color: var(--na-text) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

.pagina.ativa .config-subtopo .config-voltar:hover {
  border-color: rgba(52,131,250,0.68) !important;
  background: rgba(52,131,250,0.2) !important;
  color: #fff !important;
  transform: none !important;
}

@media (max-width: 767px) {
  .pagina.ativa .config-subtopo .config-voltar {
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 14px !important;
    border-radius: 13px !important;
    font-size: 14px !important;
  }
}

/* Carrinho: resumo do pedido em card organizado */
#pagina-carrinho.pagina.ativa .carrinho-container {
  max-width: 1120px !important;
  margin: 0 !important;
  padding: 34px 40px 56px !important;
  box-sizing: border-box !important;
}

#pagina-carrinho.pagina.ativa .carrinho-resumo-card {
  width: min(100%, 420px) !important;
  margin: 26px 0 0 auto !important;
  padding: 22px !important;
  display: block !important;
  border-radius: 20px !important;
  border: 1px solid var(--na-border) !important;
  background: linear-gradient(180deg, rgba(20,20,26,0.98), rgba(13,13,21,0.98)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 18px 42px rgba(0,0,0,0.28) !important;
  box-sizing: border-box !important;
}

#pagina-carrinho.pagina.ativa .carrinho-resumo-titulo {
  margin: 0 0 18px !important;
  font-size: 20px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  color: var(--na-text) !important;
}

#pagina-carrinho.pagina.ativa .carrinho-resumo-linha {
  width: 100% !important;
  min-height: 30px !important;
  padding: 7px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  color: var(--na-text-secondary) !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  box-sizing: border-box !important;
}

#pagina-carrinho.pagina.ativa .carrinho-resumo-linha span:first-child {
  color: var(--na-text-secondary) !important;
  font-weight: 600 !important;
}

#pagina-carrinho.pagina.ativa .carrinho-resumo-linha span:last-child {
  color: var(--na-text) !important;
  font-weight: 800 !important;
  text-align: right !important;
  white-space: nowrap !important;
}

#pagina-carrinho.pagina.ativa .carrinho-resumo-frete-gratis,
#pagina-carrinho.pagina.ativa .carrinho-resumo-valor-desconto {
  color: var(--na-success) !important;
}

#pagina-carrinho.pagina.ativa .carrinho-resumo-divisor {
  width: 100% !important;
  height: 1px !important;
  margin: 12px 0 !important;
  background: var(--na-border) !important;
}

#pagina-carrinho.pagina.ativa .carrinho-resumo-total {
  min-height: 42px !important;
  padding: 10px 0 6px !important;
}

#pagina-carrinho.pagina.ativa .carrinho-resumo-total span:first-child {
  color: var(--na-text) !important;
  font-size: 17px !important;
  font-weight: 800 !important;
}

#pagina-carrinho.pagina.ativa .carrinho-resumo-total span:last-child {
  color: var(--na-primary) !important;
  font-size: 22px !important;
  font-weight: 900 !important;
}

#pagina-carrinho.pagina.ativa #btn-finalizar-carrinho {
  width: 100% !important;
  height: 52px !important;
  margin: 18px 0 0 !important;
  padding: 0 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: var(--na-gradient-primary) !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  box-shadow: 0 12px 28px rgba(52,131,250,0.32) !important;
}

@media (min-width: 1180px) {
  #pagina-carrinho.pagina.ativa .carrinho-resumo-card {
    margin-right: 0 !important;
  }
}

@media (max-width: 767px) {
  #pagina-carrinho.pagina.ativa .carrinho-container {
    padding: 18px 14px 96px !important;
  }

  #pagina-carrinho.pagina.ativa .carrinho-resumo-card {
    width: 100% !important;
    margin: 18px 0 0 !important;
    padding: 18px !important;
  }
}

/* Carrinho: o resumo pertence ao checkout, nao a lista do carrinho */
#pagina-carrinho.pagina.ativa #carrinho-resumo-card {
  display: none !important;
}

/* Checkout: permitir rolar ate o fim sem cortar o botao final */
#pagina-compra.pagina.ativa {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
}

#pagina-compra.pagina.ativa .compra-overlay {
  min-height: 100dvh !important;
  height: auto !important;
  align-items: flex-start !important;
  overflow: visible !important;
}

#pagina-compra.pagina.ativa .compra-container {
  min-height: 100dvh !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px)) !important;
}

#pagina-compra.pagina.ativa .compra-secoes-alinhadas {
  padding-bottom: 0 !important;
}

#pagina-compra.pagina.ativa .compra-resumo-final {
  margin-bottom: 0 !important;
}

#pagina-compra.pagina.ativa .compra-resumo-final .btn-finalizar-compra {
  margin-bottom: 0 !important;
  flex-shrink: 0 !important;
}

@media (max-width: 767px) {
  #pagina-compra.pagina.ativa .compra-container {
    padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Localizacao: mapa dentro do tema e sem cortar topo/rodape */
#pagina-localizacao.pagina-localizacao {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100000 !important;
  display: none !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: 22px 18px calc(28px + env(safe-area-inset-bottom, 0px)) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: rgba(2,2,7,0.78) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-overflow-scrolling: touch !important;
  box-sizing: border-box !important;
}

#pagina-localizacao.pagina-localizacao.ativa {
  display: flex !important;
}

#pagina-localizacao .pagina-localizacao-conteudo {
  width: min(100%, 1080px) !important;
  max-width: 1080px !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 auto !important;
  padding: 26px 30px 30px !important;
  overflow: visible !important;
  border-radius: 22px !important;
  border: 1px solid var(--na-border) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(52,131,250,0.14), transparent 36%),
    linear-gradient(180deg, rgba(20,20,27,0.98), rgba(10,10,16,0.98)) !important;
  color: var(--na-text) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,0.52) !important;
  box-sizing: border-box !important;
}

#pagina-localizacao .topo-localizacao {
  min-height: 46px !important;
  margin: 0 0 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  position: relative !important;
}

#pagina-localizacao .topo-localizacao h2 {
  margin: 0 !important;
  color: var(--na-text) !important;
  font-size: clamp(24px, 2.1vw, 34px) !important;
  line-height: 1.08 !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

#pagina-localizacao .btn-fechar-localizacao {
  position: static !important;
  order: 2 !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--na-border) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,0.06) !important;
  color: var(--na-text) !important;
  font-size: 28px !important;
  line-height: 1 !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  box-shadow: none !important;
}

#pagina-localizacao .btn-fechar-localizacao:hover {
  border-color: rgba(52,131,250,0.58) !important;
  background: rgba(52,131,250,0.16) !important;
}

#pagina-localizacao .texto-localizacao {
  margin: 0 0 16px !important;
  color: var(--na-text-secondary) !important;
  font-size: 16px !important;
  line-height: 1.45 !important;
}

#pagina-localizacao .geo-mensagem-erro {
  margin: 0 0 14px !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  background: rgba(239,68,68,0.12) !important;
  border: 1px solid rgba(239,68,68,0.34) !important;
  color: #fecaca !important;
}

#pagina-localizacao .mapa-localizacao-wrap {
  width: 100% !important;
  margin: 0 0 18px !important;
  overflow: hidden !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  background: var(--na-surface-elevated) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 18px 42px rgba(0,0,0,0.28) !important;
  box-sizing: border-box !important;
}

#pagina-localizacao #mapa-localizacao {
  width: 100% !important;
  height: clamp(320px, 45vh, 470px) !important;
  min-height: 320px !important;
  margin: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}

#pagina-localizacao .leaflet-control-zoom a {
  width: 34px !important;
  height: 34px !important;
  line-height: 34px !important;
  background: rgba(15,15,22,0.94) !important;
  color: var(--na-text) !important;
  border-color: rgba(255,255,255,0.12) !important;
}

#pagina-localizacao .leaflet-bar {
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 10px 26px rgba(0,0,0,0.28) !important;
}

#pagina-localizacao .leaflet-control-attribution {
  background: rgba(7,7,12,0.78) !important;
  color: rgba(255,255,255,0.72) !important;
  font-size: 11px !important;
}

#pagina-localizacao .leaflet-control-attribution a {
  color: #93c5fd !important;
}

#pagina-localizacao .btn-geo-atual {
  top: 14px !important;
  right: 14px !important;
  min-height: 42px !important;
  padding: 0 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 14px !important;
  background: rgba(14,14,22,0.92) !important;
  color: var(--na-text) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  box-shadow: 0 12px 28px rgba(0,0,0,0.32) !important;
  backdrop-filter: blur(8px) !important;
}

#pagina-localizacao .btn-geo-atual:hover {
  background: rgba(52,131,250,0.24) !important;
  transform: none !important;
}

#pagina-localizacao .btn-geo-atual svg {
  color: var(--na-primary) !important;
}

#pagina-localizacao .geo-loading {
  border-radius: 18px !important;
  background: rgba(7,7,12,0.68) !important;
  color: var(--na-text) !important;
}

#pagina-localizacao .resumo-localizacao {
  margin: 0 0 20px !important;
  padding: 16px 18px !important;
  border-radius: 18px !important;
  border: 1px solid var(--na-border) !important;
  background: rgba(255,255,255,0.045) !important;
  color: var(--na-text) !important;
  line-height: 1.45 !important;
  box-sizing: border-box !important;
}

#pagina-localizacao .resumo-localizacao p {
  margin: 7px 0 !important;
  color: var(--na-text-secondary) !important;
  font-size: 15px !important;
}

#pagina-localizacao .resumo-localizacao strong {
  color: var(--na-text) !important;
  font-weight: 800 !important;
}

#pagina-localizacao .resumo-localizacao span {
  overflow-wrap: anywhere !important;
}

#pagina-localizacao .btn-confirmar-localizacao {
  width: 100% !important;
  min-height: 56px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 16px 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 18px !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
}

@media (max-width: 767px) {
  #pagina-localizacao.pagina-localizacao {
    padding: 12px 10px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #pagina-localizacao .pagina-localizacao-conteudo {
    padding: 18px 14px !important;
    border-radius: 18px !important;
  }

  #pagina-localizacao .topo-localizacao {
    min-height: 42px !important;
  }

  #pagina-localizacao .topo-localizacao h2 {
    font-size: 24px !important;
  }

  #pagina-localizacao .btn-fechar-localizacao {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 13px !important;
  }

  #pagina-localizacao #mapa-localizacao {
    height: 46vh !important;
    min-height: 300px !important;
  }

  #pagina-localizacao .btn-geo-atual {
    top: 10px !important;
    right: 10px !important;
    min-height: 38px !important;
    padding: 0 11px !important;
    font-size: 12px !important;
  }

  #pagina-localizacao .resumo-localizacao {
    padding: 14px !important;
  }
}

/* Pagamento: layout escuro consistente e campos legiveis */
#pagina-pagamento.pagina-pagamento {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100001 !important;
  display: none !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: 22px 18px calc(30px + env(safe-area-inset-bottom, 0px)) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: rgba(2,2,7,0.78) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-overflow-scrolling: touch !important;
  box-sizing: border-box !important;
}

#pagina-pagamento.pagina-pagamento.ativa {
  display: flex !important;
}

#pagina-pagamento .pagina-pagamento-conteudo {
  width: min(100%, 920px) !important;
  max-width: 920px !important;
  max-height: none !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: 26px 30px 30px !important;
  overflow: visible !important;
  border-radius: 22px !important;
  border: 1px solid var(--na-border) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(52,131,250,0.12), transparent 38%),
    linear-gradient(180deg, rgba(20,20,27,0.98), rgba(10,10,16,0.98)) !important;
  color: var(--na-text) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,0.52) !important;
  box-sizing: border-box !important;
}

#pagina-pagamento .topo-pagamento {
  min-height: 46px !important;
  margin: 0 0 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  position: relative !important;
}

#pagina-pagamento .topo-pagamento h2 {
  margin: 0 !important;
  color: var(--na-text) !important;
  font-size: clamp(24px, 2vw, 32px) !important;
  line-height: 1.08 !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

#pagina-pagamento .btn-fechar-pagamento {
  position: static !important;
  order: 2 !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--na-border) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,0.06) !important;
  color: var(--na-text) !important;
  font-size: 28px !important;
  line-height: 1 !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}

#pagina-pagamento .btn-fechar-pagamento:hover {
  border-color: rgba(52,131,250,0.58) !important;
  background: rgba(52,131,250,0.16) !important;
}

#pagina-pagamento .pagamento-bloco {
  width: 100% !important;
  margin: 0 0 18px !important;
  padding: 22px 24px !important;
  border-radius: 20px !important;
  border: 1px solid var(--na-border) !important;
  background: rgba(255,255,255,0.045) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04) !important;
  box-sizing: border-box !important;
}

#pagina-pagamento .pagamento-bloco h3 {
  margin: 0 0 18px !important;
  color: var(--na-text) !important;
  font-size: 21px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
}

#pagina-pagamento .pagamento-opcoes {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

#pagina-pagamento .pagamento-opcao {
  min-width: 0 !important;
}

#pagina-pagamento .pagamento-opcao-conteudo {
  min-height: 88px !important;
  padding: 16px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  border-radius: 16px !important;
  border: 1px solid var(--na-border) !important;
  background: rgba(12,12,18,0.82) !important;
  box-sizing: border-box !important;
}

#pagina-pagamento .pagamento-opcao-conteudo strong {
  color: var(--na-text) !important;
  font-size: 17px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
}

#pagina-pagamento .pagamento-opcao-conteudo p {
  margin: 5px 0 0 !important;
  color: var(--na-text-secondary) !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
}

#pagina-pagamento .pagamento-opcao input[type="radio"]:checked + .pagamento-opcao-conteudo {
  border-color: rgba(52,131,250,0.86) !important;
  background: linear-gradient(135deg, rgba(52,131,250,0.22), rgba(79,93,255,0.12)) !important;
  box-shadow: 0 14px 32px rgba(52,131,250,0.18) !important;
}

#pagina-pagamento #bloco-cartao .grupo-campo {
  margin: 0 0 16px !important;
}

#pagina-pagamento #bloco-cartao .grupo-campo label {
  display: block !important;
  margin: 0 0 8px !important;
  color: var(--na-text-secondary) !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
}

#pagina-pagamento #bloco-cartao input {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 100% !important;
  height: 58px !important;
  padding: 0 16px !important;
  border-radius: 16px !important;
  border: 1px solid var(--na-border) !important;
  background: rgba(12,12,18,0.9) !important;
  color: var(--na-text) !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
  outline: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

#pagina-pagamento #bloco-cartao input::placeholder {
  color: var(--na-text-tertiary) !important;
  opacity: 1 !important;
}

#pagina-pagamento #bloco-cartao input:focus {
  border-color: rgba(52,131,250,0.86) !important;
  box-shadow: 0 0 0 4px rgba(52,131,250,0.16) !important;
  background: rgba(16,16,24,0.98) !important;
}

#pagina-pagamento #bloco-cartao .linha-dupla {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 160px !important;
  gap: 16px !important;
  align-items: end !important;
}

#pagina-pagamento #bloco-cartao .linha-dupla .grupo-campo {
  margin-bottom: 0 !important;
}

#pagina-pagamento #bloco-cartao .cartao-form-legado {
  display: none !important;
}

#pagina-pagamento #cardPaymentBrick_container {
  position: relative !important;
  z-index: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  transform: none !important;
  box-sizing: border-box !important;
}

#pagina-pagamento #cardPaymentBrick_container > * {
  position: relative !important;
  max-width: 100% !important;
  min-width: 0 !important;
  transform: none !important;
}

#pagina-pagamento .btn-confirmar-pagamento.pagamento-cartao-oculto {
  display: none !important;
}

@media (min-width: 768px) {
  #pagina-pagamento #bloco-cartao {
    position: relative !important;
    width: 100% !important;
    max-width: 980px !important;
    margin: 0 auto 18px !important;
    padding: 28px !important;
    border: 1px solid rgba(15, 23, 42, 0.1) !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    color: #111827 !important;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08) !important;
    overflow: visible !important;
    transform: none !important;
    z-index: auto !important;
  }

  #pagina-pagamento #bloco-cartao h3 {
    color: #111827 !important;
  }

  #pagina-pagamento #cardPaymentBrick_container {
    background: transparent !important;
  }

  #pagina-pagamento #cardPaymentBrick_container input,
  #pagina-pagamento #cardPaymentBrick_container select,
  #pagina-pagamento #cardPaymentBrick_container textarea,
  #pagina-pagamento #bloco-cartao input,
  #pagina-pagamento #bloco-cartao select,
  #pagina-pagamento #bloco-cartao textarea {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border: 1px solid rgba(15, 23, 42, 0.18) !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    color: #111827 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  #pagina-pagamento #cardPaymentBrick_container input::placeholder,
  #pagina-pagamento #bloco-cartao input::placeholder {
    color: #94a3b8 !important;
    opacity: 1 !important;
  }

  #pagina-pagamento #cardPaymentBrick_container input:focus,
  #pagina-pagamento #cardPaymentBrick_container select:focus,
  #pagina-pagamento #bloco-cartao input:focus,
  #pagina-pagamento #bloco-cartao select:focus {
    border-color: #f97316 !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.16) !important;
    outline: none !important;
  }

  #pagina-pagamento #cardPaymentBrick_container label,
  #pagina-pagamento #cardPaymentBrick_container p,
  #pagina-pagamento #cardPaymentBrick_container span {
    color: #111827 !important;
  }

  #pagina-pagamento #cardPaymentBrick_container button {
    min-height: 48px !important;
    border: none !important;
    border-radius: 12px !important;
    background: #f97316 !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    box-shadow: 0 10px 24px rgba(249, 115, 22, 0.2) !important;
  }

  #pagina-pagamento #cardPaymentBrick_container button span,
  #pagina-pagamento #cardPaymentBrick_container button strong {
    color: #ffffff !important;
  }

  #pagina-pagamento #cardPaymentBrick_container div:has(> select[name*="identification"]),
  #pagina-pagamento #cardPaymentBrick_container div:has(> select[id*="identification"]),
  #pagina-pagamento #cardPaymentBrick_container div:has(> select[name*="doc"]),
  #pagina-pagamento #cardPaymentBrick_container div:has(> select[id*="doc"]),
  #pagina-pagamento #cardPaymentBrick_container .documento-row,
  #pagina-pagamento #cardPaymentBrick_container .mp-document-row,
  #pagina-pagamento #cardPaymentBrick_container .card-document-row {
    display: grid !important;
    grid-template-columns: 90px minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: center !important;
    width: 100% !important;
    position: relative !important;
    transform: none !important;
  }

  #pagina-pagamento #cardPaymentBrick_container select[name*="identification"],
  #pagina-pagamento #cardPaymentBrick_container select[id*="identification"],
  #pagina-pagamento #cardPaymentBrick_container select[name*="doc"],
  #pagina-pagamento #cardPaymentBrick_container select[id*="doc"] {
    width: 90px !important;
    min-width: 90px !important;
  }

  #pagina-pagamento #cardPaymentBrick_container input[name*="identification"],
  #pagina-pagamento #cardPaymentBrick_container input[id*="identification"],
  #pagina-pagamento #cardPaymentBrick_container input[name*="doc"],
  #pagina-pagamento #cardPaymentBrick_container input[id*="doc"] {
    width: 100% !important;
    min-width: 0 !important;
  }

  #pagina-pagamento .desktop-card-saved-summary {
    display: grid !important;
    gap: 4px !important;
    margin-top: 14px !important;
    padding: 14px 16px !important;
    border: 1px solid rgba(249, 115, 22, 0.22) !important;
    border-radius: 14px !important;
    background: rgba(249, 115, 22, 0.08) !important;
    color: #111827 !important;
  }

  #pagina-pagamento .desktop-card-saved-summary[hidden] {
    display: none !important;
  }

  #pagina-pagamento .desktop-card-saved-summary strong {
    color: #111827 !important;
    font-size: 14px !important;
    font-weight: 900 !important;
  }

  #pagina-pagamento .desktop-card-saved-summary span,
  #pagina-pagamento .desktop-card-saved-summary small {
    color: #475569 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
  }

  #card-list-screen,
  #card-payment-screen,
  #parcelas-sheet-overlay,
  #card-processing-screen,
  #card-payment-result-screen {
    display: none !important;
  }
}

#pagina-pagamento .resumo-pagamento {
  margin-bottom: 18px !important;
}

#pagina-pagamento .resumo-lista-pagamento {
  gap: 10px !important;
  margin: 0 0 16px !important;
}

#pagina-pagamento .resumo-item-pagamento {
  min-height: 46px !important;
  padding: 10px 14px !important;
  border-radius: 14px !important;
  border: 1px solid var(--na-border) !important;
  background: rgba(12,12,18,0.82) !important;
  color: var(--na-text) !important;
  box-sizing: border-box !important;
}

#pagina-pagamento .linha-resumo {
  min-height: 38px !important;
  padding: 8px 0 !important;
  color: var(--na-text-secondary) !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
}

#pagina-pagamento .linha-resumo span {
  color: var(--na-text-secondary) !important;
  font-weight: 700 !important;
}

#pagina-pagamento .linha-resumo strong {
  color: var(--na-text) !important;
  font-weight: 900 !important;
  text-align: right !important;
  white-space: nowrap !important;
}

#pagina-pagamento .total-geral {
  margin-top: 10px !important;
  padding-top: 18px !important;
  border-top: 1px solid var(--na-border) !important;
  color: var(--na-text) !important;
}

#pagina-pagamento .total-geral span {
  color: var(--na-text) !important;
  font-size: 17px !important;
}

#pagina-pagamento .total-geral strong {
  color: var(--na-primary) !important;
  font-size: 24px !important;
}

#pagina-pagamento .btn-confirmar-pagamento {
  width: 100% !important;
  min-height: 56px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 16px 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: var(--na-gradient-primary) !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  box-shadow: var(--na-shadow-primary) !important;
}

@media (max-width: 767px) {
  #pagina-pagamento.pagina-pagamento {
    padding: 12px 10px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #pagina-pagamento .pagina-pagamento-conteudo {
    padding: 18px 14px !important;
    border-radius: 18px !important;
  }

  #pagina-pagamento .topo-pagamento {
    min-height: 42px !important;
    margin-bottom: 14px !important;
  }

  #pagina-pagamento .topo-pagamento h2 {
    font-size: 24px !important;
  }

  #pagina-pagamento .btn-fechar-pagamento {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 13px !important;
  }

  #pagina-pagamento .pagamento-bloco {
    padding: 18px 14px !important;
    border-radius: 18px !important;
  }

  #pagina-pagamento .pagamento-opcoes,
  #pagina-pagamento #bloco-cartao .linha-dupla {
    grid-template-columns: 1fr !important;
  }

  #pagina-pagamento #bloco-cartao input {
    height: 54px !important;
  }

  #pagina-pagamento .total-geral strong {
    font-size: 22px !important;
  }
}

/* Checkout: manter overlay grudado durante o scroll */
#pagina-compra.pagina {
  z-index: 100100 !important;
}

#pagina-compra.pagina.ativa {
  position: fixed !important;
  inset: 0 !important;
  display: block !important;
  overflow: hidden !important;
  background: var(--na-bg) !important;
}

#pagina-compra.pagina.ativa .compra-overlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  display: flex !important;
  justify-content: center !important;
  align-items: stretch !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: linear-gradient(180deg, #060813 0%, #080d18 54%, #05070d 100%) !important;
  backdrop-filter: none !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  box-sizing: border-box !important;
  padding: 0 clamp(14px, 3vw, 40px) !important;
}

#pagina-compra.pagina.ativa .compra-container {
  position: relative !important;
  width: 100% !important;
  max-width: 1180px !important;
  min-height: 100dvh !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 auto !important;
  overflow: visible !important;
  border-left: 1px solid var(--na-border) !important;
  border-right: 1px solid var(--na-border) !important;
  background: linear-gradient(180deg, #070b16 0%, #0c1222 54%, #080d18 100%) !important;
  box-shadow: none !important;
  padding-left: clamp(18px, 2.8vw, 36px) !important;
  padding-right: clamp(18px, 2.8vw, 36px) !important;
  padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)) !important;
  box-sizing: border-box !important;
}

#pagina-compra.pagina.ativa .btn-fechar-compra {
  position: sticky !important;
  top: 18px !important;
  margin: 0 0 -48px auto !important;
  z-index: 5 !important;
  flex: 0 0 auto !important;
}

@media (max-width: 767px) {
  #pagina-compra.pagina.ativa .compra-overlay {
    justify-content: center !important;
    background: var(--na-bg) !important;
    padding: 0 !important;
  }

  #pagina-compra.pagina.ativa .compra-container {
    width: 100% !important;
    min-height: 100dvh !important;
    border-left: 0 !important;
    box-shadow: none !important;
    padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #pagina-compra.pagina.ativa .btn-fechar-compra {
    top: 14px !important;
    margin-bottom: -42px !important;
  }
}

/* Checkout: impedir cards e bordas de estourarem a largura */
#pagina-compra.pagina.ativa .compra-container *,
#pagina-compra.pagina.ativa .compra-container *::before,
#pagina-compra.pagina.ativa .compra-container *::after {
  box-sizing: border-box !important;
}

#pagina-compra.pagina.ativa .compra-card,
#pagina-compra.pagina.ativa .compra-secoes-alinhadas,
#pagina-compra.pagina.ativa .compra-resumo-itens,
#pagina-compra.pagina.ativa .endereco-box,
#pagina-compra.pagina.ativa .frete-box-compra,
#pagina-compra.pagina.ativa .compra-resumo-final {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  overflow: hidden !important;
}

#pagina-compra.pagina.ativa .frete-opcoes-compra,
#pagina-compra.pagina.ativa .frete-opcao-compra {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

#pagina-compra.pagina.ativa .frete-opcao-compra-conteudo {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto 28px !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 18px 18px 18px 24px !important;
  overflow: hidden !important;
}

#pagina-compra.pagina.ativa .frete-opcao-compra-texto {
  min-width: 0 !important;
}

#pagina-compra.pagina.ativa .frete-opcao-compra-texto strong,
#pagina-compra.pagina.ativa .frete-opcao-compra-texto p {
  overflow-wrap: break-word !important;
}

#pagina-compra.pagina.ativa .frete-opcao-compra span {
  min-width: max-content !important;
  text-align: right !important;
}

#pagina-compra.pagina.ativa .frete-opcao-compra-conteudo::after {
  width: 24px !important;
  height: 24px !important;
  margin-left: 0 !important;
  justify-self: end !important;
}

#pagina-compra.pagina.ativa .compra-total-linha {
  width: 100% !important;
  min-width: 0 !important;
}

#pagina-compra.pagina.ativa .compra-total-linha strong {
  text-align: right !important;
  white-space: nowrap !important;
}

@media (max-width: 767px) {
  #pagina-compra.pagina.ativa .frete-opcao-compra-conteudo {
    grid-template-columns: minmax(0, 1fr) auto 24px !important;
    gap: 10px !important;
    padding: 14px !important;
  }
}

/* Checkout: restaurar drawer lateral e nao cortar conteudo */
#pagina-compra.pagina.ativa .compra-overlay {
  justify-content: flex-end !important;
  align-items: stretch !important;
  padding: 0 !important;
  background: linear-gradient(90deg, rgba(5,7,14,0.82) 0%, rgba(5,7,14,0.52) 42%, #070b16 100%) !important;
}

#pagina-compra.pagina.ativa .compra-container {
  width: min(900px, calc(100vw - 56px)) !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 0 0 auto !important;
  border-left: 1px solid var(--na-border) !important;
  border-right: 0 !important;
  padding: 32px 32px calc(150px + env(safe-area-inset-bottom, 0px)) !important;
  overflow: visible !important;
  background: linear-gradient(180deg, #070b16 0%, #0c1222 54%, #080d18 100%) !important;
}

#pagina-compra.pagina.ativa .compra-card,
#pagina-compra.pagina.ativa .compra-secoes-alinhadas,
#pagina-compra.pagina.ativa .compra-resumo-itens,
#pagina-compra.pagina.ativa .endereco-box,
#pagina-compra.pagina.ativa .frete-box-compra,
#pagina-compra.pagina.ativa .compra-resumo-final {
  overflow: visible !important;
}

#pagina-compra.pagina.ativa .compra-secoes-alinhadas {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  gap: 18px !important;
}

#pagina-compra.pagina.ativa .compra-card {
  min-height: 0 !important;
  height: auto !important;
}

#pagina-compra.pagina.ativa .frete-box-compra,
#pagina-compra.pagina.ativa .compra-resumo-final {
  padding: 22px !important;
}

#pagina-compra.pagina.ativa .frete-opcao-compra-conteudo {
  overflow: visible !important;
  grid-template-columns: minmax(0, 1fr) minmax(96px, auto) 28px !important;
}

#pagina-compra.pagina.ativa .btn-fechar-compra {
  position: sticky !important;
  top: 18px !important;
  right: auto !important;
  margin: 0 0 -48px auto !important;
}

@media (max-width: 767px) {
  #pagina-compra.pagina.ativa .compra-overlay {
    justify-content: center !important;
    background: var(--na-bg) !important;
  }

  #pagina-compra.pagina.ativa .compra-container {
    width: 100% !important;
    padding: 18px 14px calc(150px + env(safe-area-inset-bottom, 0px)) !important;
    border-left: 0 !important;
  }

  #pagina-compra.pagina.ativa .frete-opcao-compra-conteudo {
    grid-template-columns: minmax(0, 1fr) auto 24px !important;
  }
}

/* Checkout: ajuste final - fundo transparente, drawer de canto e cards firmes */
#pagina-compra.pagina.ativa {
  background: transparent !important;
}

#pagina-compra.pagina.ativa .compra-overlay {
  justify-content: flex-end !important;
  align-items: stretch !important;
  padding: 0 !important;
  background: rgba(0,0,0,0.38) !important;
  backdrop-filter: blur(4px) !important;
}

#pagina-compra.pagina.ativa .compra-container {
  width: min(820px, 100vw) !important;
  max-width: 820px !important;
  min-width: 0 !important;
  min-height: 100dvh !important;
  margin: 0 0 0 auto !important;
  padding: 32px 32px calc(130px + env(safe-area-inset-bottom, 0px)) !important;
  border-left: 1px solid var(--na-border) !important;
  border-right: 0 !important;
  overflow: visible !important;
  background: linear-gradient(180deg, #070b16 0%, #0c1222 54%, #080d18 100%) !important;
  box-shadow: -20px 0 60px rgba(0,0,0,0.35) !important;
}

#pagina-compra.pagina.ativa .btn-fechar-compra {
  position: sticky !important;
  top: 18px !important;
  width: 48px !important;
  height: 48px !important;
  margin: 0 0 -16px auto !important;
  z-index: 10 !important;
  border-radius: 50% !important;
}

#pagina-compra.pagina.ativa .compra-card {
  width: 100% !important;
  min-height: 178px !important;
  height: auto !important;
  margin: 34px 0 18px !important;
  padding: 22px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 210px !important;
  gap: 22px !important;
  align-items: center !important;
  overflow: hidden !important;
  border: 1px solid var(--na-border) !important;
  border-radius: 20px !important;
  background: var(--na-surface-elevated) !important;
  box-sizing: border-box !important;
}

#pagina-compra.pagina.ativa .compra-esquerda {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: 132px minmax(0, 1fr) !important;
  gap: 18px !important;
  align-items: center !important;
}

#pagina-compra.pagina.ativa .compra-imagem-box {
  width: 132px !important;
  height: 132px !important;
  min-width: 0 !important;
  padding: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  border-radius: 18px !important;
  background: #f4f4f6 !important;
  transform: none !important;
}

#pagina-compra.pagina.ativa .compra-imagem-box img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

#pagina-compra.pagina.ativa .compra-direita {
  min-width: 0 !important;
  justify-content: center !important;
}

#pagina-compra.pagina.ativa .compra-secoes-alinhadas {
  width: 100% !important;
  margin-top: 18px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
}

#pagina-compra.pagina.ativa .compra-resumo-itens,
#pagina-compra.pagina.ativa .endereco-box,
#pagina-compra.pagina.ativa .frete-box-compra,
#pagina-compra.pagina.ativa .compra-resumo-final {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 22px !important;
  overflow: hidden !important;
  border: 1px solid var(--na-border) !important;
  border-radius: 18px !important;
  background: var(--na-surface-elevated) !important;
  box-sizing: border-box !important;
}

#pagina-compra.pagina.ativa .frete-opcao-compra-conteudo {
  overflow: hidden !important;
}

@media (max-width: 767px) {
  #pagina-compra.pagina.ativa .compra-overlay {
    background: rgba(0,0,0,0.38) !important;
  }

  #pagina-compra.pagina.ativa .compra-container {
    width: 100% !important;
    max-width: none !important;
    padding: 18px 14px calc(130px + env(safe-area-inset-bottom, 0px)) !important;
    border-left: 0 !important;
  }

  #pagina-compra.pagina.ativa .compra-card {
    min-height: 0 !important;
    grid-template-columns: 1fr !important;
    margin-top: 28px !important;
  }

  #pagina-compra.pagina.ativa .compra-esquerda {
    grid-template-columns: 92px minmax(0, 1fr) !important;
  }

  #pagina-compra.pagina.ativa .compra-imagem-box {
    width: 92px !important;
    height: 92px !important;
  }
}

/* Checkout: eliminar vazamento transparente nas bordas internas */
#pagina-compra.pagina.ativa .compra-container {
  position: relative !important;
  isolation: isolate !important;
  background: #080d18 !important;
  background-image: linear-gradient(180deg, #070b16 0%, #0c1222 54%, #080d18 100%) !important;
  border-left-color: #262a38 !important;
}

#pagina-compra.pagina.ativa .compra-card,
#pagina-compra.pagina.ativa .compra-resumo-itens,
#pagina-compra.pagina.ativa .endereco-box,
#pagina-compra.pagina.ativa .frete-box-compra,
#pagina-compra.pagina.ativa .compra-resumo-final {
  border-color: #2a2d3b !important;
  background: #15161e !important;
  background-image: linear-gradient(180deg, #171820 0%, #14151d 100%) !important;
}

#pagina-compra.pagina.ativa .endereco-preenchido,
#pagina-compra.pagina.ativa .endereco-vazio,
#pagina-compra.pagina.ativa .compra-item-resumo,
#pagina-compra.pagina.ativa .frete-opcao-compra-conteudo {
  border-color: #292c38 !important;
  background: #1b1c24 !important;
}

#pagina-compra.pagina.ativa .frete-opcao-compra input[type="radio"]:checked + .frete-opcao-compra-conteudo {
  border-color: #3483FA !important;
  background: #261b42 !important;
  box-shadow: inset 0 0 0 1px rgba(52,131,250,0.68), 0 0 0 2px rgba(52,131,250,0.18) !important;
}

#pagina-compra.pagina.ativa .frete-opcao-compra input[type="radio"]:checked + .frete-opcao-compra-conteudo::after {
  border-color: #3483FA !important;
  background: #ffffff !important;
}

/* Checkout: superficie solida do painel para nao vazar fundo da loja */
#pagina-compra.pagina.ativa .compra-container {
  position: relative !important;
  isolation: isolate !important;
  background: #080d18 !important;
  background-image: none !important;
}

#pagina-compra.pagina.ativa .compra-container::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  display: block !important;
  background: linear-gradient(180deg, #070b16 0%, #0c1222 54%, #080d18 100%) !important;
  border-left: 1px solid #262a38 !important;
  box-shadow: -20px 0 60px rgba(0,0,0,0.35) !important;
  pointer-events: none !important;
}

#pagina-compra.pagina.ativa .compra-container > * {
  position: relative !important;
  z-index: 1 !important;
}

#pagina-compra.pagina.ativa .compra-card,
#pagina-compra.pagina.ativa .compra-resumo-itens,
#pagina-compra.pagina.ativa .endereco-box,
#pagina-compra.pagina.ativa .frete-box-compra,
#pagina-compra.pagina.ativa .compra-resumo-final {
  position: relative !important;
  z-index: 1 !important;
  background-color: #15161e !important;
}

/* Checkout: fundo fixo do drawer para a borda nao ficar meia transparente ao rolar */
#pagina-compra.pagina.ativa .compra-overlay::before {
  content: "" !important;
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: min(820px, 100vw) !important;
  z-index: 0 !important;
  display: block !important;
  border-left: 1px solid #262a38 !important;
  background: linear-gradient(180deg, #070b16 0%, #0c1222 54%, #080d18 100%) !important;
  box-shadow: -20px 0 60px rgba(0,0,0,0.35) !important;
  pointer-events: none !important;
}

#pagina-compra.pagina.ativa .compra-container {
  z-index: 1 !important;
  border-left-color: transparent !important;
  box-shadow: none !important;
}

@media (max-width: 767px) {
  #pagina-compra.pagina.ativa .compra-overlay::before {
    width: 100vw !important;
    border-left: 0 !important;
  }
}

/* Checkout: botao fechar e ordem correta dos modais seguintes */
#pagina-compra.pagina {
  z-index: 99990 !important;
}

#pagina-compra.pagina.ativa .btn-fechar-compra {
  top: 24px !important;
  margin: 0 14px -10px auto !important;
}

#pagina-localizacao.pagina-localizacao {
  z-index: 100300 !important;
}

#pagina-pagamento.pagina-pagamento {
  z-index: 100310 !important;
}

#pagina-pix.pagina-pix {
  z-index: 100320 !important;
}

@media (max-width: 767px) {
  #pagina-compra.pagina.ativa .btn-fechar-compra {
    top: 18px !important;
    margin: 0 8px -8px auto !important;
  }
}

/* Checkout: drawer alinhado no canto direito */
#pagina-compra.pagina.ativa {
  --checkout-drawer-width: min(760px, calc(100vw - 88px));
  background: transparent !important;
}

#pagina-compra.pagina.ativa .compra-overlay {
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: stretch !important;
  padding: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: rgba(0,0,0,0.38) !important;
  backdrop-filter: blur(4px) !important;
}

#pagina-compra.pagina.ativa .compra-overlay::before {
  width: var(--checkout-drawer-width) !important;
  right: 0 !important;
  left: auto !important;
  border-left: 1px solid #262a38 !important;
  background: linear-gradient(180deg, #070b16 0%, #0c1222 54%, #080d18 100%) !important;
}

#pagina-compra.pagina.ativa .compra-container {
  width: var(--checkout-drawer-width) !important;
  max-width: var(--checkout-drawer-width) !important;
  flex: 0 0 var(--checkout-drawer-width) !important;
  margin: 0 0 0 auto !important;
  padding: 34px 30px calc(130px + env(safe-area-inset-bottom, 0px)) !important;
  border-left: 0 !important;
  border-right: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

#pagina-compra.pagina.ativa .compra-container::before {
  display: none !important;
}

#pagina-compra.pagina.ativa .btn-fechar-compra {
  position: fixed !important;
  top: 22px !important;
  right: 28px !important;
  margin: 0 !important;
  z-index: 100 !important;
}

#pagina-compra.pagina.ativa .compra-card {
  margin-top: 54px !important;
}

@media (max-width: 900px) {
  #pagina-compra.pagina.ativa {
    --checkout-drawer-width: min(720px, calc(100vw - 40px));
  }
}

@media (max-width: 767px) {
  #pagina-compra.pagina.ativa {
    --checkout-drawer-width: 100vw;
  }

  #pagina-compra.pagina.ativa .compra-container {
    padding: 18px 14px calc(130px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #pagina-compra.pagina.ativa .btn-fechar-compra {
    top: 16px !important;
    right: 16px !important;
  }

  #pagina-compra.pagina.ativa .compra-card {
    margin-top: 48px !important;
  }
}

@media (max-width: 767px) {
  #pagina-frete,
  #pagina-frete.pagina.ativa {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .carrinho-container {
    padding: 14px 8px calc(118px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .titulo-carrinho {
    font-size: 18px !important;
    margin: 0 0 10px !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .carrinho-vazio[style*="display: none"] {
    display: none !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .carrinho-vazio {
    min-height: auto !important;
    height: auto !important;
    padding: 22px 18px 18px !important;
    border-radius: 16px !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .carrinho-vazio::before {
    width: 36px !important;
    height: 36px !important;
    margin-bottom: 8px !important;
    border-radius: 10px !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .carrinho-vazio h3 {
    font-size: 15px !important;
    margin-bottom: 4px !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .carrinho-vazio p {
    font-size: 11px !important;
    margin-bottom: 12px !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .lista-carrinho {
    gap: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 44px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho {
    grid-template-columns: 20px 56px minmax(0, 1fr) 64px !important;
    grid-template-areas:
      "check img info remove"
      "check img qtd remove" !important;
    align-items: start !important;
    gap: 5px 7px !important;
    min-height: 78px !important;
    padding: 10px 8px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho:hover,
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho.selecionado {
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: none !important;
    transform: none !important;
    background: transparent !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-selecao {
    grid-area: check !important;
    align-self: start !important;
    padding-top: 1px !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-esquerda {
    display: contents !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-imagem {
    grid-area: img !important;
    width: 56px !important;
    height: 56px !important;
    padding: 5px !important;
    border-radius: 3px !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-info {
    grid-area: info !important;
    min-width: 0 !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-info h3 {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    margin-bottom: 3px !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-info p {
    font-size: 10px !important;
    line-height: 1.2 !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-qtd {
    grid-area: qtd !important;
    grid-column: auto !important;
    justify-self: start !important;
    gap: 5px !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .btn-qtd-carrinho {
    width: 28px !important;
    height: 26px !important;
    border-radius: 7px !important;
    font-size: 15px !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-valor-qtd {
    min-width: 22px !important;
    font-size: 15px !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .btn-remover-carrinho {
    grid-area: remove !important;
    grid-column: auto !important;
    align-self: center !important;
    justify-self: end !important;
    width: auto !important;
    min-height: 24px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--na-text-secondary) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .btn-remover-carrinho:hover {
    background: transparent !important;
    color: var(--na-text) !important;
    transform: none !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .barra-selecao-carrinho {
    position: fixed !important;
    right: 8px !important;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 6px) !important;
    left: 8px !important;
    z-index: 80 !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 6px 8px !important;
    border-radius: 12px !important;
    gap: 8px !important;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.38) !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .checkbox-selecionar-todos {
    flex: 1 1 82px !important;
    min-width: 0 !important;
    gap: 5px !important;
    font-size: 9px !important;
    line-height: 1.1 !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .checkbox-selecionar-todos input,
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .checkbox-item-carrinho {
    width: 13px !important;
    height: 13px !important;
    min-width: 13px !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .barra-selecao-acoes {
    flex: 1 1 auto !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    min-width: 0 !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa #resumo-selecao-carrinho {
    max-width: 96px !important;
    text-align: left !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .btn-comprar-selecionados {
    min-width: 64px !important;
    height: 32px !important;
    padding: 0 12px !important;
    border-radius: 9px !important;
    font-size: 10px !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .recomendados {
    margin-top: 26px !important;
    padding-bottom: 70px !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .recomendados h2 {
    margin: 0 0 8px !important;
    padding: 0 4px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa #grade-recomendados {
    gap: 7px !important;
    padding: 0 4px 20px !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa #grade-recomendados .produto-card {
    min-height: 178px !important;
    padding: 7px !important;
    border-radius: 10px !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa #grade-recomendados .produto-img-wrap {
    min-height: 84px !important;
    margin-bottom: 6px !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa #grade-recomendados .imagem-produto {
    height: 84px !important;
    padding: 4px !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa #grade-recomendados .nome-produto {
    font-size: 10px !important;
    line-height: 1.2 !important;
    margin-bottom: 2px !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa #grade-recomendados .marca-produto {
    font-size: 8px !important;
    line-height: 1.2 !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa #grade-recomendados .preco-produto {
    font-size: 11px !important;
  }
}

.chat-mobile-wpp-acoes {
  display: none;
}

@media (max-width: 767px) {
  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .chat-topo {
    min-height: 48px !important;
    padding: 7px 8px !important;
    gap: 8px !important;
    align-items: center !important;
  }

  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .chat-topo-avatar {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
  }

  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .chat-topo-info {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .chat-topo-info h3 {
    max-width: 92px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
  }

  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .chat-status-texto {
    font-size: 9px !important;
    line-height: 1.1 !important;
  }

  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .chat-mobile-wpp-acoes {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    margin-left: auto !important;
    flex: 0 0 auto !important;
  }

  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .chat-mobile-wpp-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 22px !important;
    padding: 0 6px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 7px !important;
    background: rgba(255, 255, 255, 0.045) !important;
    color: #f5f7ff !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }

  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .chat-mobile-wpp-atendimento {
    color: #54f2a7 !important;
    border-color: rgba(84, 242, 167, 0.3) !important;
  }

  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .chat-mobile-wpp-suporte {
    color: #a98bff !important;
    border-color: rgba(128, 86, 255, 0.36) !important;
  }

  #pagina-mensagens .chat-typing-indicator {
    display: none !important;
  }

  #pagina-mensagens .chat-typing-indicator.chat-typing-ativo {
    display: flex !important;
  }
}

/* Mensagens mobile: deixar somente a conversa na tela */
@media (max-width: 767px) {
  body.nexa-mensagens-ativa .topo,
  body.nexa-mensagens-ativa .sidebar-brand,
  body.nexa-mensagens-ativa .mensagens-mobile-topo {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    left: 0 !important;
    width: 100vw !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: var(--na-bg) !important;
  }

  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .mensagens-container {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }
}

/* Configuracoes mobile: esconder logo/busca e ocupar a tela */
@media (max-width: 767px) {
  body.nexa-configuracoes-ativa .topo,
  body.nexa-configuracoes-ativa .sidebar-brand,
  body.nexa-carrinho-ativa .topo,
  body.nexa-carrinho-ativa .sidebar-brand,
  body.nexa-avisos-ativa .topo,
  body.nexa-avisos-ativa .sidebar-brand {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.nexa-configuracoes-ativa #pagina-configuracoes.pagina.ativa {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    left: 0 !important;
    width: 100vw !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: var(--na-bg) !important;
  }

  body.nexa-configuracoes-ativa #pagina-configuracoes.pagina.ativa .configuracoes-container {
    width: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 22px 14px calc(22px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
  left: 0 !important;
  width: 100vw !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: #f4f5fb !important;
}

body.nexa-avisos-ativa #pagina-notificacoes.pagina.ativa {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
  left: 0 !important;
  width: 100vw !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: #f4f5fb !important;
  color: #061126 !important;
}

body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .carrinho-container {
  width: 100% !important;
  max-width: none !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 22px 14px calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  box-sizing: border-box !important;
  background: #f4f5fb !important;
  color: #061126 !important;
}

body.nexa-avisos-ativa #pagina-notificacoes.pagina.ativa .notificacoes-container {
  width: 100% !important;
  max-width: none !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 24px 14px calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  box-sizing: border-box !important;
  background: #f4f5fb !important;
  color: #061126 !important;
}
}

/* Checkout mobile: cards mais compactos */
@media (max-width: 767px) {
  #pagina-compra.pagina.ativa .compra-container {
    padding: 12px 8px calc(104px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #pagina-compra.pagina.ativa .btn-fechar-compra {
    width: 34px !important;
    height: 34px !important;
    top: 10px !important;
    right: 10px !important;
    font-size: 24px !important;
  }

  #pagina-compra.pagina.ativa .compra-card,
  #pagina-compra.pagina.ativa .compra-resumo-itens,
  #pagina-compra.pagina.ativa .endereco-box,
  #pagina-compra.pagina.ativa .frete-box-compra,
  #pagina-compra.pagina.ativa .compra-resumo-final {
    border-radius: 12px !important;
    padding: 14px !important;
    margin-bottom: 10px !important;
  }

  #pagina-compra.pagina.ativa .compra-card {
    margin-top: 30px !important;
    gap: 12px !important;
  }

  #pagina-compra.pagina.ativa .compra-esquerda {
    gap: 10px !important;
    align-items: center !important;
  }

  #pagina-compra.pagina.ativa .compra-imagem-box {
    width: 58px !important;
    min-width: 58px !important;
    border-radius: 10px !important;
    padding: 6px !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2) !important;
  }

  #pagina-compra.pagina.ativa.compra-multipla .compra-esquerda {
    display: block !important;
  }

  #pagina-compra.pagina.ativa.compra-multipla .compra-imagem-box {
    display: none !important;
  }

  #pagina-compra.pagina.ativa .compra-detalhes {
    gap: 3px !important;
    padding-top: 0 !important;
  }

  #pagina-compra.pagina.ativa .compra-detalhes h2 {
    font-size: 13px !important;
    line-height: 1.15 !important;
  }

  #pagina-compra.pagina.ativa #compra-preco {
    font-size: 19px !important;
    line-height: 1.05 !important;
  }

  #pagina-compra.pagina.ativa #compra-pagamento,
  #pagina-compra.pagina.ativa #compra-estoque,
  #pagina-compra.pagina.ativa .compra-quantidade-info {
    font-size: 10px !important;
    line-height: 1.25 !important;
  }

  #pagina-compra.pagina.ativa .compra-direita {
    min-width: 0 !important;
    padding-top: 0 !important;
  }

  #pagina-compra.pagina.ativa .compra-direita h3,
  #pagina-compra.pagina.ativa .compra-resumo-topo h3,
  #pagina-compra.pagina.ativa .endereco-topo h3,
  #pagina-compra.pagina.ativa .frete-topo-compra h3,
  #pagina-compra.pagina.ativa .compra-resumo-final h3 {
    font-size: 16px !important;
    line-height: 1.2 !important;
    margin-bottom: 8px !important;
  }

  #pagina-compra.pagina.ativa .controle-quantidade {
    gap: 8px !important;
    margin-bottom: 6px !important;
  }

  #pagina-compra.pagina.ativa .btn-qtd,
  #pagina-compra.pagina.ativa #input-quantidade {
    width: 34px !important;
    height: 32px !important;
    min-width: 34px !important;
    border-radius: 9px !important;
    font-size: 13px !important;
  }

  #pagina-compra.pagina.ativa .compra-resumo-topo,
  #pagina-compra.pagina.ativa .endereco-topo,
  #pagina-compra.pagina.ativa .frete-topo-compra,
  #pagina-compra.pagina.ativa .compra-resumo-final-topo {
    margin-bottom: 8px !important;
  }

  #pagina-compra.pagina.ativa .compra-resumo-topo span {
    font-size: 11px !important;
  }

  #pagina-compra.pagina.ativa .compra-item-resumo,
  #pagina-compra.pagina.ativa .endereco-preenchido,
  #pagina-compra.pagina.ativa .endereco-vazio {
    border-radius: 10px !important;
    padding: 12px !important;
  }

  #pagina-compra.pagina.ativa .compra-item-resumo {
    gap: 8px !important;
    margin-bottom: 10px !important;
  }

  #pagina-compra.pagina.ativa .compra-item-resumo-info strong,
  #pagina-compra.pagina.ativa .endereco-preenchido p:first-child,
  #pagina-compra.pagina.ativa .frete-opcao-compra-texto strong {
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  #pagina-compra.pagina.ativa .compra-item-resumo-info span,
  #pagina-compra.pagina.ativa .compra-item-resumo-unitario,
  #pagina-compra.pagina.ativa .compra-item-resumo-total,
  #pagina-compra.pagina.ativa .endereco-preenchido p,
  #pagina-compra.pagina.ativa .endereco-vazio p,
  #pagina-compra.pagina.ativa .frete-opcao-compra-texto p {
    font-size: 11px !important;
    line-height: 1.32 !important;
  }

  #pagina-compra.pagina.ativa .compra-subtotal-linha,
  #pagina-compra.pagina.ativa .compra-total-linha {
    padding-top: 8px !important;
    margin-top: 8px !important;
    font-size: 12px !important;
  }

  #pagina-compra.pagina.ativa .frete-opcoes-compra {
    gap: 8px !important;
  }

  #pagina-compra.pagina.ativa .frete-opcao-compra-conteudo {
    min-height: 62px !important;
    padding: 12px !important;
    border-radius: 12px !important;
    gap: 10px !important;
  }

  #pagina-compra.pagina.ativa .frete-opcao-compra span,
  #pagina-compra.pagina.ativa .compra-total-linha strong {
    font-size: 13px !important;
  }

  #pagina-compra.pagina.ativa .compra-total-linha-destaque strong {
    font-size: 20px !important;
  }

  #pagina-compra.pagina.ativa .btn-finalizar-compra {
    height: 48px !important;
    min-height: 48px !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    margin-top: 12px !important;
  }
}

/* Header: remove o atalho redundante de perfil do topo */
#btn-perfil-topo {
  display: none !important;
}

/* Configuracoes: remove o avatar redundante do card de perfil */
.config-perfil-avatar {
  display: none !important;
}

.config-perfil-card {
  display: none !important;
}

/* Favoritos */
#pagina-favoritos.pagina.ativa {
  background: var(--na-bg) !important;
  min-height: 100vh !important;
  overflow-y: auto !important;
}

.favoritos-container {
  width: min(1180px, calc(100% - 56px)) !important;
  margin: 0 auto !important;
  padding: 34px 0 72px !important;
  color: var(--na-text) !important;
}

.favoritos-topo {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 18px !important;
  margin-bottom: 26px !important;
}

.favoritos-topo h1 {
  margin: 0 !important;
  font-size: 34px !important;
  line-height: 1.08 !important;
  color: var(--na-text) !important;
}

.favoritos-topo p {
  margin: 8px 0 0 !important;
  color: var(--na-text-secondary) !important;
  font-size: 16px !important;
}

.favoritos-grade {
  width: 100% !important;
}

.favoritos-vazio {
  display: none;
  width: 100% !important;
  padding: 56px 22px !important;
  border: 1px solid var(--na-border) !important;
  border-radius: 20px !important;
  background: linear-gradient(145deg, rgba(255,255,255,0.045), rgba(52,131,250,0.055)) !important;
  text-align: center !important;
}

.favoritos-vazio h3 {
  margin: 0 0 8px !important;
  color: var(--na-text) !important;
  font-size: 24px !important;
}

.favoritos-vazio p {
  margin: 0 !important;
  color: var(--na-text-secondary) !important;
  font-size: 16px !important;
}

/* Quando há favoritos, o bloco vazio deve ficar oculto mesmo com !important do mobile */
#favoritos-vazio.oculto {
  display: none !important;
}

/* Botão de favorito (coração) oculto na página Favoritos — desktop e mobile */
#pagina-favoritos .produto-btn-fav {
  display: none !important;
}

@media (max-width: 767px) {
  .favoritos-container {
    width: calc(100% - 28px) !important;
    padding: 22px 0 96px !important;
  }

  .favoritos-topo h1 {
    font-size: 26px !important;
  }
}

/* Checkout: painel direito solido ate o fim do conteudo */
#pagina-compra.pagina.ativa {
  --checkout-drawer-width: min(760px, calc(100vw - 88px));
  background: transparent !important;
}

#pagina-compra.pagina.ativa .compra-overlay {
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: flex-start !important;
  padding: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: rgba(0, 0, 0, 0.42) !important;
  backdrop-filter: blur(4px) !important;
}

#pagina-compra.pagina.ativa .compra-overlay::before {
  display: none !important;
}

#pagina-compra.pagina.ativa .compra-container {
  position: relative !important;
  width: var(--checkout-drawer-width) !important;
  max-width: var(--checkout-drawer-width) !important;
  min-height: 100vh !important;
  flex: 0 0 var(--checkout-drawer-width) !important;
  margin: 0 0 0 auto !important;
  padding: 34px 30px calc(130px + env(safe-area-inset-bottom, 0px)) !important;
  border-left: 1px solid #262a38 !important;
  border-right: 0 !important;
  background: linear-gradient(180deg, #070b16 0%, #0c1222 52%, #080d18 100%) !important;
  background-clip: border-box !important;
  box-shadow: -22px 0 58px rgba(0, 0, 0, 0.42) !important;
  overflow: visible !important;
  z-index: 1 !important;
}

#pagina-compra.pagina.ativa .compra-container::before,
#pagina-compra.pagina.ativa .compra-container::after {
  display: none !important;
}

#pagina-compra.pagina.ativa .compra-card,
#pagina-compra.pagina.ativa .compra-resumo-itens,
#pagina-compra.pagina.ativa .endereco-box,
#pagina-compra.pagina.ativa .frete-box-compra,
#pagina-compra.pagina.ativa .compra-resumo-final {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  background-color: #15161e !important;
}

#pagina-compra.pagina.ativa .compra-card {
  margin-top: 54px !important;
}

#pagina-compra.pagina.ativa .btn-fechar-compra {
  position: fixed !important;
  top: 24px !important;
  right: 30px !important;
  margin: 0 !important;
  z-index: 100 !important;
}

@media (max-width: 900px) {
  #pagina-compra.pagina.ativa {
    --checkout-drawer-width: min(720px, calc(100vw - 40px));
  }
}

@media (max-width: 767px) {
  #pagina-compra.pagina.ativa {
    --checkout-drawer-width: 100vw;
  }

  #pagina-compra.pagina.ativa .compra-container {
    padding: 18px 14px calc(130px + env(safe-area-inset-bottom, 0px)) !important;
    border-left: 0 !important;
  }

  #pagina-compra.pagina.ativa .btn-fechar-compra {
    top: 16px !important;
    right: 16px !important;
  }

  #pagina-compra.pagina.ativa .compra-card {
    margin-top: 48px !important;
  }
}

@media (max-width: 767px) {
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .carrinho-container {
    padding: 18px 8px calc(126px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (max-width: 767px) {
  #pagina-config-conta-seguranca.pagina.ativa,
  #pagina-config-meus-enderecos.pagina.ativa,
  #pagina-config-contas-cartoes.pagina.ativa,
  #pagina-config-notificacoes.pagina.ativa,
  #pagina-config-idioma.pagina.ativa,
  #pagina-config-avaliar.pagina.ativa,
  #pagina-config-sobre.pagina.ativa,
  #pagina-config-excluir-conta.pagina.ativa {
    padding: 0 !important;
    background: var(--na-bg) !important;
  }

  #pagina-config-conta-seguranca.pagina.ativa .config-subpagina-container,
  #pagina-config-meus-enderecos.pagina.ativa .config-subpagina-container,
  #pagina-config-contas-cartoes.pagina.ativa .config-subpagina-container,
  #pagina-config-notificacoes.pagina.ativa .config-subpagina-container,
  #pagina-config-idioma.pagina.ativa .config-subpagina-container,
  #pagina-config-avaliar.pagina.ativa .config-subpagina-container,
  #pagina-config-sobre.pagina.ativa .config-subpagina-container,
  #pagina-config-excluir-conta.pagina.ativa .config-subpagina-container {
    width: 100% !important;
    min-height: 100% !important;
    padding: 14px 0 calc(86px + env(safe-area-inset-bottom, 0px)) !important;
    color: var(--na-text) !important;
  }

  #pagina-config-conta-seguranca.pagina.ativa .config-subtopo,
  #pagina-config-meus-enderecos.pagina.ativa .config-subtopo,
  #pagina-config-contas-cartoes.pagina.ativa .config-subtopo,
  #pagina-config-notificacoes.pagina.ativa .config-subtopo,
  #pagina-config-idioma.pagina.ativa .config-subtopo,
  #pagina-config-avaliar.pagina.ativa .config-subtopo,
  #pagina-config-sobre.pagina.ativa .config-subtopo,
  #pagina-config-excluir-conta.pagina.ativa .config-subtopo,
  #pagina-config-form-endereco.pagina.ativa .config-subtopo {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 14px 12px !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: center !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  #pagina-config-meus-enderecos.pagina.ativa .config-subtopo-enderecos {
    grid-template-columns: 1fr !important;
  }

  #pagina-config-meus-enderecos.pagina.ativa .config-subtopo-esquerda {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: center !important;
  }

  .pagina.ativa .config-subtopo .config-voltar,
  #pagina-config-conta-seguranca.pagina.ativa .config-voltar,
  #pagina-config-meus-enderecos.pagina.ativa .config-voltar,
  #pagina-config-contas-cartoes.pagina.ativa .config-voltar,
  #pagina-config-notificacoes.pagina.ativa .config-voltar,
  #pagina-config-idioma.pagina.ativa .config-voltar,
  #pagina-config-avaliar.pagina.ativa .config-voltar,
  #pagina-config-sobre.pagina.ativa .config-voltar,
  #pagina-config-excluir-conta.pagina.ativa .config-voltar,
  #pagina-config-form-endereco.pagina.ativa .config-voltar {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 14px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(52,131,250,0.4) !important;
    background: rgba(52,131,250,0.13) !important;
    color: var(--na-text) !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 800 !important;
  }

  #pagina-config-conta-seguranca.pagina.ativa .config-subtopo h2,
  #pagina-config-meus-enderecos.pagina.ativa .config-subtopo h2,
  #pagina-config-contas-cartoes.pagina.ativa .config-subtopo h2,
  #pagina-config-notificacoes.pagina.ativa .config-subtopo h2,
  #pagina-config-idioma.pagina.ativa .config-subtopo h2,
  #pagina-config-avaliar.pagina.ativa .config-subtopo h2,
  #pagina-config-sobre.pagina.ativa .config-subtopo h2,
  #pagina-config-excluir-conta.pagina.ativa .config-subtopo h2,
  #pagina-config-form-endereco.pagina.ativa .config-subtopo h2 {
    margin: 0 !important;
    font-size: 18px !important;
    line-height: 1.18 !important;
    font-weight: 800 !important;
    white-space: normal !important;
  }

  /* Conta e segurança: cabeçalho igual ao padrão gradiente
     roxo/azul usado em Favoritos / Minhas compras / Carrinho */
  #pagina-config-conta-seguranca.pagina.ativa .config-subtopo {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    width: 100% !important;
    height: 56px !important;
    min-height: 56px !important;
    margin: 0 0 16px !important;
    padding: 0 18px !important;
    gap: 0 !important;
    background: linear-gradient(135deg, #7c3aed 0%, #2563eb 100%) !important;
    border: 0 !important;
    border-bottom: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  #pagina-config-conta-seguranca.pagina.ativa .config-subtopo h2 {
    margin: 0 !important;
    padding: 0 !important;
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    white-space: normal !important;
  }

  #pagina-config-conta-seguranca.pagina.ativa .config-subtopo .config-voltar {
    position: absolute !important;
    left: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 8px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 1 !important;
  }

  #pagina-config-conta-seguranca.pagina.ativa .config-subtopo .config-voltar::before {
    content: "\2039" !important;
    display: inline-block !important;
    color: #ffffff !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }

  #pagina-config-conta-seguranca.pagina.ativa .config-subtopo .config-voltar:hover,
  #pagina-config-conta-seguranca.pagina.ativa .config-subtopo .config-voltar:active {
    background: transparent !important;
    color: transparent !important;
  }

  #pagina-config-conta-seguranca.pagina.ativa .config-subcard,
  #pagina-config-meus-enderecos.pagina.ativa .endereco-card-pro,
  #pagina-config-meus-enderecos.pagina.ativa .endereco-inline-form,
  #pagina-config-contas-cartoes.pagina.ativa .config-subcard,
  #pagina-config-notificacoes.pagina.ativa .config-subcard,
  #pagina-config-idioma.pagina.ativa .config-subcard,
  #pagina-config-avaliar.pagina.ativa .config-subcard,
  #pagina-config-sobre.pagina.ativa .config-subcard,
  #pagina-config-excluir-conta.pagina.ativa .config-subcard {
    margin: 0 !important;
    padding: 14px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #pagina-config-contas-cartoes.pagina.ativa .config-sublista,
  #pagina-config-notificacoes.pagina.ativa .config-subcard,
  #pagina-config-idioma.pagina.ativa .config-subcard,
  #pagina-config-sobre.pagina.ativa .config-subcard {
    display: block !important;
  }

  #pagina-config-conta-seguranca.pagina.ativa .security-hero,
  #pagina-config-conta-seguranca.pagina.ativa .security-grid,
  #pagina-config-meus-enderecos.pagina.ativa .endereco-card-info,
  #pagina-config-meus-enderecos.pagina.ativa .endereco-inline-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  #pagina-config-conta-seguranca.pagina.ativa .security-info-card,
  #pagina-config-conta-seguranca.pagina.ativa .security-panel,
  #pagina-config-meus-enderecos.pagina.ativa .endereco-info-item,
  #pagina-config-contas-cartoes.pagina.ativa .metodos-lista,
  #pagina-config-contas-cartoes.pagina.ativa .cartao-preview,
  #pagina-config-notificacoes.pagina.ativa .config-toggle-item,
  #pagina-config-idioma.pagina.ativa .config-radio-item,
  #pagina-config-sobre.pagina.ativa .config-subitem,
  #pagina-config-excluir-conta.pagina.ativa .config-subitem {
    border-radius: 4px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: rgba(255, 255, 255, 0.025) !important;
    box-shadow: none !important;
  }

  #pagina-config-conta-seguranca.pagina.ativa .security-info-card,
  #pagina-config-conta-seguranca.pagina.ativa .security-panel,
  #pagina-config-meus-enderecos.pagina.ativa .endereco-info-item,
  #pagina-config-notificacoes.pagina.ativa .config-toggle-item,
  #pagina-config-idioma.pagina.ativa .config-radio-item,
  #pagina-config-sobre.pagina.ativa .config-subitem,
  #pagina-config-excluir-conta.pagina.ativa .config-subitem {
    padding: 12px !important;
  }

  #pagina-config-meus-enderecos.pagina.ativa .endereco-badge,
  #pagina-config-contas-cartoes.pagina.ativa .metodo-badge,
  #pagina-config-contas-cartoes.pagina.ativa .cartao-rodape-status,
  #pagina-config-conta-seguranca.pagina.ativa .security-badge {
    border-radius: 4px !important;
    box-shadow: none !important;
  }

  #pagina-config-conta-seguranca.pagina.ativa .config-btn-acao,
  #pagina-config-conta-seguranca.pagina.ativa .config-btn-sair,
  #pagina-config-meus-enderecos.pagina.ativa .endereco-btn,
  #pagina-config-meus-enderecos.pagina.ativa .endereco-btn-add-topo,
  #pagina-config-meus-enderecos.pagina.ativa .endereco-inline-cancelar,
  #pagina-config-contas-cartoes.pagina.ativa .cartao-btn-add,
  #pagina-config-contas-cartoes.pagina.ativa .cartao-btn-remover,
  #pagina-config-avaliar.pagina.ativa #btn-enviar-avaliacao,
  #pagina-config-excluir-conta.pagina.ativa .config-btn-acao,
  #pagina-config-excluir-conta.pagina.ativa .config-btn-perigo {
    height: 40px !important;
    min-height: 40px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--na-text) !important;
    box-shadow: none !important;
    transform: none !important;
    font-size: 13px !important;
    font-weight: 800 !important;
  }

  #pagina-config-conta-seguranca.pagina.ativa .config-btn-primario,
  #pagina-config-meus-enderecos.pagina.ativa .endereco-btn-primario,
  #pagina-config-meus-enderecos.pagina.ativa .endereco-btn-add-topo,
  #pagina-config-contas-cartoes.pagina.ativa .cartao-btn-add,
  #pagina-config-avaliar.pagina.ativa #btn-enviar-avaliacao {
    background: #5d3df2 !important;
    border-color: #5d3df2 !important;
    color: #fff !important;
  }

  #pagina-config-contas-cartoes.pagina.ativa .cartao-btn-remover,
  #pagina-config-excluir-conta.pagina.ativa .config-btn-perigo,
  #pagina-config-meus-enderecos.pagina.ativa .endereco-btn:not(.endereco-btn-primario) {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    color: var(--na-text-secondary) !important;
  }

  #pagina-config-conta-seguranca.pagina.ativa input,
  #pagina-config-meus-enderecos.pagina.ativa input,
  #pagina-config-meus-enderecos.pagina.ativa select,
  #pagina-config-avaliar.pagina.ativa .config-textarea,
  .modal-cartao-card .modal-campo-input {
    border-radius: 8px !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    background: rgba(255, 255, 255, 0.035) !important;
    box-shadow: none !important;
  }

  #pagina-config-contas-cartoes.pagina.ativa .cartao-preview {
    padding: 16px !important;
    background: rgba(255, 255, 255, 0.035) !important;
  }

  #pagina-config-contas-cartoes.pagina.ativa .cartao-preview::before,
  #pagina-config-contas-cartoes.pagina.ativa .cartao-vazio-icone,
  #pagina-config-contas-cartoes.pagina.ativa .modal-cartao-icone {
    display: none !important;
  }

  #pagina-config-contas-cartoes.pagina.ativa .metodos-lista {
    overflow: hidden !important;
  }

  #pagina-config-contas-cartoes.pagina.ativa .metodo-icone-wrap {
    width: 34px !important;
    height: 34px !important;
    border-radius: 4px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: var(--na-text-secondary) !important;
  }

  #pagina-config-avaliar.pagina.ativa .avaliacao-estrela {
    width: 38px !important;
    height: 38px !important;
    font-size: 30px !important;
  }

  #pagina-config-excluir-conta.pagina.ativa .config-alerta-card,
  #pagina-config-excluir-conta.pagina.ativa .config-alerta-texto {
    color: var(--na-text-secondary) !important;
  }

  .modal-cartao-card {
    width: calc(100vw - 24px) !important;
    max-width: 420px !important;
    border-radius: 6px !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    background: #11131a !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55) !important;
  }

  .modal-cartao-card .modal-campo-linha {
    display: grid !important;
    grid-template-columns: 1fr 0.72fr !important;
    gap: 10px !important;
  }

  .modal-cartao-aceitos {
    margin: -2px 0 0 !important;
    color: var(--na-text-secondary) !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

}

/* ═══════════════════════════════════════════════════════════════════════════
   BOTÃO DE TEMA — toggle claro/escuro
   ═══════════════════════════════════════════════════════════════════════════ */
.btn-tema-toggle {
  transition: transform 0.2s ease, background 0.2s ease !important;
}
.btn-tema-toggle:active {
  transform: scale(0.88) !important;
}

.topo-profile-btn,
.config-perfil-mobile-card {
  display: none !important;
}

/* No desktop: visível mas discreto */
/* Item de Aparência escondido no desktop — toggle só existe no mobile */
@media (min-width: 768px) {
  #config-aparencia-item { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TEMA CLARO — sobreposições mobile (max-width: 767px)
   Desktop sempre escuro — data-theme nunca é aplicado no desktop.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  [data-theme="light"] body {
    background: var(--na-bg) !important;
    color: var(--na-text) !important;
  }

  /* Bottom nav mobile */
  [data-theme="light"] .caixa {
    background: var(--na-surface) !important;
    border-top-color: var(--na-border) !important;
  }
  [data-theme="light"] .caixa .menu-btn {
    color: var(--na-text-secondary) !important;
  }
  [data-theme="light"] .caixa .menu-btn.ativo {
    color: var(--na-primary) !important;
  }

  /* Header mobile */
  [data-theme="light"] .topo {
    background: rgba(240,239,255,0.97) !important;
    border-bottom-color: var(--na-border) !important;
  }

  /* Busca */
  [data-theme="light"] .busca-input-wrap {
    background: rgba(255,255,255,0.9) !important;
    border-color: var(--na-border) !important;
  }
  [data-theme="light"] .busca-input-wrap input {
    color: var(--na-text) !important;
  }
  [data-theme="light"] .busca-input-wrap input::placeholder {
    color: var(--na-text-tertiary) !important;
  }
  [data-theme="light"] .busca-input-wrap svg {
    color: var(--na-text-secondary) !important;
  }
  [data-theme="light"] .sugestoes-busca {
    background: var(--na-surface) !important;
    border-color: var(--na-border) !important;
    box-shadow: 0 16px 40px rgba(80,60,160,0.18) !important;
  }
  [data-theme="light"] .sugestao-item {
    color: var(--na-text) !important;
    border-bottom-color: var(--na-border) !important;
  }
  [data-theme="light"] .sugestao-item:hover {
    background: var(--na-surface-hover) !important;
  }

  /* Ícones do topo */
  [data-theme="light"] .topo-icon-btn {
    background: rgba(52,131,250,0.08) !important;
    color: var(--na-text) !important;
  }
  [data-theme="light"] .topo-icon-btn:hover {
    background: rgba(52,131,250,0.14) !important;
  }

  /* Cards de produto */
  [data-theme="light"] .produto-card {
    background: var(--na-gradient-card) !important;
    border-color: var(--na-border) !important;
    box-shadow: var(--na-shadow-card) !important;
  }
  [data-theme="light"] .produto-card:hover {
    border-color: var(--na-primary) !important;
    box-shadow: var(--na-shadow-elevated) !important;
  }
  [data-theme="light"] .nome-produto {
    color: var(--na-text) !important;
  }
  [data-theme="light"] .marca-produto {
    color: var(--na-text-secondary) !important;
  }
  [data-theme="light"] .preco-produto {
    color: var(--na-text) !important;
  }

  /* Páginas */
  [data-theme="light"] #pagina-notificacoes,
  [data-theme="light"] #pagina-usuario,
  [data-theme="light"] #pagina-configuracoes,
  [data-theme="light"] #pagina-config-conta-seguranca,
  [data-theme="light"] #pagina-config-meus-enderecos,
  [data-theme="light"] #pagina-config-contas-cartoes,
  [data-theme="light"] #pagina-config-notificacoes,
  [data-theme="light"] #pagina-config-idioma,
  [data-theme="light"] #pagina-config-avaliar,
  [data-theme="light"] #pagina-config-sobre,
  [data-theme="light"] #pagina-config-excluir-conta,
  [data-theme="light"] #pagina-pedido,
  [data-theme="light"] #pagina-mensagens,
  [data-theme="light"] #pagina-carrinho,
  [data-theme="light"] #pagina-home {
    background-color: var(--na-bg) !important;
  }

  /* Home title */
  [data-theme="light"] .home-titulo {
    color: var(--na-text) !important;
  }
  [data-theme="light"] .home-subtitulo {
    color: var(--na-text-secondary) !important;
  }

  /* Configurações */
  [data-theme="light"] .configuracoes-container,
  [data-theme="light"] .config-subpagina-container {
    color: var(--na-text) !important;
  }
  [data-theme="light"] .config-subcard,
  [data-theme="light"] .security-info-card,
  [data-theme="light"] .endereco-card-pro {
    background: var(--na-surface) !important;
    border-color: var(--na-border) !important;
    color: var(--na-text) !important;
  }
  [data-theme="light"] .config-titulo-secao,
  [data-theme="light"] .config-item-label,
  [data-theme="light"] .config-item-valor {
    color: var(--na-text) !important;
  }
  [data-theme="light"] .config-item-sub,
  [data-theme="light"] .config-item-detalhe {
    color: var(--na-text-secondary) !important;
  }
  [data-theme="light"] .config-group {
    background: var(--na-surface) !important;
    border-color: var(--na-border) !important;
  }
  [data-theme="light"] .config-item {
    border-bottom-color: var(--na-border) !important;
  }
  [data-theme="light"] .config-item-icon {
    background: var(--na-primary-dim) !important;
  }

  /* Inputs */
  [data-theme="light"] input:not([type="checkbox"]):not([type="radio"]),
  [data-theme="light"] select,
  [data-theme="light"] textarea {
    background: var(--na-surface) !important;
    border-color: var(--na-border) !important;
    color: var(--na-text) !important;
  }
  [data-theme="light"] input::placeholder,
  [data-theme="light"] textarea::placeholder {
    color: var(--na-text-tertiary) !important;
  }

  /* Modais */
  [data-theme="light"] .modal-termos-card,
  [data-theme="light"] .modal-cartao-card {
    background: var(--na-surface) !important;
    border-color: var(--na-border) !important;
    color: var(--na-text) !important;
  }
  [data-theme="light"] .modal-termos-overlay {
    background: rgba(80,60,160,0.28) !important;
  }

  /* Mensagens */
  [data-theme="light"] .mensagem-balao {
    background: var(--na-surface-elevated) !important;
    color: var(--na-text) !important;
  }
  [data-theme="light"] .mensagem-propria .mensagem-balao {
    background: var(--na-primary) !important;
    color: #fff !important;
  }
  [data-theme="light"] .chat-header,
  [data-theme="light"] .mensagens-lista {
    background: var(--na-bg) !important;
  }
  [data-theme="light"] .chat-input-wrap {
    background: var(--na-surface) !important;
    border-color: var(--na-border) !important;
  }
  [data-theme="light"] .chat-input {
    background: transparent !important;
    color: var(--na-text) !important;
  }

  /* Carrinho */
  [data-theme="light"] .carrinho-resumo-card {
    background: var(--na-surface) !important;
    border-color: var(--na-border) !important;
    color: var(--na-text) !important;
  }
  [data-theme="light"] .carrinho-item {
    background: var(--na-surface) !important;
    border-color: var(--na-border) !important;
  }
  [data-theme="light"] .carrinho-item-nome,
  [data-theme="light"] .carrinho-item-preco {
    color: var(--na-text) !important;
  }
  [data-theme="light"] .carrinho-item-sub {
    color: var(--na-text-secondary) !important;
  }

  /* Checkout */
  [data-theme="light"] #pagina-compra.pagina.ativa .compra-container {
    background: linear-gradient(180deg, #F5F4FF 0%, #FFFFFF 52%, #F0EFFF 100%) !important;
    border-left-color: var(--na-border) !important;
  }
  [data-theme="light"] #pagina-compra.pagina.ativa .compra-overlay {
    background: rgba(24,23,42,0.28) !important;
  }
  [data-theme="light"] #pagina-compra.pagina.ativa .compra-card,
  [data-theme="light"] #pagina-compra.pagina.ativa .compra-resumo-itens,
  [data-theme="light"] #pagina-compra.pagina.ativa .endereco-box,
  [data-theme="light"] #pagina-compra.pagina.ativa .frete-box-compra,
  [data-theme="light"] #pagina-compra.pagina.ativa .compra-resumo-final {
    background-color: var(--na-surface) !important;
    border-color: var(--na-border) !important;
  }
  [data-theme="light"] .compra-titulo,
  [data-theme="light"] .compra-label {
    color: var(--na-text) !important;
  }

  /* Pedido/PIX */
  [data-theme="light"] #pagina-pedido,
  [data-theme="light"] .pagina-pix {
    background: var(--na-bg) !important;
  }
  [data-theme="light"] .pix-codigo-box,
  [data-theme="light"] .pix-instrucoes {
    background: var(--na-surface) !important;
    border-color: var(--na-border) !important;
    color: var(--na-text) !important;
  }
  [data-theme="light"] .pix-card {
    background: var(--na-surface) !important;
    border-color: var(--na-border) !important;
  }
  [data-theme="light"] .pix-timer-box {
    background: var(--na-surface-elevated) !important;
    border-color: var(--na-border) !important;
  }

  /* Notificações */
  [data-theme="light"] .notif-item {
    background: var(--na-surface) !important;
    border-color: var(--na-border) !important;
    color: var(--na-text) !important;
  }
  [data-theme="light"] .notif-titulo {
    color: var(--na-text) !important;
  }
  [data-theme="light"] .notif-descricao {
    color: var(--na-text-secondary) !important;
  }
  [data-theme="light"] .filtro-chip {
    background: var(--na-surface) !important;
    border-color: var(--na-border) !important;
    color: var(--na-text-secondary) !important;
  }
  [data-theme="light"] .filtro-chip.ativo {
    background: var(--na-primary-dim) !important;
    border-color: var(--na-primary) !important;
    color: var(--na-primary) !important;
  }

  /* Splash screen — mantém dark sempre */
  [data-theme="light"] #splash-screen {
    background: var(--na-bg) !important;
  }

  /* Radial glow nas páginas principais */
  [data-theme="light"] #pagina-home,
  [data-theme="light"] #pagina-carrinho,
  [data-theme="light"] #pagina-mensagens,
  [data-theme="light"] #pagina-notificacoes,
  [data-theme="light"] #pagina-configuracoes,
  [data-theme="light"] #pagina-pedido {
    background:
      radial-gradient(circle at 18% 8%, rgba(52,131,250,0.06), transparent 30%),
      var(--mobile-bg-primary) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TEMA CLARO — sobreposições mobile específicas
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Header mobile */
  [data-theme="light"] .topo {
    background: rgba(240,239,255,0.97) !important;
    border-bottom-color: rgba(52,131,250,0.12) !important;
  }
  [data-theme="light"] .topo::before {
    /* "Nexa Story" pseudo-element mantém gradiente */
    background: var(--na-gradient-logo) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
  }
  [data-theme="light"] .busca-input-wrap {
    background: rgba(255,255,255,0.88) !important;
    border-color: rgba(52,131,250,0.18) !important;
  }
  [data-theme="light"] .topo-icon-btn {
    background: rgba(52,131,250,0.09) !important;
  }

  /* Bottom nav mobile */
  [data-theme="light"] .caixa {
    background: rgba(255,255,255,0.97) !important;
    border-top-color: rgba(52,131,250,0.12) !important;
  }
  [data-theme="light"] .caixa .menu-btn {
    color: var(--na-text-tertiary) !important;
  }
  [data-theme="light"] .caixa .menu-btn.ativo {
    color: var(--na-primary) !important;
  }

  /* Páginas com fundo com gradiente radial */
  [data-theme="light"] #pagina-home,
  [data-theme="light"] #pagina-carrinho,
  [data-theme="light"] #pagina-mensagens,
  [data-theme="light"] #pagina-notificacoes,
  [data-theme="light"] #pagina-configuracoes,
  [data-theme="light"] #pagina-pedido {
    background:
      radial-gradient(circle at 18% 8%, rgba(52,131,250,0.07), transparent 32%),
      radial-gradient(circle at 88% 18%, rgba(56,130,246,0.05), transparent 30%),
      var(--na-bg) !important;
  }

  /* Product cards mobile */
  [data-theme="light"] .produto-card {
    background: linear-gradient(180deg, #FFFFFF 0%, #F5F4FF 100%) !important;
    box-shadow: 0 4px 16px rgba(80,60,160,0.10), inset 0 1px 0 rgba(255,255,255,0.9) !important;
    border: 1px solid rgba(52,131,250,0.10) !important;
  }

  /* Cart mobile */
  [data-theme="light"] .barra-selecao-carrinho {
    background: var(--na-surface) !important;
    border: 1px solid var(--na-border) !important;
    color: var(--na-text) !important;
  }

  /* Config sub-pages mobile */
  [data-theme="light"] #pagina-config-conta-seguranca.pagina.ativa,
  [data-theme="light"] #pagina-config-meus-enderecos.pagina.ativa,
  [data-theme="light"] #pagina-config-contas-cartoes.pagina.ativa,
  [data-theme="light"] #pagina-config-notificacoes.pagina.ativa,
  [data-theme="light"] #pagina-config-idioma.pagina.ativa,
  [data-theme="light"] #pagina-config-avaliar.pagina.ativa,
  [data-theme="light"] #pagina-config-sobre.pagina.ativa,
  [data-theme="light"] #pagina-config-excluir-conta.pagina.ativa,
  [data-theme="light"] #pagina-config-form-endereco.pagina.ativa {
    background: var(--na-bg) !important;
  }
  [data-theme="light"] #pagina-config-conta-seguranca.pagina.ativa .config-subtopo,
  [data-theme="light"] #pagina-config-meus-enderecos.pagina.ativa .config-subtopo,
  [data-theme="light"] #pagina-config-contas-cartoes.pagina.ativa .config-subtopo,
  [data-theme="light"] #pagina-config-notificacoes.pagina.ativa .config-subtopo,
  [data-theme="light"] #pagina-config-idioma.pagina.ativa .config-subtopo,
  [data-theme="light"] #pagina-config-avaliar.pagina.ativa .config-subtopo,
  [data-theme="light"] #pagina-config-sobre.pagina.ativa .config-subtopo,
  [data-theme="light"] #pagina-config-excluir-conta.pagina.ativa .config-subtopo,
  [data-theme="light"] #pagina-config-form-endereco.pagina.ativa .config-subtopo {
    border-bottom-color: var(--na-border) !important;
  }
  [data-theme="light"] .pagina.ativa .config-subtopo .config-voltar,
  [data-theme="light"] #pagina-config-conta-seguranca.pagina.ativa .config-voltar,
  [data-theme="light"] #pagina-config-meus-enderecos.pagina.ativa .config-voltar,
  [data-theme="light"] #pagina-config-contas-cartoes.pagina.ativa .config-voltar,
  [data-theme="light"] #pagina-config-notificacoes.pagina.ativa .config-voltar,
  [data-theme="light"] #pagina-config-idioma.pagina.ativa .config-voltar,
  [data-theme="light"] #pagina-config-avaliar.pagina.ativa .config-voltar,
  [data-theme="light"] #pagina-config-sobre.pagina.ativa .config-voltar,
  [data-theme="light"] #pagina-config-excluir-conta.pagina.ativa .config-voltar,
  [data-theme="light"] #pagina-config-form-endereco.pagina.ativa .config-voltar {
    background: rgba(52,131,250,0.10) !important;
    border-color: rgba(52,131,250,0.28) !important;
    color: var(--na-primary) !important;
  }
  [data-theme="light"] #pagina-config-conta-seguranca.pagina.ativa .config-subcard,
  [data-theme="light"] #pagina-config-meus-enderecos.pagina.ativa .endereco-card-pro,
  [data-theme="light"] #pagina-config-meus-enderecos.pagina.ativa .endereco-inline-form,
  [data-theme="light"] #pagina-config-contas-cartoes.pagina.ativa .config-subcard,
  [data-theme="light"] #pagina-config-notificacoes.pagina.ativa .config-subcard,
  [data-theme="light"] #pagina-config-idioma.pagina.ativa .config-subcard,
  [data-theme="light"] #pagina-config-avaliar.pagina.ativa .config-subcard,
  [data-theme="light"] #pagina-config-sobre.pagina.ativa .config-subcard,
  [data-theme="light"] #pagina-config-excluir-conta.pagina.ativa .config-subcard {
    border-bottom-color: var(--na-border) !important;
    color: var(--na-text) !important;
  }

  /* Checkout mobile */
  [data-theme="light"] #pagina-compra.pagina.ativa .compra-container {
    background: linear-gradient(180deg, #F5F4FF 0%, #FFFFFF 52%, #F0EFFF 100%) !important;
    border-left: none !important;
  }

  /* Modal cartão mobile */
  [data-theme="light"] .modal-cartao-card {
    background: var(--na-surface) !important;
    border-color: var(--na-border) !important;
    color: var(--na-text) !important;
  }

  /* Metodos de pagamento */
  [data-theme="light"] #pagina-config-contas-cartoes.pagina.ativa .metodo-icone-wrap {
    background: rgba(52,131,250,0.08) !important;
    border-color: var(--na-border) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MELHORIAS MOBILE — bottom nav active pill indicator
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .caixa .menu-btn {
    position: relative !important;
  }
  .caixa .menu-btn::before {
    content: '' !important;
    position: absolute !important;
    top: 7px !important;
    left: 50% !important;
    transform: translateX(-50%) scaleX(0) !important;
    width: 36px !important;
    height: 32px !important;
    border-radius: 10px !important;
    background: var(--na-primary-dim) !important;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    z-index: 0 !important;
    pointer-events: none !important;
  }
  .caixa .menu-btn.ativo::before {
    transform: translateX(-50%) scaleX(1) !important;
  }
  .caixa .menu-btn svg,
  .caixa .menu-btn > span {
    position: relative !important;
    z-index: 1 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONFIGURAÇÕES — toggle de aparência (claro/escuro)
   ═══════════════════════════════════════════════════════════════════════════ */
.config-item-aparencia {
  cursor: default !important;
  pointer-events: none !important;   /* item inteiro não navega */
}
.config-item-aparencia .config-tema-row {
  pointer-events: auto !important;
}

.config-tema-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
}

.config-tema-etiqueta {
  font-size: var(--na-text-sm) !important;
  font-weight: 500 !important;
  color: var(--na-text-secondary) !important;
  min-width: 38px !important;
  text-align: right !important;
}

/* Switch track */
.config-tema-switch {
  position: relative !important;
  width: 48px !important;
  height: 28px !important;
  border-radius: 999px !important;
  background: var(--na-border) !important;
  border: none !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: background 0.25s ease !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}
.config-tema-switch:focus-visible {
  outline: 2px solid var(--na-primary) !important;
  outline-offset: 2px !important;
}

/* Switch thumb */
.config-tema-switch-thumb {
  position: absolute !important;
  top: 4px !important;
  left: 4px !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.32) !important;
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1) !important;
  pointer-events: none !important;
}

/* Tema claro → switch ativo */
[data-theme="light"] .config-tema-switch {
  background: var(--na-primary) !important;
}
[data-theme="light"] .config-tema-switch-thumb {
  transform: translateX(20px) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PIX — redesign mobile profissional
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  #pagina-pix.pagina-pix {
    position: fixed !important;
    inset: 0 !important;
    display: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    background: rgba(2,2,7,0.72) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    padding: 12px 12px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
    align-items: flex-start !important;
    justify-content: center !important;
    z-index: 100320 !important;
  }

  #pagina-pix.pagina-pix.ativa {
    display: flex !important;
  }

  #pagina-pix .pagina-pix-conteudo {
    width: 100% !important;
    max-width: 420px !important;
    margin: auto !important;
    padding: 20px 18px 28px !important;
    border-radius: 24px !important;
    border: 1px solid var(--na-border) !important;
    background: var(--na-surface) !important;
    box-shadow: 0 24px 60px rgba(0,0,0,0.5) !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  /* Topo PIX */
  #pagina-pix .topo-pix {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 0 !important;
  }
  #pagina-pix .topo-pix h2 {
    margin: 0 !important;
    font-size: var(--mobile-font-md) !important;
    font-weight: 700 !important;
    color: var(--na-text) !important;
  }
  #pagina-pix .btn-fechar-pix {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,0.07) !important;
    border: 1px solid var(--na-border) !important;
    color: var(--na-text) !important;
    font-size: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 0 !important;
    line-height: 1 !important;
  }

  /* Timer box */
  #pagina-pix .pix-tempo-box {
    text-align: center !important;
    padding: 16px 12px !important;
    border-radius: 16px !important;
    background: var(--mobile-bg-tertiary) !important;
    border: 1px solid var(--mobile-border) !important;
  }
  #pagina-pix .pix-tempo-box h3 {
    margin: 0 0 6px !important;
    font-size: var(--mobile-font-sm) !important;
    font-weight: 500 !important;
    color: var(--na-text-secondary) !important;
  }
  #pagina-pix .pix-contador {
    margin: 0 0 4px !important;
    font-size: var(--mobile-font-xl) !important;
    font-weight: 800 !important;
    font-family: var(--na-font-mono, monospace) !important;
    color: var(--na-primary) !important;
    letter-spacing: 1px !important;
    line-height: 1.1 !important;
  }
  #pagina-pix .pix-vencimento {
    font-size: var(--mobile-font-xs) !important;
    color: var(--na-text-tertiary) !important;
  }

  /* QR code container */
  #pagina-pix .pix-qrcode-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 16px 12px !important;
    border-radius: 16px !important;
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
  }
  #pagina-pix .pix-qrcode-topo {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
  }
  #pagina-pix .pix-qrcode-topo strong {
    font-size: var(--mobile-font-sm) !important;
    color: #111827 !important;
  }
  #pagina-pix .pix-qrcode-topo span {
    font-size: var(--mobile-font-xs) !important;
    font-weight: 700 !important;
    color: #4ade80 !important;
    letter-spacing: 1px !important;
  }
  #pagina-pix .pix-qrcode-imagem img {
    width: clamp(160px, 55vw, 220px) !important;
    height: clamp(160px, 55vw, 220px) !important;
    display: block !important;
    object-fit: contain !important;
    border-radius: 8px !important;
  }
  #pagina-pix .pix-qrcode-container > p {
    margin: 0 !important;
    font-size: var(--mobile-font-xs) !important;
    color: #6b7280 !important;
    text-align: center !important;
  }

  /* Código box */
  #pagina-pix .pix-codigo-box {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 14px !important;
    border-radius: 14px !important;
    background: var(--mobile-bg-tertiary) !important;
    border: 1px solid var(--mobile-border) !important;
  }
  #pagina-pix .pix-icone {
    display: none !important; /* QR container substitui */
  }
  #pagina-pix .pix-seguro-badge {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 10px !important;
    border-radius: 10px !important;
    background: rgba(34,197,94,0.1) !important;
    border: 1px solid rgba(34,197,94,0.25) !important;
    font-size: var(--mobile-font-xs) !important;
    color: var(--na-text-secondary) !important;
  }
  #pagina-pix .pix-seguro-selo {
    font-weight: 800 !important;
    font-size: 10px !important;
    background: rgba(34,197,94,0.18) !important;
    color: var(--mobile-success) !important;
    padding: 2px 5px !important;
    border-radius: 4px !important;
  }
  #pagina-pix .pix-codigo-box label {
    font-size: var(--mobile-font-sm) !important;
    font-weight: 600 !important;
    color: var(--na-text-secondary) !important;
    margin: 0 !important;
  }
  #pagina-pix #codigo-pix-texto {
    width: 100% !important;
    min-height: 72px !important;
    max-height: 96px !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    border: 1px solid var(--mobile-border) !important;
    background: var(--mobile-bg-secondary) !important;
    color: var(--na-text) !important;
    font-size: 11px !important;
    font-family: monospace !important;
    word-break: break-all !important;
    overflow-wrap: break-word !important;
    resize: none !important;
    box-sizing: border-box !important;
  }
  #pagina-pix .btn-copiar-pix {
    width: 100% !important;
    min-height: 46px !important;
    border-radius: 12px !important;
    background: var(--na-primary) !important;
    color: #fff !important;
    font-size: var(--mobile-font-base) !important;
    font-weight: 700 !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    box-shadow: 0 4px 14px rgba(52,131,250,0.3) !important;
    transition: opacity 0.18s ease !important;
  }
  #pagina-pix .btn-copiar-pix:active { opacity: 0.82 !important; }

  /* Instruções */
  #pagina-pix .pix-instrucoes {
    padding: 14px !important;
    border-radius: 14px !important;
    background: var(--mobile-bg-tertiary) !important;
    border: 1px solid var(--mobile-border) !important;
  }
  #pagina-pix .pix-instrucoes h3 {
    margin: 0 0 8px !important;
    font-size: var(--mobile-font-sm) !important;
    font-weight: 600 !important;
    color: var(--na-text-secondary) !important;
  }
  #pagina-pix .pix-instrucoes ol {
    margin: 0 !important;
    padding-left: 18px !important;
  }
  #pagina-pix .pix-instrucoes li {
    font-size: var(--mobile-font-sm) !important;
    color: var(--na-text-secondary) !important;
    line-height: var(--mobile-line-height) !important;
    margin-bottom: 4px !important;
  }

  /* Botão Já paguei */
  #pagina-pix .pix-acoes {
    margin: 0 !important;
  }
  #pagina-pix .btn-ok-pix {
    width: 100% !important;
    min-height: 50px !important;
    border-radius: 14px !important;
    font-size: var(--mobile-font-base) !important;
    font-weight: 700 !important;
    background: rgba(34,197,94,0.15) !important;
    color: var(--mobile-success) !important;
    border: 1px solid rgba(34,197,94,0.4) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    transition: background 0.2s ease !important;
  }
  #pagina-pix .btn-ok-pix:active {
    background: rgba(34,197,94,0.22) !important;
  }

  /* Status aprovado */
  #pagina-pix .pix-aprovado-icone {
    width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;
    background: rgba(34,197,94,0.15) !important;
    border: 2px solid var(--mobile-success) !important;
    font-size: 28px !important;
    color: var(--mobile-success) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 12px auto 16px !important;
  }
  #pagina-pix .pix-status-aprovado h3 {
    text-align: center !important;
    font-size: var(--mobile-font-lg) !important;
    font-weight: 800 !important;
    color: var(--mobile-success) !important;
    margin: 0 0 6px !important;
  }
  #pagina-pix .pix-status-aprovado p {
    text-align: center !important;
    font-size: var(--mobile-font-sm) !important;
    color: var(--na-text-secondary) !important;
    margin: 0 0 20px !important;
  }

  /* Light mode PIX */
  [data-theme="light"] #pagina-pix .pagina-pix-conteudo {
    background: #ffffff !important;
    border-color: #e5e7eb !important;
  }
  [data-theme="light"] #pagina-pix .topo-pix h2 {
    color: #111827 !important;
  }
  [data-theme="light"] #pagina-pix .btn-fechar-pix {
    background: #f3f4f6 !important;
    border-color: #e5e7eb !important;
    color: #374151 !important;
  }
  [data-theme="light"] #pagina-pix .pix-tempo-box,
  [data-theme="light"] #pagina-pix .pix-codigo-box,
  [data-theme="light"] #pagina-pix .pix-instrucoes {
    background: #f9fafb !important;
    border-color: #e5e7eb !important;
  }
  [data-theme="light"] #pagina-pix #codigo-pix-texto {
    background: #ffffff !important;
    border-color: #d1d5db !important;
    color: #111827 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRODUTO — btn-cart + layout consistente no mobile
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Card flexível: image → body(flex-grow) */
  .produto-card {
    display: flex !important;
    flex-direction: column !important;
  }
  .produto-card-body {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    padding: 6px 2px 4px !important;
  }
  .nome-produto {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size: var(--mobile-font-sm) !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
    margin: 0 0 3px !important;
  }
  .marca-produto {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: var(--mobile-font-xs) !important;
    margin: 0 0 6px !important;
  }
  .produto-card-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    margin-top: auto !important;
  }
  .preco-produto {
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }
  /* Botão carrinho — área mínima de toque 44px */
  .produto-btn-cart {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 10px !important;
    background: var(--na-primary) !important;
    color: #fff !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-shadow: 0 3px 10px rgba(52,131,250,0.28) !important;
    transition: transform 0.15s ease, opacity 0.15s ease !important;
  }
  .produto-btn-cart:active { transform: scale(0.9) !important; opacity: 0.85 !important; }
  .produto-btn-cart svg { width: 17px !important; height: 17px !important; }

  /* Favorito */
  .produto-btn-fav {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  /* Indisponível overlay */
  .produto-card-indisponivel {
    border-radius: 0 0 16px 16px !important;
    font-size: var(--mobile-font-xs) !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
  }

  /* Light mode cards */
  [data-theme="light"] .produto-btn-cart {
    background: var(--mobile-accent) !important;
    box-shadow: 0 3px 10px rgba(52,131,250,0.18) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARRINHO — melhorias mobile
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Vazio */
  .carrinho-vazio .btn-comprar,
  #btn-comprar-carrinho-vazio {
    min-height: 48px !important;
    padding: 0 28px !important;
    border-radius: 14px !important;
    font-size: var(--mobile-font-base) !important;
    font-weight: 700 !important;
  }

  /* Itens */
  .item-carrinho,
  .carrinho-item {
    border-radius: 14px !important;
    padding: 12px !important;
    background: var(--mobile-bg-secondary) !important;
    border: 1px solid var(--mobile-border) !important;
    margin-bottom: 10px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  .item-carrinho .nome-item,
  .carrinho-item .item-nome,
  .nome-produto-carrinho {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    max-width: 100% !important;
    word-break: break-word !important;
  }

  /* Resumo e CTA — sticky acima do menu */
  .carrinho-resumo-card {
    border-radius: 18px !important;
    padding: 16px 14px !important;
    background: var(--mobile-bg-secondary) !important;
    border: 1px solid var(--mobile-border) !important;
    margin: 0 0 12px !important;
  }
  .btn-finalizar-compra {
    width: 100% !important;
    min-height: 52px !important;
    border-radius: 16px !important;
    font-size: var(--mobile-font-md) !important;
    font-weight: 800 !important;
    background: var(--na-primary) !important;
    color: #fff !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 6px 22px rgba(52,131,250,0.35) !important;
    transition: opacity 0.18s ease !important;
  }
  .btn-finalizar-compra:active { opacity: 0.82 !important; }

  /* Texto de overflow em nomes longos */
  .carrinho-resumo-titulo {
    font-size: var(--mobile-font-base) !important;
    font-weight: 700 !important;
    margin: 0 0 12px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MENSAGENS / CHAT — melhorias mobile
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Balões de mensagem */
  .mensagem {
    max-width: 82% !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }
  .mensagem.recebida {
    align-self: flex-start !important;
  }
  .mensagem.propria,
  .mensagem.enviada {
    align-self: flex-end !important;
  }
  .mensagem p,
  .mensagem-balao {
    padding: 10px 14px !important;
    border-radius: 18px !important;
    font-size: var(--mobile-font-sm) !important;
    line-height: var(--mobile-line-height) !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }
  #pagina-mensagens .mensagem.recebida p,
  #pagina-mensagens .mensagem.recebida .mensagem-balao {
    border-radius: 16px !important;
    background: #ffffff !important;
    color: #061126 !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06) !important;
  }
  .mensagem.propria p,
  .mensagem.enviada p,
  .mensagem.propria .mensagem-balao,
  .mensagem.enviada .mensagem-balao {
    border-radius: 18px 4px 18px 18px !important;
    background: var(--na-primary) !important;
    color: #fff !important;
  }

  /* Chat topo: header fixo com avatar e status */
  .chat-topo {
    border-bottom: 1px solid var(--mobile-border) !important;
    padding: 12px 14px !important;
    background: var(--mobile-bg-secondary) !important;
    flex-shrink: 0 !important;
  }
  .chat-topo-info h3 {
    font-size: var(--mobile-font-base) !important;
    font-weight: 700 !important;
    margin: 0 0 2px !important;
    color: var(--mobile-text-primary) !important;
  }
  .chat-status-texto {
    font-size: var(--mobile-font-xs) !important;
    color: var(--mobile-success) !important;
    font-weight: 500 !important;
  }

  /* Botões WhatsApp no chat mobile */
  .chat-mobile-wpp-link {
    font-size: var(--mobile-font-xs) !important;
    padding: 5px 10px !important;
    border-radius: 8px !important;
    min-height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    font-weight: 600 !important;
  }

  /* Input do chat — altura mínima e padding confortável */
  .chat-input {
    min-height: 46px !important;
    height: 46px !important;
    padding: 0 14px !important;
    border-radius: 14px !important;
    font-size: var(--mobile-font-base) !important;
    background: var(--mobile-bg-tertiary) !important;
    border: 1px solid var(--mobile-border) !important;
    color: var(--mobile-text-primary) !important;
    box-sizing: border-box !important;
  }
  .chat-input::placeholder {
    color: var(--mobile-text-muted) !important;
  }
  .btn-enviar {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    border-radius: 14px !important;
    background: var(--na-primary) !important;
    color: #fff !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 3px 10px rgba(52,131,250,0.28) !important;
    transition: opacity 0.15s ease !important;
  }
  .btn-enviar:active { opacity: 0.8 !important; }

  /* WPP section dentro do sidebar de conversas */
  .wpp-secao-sidebar {
    padding: 14px 12px !important;
    border-top: 1px solid var(--mobile-border) !important;
  }
  .wpp-secao-titulo {
    font-size: var(--mobile-font-xs) !important;
    color: var(--mobile-text-muted) !important;
    margin-bottom: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-weight: 600 !important;
  }
  .btn-wpp {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px !important;
    border-radius: 12px !important;
    background: rgba(34,197,94,0.08) !important;
    border: 1px solid rgba(34,197,94,0.22) !important;
    text-decoration: none !important;
    margin-bottom: 8px !important;
    min-height: 52px !important;
    box-sizing: border-box !important;
  }
  .btn-wpp strong {
    font-size: var(--mobile-font-sm) !important;
    color: var(--mobile-text-primary) !important;
    display: block !important;
  }
  .btn-wpp small {
    font-size: var(--mobile-font-xs) !important;
    color: var(--mobile-text-secondary) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   NOTIFICAÇÕES — melhorias mobile
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .notificacoes-container {
    padding: 18px 14px calc(86px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
  }

  /* Título */
  body.nexa-avisos-ativa .titulo-notificacoes h2 {
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.4px !important;
  margin: 0 0 6px !important;
  color: #061126 !important;
}
  body.nexa-avisos-ativa .notif-subtitulo {
  font-size: 13px !important;
  color: rgba(6, 17, 38, 0.62) !important;
  margin: 0 0 18px !important;
  line-height: 1.45 !important;
}

  /* Filtros */
  body.nexa-avisos-ativa .notif-filtros {
  display: flex !important;
  gap: 8px !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  padding: 2px 0 16px !important;
  margin: 0 0 10px !important;
}

body.nexa-avisos-ativa .notif-filtros::-webkit-scrollbar {
  display: none !important;
}
  body.nexa-avisos-ativa .notif-filtro {
  flex: 0 0 auto !important;
  min-height: 38px !important;
  padding: 0 15px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(15, 23, 42, 0.10) !important;
  background: #ffffff !important;
  color: rgba(6, 17, 38, 0.68) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06) !important;
}
  body.nexa-avisos-ativa .notif-filtro.ativo,
body.nexa-avisos-ativa .notif-filtro.active {
  background: linear-gradient(135deg, #3483FA, #2968C8) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow: 0 10px 24px rgba(123, 51, 255, 0.28) !important;
}

  /* Estado vazio de notificações */
  body.nexa-avisos-ativa #estado-vazio-notificacoes {
  width: 100% !important;
  min-height: 360px !important;
  padding: 46px 24px !important;
  margin: 0 !important;
  border-radius: 24px !important;
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.10) !important;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.08) !important;
  color: #061126 !important;
  display: none !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

body.nexa-avisos-ativa #lista-notificacoes:not(:empty) + #estado-vazio-notificacoes {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

  body.nexa-avisos-ativa #estado-vazio-notificacoes h3,
body.nexa-avisos-ativa .estado-vazio h3 {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #061126 !important;
  margin: 0 0 10px !important;
  line-height: 1.25 !important;
}
  body.nexa-avisos-ativa #estado-vazio-notificacoes p,
body.nexa-avisos-ativa .estado-vazio p {
  max-width: 280px !important;
  font-size: 13px !important;
  color: rgba(6, 17, 38, 0.62) !important;
  margin: 0 !important;
  line-height: 1.55 !important;
}
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONFIGURAÇÕES — melhorias mobile (página principal)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .configuracoes-container {
    padding: 18px 14px calc(86px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
  }
  .configuracoes-topo h2 {
    font-size: var(--mobile-font-xl) !important;
    font-weight: 800 !important;
    margin: 0 0 20px !important;
    color: var(--mobile-text-primary) !important;
  }

  /* Grupos */
  .config-group-label {
    font-size: var(--mobile-font-xs) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    color: var(--mobile-text-muted) !important;
    margin: 20px 0 6px 4px !important;
    display: block !important;
  }
  .config-group {
    border-radius: 16px !important;
    overflow: hidden !important;
    border: 1px solid var(--mobile-border) !important;
    background: var(--mobile-bg-secondary) !important;
  }
  .config-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 14px !important;
    min-height: 52px !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    color: var(--mobile-text-primary) !important;
    border-bottom: 1px solid var(--mobile-border) !important;
    background: transparent !important;
    transition: background 0.15s ease !important;
    cursor: pointer !important;
    width: 100% !important;
  }
  .config-item:last-child {
    border-bottom: none !important;
  }
  .config-item:active {
    background: var(--mobile-bg-tertiary) !important;
  }
  .config-item-label {
    flex: 1 1 auto !important;
    font-size: var(--mobile-font-base) !important;
    font-weight: 500 !important;
    color: var(--mobile-text-primary) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .config-item-icon {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 10px !important;
    background: var(--na-primary-dim) !important;
    color: var(--na-primary) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }
  .config-chevron {
    width: 16px !important;
    height: 16px !important;
    color: var(--mobile-text-muted) !important;
    flex-shrink: 0 !important;
  }

  /* Item danger (excluir conta) */
  .item-danger .config-item-label {
    color: var(--mobile-error) !important;
  }
  .item-danger .config-item-icon {
    background: rgba(239,68,68,0.12) !important;
    color: var(--mobile-error) !important;
  }
  .config-group-danger {
    margin-top: 16px !important;
    border-color: rgba(239,68,68,0.22) !important;
  }

  /* Rodapé — botão sair */
  .configuracoes-rodape {
    margin-top: 24px !important;
  }
  .sair-btn {
    width: 100% !important;
    min-height: 50px !important;
    border-radius: 14px !important;
    background: var(--mobile-bg-secondary) !important;
    border: 1px solid var(--mobile-border) !important;
    color: var(--mobile-text-secondary) !important;
    font-size: var(--mobile-font-base) !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    transition: background 0.15s ease !important;
    box-sizing: border-box !important;
  }
  .sair-btn:active {
    background: var(--mobile-bg-tertiary) !important;
  }

  /* Perfil de usuário */
  .usuario-container {
    padding: 18px 14px calc(86px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
  }
  .usuario-topo h2 {
    font-size: var(--mobile-font-xl) !important;
    font-weight: 800 !important;
    margin: 0 0 18px !important;
  }
  .usuario-card {
    padding: 14px !important;
    border-radius: 14px !important;
    background: var(--mobile-bg-secondary) !important;
    border: 1px solid var(--mobile-border) !important;
    margin-bottom: 10px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  .usuario-card strong {
    font-size: var(--mobile-font-xs) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: var(--mobile-text-muted) !important;
    display: block !important;
    margin-bottom: 4px !important;
  }
  .usuario-card p {
    font-size: var(--mobile-font-base) !important;
    color: var(--mobile-text-primary) !important;
    margin: 0 !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    max-width: 100% !important;
  }

  /* Light mode configurações */
  [data-theme="light"] .config-group {
    background: #ffffff !important;
    border-color: #e5e7eb !important;
  }
  [data-theme="light"] .config-item {
    border-bottom-color: #f0f0f5 !important;
    color: #111827 !important;
  }
  [data-theme="light"] .config-item-label {
    color: #111827 !important;
  }
  [data-theme="light"] .config-item:active {
    background: #f9fafb !important;
  }
  [data-theme="light"] .sair-btn {
    background: #ffffff !important;
    border-color: #e5e7eb !important;
    color: #6b7280 !important;
  }
  [data-theme="light"] .usuario-card {
    background: #ffffff !important;
    border-color: #e5e7eb !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CORREÇÕES DE BUGS MOBILE — touch targets, overflow, safe-area
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* 1 — Previne overflow horizontal global */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Exceções: elementos que precisam de largura real */
  img, video, canvas, svg { max-width: none !important; }
  img { max-width: 100% !important; }

  /* 2 — Área de toque mínima 44px para todos os botões interativos */
  button:not(.produto-btn-cart):not(.config-tema-switch) {
    min-height: 44px !important;
    min-width: 44px !important;
  }
  /* Exceções compactas */
  .produto-btn-fav,
  .produto-btn-cart,
  .btn-fechar-localizacao,
  .btn-fechar-pix,
  .topo-icon-btn {
    min-height: 36px !important;
    min-width: 36px !important;
  }

  /* 3 — Inputs com altura mínima confortável */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea {
    min-height: 48px !important;
    font-size: 16px !important; /* previne zoom automático no iOS */
  }
  textarea { min-height: 80px !important; resize: vertical !important; }

  /* 4 — Textos longos nunca esturam o container */
  p, span, h1, h2, h3, h4, h5, h6, a, li, td, th, label {
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    max-width: 100% !important;
  }
  /* E-mail, código PIX, endereço */
  #perfil-email,
  #seguranca-email,
  #codigo-pix-texto,
  .endereco-card-info p,
  .config-alerta-texto {
    overflow-wrap: break-word !important;
    word-break: break-all !important;
    white-space: normal !important;
    max-width: 100% !important;
  }

  /* 5 — Header nunca cobre conteúdo (padding-top na .pagina já existe) */

  /* 6 — Modais/Drawers: nunca maiores que viewport */
  [role="dialog"],
  .modal-termos-overlay > *,
  .modal-confirmar-card,
  .modal-cartao-card {
    max-height: 90dvh !important;
    max-width: calc(100vw - 24px) !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
  }

  /* 7 — Formulários de endereço: campos 100% */
  .campo-formulario input,
  .campo-formulario select,
  .campo-formulario textarea,
  .endereco-field input,
  .security-field input,
  .modal-campo input,
  .modal-campo select,
  .grupo-campo input,
  .grupo-campo select,
  .grupo-campo textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 48px !important;
    padding: 0 14px !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
  }

  /* 8 — Labels acima dos inputs */
  .campo-formulario label,
  .endereco-field label,
  .grupo-campo label,
  .modal-campo label {
    display: block !important;
    margin-bottom: 6px !important;
    font-size: var(--mobile-font-sm) !important;
    font-weight: 600 !important;
    color: var(--mobile-text-secondary) !important;
  }

  /* 9 — Página de pagamento: inputs do cartão */
  #pagina-pagamento .grupo-campo input {
    width: 100% !important;
    min-height: 48px !important;
    font-size: 16px !important;
  }
  .linha-dupla {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  .btn-confirmar-pagamento {
    width: 100% !important;
    min-height: 52px !important;
    border-radius: 16px !important;
    font-size: var(--mobile-font-md) !important;
    font-weight: 800 !important;
    margin-top: 8px !important;
  }

  /* 10 — Tela de localização: mobile compact */
  @media (max-width: 767px) {
    #pagina-localizacao .pagina-localizacao-conteudo {
      padding: 18px 16px 22px !important;
      border-radius: 20px !important;
      max-width: 100% !important;
    }
    #pagina-localizacao .topo-localizacao h2 {
      font-size: var(--mobile-font-lg) !important;
    }
    #pagina-localizacao #mapa-localizacao {
      height: 52vw !important;
      min-height: 220px !important;
      max-height: 320px !important;
    }
    #pagina-localizacao .resumo-localizacao {
      padding: 12px 0 !important;
      font-size: var(--mobile-font-sm) !important;
    }
    #pagina-localizacao .resumo-localizacao p {
      margin: 0 0 4px !important;
      overflow-wrap: break-word !important;
      word-break: break-word !important;
    }
    #pagina-localizacao .btn-confirmar-localizacao,
    #pagina-localizacao .btn-geo-atual {
      width: 100% !important;
      min-height: 50px !important;
      border-radius: 14px !important;
      font-size: var(--mobile-font-base) !important;
      font-weight: 700 !important;
    }
  }

  /* 11 — Splash / login / cadastro: inputs 16px mínimo (evita zoom iOS) */
  #cadastro-inicial input {
    font-size: 16px !important;
    min-height: 52px !important;
    border-radius: 12px !important;
  }
  .btn-cadastro-continuar {
    width: 100% !important;
    min-height: 52px !important;
    border-radius: 14px !important;
    font-size: var(--mobile-font-md) !important;
    font-weight: 800 !important;
  }

  /* 12 — Breakpoints específicos: 360px */
  @media (max-width: 370px) {
    .produtos,
    #grade-produtos,
    #grade-recomendados {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 8px !important;
      padding: 0 8px 20px !important;
    }
    .produto-card {
      min-height: 210px !important;
    }
    .nome-produto {
      font-size: 11px !important;
    }
    .preco-produto {
      font-size: 13px !important;
    }
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ESTADOS VAZIOS — profissionais e com ação
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .favoritos-vazio,
  .carrinho-vazio,
  .estado-vazio,
  #estado-vazio-notificacoes {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 22px 18px 18px !important;
    min-height: auto !important;
    box-sizing: border-box !important;
  }
  /* Ícone decorativo via ::before (se não existir) */
  .carrinho-vazio::before {
    content: "" !important;
    display: block !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    background: var(--na-primary-dim) !important;
    margin-bottom: 10px !important;
    flex-shrink: 0 !important;
  }
  .carrinho-vazio h3,
  .favoritos-vazio h3,
  .estado-vazio h3 {
    font-size: var(--mobile-font-md) !important;
    font-weight: 700 !important;
    color: var(--mobile-text-primary) !important;
    margin: 0 0 8px !important;
    line-height: 1.3 !important;
  }
  .carrinho-vazio p,
  .favoritos-vazio p,
  .estado-vazio p {
    font-size: var(--mobile-font-sm) !important;
    color: var(--mobile-text-secondary) !important;
    margin: 0 0 20px !important;
    line-height: var(--mobile-line-height) !important;
    max-width: 260px !important;
  }
}

/* Notificações: o estado vazio é controlado pelo JS, inclusive no mobile. */
#pagina-notificacoes.pagina.ativa.notificacoes-com-itens #estado-vazio-notificacoes,
#pagina-notificacoes.pagina.ativa #estado-vazio-notificacoes.notificacoes-estado-oculto {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE — Checkout: polimento visual profissional
   1) Topbar fixa com título + botão X integrado (via overlay::after)
   2) Estado vazio do endereço: ícone 📍 + pill "Toque para selecionar"
   3) Botão finalizar: pressed state elegante (scale) em vez de opacity
   4) Cards das seções: padding/gap uniformes, sem opacity nos botões
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── 1. Faixa de topbar fixa via ::after no overlay ──────────────────── */
  #pagina-compra.pagina.ativa .compra-overlay::after {
    content: "Finalizar Compra" !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 56px !important;
    background: #080d18 !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
    z-index: 99998 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: rgba(255,255,255,0.90) !important;
    -webkit-text-fill-color: rgba(255,255,255,0.90) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    letter-spacing: 0.01em !important;
    pointer-events: none !important;
  }

  /* Botão fechar: circular, alinhado dentro da topbar */
  #pagina-compra.pagina.ativa .btn-fechar-compra {
    position: fixed !important;
    top: 8px !important;
    right: 14px !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    color: rgba(255,255,255,0.88) !important;
    -webkit-text-fill-color: rgba(255,255,255,0.88) !important;
    font-size: 20px !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 99999 !important;
    cursor: pointer !important;
    transition: background 0.15s ease, transform 0.12s ease !important;
  }

  #pagina-compra.pagina.ativa .btn-fechar-compra:active {
    background: rgba(255,255,255,0.15) !important;
    transform: scale(0.90) !important;
    opacity: 1 !important;
  }

  /* Padding-top do container para não ficar sob a topbar */
  #pagina-compra.pagina.ativa .compra-container {
    padding-top: 72px !important;
  }

  /* ── 2. Cards das seções: padding e gap uniformes ────────────────────── */
  #pagina-compra.pagina.ativa .compra-secoes-alinhadas {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: 0 !important;
    padding: 0 !important;
  }

  #pagina-compra.pagina.ativa .compra-resumo-itens,
  #pagina-compra.pagina.ativa .endereco-box,
  #pagina-compra.pagina.ativa .frete-box-compra,
  #pagina-compra.pagina.ativa .compra-resumo-final {
    padding: 16px !important;
    border-radius: 16px !important;
    margin: 0 !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
  }

  /* ── 3. Estado vazio do endereço: ícone + pill CTA ───────────────────── */
  #pagina-compra.pagina.ativa #card-endereco-compra {
    cursor: pointer !important;
    transition: background 0.18s ease, border-color 0.18s ease !important;
  }

  #pagina-compra.pagina.ativa #card-endereco-compra:active {
    background: rgba(52,131,250,0.08) !important;
    border-color: rgba(52,131,250,0.28) !important;
  }

  /* CORRIGIDO: removido display:flex!important para não bloquear JS */
  #pagina-compra.pagina.ativa #endereco-vazio {
    text-align: center !important;
  }
  #pagina-compra.pagina.ativa #endereco-vazio::before { content: none !important; display: none !important; }
  #pagina-compra.pagina.ativa #endereco-vazio::after  { content: none !important; display: none !important; }

  /* ── 4. Botão finalizar: scale pressed, sem opacity ─────────────────── */
  #pagina-compra.pagina.ativa .btn-finalizar-compra {
    transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.15s ease !important;
  }

  #pagina-compra.pagina.ativa .btn-finalizar-compra:active {
    transform: scale(0.97) !important;
    box-shadow: 0 3px 14px rgba(52,131,250,0.28) !important;
    opacity: 1 !important;
  }

  /* ── Light mode: topbar e close button ───────────────────────────────── */
  [data-theme="light"] #pagina-compra.pagina.ativa .compra-overlay::after {
    background: rgba(245,244,255,0.98) !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    border-bottom-color: rgba(52,131,250,0.10) !important;
  }

  [data-theme="light"] #pagina-compra.pagina.ativa .btn-fechar-compra {
    background: rgba(52,131,250,0.08) !important;
    border-color: rgba(52,131,250,0.18) !important;
    color: #374151 !important;
    -webkit-text-fill-color: #374151 !important;
  }

  [data-theme="light"] #pagina-compra.pagina.ativa #endereco-vazio p {
    color: #6b7280 !important;
    -webkit-text-fill-color: #6b7280 !important;
  }

  [data-theme="light"] #pagina-compra.pagina.ativa #card-endereco-compra:active {
    background: rgba(52,131,250,0.06) !important;
    border-color: rgba(52,131,250,0.20) !important;
  }

}

#pagina-notificacoes.pagina.ativa.notificacoes-vazias #estado-vazio-notificacoes,
#pagina-notificacoes.pagina.ativa #estado-vazio-notificacoes.notificacoes-estado-visivel {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Ajuste visual solicitado: topo claro, vitrine cinza e produtos brancos */
#mobile-promos {
  /* display controlado pelo atributo hidden — não forçar none aqui */
}

@media (max-width: 767px) {
  .topo,
  [data-theme="light"] .topo {
    background: linear-gradient(180deg, #bfdbfe 0%, #93c5fd 100%) !important;
    border-bottom: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .topo::before,
  [data-theme="light"] .topo::before {
    background: none !important;
    -webkit-text-fill-color: #1e3a8a !important;
    color: #1e3a8a !important;
    font-size: 20px !important;
  }

  .busca-input-wrap,
  [data-theme="light"] .busca-input-wrap {
    background: rgba(255,255,255,0.88) !important;
    border-color: rgba(255,255,255,0.6) !important;
    box-shadow: 0 1px 4px rgba(30,58,138,0.12) !important;
    height: 40px !important;
    border-radius: 10px !important;
  }

  .busca-input-wrap input,
  [data-theme="light"] .busca-input-wrap input {
    color: #0f172a !important;
  }

  .busca-input-wrap input::placeholder,
  [data-theme="light"] .busca-input-wrap input::placeholder,
  .busca-input-wrap svg,
  [data-theme="light"] .busca-input-wrap svg,
  .limpar-busca,
  [data-theme="light"] .limpar-busca {
    color: #64748b !important;
  }

  #btn-tema,
  [data-theme="light"] #btn-tema {
    display: none !important;
  }

  #btn-perfil-mobile,
  [data-theme="light"] #btn-perfil-mobile {
    display: flex !important;
    width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    min-width: 34px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    border: 1px solid #60a5fa !important;
    color: #1d4ed8 !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.16) !important;
  }

  #btn-perfil-mobile:active {
    transform: scale(0.94) !important;
  }

  .topo-profile-initial {
    color: #1d4ed8 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
  }

  .topo-profile-img {
    display: none !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: inherit !important;
    object-fit: cover !important;
  }

  #btn-perfil-mobile.has-photo .topo-profile-img {
    display: block !important;
  }

  #btn-perfil-mobile.has-photo .topo-profile-initial {
    display: none !important;
  }

  #config-aparencia-item {
    display: none !important;
  }

  .config-perfil-mobile-card {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 0 0 14px !important;
    padding: 14px !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    border: 1px solid #dbeafe !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08) !important;
  }

  .config-perfil-foto-btn {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    border: 2px solid #60a5fa !important;
    background: #dbeafe !important;
    color: #1d4ed8 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    cursor: pointer !important;
  }

  .config-perfil-inicial {
    color: #1d4ed8 !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }

  .config-perfil-img {
    display: none !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: inherit !important;
    object-fit: cover !important;
  }

  .config-perfil-foto-btn.has-photo .config-perfil-img {
    display: block !important;
  }

  .config-perfil-foto-btn.has-photo .config-perfil-inicial {
    display: none !important;
  }

  .config-perfil-mobile-info {
    min-width: 0 !important;
    display: flex !important;
    flex: 1 !important;
    flex-direction: column !important;
    gap: 4px !important;
  }

  .config-perfil-mobile-info strong,
  .config-perfil-mobile-info span {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .config-perfil-mobile-info strong {
    color: #0f172a !important;
    font-size: 15px !important;
    font-weight: 800 !important;
  }

  .config-perfil-mobile-info span {
    color: #64748b !important;
    font-size: 12px !important;
  }

  .config-perfil-foto-texto {
    width: fit-content !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #2563eb !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
  }

  #pagina-home,
  [data-theme="light"] #pagina-home {
    background: #f1f5f9 !important;
  }

  /* Grade de produtos: pequeno padding-top para separar do banner */
  #pagina-home #grade-produtos,
  [data-theme="light"] #pagina-home #grade-produtos {
    padding-top: 10px !important;
  }

  #pagina-home .produto-card,
  [data-theme="light"] #pagina-home .produto-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(15,23,42,0.07) !important;
    border-radius: 14px !important;
    min-height: 220px !important;
  }

  #pagina-home .produto-card:active,
  [data-theme="light"] #pagina-home .produto-card:active {
    box-shadow: 0 1px 4px rgba(15,23,42,0.06) !important;
    transform: scale(0.98) !important;
  }

  #pagina-home .produto-img-wrap,
  [data-theme="light"] #pagina-home .produto-img-wrap {
    min-height: 110px !important;
    background: #f8fafc !important;
    border-radius: 10px !important;
    margin-bottom: 8px !important;
  }

  #pagina-home .imagem-produto,
  [data-theme="light"] #pagina-home .imagem-produto {
    height: 104px !important;
    object-fit: contain !important;
  }

  #pagina-home .produto-img-halo,
  [data-theme="light"] #pagina-home .produto-img-halo {
    display: none !important;
  }

  #pagina-home .nome-produto,
  [data-theme="light"] #pagina-home .nome-produto {
    color: #0f172a !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
  }

  #pagina-home .preco-produto,
  [data-theme="light"] #pagina-home .preco-produto {
    color: #1d4ed8 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
  }

  #pagina-home .marca-produto,
  [data-theme="light"] #pagina-home .marca-produto {
    color: #64748b !important;
    font-size: 10px !important;
  }

  #pagina-home .produto-btn-fav,
  [data-theme="light"] #pagina-home .produto-btn-fav {
    display: none !important;
  }

  #pagina-home .produto-btn-cart,
  [data-theme="light"] #pagina-home .produto-btn-cart {
    background: #2563eb !important;
    border-color: #2563eb !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
  }

  /* Banner no tema claro: fundo que conecta com o gradiente do header */
  #pagina-home .bc-wrapper,
  [data-theme="light"] .bc-wrapper {
    background: #93c5fd !important;
  }

  /* Sem imagem: tag e CTA no tema claro */
  #pagina-home .bc-slide:not(.bc-slide--has-img) .bc-tag,
  [data-theme="light"] .bc-slide:not(.bc-slide--has-img) .bc-tag {
    background: rgba(30,58,138,0.12) !important;
    border-color: rgba(30,58,138,0.2) !important;
    color: #1e3a8a !important;
  }

  #pagina-home .bc-slide:not(.bc-slide--has-img) .bc-cta,
  [data-theme="light"] .bc-slide:not(.bc-slide--has-img) .bc-cta {
    background: rgba(30,58,138,0.12) !important;
    border-color: rgba(30,58,138,0.2) !important;
    color: #1e3a8a !important;
  }

  /* antigos .mobile-promo-* removidos — substituídos pelo carrossel .bc-* */
}

/* ═══════════════════════════════════════════════════════════════════════════
   RASTREAMENTO DE PEDIDO — mobile
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Container principal */
  #pagina-acompanhar-pedido,
  #pagina-meus-pedidos {
    background: var(--mobile-bg-primary) !important;
    color: var(--mobile-text-primary) !important;
    min-height: 100vh !important;
    overflow-y: auto !important;
  }

  .track-container,
  .meus-pedidos-container {
    padding: 0 0 80px 0 !important;
    max-width: 600px !important;
    margin: 0 auto !important;
  }

  /* Topo com voltar */
  .track-topo {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 16px 10px !important;
    background: var(--mobile-bg-secondary) !important;
    border-bottom: 1px solid var(--mobile-border) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
  }

  .track-titulo {
    flex: 1 !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: var(--mobile-text-primary) !important;
    margin: 0 !important;
    letter-spacing: -0.01em !important;
  }

  .track-topo-end {
    width: 36px !important;
  }

  .track-voltar {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: var(--mobile-surface) !important;
    border: 1px solid var(--mobile-border) !important;
    color: var(--mobile-text-primary) !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    transition: background 0.15s !important;
  }
  .track-voltar:active { background: var(--mobile-border) !important; }

  /* Loading skeleton */
  .track-loading {
    display: none;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 20px 16px !important;
  }

  .track-skeleton {
    background: linear-gradient(90deg, var(--mobile-surface) 25%, var(--mobile-border) 50%, var(--mobile-surface) 75%) !important;
    background-size: 200% 100% !important;
    animation: skeletonShimmer 1.4s ease-in-out infinite !important;
    border-radius: 12px !important;
    height: 56px !important;
  }
  .track-skeleton-sm { height: 36px !important; }
  .track-skeleton-lg { height: 120px !important; }

  @keyframes skeletonShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  /* Status card */
  .track-status-card {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin: 16px 16px 0 !important;
    padding: 16px !important;
    border-radius: 18px !important;
    background: var(--mobile-surface) !important;
    border: 1px solid var(--mobile-border) !important;
    box-shadow: var(--mobile-surface-shadow) !important;
  }

  .track-status-icon {
    font-size: 32px !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
  }

  .track-status-label {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--mobile-accent) !important;
    line-height: 1.2 !important;
  }

  .track-order-id {
    font-size: 12px !important;
    color: var(--mobile-text-secondary) !important;
    margin-top: 3px !important;
    font-family: monospace !important;
    letter-spacing: 0.05em !important;
  }

  /* Cor por status */
  .track-status-card[data-status="delivered"] { border-color: #22c55e !important; }
  .track-status-card[data-status="delivered"] .track-status-label { color: #22c55e !important; }
  .track-status-card[data-status="cancelled"],
  .track-status-card[data-status="failed"] { border-color: #ef4444 !important; }
  .track-status-card[data-status="cancelled"] .track-status-label,
  .track-status-card[data-status="failed"] .track-status-label { color: #ef4444 !important; }
  .track-status-card[data-status="out_for_delivery"],
  .track-status-card[data-status="in_transit"] { border-color: #f59e0b !important; }
  .track-status-card[data-status="out_for_delivery"] .track-status-label,
  .track-status-card[data-status="in_transit"] .track-status-label { color: #f59e0b !important; }

  /* Info card */
  .track-info-card {
    margin: 12px 16px 0 !important;
    padding: 0 !important;
    border-radius: 16px !important;
    background: var(--mobile-surface) !important;
    border: 1px solid var(--mobile-border) !important;
    overflow: hidden !important;
  }

  .track-info-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 11px 16px !important;
    border-bottom: 1px solid var(--mobile-border) !important;
  }
  .track-info-row:last-child { border-bottom: none !important; }

  .track-info-key {
    font-size: 12px !important;
    color: var(--mobile-text-secondary) !important;
    font-weight: 500 !important;
    flex-shrink: 0 !important;
    width: 110px !important;
  }

  .track-info-val {
    font-size: 13px !important;
    color: var(--mobile-text-primary) !important;
    font-weight: 600 !important;
    text-align: right !important;
    flex: 1 !important;
    word-break: break-word !important;
  }

  .track-valor {
    color: var(--mobile-accent) !important;
    font-weight: 800 !important;
  }

  .track-previsao {
    color: #22c55e !important;
  }

  .track-endereco-val {
    font-size: 11.5px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
  }

  /* Seção de título */
  .track-section-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--mobile-text-secondary) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    margin: 0 0 10px 0 !important;
  }

  .track-timeline-section {
    margin: 16px 16px 0 !important;
  }

  /* Timeline */
  .track-timeline {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  .track-timeline-vazio {
    color: var(--mobile-text-secondary) !important;
    font-size: 13px !important;
    text-align: center !important;
    padding: 20px 0 !important;
  }

  .track-event {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    position: relative !important;
    padding-bottom: 16px !important;
  }

  .track-event:last-child { padding-bottom: 0 !important; }

  .track-event-icone {
    font-size: 22px !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: var(--mobile-surface) !important;
    border: 2px solid var(--mobile-border) !important;
    z-index: 1 !important;
    position: relative !important;
  }

  .track-event-atual .track-event-icone {
    border-color: var(--mobile-accent) !important;
    background: rgba(151,25,182,0.12) !important;
    box-shadow: 0 0 0 3px rgba(151,25,182,0.15) !important;
  }

  /* Linha vertical conectando eventos */
  .track-event:not(:last-child)::before {
    content: "" !important;
    position: absolute !important;
    left: 17px !important;
    top: 38px !important;
    bottom: 0 !important;
    width: 2px !important;
    background: var(--mobile-border) !important;
  }

  .track-event-linha { display: none !important; }

  .track-event-info {
    flex: 1 !important;
    padding-top: 6px !important;
  }

  .track-event-status {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--mobile-text-primary) !important;
  }

  .track-event-atual .track-event-status {
    color: var(--mobile-accent) !important;
  }

  .track-event-desc {
    font-size: 12px !important;
    color: var(--mobile-text-secondary) !important;
    margin-top: 3px !important;
    line-height: 1.4 !important;
  }

  .track-event-cidade {
    font-size: 11.5px !important;
    color: var(--mobile-text-muted, var(--mobile-text-secondary)) !important;
    margin-top: 2px !important;
  }

  .track-event-data {
    font-size: 11px !important;
    color: var(--mobile-text-secondary) !important;
    margin-top: 4px !important;
    opacity: 0.7 !important;
  }

  /* Botões de ação */
  .track-acoes {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin: 16px 16px 0 !important;
  }

  .track-btn-atendimento,
  .track-btn-mapa,
  .track-btn-avaliar {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 48px !important;
    padding: 0 20px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    border: none !important;
    cursor: pointer !important;
    transition: opacity 0.15s, transform 0.1s !important;
  }
  .track-btn-atendimento:active,
  .track-btn-mapa:active,
  .track-btn-avaliar:active { opacity: 0.8 !important; transform: scale(0.98) !important; }

  .track-btn-atendimento {
    background: var(--mobile-surface) !important;
    border: 1.5px solid var(--mobile-border) !important;
    color: var(--mobile-text-primary) !important;
  }

  .track-btn-mapa {
    background: var(--mobile-surface) !important;
    border: 1.5px solid var(--mobile-border) !important;
    color: var(--mobile-text-primary) !important;
  }

  .track-btn-avaliar {
    background: linear-gradient(135deg, #3483FA, #2968C8) !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(151,25,182,0.35) !important;
  }

  /* Estado de erro */
  .track-error {
    display: none;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 40px 24px !important;
    text-align: center !important;
    color: var(--mobile-text-secondary) !important;
  }
  .track-error svg { opacity: 0.4 !important; }
  .track-error p { font-size: 15px !important; color: var(--mobile-text-primary) !important; font-weight: 600 !important; }

  /* Busca de pedido */
  .meus-pedidos-busca {
    margin: 16px 16px 0 !important;
  }

  .track-busca-row {
    display: flex !important;
    gap: 8px !important;
    margin-bottom: 6px !important;
  }

  .track-busca-input {
    flex: 1 !important;
    min-height: 44px !important;
    padding: 0 14px !important;
    border-radius: 12px !important;
    border: 1.5px solid var(--mobile-border) !important;
    background: var(--mobile-surface) !important;
    color: var(--mobile-text-primary) !important;
    font-size: 14px !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }
  .track-busca-input:focus { border-color: var(--mobile-accent) !important; }
  .track-busca-input::placeholder { color: var(--mobile-text-secondary) !important; }

  .track-busca-btn {
    flex-shrink: 0 !important;
    min-height: 44px !important;
    padding: 0 18px !important;
    border-radius: 12px !important;
    background: var(--mobile-accent) !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    border: none !important;
    cursor: pointer !important;
    transition: opacity 0.15s !important;
  }
  .track-busca-btn:active { opacity: 0.8 !important; }

  .track-busca-hint {
    font-size: 11.5px !important;
    color: var(--mobile-text-secondary) !important;
    margin: 0 !important;
    line-height: 1.4 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PONTOS NEXA — mobile
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .pontos-card {
    margin: 16px 16px 0 !important;
    padding: 16px !important;
    border-radius: 18px !important;
    background: var(--mobile-surface) !important;
    border: 1px solid var(--mobile-border) !important;
    box-shadow: var(--mobile-surface-shadow) !important;
  }

  .pontos-card-topo {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 14px !important;
  }

  .pontos-icone {
    font-size: 28px !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
  }

  .pontos-info {
    flex: 1 !important;
  }

  .pontos-saldo-label {
    font-size: 12px !important;
    color: var(--mobile-text-secondary) !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
  }

  .pontos-saldo {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: var(--mobile-accent) !important;
    line-height: 1.1 !important;
  }

  .frete-badge {
    display: none;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 12px !important;
    border-radius: 20px !important;
    background: rgba(34,197,94,0.15) !important;
    border: 1px solid rgba(34,197,94,0.3) !important;
    color: #22c55e !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    flex-shrink: 0 !important;
  }



  .pontos-progresso-labels {
    display: flex !important;
    justify-content: space-between !important;
    margin-bottom: 6px !important;
    font-size: 11.5px !important;
    color: var(--mobile-text-secondary) !important;
    font-weight: 500 !important;
  }

  .pontos-barra-bg {
    height: 8px !important;
    border-radius: 99px !important;
    background: var(--mobile-border) !important;
    overflow: hidden !important;
  }

  .pontos-barra-fill {
    height: 100% !important;
    border-radius: 99px !important;
    background: linear-gradient(135deg, #3483FA, #2968C8) !important;
    transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  }

  .pontos-faltam {
    font-size: 11.5px !important;
    color: var(--mobile-text-secondary) !important;
    margin: 6px 0 0 !important;
    text-align: right !important;
  }

  /* Extrato */
  .pontos-extrato {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: 4px !important;
  }

  .pontos-extrato-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    background: var(--mobile-surface) !important;
    border: 1px solid var(--mobile-border) !important;
  }

  .pontos-extrato-desc {
    font-size: 13px !important;
    color: var(--mobile-text-primary) !important;
    font-weight: 500 !important;
    flex: 1 !important;
    line-height: 1.3 !important;
  }

  .pontos-extrato-direita {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 2px !important;
    flex-shrink: 0 !important;
  }

  .pontos-extrato-pts {
    font-size: 14px !important;
    font-weight: 800 !important;
  }
  .pontos-extrato-pts.positivo { color: #22c55e !important; }
  .pontos-extrato-pts.negativo { color: #ef4444 !important; }

  .pontos-extrato-data {
    font-size: 10.5px !important;
    color: var(--mobile-text-secondary) !important;
    opacity: 0.7 !important;
  }

  #pontos-extrato-wrap {
    margin: 16px 16px 0 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODAL DE AVALIAÇÃO — mobile + overlay global
   ═══════════════════════════════════════════════════════════════════════════ */
.modal-avaliar-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2000 !important;
  background: rgba(0,0,0,0.6) !important;
  display: none;
  align-items: flex-end !important;
  justify-content: center !important;
  padding: 0 !important;
}

@media (min-width: 768px) {
  .modal-avaliar-overlay {
    align-items: center !important;
    padding: 24px !important;
  }
}

.modal-avaliar-card {
  width: 100% !important;
  max-width: 480px !important;
  background: var(--mobile-bg-secondary, #1a1a2e) !important;
  border-radius: 24px 24px 0 0 !important;
  overflow: hidden !important;
  box-shadow: 0 -8px 40px rgba(0,0,0,0.4) !important;
  animation: slideUpModal 0.3s cubic-bezier(0.34,1.56,0.64,1) !important;
}

@media (min-width: 768px) {
  .modal-avaliar-card {
    border-radius: 24px !important;
    animation: fadeInModal 0.25s ease !important;
  }
}

@keyframes slideUpModal {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

@keyframes fadeInModal {
  from { transform: scale(0.94); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

.modal-avaliar-topo {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 20px 12px !important;
  border-bottom: 1px solid var(--mobile-border, rgba(255,255,255,0.08)) !important;
}

.modal-avaliar-topo h3 {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--mobile-text-primary, #fff) !important;
  margin: 0 !important;
}

.modal-avaliar-fechar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  border: none !important;
  background: var(--mobile-surface, rgba(255,255,255,0.06)) !important;
  color: var(--mobile-text-secondary, rgba(255,255,255,0.6)) !important;
  cursor: pointer !important;
  transition: background 0.15s !important;
}
.modal-avaliar-fechar:active { background: var(--mobile-border, rgba(255,255,255,0.12)) !important; }

.modal-avaliar-body {
  padding: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

.avaliar-subtitle {
  font-size: 14px !important;
  color: var(--mobile-text-secondary, rgba(255,255,255,0.6)) !important;
  margin: 0 !important;
  text-align: center !important;
}

/* Estrelas */
.avaliar-estrelas {
  display: flex !important;
  justify-content: center !important;
  gap: 10px !important;
}

.estrela-btn {
  font-size: 34px !important;
  line-height: 1 !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  color: var(--mobile-border, rgba(255,255,255,0.15)) !important;
  transition: color 0.15s, transform 0.1s !important;
  padding: 0 !important;
  -webkit-tap-highlight-color: transparent !important;
}

.estrela-btn.ativa {
  color: #f59e0b !important;
  transform: scale(1.1) !important;
}

.estrela-btn:active { transform: scale(0.92) !important; }

/* Textarea */
.avaliar-textarea {
  width: 100% !important;
  min-height: 90px !important;
  padding: 12px !important;
  border-radius: 12px !important;
  border: 1.5px solid var(--mobile-border, rgba(255,255,255,0.1)) !important;
  background: var(--mobile-surface, rgba(255,255,255,0.04)) !important;
  color: var(--mobile-text-primary, #fff) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  resize: none !important;
  outline: none !important;
  box-sizing: border-box !important;
  font-family: inherit !important;
}
.avaliar-textarea:focus { border-color: var(--mobile-accent, #3483FA) !important; }
.avaliar-textarea::placeholder { color: var(--mobile-text-secondary, rgba(255,255,255,0.4)) !important; }

/* Info pontos */
.avaliar-pontos-info {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 13px !important;
  color: #f59e0b !important;
  font-weight: 600 !important;
  justify-content: center !important;
  background: rgba(245,158,11,0.08) !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
}

.avaliar-pontos-info strong {
  color: #f59e0b !important;
  font-size: 15px !important;
}

/* Mensagens */
.avaliar-erro {
  font-size: 13px !important;
  color: #ef4444 !important;
  background: rgba(239,68,68,0.1) !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  line-height: 1.4 !important;
}

.avaliar-sucesso {
  font-size: 13px !important;
  color: #22c55e !important;
  background: rgba(34,197,94,0.1) !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  line-height: 1.4 !important;
}

/* Botão enviar */
.avaliar-btn-enviar {
  width: 100% !important;
  min-height: 50px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #3483FA, #2968C8) !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border: none !important;
  cursor: pointer !important;
  transition: opacity 0.15s, transform 0.1s !important;
  box-shadow: 0 4px 16px rgba(151,25,182,0.35) !important;
}
.avaliar-btn-enviar:active { opacity: 0.85 !important; transform: scale(0.98) !important; }
.avaliar-btn-enviar:disabled { opacity: 0.5 !important; cursor: not-allowed !important; }

/* ── Tema claro — rastreamento, pontos e modal avaliação ── */
@media (max-width: 767px) {
  [data-theme="light"] .track-container,
  [data-theme="light"] .meus-pedidos-container,
  [data-theme="light"] #pagina-acompanhar-pedido,
  [data-theme="light"] #pagina-meus-pedidos {
    background: var(--mobile-bg-primary) !important;
    color: var(--mobile-text-primary) !important;
  }

  [data-theme="light"] .track-topo {
    background: var(--mobile-bg-secondary) !important;
    border-color: var(--mobile-border) !important;
  }

  [data-theme="light"] .track-titulo,
  [data-theme="light"] .track-event-status,
  [data-theme="light"] .track-info-val,
  [data-theme="light"] .track-status-label,
  [data-theme="light"] .pontos-saldo-label,
  [data-theme="light"] .pontos-extrato-desc,
  [data-theme="light"] .modal-avaliar-topo h3 {
    color: var(--mobile-text-primary) !important;
  }

  [data-theme="light"] .track-info-key,
  [data-theme="light"] .track-event-desc,
  [data-theme="light"] .track-event-data,
  [data-theme="light"] .track-event-cidade,
  [data-theme="light"] .track-order-id,
  [data-theme="light"] .pontos-progresso-labels,
  [data-theme="light"] .pontos-faltam,
  [data-theme="light"] .avaliar-subtitle {
    color: var(--mobile-text-secondary) !important;
  }

  [data-theme="light"] .track-status-card,
  [data-theme="light"] .track-info-card,
  [data-theme="light"] .pontos-card,
  [data-theme="light"] .pontos-extrato-item {
    background: var(--mobile-surface) !important;
    border-color: var(--mobile-border) !important;
  }

  [data-theme="light"] .track-event-icone {
    background: var(--mobile-surface) !important;
    border-color: var(--mobile-border) !important;
  }

  [data-theme="light"] .track-event:not(:last-child)::before {
    background: var(--mobile-border) !important;
  }

  [data-theme="light"] .track-btn-atendimento,
  [data-theme="light"] .track-btn-mapa {
    background: var(--mobile-surface) !important;
    border-color: var(--mobile-border) !important;
    color: var(--mobile-text-primary) !important;
  }

  [data-theme="light"] .track-busca-input {
    background: var(--mobile-surface) !important;
    border-color: var(--mobile-border) !important;
    color: var(--mobile-text-primary) !important;
  }

  [data-theme="light"] .pontos-barra-bg {
    background: var(--mobile-border) !important;
  }

  [data-theme="light"] .modal-avaliar-card {
    background: var(--mobile-bg-secondary) !important;
  }

  [data-theme="light"] .modal-avaliar-topo {
    border-color: var(--mobile-border) !important;
  }

  [data-theme="light"] .modal-avaliar-fechar {
    background: var(--mobile-surface) !important;
    color: var(--mobile-text-secondary) !important;
  }

  [data-theme="light"] .avaliar-textarea {
    background: var(--mobile-surface) !important;
    border-color: var(--mobile-border) !important;
    color: var(--mobile-text-primary) !important;
  }

  [data-theme="light"] .estrela-btn {
    color: var(--mobile-border) !important;
  }

  [data-theme="light"] .track-voltar {
    background: var(--mobile-surface) !important;
    border-color: var(--mobile-border) !important;
    color: var(--mobile-text-primary) !important;
  }
}

/* Configuracoes: tema claro igual as paginas principais no mobile */
@media (max-width: 767px) {
  body.nexa-configuracoes-ativa {
    background: #f3f4f6 !important;
  }

  body.nexa-configuracoes-ativa #pagina-configuracoes.pagina.ativa,
  body.nexa-configuracoes-ativa #pagina-config-conta-seguranca.pagina.ativa,
  body.nexa-configuracoes-ativa #pagina-config-meus-enderecos.pagina.ativa,
  body.nexa-configuracoes-ativa #pagina-config-contas-cartoes.pagina.ativa,
  body.nexa-configuracoes-ativa #pagina-config-notificacoes.pagina.ativa,
  body.nexa-configuracoes-ativa #pagina-config-idioma.pagina.ativa,
  body.nexa-configuracoes-ativa #pagina-config-avaliar.pagina.ativa,
  body.nexa-configuracoes-ativa #pagina-config-sobre.pagina.ativa,
  body.nexa-configuracoes-ativa #pagina-config-excluir-conta.pagina.ativa,
  body.nexa-configuracoes-ativa #pagina-config-form-endereco.pagina.ativa {
    background: #f3f4f6 !important;
    color: #0f172a !important;
  }

  body.nexa-configuracoes-ativa .configuracoes-container,
  body.nexa-configuracoes-ativa .config-subpagina-container {
    color: #0f172a !important;
  }

  body.nexa-configuracoes-ativa .configuracoes-topo h2,
  body.nexa-configuracoes-ativa .config-subtopo h2 {
    color: #0f172a !important;
  }

  body.nexa-configuracoes-ativa .config-subtopo {
    background: #f3f4f6 !important;
    border-bottom-color: #e5e7eb !important;
  }

  body.nexa-configuracoes-ativa .config-group-label {
    color: #64748b !important;
  }

  body.nexa-configuracoes-ativa .config-group,
  body.nexa-configuracoes-ativa .config-perfil-mobile-card,
  body.nexa-configuracoes-ativa .config-subcard,
  body.nexa-configuracoes-ativa .estado-vazio-enderecos,
  body.nexa-configuracoes-ativa .endereco-add-box,
  body.nexa-configuracoes-ativa .endereco-card-pro,
  body.nexa-configuracoes-ativa .endereco-inline-form,
  body.nexa-configuracoes-ativa .modal-cartao-card {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08) !important;
    color: #0f172a !important;
  }

  body.nexa-configuracoes-ativa .config-group,
  body.nexa-configuracoes-ativa .config-subcard,
  body.nexa-configuracoes-ativa .endereco-card-pro,
  body.nexa-configuracoes-ativa .endereco-inline-form {
    border-radius: 16px !important;
  }

  body.nexa-configuracoes-ativa .config-subcard,
  body.nexa-configuracoes-ativa .endereco-card-pro,
  body.nexa-configuracoes-ativa .endereco-inline-form {
    width: calc(100% - 28px) !important;
    margin: 14px !important;
    padding: 14px !important;
    border-bottom: 1px solid #e5e7eb !important;
  }

  body.nexa-configuracoes-ativa .config-item {
    background: transparent !important;
    border-bottom-color: #eef2f7 !important;
    color: #0f172a !important;
  }

  body.nexa-configuracoes-ativa .config-item:active {
    background: #f8fafc !important;
  }

  body.nexa-configuracoes-ativa .config-item-label,
  body.nexa-configuracoes-ativa .config-item-valor,
  body.nexa-configuracoes-ativa .config-toggle-title,
  body.nexa-configuracoes-ativa .config-radio-item,
  body.nexa-configuracoes-ativa .security-hero h3,
  body.nexa-configuracoes-ativa .security-panel-topo h4,
  body.nexa-configuracoes-ativa .security-info-card p,
  body.nexa-configuracoes-ativa .endereco-inline-topo h4,
  body.nexa-configuracoes-ativa .endereco-card-titulos h3,
  body.nexa-configuracoes-ativa .endereco-info-item strong,
  body.nexa-configuracoes-ativa .cartao-vazio-titulo,
  body.nexa-configuracoes-ativa .metodo-nome,
  body.nexa-configuracoes-ativa .metodos-titulo-bloco,
  body.nexa-configuracoes-ativa .cartao-card-titulo-bloco,
  body.nexa-configuracoes-ativa .config-subitem strong,
  body.nexa-configuracoes-ativa .config-avaliar-hint,
  body.nexa-configuracoes-ativa .modal-cartao-header h3 {
    color: #0f172a !important;
  }

  body.nexa-configuracoes-ativa .config-item-sub,
  body.nexa-configuracoes-ativa .config-item-detalhe,
  body.nexa-configuracoes-ativa .config-toggle-desc,
  body.nexa-configuracoes-ativa .security-hero p,
  body.nexa-configuracoes-ativa .security-panel-topo p,
  body.nexa-configuracoes-ativa .security-field label,
  body.nexa-configuracoes-ativa .security-label,
  body.nexa-configuracoes-ativa .endereco-inline-topo p,
  body.nexa-configuracoes-ativa .endereco-inline-field label,
  body.nexa-configuracoes-ativa .endereco-inline-checkbox label,
  body.nexa-configuracoes-ativa .endereco-card-resumo,
  body.nexa-configuracoes-ativa .endereco-info-label,
  body.nexa-configuracoes-ativa .cartao-vazio-desc,
  body.nexa-configuracoes-ativa .metodos-desc,
  body.nexa-configuracoes-ativa .metodo-desc,
  body.nexa-configuracoes-ativa .config-subitem p,
  body.nexa-configuracoes-ativa .config-alerta-texto,
  body.nexa-configuracoes-ativa .modal-campo-label,
  body.nexa-configuracoes-ativa .modal-cartao-header p,
  body.nexa-configuracoes-ativa .modal-cartao-aceitos {
    color: #64748b !important;
  }

  body.nexa-configuracoes-ativa .config-chevron {
    color: #94a3b8 !important;
  }

  body.nexa-configuracoes-ativa .config-item-icon:not(.config-icon-excluir) {
    background: rgba(123, 51, 255, 0.12) !important;
    color: #6d28d9 !important;
  }

  body.nexa-configuracoes-ativa .item-danger .config-item-label {
    color: #dc2626 !important;
  }

  body.nexa-configuracoes-ativa .item-danger .config-item-icon,
  body.nexa-configuracoes-ativa .config-icon-excluir {
    background: rgba(239, 68, 68, 0.12) !important;
    color: #dc2626 !important;
  }

  body.nexa-configuracoes-ativa .security-info-card,
  body.nexa-configuracoes-ativa .security-panel,
  body.nexa-configuracoes-ativa .endereco-info-item,
  body.nexa-configuracoes-ativa .metodos-lista,
  body.nexa-configuracoes-ativa .config-toggle-item,
  body.nexa-configuracoes-ativa .config-radio-item,
  body.nexa-configuracoes-ativa .config-subitem {
    background: #f8fafc !important;
    border: 1px solid #e5e7eb !important;
    color: #0f172a !important;
  }

  body.nexa-configuracoes-ativa .metodo-item,
  body.nexa-configuracoes-ativa .config-toggle-item,
  body.nexa-configuracoes-ativa .config-radio-item,
  body.nexa-configuracoes-ativa .cartao-acoes {
    border-color: #e5e7eb !important;
  }

  body.nexa-configuracoes-ativa input:not([type="checkbox"]):not([type="radio"]),
  body.nexa-configuracoes-ativa select,
  body.nexa-configuracoes-ativa textarea,
  body.nexa-configuracoes-ativa .modal-campo-input {
    background: #ffffff !important;
    border-color: #dbe3ef !important;
    color: #0f172a !important;
    box-shadow: none !important;
  }

  body.nexa-configuracoes-ativa input::placeholder,
  body.nexa-configuracoes-ativa textarea::placeholder {
    color: #94a3b8 !important;
  }

  body.nexa-configuracoes-ativa .config-switch-track {
    background: #e5e7eb !important;
    border-color: #d1d5db !important;
  }

  body.nexa-configuracoes-ativa .config-switch-track::after {
    background: #ffffff !important;
  }

  body.nexa-configuracoes-ativa .config-switch input:checked + .config-switch-track {
    background: linear-gradient(135deg, #3483FA, #2968C8) !important;
    border-color: rgba(123, 44, 255, 0.45) !important;
  }

  body.nexa-configuracoes-ativa .config-voltar,
  body.nexa-configuracoes-ativa .config-btn-acao,
  body.nexa-configuracoes-ativa .config-btn-sair,
  body.nexa-configuracoes-ativa .sair-btn,
  body.nexa-configuracoes-ativa .endereco-btn,
  body.nexa-configuracoes-ativa .endereco-inline-cancelar,
  body.nexa-configuracoes-ativa .cartao-btn-remover,
  body.nexa-configuracoes-ativa .modal-btn-cancelar {
    background: #ffffff !important;
    border-color: #dbe3ef !important;
    color: #475569 !important;
    box-shadow: none !important;
  }

  #pagina-config-conta-seguranca.pagina.ativa #btn-sair-conta,
  body.nexa-configuracoes-ativa #btn-sair-conta {
    background: rgba(239, 68, 68, 0.08) !important;
    border-color: rgba(239, 68, 68, 0.45) !important;
    color: #ef4444 !important;
    opacity: 1 !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
  }

  body.nexa-configuracoes-ativa .config-voltar {
    background: rgba(123, 51, 255, 0.10) !important;
    border-color: rgba(123, 51, 255, 0.28) !important;
    color: #6d28d9 !important;
  }

  body.nexa-configuracoes-ativa .config-btn-primario,
  body.nexa-configuracoes-ativa .endereco-btn-primario,
  body.nexa-configuracoes-ativa .endereco-btn-add-topo,
  body.nexa-configuracoes-ativa .cartao-btn-add,
  body.nexa-configuracoes-ativa #btn-enviar-avaliacao,
  body.nexa-configuracoes-ativa .modal-btn-ok.tipo-info {
    background: linear-gradient(135deg, #3483FA, #2968C8) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: 0 8px 22px rgba(123, 51, 255, 0.26) !important;
  }

  body.nexa-configuracoes-ativa .config-btn-perigo,
  body.nexa-configuracoes-ativa #btn-confirmar-exclusao,
  body.nexa-configuracoes-ativa .cartao-btn-remover {
    background: rgba(239, 68, 68, 0.10) !important;
    border-color: rgba(239, 68, 68, 0.24) !important;
    color: #dc2626 !important;
  }

  body.nexa-configuracoes-ativa .cartao-preview {
    background: linear-gradient(135deg, #3483FA, #2968C8) !important;
    border-color: rgba(123, 51, 255, 0.22) !important;
  }

  body.nexa-configuracoes-ativa .avaliacao-estrela {
    color: #cbd5e1 !important;
    background: #f8fafc !important;
    border-color: #e5e7eb !important;
  }

  body.nexa-configuracoes-ativa .avaliacao-estrela.ativa,
  body.nexa-configuracoes-ativa .avaliacao-estrela:hover {
    color: #f59e0b !important;
  }
}

/* Notificacoes: textos curtos no mobile e recomendacoes de produtos */
.notif-texto-mobile {
  display: none;
}

.notificacoes-recomendacoes[hidden] {
  display: none !important;
}

.notificacoes-recomendacoes {
  width: 100%;
  margin-top: 28px;
}

.notificacoes-recomendacoes-topo {
  margin: 0 0 14px;
}

.notificacoes-recomendacoes-topo h3 {
  margin: 0 0 4px;
  color: var(--na-text);
  font-size: 22px;
  line-height: 1.25;
  font-weight: 800;
}

.notificacoes-recomendacoes-topo p {
  margin: 0;
  color: var(--na-text-secondary);
  font-size: 14px;
  line-height: 1.45;
}

#grade-notificacoes-recomendados {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
  gap: 12px !important;
}

#grade-notificacoes-recomendados .produto-card {
  width: 100% !important;
  min-width: 0 !important;
}

@media (max-width: 767px) {
  body.nexa-avisos-ativa .notif-texto-desktop {
    display: none !important;
  }

  body.nexa-avisos-ativa .notif-texto-mobile {
    display: inline !important;
  }

  body.nexa-avisos-ativa #pagina-notificacoes.pagina.ativa .linha-notificacao {
    min-height: 68px !important;
    padding: 10px !important;
    grid-template-columns: 30px minmax(0, 1fr) 10px !important;
    gap: 8px !important;
    border-radius: 10px !important;
  }

  body.nexa-avisos-ativa #pagina-notificacoes.pagina.ativa .notif-icone {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    border-radius: 8px !important;
  }

  body.nexa-avisos-ativa #pagina-notificacoes.pagina.ativa .notif-conteudo {
    gap: 3px !important;
  }

  body.nexa-avisos-ativa #pagina-notificacoes.pagina.ativa .texto-linha {
    color: #061126 !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
  }

  body.nexa-avisos-ativa #pagina-notificacoes.pagina.ativa .notif-detalhe {
    -webkit-line-clamp: 1 !important;
    line-clamp: 1 !important;
    color: rgba(6, 17, 38, 0.62) !important;
    font-size: 10px !important;
    line-height: 1.3 !important;
  }

  body.nexa-avisos-ativa #pagina-notificacoes.pagina.ativa .notif-tempo {
    color: rgba(6, 17, 38, 0.52) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
  }

  body.nexa-avisos-ativa #pagina-notificacoes.pagina.ativa .notif-rodape {
    display: none !important;
  }

  body.nexa-avisos-ativa #pagina-notificacoes.pagina.ativa .seta-linha {
    color: rgba(6, 17, 38, 0.45) !important;
    font-size: 16px !important;
  }

  body.nexa-avisos-ativa .notificacoes-recomendacoes {
    margin-top: 22px !important;
  }

  body.nexa-avisos-ativa .notificacoes-recomendacoes-topo {
    margin: 0 0 12px !important;
  }

  body.nexa-avisos-ativa .notificacoes-recomendacoes-topo h3 {
    color: #061126 !important;
    font-size: 18px !important;
    line-height: 1.25 !important;
  }

  body.nexa-avisos-ativa .notificacoes-recomendacoes-topo p {
    color: rgba(6, 17, 38, 0.62) !important;
    font-size: 12px !important;
  }

  body.nexa-avisos-ativa #grade-notificacoes-recomendados {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 0 !important;
  }

  body.nexa-avisos-ativa #grade-notificacoes-recomendados .produto-card {
    min-height: 204px !important;
    padding: 9px !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08) !important;
  }

  body.nexa-avisos-ativa #grade-notificacoes-recomendados .produto-btn-fav {
    display: none !important;
  }

  body.nexa-avisos-ativa #grade-notificacoes-recomendados .produto-img-wrap {
    min-height: 104px !important;
    margin-bottom: 7px !important;
  }

  body.nexa-avisos-ativa #grade-notificacoes-recomendados .imagem-produto {
    height: 100px !important;
    padding: 5px !important;
  }

  body.nexa-avisos-ativa #grade-notificacoes-recomendados .nome-produto,
  body.nexa-avisos-ativa #grade-notificacoes-recomendados .preco-produto {
    color: #0f172a !important;
  }

  body.nexa-avisos-ativa #grade-notificacoes-recomendados .nome-produto {
    font-size: 11px !important;
    line-height: 1.2 !important;
  }

  body.nexa-avisos-ativa #grade-notificacoes-recomendados .marca-produto {
    color: #64748b !important;
    font-size: 10px !important;
  }

  /* Topo da página Notificações: degradê roxo+azul */
  body.nexa-avisos-ativa #pagina-notificacoes.pagina.ativa .track-topo {
    background: linear-gradient(135deg, #7c3aed 0%, #2563eb 100%) !important;
    border-bottom: none !important;
  }

  body.nexa-avisos-ativa #pagina-notificacoes.pagina.ativa .track-titulo {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }

  body.nexa-avisos-ativa #pagina-notificacoes.pagina.ativa .track-voltar {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #ffffff !important;
    width: 40px !important;
    height: 40px !important;
  }

  body.nexa-avisos-ativa #pagina-notificacoes.pagina.ativa .track-voltar svg {
    width: 24px !important;
    height: 24px !important;
    stroke-width: 2.5 !important;
  }

  body.nexa-avisos-ativa #pagina-notificacoes.pagina.ativa #btn-notif-ler-todas {
    color: rgba(255, 255, 255, 0.88) !important;
  }
}

/* Configuracoes: reforco final de contraste nas subpaginas mobile */
@media (max-width: 767px) {
  body.nexa-configuracoes-ativa .config-subtopo,
  body.nexa-configuracoes-ativa .config-subtopo-esquerda,
  body.nexa-configuracoes-ativa .security-hero,
  body.nexa-configuracoes-ativa .endereco-card-pro,
  body.nexa-configuracoes-ativa .config-subcard {
    opacity: 1 !important;
    filter: none !important;
  }

  body.nexa-configuracoes-ativa .config-subtopo h2,
  body.nexa-configuracoes-ativa #pagina-config-conta-seguranca.pagina.ativa .config-subtopo h2,
  body.nexa-configuracoes-ativa #pagina-config-meus-enderecos.pagina.ativa .config-subtopo h2,
  body.nexa-configuracoes-ativa #pagina-config-contas-cartoes.pagina.ativa .config-subtopo h2,
  body.nexa-configuracoes-ativa #pagina-config-notificacoes.pagina.ativa .config-subtopo h2,
  body.nexa-configuracoes-ativa #pagina-config-idioma.pagina.ativa .config-subtopo h2,
  body.nexa-configuracoes-ativa #pagina-config-avaliar.pagina.ativa .config-subtopo h2,
  body.nexa-configuracoes-ativa #pagina-config-sobre.pagina.ativa .config-subtopo h2,
  body.nexa-configuracoes-ativa #pagina-config-excluir-conta.pagina.ativa .config-subtopo h2,
  body.nexa-configuracoes-ativa #pagina-config-form-endereco.pagina.ativa .config-subtopo h2 {
    color: #0f172a !important;
    opacity: 1 !important;
    text-shadow: none !important;
    -webkit-text-fill-color: #0f172a !important;
  }

  body.nexa-configuracoes-ativa .config-voltar,
  body.nexa-configuracoes-ativa .pagina.ativa .config-subtopo .config-voltar {
    color: #6d28d9 !important;
    opacity: 1 !important;
    background: rgba(123, 51, 255, 0.12) !important;
    border-color: rgba(123, 51, 255, 0.32) !important;
    text-shadow: none !important;
    -webkit-text-fill-color: #6d28d9 !important;
  }

  body.nexa-configuracoes-ativa .security-hero h3,
  body.nexa-configuracoes-ativa .security-panel-topo h4,
  body.nexa-configuracoes-ativa .endereco-inline-topo h4,
  body.nexa-configuracoes-ativa .endereco-card-titulos h3,
  body.nexa-configuracoes-ativa .cartao-card-titulo-bloco,
  body.nexa-configuracoes-ativa .metodos-titulo-bloco,
  body.nexa-configuracoes-ativa .config-toggle-title,
  body.nexa-configuracoes-ativa .config-radio-item,
  body.nexa-configuracoes-ativa .config-subitem strong,
  body.nexa-configuracoes-ativa .cartao-vazio-titulo,
  body.nexa-configuracoes-ativa .metodo-nome,
  body.nexa-configuracoes-ativa .endereco-info-item strong,
  body.nexa-configuracoes-ativa .security-info-card p,
  body.nexa-configuracoes-ativa .config-item-label,
  body.nexa-configuracoes-ativa .config-item-valor,
  body.nexa-configuracoes-ativa .config-avaliar-hint,
  body.nexa-configuracoes-ativa .modal-cartao-header h3 {
    color: #020617 !important;
    opacity: 1 !important;
    text-shadow: none !important;
    -webkit-text-fill-color: #020617 !important;
  }

  body.nexa-configuracoes-ativa .security-hero p,
  body.nexa-configuracoes-ativa .security-panel-topo p,
  body.nexa-configuracoes-ativa .endereco-card-resumo,
  body.nexa-configuracoes-ativa .cartao-vazio-desc,
  body.nexa-configuracoes-ativa .metodos-desc,
  body.nexa-configuracoes-ativa .metodo-desc,
  body.nexa-configuracoes-ativa .config-toggle-desc,
  body.nexa-configuracoes-ativa .config-subitem p,
  body.nexa-configuracoes-ativa .endereco-inline-topo p,
  body.nexa-configuracoes-ativa .config-item-sub,
  body.nexa-configuracoes-ativa .config-item-detalhe,
  body.nexa-configuracoes-ativa .config-alerta-texto,
  body.nexa-configuracoes-ativa .modal-cartao-header p,
  body.nexa-configuracoes-ativa .modal-cartao-aceitos {
    color: #475569 !important;
    opacity: 1 !important;
    text-shadow: none !important;
    -webkit-text-fill-color: #475569 !important;
  }

  body.nexa-configuracoes-ativa .security-label,
  body.nexa-configuracoes-ativa .endereco-info-label,
  body.nexa-configuracoes-ativa .security-field label,
  body.nexa-configuracoes-ativa .endereco-inline-field label,
  body.nexa-configuracoes-ativa .endereco-inline-checkbox label,
  body.nexa-configuracoes-ativa .modal-campo-label {
    color: #64748b !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #64748b !important;
  }

  body.nexa-configuracoes-ativa .security-badge {
    color: #6d28d9 !important;
    opacity: 1 !important;
    background: rgba(123, 51, 255, 0.14) !important;
    border-color: rgba(123, 51, 255, 0.26) !important;
    -webkit-text-fill-color: #6d28d9 !important;
  }

  body.nexa-configuracoes-ativa .endereco-badge-tipo {
    color: #475569 !important;
    opacity: 1 !important;
    background: #eef2ff !important;
    border-color: #dbe3ef !important;
    -webkit-text-fill-color: #475569 !important;
  }

  body.nexa-configuracoes-ativa .metodo-badge {
    color: #16a34a !important;
    opacity: 1 !important;
    background: #dcfce7 !important;
    border-color: #bbf7d0 !important;
    -webkit-text-fill-color: #16a34a !important;
  }

  body.nexa-configuracoes-ativa .endereco-badge-principal,
  body.nexa-configuracoes-ativa .endereco-btn-primario,
  body.nexa-configuracoes-ativa .endereco-btn-add-topo,
  body.nexa-configuracoes-ativa .config-btn-primario,
  body.nexa-configuracoes-ativa .cartao-btn-add,
  body.nexa-configuracoes-ativa #btn-enviar-avaliacao,
  body.nexa-configuracoes-ativa .modal-btn-ok.tipo-info {
    color: #ffffff !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #ffffff !important;
  }

  body.nexa-configuracoes-ativa input:not([type="checkbox"]):not([type="radio"]),
  body.nexa-configuracoes-ativa select,
  body.nexa-configuracoes-ativa textarea,
  body.nexa-configuracoes-ativa .modal-campo-input {
    color: #0f172a !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #0f172a !important;
  }

  body.nexa-configuracoes-ativa input::placeholder,
  body.nexa-configuracoes-ativa textarea::placeholder {
    color: #94a3b8 !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #94a3b8 !important;
  }

  body.nexa-configuracoes-ativa .config-btn-acao:not(.config-btn-primario):not(.config-btn-perigo),
  body.nexa-configuracoes-ativa .endereco-btn:not(.endereco-btn-primario),
  body.nexa-configuracoes-ativa .endereco-inline-cancelar,
  body.nexa-configuracoes-ativa .cartao-btn-remover:not(#btn-confirmar-exclusao),
  body.nexa-configuracoes-ativa .modal-btn-cancelar {
    color: #475569 !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #475569 !important;
  }
}

/* Produto mobile: tema claro e imagem principal em destaque */
@media (max-width: 767px) {
  body.nexa-produto-ativa {
    background: #f3f4f6 !important;
  }

  body.nexa-produto-ativa .topo {
    display: none !important;
  }

  body.nexa-produto-ativa #pagina-pedido.pagina.ativa {
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    background: #f3f4f6 !important;
    background-color: #f3f4f6 !important;
    color: #061126 !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pd-page-inner {
    width: 100% !important;
    max-width: none !important;
    padding: 0 0 calc(120px + env(safe-area-inset-bottom, 0px)) !important;
    margin: 0 !important;
    position: relative !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pd-breadcrumb {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    z-index: 8 !important;
    display: flex !important;
    margin: 0 !important;
    gap: 0 !important;
    pointer-events: none !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pd-bc-btn {
    pointer-events: auto !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    border-radius: 999px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    background: rgba(15, 23, 42, 0.56) !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    color: transparent !important;
    font-size: 0 !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18) !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pd-bc-btn::before {
    content: "<" !important;
    color: #ffffff !important;
    font-size: 21px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pd-bc-sep,
  body.nexa-produto-ativa #pagina-pedido .pd-bc-item {
    display: none !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pd-main-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin: 0 !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pd-col-galeria {
    width: 100% !important;
    background: #ffffff !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pd-galeria-wrapper {
    gap: 0 !important;
    width: 100% !important;
    background: #ffffff !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pd-imagem-box-redesign,
  body.nexa-produto-ativa #pagina-pedido .pedido-imagem-box {
    width: 100% !important;
    min-width: 0 !important;
    height: min(84vw, 380px) !important;
    min-height: 260px !important;
    padding: 12px !important;
    border: none !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pedido-midia-principal {
    width: 100% !important;
    height: 100% !important;
    background: #ffffff !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pedido-imagem,
  body.nexa-produto-ativa #pagina-pedido .pedido-video {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pd-btn-share {
    top: 12px !important;
    right: 12px !important;
    width: 34px !important;
    height: 34px !important;
    background: rgba(15, 23, 42, 0.56) !important;
    border-color: rgba(255, 255, 255, 0.72) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18) !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pd-btn-fav-img {
    top: 62px !important;
    right: 12px !important;
    width: 34px !important;
    height: 34px !important;
    background: rgba(15, 23, 42, 0.56) !important;
    border-color: rgba(255, 255, 255, 0.72) !important;
    color: rgba(255, 255, 255, 0.75) !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18) !important;
  }
  body.nexa-produto-ativa #pagina-pedido .pd-btn-fav-img.ativo {
    background: rgba(239, 68, 68, 0.18) !important;
    border-color: rgba(239, 68, 68, 0.55) !important;
    color: #EF4444 !important;
  }

  body.nexa-produto-ativa #pagina-pedido .btn-galeria {
    background: rgba(15, 23, 42, 0.48) !important;
    border-color: rgba(255, 255, 255, 0.72) !important;
    color: #ffffff !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pd-miniaturas-vertical {
    order: 2 !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 10px 14px 14px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #e5e7eb !important;
    box-sizing: border-box !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pd-miniaturas-vertical .pedido-miniatura,
  body.nexa-produto-ativa #pagina-pedido .pedido-miniatura {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    border-color: #e5e7eb !important;
    box-shadow: none !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pedido-miniatura img,
  body.nexa-produto-ativa #pagina-pedido .pedido-miniatura video {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pd-miniaturas-vertical .pedido-miniatura.ativa,
  body.nexa-produto-ativa #pagina-pedido .pedido-miniatura.ativa {
    border-color: #3483FA !important;
    box-shadow: 0 0 0 2px rgba(123, 51, 255, 0.18) !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pd-col-info,
  body.nexa-produto-ativa #pagina-pedido .pd-tabs-section,
  body.nexa-produto-ativa #pagina-pedido .pd-relacionados {
    margin: 8px 0 0 !important;
    padding: 14px 12px !important;
    background: #ffffff !important;
    border-top: 1px solid #e5e7eb !important;
    border-bottom: 1px solid #e5e7eb !important;
    color: #061126 !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pd-col-info {
    gap: 10px !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pd-nome,
  body.nexa-produto-ativa #pagina-pedido .pd-preco-principal,
  body.nexa-produto-ativa #pagina-pedido .pd-card-titulo,
  body.nexa-produto-ativa #pagina-pedido .pd-relacionados-titulo,
  body.nexa-produto-ativa #pagina-pedido .pd-tab-texto,
  body.nexa-produto-ativa #pagina-pedido .pd-form-titulo,
  body.nexa-produto-ativa #pagina-pedido .pd-rev-card-autor,
  body.nexa-produto-ativa #pagina-pedido .pd-faq-pergunta,
  body.nexa-produto-ativa #pagina-pedido .pd-seg-titulo,
  body.nexa-produto-ativa #pagina-pedido .pd-frete-nome,
  body.nexa-produto-ativa #pagina-pedido .pd-frete-valor {
    color: #061126 !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #061126 !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pd-nome {
    font-size: 18px !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pd-preco-principal {
    font-size: 24px !important;
    line-height: 1.05 !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pd-marca,
  body.nexa-produto-ativa #pagina-pedido .pd-descricao-curta,
  body.nexa-produto-ativa #pagina-pedido .pd-beneficio-item,
  body.nexa-produto-ativa #pagina-pedido .pd-qty-label,
  body.nexa-produto-ativa #pagina-pedido .pd-tab,
  body.nexa-produto-ativa #pagina-pedido .pd-rev-total,
  body.nexa-produto-ativa #pagina-pedido .pd-rev-card-data,
  body.nexa-produto-ativa #pagina-pedido .pd-rev-card-texto,
  body.nexa-produto-ativa #pagina-pedido .pd-faq-resposta,
  body.nexa-produto-ativa #pagina-pedido .pd-seg-sub,
  body.nexa-produto-ativa #pagina-pedido .pd-frete-prazo {
    color: #64748b !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #64748b !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pd-parcelamento {
    color: #16a34a !important;
    -webkit-text-fill-color: #16a34a !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pd-beneficios,
  body.nexa-produto-ativa #pagina-pedido .pd-tabs-nav,
  body.nexa-produto-ativa #pagina-pedido .pd-rev-card,
  body.nexa-produto-ativa #pagina-pedido .pd-faq-item,
  body.nexa-produto-ativa #pagina-pedido .pd-frete-opcao {
    border-color: #e5e7eb !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pd-detalhes-resumo-card,
  body.nexa-produto-ativa #pagina-pedido .pd-detalhes-sheet-painel,
  body.nexa-produto-ativa #pagina-pedido .pd-detalhes-sheet-fechar {
    background: #ffffff !important;
    border-color: #e5e7eb !important;
    color: #061126 !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pd-detalhes-resumo-topo h3,
  body.nexa-produto-ativa #pagina-pedido .pd-detalhes-sheet-topo h3,
  body.nexa-produto-ativa #pagina-pedido .pd-detalhes-sheet-secao h4,
  body.nexa-produto-ativa #pagina-pedido .pd-detalhes-sheet-faq-item strong,
  body.nexa-produto-ativa #pagina-pedido .pd-detalhes-sheet-fechar {
    color: #061126 !important;
    -webkit-text-fill-color: #061126 !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pd-detalhes-resumo-texto,
  body.nexa-produto-ativa #pagina-pedido .pd-detalhes-sheet-secao p,
  body.nexa-produto-ativa #pagina-pedido .pd-detalhes-sheet-lista,
  body.nexa-produto-ativa #pagina-pedido .pd-detalhes-sheet-vazio {
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pd-link-detalhes-produto {
    color: #3483FA !important;
    -webkit-text-fill-color: #3483FA !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pd-detalhes-resumo-card {
    background: #ffffff !important;
    border-color: #e5e7eb !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pd-tab.ativa {
    color: #3483FA !important;
    border-bottom-color: #3483FA !important;
    -webkit-text-fill-color: #3483FA !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pd-qty-control,
  body.nexa-produto-ativa #pagina-pedido .pd-card-lateral,
  body.nexa-produto-ativa #pagina-pedido .pd-form-bloco,
  body.nexa-produto-ativa #pagina-pedido .pd-rev-resumo-box {
    background: #f8fafc !important;
    border-color: #e5e7eb !important;
    color: #061126 !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pd-qty-btn,
  body.nexa-produto-ativa #pagina-pedido .pd-qty-valor,
  body.nexa-produto-ativa #pagina-pedido .pd-btn-buy,
  body.nexa-produto-ativa #pagina-pedido .pd-btn-fav-detalhe {
    background: #ffffff !important;
    border-color: #e5e7eb !important;
    color: #061126 !important;
    -webkit-text-fill-color: #061126 !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pd-btn-cart,
  body.nexa-produto-ativa #pagina-pedido .pd-btn-enviar-form,
  body.nexa-produto-ativa #pagina-pedido .pd-cep-btn {
    background: linear-gradient(135deg, #3483FA, #2968C8) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pd-form-bloco input,
  body.nexa-produto-ativa #pagina-pedido .pd-form-bloco textarea,
  body.nexa-produto-ativa #pagina-pedido .pd-cep-input {
    background: #ffffff !important;
    border-color: #dbe3ef !important;
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pd-form-bloco input::placeholder,
  body.nexa-produto-ativa #pagina-pedido .pd-form-bloco textarea::placeholder,
  body.nexa-produto-ativa #pagina-pedido .pd-cep-input::placeholder {
    color: #94a3b8 !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #94a3b8 !important;
  }

  body.nexa-produto-ativa #pagina-pedido .product-360-viewer {
    background: #ffffff !important;
    border-color: #e5e7eb !important;
    border-radius: 0 !important;
  }

  body.nexa-produto-ativa #pagina-pedido .product-360-empty,
  body.nexa-produto-ativa #pagina-pedido .pd-vazio-tab {
    color: #64748b !important;
  }
}

/* Checkout mobile: tema claro igual as paginas principais */
@media (max-width: 767px) {
  #pagina-compra.pagina.ativa {
    padding-top: 0 !important;
    background: #f3f4f6 !important;
    background-color: #f3f4f6 !important;
    color: #061126 !important;
  }

  #pagina-compra.pagina.ativa .compra-overlay {
    background: #f3f4f6 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
  }

  #pagina-compra.pagina.ativa .compra-container {
    width: 100% !important;
    min-height: 100dvh !important;
    height: auto !important;
    padding: 12px 8px calc(104px + env(safe-area-inset-bottom, 0px)) !important;
    background: #f3f4f6 !important;
    background-color: #f3f4f6 !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #061126 !important;
  }

  #pagina-compra.pagina.ativa .btn-fechar-compra {
    width: 34px !important;
    height: 34px !important;
    top: 10px !important;
    right: 10px !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    color: #0f172a !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.10) !important;
  }

  #pagina-compra.pagina.ativa .compra-card,
  #pagina-compra.pagina.ativa .compra-resumo-itens,
  #pagina-compra.pagina.ativa .endereco-box,
  #pagina-compra.pagina.ativa .frete-box-compra,
  #pagina-compra.pagina.ativa .pagamento-inline-box,
  #pagina-compra.pagina.ativa .compra-resumo-final {
    background: #ffffff !important;
    background-image: none !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08) !important;
    color: #061126 !important;
  }

  #pagina-compra.pagina.ativa .compra-card {
    margin-top: 30px !important;
  }

  #pagina-compra.pagina.ativa .compra-secoes-alinhadas {
    gap: 10px !important;
    margin-top: 10px !important;
  }

  #pagina-compra.pagina.ativa .compra-resumo-itens,
  #pagina-compra.pagina.ativa .endereco-box,
  #pagina-compra.pagina.ativa .frete-box-compra,
  #pagina-compra.pagina.ativa .pagamento-inline-box,
  #pagina-compra.pagina.ativa .compra-resumo-final {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  #pagina-compra.pagina.ativa .compra-imagem-box {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: none !important;
  }

  #pagina-compra.pagina.ativa .compra-detalhes h2,
  #pagina-compra.pagina.ativa .compra-direita h3,
  #pagina-compra.pagina.ativa .compra-resumo-topo h3,
  #pagina-compra.pagina.ativa .endereco-topo h3,
  #pagina-compra.pagina.ativa .frete-topo-compra h3,
  #pagina-compra.pagina.ativa .compra-resumo-final h3,
  #pagina-compra.pagina.ativa .compra-item-resumo-info strong,
  #pagina-compra.pagina.ativa .endereco-preenchido p:first-child,
  #pagina-compra.pagina.ativa .frete-opcao-compra-texto strong,
  #pagina-compra.pagina.ativa .compra-subtotal-linha,
  #pagina-compra.pagina.ativa .compra-total-linha,
  #pagina-compra.pagina.ativa .compra-total-linha strong {
    color: #061126 !important;
    opacity: 1 !important;
    text-shadow: none !important;
    -webkit-text-fill-color: #061126 !important;
  }

  #pagina-compra.pagina.ativa #compra-preco {
    color: #0f172a !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #0f172a !important;
  }

  #pagina-compra.pagina.ativa #compra-pagamento,
  #pagina-compra.pagina.ativa #compra-estoque,
  #pagina-compra.pagina.ativa .compra-quantidade-info,
  #pagina-compra.pagina.ativa .compra-resumo-topo span,
  #pagina-compra.pagina.ativa .compra-item-resumo-info span,
  #pagina-compra.pagina.ativa .compra-item-resumo-unitario,
  #pagina-compra.pagina.ativa .compra-item-resumo-total,
  #pagina-compra.pagina.ativa .endereco-preenchido p,
  #pagina-compra.pagina.ativa .endereco-vazio p,
  #pagina-compra.pagina.ativa .frete-opcao-compra-texto p,
  #pagina-compra.pagina.ativa .compra-subtotal-linha span,
  #pagina-compra.pagina.ativa .compra-total-linha span {
    color: #64748b !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #64748b !important;
  }

  #pagina-compra.pagina.ativa #compra-pagamento {
    color: #16a34a !important;
    -webkit-text-fill-color: #16a34a !important;
  }

  #pagina-compra.pagina.ativa .controle-quantidade {
    color: #061126 !important;
  }

  #pagina-compra.pagina.ativa .btn-qtd,
  #pagina-compra.pagina.ativa #input-quantidade {
    background: #f8fafc !important;
    border: 1px solid #e5e7eb !important;
    color: #0f172a !important;
    box-shadow: none !important;
    -webkit-text-fill-color: #0f172a !important;
  }

  #pagina-compra.pagina.ativa .endereco-preenchido,
  #pagina-compra.pagina.ativa .endereco-vazio,
  #pagina-compra.pagina.ativa .compra-item-resumo,
  #pagina-compra.pagina.ativa .frete-opcao-compra-conteudo {
    background: #f8fafc !important;
    border: 1px solid #e5e7eb !important;
    background-image: none !important;
    box-shadow: none !important;
    color: #061126 !important;
  }

  #pagina-compra.pagina.ativa .compra-subtotal-linha,
  #pagina-compra.pagina.ativa .compra-total-linha-destaque {
    border-top-color: #e5e7eb !important;
  }

  #pagina-compra.pagina.ativa .frete-opcao-compra span {
    color: #f59e0b !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #f59e0b !important;
  }

  #pagina-compra.pagina.ativa .frete-opcao-compra-conteudo::after {
    border-color: #cbd5e1 !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  #pagina-compra.pagina.ativa .frete-opcao-compra input[type="radio"]:checked + .frete-opcao-compra-conteudo {
    background: rgba(123, 51, 255, 0.10) !important;
    border-color: #3483FA !important;
    box-shadow: inset 0 0 0 1px rgba(123, 51, 255, 0.28), 0 0 0 2px rgba(123, 51, 255, 0.12) !important;
  }

  #pagina-compra.pagina.ativa .frete-opcao-compra input[type="radio"]:checked + .frete-opcao-compra-conteudo::after {
    border-color: #3483FA !important;
    background: #3483FA !important;
    box-shadow: inset 0 0 0 5px #ffffff !important;
  }

  #pagina-compra.pagina.ativa .compra-total-linha-destaque strong {
    color: #3483FA !important;
    -webkit-text-fill-color: #3483FA !important;
  }

  #pagina-compra.pagina.ativa .btn-finalizar-compra {
    background: linear-gradient(135deg, #3483FA, #2968C8) !important;
    color: #ffffff !important;
    border: 0 !important;
    box-shadow: 0 8px 22px rgba(123, 51, 255, 0.24) !important;
    -webkit-text-fill-color: #ffffff !important;
  }
}

/* Endereco mobile: pagina inteira em tema claro */
#pagina-endereco .btn-editar-endereco {
  display: none;
}

@media (max-width: 767px) {
  #pagina-endereco.pagina-endereco,
  #pagina-endereco.pagina-endereco.ativa {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    justify-content: stretch !important;
    align-items: stretch !important;
    padding: 0 !important;
    background: #f3f4f6 !important;
    background-color: #f3f4f6 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow-y: auto !important;
    color: #061126 !important;
  }

  #pagina-endereco.pagina-endereco.ativa {
    display: block !important;
  }

  #pagina-endereco .pagina-endereco-conteudo {
    width: 100% !important;
    max-width: none !important;
    min-height: 100dvh !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 0 calc(96px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 0 !important;
    background: #f3f4f6 !important;
    background-color: #f3f4f6 !important;
    box-shadow: none !important;
    animation: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  #pagina-endereco .topo-endereco {
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 56px !important;
    margin: 0 0 16px !important;
    padding: calc(8px + env(safe-area-inset-top, 0px)) 54px 8px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
    border-radius: 0 !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-sizing: border-box !important;
  }

  #pagina-endereco .topo-endereco h2 {
    margin: 0 !important;
    color: #111827 !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    text-align: center !important;
    -webkit-text-fill-color: #111827 !important;
  }

  #pagina-endereco .btn-fechar-endereco {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #374151 !important;
    font-size: 28px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2 !important;
    -webkit-text-fill-color: #374151 !important;
  }

  #pagina-endereco .lista-enderecos-box,
  #pagina-endereco .form-endereco-shopee {
    width: auto !important;
    max-width: none !important;
    margin: 0 12px 12px !important;
    padding: 14px !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08) !important;
    color: #061126 !important;
    box-sizing: border-box !important;
  }

  #pagina-endereco .lista-enderecos-topo {
    gap: 10px !important;
    margin-bottom: 14px !important;
  }

  #pagina-endereco .lista-enderecos-topo h3 {
    margin: 0 !important;
    color: #061126 !important;
    font-size: 17px !important;
    line-height: 1.22 !important;
    font-weight: 800 !important;
    -webkit-text-fill-color: #061126 !important;
  }

  #pagina-endereco .btn-adicionar-endereco-lista,
  #pagina-endereco .btn-salvar-endereco-final {
    background: linear-gradient(135deg, #3483FA, #2968C8) !important;
    color: #ffffff !important;
    border: 0 !important;
    box-shadow: 0 8px 22px rgba(123, 51, 255, 0.24) !important;
    -webkit-text-fill-color: #ffffff !important;
  }

  #pagina-endereco .btn-adicionar-endereco-lista {
    min-height: 42px !important;
    padding: 9px 12px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
  }

  #pagina-endereco .estado-vazio-enderecos,
  #pagina-endereco .item-endereco-salvo {
    background: #f8fafc !important;
    border: 1px solid #e5e7eb !important;
    color: #061126 !important;
    box-shadow: none !important;
  }

  #pagina-endereco .item-endereco-salvo {
    border-radius: 12px !important;
    padding: 12px !important;
  }

  #pagina-endereco .item-endereco-topo {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  #pagina-endereco .item-endereco-topo strong {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow-wrap: anywhere !important;
  }

  #pagina-endereco .endereco-salvo-acoes {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    flex: 0 0 auto !important;
  }

  #pagina-endereco .btn-editar-endereco {
    min-height: 26px !important;
    padding: 0 9px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(124, 58, 237, 0.20) !important;
    background: rgba(124, 58, 237, 0.08) !important;
    color: #7c3aed !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    flex-shrink: 0 !important;
    -webkit-text-fill-color: #7c3aed !important;
  }

  #pagina-endereco .btn-editar-endereco:active {
    transform: scale(0.97) !important;
    filter: brightness(0.97) !important;
  }

  #pagina-endereco .item-endereco-salvo.ativo {
    background: rgba(123, 51, 255, 0.08) !important;
    border-color: #3483FA !important;
    box-shadow: 0 0 0 2px rgba(123, 51, 255, 0.14) !important;
  }

  #pagina-endereco .item-endereco-topo strong,
  #pagina-endereco .toggle-texto,
  #pagina-endereco .toggle-texto strong,
  #pagina-endereco .salvar-como-box p,
  #pagina-endereco .grupo-campo label {
    color: #061126 !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #061126 !important;
  }

  #pagina-endereco .item-endereco-salvo p,
  #pagina-endereco .item-endereco-status,
  #pagina-endereco .estado-vazio-enderecos p {
    color: #64748b !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #64748b !important;
  }

  #pagina-endereco .item-endereco-salvo.ativo .item-endereco-status,
  #pagina-endereco .tag-endereco-salvo {
    color: #3483FA !important;
    -webkit-text-fill-color: #3483FA !important;
  }

  #pagina-endereco .tag-endereco-salvo {
    background: rgba(123, 51, 255, 0.12) !important;
    border: 1px solid rgba(123, 51, 255, 0.16) !important;
  }

  #pagina-endereco .grupo-campo {
    margin-bottom: 14px !important;
  }

  #pagina-endereco .grupo-campo input {
    height: 48px !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    border: 1px solid #dbe3ef !important;
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
  }

  #pagina-endereco .grupo-campo input::placeholder {
    color: #94a3b8 !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #94a3b8 !important;
  }

  #pagina-endereco .grupo-campo input:focus {
    border-color: #3483FA !important;
    box-shadow: 0 0 0 3px rgba(123, 51, 255, 0.12) !important;
  }

  #pagina-endereco .linha-toggle,
  #pagina-endereco .salvar-como-box {
    margin: 12px 0 18px !important;
  }

  #pagina-endereco .toggle-endereco {
    position: relative !important;
    width: 52px !important;
    height: 30px !important;
    min-width: 52px !important;
    min-height: 30px !important;
    border-radius: 999px !important;
    background: #cbd5e1 !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
    transition: background 0.18s ease, box-shadow 0.18s ease !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    overflow: visible !important;
    box-shadow: none !important;
  }

  #pagina-endereco .toggle-endereco .toggle-bolinha {
    position: absolute !important;
    width: 24px !important;
    height: 24px !important;
    left: 3px !important;
    top: 3px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.22) !important;
    transform: translateX(0) !important;
    transition: transform 0.18s ease !important;
  }

  #pagina-endereco .toggle-endereco.ativo {
    background: linear-gradient(135deg, #7c3aed, #2563eb) !important;
    box-shadow: 0 6px 14px rgba(124, 58, 237, 0.22) !important;
  }

  #pagina-endereco .toggle-endereco.ativo .toggle-bolinha {
    left: 3px !important;
    transform: translateX(22px) !important;
  }

  #pagina-endereco .btn-tag-endereco {
    background: #ffffff !important;
    border-color: #dbe3ef !important;
    color: #475569 !important;
    -webkit-text-fill-color: #475569 !important;
  }

  #pagina-endereco .btn-tag-endereco.ativo {
    background: rgba(123, 51, 255, 0.10) !important;
    border-color: #3483FA !important;
    color: #3483FA !important;
    -webkit-text-fill-color: #3483FA !important;
  }

  #pagina-endereco .acoes-form-endereco {
    gap: 10px !important;
  }

  #pagina-endereco .btn-cancelar-endereco {
    background: #ffffff !important;
    border: 1px solid #dbe3ef !important;
    color: #475569 !important;
    -webkit-text-fill-color: #475569 !important;
  }
}

/* ── MP Hosted Fields containers ─────────────────────────────────────────────── */
/* Localizacao mobile: tela inteira em tema claro */
@media (max-width: 767px) {
  #pagina-localizacao.pagina-localizacao,
  #pagina-localizacao.pagina-localizacao.ativa {
    position: fixed !important;
    inset: 0 !important;
    z-index: 100300 !important;
    width: 100% !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    background: #f4f7fb !important;
    background-color: #f4f7fb !important;
    color: #111827 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  #pagina-localizacao.pagina-localizacao.ativa {
    display: block !important;
  }

  #pagina-localizacao .pagina-localizacao-conteudo {
    width: 100% !important;
    max-width: none !important;
    min-height: 100dvh !important;
    height: 100dvh !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 12px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    display: flex !important;
    flex-direction: column !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #f4f7fb !important;
    background-color: #f4f7fb !important;
    color: #111827 !important;
    box-shadow: none !important;
    animation: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
  }

  #pagina-localizacao .topo-localizacao {
    position: sticky !important;
    top: 0 !important;
    z-index: 30 !important;
    width: calc(100% + 24px) !important;
    max-width: none !important;
    min-height: 56px !important;
    margin: 0 -12px 14px !important;
    padding: calc(8px + env(safe-area-inset-top, 0px)) 54px 8px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }

  #pagina-localizacao .topo-localizacao h2 {
    margin: 0 !important;
    color: #111827 !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    text-align: center !important;
    letter-spacing: 0 !important;
    -webkit-text-fill-color: #111827 !important;
  }

  #pagina-localizacao .btn-fechar-localizacao {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    order: initial !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    border-radius: 999px !important;
    background: #f8fafc !important;
    color: #111827 !important;
    font-size: 22px !important;
    line-height: 1 !important;
    font-weight: 500 !important;
    box-shadow: none !important;
    -webkit-text-fill-color: #111827 !important;
  }

  #pagina-localizacao .texto-localizacao {
    margin: 0 0 12px !important;
    padding: 0 2px !important;
    color: #475569 !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    font-weight: 600 !important;
    -webkit-text-fill-color: #475569 !important;
  }

  #pagina-localizacao .geo-mensagem-erro {
    margin: 0 0 12px !important;
    padding: 11px 12px !important;
    border-radius: 12px !important;
    background: #fef2f2 !important;
    border: 1px solid #fecaca !important;
    color: #b91c1c !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    -webkit-text-fill-color: #b91c1c !important;
  }

  #pagina-localizacao .mapa-localizacao-wrap {
    position: relative !important;
    width: 100% !important;
    margin: 0 0 12px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    background: #ffffff !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
  }

  #pagina-localizacao #mapa-localizacao {
    width: 100% !important;
    height: 300px !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: #e5edf6 !important;
  }

  #pagina-localizacao .leaflet-bar {
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.16) !important;
  }

  #pagina-localizacao .leaflet-control-zoom a {
    width: 34px !important;
    height: 34px !important;
    line-height: 34px !important;
    background: #ffffff !important;
    color: #111827 !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
    -webkit-text-fill-color: #111827 !important;
  }

  #pagina-localizacao .leaflet-control-attribution {
    background: rgba(255, 255, 255, 0.88) !important;
    color: #475569 !important;
    font-size: 10px !important;
  }

  #pagina-localizacao .leaflet-control-attribution a {
    color: #2563eb !important;
    -webkit-text-fill-color: #2563eb !important;
  }

  #pagina-localizacao .btn-geo-atual {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 800 !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    border: 1px solid rgba(124, 58, 237, 0.18) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    color: #4c1d95 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.16) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    -webkit-text-fill-color: #4c1d95 !important;
  }

  #pagina-localizacao .btn-geo-atual svg {
    width: 15px !important;
    height: 15px !important;
    color: #7c3aed !important;
    flex-shrink: 0 !important;
  }

  #pagina-localizacao .btn-geo-atual:active {
    transform: scale(0.98) !important;
    filter: brightness(0.98) !important;
  }

  #pagina-localizacao .geo-loading {
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.86) !important;
    color: #111827 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    -webkit-text-fill-color: #111827 !important;
  }

  #pagina-localizacao .geo-spinner {
    border-color: rgba(124, 58, 237, 0.22) !important;
    border-top-color: #7c3aed !important;
  }

  #pagina-localizacao .resumo-localizacao {
    margin: 0 !important;
    padding: 10px 14px !important;
    display: grid !important;
    gap: 6px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    background: #ffffff !important;
    color: #111827 !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06) !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
  }

  #pagina-localizacao .resumo-localizacao p {
    margin: 0 !important;
    padding: 0 0 10px !important;
    display: grid !important;
    gap: 3px !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.07) !important;
    color: #64748b !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    -webkit-text-fill-color: #64748b !important;
  }

  #pagina-localizacao .resumo-localizacao p:last-child {
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
  }

  #pagina-localizacao .resumo-localizacao strong {
    display: block !important;
    color: #111827 !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
    -webkit-text-fill-color: #111827 !important;
  }

  #pagina-localizacao .resumo-localizacao span {
    display: block !important;
    color: #334155 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    -webkit-text-fill-color: #334155 !important;
  }

  #pagina-localizacao .btn-confirmar-localizacao {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 50px !important;
    height: 50px !important;
    margin: 0 !important;
    margin-top: 16px !important;
    padding: 0 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: linear-gradient(90deg, #7c3aed, #2563eb) !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    box-shadow: 0 12px 26px rgba(37, 99, 235, 0.24) !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-text-fill-color: #ffffff !important;
  }

  #pagina-localizacao .btn-confirmar-localizacao:active {
    transform: scale(0.985) !important;
    filter: brightness(0.97) !important;
  }
}

.mp-fields-container {
  min-height: 42px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.mp-fields-container iframe {
  width: 100% !important;
  height: 42px !important;
  border: none !important;
  display: block !important;
}

/* ── Meus Pedidos — lista de pedidos ────────────────────────────────────────── */
#meus-pedidos-lista-wrap {
  margin-top: 20px;
}

.mp-vazio {
  color: #94a3b8;
  font-size: 14px;
  text-align: center;
  padding: 24px 0;
}

.mp-ordem-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  margin-bottom: 12px;
  overflow: hidden;
}

.mp-ordem-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  flex-wrap: wrap;
}

.mp-ordem-id {
  font-weight: 600;
  font-size: 13px;
  color: #0f172a;
  font-family: monospace;
}

.mp-ordem-data {
  font-size: 12px;
  color: #64748b;
  margin-left: auto;
}

.mp-ordem-status {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.mp-status-delivered        { background: #dcfce7; color: #15803d; }
.mp-status-shipped          { background: #dbeafe; color: #1d4ed8; }
.mp-status-payment_approved { background: #fef9c3; color: #854d0e; }
.mp-status-in_separacao     { background: #fef3c7; color: #92400e; }
.mp-status-pending_payment  { background: #f1f5f9; color: #64748b; }
.mp-status-cancelled        { background: #fee2e2; color: #dc2626; }

.mp-itens {
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mp-item-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mp-item-img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  flex-shrink: 0;
}

.mp-item-nome {
  font-size: 13px;
  color: #1e293b;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mp-btn-avaliar,
.mp-btn-editar {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: opacity .15s;
}
.mp-btn-avaliar {
  background: #7c3aed;
  color: #fff;
}
.mp-btn-editar {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #cbd5e1;
}
.mp-btn-avaliar:hover { opacity: .85; }
.mp-btn-editar:hover  { background: #e2e8f0; }

.mp-ordem-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
}

.mp-btn-rastrear {
  font-size: 12px;
  font-weight: 500;
  color: #7c3aed;
  background: none;
  border: 1px solid #7c3aed;
  border-radius: 8px;
  padding: 5px 12px;
  cursor: pointer;
  transition: background .15s;
}
.mp-btn-rastrear:hover { background: #f5f0ff; }

.mp-ordem-valor {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}

.mp-vazio-item {
  font-size: 12px;
  color: #94a3b8;
  margin: 0;
}

/* ── Campaign Overlay (.camp-overlay) ───────────────────────────────────── */
.camp-overlay {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: #f3f4f6;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.camp-overlay.ativo { transform: translateX(0); }

/* Cabeçalho da campanha */
.camp-overlay-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  height: calc(env(safe-area-inset-top, 0px) + 52px);
  padding: env(safe-area-inset-top, 0px) 14px 0;
  background: #bfdbfe;
  border-bottom: 1px solid #93c5fd;
  flex-shrink: 0;
}

/* Botão voltar */
.camp-overlay-back {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(148,163,184,0.3);
  border-radius: 20px;
  color: #1d4ed8;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  padding: 6px 14px 6px 10px;
  -webkit-tap-highlight-color: transparent;
}
.camp-overlay-back:active { opacity: 0.7; }

/* Hero: imagem/cor da campanha */
.camp-overlay-hero {
  height: 200px;
  position: relative;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  flex-shrink: 0;
}
.camp-overlay-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 55%, transparent 100%);
  pointer-events: none;
}
.camp-overlay-hero--has-img::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.1) 100%);
  z-index: 1;
}
.camp-overlay-hero-inner {
  position: relative;
  z-index: 3;
  padding: 14px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

/* Tag de tipo (Oferta, Evento, etc.) */
.camp-overlay-tag {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(255,255,255,0.25);
  border: 1px solid rgba(255,255,255,0.45);
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.camp-overlay-titulo {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1.15;
  text-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.camp-overlay-subtitulo {
  font-size: 12.5px;
  color: rgba(255,255,255,0.88);
  margin: 0;
  line-height: 1.4;
}

/* Corpo com grade de produtos */
.camp-overlay-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 12px calc(88px + env(safe-area-inset-bottom, 0px));
}

/* Contador de produtos */
.camp-overlay-count {
  font-size: 11.5px;
  font-weight: 700;
  color: #64748b;
  margin: 0 2px 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Grade 2 colunas */
.camp-overlay-grade {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

/* Skeleton de carregamento */
.camp-overlay-loading {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px 24px;
  font-size: 13px;
  color: #94a3b8;
}

/* Estado vazio */
.camp-overlay-vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 48px 24px;
  text-align: center;
  color: #94a3b8;
  font-size: 14px;
}
.camp-overlay-vazio p { margin: 0; color: #64748b; }

/* Cards de produto dentro da campanha (herdam .produto-card) */
.camp-overlay-grade .produto-card {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 4px 14px rgba(15,23,42,0.07) !important;
  border-radius: 16px !important;
  cursor: pointer !important;
}
.camp-overlay-grade .produto-card:active {
  transform: scale(0.985) !important;
  box-shadow: 0 2px 8px rgba(15,23,42,0.08) !important;
}
.camp-overlay-grade .nome-produto { color: #0f172a !important; }
.camp-overlay-grade .marca-produto { color: #64748b !important; }
.camp-overlay-grade .preco-produto { color: #0f172a !important; }

/* ── Banner Carousel (.bc-*) ─────────────────────────────────────────────── */

/* banner só aparece no mobile */
#mobile-promos {
  display: none !important;
}
@media (max-width: 767px) {
  #mobile-promos:not([hidden]) {
    display: block !important;
  }
}

.bc-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 0;
  margin-bottom: 8px;
  background: #f1f5f9;
  touch-action: pan-y;
}

/* clip: container de recorte do carrossel — interposto entre wrapper e track */
.bc-clip {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* track: contém todos os slides lado a lado */
.bc-track {
  display: flex;
  transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
}

/* cada slide ocupa exatamente a largura do wrapper (definido via JS) */
.bc-slide {
  flex-shrink: 0;
  height: 220px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background-color: var(--promo-bg, #e0f2fe);
  background-size: cover;
  background-position: center;
  display: block;
}

/* overlay de gradiente para legibilidade do texto quando há imagem */
.bc-slide--has-img::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(0, 0, 0, 0.62) 0%,
    rgba(0, 0, 0, 0.28) 55%,
    rgba(0, 0, 0, 0.05) 100%
  );
  z-index: 1;
}

/* conteúdo de texto do slide */
.bc-slide-inner {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: var(--promo-text, #0f172a);
}

.bc-slide--has-img .bc-slide-inner {
  color: #fff;
}

/* etiqueta / badge */
.bc-tag {
  display: inline-block;
  width: fit-content;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 9px;
  border-radius: 20px;
  margin-bottom: 2px;
}

.bc-slide--has-img .bc-tag {
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
}

.bc-slide:not(.bc-slide--has-img) .bc-tag {
  background: rgba(0, 0, 0, 0.10);
  border: 1px solid rgba(0, 0, 0, 0.15);
}

/* título */
.bc-title {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.3px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* subtítulo */
.bc-text {
  font-size: 13px;
  line-height: 1.4;
  opacity: 0.86;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* botão / CTA */
.bc-cta {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border-radius: 20px;
  width: fit-content;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.bc-slide--has-img .bc-cta {
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: #fff;
}

.bc-slide:not(.bc-slide--has-img) .bc-cta {
  background: rgba(0, 0, 0, 0.10);
  border: 1px solid rgba(0, 0, 0, 0.18);
}

/* dots de navegação */
.bc-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 5px;
  z-index: 10;
  pointer-events: auto;
}

.bc-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: width 0.2s ease, background 0.2s ease;
}

.bc-dot.ativa {
  width: 20px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.95);
}

/* Tamanhos responsivos */
@media (min-width: 768px) {
  .bc-wrapper {
    border-radius: 16px;
    margin: 0 0 16px;
  }

  .bc-slide {
    height: 300px;
  }

  .bc-title {
    font-size: 28px;
  }

  .bc-text {
    font-size: 14px;
  }

  .bc-slide-inner {
    padding: 28px 36px 30px;
    max-width: 520px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE BANNER — bloco definitivo (fim do arquivo, especificidade máxima)
   Usa #mobile-promos como pai: especificidade (1,1,0) esmaga qualquer
   regra .bc-* sem ID. Posição no fim garante vitória em cascata.
   Não alterar desktop — regras dentro de @media (max-width: 767px).
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── wrapper: fundo azul, laterais visíveis ─────────────────────────── */
  #mobile-promos.bc-wrapper {
    position: relative !important;
    top: auto !important;
    margin: 0 !important;
    padding: 0 8px 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: #93c5fd !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;
    transform: none !important;
  }

  /* Cancela qualquer ::after herdado */
  #mobile-promos.bc-wrapper::after {
    display: none !important;
  }

  /* ── clip: topo reto (gruda no header), base arredondada ────────────── */
  #mobile-promos .bc-clip {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    height: clamp(160px, 44vw, 200px) !important;
    margin: 0 !important;
    border-radius: 0 0 14px 14px !important;
    overflow: hidden !important;
    background: #111827 !important;
    transform: none !important;
    border: none !important;
  }

  /* track: precisa herdar a altura do clip para que os slides preencham */
  #mobile-promos .bc-track {
    height: 100% !important;
  }

  /* Dots centrados dentro do slide */
  #mobile-promos .bc-dots {
    bottom: 10px !important;
  }

  /* ── slide: preenche o clip ──────────────────────────────────────────── */
  #mobile-promos .bc-slide {
    height: 100% !important;
    min-height: clamp(160px, 44vw, 200px) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }

  /* ── overlay duplo para legibilidade ────────────────────────────────── */
  #mobile-promos .bc-slide--has-img::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background:
      linear-gradient(90deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.48) 42%, rgba(0,0,0,0.08) 100%),
      linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.32) 100%) !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }

  /* ── conteúdo: centrado verticalmente, à esquerda ───────────────────── */
  #mobile-promos .bc-slide-inner {
    position: absolute !important;
    left: 18px !important;
    top: 50% !important;
    bottom: auto !important;
    right: auto !important;
    transform: translateY(-50%) !important;
    width: min(68%, 280px) !important;
    max-width: 280px !important;
    padding: 0 !important;
    gap: 9px !important;
    align-items: flex-start !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    color: #fff !important;
  }

  /* ── badge / etiqueta ───────────────────────────────────────────────── */
  #mobile-promos .bc-tag {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 24px !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 0 !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }

  #mobile-promos .bc-slide--has-img .bc-tag {
    background: rgba(255,255,255,0.20) !important;
    border: 1px solid rgba(255,255,255,0.38) !important;
    color: #fff !important;
  }

  /* ── título: grande e dominante ─────────────────────────────────────── */
  #mobile-promos .bc-title {
    margin: 0 !important;
    color: #fff !important;
    font-size: clamp(26px, 7.5vw, 36px) !important;
    line-height: 1.02 !important;
    font-weight: 900 !important;
    letter-spacing: -0.04em !important;
    text-shadow: 0 3px 14px rgba(0,0,0,0.48) !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  /* ── subtítulo ──────────────────────────────────────────────────────── */
  #mobile-promos .bc-text {
    margin: 0 !important;
    color: rgba(255,255,255,0.90) !important;
    font-size: clamp(13px, 3.8vw, 16px) !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.42) !important;
    opacity: 1 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  /* ── CTA: botão branco sólido, tamanho real ─────────────────────────── */
  #mobile-promos .bc-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 40px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    margin-top: 4px !important;
    gap: 4px !important;
    width: fit-content !important;
    white-space: nowrap !important;
    cursor: pointer !important;
  }

  #mobile-promos .bc-slide--has-img .bc-cta {
    background: #ffffff !important;
    color: #111827 !important;
    border: none !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.26) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  #mobile-promos .bc-slide:not(.bc-slide--has-img) .bc-cta {
    background: rgba(30,58,138,0.15) !important;
    border: 1px solid rgba(30,58,138,0.25) !important;
    color: #1e3a8a !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* ── dots: pequenos e discretos no rodapé ───────────────────────────── */
  #mobile-promos .bc-dots {
    position: absolute !important;
    bottom: 12px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    z-index: 10 !important;
    width: auto !important;
    height: auto !important;
    pointer-events: auto !important;
  }

  #mobile-promos .bc-dot {
    width: 7px !important;
    height: 7px !important;
    min-width: 7px !important;
    min-height: 7px !important;
    max-width: 7px !important;
    max-height: 7px !important;
    border-radius: 999px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: rgba(255,255,255,0.55) !important;
    opacity: 1 !important;
    flex-shrink: 0 !important;
  }

  #mobile-promos .bc-dot.ativa {
    width: 22px !important;
    max-width: 22px !important;
    background: #ffffff !important;
  }

}

/* ═══════════════════════════════════════════════════════════════════════════
   INTEGRAÇÃO TOPO + BANNER — fundo azul cobre toda a área header+banner
   O gradiente preenche os 104px do header + 210px do banner + buffer,
   eliminando qualquer faixa cinza visível entre a busca e o anúncio.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Gradiente: #93c5fd combina exatamente com o bottom do header gradiente */
  #pagina-home.pagina {
    background: linear-gradient(
      180deg,
      #93c5fd 0px,
      #93c5fd 210px,
      #f1f5f9 222px,
      #f1f5f9 100%
    ) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PREÇOS EM LARANJA — variável global + overrides de alta especificidade
   Aplicado em: home, campanha, detalhe do produto, carrinho, checkout.
   NÃO afeta: preço antigo riscado, parcelamento, admin, logo, botões.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --nexa-price: #F97316;
}

/* Cards de produto (home, busca, recomendados) */
.preco-produto {
  color: var(--nexa-price) !important;
}

/* Sobreposição de tema claro/escuro e contextos de página */
[data-theme="light"] .preco-produto,
[data-theme="dark"] .preco-produto,
#pagina-home .preco-produto,
[data-theme="light"] #pagina-home .preco-produto,
#pagina-carrinho .preco-produto,
#grade-recomendados .preco-produto,
body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa #grade-recomendados .preco-produto {
  color: var(--nexa-price) !important;
}

/* Overlay da campanha */
.camp-overlay-grade .preco-produto {
  color: var(--nexa-price) !important;
}

/* Página de detalhe do produto */
.pd-preco-principal {
  color: var(--nexa-price) !important;
}

/* Preço na página de pedido/produto */
.pedido-preco {
  color: var(--nexa-price) !important;
}

/* Itens do carrinho */
.carrinho-item-preco {
  color: var(--nexa-price) !important;
}
[data-theme="light"] .carrinho-item-preco {
  color: var(--nexa-price) !important;
}

/* Checkout — preço principal */
#compra-preco,
#pagina-compra #compra-preco,
#pagina-compra.pagina.ativa #compra-preco {
  color: var(--nexa-price) !important;
}

/* Resumo do pedido */
#pedido-preco {
  color: var(--nexa-price) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE SEARCH OVERLAY — tela de busca estilo app (Shopee / ML)
   Ativado apenas em mobile. Desktop não é afetado.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── Overlay container: tela cheia garantida ───────────────────────────── */
  .search-overlay-mobile {
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    z-index: 99999 !important;
    background: #f4f7fb !important;
    color: #111827 !important;
    flex-direction: column !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    transform: none !important;
  }
  .search-overlay-mobile.ativa {
    display: flex !important;
    animation: so-fadein 0.15s ease;
  }
  /* Animação SEM transform — transform num fixed cria containing block e quebra layout */
  @keyframes so-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* Nenhum filho ultrapassa a largura do overlay */
  .search-overlay-mobile * {
    box-sizing: border-box !important;
    max-width: 100% !important;
  }

  /* html/body não rolam enquanto overlay está aberto */
  html.search-open,
  body.search-open {
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
  }

  /* ── Header do overlay ───────────────────────────────────────────────────── */
  .search-overlay-header {
    position: relative !important; /* sticky dentro de overflow:hidden não funciona — usa relative */
    z-index: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px !important;
    min-height: 68px !important;
    background: #f4f7fb !important;
    border-bottom: 1px solid rgba(15,23,42,0.06) !important;
    box-shadow: 0 4px 16px rgba(15,23,42,0.08) !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
  }

  /* Botão voltar */
  .search-overlay-back {
    width: 40px !important;
    height: 40px !important;
    border: none !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.75) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #111827 !important;
    cursor: pointer !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  .search-overlay-back:active {
    background: rgba(255,255,255,0.95) !important;
  }

  /* Input wrapper */
  .search-overlay-input-wrap {
    width: 100% !important;
    height: 46px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    border: 1px solid rgba(37,99,235,0.16) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 14px !important;
    box-shadow: 0 4px 14px rgba(15,23,42,0.08) !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }
  .search-overlay-input-wrap > svg {
    color: #94a3b8 !important;
    flex-shrink: 0 !important;
  }
  #search-overlay-input {
    flex: 1 !important;
    min-width: 0 !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    color: #111827 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    font-family: inherit !important;
    padding: 0 !important;
  }
  #search-overlay-input::placeholder {
    color: rgba(17,24,39,0.4) !important;
    font-weight: 400 !important;
  }
  .search-overlay-clear-btn,
  #search-overlay-clear {
    width: 26px !important;
    height: 26px !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #9ca3af !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    -webkit-tap-highlight-color: transparent !important;
    box-shadow: none !important;
  }

  .search-overlay-clear-btn::before,
  .search-overlay-clear-btn::after,
  #search-overlay-clear::before,
  #search-overlay-clear::after {
    content: none !important;
    display: none !important;
    background: transparent !important;
  }

  /* ── Conteúdo — único container com scroll vertical ─────────────────────── */
  .search-overlay-content {
    flex: 1 !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    background: #f4f7fb !important;
    padding: 0 0 calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* ── Seções ──────────────────────────────────────────────────────────────── */
  .so-section {
    padding: 18px 0 8px !important;
  }
  .so-section-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 16px 10px !important;
  }
  .so-section-title {
    font-size: 11px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #64748b !important;
    margin: 0 !important;
  }
  .so-clear-all {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #2563eb !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 4px 0 !important;
    -webkit-tap-highlight-color: transparent !important;
    font-family: inherit !important;
  }

  /* ── Histórico ───────────────────────────────────────────────────────────── */
  .so-history-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .so-history-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 13px 16px !important;
    cursor: pointer !important;
    background: transparent !important;
    -webkit-tap-highlight-color: transparent !important;
    border-bottom: 1px solid rgba(15,23,42,0.05) !important;
  }
  .so-history-item:active {
    background: rgba(15,23,42,0.04) !important;
  }
  .so-history-icon {
    color: #94a3b8 !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
  }
  .so-history-text {
    flex: 1 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #111827 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .so-history-remove {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    border: none !important;
    background: none !important;
    color: #94a3b8 !important;
    cursor: pointer !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  .so-history-remove:active {
    background: rgba(239,68,68,0.1) !important;
    color: #ef4444 !important;
  }

  /* ── Chips de sugestão ───────────────────────────────────────────────────── */
  .so-chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 0 16px 8px !important;
  }
  .so-chip {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 36px !important;
    padding: 0 16px !important;
    background: #ffffff !important;
    border: 1px solid rgba(124,58,237,0.18) !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    font-family: inherit !important;
    box-shadow: 0 4px 12px rgba(15,23,42,0.06) !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  .so-chip:active {
    background: #ede9fe !important;
    border-color: #7c3aed !important;
    color: #6d28d9 !important;
  }

  /* ── Cards de resultado ──────────────────────────────────────────────────── */
  .so-results-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 12px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  .so-result-card {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 72px minmax(0,1fr) 40px !important;
    gap: 12px !important;
    align-items: center !important;
    padding: 10px !important;
    background: #ffffff !important;
    border: 1px solid rgba(15,23,42,0.07) !important;
    border-radius: 18px !important;
    box-shadow: 0 6px 18px rgba(15,23,42,0.06) !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  .so-result-card:active {
    background: #f8fafc !important;
    transform: scale(0.985) !important;
  }
  .so-result-img {
    width: 72px !important;
    height: 72px !important;
    object-fit: contain !important;
    border-radius: 12px !important;
    background: #f8fafc !important;
    flex-shrink: 0 !important;
    display: block !important;
  }
  .so-result-img--placeholder {
    width: 72px !important;
    height: 72px !important;
    border-radius: 12px !important;
    background: #f1f5f9 !important;
    flex-shrink: 0 !important;
  }
  .so-result-info {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    justify-content: center !important;
  }
  .so-result-nome {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    line-height: 1.25 !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    margin: 0 !important;
  }
  .so-result-marca {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    margin: 0 !important;
  }
  .so-result-preco {
    font-size: 15px !important;
    font-weight: 900 !important;
    color: #f97316 !important;
    margin: 4px 0 0 !important;
  }
  .so-result-cart-btn {
    width: 40px !important;
    height: 40px !important;
    border-radius: 14px !important;
    border: none !important;
    background: linear-gradient(135deg,#7c3aed,#2563eb) !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: 0 6px 16px rgba(37,99,235,0.28) !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  .so-result-cart-btn:active {
    opacity: 0.85 !important;
    transform: scale(0.93) !important;
  }
  .so-result-arrow {
    color: #94a3b8 !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  /* ── Chips de categoria (scroll horizontal contido) ─────────────────────── */
  .so-cat-chips {
    display: flex !important;
    gap: 8px !important;
    padding: 0 16px 4px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    width: 100% !important;
    max-width: 100vw !important; /* chips têm scroll interno mas não vazam para fora */
  }
  .so-cat-chips::-webkit-scrollbar { display: none !important; }
  .so-cat-chip {
    display: inline-flex !important;
    align-items: center !important;
    height: 36px !important;
    padding: 0 18px !important;
    background: #fff !important;
    border: 1.5px solid rgba(37,99,235,0.22) !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #1e40af !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    font-family: inherit !important;
    flex-shrink: 0 !important;
    max-width: none !important; /* exceção — chip individual pode ser + largo que 100% do grid */
    box-shadow: 0 2px 8px rgba(37,99,235,0.08) !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  .so-cat-chip:active {
    background: #eff6ff !important;
    border-color: #2563eb !important;
  }

  /* ── Grid de sugestões visuais (foto + nome + categoria) ─────────────────── */
  .so-suggestion-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
    padding: 0 16px 8px !important;
  }
  .so-suggestion-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 12px 8px 10px !important;
    background: #fff !important;
    border: 1px solid rgba(15,23,42,0.06) !important;
    border-radius: 16px !important;
    cursor: pointer !important;
    text-align: center !important;
    box-shadow: 0 2px 10px rgba(15,23,42,0.06) !important;
    font-family: inherit !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: transform 0.12s ease !important;
  }
  .so-suggestion-card:active {
    background: #f8fafc !important;
    transform: scale(0.95) !important;
  }
  .so-suggestion-img {
    width: 56px !important;
    height: 56px !important;
    object-fit: contain !important;
    border-radius: 12px !important;
    background: #f8fafc !important;
    display: block !important;
  }
  .so-suggestion-img--ph {
    width: 56px !important;
    height: 56px !important;
    border-radius: 12px !important;
    background: #f1f5f9 !important;
    display: block !important;
  }
  .so-suggestion-nome {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    line-height: 1.25 !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    width: 100% !important;
    word-break: break-word !important;
  }
  .so-suggestion-cat {
    display: inline-block !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #2563eb !important;
    background: #eff6ff !important;
    padding: 2px 8px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* ── Estado vazio ────────────────────────────────────────────────────────── */
  .so-empty {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 64px 24px 40px !important;
    gap: 12px !important;
    text-align: center !important;
  }
  .so-empty-title {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #111827 !important;
    margin: 0 !important;
  }
  .so-empty-sub {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #64748b !important;
    margin: 0 !important;
  }

}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE PRODUCT PAGE — Shopee/ML-style visual redesign
   Applies only on mobile (≤767px) when product page is active.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── Gallery: clean white card, full-width ───────────────────────────── */
  body.nexa-produto-ativa #pagina-pedido .pd-col-galeria {
    background: #ffffff !important;
    border-bottom: 1px solid #f1f5f9 !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pd-imagem-box-redesign,
  body.nexa-produto-ativa #pagina-pedido .pedido-imagem-box {
    height: min(84vw, 360px) !important;
    min-height: 240px !important;
    padding: 8px !important;
    background: #ffffff !important;
  }

  /* ── Info card: white card, generous padding ─────────────────────────── */
  body.nexa-produto-ativa #pagina-pedido .pd-col-info {
    background: #ffffff !important;
    border-radius: 0 !important;
    padding: 22px 20px 20px !important;
    gap: 10px !important;
    border-top: 6px solid #f1f5f9 !important;
  }

  /* Product name */
  body.nexa-produto-ativa #pagina-pedido .pd-nome {
    font-size: 21px !important;
    line-height: 1.28 !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    margin: 0 !important;
  }

  /* Brand text – discreto, sem chip */
  body.nexa-produto-ativa #pagina-pedido .pd-marca {
    display: block !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
    background: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
    margin-top: 2px !important;
    margin-bottom: 0 !important;
  }

  /* Price block */
  body.nexa-produto-ativa #pagina-pedido .pd-preco-bloco {
    gap: 4px !important;
    margin: 4px 0 2px !important;
  }

  /* Old price: muted strikethrough */
  body.nexa-produto-ativa #pagina-pedido .pd-preco-old {
    color: #94a3b8 !important;
    -webkit-text-fill-color: #94a3b8 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
  }

  /* Main price: orange, large */
  body.nexa-produto-ativa #pagina-pedido .pd-preco-principal {
    color: #F97316 !important;
    -webkit-text-fill-color: #F97316 !important;
    font-size: 28px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: -0.01em !important;
  }

  /* Installment: green */
  body.nexa-produto-ativa #pagina-pedido .pd-parcelamento {
    color: #16a34a !important;
    -webkit-text-fill-color: #16a34a !important;
    font-size: 13px !important;
    font-weight: 600 !important;
  }

  /* Trust badges: 3-col icon grid */
  body.nexa-produto-ativa #pagina-pedido .pd-beneficios {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    padding: 8px 0 4px !important;
    border-top: 1px solid #f1f5f9 !important;
    border-bottom: 1px solid #f1f5f9 !important;
    margin: 4px 0 !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pd-beneficio-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-align: center !important;
    background: #f8fafc !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    padding: 12px 6px !important;
    color: #475569 !important;
    -webkit-text-fill-color: #475569 !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pd-beneficio-item svg {
    color: #7c3aed !important;
    stroke: #7c3aed !important;
    flex-shrink: 0 !important;
  }

  /* Short description */
  body.nexa-produto-ativa #pagina-pedido .pd-descricao-curta {
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
    margin: 0 0 4px !important;
    padding: 2px 0 0 !important;
  }

  /* ── Qty control: large touch targets ────────────────────────────────── */
  body.nexa-produto-ativa #pagina-pedido .pd-qty-row {
    padding: 6px 0 !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pd-qty-label {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #374151 !important;
    -webkit-text-fill-color: #374151 !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pd-qty-control {
    display: flex !important;
    align-items: center !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 1.5px solid #e2e8f0 !important;
    background: #ffffff !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pd-qty-btn {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    border: none !important;
    border-radius: 0 !important;
    background: #f8fafc !important;
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    transition: background 0.15s !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pd-qty-valor {
    font-size: 17px !important;
    font-weight: 700 !important;
    min-width: 46px !important;
    text-align: center !important;
    border: none !important;
    border-left: 1.5px solid #e2e8f0 !important;
    border-right: 1.5px solid #e2e8f0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    padding: 0 4px !important;
  }

  /* ── Action buttons: clear hierarchy ────────────────────────────────── */
  body.nexa-produto-ativa #pagina-pedido .pd-acoes {
    gap: 10px !important;
    padding: 6px 0 2px !important;
  }

  /* Primary: Add to cart */
  body.nexa-produto-ativa #pagina-pedido .pd-btn-cart {
    height: 56px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #3483FA, #2968C8) !important;
    box-shadow: 0 4px 18px rgba(123, 44, 255, 0.32) !important;
    letter-spacing: 0.01em !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: none !important;
  }

  /* Secondary: Buy now */
  body.nexa-produto-ativa #pagina-pedido .pd-btn-buy {
    height: 52px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    border: 2px solid #3483FA !important;
    color: #3483FA !important;
    -webkit-text-fill-color: #3483FA !important;
    box-shadow: none !important;
  }

  /* Tertiary: Favorites — botão discreto, não compete com os principais */
  body.nexa-produto-ativa #pagina-pedido .pd-btn-fav-detalhe {
    height: 34px !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    border-radius: 8px !important;
    background: transparent !important;
    border: 1px solid #e2e8f0 !important;
    color: #94a3b8 !important;
    -webkit-text-fill-color: #94a3b8 !important;
    box-shadow: none !important;
    gap: 5px !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pd-btn-fav-detalhe.ativo {
    color: #EF4444 !important;
    -webkit-text-fill-color: #EF4444 !important;
    border-color: #fca5a5 !important;
    background: #fff5f5 !important;
  }

  /* Tabs section: white card, top separator */
  body.nexa-produto-ativa #pagina-pedido .pd-tabs-section {
    border-top: 6px solid #f1f5f9 !important;
    background: #ffffff !important;
  }

}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE PRODUCT PAGE — Correção de alinhamento e overflow horizontal
   Garante que nenhum bloco ultrapasse a viewport em telas ≤767px.
   NÃO altera cores, design ou desktop.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── Raiz da página: corta qualquer vazamento lateral ────────────────── */
  body.nexa-produto-ativa,
  body.nexa-produto-ativa #pagina-pedido,
  body.nexa-produto-ativa #pagina-pedido.pagina,
  body.nexa-produto-ativa #pagina-pedido.pagina.ativa {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* ── Container interno: sem padding lateral, sem overflow ────────────── */
  body.nexa-produto-ativa #pagina-pedido .pd-page-inner {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* ── Grade principal → flex-column: filhos esticam 100% ─────────────── */
  body.nexa-produto-ativa #pagina-pedido .pd-main-grid {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* ── Colunas: largura explícita, sem margem lateral ─────────────────── */
  body.nexa-produto-ativa #pagina-pedido .pd-col-galeria,
  body.nexa-produto-ativa #pagina-pedido .pd-col-info {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* ── Wrapper da galeria: sem overflow lateral ────────────────────────── */
  body.nexa-produto-ativa #pagina-pedido .pd-galeria-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* ── Caixa de imagem: nunca maior que a tela ─────────────────────────── */
  body.nexa-produto-ativa #pagina-pedido .pd-imagem-box-redesign,
  body.nexa-produto-ativa #pagina-pedido .pedido-imagem-box,
  body.nexa-produto-ativa #pagina-pedido .pedido-midia-principal {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* ── Bloco de preço e filhos: sem largura fixa ───────────────────────── */
  body.nexa-produto-ativa #pagina-pedido .pd-preco-bloco,
  body.nexa-produto-ativa #pagina-pedido .pd-preco-principal,
  body.nexa-produto-ativa #pagina-pedido .pd-preco-old,
  body.nexa-produto-ativa #pagina-pedido .pd-parcelamento {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* ── Benefícios: grid 3 colunas com minmax(0,1fr) ────────────────────── */
  body.nexa-produto-ativa #pagina-pedido .pd-beneficios {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    box-sizing: border-box !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pd-beneficio-item {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ── Linha de quantidade: sem estouro ────────────────────────────────── */
  body.nexa-produto-ativa #pagina-pedido .pd-qty-row,
  body.nexa-produto-ativa #pagina-pedido .pd-qty-control {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ── Botões de ação: largura total, sem estouro ──────────────────────── */
  body.nexa-produto-ativa #pagina-pedido .pd-acoes,
  body.nexa-produto-ativa #pagina-pedido .pd-btn-cart,
  body.nexa-produto-ativa #pagina-pedido .pd-btn-buy,
  body.nexa-produto-ativa #pagina-pedido .pd-btn-fav-detalhe {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* ── Seções abaixo da grade ──────────────────────────────────────────── */
  body.nexa-produto-ativa #pagina-pedido .pd-tabs-section,
  body.nexa-produto-ativa #pagina-pedido .pd-detalhes-resumo-card,
  body.nexa-produto-ativa #pagina-pedido .pd-relacionados {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* ── Miniaturas em row horizontal: clip interno, não vaza para fora ─── */
  body.nexa-produto-ativa #pagina-pedido .pd-miniaturas-vertical {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE — Seção "Quem viu este produto, viu também"
   Espelha EXATAMENTE o bloco #pagina-home .produto-card (linha ~10298).
   Referência: #pagina-home .produto-card — mesmas propriedades, mesmo visual.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── Seção wrapper: mesmo fundo cinza da home ────────────────────────── */
  body.nexa-produto-ativa #pagina-pedido .pd-relacionados {
    background: #f1f5f9 !important;
    border-top: 6px solid #f1f5f9 !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    padding: 16px 12px 20px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* ── Cabeçalho: título + "Ver todos" ────────────────────────────────── */
  body.nexa-produto-ativa #pagina-pedido .pd-relacionados-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 14px !important;
    padding: 0 !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pd-relacionados-titulo {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    margin: 0 !important;
    flex: 1 !important;
    min-width: 0 !important;
    line-height: 1.2 !important;
    opacity: 1 !important;
  }

  /* ── Botão "Ver todos": pequeno, alinhado à direita ─────────────────── */
  body.nexa-produto-ativa #pagina-pedido .pd-btn-ver-todos {
    flex-shrink: 0 !important;
    height: 30px !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    color: #2563eb !important;
    -webkit-text-fill-color: #2563eb !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    font-family: inherit !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    opacity: 1 !important;
  }

  /* ── Grade: 2 colunas — igual à home (#grade-produtos) ──────────────── */
  body.nexa-produto-ativa #pagina-pedido .pd-grade-relacionados {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ══ CARD: espelho exato de #pagina-home .produto-card ══════════════════
     Referência home (linha 10298-10305):
       background: #ffffff; border: 1px solid #e2e8f0;
       box-shadow: 0 2px 8px rgba(15,23,42,0.07);
       border-radius: 14px; min-height: 220px;
     ════════════════════════════════════════════════════════════════════ */
  body.nexa-produto-ativa #pagina-pedido .pd-grade-relacionados .produto-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.07) !important;
    border-radius: 14px !important;
    min-height: 220px !important;
    padding: 10px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    transform: none !important;
    opacity: 1 !important;
    color: #0f172a !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pd-grade-relacionados .produto-card:active {
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06) !important;
    transform: scale(0.98) !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pd-grade-relacionados .produto-card:hover {
    transform: none !important;
  }

  /* ══ IMAGEM WRAP: referência home (linha 10313-10319) ════════════════
       min-height: 110px; background: #f8fafc; border-radius: 10px;
     ════════════════════════════════════════════════════════════════════ */
  body.nexa-produto-ativa #pagina-pedido .pd-grade-relacionados .produto-img-wrap {
    min-height: 110px !important;
    height: 110px !important;
    background: #f8fafc !important;
    border-radius: 10px !important;
    margin-bottom: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  /* ══ IMAGEM: referência home (linha 10321-10325) ═════════════════════
       height: 104px; object-fit: contain;
     ════════════════════════════════════════════════════════════════════ */
  body.nexa-produto-ativa #pagina-pedido .pd-grade-relacionados .imagem-produto {
    height: 104px !important;
    width: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    background: transparent !important;
    padding: 4px !important;
    border-radius: 0 !important;
  }

  /* ══ HALO: referência home (linha 10327-10330): display none ═════════ */
  body.nexa-produto-ativa #pagina-pedido .pd-grade-relacionados .produto-img-halo {
    display: none !important;
  }

  /* ══ NOME: referência home (linha 10332-10338) ═══════════════════════
       color: #0f172a; font-size: 12px; font-weight: 600;
     ════════════════════════════════════════════════════════════════════ */
  body.nexa-produto-ativa #pagina-pedido .pd-grade-relacionados .nome-produto {
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    margin: 0 0 3px !important;
    opacity: 1 !important;
  }

  /* ══ PREÇO: laranja #F97316 (home usa #1d4ed8 azul, usuário quer laranja)
     Referência home (linha 10340-10345): font-size: 13px; font-weight: 800;
     ════════════════════════════════════════════════════════════════════ */
  body.nexa-produto-ativa #pagina-pedido .pd-grade-relacionados .preco-produto {
    color: #F97316 !important;
    -webkit-text-fill-color: #F97316 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    margin: 0 !important;
    opacity: 1 !important;
  }

  /* ══ MARCA: referência home (linha 10347-10351) ══════════════════════
       color: #64748b; font-size: 10px;
     ════════════════════════════════════════════════════════════════════ */
  body.nexa-produto-ativa #pagina-pedido .pd-grade-relacionados .marca-produto {
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
    font-size: 10px !important;
    margin: 0 0 6px !important;
    opacity: 1 !important;
  }

  /* ══ FAVORITO: referência home (linha 10353-10356): display none ══════
     Home esconde o favorito nos cards. Fazemos o mesmo.
     ════════════════════════════════════════════════════════════════════ */
  body.nexa-produto-ativa #pagina-pedido .pd-grade-relacionados .produto-btn-fav {
    display: none !important;
  }

  /* ══ FOOTER: preço + carrinho ════════════════════════════════════════ */
  body.nexa-produto-ativa #pagina-pedido .pd-grade-relacionados .produto-card-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-top: auto !important;
    gap: 4px !important;
  }

  /* ══ CARRINHO: referência home (linha 10358-10365) ═══════════════════
       background: #2563eb; width: 32px; height: 32px; border-radius: 8px;
     ════════════════════════════════════════════════════════════════════ */
  body.nexa-produto-ativa #pagina-pedido .pd-grade-relacionados .produto-btn-cart {
    background: #2563eb !important;
    border: none !important;
    border-color: #2563eb !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
  }

  /* ══ INDISPONÍVEL: border-radius acompanha o card ════════════════════ */
  body.nexa-produto-ativa #pagina-pedido .pd-grade-relacionados .produto-card-indisponivel {
    border-radius: 0 0 14px 14px !important;
    font-size: 11px !important;
  }

}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE PRODUCT PAGE — Redução de espaçamento entre seções
   Corrige gaps exagerados. NÃO altera design nem desktop.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  body.nexa-produto-ativa #pagina-pedido .pd-col-info,
  body.nexa-produto-ativa #pagina-pedido .pd-tabs-section,
  body.nexa-produto-ativa #pagina-pedido .pd-relacionados {
    margin-top: 4px !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pd-col-info {
    padding-bottom: 12px !important;
    gap: 8px !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pd-detalhes-resumo-card {
    margin-top: 4px !important;
    margin-bottom: 2px !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pd-tab-corpo {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pd-preco-bloco {
    margin-top: 2px !important;
    margin-bottom: 2px !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pd-qty-row {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pd-acoes {
    padding-top: 4px !important;
    padding-bottom: 2px !important;
    gap: 8px !important;
  }

}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE — Bottom sheet "Detalhes do produto" — Redesign profissional
   NÃO afeta desktop nem outros modais. Aplica apenas em mobile (max-width: 767px).
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* Overlay: garante 100vw explícito (iOS Safari pode ignorar inset:0) */
  .pd-detalhes-sheet {
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
  }

  /* Painel: position:fixed garante viewport como containing block,
     eliminando qualquer max-width ou translateX(-50%) residual */
  .pd-detalhes-sheet-painel {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    margin: 0 !important;
    height: 88dvh !important;
    min-height: 82dvh !important;
    max-height: 92dvh !important;
    border-radius: 24px 24px 0 0 !important;
    background: #ffffff !important;
    border: none !important;
    box-shadow: 0 -18px 48px rgba(15,23,42,0.22) !important;
    transform: translateY(100%) !important;
    transition: transform 0.32s cubic-bezier(0.32,0.72,0,1) !important;
    z-index: 100051 !important;
  }

  /* Estado aberto: sem translateX, apenas desliza de baixo para cima */
  .pd-detalhes-sheet.ativo .pd-detalhes-sheet-painel {
    transform: translateY(0) !important;
  }

  /* Handle — alça de arrasto */
  .pd-detalhes-sheet-handle {
    width: 44px !important;
    height: 4px !important;
    border-radius: 999px !important;
    background: rgba(15,23,42,0.20) !important;
    margin: 12px auto 6px !important;
    flex-shrink: 0 !important;
    display: block !important;
  }

  /* Header */
  .pd-detalhes-sheet-topo {
    padding: 8px 16px 14px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    background: #ffffff !important;
    min-height: 54px !important;
    gap: 12px !important;
  }

  .pd-detalhes-sheet-topo h3 {
    font-size: 17px !important;
    font-weight: 900 !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    letter-spacing: -0.02em !important;
    margin: 0 !important;
  }

  /* Botão fechar circular */
  .pd-detalhes-sheet-fechar {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 999px !important;
    border: 1.5px solid #e2e8f0 !important;
    background: #f8fafc !important;
    color: #374151 !important;
    -webkit-text-fill-color: #374151 !important;
    font-size: 20px !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
  }

  /* Área de conteúdo: fundo cinza claro */
  .pd-detalhes-sheet-conteudo {
    background: #f4f7fb !important;
    padding: 14px 14px 28px !important;
    overflow-y: auto !important;
    flex: 1 !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Seção: card branco arredondado */
  .pd-detalhes-sheet-secao {
    background: #ffffff !important;
    border-radius: 16px !important;
    padding: 14px !important;
    border: 1px solid rgba(15,23,42,0.06) !important;
    box-shadow: 0 2px 10px rgba(15,23,42,0.04) !important;
    margin-bottom: 0 !important;
  }

  /* Espaço entre cards de seção */
  .pd-detalhes-sheet-secao + .pd-detalhes-sheet-secao {
    margin-top: 10px !important;
    padding-top: 14px !important;
    border-top: none !important;
  }

  /* Rótulo da seção */
  .pd-detalhes-sheet-secao h4 {
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #9ca3af !important;
    -webkit-text-fill-color: #9ca3af !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    margin: 0 0 8px !important;
  }

  /* Texto da seção */
  .pd-detalhes-sheet-secao p {
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #374151 !important;
    -webkit-text-fill-color: #374151 !important;
    font-weight: 500 !important;
    margin: 0 !important;
  }

  /* Lista */
  .pd-detalhes-sheet-lista {
    color: #374151 !important;
    -webkit-text-fill-color: #374151 !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
    font-weight: 500 !important;
    padding-left: 18px !important;
  }

  /* FAQ item */
  .pd-detalhes-sheet-faq-item strong {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
  }

  .pd-detalhes-sheet-faq-item p {
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
  }

  /* Estado vazio: card dashed com ícone via ::before */
  .pd-detalhes-sheet-vazio {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    min-height: 200px !important;
    background: #ffffff !important;
    border-radius: 20px !important;
    padding: 32px 20px !important;
    border: 1.5px dashed rgba(15,23,42,0.14) !important;
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    font-weight: 500 !important;
    margin: 0 !important;
  }

  .pd-detalhes-sheet-vazio::before {
    content: "\1F4CB" !important;
    font-size: 38px !important;
    display: block !important;
    margin-bottom: 14px !important;
    line-height: 1 !important;
    -webkit-text-fill-color: initial !important;
  }

  .pd-detalhes-sheet-vazio::after {
    content: "Este produto ainda n\00E3o possui informa\00E7\00F5es t\00E9cnicas cadastradas." !important;
    display: block !important;
    font-size: 12px !important;
    color: #9ca3af !important;
    -webkit-text-fill-color: #9ca3af !important;
    margin-top: 6px !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
    max-width: 220px !important;
  }

}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE — Checkout: ocultar bloco superior duplicado (foto + qty control)
   Seletor duplo-ID garante especificidade máxima (0,2,0,0) — vence qualquer
   regra concorrente. O elemento fica no DOM; JS continua lendo
   #input-quantidade normalmente. NÃO afeta desktop nem lógica de quantidade.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* Especificidade (0,2,0,0): #pagina-compra + #compra-card-preview */
  #pagina-compra #compra-card-preview {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    pointer-events: none !important;
  }

  /* Reduz o padding superior do container, pois o card grande sumiu */
  #pagina-compra .compra-container {
    padding-top: 14px !important;
  }

  /* Remove margem superior desnecessária de "Produtos selecionados" */
  #pagina-compra .compra-secoes-alinhadas {
    margin-top: 8px !important;
  }

}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE CHECKOUT v20260529 — Header claro e integrado
   Substitui o topo preto por um header branco limpo.
   Controla: compra-overlay::after (topbar), btn-fechar-compra (botão voltar),
   compra-container padding-top (espaço abaixo do header).
   NÃO afeta: desktop, lógica de pedido, endereço, frete, pagamento, Pix.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── Topbar: fundo branco, título escuro, sombra suave ───────────────── */
  #pagina-compra.pagina.ativa .compra-overlay::after {
    /* posição e dimensões — mantidos */
    content: "Finalizar compra" !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 56px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
    z-index: 99998 !important;
    /* visual: branco limpo */
    background: #ffffff !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06) !important;
    /* tipografia */
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    letter-spacing: -0.01em !important;
  }

  /* ── Botão X: canto direito, tema claro, × visível ─────────────────── */
  #pagina-compra.pagina.ativa .btn-fechar-compra {
    position: fixed !important;
    top: 9px !important;
    right: 14px !important;
    left: auto !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    border-radius: 999px !important;
    background: #f1f5f9 !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    color: #374151 !important;
    -webkit-text-fill-color: #374151 !important;
    font-size: 20px !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 99999 !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: background 0.15s ease, transform 0.12s ease !important;
  }
  #pagina-compra.pagina.ativa .btn-fechar-compra::before {
    content: none !important;
  }
  #pagina-compra.pagina.ativa .btn-fechar-compra:active {
    background: #e2e8f0 !important;
    transform: scale(0.90) !important;
    opacity: 1 !important;
  }

  /* ── Container: padding-top correto para não ficar sob a topbar ──────── */
  /* Especificidade (1,2,0) > linha 12324 (1,1,1) e linha 14942 (1,0,1) */
  #pagina-compra.pagina.ativa .compra-container {
    padding-top: 72px !important;
  }

}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE CHECKOUT v20260529b — Endereço redesign + active states
   Seção endereço: estado preenchido (grid compacto) + estado vazio (dashed).
   Active states: remove todos os opacity:X, usa scale+brightness.
   NÃO controla display de #endereco-vazio/#endereco-preenchido (JS faz isso).
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── Topo do card endereço: label + pill "Alterar" ───────────────────── */
  #pagina-compra.pagina.ativa .endereco-topo {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 14px 8px !important;
    border-bottom: 1px solid rgba(15,23,42,0.06) !important;
  }
  #pagina-compra.pagina.ativa .endereco-topo h3 {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
    margin: 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
  }
  #pagina-compra.pagina.ativa .endereco-topo::after {
    content: "Alterar" !important;
    display: inline-block !important;
    height: 26px !important;
    line-height: 26px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #3483FA !important;
    -webkit-text-fill-color: #3483FA !important;
    background: rgba(52,131,250,0.10) !important;
    border: 1px solid rgba(52,131,250,0.20) !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
  }

  /* ── Estado preenchido: ícone pin esquerda + dados compactos ─────────── */
  #pagina-compra.pagina.ativa #endereco-preenchido {
    position: relative !important;
    padding: 12px 14px 14px 52px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
  }
  #pagina-compra.pagina.ativa #endereco-preenchido::before {
    content: "\1F4CD" !important;
    position: absolute !important;
    left: 12px !important;
    top: 12px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 10px !important;
    background: rgba(52,131,250,0.10) !important;
    display: block !important;
    line-height: 32px !important;
    text-align: center !important;
    font-size: 14px !important;
    -webkit-text-fill-color: initial !important;
  }
  #pagina-compra.pagina.ativa #mostrar-nome {
    font-size: 13px !important;
    font-weight: 900 !important;
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    margin: 0 0 3px !important;
    line-height: 1.3 !important;
    text-transform: uppercase !important;
    opacity: 1 !important;
  }
  #pagina-compra.pagina.ativa #mostrar-whats,
  #pagina-compra.pagina.ativa #mostrar-endereco,
  #pagina-compra.pagina.ativa #mostrar-localizacao {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #475569 !important;
    -webkit-text-fill-color: #475569 !important;
    margin: 0 0 1px !important;
    line-height: 1.4 !important;
    opacity: 1 !important;
  }

  /* ── Estado vazio: título + subtítulo + botão ───────────────────────── */
  #pagina-compra.pagina.ativa #endereco-vazio {
    padding: 18px 14px 16px !important;
    background: rgba(52,131,250,0.03) !important;
    border: 1.5px dashed rgba(52,131,250,0.28) !important;
    border-radius: 12px !important;
    text-align: center !important;
    margin: 6px !important;
    box-shadow: none !important;
  }
  #pagina-compra.pagina.ativa #endereco-vazio::before,
  #pagina-compra.pagina.ativa #endereco-vazio::after {
    content: none !important;
    display: none !important;
  }
  #pagina-compra.pagina.ativa #endereco-vazio strong {
    display: block !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    margin: 0 0 6px !important;
    line-height: 1.25 !important;
  }
  #pagina-compra.pagina.ativa #endereco-vazio p {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
    line-height: 1.4 !important;
    margin: 0 0 14px !important;
    opacity: 1 !important;
  }
  #pagina-compra.pagina.ativa .endereco-vazio-btn {
    display: block !important;
    width: 100% !important;
    min-height: 44px !important;
    padding: 12px 16px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #3483FA, #2968C8) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    text-align: center !important;
    border: none !important;
    box-shadow: 0 6px 16px rgba(52,131,250,0.22) !important;
    cursor: pointer !important;
    font-family: inherit !important;
    -webkit-tap-highlight-color: transparent !important;
    box-sizing: border-box !important;
    line-height: 20px !important;
  }
  #pagina-compra.pagina.ativa .endereco-vazio-btn:active {
    transform: scale(0.97) !important;
    filter: brightness(0.90) !important;
    opacity: 1 !important;
  }

  /* ── Active states: substituir opacity por scale + brightness ────────── */

  /* Finalizar compra */
  #pagina-compra.pagina.ativa .btn-finalizar-compra {
    transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.12s ease !important;
  }
  #pagina-compra.pagina.ativa .btn-finalizar-compra:active {
    opacity: 1 !important;
    transform: scale(0.97) !important;
    filter: brightness(0.88) !important;
    box-shadow: 0 3px 14px rgba(52,131,250,0.28) !important;
  }

  /* Opções de frete */
  #pagina-compra.pagina.ativa .frete-opcao-compra-conteudo {
    transition: transform 0.12s ease, filter 0.12s ease !important;
  }
  #pagina-compra.pagina.ativa .frete-opcao-compra:active .frete-opcao-compra-conteudo {
    opacity: 1 !important;
    transform: scale(0.98) !important;
    filter: brightness(0.94) !important;
  }

  /* PIX — copiar código */
  #pagina-pix .btn-copiar-pix {
    transition: transform 0.12s ease, filter 0.12s ease !important;
  }
  #pagina-pix .btn-copiar-pix:active {
    opacity: 1 !important;
    transform: scale(0.97) !important;
    filter: brightness(0.88) !important;
  }

  /* Enviar mensagem */
  .btn-enviar {
    transition: transform 0.12s ease, filter 0.12s ease !important;
  }
  .btn-enviar:active {
    opacity: 1 !important;
    transform: scale(0.97) !important;
    filter: brightness(0.92) !important;
  }

  /* Rastreio e avaliação */
  .track-btn-atendimento,
  .track-btn-mapa,
  .track-btn-avaliar,
  .track-busca-btn,
  .avaliar-btn-enviar {
    transition: transform 0.12s ease, filter 0.12s ease !important;
  }
  .track-btn-atendimento:active,
  .track-btn-mapa:active,
  .track-btn-avaliar:active,
  .track-busca-btn:active,
  .avaliar-btn-enviar:active {
    opacity: 1 !important;
    transform: scale(0.97) !important;
    filter: brightness(0.90) !important;
  }

  /* Botões qty +/- */
  #pagina-compra.pagina.ativa .btn-qtd:active {
    opacity: 1 !important;
    transform: scale(0.92) !important;
    filter: brightness(0.88) !important;
  }

}

/* ============================================================
   v20260530 — Checkout mobile: header sticky real (sem ::after)
   ============================================================ */
@media (max-width: 767px) {

  /* 1. Apaga o topbar falso via ::after e ::before */
  #pagina-compra.pagina.ativa .compra-overlay::after,
  #pagina-compra.pagina.ativa .compra-overlay::before {
    content: none !important;
    display: none !important;
  }

  /* 2. Overlay vira coluna para o header + container empilharem */
  #pagina-compra.pagina.ativa .compra-overlay {
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    padding: 0 !important;
  }

  /* 3. Header real — sticky dentro do scroll do overlay */
  #pagina-compra.pagina.ativa .compra-header-mobile {
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 56px !important;
    padding: 0 52px !important;
    background: #ffffff !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06) !important;
  }

  /* 4. Título centrado */
  #pagina-compra.pagina.ativa .compra-header-titulo {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.01em !important;
    line-height: 1 !important;
  }

  /* 5. Botão X — absoluto dentro do header, nunca fixed */
  #pagina-compra.pagina.ativa .btn-fechar-compra {
    position: absolute !important;
    top: 50% !important;
    right: 12px !important;
    left: auto !important;
    transform: translateY(-50%) !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 999px !important;
    background: #f1f5f9 !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    color: #374151 !important;
    font-size: 20px !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    z-index: 51 !important;
    cursor: pointer !important;
    box-shadow: none !important;
  }
  #pagina-compra.pagina.ativa .btn-fechar-compra::before,
  #pagina-compra.pagina.ativa .btn-fechar-compra::after {
    content: none !important;
    display: none !important;
  }

  /* 6. Container sem padding-top extra (header já está no fluxo) */
  #pagina-compra.pagina.ativa .compra-container {
    padding-top: 8px !important;
    flex: 1 !important;
    width: 100% !important;
  }

  /* 7. Reduz espaçamento entre cards/seções */
  #pagina-compra.pagina.ativa .compra-secoes-alinhadas {
    gap: 8px !important;
    margin-top: 4px !important;
  }
  #pagina-compra.pagina.ativa .compra-card {
    margin-bottom: 8px !important;
  }
  #pagina-compra.pagina.ativa .compra-card + .compra-card {
    margin-top: 0 !important;
  }

}

/* ============================================================
   v20260530b — Remove azul de tap/toque em checkout mobile
   Causa: -webkit-tap-highlight-color não definido + :hover
   persiste em touch + sem :active explícito = azul do browser
   ============================================================ */
@media (max-width: 767px) {

  /* 1. Zera o highlight azul nativo do browser em TODOS os elementos
        clicáveis do checkout e da tela de endereços */
  #pagina-compra label,
  #pagina-compra button,
  #pagina-compra a,
  #pagina-compra .frete-opcao-compra,
  #pagina-compra .frete-opcao-compra-conteudo,
  #pagina-compra .pagamento-opcao,
  #pagina-compra .pagamento-opcao-conteudo,
  #pagina-compra .item-endereco-salvo,
  #pagina-compra .endereco-vazio-btn,
  #pagina-compra .compra-card,
  #pagina-endereco .item-endereco-salvo,
  #pagina-endereco button,
  #pagina-endereco a {
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
  }

  /* 2. Remove outline azul de :focus e :focus-visible no checkout */
  #pagina-compra label:focus,
  #pagina-compra label:focus-visible,
  #pagina-compra button:focus,
  #pagina-compra button:focus-visible,
  #pagina-compra .frete-opcao-compra:focus,
  #pagina-compra .frete-opcao-compra:focus-visible,
  #pagina-compra .frete-opcao-compra-conteudo:focus,
  #pagina-compra .frete-opcao-compra-conteudo:focus-visible,
  #pagina-compra .pagamento-opcao:focus,
  #pagina-compra .pagamento-opcao:focus-visible,
  #pagina-compra .item-endereco-salvo:focus,
  #pagina-compra .item-endereco-salvo:focus-visible,
  #pagina-endereco .item-endereco-salvo:focus,
  #pagina-endereco .item-endereco-salvo:focus-visible {
    outline: none !important;
    box-shadow: none !important;
  }

  /* 3. Desativa :hover no mobile (persiste após tap e causa faixa azul) */
  #pagina-compra .frete-opcao-compra:hover .frete-opcao-compra-conteudo {
    border-color: rgba(15, 23, 42, 0.12) !important;
    background: transparent !important;
    transform: none !important;
    box-shadow: none !important;
  }
  #pagina-compra .pagamento-opcao:hover .pagamento-opcao-conteudo {
    border-color: rgba(15, 23, 42, 0.12) !important;
    background: transparent !important;
    transform: none !important;
    box-shadow: none !important;
  }

  /* 4. :active profissional — escala + brilho, sem azul */
  #pagina-compra .frete-opcao-compra:active .frete-opcao-compra-conteudo {
    transform: scale(0.985) !important;
    filter: brightness(0.96) !important;
    background: rgba(124, 58, 237, 0.05) !important;
    border-color: rgba(124, 58, 237, 0.30) !important;
    box-shadow: none !important;
  }
  #pagina-compra .pagamento-opcao:active .pagamento-opcao-conteudo {
    transform: scale(0.985) !important;
    filter: brightness(0.96) !important;
    background: rgba(124, 58, 237, 0.05) !important;
    border-color: rgba(124, 58, 237, 0.30) !important;
    box-shadow: none !important;
  }
  #pagina-compra .item-endereco-salvo:active,
  #pagina-endereco .item-endereco-salvo:active {
    transform: scale(0.985) !important;
    filter: brightness(0.97) !important;
    box-shadow: none !important;
  }

  /* 5. Estado SELECIONADO: azul suave, sem glow */
  #pagina-compra .frete-opcao-compra input[type="radio"]:checked + .frete-opcao-compra-conteudo {
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
    box-shadow: none !important;
  }
  #pagina-compra .pagamento-opcao input[type="radio"]:checked + .pagamento-opcao-conteudo {
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
    box-shadow: none !important;
  }
  #pagina-compra .item-endereco-salvo.ativo,
  #pagina-endereco .item-endereco-salvo.ativo {
    background: rgba(124, 58, 237, 0.07) !important;
    border-color: #7c3aed !important;
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.10) !important;
  }

  /* 6. Transition suave em todos os cards do checkout */
  #pagina-compra .frete-opcao-compra-conteudo,
  #pagina-compra .pagamento-opcao-conteudo,
  #pagina-compra .item-endereco-salvo,
  #pagina-endereco .item-endereco-salvo {
    transition: transform 0.12s ease, filter 0.12s ease,
                background 0.12s ease, border-color 0.12s ease,
                box-shadow 0.12s ease !important;
  }

}

/* ============================================================
   v20260531b — FIX NUCLEAR: azul de tap/toque no checkout
   Estratégia: wildcard (*) + hover:none + selection override
   ============================================================ */

/* NÍVEL 1: Global mobile — zera tap highlight em TUDO.
   rgba(0,0,0,0) é mais compatível que "transparent" em browsers antigos. */
@media (max-width: 767px) {
  * {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
  }
}

/* NÍVEL 2: Checkout — wildcard em todos os filhos */
@media (max-width: 767px) {
  #pagina-compra *,
  #pagina-endereco *,
  #pagina-pagamento * {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
  }

  /* Remove outline de TODOS os estados interativos no checkout */
  #pagina-compra *:focus,
  #pagina-compra *:focus-visible,
  #pagina-compra *:focus-within,
  #pagina-endereco *:focus,
  #pagina-endereco *:focus-visible,
  #pagina-pagamento *:focus,
  #pagina-pagamento *:focus-visible {
    outline: none !important;
    box-shadow: none !important;
  }

  /* Remove highlight de seleção de texto (azul por padrão no browser) */
  #pagina-compra *::selection,
  #pagina-endereco *::selection,
  #pagina-pagamento *::selection {
    background: rgba(124, 58, 237, 0.18) !important;
    color: inherit !important;
  }

  /* Radio inputs: sem aparência nativa que possa vazar azul */
  #pagina-compra input[type="radio"],
  #pagina-pagamento input[type="radio"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
    accent-color: #7c3aed !important;
    pointer-events: none !important;
  }

  /* Previne user-select em cards interativos (evita selection azul no tap) */
  #pagina-compra .frete-opcao-compra,
  #pagina-compra .frete-opcao-compra *,
  #pagina-compra .pagamento-opcao,
  #pagina-compra .pagamento-opcao *,
  #pagina-compra .item-endereco-salvo,
  #pagina-compra .item-endereco-salvo *,
  #pagina-endereco .item-endereco-salvo,
  #pagina-endereco .item-endereco-salvo * {
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  /* :active limpo: background explícito transparent (sem azul herdado) */
  #pagina-compra .frete-opcao-compra:active,
  #pagina-compra .pagamento-opcao:active,
  #pagina-endereco .item-endereco-salvo:active,
  #pagina-compra .item-endereco-salvo:active {
    background-color: transparent !important;
    background-image: none !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  /* :active do conteúdo interno: scale + brightness = feedback sem azul */
  #pagina-compra .frete-opcao-compra:active .frete-opcao-compra-conteudo {
    transform: scale(0.985) !important;
    filter: brightness(0.96) !important;
    background: rgba(124, 58, 237, 0.05) !important;
    border-color: rgba(124, 58, 237, 0.25) !important;
    box-shadow: none !important;
  }
  #pagina-compra .pagamento-opcao:active .pagamento-opcao-conteudo {
    transform: scale(0.985) !important;
    filter: brightness(0.96) !important;
    background: rgba(124, 58, 237, 0.05) !important;
    border-color: rgba(124, 58, 237, 0.25) !important;
    box-shadow: none !important;
  }
  #pagina-compra .item-endereco-salvo:active,
  #pagina-endereco .item-endereco-salvo:active {
    transform: scale(0.985) !important;
    filter: brightness(0.97) !important;
    box-shadow: none !important;
  }
}

/* NÍVEL 3: hover:none — em dispositivos TOUCH, hover não deve mudar background.
   @media (hover: none) detecta touch screens que não suportam hover real. */
@media (max-width: 767px) and (hover: none) {
  .frete-opcao-compra:hover .frete-opcao-compra-conteudo,
  #pagina-compra .frete-opcao-compra:hover .frete-opcao-compra-conteudo {
    background: inherit !important;
    background-color: inherit !important;
    border-color: inherit !important;
    transform: none !important;
    box-shadow: none !important;
  }
  .pagamento-opcao:hover .pagamento-opcao-conteudo,
  #pagina-compra .pagamento-opcao:hover .pagamento-opcao-conteudo {
    background: inherit !important;
    background-color: inherit !important;
    border-color: inherit !important;
    transform: none !important;
    box-shadow: none !important;
  }
  .item-endereco-salvo:hover,
  #pagina-compra .item-endereco-salvo:hover,
  #pagina-endereco .item-endereco-salvo:hover {
    background: inherit !important;
    background-color: inherit !important;
    border-color: inherit !important;
    transform: none !important;
    box-shadow: none !important;
  }
}

/* NÍVEL 4: Estado selecionado — roxo discreto, nunca azul */
@media (max-width: 767px) {
  /* Frete via :has (suportado em Chrome 105+, Safari 15.4+) */
  #pagina-compra .frete-opcao-compra:has(input:checked) .frete-opcao-compra-conteudo {
    background: rgba(124, 58, 237, 0.07) !important;
    border-color: #7c3aed !important;
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.12) !important;
  }

  /* Pagamento via :has */
  #pagina-compra .pagamento-opcao:has(input:checked) .pagamento-opcao-conteudo {
    background: rgba(124, 58, 237, 0.07) !important;
    border-color: #7c3aed !important;
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.12) !important;
  }

  /* Endereço selecionado */
  #pagina-compra .item-endereco-salvo.ativo,
  #pagina-endereco .item-endereco-salvo.ativo {
    background: rgba(124, 58, 237, 0.07) !important;
    border-color: #7c3aed !important;
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.10) !important;
  }
}

/* Pagamento mobile: tela inteira em tema claro */
@media (max-width: 767px) {
  #pagina-pagamento.pagina-pagamento,
  #pagina-pagamento.pagina-pagamento.ativa {
    position: fixed !important;
    inset: 0 !important;
    z-index: 100310 !important;
    width: 100% !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    background: #f4f7fb !important;
    background-color: #f4f7fb !important;
    color: #111827 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
  }

  #pagina-pagamento.pagina-pagamento.ativa {
    display: block !important;
  }

  #pagina-pagamento .pagina-pagamento-conteudo {
    width: 100% !important;
    max-width: none !important;
    min-height: unset !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 10px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #f4f7fb !important;
    background-color: #f4f7fb !important;
    color: #111827 !important;
    box-shadow: none !important;
    animation: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  #pagina-pagamento .topo-pagamento {
    position: sticky !important;
    top: 0 !important;
    z-index: 30 !important;
    width: calc(100% + 20px) !important;
    max-width: none !important;
    min-height: 56px !important;
    margin: 0 -10px 10px !important;
    padding: calc(8px + env(safe-area-inset-top, 0px)) 54px 8px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }

  #pagina-pagamento .topo-pagamento h2 {
    margin: 0 !important;
    color: #111827 !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    text-align: center !important;
    letter-spacing: 0 !important;
    -webkit-text-fill-color: #111827 !important;
  }

  #pagina-pagamento .btn-fechar-pagamento {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    order: initial !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    border-radius: 999px !important;
    background: #f8fafc !important;
    color: #111827 !important;
    font-size: 22px !important;
    line-height: 1 !important;
    font-weight: 500 !important;
    box-shadow: none !important;
    -webkit-text-fill-color: #111827 !important;
  }

  #pagina-pagamento .pagamento-bloco {
    width: 100% !important;
    margin: 0 0 10px !important;
    padding: 14px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    background: #ffffff !important;
    color: #111827 !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06) !important;
    box-sizing: border-box !important;
  }

  #pagina-pagamento .pagamento-bloco h3 {
    margin: 0 0 10px !important;
    color: #111827 !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    -webkit-text-fill-color: #111827 !important;
  }

  #pagina-pagamento .pagamento-opcoes {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  #pagina-pagamento .pagamento-opcao,
  #pagina-pagamento .pagamento-opcao * {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-user-select: none !important;
    user-select: none !important;
  }

  #pagina-pagamento .pagamento-opcao {
    display: block !important;
    min-width: 0 !important;
    cursor: pointer !important;
  }

  #pagina-pagamento .pagamento-opcao input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    pointer-events: none !important;
  }

  #pagina-pagamento .pagamento-opcao-conteudo {
    min-height: 62px !important;
    padding: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    border-radius: 12px !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    background: #f8fafc !important;
    color: #111827 !important;
    box-shadow: none !important;
    transition: transform 0.14s ease, filter 0.14s ease, background 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease !important;
    box-sizing: border-box !important;
  }

  #pagina-pagamento .pagamento-opcao:active .pagamento-opcao-conteudo {
    transform: scale(0.985) !important;
    filter: brightness(0.98) !important;
  }

  #pagina-pagamento .pagamento-opcao-conteudo strong {
    margin: 0 !important;
    color: #111827 !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    font-weight: 900 !important;
    -webkit-text-fill-color: #111827 !important;
  }

  #pagina-pagamento .pagamento-opcao-conteudo p {
    margin: 3px 0 0 !important;
    color: #64748b !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
    -webkit-text-fill-color: #64748b !important;
  }

  #pagina-pagamento .pagamento-opcao input[type="radio"]:checked + .pagamento-opcao-conteudo,
  #pagina-pagamento .pagamento-opcao:has(input[type="radio"]:checked) .pagamento-opcao-conteudo {
    border-color: #7c3aed !important;
    background: rgba(124, 58, 237, 0.07) !important;
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.12) !important;
  }

  #pagina-pagamento #bloco-cartao .grupo-campo {
    margin: 0 0 8px !important;
  }

  #pagina-pagamento #bloco-cartao .grupo-campo label {
    display: block !important;
    margin: 0 0 4px !important;
    color: #475569 !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
    -webkit-text-fill-color: #475569 !important;
  }

  #pagina-pagamento #bloco-cartao input {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 100% !important;
    min-height: 46px !important;
    height: 46px !important;
    padding: 0 12px !important;
    border-radius: 12px !important;
    border: 1px solid #dbe3ef !important;
    background: #ffffff !important;
    color: #0f172a !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    outline: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    -webkit-text-fill-color: #0f172a !important;
  }

  #pagina-pagamento #bloco-cartao input::placeholder {
    color: #94a3b8 !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #94a3b8 !important;
  }

  #pagina-pagamento #bloco-cartao input:focus {
    border-color: #7c3aed !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12) !important;
  }

  #pagina-pagamento #bloco-cartao .linha-dupla {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    align-items: end !important;
  }

  #pagina-pagamento .resumo-pagamento {
    margin-bottom: 8px !important;
  }

  #pagina-pagamento .resumo-lista-pagamento {
    display: grid !important;
    gap: 6px !important;
    margin: 0 0 8px !important;
  }

  #pagina-pagamento .resumo-item-pagamento {
    min-height: 38px !important;
    padding: 8px 10px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(15, 23, 42, 0.07) !important;
    background: #f8fafc !important;
    color: #334155 !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    -webkit-text-fill-color: #334155 !important;
  }

  #pagina-pagamento .linha-resumo {
    min-height: 30px !important;
    padding: 6px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    border-top: 1px solid rgba(15, 23, 42, 0.06) !important;
    color: #64748b !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  #pagina-pagamento .linha-resumo span {
    color: #64748b !important;
    font-weight: 700 !important;
    -webkit-text-fill-color: #64748b !important;
  }

  #pagina-pagamento .linha-resumo strong {
    color: #111827 !important;
    font-weight: 900 !important;
    text-align: right !important;
    white-space: nowrap !important;
    -webkit-text-fill-color: #111827 !important;
  }

  #pagina-pagamento .total-geral {
    margin-top: 6px !important;
    padding: 10px !important;
    min-height: 48px !important;
    border-top: 0 !important;
    border-radius: 12px !important;
    background: rgba(124, 58, 237, 0.08) !important;
    color: #111827 !important;
  }

  #pagina-pagamento .total-geral span {
    color: #111827 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    -webkit-text-fill-color: #111827 !important;
  }

  #pagina-pagamento .total-geral strong {
    color: #7c3aed !important;
    font-size: 19px !important;
    font-weight: 950 !important;
    -webkit-text-fill-color: #7c3aed !important;
  }

  #pagina-pagamento .btn-confirmar-pagamento {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 50px !important;
    height: 50px !important;
    margin: 16px 0 0 !important;
    padding: 0 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: linear-gradient(90deg, #7c3aed, #2563eb) !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    box-shadow: 0 12px 26px rgba(37, 99, 235, 0.24) !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-text-fill-color: #ffffff !important;
  }

  #pagina-pagamento .btn-confirmar-pagamento:active {
    transform: scale(0.985) !important;
    filter: brightness(0.97) !important;
  }
}

/* Pix mobile fullscreen light redesign */
@media (max-width: 767px) {
  #pagina-pix.pagina-pix {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    background: #f4f7fb !important;
    color: #111827 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    z-index: 100320 !important;
  }

  #pagina-pix.pagina-pix.ativa {
    display: block !important;
  }

  #pagina-pix .pagina-pix-conteudo {
    width: 100% !important;
    max-width: none !important;
    min-height: unset !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 12px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    overflow: visible !important;
    background: #f4f7fb !important;
    color: #111827 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }

  #pagina-pix .topo-pix {
    position: sticky !important;
    top: 0 !important;
    z-index: 30 !important;
    width: calc(100% + 24px) !important;
    max-width: none !important;
    min-height: 56px !important;
    margin: 0 -12px 12px !important;
    padding: calc(8px + env(safe-area-inset-top, 0px)) 54px 8px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }

  #pagina-pix .topo-pix h2 {
    margin: 0 !important;
    color: #111827 !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    text-align: center !important;
    -webkit-text-fill-color: #111827 !important;
  }

  #pagina-pix .btn-fechar-pix {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    background: #f8fafc !important;
    color: #111827 !important;
    font-size: 24px !important;
    line-height: 1 !important;
    font-weight: 500 !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-text-fill-color: #111827 !important;
  }

  #pagina-pix #pix-status-pendente {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  #pagina-pix .pix-status-aprovado {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  #pagina-pix .pix-tempo-box,
  #pagina-pix .pix-qrcode-container,
  #pagina-pix .pix-codigo-box,
  #pagina-pix .pix-instrucoes,
  #pagina-pix .pix-status-aprovado {
    width: 100% !important;
    margin: 0 !important;
    padding: 14px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    background: #ffffff !important;
    color: #111827 !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
    box-sizing: border-box !important;
  }

  #pagina-pix .pix-tempo-box {
    text-align: center !important;
  }

  #pagina-pix .pix-tempo-box h3,
  #pagina-pix .pix-codigo-box label,
  #pagina-pix .pix-instrucoes h3 {
    margin: 0 0 8px !important;
    color: #111827 !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    font-weight: 900 !important;
    -webkit-text-fill-color: #111827 !important;
  }

  #pagina-pix .pix-contador {
    margin: 0 !important;
    color: #7c3aed !important;
    font-size: 34px !important;
    line-height: 1.05 !important;
    font-weight: 950 !important;
    font-family: var(--na-font-mono, monospace) !important;
    letter-spacing: 0 !important;
    -webkit-text-fill-color: #7c3aed !important;
  }

  #pagina-pix .pix-vencimento {
    display: block !important;
    margin: 6px 0 0 !important;
    color: #64748b !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    -webkit-text-fill-color: #64748b !important;
  }

  #pagina-pix .pix-qrcode-container {
    min-height: 240px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    text-align: center !important;
  }

  #pagina-pix .pix-qrcode-topo {
    width: 100% !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    color: #111827 !important;
  }

  #pagina-pix .pix-qrcode-topo strong {
    color: #111827 !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
    font-weight: 900 !important;
    -webkit-text-fill-color: #111827 !important;
  }

  #pagina-pix .pix-qrcode-topo span {
    padding: 6px 10px !important;
    border-radius: 999px !important;
    background: rgba(124, 58, 237, 0.08) !important;
    color: #7c3aed !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    -webkit-text-fill-color: #7c3aed !important;
  }

  #pagina-pix .pix-qrcode-imagem {
    width: min(100%, 248px) !important;
    aspect-ratio: 1 !important;
    margin: 0 auto !important;
    padding: 10px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
  }

  #pagina-pix .pix-qrcode-imagem img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: contain !important;
    border-radius: 10px !important;
    image-rendering: pixelated !important;
  }

  #pagina-pix .pix-qrcode-container > p {
    max-width: 100% !important;
    margin: 0 !important;
    color: #64748b !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    font-weight: 600 !important;
    -webkit-text-fill-color: #64748b !important;
  }

  #pagina-pix .pix-codigo-box {
    min-height: 100px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  #pagina-pix .pix-icone {
    display: none !important;
  }

  #pagina-pix .pix-seguro-badge {
    margin: 0 !important;
    padding: 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(124, 58, 237, 0.14) !important;
    background: rgba(124, 58, 237, 0.06) !important;
    color: #111827 !important;
    box-sizing: border-box !important;
  }

  #pagina-pix .pix-seguro-selo {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 999px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #7c3aed, #2563eb) !important;
    color: #ffffff !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    -webkit-text-fill-color: #ffffff !important;
  }

  #pagina-pix .pix-seguro-badge strong {
    display: block !important;
    color: #111827 !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    font-weight: 900 !important;
    -webkit-text-fill-color: #111827 !important;
  }

  #pagina-pix .pix-seguro-badge small {
    display: block !important;
    margin: 2px 0 0 !important;
    color: #64748b !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
    -webkit-text-fill-color: #64748b !important;
  }

  #pagina-pix #codigo-pix-texto {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 100% !important;
    min-height: 94px !important;
    max-height: 128px !important;
    margin: 0 !important;
    padding: 12px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    background: #f3f4f6 !important;
    color: #111827 !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    font-weight: 600 !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
    resize: none !important;
    box-shadow: none !important;
    outline: none !important;
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
    box-sizing: border-box !important;
    -webkit-text-fill-color: #111827 !important;
  }

  #pagina-pix .btn-copiar-pix,
  #pagina-pix .btn-ok-pix {
    width: 100% !important;
    min-height: 50px !important;
    height: 50px !important;
    margin: 0 !important;
    padding: 0 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: linear-gradient(90deg, #7c3aed, #2563eb) !important;
    color: #ffffff !important;
    font-size: 15px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    box-shadow: 0 12px 26px rgba(37, 99, 235, 0.22) !important;
    cursor: pointer !important;
    transition: transform 0.14s ease, filter 0.14s ease !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-text-fill-color: #ffffff !important;
  }

  #pagina-pix .btn-copiar-pix:active,
  #pagina-pix .btn-ok-pix:active {
    transform: scale(0.985) !important;
    filter: brightness(0.97) !important;
    opacity: 1 !important;
  }

  #pagina-pix .pix-instrucoes ol {
    margin: 0 !important;
    padding-left: 18px !important;
    color: #475569 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    font-weight: 600 !important;
  }

  #pagina-pix .pix-instrucoes li {
    margin: 0 0 4px !important;
    color: #475569 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    font-weight: 600 !important;
    -webkit-text-fill-color: #475569 !important;
  }

  #pagina-pix .pix-acoes {
    position: static !important;
    bottom: auto !important;
    z-index: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: unset !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    background: transparent !important;
    box-sizing: border-box !important;
  }

  #pagina-pix .pix-status-aprovado {
    text-align: center !important;
    padding: 22px 14px 14px !important;
  }

  #pagina-pix .pix-aprovado-icone {
    width: 68px !important;
    height: 68px !important;
    margin: 0 auto 14px !important;
    border-radius: 999px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(34, 197, 94, 0.12) !important;
    border: 2px solid rgba(34, 197, 94, 0.38) !important;
    color: #16a34a !important;
    font-size: 34px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    -webkit-text-fill-color: #16a34a !important;
  }

  #pagina-pix .pix-status-aprovado h3 {
    margin: 0 0 8px !important;
    color: #111827 !important;
    font-size: 20px !important;
    line-height: 1.2 !important;
    font-weight: 950 !important;
    -webkit-text-fill-color: #111827 !important;
  }

  #pagina-pix .pix-status-aprovado p {
    margin: 0 0 16px !important;
    color: #64748b !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    font-weight: 600 !important;
    -webkit-text-fill-color: #64748b !important;
  }
}

/* ============================================================
   MOBILE CHECKOUT — Card Pagamento Inline
   Substitui o modal #pagina-pagamento no mobile por um card
   integrado na tela "Finalizar compra", entre Forma de entrega
   e Resumo final. Desktop não é afetado.
   ============================================================ */

/* 1. Oculta o modal separado de pagamento no mobile */
@media (max-width: 767px) {
  #pagina-pagamento,
  #pagina-pagamento.ativa {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* 2. No desktop: oculta o card inline (só existe para mobile) */
@media (min-width: 768px) {
  #card-pagamento-inline {
    display: none !important;
  }
}

/* 3. Estilos do card inline (mobile only) */
@media (max-width: 767px) {

  /* Padding zero no wrapper — filhos controlam espaçamento */
  #pagina-compra.pagina.ativa .pagamento-inline-box {
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* ── Linha header (label + pill button) ─────────────────────── */
  #pagina-compra.pagina.ativa .pagamento-inline-topo-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 14px !important;
    gap: 12px !important;
  }

  /* Grupo label + subtítulo */
  #pagina-compra.pagina.ativa .pagamento-inline-label-group {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
  }

  /* Label uppercase (igual .endereco-topo h3) */
  #pagina-compra.pagina.ativa .pagamento-inline-label {
    margin: 0 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    line-height: 1 !important;
  }

  /* Subtítulo de estado */
  #pagina-compra.pagina.ativa .pagamento-inline-sub {
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #475569 !important;
    -webkit-text-fill-color: #475569 !important;
    line-height: 1.35 !important;
  }

  /* Subtítulo quando método selecionado (cor mais escura) */
  #pagina-compra.pagina.ativa .pagamento-inline-sub-ok {
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    font-weight: 600 !important;
  }

  /* ── Pills Adicionar / Alterar ───────────────────────────────── */
  #pagina-compra.pagina.ativa .pagamento-inline-pill-btn {
    flex-shrink: 0 !important;
    height: 28px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 28px !important;
    border: none !important;
    background: linear-gradient(90deg, #7c3aed, #2563eb) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    white-space: nowrap !important;
    transition: transform 0.12s ease, filter 0.12s ease !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #pagina-compra.pagina.ativa .pagamento-inline-pill-btn:active {
    transform: scale(0.96) !important;
    filter: brightness(0.90) !important;
    opacity: 1 !important;
  }

  /* Pill "Alterar" — versão suave roxo */
  #pagina-compra.pagina.ativa .pagamento-inline-pill-alterar {
    background: rgba(124,58,237,0.10) !important;
    color: #7c3aed !important;
    -webkit-text-fill-color: #7c3aed !important;
  }

  /* ── Seção de seleção (estado 2) ─────────────────────────────── */
  #pagina-compra.pagina.ativa .pagamento-inline-secao-titulo {
    margin: 0 !important;
    padding: 12px 14px 8px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    line-height: 1 !important;
  }

  /* Lista de opções */
  #pagina-compra.pagina.ativa .pagamento-inline-opcoes {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 0 10px 12px !important;
    list-style: none !important;
    margin: 0 !important;
  }

  /* Cada opção */
  #pagina-compra.pagina.ativa .pagamento-inline-opcao {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    position: relative !important;
    width: 100% !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    padding: 14px 16px !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    transition: border-color 0.15s ease, background 0.15s ease !important;
    overflow: visible !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }

  #pagina-compra.pagina.ativa .pagamento-inline-opcao::before {
    content: '' !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    border: 2px solid #d1d5db !important;
    border-radius: 4px !important;
    background: #fff !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
  }

  #pagina-compra.pagina.ativa .pagamento-inline-opcao-debito-legado[hidden] {
    display: none !important;
  }

  #pagina-compra.pagina.ativa .pagamento-inline-opcao:has(input:checked),
  #pagina-compra.pagina.ativa .pagamento-inline-opcao.selecionado,
  #pagina-compra.pagina.ativa .pagamento-inline-opcao.selected {
    border-color: #dbeafe !important;
    background: #f8fbff !important;
    box-shadow: none !important;
  }

  #pagina-compra.pagina.ativa .pagamento-inline-opcao:has(input:checked)::before,
  #pagina-compra.pagina.ativa .pagamento-inline-opcao.selecionado::before,
  #pagina-compra.pagina.ativa .pagamento-inline-opcao.selected::before {
    content: '✓' !important;
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #fff !important;
  }

  #pagina-compra.pagina.ativa .pagamento-inline-opcao:active {
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }

  #pagina-compra.pagina.ativa .pagamento-inline-opcao-conteudo {
    flex: 1 !important;
    min-width: 0 !important;
  }

  /* Input radio: invisible, só semântico */
  #pagina-compra.pagina.ativa .pagamento-inline-opcao input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }

  /* Conteúdo interno da opção */
  #pagina-compra.pagina.ativa .pagamento-inline-opcao-conteudo {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #pagina-compra.pagina.ativa .pagamento-opcao-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-bottom: 5px !important;
    width: 100% !important;
  }

  #pagina-compra.pagina.ativa .pagamento-opcao-titulo,
  #pagina-compra.pagina.ativa .pagamento-inline-opcao-conteudo strong {
    display: inline-flex !important;
    align-items: center !important;
    flex-direction: row !important;
    gap: 8px !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    margin: 0 !important;
    line-height: 1.1 !important;
    min-width: 0 !important;
    white-space: nowrap !important;
  }

  #pagina-compra.pagina.ativa .pagamento-metodo-simbolo {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
    opacity: 1 !important;
    transform: none !important;
    vertical-align: middle !important;
  }

  #pagina-compra.pagina.ativa .pagamento-opcao-subtitulo,
  #pagina-compra.pagina.ativa .pagamento-inline-opcao-conteudo span:not(.pagamento-metodo-simbolo) {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
    display: block !important;
    margin: 0 !important;
  }

  #pagina-compra.pagina.ativa .pagamento-opcao-vazio {
    margin: 0 !important;
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
    font-size: 13px !important;
    font-weight: 700 !important;
  }

  #pagina-compra.pagina.ativa .pagamento-opcao-detalhe {
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    margin: 0 !important;
  }

  #pagina-compra.pagina.ativa .pagamento-inline-card-actions {
    display: contents !important;
  }

  #pagina-compra.pagina.ativa .btn-adicionar-cartao,
  #pagina-compra.pagina.ativa .btn-editar-cartao {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    min-height: 26px !important;
    height: 26px !important;
    width: auto !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    border: none !important;
    background: #F97316 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    gap: 4px !important;
    box-shadow: 0 4px 10px rgba(249, 115, 22, 0.18) !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
  }

  #pagina-compra.pagina.ativa .btn-adicionar-cartao[hidden],
  #pagina-compra.pagina.ativa .btn-editar-cartao[hidden],
  #pagina-compra.pagina.ativa .btn-adicionar-cartao[style*="display:none"],
  #pagina-compra.pagina.ativa .btn-editar-cartao[style*="display:none"],
  #pagina-compra.pagina.ativa .btn-adicionar-cartao[style*="display: none"],
  #pagina-compra.pagina.ativa .btn-editar-cartao[style*="display: none"],
  #pagina-compra.pagina.ativa .btn-adicionar-cartao.is-hidden,
  #pagina-compra.pagina.ativa .btn-editar-cartao.is-hidden {
    display: none !important;
  }

  #pagina-compra.pagina.ativa .btn-adicionar-cartao:active,
  #pagina-compra.pagina.ativa .btn-editar-cartao:active {
    transform: scale(0.96) !important;
    filter: brightness(0.96) !important;
  }

  #pagina-compra.pagina.ativa .checkout-alerta-validacao {
    margin: 12px 0 0 !important;
    padding: 12px 14px !important;
    border-radius: 14px !important;
    background: rgba(249, 115, 22, 0.12) !important;
    border: 1px solid rgba(249, 115, 22, 0.28) !important;
    color: #9a3412 !important;
    -webkit-text-fill-color: #9a3412 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    align-items: center !important;
    gap: 9px !important;
  }

  #pagina-compra.pagina.ativa .checkout-alerta-validacao[style*="display:none"],
  #pagina-compra.pagina.ativa .checkout-alerta-validacao[style*="display: none"] {
    display: none !important;
  }

  #pagina-compra.pagina.ativa .checkout-alerta-icone {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #F97316 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
  }

  #pagina-compra.pagina.ativa .checkout-card-erro {
    border-color: #F97316 !important;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.16) !important;
  }

  /* ── Banner de segurança (estado cartão) ─────────────────────── */
  #pagina-compra.pagina.ativa .pagamento-inline-seguranca {
    margin: 4px 10px 10px !important;
    padding: 10px 14px !important;
    background: rgba(124,58,237,0.05) !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #374151 !important;
    -webkit-text-fill-color: #374151 !important;
    line-height: 1.4 !important;
  }

  /* ── Área do Mercado Pago Card Brick ─────────────────────────── */
  #pagina-compra.pagina.ativa #pagamento-inline-brick-area {
    padding: 0 10px 12px !important;
  }

  /* bloco-cartao quando movido para dentro do card inline */
  #pagina-compra.pagina.ativa #bloco-cartao {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
  }

  /* Mantém -webkit-tap-highlight-color limpo nos novos elementos */
  #pagina-compra .pagamento-inline-box *,
  #pagina-compra .pagamento-inline-opcao,
  #pagina-compra .pagamento-inline-opcao * {
    -webkit-tap-highlight-color: transparent !important;
  }
}

/* ============================================================
   Fix: Cards checkout mobile — edge-to-edge + lista separada
   Problema 1: gap/margin exagerado entre cards
   Problema 2: cards com margens laterais (não full-width)
   Regra: só mobile. Desktop inalterado.
   ============================================================ */
@media (max-width: 767px) {

  /* Container: remove padding lateral (causava margens nos cards) */
  /* e corrige padding-bottom excessivo (era 130px de versão anterior) */
  #pagina-compra.pagina.ativa .compra-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Seção de cards: zero gap, zero margin */
  #pagina-compra.pagina.ativa .compra-secoes-alinhadas {
    gap: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Todos os cards: full-width, sem radius, sem sombra, separador inferior */
  #pagina-compra.pagina.ativa .compra-resumo-itens,
  #pagina-compra.pagina.ativa .endereco-box,
  #pagina-compra.pagina.ativa .frete-box-compra,
  #pagina-compra.pagina.ativa .pagamento-inline-box,
  #pagina-compra.pagina.ativa .compra-resumo-final {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 1px solid #e5e7eb !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }

  /* Último card: remove separador inferior */
  #pagina-compra.pagina.ativa .compra-resumo-final {
    border-bottom: none !important;
  }

  /* Separador superior no primeiro card para fechamento visual */
  #pagina-compra.pagina.ativa .compra-resumo-itens {
    border-top: 1px solid #e5e7eb !important;
  }
}

/* ============================================================
   Fix: Espaço entre header e primeiro card — checkout mobile
   ============================================================ */
@media (max-width: 767px) {
  #pagina-compra.pagina.ativa .compra-container {
    padding-top: 0 !important;
  }
}

/* ============================================================
   Tela dedicada de cartão — mobile
   ============================================================ */
#card-list-screen,
#card-payment-screen,
#parcelas-sheet-overlay,
#card-processing-screen,
#card-payment-result-screen {
  display: none;
}

@media (max-width: 767px) {

  /* Tela cheia: hidden por padrão, .active a exibe */
  #card-list-screen,
  #card-payment-screen {
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #f5f7fb !important;
    z-index: 100500 !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    transform: none !important;
    box-sizing: border-box !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }
  #card-list-screen.active,
  #card-payment-screen.active {
    display: flex !important;
  }

  html.payment-card-open,
  body.payment-card-open {
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: 100% !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  #card-list-screen,
  #card-list-screen *,
  #card-payment-screen,
  #card-payment-screen * {
    box-sizing: border-box !important;
    max-width: 100% !important;
  }

  .pagamento-inline-card-detail {
    margin-top: 3px !important;
    color: #4b5563 !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
  }

  /* Header sticky */
  .card-screen-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    width: 100% !important;
    max-width: 100% !important;
    background: #ffffff !important;
    border-bottom: 1px solid #e5e7eb !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px !important;
    min-height: 52px !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
  }

  .card-screen-header h2 {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #111827 !important;
    margin: 0 !important;
    flex: 1 !important;
    min-width: 0 !important;
    text-align: left !important;
  }

  #card-screen-close {
    display: none !important;
  }

  .card-nav-btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    color: #111827 !important;
    padding: 0 !important;
    cursor: pointer !important;
    min-width: 44px !important;
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .card-nav-btn svg {
    width: 25px !important;
    height: 25px !important;
    stroke: currentColor !important;
    flex-shrink: 0 !important;
  }

  .card-nav-btn:hover {
    background: transparent !important;
    box-shadow: none !important;
  }

  /* Corpo scrollável */
  .card-screen-body {
    padding: 12px 10px calc(32px + env(safe-area-inset-bottom, 0px)) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 520px !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    overflow-x: hidden !important;
    flex: 1 1 auto !important;
    box-sizing: border-box !important;
  }

  /* Banner segurança */
  .card-security-banner {
    width: 100% !important;
    background: rgba(124, 58, 237, 0.06) !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    color: #6b7280 !important;
    line-height: 1.4 !important;
  }

  /* Cartões aceitos */
  .card-accepted-section {
    width: 100% !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    padding: 14px !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .card-accepted-title {
    font-size: 13px !important;
    color: #6b7280 !important;
    margin: 0 0 10px !important;
  }

  .card-accepted-logos {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }

  .card-logo-item {
    border: 1.5px solid #e5e7eb !important;
    border-radius: 6px !important;
    padding: 4px 9px 4px 6px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #374151 !important;
    background: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    min-height: 26px !important;
    line-height: 1 !important;
  }

  .card-logo-icon,
  .card-logo-img {
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 16px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    object-fit: contain !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  .card-logo-icon-visa {
    background: #1a1f71 !important;
    color: #ffffff !important;
  }

  .card-logo-icon-elo {
    background: #111827 !important;
    color: #facc15 !important;
  }

  .card-logo-icon-amex {
    background: #2563eb !important;
    color: #ffffff !important;
  }

  .card-logo-icon-hiper {
    background: #b91c1c !important;
    color: #ffffff !important;
  }

  /* Seções de formulário */
  .card-form-section {
    background: #ffffff !important;
    border-radius: 12px !important;
    padding: 14px !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06) !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  .card-section-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #111827 !important;
    margin: 0 0 12px !important;
    padding-bottom: 9px !important;
    border-bottom: 1px solid #f3f4f6 !important;
    line-height: 1.2 !important;
  }

  /* Labels */
  .card-form-section label {
    font-size: 12.5px !important;
    color: #374151 !important;
    -webkit-text-fill-color: #374151 !important;
    font-weight: 500 !important;
    margin-bottom: 6px !important;
    display: block !important;
    line-height: 1.2 !important;
  }

  /* Inputs e selects */
  .card-field {
    width: 100% !important;
    box-sizing: border-box !important;
    border: 1.5px solid #e5e7eb !important;
    border-radius: 10px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    padding: 0 14px !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    margin-bottom: 11px !important;
    background: #ffffff !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    display: block !important;
    font-family: inherit !important;
    outline: none !important;
    min-width: 0 !important;
  }

  .card-field:focus {
    border-color: #7c3aed !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.08) !important;
  }

  .card-field:last-child {
    margin-bottom: 0 !important;
  }

  .card-mp-secure-field {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    padding: 0 14px !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
  }

  .card-mp-secure-field iframe {
    width: 100% !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    border: 0 !important;
    display: block !important;
  }

  /* Select com chevron */
  select.card-field {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px !important;
    padding-right: 36px !important;
    cursor: pointer !important;
  }

  #card-installments.card-installments-native {
    display: none !important;
  }

  .card-installments-trigger {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    text-align: left !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    cursor: pointer !important;
  }

  .card-installments-chevron {
    color: #7c3aed !important;
    font-size: 18px !important;
    line-height: 1 !important;
    transform: translateY(-1px) !important;
  }

  .card-field.campo-erro {
    border-color: #ef4444 !important;
    background: #fff7f7 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.08) !important;
  }

  .card-form-error {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    background: #fef2f2 !important;
    color: #b91c1c !important;
    border: 1px solid #fecaca !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
  }

  .card-form-error[style*="display:none"],
  .card-form-error[style*="display: none"] {
    display: none !important;
  }

  .card-list-body {
    gap: 12px !important;
  }

  .card-list-section {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .estado-vazio-cartoes-checkout {
    display: block !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    background: #f8fafc !important;
    padding: 14px !important;
    color: #64748b !important;
  }

  .estado-vazio-cartoes-checkout[style*="display:none"],
  .estado-vazio-cartoes-checkout[style*="display: none"] {
    display: none !important;
  }

  .estado-vazio-cartoes-checkout p {
    margin: 0 !important;
  }

  .estado-vazio-cartoes-checkout .estado-vazio-titulo {
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1.25 !important;
  }

  .estado-vazio-cartoes-checkout .estado-vazio-subtexto {
    margin-top: 4px !important;
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
  }

  .lista-cartoes-salvos-checkout {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .item-cartao-salvo {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    width: 100% !important;
    padding: 12px !important;
    border-radius: 12px !important;
    border: 1px solid #e5e7eb !important;
    background: #f8fafc !important;
    color: #0f172a !important;
    cursor: pointer !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .item-cartao-salvo.ativo {
    background: rgba(123, 51, 255, 0.08) !important;
    border-color: #3483FA !important;
    box-shadow: 0 0 0 2px rgba(123, 51, 255, 0.14) !important;
  }

  .item-cartao-salvo:active {
    transform: scale(0.985) !important;
    filter: brightness(0.97) !important;
  }

  .item-cartao-topo {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  .tag-cartao-salvo {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 24px !important;
    padding: 0 9px !important;
    border-radius: 999px !important;
    background: rgba(123, 51, 255, 0.12) !important;
    border: 1px solid rgba(123, 51, 255, 0.16) !important;
    color: #3483FA !important;
    -webkit-text-fill-color: #3483FA !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  .btn-editar-cartao-lista {
    min-height: 26px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(249, 115, 22, 0.22) !important;
    background: rgba(249, 115, 22, 0.10) !important;
    color: #ea580c !important;
    -webkit-text-fill-color: #ea580c !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
  }

  .item-cartao-salvo strong {
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere !important;
  }

  .item-cartao-salvo p,
  .item-cartao-status {
    margin: 0 !important;
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
  }

  .item-cartao-salvo.ativo .item-cartao-status {
    color: #3483FA !important;
    -webkit-text-fill-color: #3483FA !important;
    font-weight: 900 !important;
  }

  .card-list-footer {
    width: 100% !important;
  }

  .btn-adicionar-cartao-lista {
    width: 100% !important;
  }

  /* CVV hint */
  .card-cvv-hint {
    font-size: 11px !important;
    color: #9ca3af !important;
    display: block !important;
    margin-top: -6px !important;
    margin-bottom: 10px !important;
    line-height: 1.2 !important;
  }

  /* Linha de 2 colunas */
  .card-row {
    display: flex !important;
    gap: 10px !important;
    width: 100% !important;
    align-items: flex-start !important;
  }

  .card-col {
    flex: 1 !important;
    min-width: 0 !important;
  }

  /* Botão confirmar */
  .card-confirm-wrapper {
    padding: 4px 0 8px !important;
  }

  .btn-primary-card {
    background: linear-gradient(90deg, #7c3aed, #2563eb) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 15px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    width: 100% !important;
    cursor: pointer !important;
    font-family: inherit !important;
    -webkit-tap-highlight-color: transparent !important;
    display: block !important;
    transition: transform 0.1s ease, filter 0.1s ease !important;
  }

  .btn-primary-card:active {
    transform: scale(0.985) !important;
    filter: brightness(0.97) !important;
  }

  .parcelas-sheet-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 100700 !important;
    background: rgba(15, 23, 42, 0.45) !important;
    display: none !important;
    align-items: flex-end !important;
    justify-content: center !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .parcelas-sheet-overlay.ativa {
    display: flex !important;
  }

  .parcelas-sheet {
    width: 100% !important;
    max-width: 520px !important;
    background: #ffffff !important;
    border-radius: 22px 22px 0 0 !important;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    box-shadow: 0 -14px 40px rgba(15, 23, 42, 0.18) !important;
    box-sizing: border-box !important;
  }

  .parcelas-sheet-topo {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 10px !important;
  }

  .parcelas-sheet-topo h3 {
    margin: 0 !important;
    color: #111827 !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
  }

  .parcelas-sheet-fechar {
    width: 36px !important;
    height: 36px !important;
    border-radius: 999px !important;
    border: 1px solid #e5e7eb !important;
    background: #ffffff !important;
    color: #111827 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
  }

  .parcelas-sheet-lista {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }

  .parcela-opcao {
    width: 100% !important;
    min-height: 48px !important;
    border-radius: 14px !important;
    padding: 0 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border: 0 !important;
    background: #ffffff !important;
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #111827 !important;
    text-align: left !important;
    cursor: pointer !important;
  }

  .parcela-opcao.selecionada {
    background: rgba(124, 58, 237, 0.08) !important;
    color: #7c3aed !important;
  }

  .parcela-opcao.selecionada::after {
    content: "✓" !important;
    font-size: 16px !important;
    font-weight: 900 !important;
  }

  .card-processing-screen {
    position: fixed !important;
    inset: 0 !important;
    z-index: 100800 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: #f5f7fb !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px !important;
    box-sizing: border-box !important;
  }

  .card-processing-screen.ativa {
    display: flex !important;
  }

  .card-processing-box {
    width: 100% !important;
    max-width: 320px !important;
    text-align: center !important;
    color: #111827 !important;
    font-family: inherit !important;
  }

  .card-processing-box strong {
    display: block !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    margin-top: 14px !important;
    letter-spacing: 0 !important;
  }

  .card-processing-box p {
    margin: 8px 0 0 !important;
    color: #6b7280 !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
  }

  .card-processing-spinner {
    width: 42px !important;
    height: 42px !important;
    margin: 0 auto !important;
    border-radius: 50% !important;
    border: 4px solid rgba(124, 58, 237, 0.16) !important;
    border-top-color: #7c3aed !important;
    animation: card-processing-spin 0.8s linear infinite !important;
  }

  .card-payment-result-screen {
    position: fixed !important;
    inset: 0 !important;
    z-index: 100810 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: #f5f7fb !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px !important;
    box-sizing: border-box !important;
  }

  .card-payment-result-screen.ativa {
    display: flex !important;
  }

  .card-payment-result-box {
    width: 100% !important;
    max-width: 340px !important;
    padding: 24px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(17, 24, 39, 0.08) !important;
    background: #ffffff !important;
    box-shadow: 0 20px 55px rgba(15, 23, 42, 0.12) !important;
    color: #111827 !important;
    text-align: center !important;
    font-family: inherit !important;
    box-sizing: border-box !important;
  }

  .card-payment-result-icon {
    width: 48px !important;
    height: 48px !important;
    margin: 0 auto 14px !important;
    border-radius: 999px !important;
    display: grid !important;
    place-items: center !important;
    font-size: 24px !important;
    font-weight: 900 !important;
    background: #dcfce7 !important;
    color: #166534 !important;
  }

  .card-payment-result-screen.analise .card-payment-result-icon {
    background: rgba(249, 115, 22, 0.14) !important;
    color: #9a3412 !important;
  }

  .card-payment-result-screen.recusado .card-payment-result-icon,
  .card-payment-result-screen.erro .card-payment-result-icon {
    background: rgba(239, 68, 68, 0.12) !important;
    color: #991b1b !important;
  }

  .card-payment-result-box strong {
    display: block !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
  }

  .card-payment-result-box p {
    margin: 10px 0 0 !important;
    color: #475569 !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
  }

  .card-payment-result-box small {
    display: block !important;
    margin-top: 10px !important;
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 800 !important;
  }

  .card-payment-result-actions {
    display: grid !important;
    gap: 10px !important;
    margin-top: 18px !important;
  }

  .card-payment-result-actions button {
    min-height: 42px !important;
    border-radius: 999px !important;
    border: 0 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    cursor: pointer !important;
  }

  #card-payment-result-order {
    background: #F97316 !important;
    color: #ffffff !important;
  }

  #card-payment-result-store {
    background: #f1f5f9 !important;
    color: #111827 !important;
  }

  @keyframes card-processing-spin {
    to {
      transform: rotate(360deg);
    }
  }
}

/* Checkout compra final override: topo, produtos e pin mobile. */
@media (min-width: 768px) {
  #pagina-compra.pagina.ativa .compra-header-mobile {
    position: sticky !important;
    top: 18px !important;
    z-index: 80 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: 100% !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  #pagina-compra.pagina.ativa .compra-header-titulo {
    display: none !important;
  }

  #pagina-compra.pagina.ativa .btn-fechar-compra {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: auto !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    background: rgba(255, 255, 255, 0.075) !important;
    color: #f8fafc !important;
    -webkit-text-fill-color: #f8fafc !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    cursor: pointer !important;
  }

  #pagina-compra.pagina.ativa .btn-fechar-compra:hover,
  #pagina-compra.pagina.ativa .btn-fechar-compra:focus-visible {
    background: rgba(124, 58, 237, 0.22) !important;
    border-color: rgba(167, 139, 250, 0.48) !important;
    outline: none !important;
  }

  #pagina-compra.pagina.ativa .btn-fechar-compra:active {
    transform: scale(0.94) !important;
  }

  #pagina-compra.pagina.ativa .btn-fechar-compra::before,
  #pagina-compra.pagina.ativa .btn-fechar-compra::after {
    content: none !important;
    display: none !important;
  }

  #pagina-compra.pagina.ativa .compra-card {
    margin-top: 0 !important;
    position: relative !important;
    overflow: visible !important;
  }

  #pagina-compra.pagina.ativa .compra-direita,
  #pagina-compra.pagina.ativa .compra-quantidade-info {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
  }

  #pagina-compra.pagina.ativa .compra-quantidade-info {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    clear: both !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    color: #a1a1aa !important;
    -webkit-text-fill-color: #a1a1aa !important;
  }

  #pagina-compra.pagina.ativa .compra-resumo-topo {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin-bottom: 14px !important;
  }

  #pagina-compra.pagina.ativa #compra-resumo-contagem {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 28px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    background: rgba(124, 58, 237, 0.16) !important;
    color: #ddd6fe !important;
    -webkit-text-fill-color: #ddd6fe !important;
    border: 1px solid rgba(167, 139, 250, 0.28) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
  }

  #pagina-compra.pagina.ativa .lista-compra-itens {
    display: grid !important;
    gap: 10px !important;
  }

  #pagina-compra.pagina.ativa .compra-item-resumo.compra-item-card {
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) minmax(126px, auto) !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 14px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: rgba(255, 255, 255, 0.045) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  }

  #pagina-compra.pagina.ativa .compra-item-resumo-imagem {
    width: 72px !important;
    height: 72px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background: #f8fafc !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #71717a !important;
    -webkit-text-fill-color: #71717a !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    text-align: center !important;
  }

  #pagina-compra.pagina.ativa .compra-item-resumo-imagem img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
  }

  #pagina-compra.pagina.ativa .compra-item-resumo-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    min-width: 0 !important;
  }

  #pagina-compra.pagina.ativa .compra-item-resumo-info strong {
    color: #f8fafc !important;
    -webkit-text-fill-color: #f8fafc !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere !important;
  }

  #pagina-compra.pagina.ativa .compra-item-resumo-marca {
    color: #a1a1aa !important;
    -webkit-text-fill-color: #a1a1aa !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
  }

  #pagina-compra.pagina.ativa .compra-item-resumo-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  #pagina-compra.pagina.ativa .compra-item-resumo-meta span {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 24px !important;
    padding: 0 9px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: #cbd5e1 !important;
    -webkit-text-fill-color: #cbd5e1 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }

  #pagina-compra.pagina.ativa .compra-item-resumo-preco {
    justify-self: end !important;
    text-align: right !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    min-width: 112px !important;
  }

  #pagina-compra.pagina.ativa .compra-item-resumo-preco span {
    color: #a1a1aa !important;
    -webkit-text-fill-color: #a1a1aa !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
  }

  #pagina-compra.pagina.ativa .compra-item-resumo-preco strong {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 17px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 767px) {
  #pagina-compra.pagina.ativa .btn-fechar-compra {
    background: #ede9fe !important;
    border-color: rgba(124, 58, 237, 0.18) !important;
    color: #5b21b6 !important;
    -webkit-text-fill-color: #5b21b6 !important;
    box-shadow: 0 6px 16px rgba(88, 28, 135, 0.12) !important;
  }

  #pagina-compra.pagina.ativa .btn-fechar-compra:focus-visible {
    outline: 3px solid rgba(124, 58, 237, 0.24) !important;
    outline-offset: 2px !important;
  }

  #pagina-compra.pagina.ativa #endereco-preenchido::before {
    content: "" !important;
    background-color: rgba(220, 38, 38, 0.08) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23dc2626'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center 40% !important;
    background-size: 18px 18px !important;
    border: none !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
  }

  #pagina-compra.pagina.ativa .compra-resumo-topo {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
  }

  #pagina-compra.pagina.ativa #compra-resumo-contagem {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 24px !important;
    padding: 0 9px !important;
    border-radius: 999px !important;
    background: rgba(124, 58, 237, 0.10) !important;
    color: #6d28d9 !important;
    -webkit-text-fill-color: #6d28d9 !important;
    font-size: 10.5px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
  }

  #pagina-compra.pagina.ativa .lista-compra-itens {
    display: grid !important;
    gap: 8px !important;
  }

  #pagina-compra.pagina.ativa .compra-item-resumo.compra-item-card {
    display: grid !important;
    grid-template-columns: 80px minmax(0, 1fr) !important;
    grid-template-areas:
      "imagem info"
      "imagem preco" !important;
    gap: 0 14px !important;
    align-items: start !important;
    padding: 14px !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 1px 4px rgba(15,23,42,0.05) !important;
  }

  #pagina-compra.pagina.ativa .compra-item-resumo-imagem {
    grid-area: imagem !important;
    width: 80px !important;
    height: 80px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: #f8fafc !important;
    border: 1px solid #e8edf2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #94a3b8 !important;
    -webkit-text-fill-color: #94a3b8 !important;
    font-size: 9px !important;
    font-weight: 500 !important;
    text-align: center !important;
  }

  #pagina-compra.pagina.ativa .compra-item-resumo-imagem img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
  }

  #pagina-compra.pagina.ativa .compra-item-resumo-info {
    grid-area: info !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    padding-bottom: 8px !important;
  }

  #pagina-compra.pagina.ativa .compra-item-resumo-info strong {
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    overflow-wrap: anywhere !important;
  }

  #pagina-compra.pagina.ativa .compra-item-resumo-marca {
    color: #7b33ff !important;
    -webkit-text-fill-color: #7b33ff !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
  }

  #pagina-compra.pagina.ativa .compra-item-resumo-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    margin-top: 2px !important;
  }

  #pagina-compra.pagina.ativa .compra-item-resumo-meta span {
    display: inline !important;
    min-height: auto !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    border: none !important;
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
  }

  #pagina-compra.pagina.ativa .compra-item-resumo-meta span + span::before {
    content: " · " !important;
    color: #cbd5e1 !important;
    -webkit-text-fill-color: #cbd5e1 !important;
  }

  #pagina-compra.pagina.ativa .compra-item-resumo-preco {
    grid-area: preco !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    padding: 8px 0 0 !important;
    border-top: 1px solid #f1f5f9 !important;
    text-align: left !important;
  }

  #pagina-compra.pagina.ativa .compra-item-resumo-preco span {
    color: #94a3b8 !important;
    -webkit-text-fill-color: #94a3b8 !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
  }

  #pagina-compra.pagina.ativa .compra-item-resumo-preco strong {
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 767px) {
  #pagina-home {
    position: relative !important;
    overflow-x: hidden !important;
    background: #f5f7fb !important;
  }

  #mobile-promos.bc-wrapper {
    position: relative !important;
    overflow: visible !important;
    background: transparent !important;
    z-index: 2 !important;
    isolation: isolate !important;
  }

  #mobile-promos.bc-wrapper::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: -16px !important;
    right: -16px !important;
    top: -72px !important;
    height: calc(100% + 92px) !important;
    background: linear-gradient(135deg, #7c3aed 0%, #2563eb 100%) !important;
    z-index: -3 !important;
    pointer-events: none !important;
  }

  #mobile-promos.bc-wrapper::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: -22% !important;
    right: -22% !important;
    bottom: -38px !important;
    height: 76px !important;
    background: #f5f7fb !important;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0 !important;
    z-index: -2 !important;
    pointer-events: none !important;
  }

  #mobile-promos .bc-clip,
  #mobile-promos .bc-track,
  #mobile-promos .bc-slide,
  #mobile-promos .bc-dots {
    position: relative !important;
    z-index: 2 !important;
  }

  #grade-produtos,
  .produtos {
    position: relative !important;
    z-index: 3 !important;
  }
}

/* ============================================================
   Checkout mobile compacto: endereco + forma de pagamento
   Apenas ajustes visuais. Desktop e logica inalterados.
   ============================================================ */
@media (max-width: 767px) {
  #pagina-compra.pagina.ativa .endereco-box,
  #pagina-compra.pagina.ativa .pagamento-inline-box {
    min-height: auto !important;
  }

  #pagina-compra.pagina.ativa .endereco-topo {
    padding: 8px 12px 6px !important;
  }

  #pagina-compra.pagina.ativa .endereco-topo h3,
  #pagina-compra.pagina.ativa .pagamento-inline-label {
    font-size: 11px !important;
    line-height: 1 !important;
  }

  #pagina-compra.pagina.ativa .endereco-topo::after {
    height: 24px !important;
    line-height: 24px !important;
    padding: 0 9px !important;
    font-size: 10.5px !important;
  }

  #pagina-compra.pagina.ativa #endereco-preenchido {
    min-height: auto !important;
    padding: 10px 12px 10px 44px !important;
  }

  #pagina-compra.pagina.ativa #endereco-preenchido::before {
    left: 10px !important;
    top: 10px !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 10px !important;
    line-height: 28px !important;
    font-size: 13px !important;
  }

  #pagina-compra.pagina.ativa #mostrar-nome {
    font-size: 12px !important;
    line-height: 1.2 !important;
    margin: 0 0 2px !important;
  }

  #pagina-compra.pagina.ativa #mostrar-whats,
  #pagina-compra.pagina.ativa #mostrar-endereco,
  #pagina-compra.pagina.ativa #mostrar-localizacao {
    font-size: 11px !important;
    line-height: 1.28 !important;
    margin: 0 0 1px !important;
  }

  #pagina-compra.pagina.ativa #endereco-vazio {
    padding: 12px !important;
    margin: 4px !important;
    border-radius: 12px !important;
  }

  #pagina-compra.pagina.ativa #endereco-vazio strong {
    font-size: 13px !important;
    line-height: 1.2 !important;
    margin: 0 0 4px !important;
  }

  #pagina-compra.pagina.ativa #endereco-vazio p {
    font-size: 11px !important;
    line-height: 1.3 !important;
    margin: 0 0 10px !important;
  }

  #pagina-compra.pagina.ativa .endereco-vazio-btn {
    min-height: 36px !important;
    padding: 0 12px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    line-height: 36px !important;
  }

  #pagina-compra.pagina.ativa .pagamento-inline-topo-row {
    padding: 8px 12px !important;
    gap: 8px !important;
  }

  #pagina-compra.pagina.ativa .pagamento-inline-label-group {
    gap: 2px !important;
  }

  #pagina-compra.pagina.ativa .pagamento-inline-sub {
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  #pagina-compra.pagina.ativa .pagamento-inline-pill-btn {
    height: 26px !important;
    min-height: 26px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
    line-height: 26px !important;
  }

  #pagina-compra.pagina.ativa .pagamento-inline-secao-titulo {
    padding: 10px 12px 6px !important;
    font-size: 13px !important;
    line-height: 1 !important;
  }

  #pagina-compra.pagina.ativa .pagamento-inline-opcoes {
    gap: 6px !important;
    padding: 0 8px 10px !important;
  }

  #pagina-compra.pagina.ativa .pagamento-inline-opcao {
    min-height: auto !important;
    padding: 10px 12px !important;
    border-radius: 14px !important;
  }

  #pagina-compra.pagina.ativa .pagamento-inline-opcao-conteudo {
    gap: 2px !important;
  }

  #pagina-compra.pagina.ativa .pagamento-opcao-header {
    gap: 8px !important;
    margin-bottom: 3px !important;
  }

  #pagina-compra.pagina.ativa .pagamento-opcao-titulo,
  #pagina-compra.pagina.ativa .pagamento-inline-opcao-conteudo strong {
    gap: 7px !important;
    font-size: 13px !important;
    line-height: 1.15 !important;
  }

  #pagina-compra.pagina.ativa .pagamento-metodo-simbolo {
    width: 16px !important;
    height: 16px !important;
    font-size: 14px !important;
  }

  #pagina-compra.pagina.ativa .pagamento-opcao-subtitulo,
  #pagina-compra.pagina.ativa .pagamento-inline-opcao-conteudo span:not(.pagamento-metodo-simbolo),
  #pagina-compra.pagina.ativa .pagamento-opcao-vazio,
  #pagina-compra.pagina.ativa .pagamento-opcao-detalhe,
  #pagina-compra.pagina.ativa .pagamento-inline-card-detail {
    font-size: 11px !important;
    line-height: 1.25 !important;
    margin-top: 2px !important;
  }

  #pagina-compra.pagina.ativa .btn-adicionar-cartao,
  #pagina-compra.pagina.ativa .btn-editar-cartao {
    min-height: 24px !important;
    height: 24px !important;
    padding: 0 9px !important;
    font-size: 10.5px !important;
    border-radius: 999px !important;
  }
}


/* ============================================================
   FIX — Mobile home product cards:
   1. Full-width divider between image and description
   2. Clean cart button (no halo/shadow artifact)
   3. Full product image (no cropping)
   Mobile only. Desktop unchanged.
   ============================================================ */
@media (max-width: 767px) {
  /* Fix 1: Image wrapper bleeds to card edges (card has padding:5px) so border-bottom spans full width */
  #pagina-home .produto-img-wrap,
  [data-theme="light"] #pagina-home .produto-img-wrap {
    width: calc(100% + 10px) !important;
    margin: -5px -5px 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.88) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }

  /* Fix 2: Cart button — no shadow, keep only gradient background */
  #pagina-home .produto-btn-cart,
  [data-theme="light"] #pagina-home .produto-btn-cart {
    box-shadow: none !important;
    filter: none !important;
  }

  #pagina-home .produto-btn-cart.adicionado,
  [data-theme="light"] #pagina-home .produto-btn-cart.adicionado {
    box-shadow: none !important;
  }

  /* Remove pseudo-element glow if any */
  #pagina-home .produto-btn-cart::before,
  #pagina-home .produto-btn-cart::after,
  [data-theme="light"] #pagina-home .produto-btn-cart::before,
  [data-theme="light"] #pagina-home .produto-btn-cart::after {
    display: none !important;
    content: none !important;
  }
}

/* ── Home: Seção de categorias mobile ───────────────────────────────── */
.home-categories-section {
  display: none;
}

@media (max-width: 767px) {
  /* Separador quando o banner estiver visível acima */
  #mobile-promos.bc-wrapper:not([hidden]) + .home-categories-section {
    border-top: none !important;
    padding-top: 0 !important;
  }

  /* Container da seção */
  .home-categories-section {
    display: block !important;
    width: 100% !important;
    padding: 8px 0 0 !important;
    margin-bottom: 12px !important;
    overflow: visible !important;
    background: transparent !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 10 !important;
  }

  /* Faixa horizontal com scroll */
  .categories-scroll {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 14px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 8px 16px 8px !important;
    scrollbar-width: none !important;
    box-sizing: border-box !important;
  }

  .categories-scroll::-webkit-scrollbar {
    display: none !important;
  }

  /* Botão de cada categoria */
  .category-chip {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 72px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
    transition: transform 0.13s ease !important;
  }

  .category-chip:active {
    transform: scale(0.88) !important;
  }

  /* Círculo — container da imagem */
  .cat-circle {
    width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.10) !important;
    flex-shrink: 0 !important;
    -webkit-text-fill-color: inherit !important;
    letter-spacing: 0 !important;
    transition: box-shadow 0.18s !important;
  }

  /* Imagem dentro do círculo */
  .cat-circle img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: block !important;
    background: transparent !important;
  }

  /* Label */
  .category-chip > span {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #374151 !important;
    -webkit-text-fill-color: #374151 !important;
    line-height: 1.1 !important;
    text-align: center !important;
    white-space: nowrap !important;
    max-width: 72px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Estado ativo: anel roxo */
  .category-chip.active .cat-circle {
    outline: 2.5px solid #7c3aed !important;
    outline-offset: 2px !important;
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.28) !important;
  }

  .category-chip.active > span {
    color: #7c3aed !important;
    -webkit-text-fill-color: #7c3aed !important;
    font-weight: 800 !important;
  }

  /* Dark mode */
  [data-theme="dark"] .category-chip > span {
    color: #cbd5e1 !important;
    -webkit-text-fill-color: #cbd5e1 !important;
  }

  [data-theme="dark"] .category-chip.active > span {
    color: #c4b5fd !important;
    -webkit-text-fill-color: #c4b5fd !important;
  }
}

/* ── Estado vazio do filtro de categorias (mobile) ───────────────────── */
@media (max-width: 767px) {
  .cat-filtro-vazio {
    grid-column: 1 / -1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    padding: 40px 24px !important;
    text-align: center !important;
  }

  .cat-vazio-icon {
    font-size: 40px !important;
    line-height: 1 !important;
  }

  .cat-vazio-msg {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #6b7280 !important;
    -webkit-text-fill-color: #6b7280 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
  }

  .cat-vazio-btn {
    padding: 10px 22px !important;
    border-radius: 999px !important;
    border: none !important;
    background: linear-gradient(135deg, #7c3aed, #2563eb) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
  }
}

/* ── Ajustes visuais mobile ─────────────────────────────────────────────── */
@media (max-width: 767px) {

  /* 1. Botão carrinho: border-radius 6px (home e página de categoria) */
  #pagina-home .produto-btn-cart,
  #pagina-categoria .produto-btn-cart {
    border-radius: 6px !important;
  }

  /* 2. Botão Voltar da categoria: menor, sem bolha, alinhado ao título */
  .categoria-page-topo {
    align-items: center !important;
  }

  .categoria-voltar {
    border-radius: 8px !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    box-shadow: none !important;
    background: transparent !important;
    border: 1.5px solid rgba(124, 58, 237, 0.30) !important;
    color: #7c3aed !important;
    -webkit-text-fill-color: #7c3aed !important;
    cursor: pointer !important;
  }

  /* 3. Página de categoria — cards idênticos aos da home */
  #categoria-page-grade {
    grid-auto-rows: 326px !important;
    gap: 10px !important;
  }

  #pagina-categoria .produto-card {
    min-width: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 326px !important;
    padding: 10px 10px 62px !important;
    border-radius: 22px !important;
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
    background: #ffffff !important;
    background-image: none !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08) !important;
    color: #111827 !important;
    overflow: hidden !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
  }

  #pagina-categoria .produto-card-badges,
  #pagina-categoria .produto-btn-fav {
    display: none !important;
  }

  #pagina-categoria .produto-badge-desconto {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    z-index: 4 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 24px !important;
    padding: 0 8px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #7c3aed, #4f46e5) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 950 !important;
  }

  #pagina-categoria .produto-img-wrap {
    width: 100% !important;
    height: 118px !important;
    min-height: 118px !important;
    max-height: 118px !important;
    margin: 0 0 8px !important;
    padding: 7px !important;
    border-radius: 16px !important;
    background: #f8fafc !important;
    border: 0 !important;
    box-shadow: inset 0 0 0 1px rgba(226, 232, 240, 0.58) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  #pagina-categoria .imagem-produto {
    width: 100% !important;
    height: 100% !important;
    max-height: 104px !important;
    padding: 0 !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 0 !important;
  }

  #pagina-categoria .produto-card-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  #pagina-categoria .nome-produto {
    display: -webkit-box !important;
    min-height: 30px !important;
    max-height: 30px !important;
    margin: 0 0 4px !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    font-size: 13px !important;
    line-height: 1.15 !important;
    font-weight: 950 !important;
    overflow: hidden !important;
    overflow-wrap: anywhere !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
  }

  #pagina-categoria .marca-produto {
    min-height: 14px !important;
    max-height: 14px !important;
    margin: 0 0 6px !important;
    color: #6b7280 !important;
    -webkit-text-fill-color: #6b7280 !important;
    font-size: 11px !important;
    font-weight: 650 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  #pagina-categoria .produto-card-footer {
    position: absolute !important;
    bottom: 10px !important;
    left: 10px !important;
    right: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  #pagina-categoria .preco-produto {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #f97316 !important;
    -webkit-text-fill-color: #f97316 !important;
    line-height: 1 !important;
  }

  #pagina-categoria .produto-btn-cart {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    flex: 0 0 38px !important;
    border-radius: 6px !important;
    background: linear-gradient(135deg, #7c3aed 0%, #2563eb 100%) !important;
    border: none !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.28) !important;
    cursor: pointer !important;
  }

  #pagina-categoria .produto-btn-cart svg {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
  }
}

/* ── Página de produto — ajustes pontuais ────────────────────────────────── */

/* Nota de avaliação: menos pesada */
#pagina-pedido .pd-rev-nota-grande {
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
}

/* Cards de confiança: subtítulo */
#pagina-pedido .pd-beneficio-sub {
  display: block;
  font-size: 9px;
  color: #94a3b8;
  font-weight: 400;
  margin-top: 1px;
  line-height: 1.2;
}

/* Detalhes do produto: labels e textos no card resumo */
#pagina-pedido .pd-resumo-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #7b33ff;
  margin-top: 10px;
  margin-bottom: 3px;
}
#pagina-pedido .pd-resumo-label:first-child { margin-top: 0; }
#pagina-pedido .pd-resumo-texto {
  display: block;
  font-size: 13px;
  line-height: 1.5;
  color: #475569;
}

@media (max-width: 767px) {
  body.nexa-produto-ativa #pagina-pedido .pd-rev-nota-grande {
    font-size: 24px !important;
    font-weight: 700 !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pd-beneficio-sub {
    font-size: 8px !important;
    color: #94a3b8 !important;
    -webkit-text-fill-color: #94a3b8 !important;
    display: block !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pd-resumo-label {
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: #7b33ff !important;
    -webkit-text-fill-color: #7b33ff !important;
    display: block !important;
    margin-top: 10px !important;
    margin-bottom: 3px !important;
  }
  body.nexa-produto-ativa #pagina-pedido .pd-resumo-label:first-child { margin-top: 0 !important; }

  body.nexa-produto-ativa #pagina-pedido .pd-resumo-texto {
    display: block !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: #475569 !important;
    -webkit-text-fill-color: #475569 !important;
  }
}

/* ── Finalizar compra — refinamentos visuais mobile ──────────────────────── */
@media (max-width: 767px) {
  /* Card do produto: espaçamento e tipografia */
  #pagina-compra.pagina.ativa .compra-card {
    padding: 16px !important;
    gap: 12px !important;
    border-radius: 14px !important;
  }

  #pagina-compra.pagina.ativa .compra-esquerda {
    gap: 12px !important;
    align-items: flex-start !important;
  }

  #pagina-compra.pagina.ativa .compra-detalhes {
    gap: 4px !important;
    padding: 2px 0 !important;
  }

  #pagina-compra.pagina.ativa .compra-detalhes h2 {
    font-size: 15px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
    color: var(--na-text) !important;
    -webkit-text-fill-color: var(--na-text) !important;
    margin: 0 !important;
  }

  #pagina-compra.pagina.ativa #compra-preco {
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    margin: 2px 0 0 !important;
  }

  #pagina-compra.pagina.ativa #compra-pagamento {
    font-size: 11px !important;
    line-height: 1.3 !important;
    margin: 0 !important;
  }

  #pagina-compra.pagina.ativa #compra-estoque {
    font-size: 11px !important;
    margin: 0 !important;
  }

  /* Seções alinhadas: gap menor */
  #pagina-compra.pagina.ativa .compra-secoes-alinhadas {
    gap: 10px !important;
    margin-top: 12px !important;
  }

  /* Cards internos: padding mais consistente */
  #pagina-compra.pagina.ativa .compra-resumo-itens,
  #pagina-compra.pagina.ativa .endereco-box,
  #pagina-compra.pagina.ativa .frete-box-compra,
  #pagina-compra.pagina.ativa .pagamento-inline-box,
  #pagina-compra.pagina.ativa .compra-resumo-final {
    border-radius: 14px !important;
    padding: 14px 16px !important;
  }

  /* Endereço: melhor legibilidade */
  #pagina-compra.pagina.ativa #mostrar-nome {
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    margin: 0 0 4px !important;
  }

  #pagina-compra.pagina.ativa #mostrar-whats,
  #pagina-compra.pagina.ativa #mostrar-endereco {
    font-size: 12.5px !important;
    line-height: 1.5 !important;
    color: #374151 !important;
    -webkit-text-fill-color: #374151 !important;
    margin: 0 0 1px !important;
  }

  #pagina-compra.pagina.ativa #mostrar-localizacao {
    font-size: 11px !important;
    line-height: 1.4 !important;
    color: #94a3b8 !important;
    -webkit-text-fill-color: #94a3b8 !important;
    margin: 2px 0 0 !important;
    font-style: italic !important;
  }

  /* Endereço vazio: compacto */
  #pagina-compra.pagina.ativa #endereco-vazio {
    padding: 10px 12px !important;
  }

  #pagina-compra.pagina.ativa #endereco-vazio strong {
    font-size: 13px !important;
    font-weight: 600 !important;
  }

  #pagina-compra.pagina.ativa #endereco-vazio p {
    font-size: 11px !important;
    margin: 2px 0 6px !important;
  }

  /* Opções de frete: alinhamento limpo */
  #pagina-compra.pagina.ativa .frete-opcao-compra-conteudo {
    padding: 11px 12px !important;
    min-height: 56px !important;
    align-items: center !important;
  }

  #pagina-compra.pagina.ativa .frete-opcao-compra-texto strong {
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
  }

  #pagina-compra.pagina.ativa .frete-opcao-compra-texto p {
    font-size: 11px !important;
    line-height: 1.3 !important;
    margin: 1px 0 0 !important;
  }

  #pagina-compra.pagina.ativa .frete-opcao-compra span {
    font-size: 13px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
  }

  /* Botão "Adicionar" pagamento: discreto, ghost */
  #pagina-compra.pagina.ativa .btn-adicionar-cartao,
  #pagina-compra.pagina.ativa .btn-adicionar-cartao-desktop {
    background: transparent !important;
    border: 1px solid #cbd5e1 !important;
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
    font-weight: 400 !important;
    box-shadow: none !important;
    padding: 0 8px !important;
    font-size: 10.5px !important;
    height: 22px !important;
    min-height: 22px !important;
    border-radius: 999px !important;
  }

  /* Resumo final: clareza */
  #pagina-compra.pagina.ativa .compra-resumo-final h3 {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--na-text) !important;
    -webkit-text-fill-color: var(--na-text) !important;
    margin: 0 0 10px !important;
  }

  #pagina-compra.pagina.ativa .compra-total-linha {
    padding: 5px 0 !important;
    font-size: 13px !important;
  }

  #pagina-compra.pagina.ativa .compra-total-linha span {
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
    font-size: 13px !important;
  }

  #pagina-compra.pagina.ativa .compra-total-linha strong {
    font-size: 13px !important;
  }

  #pagina-compra.pagina.ativa .compra-total-linha-destaque {
    border-top: 1px solid #e2e8f0 !important;
    margin-top: 6px !important;
    padding-top: 10px !important;
  }

  #pagina-compra.pagina.ativa .compra-total-linha-destaque span {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--na-text) !important;
    -webkit-text-fill-color: var(--na-text) !important;
  }

  #pagina-compra.pagina.ativa .compra-total-linha-destaque strong {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #7b33ff !important;
    -webkit-text-fill-color: #7b33ff !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CHECKOUT — Tipografia global Poppins
   Deve ficar no FINAL do arquivo para ganhar de toda a cascade anterior.
   Cobre todos os elementos: estáticos, dinâmicos (JS), form controls e SVG.
   Campos MercadoPago (iframes de terceiro) não são afetáveis via CSS.
   ═══════════════════════════════════════════════════════════════════════════ */
#pagina-compra {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}

/* Elementos que browsers NÃO herdam font-family por padrão */
#pagina-compra input,
#pagina-compra button,
#pagina-compra select,
#pagina-compra textarea,
#pagina-compra label {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}

/* Todos os demais descendentes */
#pagina-compra h1, #pagina-compra h2, #pagina-compra h3,
#pagina-compra h4, #pagina-compra h5, #pagina-compra h6,
#pagina-compra p, #pagina-compra span, #pagina-compra strong,
#pagina-compra em, #pagina-compra small, #pagina-compra a,
#pagina-compra li, #pagina-compra td, #pagina-compra th,
#pagina-compra div, #pagina-compra section, #pagina-compra article,
#pagina-compra header, #pagina-compra footer, #pagina-compra nav,
#pagina-compra [class], #pagina-compra [id] {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}

/* Placeholders */
#pagina-compra input::placeholder,
#pagina-compra textarea::placeholder {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TELA DE ENDEREÇO — Refinamentos visuais
   Seções de formulário, cards, tipografia, toggle e botões.
   linha-dupla quebra apenas em ≤360px (override do ≤640px do styles.css).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Font-family — idêntica ao checkout */
#pagina-endereco,
#pagina-endereco input,
#pagina-endereco button,
#pagina-endereco select,
#pagina-endereco textarea,
#pagina-endereco label,
#pagina-endereco p,
#pagina-endereco span,
#pagina-endereco strong,
#pagina-endereco small,
#pagina-endereco h1,
#pagina-endereco h2,
#pagina-endereco h3,
#pagina-endereco div {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}

/* Seções do formulário — separador visual */
#pagina-endereco .form-secao {
  padding-bottom: 8px !important;
  margin-bottom: 0 !important;
}

#pagina-endereco .form-secao + .form-secao {
  margin-top: 6px !important;
  padding-top: 14px !important;
  border-top: 1px solid #f0f0f5 !important;
}

#pagina-endereco .form-secao-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #7b33ff !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
}

#pagina-endereco .form-campo-opcional {
  font-size: 11px !important;
  font-weight: 400 !important;
  color: #9ca3af !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin-left: 4px !important;
}

/* Campos do formulário — altura e foco */
#pagina-endereco .grupo-campo {
  margin-bottom: 14px !important;
}

#pagina-endereco .grupo-campo label {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #374151 !important;
  margin-bottom: 6px !important;
}

#pagina-endereco .grupo-campo input {
  height: 48px !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  color: #111827 !important;
  background: #fafafa !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

#pagina-endereco .grupo-campo input::placeholder {
  color: #c4c4d0 !important;
  font-size: 13px !important;
}

#pagina-endereco .grupo-campo input:focus {
  border-color: #7b33ff !important;
  box-shadow: 0 0 0 3px rgba(123, 51, 255, 0.12) !important;
  outline: none !important;
  background: #ffffff !important;
}

/* linha-dupla: mantém row acima de 360px, quebra só em ≤360px */
#pagina-endereco .linha-dupla {
  flex-direction: row !important;
  align-items: flex-start !important;
}

#pagina-endereco .campo-rua {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

#pagina-endereco .campo-numero {
  flex: 0 0 110px !important;
  width: 110px !important;
}

@media (max-width: 360px) {
  #pagina-endereco .linha-dupla {
    flex-direction: column !important;
  }

  #pagina-endereco .campo-numero {
    flex: 1 1 auto !important;
    width: 100% !important;
  }
}

/* Cards de endereço salvo */
#pagina-endereco .item-endereco-topo strong {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #111827 !important;
}

#pagina-endereco .item-endereco-salvo p {
  font-size: 13px !important;
  color: #4b5563 !important;
  line-height: 1.5 !important;
  margin: 3px 0 !important;
}

#pagina-endereco .item-endereco-status {
  font-size: 12px !important;
  margin-top: 8px !important;
}

#pagina-endereco .endereco-salvo-acoes {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Toggle switch */
#pagina-endereco .linha-toggle {
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
}

#pagina-endereco .toggle-texto strong {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #111827 !important;
}

/* Salvar como (Casa / Trabalho) */
#pagina-endereco .salvar-como-box {
  margin-bottom: 20px !important;
}

#pagina-endereco .salvar-como-box p {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #374151 !important;
  margin-bottom: 10px !important;
}

#pagina-endereco .btn-tag-endereco {
  height: 36px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

/* Botões finais — Cancelar (ghost) + Salvar endereço (gradient) */
#pagina-endereco .acoes-form-endereco {
  display: flex !important;
  gap: 10px !important;
  margin-top: 8px !important;
}

#pagina-endereco .btn-cancelar-endereco {
  flex: 0 0 auto !important;
  height: 52px !important;
  padding: 0 22px !important;
  border-radius: 14px !important;
  border: 1.5px solid #e5e7eb !important;
  background: transparent !important;
  color: #374151 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  transition: border-color 0.2s ease, color 0.2s ease !important;
}

#pagina-endereco .btn-cancelar-endereco:hover {
  border-color: #7b33ff !important;
  color: #7b33ff !important;
}

#pagina-endereco .btn-salvar-endereco-final {
  flex: 1 !important;
  height: 52px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #7b33ff 0%, #4f46ff 100%) !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(123, 51, 255, 0.28) !important;
  transition: opacity 0.2s ease, transform 0.15s ease !important;
}

#pagina-endereco .btn-salvar-endereco-final:hover {
  opacity: 0.92 !important;
  transform: translateY(-1px) !important;
}

#pagina-endereco .btn-salvar-endereco-final:active {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TELA CRÉDITO/DÉBITO — Refinamentos visuais
   Font-family, banner de segurança, cartões aceitos, seções, campos e botão.
   Scoped em #card-payment-screen. Sem novas funcionalidades.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* 1. Font-family Poppins em toda a tela */
  #card-payment-screen,
  #card-list-screen,
  #card-payment-screen input,
  #card-payment-screen button,
  #card-payment-screen select,
  #card-payment-screen textarea,
  #card-payment-screen label,
  #card-payment-screen p,
  #card-payment-screen span,
  #card-payment-screen strong,
  #card-payment-screen small,
  #card-payment-screen h2,
  #card-payment-screen h3,
  #card-payment-screen div,
  #card-list-screen input,
  #card-list-screen button,
  #card-list-screen select,
  #card-list-screen label,
  #card-list-screen p,
  #card-list-screen span,
  #card-list-screen strong,
  #card-list-screen small,
  #card-list-screen h2,
  #card-list-screen div {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  }

  /* 2. Corpo — padding lateral mais confortável */
  #card-payment-screen .card-screen-body {
    padding: 14px 16px calc(44px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 12px !important;
  }

  /* 3. Banner de segurança — elegante com ícone alinhado */
  #card-payment-screen .card-security-banner {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: linear-gradient(135deg, rgba(123, 51, 255, 0.07) 0%, rgba(37, 99, 235, 0.04) 100%) !important;
    border: 1px solid rgba(123, 51, 255, 0.16) !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
    color: #374151 !important;
    line-height: 1.4 !important;
  }

  #card-payment-screen .security-icon {
    font-size: 20px !important;
    line-height: 1 !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  #card-payment-screen .security-text {
    flex: 1 !important;
    min-width: 0 !important;
    color: #374151 !important;
    -webkit-text-fill-color: #374151 !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
  }

  /* 4. Cartões aceitos — chips uniformes e alinhados */
  #card-payment-screen .card-accepted-section {
    padding: 14px 14px 12px !important;
    border-radius: 14px !important;
  }

  #card-payment-screen .card-accepted-title {
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    color: #9ca3af !important;
    margin: 0 0 10px !important;
  }

  #card-payment-screen .card-accepted-logos {
    gap: 6px !important;
    align-items: center !important;
  }

  #card-payment-screen .card-logo-item {
    border-radius: 8px !important;
    padding: 5px 10px !important;
    gap: 5px !important;
    min-height: 30px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
  }

  #card-payment-screen .card-logo-icon,
  #card-payment-screen .card-logo-img {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
    border-radius: 4px !important;
    font-size: 9px !important;
  }

  /* 5. Seções do formulário */
  #card-payment-screen .card-form-section {
    border-radius: 14px !important;
    padding: 16px !important;
    box-shadow: 0 1px 6px rgba(15, 23, 42, 0.05) !important;
  }

  /* 6. Títulos das seções — hierarquia com uppercase purple */
  #card-payment-screen .card-section-title {
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #7b33ff !important;
    -webkit-text-fill-color: #7b33ff !important;
    margin: 0 0 14px !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
  }

  /* 7. Labels — mais compactos e legíveis */
  #card-payment-screen .card-form-section label {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #374151 !important;
    -webkit-text-fill-color: #374151 !important;
    margin-bottom: 6px !important;
  }

  /* 8. Campos — refinamentos visuais */
  #card-payment-screen .card-field {
    border: 1.5px solid #e5e7eb !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    background: #fafafa !important;
    margin-bottom: 14px !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
  }

  #card-payment-screen input.card-field::placeholder,
  #card-payment-screen .card-field[data-placeholder]::placeholder {
    color: #c4c4d0 !important;
    -webkit-text-fill-color: #c4c4d0 !important;
    font-size: 13px !important;
  }

  #card-payment-screen .card-field:focus {
    border-color: #7b33ff !important;
    box-shadow: 0 0 0 3px rgba(123, 51, 255, 0.10) !important;
    background: #ffffff !important;
  }

  /* 9. CVV hint — discreto, bem espaçado abaixo do campo */
  #card-payment-screen .card-cvv-hint {
    margin-top: -8px !important;
    margin-bottom: 14px !important;
    font-size: 11px !important;
    color: #9ca3af !important;
    padding-left: 2px !important;
    line-height: 1.3 !important;
  }

  /* 10. Botão Salvar cartão */
  #card-payment-screen .card-confirm-wrapper {
    padding: 6px 0 14px !important;
  }

  #card-payment-screen .btn-primary-card {
    height: 54px !important;
    border-radius: 14px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    background: linear-gradient(135deg, #7b33ff 0%, #2563eb 100%) !important;
    box-shadow: 0 4px 18px rgba(123, 51, 255, 0.28) !important;
    letter-spacing: 0.01em !important;
    padding: 0 24px !important;
    transition: opacity 0.2s ease, transform 0.15s ease !important;
  }

  #card-payment-screen .btn-primary-card:hover {
    opacity: 0.92 !important;
    transform: translateY(-1px) !important;
  }

  #card-payment-screen .btn-primary-card:active {
    transform: scale(0.985) !important;
    opacity: 1 !important;
    filter: brightness(0.97) !important;
  }
}

/* Telas muito estreitas: card-row quebra em coluna */
@media (max-width: 360px) {
  #card-payment-screen .card-row {
    flex-direction: column !important;
    gap: 0 !important;
  }

  #card-payment-screen .card-col {
    width: 100% !important;
    flex: 1 1 auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CHECKOUT GLOBAL — Correções finais (Parte 1-3)
   Deve ficar ABSOLUTAMENTE NO FINAL do arquivo para vencer toda cascade.

   1. Font-family Poppins universal em todos os contextos de checkout:
      #pagina-compra, #pagina-endereco, #card-payment-screen, #card-list-screen.
   2. "Resumo final" e "Total final" com contraste correto (sem var(--na-text)).
   3. Reforço de cor e peso no nome do endereço.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1. Font-family universal — todos os contextos de checkout ─────────── */

/* Seletor universal: captura QUALQUER descendente sem exceção */
#pagina-compra *,
#pagina-compra.pagina.ativa *,
#pagina-endereco *,
#card-payment-screen *,
#card-list-screen *,
#parcelas-sheet-overlay * {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}

/* Form controls não herdam font-family por padrão nos browsers — listagem explícita */
#pagina-compra input,
#pagina-compra button,
#pagina-compra select,
#pagina-compra textarea,
#pagina-compra label,
#pagina-endereco input,
#pagina-endereco button,
#pagina-endereco select,
#pagina-endereco textarea,
#pagina-endereco label,
#card-payment-screen input,
#card-payment-screen button,
#card-payment-screen select,
#card-payment-screen textarea,
#card-payment-screen label,
#card-list-screen input,
#card-list-screen button,
#card-list-screen select,
#card-list-screen label {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}

/* Placeholders */
#pagina-compra input::placeholder,
#pagina-compra textarea::placeholder,
#pagina-endereco input::placeholder,
#pagina-endereco textarea::placeholder,
#card-payment-screen input::placeholder,
#card-payment-screen textarea::placeholder {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}

/* ─── 2. Resumo final e Total final — contraste correto no mobile ────────── */

/* "Resumo final" — título da seção */
#pagina-compra .compra-resumo-final h3,
#pagina-compra.pagina.ativa .compra-resumo-final h3 {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  font-weight: 700 !important;
}

/* Labels de linha (Subtotal, Frete) */
#pagina-compra .compra-total-linha span,
#pagina-compra.pagina.ativa .compra-total-linha span {
  color: #6b7280 !important;
  -webkit-text-fill-color: #6b7280 !important;
}

/* Valores de linha */
#pagina-compra .compra-total-linha strong,
#pagina-compra.pagina.ativa .compra-total-linha strong {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}

/* "Total final" — label destaque */
#pagina-compra .compra-total-linha-destaque span,
#pagina-compra.pagina.ativa .compra-total-linha-destaque span {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  font-weight: 700 !important;
}

/* Valor total — mantém roxo mas garante visibilidade */
#pagina-compra .compra-total-linha-destaque strong,
#pagina-compra.pagina.ativa .compra-total-linha-destaque strong {
  color: #7b33ff !important;
  -webkit-text-fill-color: #7b33ff !important;
  font-weight: 800 !important;
}

/* ─── 3. Nome no endereço — reforço em todos os contextos ───────────────── */

/* Checkout — bloco de endereço preenchido */
#pagina-compra #mostrar-nome,
#pagina-compra.pagina.ativa #mostrar-nome {
  font-weight: 700 !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}

/* Endereço — card salvo (modal selecionar) */
#pagina-endereco .item-endereco-topo strong {
  font-weight: 700 !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAYMENT FLOW v2 — Ajustes visuais e de experiência
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── PARTE 2 — Botão X (fechar checkout): simples e limpo ────────────────── */
@media (max-width: 767px) {
  #pagina-compra.pagina.ativa .btn-fechar-compra {
    background: rgba(255,255,255,0.85) !important;
    border: 1px solid rgba(0,0,0,0.10) !important;
    color: #374151 !important;
    box-shadow: none !important;
  }
  #pagina-compra.pagina.ativa .btn-fechar-compra:hover,
  #pagina-compra.pagina.ativa .btn-fechar-compra:focus-visible {
    background: #f3f4f6 !important;
    border-color: rgba(0,0,0,0.16) !important;
    outline: none !important;
  }
  #pagina-compra.pagina.ativa .btn-fechar-compra:active {
    background: #e5e7eb !important;
    transform: scale(0.93) !important;
  }
}

/* ─── PARTE 3 — Handle bar da parcelas sheet ──────────────────────────────── */
.parcelas-sheet-handle {
  width: 36px !important;
  height: 4px !important;
  background: #cbd5e1 !important;
  border-radius: 999px !important;
  margin: 0 auto 14px !important;
  flex-shrink: 0 !important;
}

/* Centraliza título quando sem X */
.parcelas-sheet-topo {
  justify-content: center !important;
}
.parcelas-sheet-topo h3 {
  text-align: center !important;
  margin: 0 !important;
}

/* ─── PARTE 5 — Pagamento aprovado: destaque no topo ─────────────────────── */

/* Cartão — resultado de pagamento */
@media (max-width: 767px) {
  .card-payment-result-screen {
    align-items: flex-start !important;
    padding-top: 64px !important;
  }

  .card-payment-result-box {
    text-align: left !important;
    padding: 28px 24px 24px !important;
  }

  .card-payment-result-icon {
    width: 72px !important;
    height: 72px !important;
    font-size: 34px !important;
    margin: 0 0 20px !important;
  }

  .card-payment-result-box strong {
    font-size: 28px !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    color: #111827 !important;
  }

  .card-payment-result-box p {
    margin: 10px 0 0 !important;
    font-size: 15px !important;
    color: #475569 !important;
  }
}

/* Pix — tela aprovado */
@media (max-width: 767px) {
  #pagina-pix .pix-status-aprovado {
    padding-top: 40px !important;
    text-align: center !important;
  }

  #pagina-pix .pix-aprovado-icone {
    width: 76px !important;
    height: 76px !important;
    font-size: 38px !important;
    margin-bottom: 18px !important;
  }

  #pagina-pix .pix-status-aprovado h3 {
    font-size: 28px !important;
    font-weight: 900 !important;
    color: #111827 !important;
    margin: 0 0 10px !important;
  }

  #pagina-pix .pix-status-aprovado p {
    font-size: 15px !important;
    color: #475569 !important;
  }
}

/* ╔═══════════════════════════════════════════════════════════════════════════╗
   ║  NEXA BLUE — Checkout & botões: visual estilo Mercado Livre              ║
   ║  Apenas CSS visual. Lógica, Pix, MP, carrinho e endereço intocados.      ║
   ╚═══════════════════════════════════════════════════════════════════════════╝ */

/* 0 ─── Tokens de cor azul ML ───────────────────────────────────────────── */
:root {
  --nb-blue:        #3483FA;
  --nb-blue-hover:  #2968C8;
  --nb-blue-soft:   #EAF3FF;
  --nb-border:      #E5E7EB;
  --nb-text:        #111827;
  --nb-muted:       #6B7280;
  --nb-radius:      6px;
}

/* 1 ─── Produto: Comprar agora (.pd-btn-buy) → outline azul (MOBILE only)
         Desktop: sobrescrito pelo bloco @media(min-width:768px) no final do arquivo */
@media (max-width: 767px) {
  .pd-btn-buy {
    background:              #fff !important;
    color:                   var(--nb-blue) !important;
    -webkit-text-fill-color: var(--nb-blue) !important;
    border:                  1.5px solid var(--nb-blue) !important;
    border-radius:           var(--nb-radius) !important;
    box-shadow:              none !important;
  }
  .pd-btn-buy:hover {
    background:              var(--nb-blue-soft) !important;
    border-color:            var(--nb-blue-hover) !important;
    color:                   var(--nb-blue-hover) !important;
    -webkit-text-fill-color: var(--nb-blue-hover) !important;
  }
}

/* 2 ─── Produto: Adicionar ao carrinho (.pd-btn-cart) → azul sólido ─────── */
.pd-btn-cart {
  background:    var(--nb-blue) !important;
  color:         #fff !important;
  -webkit-text-fill-color: #fff !important;
  border:        none !important;
  border-radius: var(--nb-radius) !important;
  box-shadow:    none !important;
}
.pd-btn-cart:hover {
  background:    var(--nb-blue-hover) !important;
  transform:     none !important;
  box-shadow:    none !important;
}

/* 3 ─── Finalizar compra + botões primários do carrinho → azul / radius 6px  */
.btn-finalizar-compra,
#btn-finalizar-carrinho,
.btn-comprar,
.btn-comprar-selecionados,
.btn-pedido {
  background:    var(--nb-blue) !important;
  border-radius: var(--nb-radius) !important;
  box-shadow:    none !important;
}
.btn-finalizar-compra:hover,
#btn-finalizar-carrinho:hover,
.btn-comprar:hover,
.btn-comprar-selecionados:hover,
.btn-pedido:hover {
  background: var(--nb-blue-hover) !important;
  box-shadow: none !important;
}

/* 4 ─── Checkout: container claro + seções estilo ML ────────────────────── */
#pagina-compra.pagina.ativa .compra-container {
  background: #f3f4f6 !important;
}

#pagina-compra.pagina.ativa .compra-card,
#pagina-compra.pagina.ativa .compra-resumo-itens,
#pagina-compra.pagina.ativa .compra-resumo-final,
#pagina-compra.pagina.ativa .endereco-box,
#pagina-compra.pagina.ativa .frete-box-compra,
#pagina-compra.pagina.ativa .pagamento-inline-box {
  background:    #fff !important;
  border:        1px solid var(--nb-border) !important;
  border-radius: var(--nb-radius) !important;
  box-shadow:    none !important;
}

/* Títulos das seções */
#pagina-compra.pagina.ativa .compra-resumo-topo h3,
#pagina-compra.pagina.ativa .compra-resumo-final h3,
#pagina-compra.pagina.ativa .endereco-topo h3,
#pagina-compra.pagina.ativa .frete-titulo,
#pagina-compra.pagina.ativa .pagamento-inline-label {
  font-size:               14px !important;
  font-weight:             700 !important;
  color:                   var(--nb-text) !important;
  -webkit-text-fill-color: var(--nb-text) !important;
}

/* Total em azul */
#pagina-compra .compra-total-linha-destaque strong {
  color:                   var(--nb-blue) !important;
  -webkit-text-fill-color: var(--nb-blue) !important;
}

/* Textos no checkout legíveis no fundo branco */
#pagina-compra.pagina.ativa .compra-detalhes h2,
#pagina-compra.pagina.ativa #compra-nome {
  color:                   var(--nb-text) !important;
  -webkit-text-fill-color: var(--nb-text) !important;
}
#pagina-compra.pagina.ativa #compra-preco {
  color:                   var(--nb-blue) !important;
  -webkit-text-fill-color: var(--nb-blue) !important;
}
#pagina-compra.pagina.ativa #compra-pagamento,
#pagina-compra.pagina.ativa #compra-estoque,
#pagina-compra.pagina.ativa .compra-total-linha span {
  color:                   var(--nb-muted) !important;
  -webkit-text-fill-color: var(--nb-muted) !important;
}

/* 5 ─── Entrega: opções de frete → estilo ML ────────────────────────────── */
#pagina-compra .frete-opcao-compra-conteudo,
.frete-opcao-compra-conteudo {
  border:        1px solid var(--nb-border) !important;
  border-radius: var(--nb-radius) !important;
  background:    #fff !important;
  transition:    border-color 0.15s, background 0.15s !important;
}

#pagina-compra .frete-opcao-compra input[type="radio"]:checked + .frete-opcao-compra-conteudo,
.frete-opcao-compra input[type="radio"]:checked + .frete-opcao-compra-conteudo,
#pagina-compra .frete-opcao-compra.selecionado .frete-opcao-compra-conteudo,
.frete-opcao-compra.selecionado .frete-opcao-compra-conteudo {
  border-color: var(--nb-blue) !important;
  background:   var(--nb-blue-soft) !important;
}

/* Textos das opções de frete */
#pagina-compra .frete-opcao-compra-texto strong {
  color:                   var(--nb-text) !important;
  -webkit-text-fill-color: var(--nb-text) !important;
}
#pagina-compra .frete-opcao-compra-texto p,
#pagina-compra .frete-opcao-compra-texto span:not(.frete-preco) {
  color:                   var(--nb-muted) !important;
  -webkit-text-fill-color: var(--nb-muted) !important;
}

/* 6 ─── Pagamento (desktop): container + opções → estilo ML ─────────────── */
#pagina-compra.pagina.ativa .checkout-forma-pagamento-desktop {
  background:    #f3f4f6 !important;
  border:        1px solid var(--nb-border) !important;
  border-radius: var(--nb-radius) !important;
  box-shadow:    none !important;
  color:         var(--nb-text) !important;
}
#pagina-compra.pagina.ativa .checkout-forma-pagamento-desktop h3 {
  color:                   var(--nb-text) !important;
  -webkit-text-fill-color: var(--nb-text) !important;
  font-size:               15px !important;
  font-weight:             700 !important;
}

#pagina-compra.pagina.ativa .pagamento-opcao-desktop {
  border:        1px solid var(--nb-border) !important;
  border-radius: var(--nb-radius) !important;
  background:    #fff !important;
  color:         var(--nb-text) !important;
  min-height:    80px !important;
}
#pagina-compra.pagina.ativa .pagamento-opcao-desktop:hover {
  border-color: var(--nb-blue) !important;
  background:   var(--nb-blue-soft) !important;
}
#pagina-compra.pagina.ativa .pagamento-opcao-desktop.selected,
#pagina-compra.pagina.ativa .pagamento-opcao-desktop.selecionado,
#pagina-compra.pagina.ativa .pagamento-opcao-desktop:has(input[type="radio"]:checked) {
  border-color: var(--nb-blue) !important;
  background:   var(--nb-blue-soft) !important;
  box-shadow:   0 0 0 2px rgba(52,131,250,0.15) !important;
}
#pagina-compra.pagina.ativa .pagamento-opcao-desktop strong {
  color:                   var(--nb-text) !important;
  -webkit-text-fill-color: var(--nb-text) !important;
  font-size:               15px !important;
  font-weight:             700 !important;
}
#pagina-compra.pagina.ativa .pagamento-opcao-desktop p,
#pagina-compra.pagina.ativa .pagamento-opcao-desktop small {
  color:                   var(--nb-muted) !important;
  -webkit-text-fill-color: var(--nb-muted) !important;
}

/* Botões Adicionar/Editar cartão (desktop) */
#pagina-compra.pagina.ativa .btn-adicionar-cartao-desktop,
#pagina-compra.pagina.ativa .btn-editar-cartao-desktop {
  background:              transparent !important;
  border:                  1px solid var(--nb-blue) !important;
  color:                   var(--nb-blue) !important;
  -webkit-text-fill-color: var(--nb-blue) !important;
  border-radius:           var(--nb-radius) !important;
  box-shadow:              none !important;
}

/* 7 ─── Pagamento inline (mobile): opções → estilo ML ───────────────────── */
#pagina-compra.pagina.ativa .pagamento-inline-opcao {
  border:        1px solid var(--nb-border) !important;
  border-radius: var(--nb-radius) !important;
  background:    #fff !important;
}
#pagina-compra.pagina.ativa .pagamento-inline-opcao.selecionado,
#pagina-compra.pagina.ativa .pagamento-inline-opcao:has(input[type="radio"]:checked) {
  border-color: var(--nb-blue) !important;
  background:   var(--nb-blue-soft) !important;
}

/* Títulos e textos do pagamento inline */
#pagina-compra.pagina.ativa .pagamento-opcao-titulo,
#pagina-compra.pagina.ativa .pagamento-inline-opcao-conteudo strong {
  color:                   var(--nb-text) !important;
  -webkit-text-fill-color: var(--nb-text) !important;
}
#pagina-compra.pagina.ativa .pagamento-opcao-subtitulo,
#pagina-compra.pagina.ativa .pagamento-opcao-detalhe,
#pagina-compra.pagina.ativa .pagamento-opcao-vazio,
#pagina-compra.pagina.ativa .pagamento-inline-card-detail,
#pagina-compra.pagina.ativa .pagamento-inline-opcao-conteudo span:not(.pagamento-metodo-simbolo) {
  color:                   var(--nb-muted) !important;
  -webkit-text-fill-color: var(--nb-muted) !important;
}

/* Botões pill Alterar/Editar */
#pagina-compra.pagina.ativa .pagamento-inline-pill-btn {
  background:              transparent !important;
  border:                  1px solid var(--nb-blue) !important;
  color:                   var(--nb-blue) !important;
  -webkit-text-fill-color: var(--nb-blue) !important;
  border-radius:           var(--nb-radius) !important;
  box-shadow:              none !important;
}

/* 8 ─── Endereço no checkout: texto legível no fundo branco ──────────────── */
#pagina-compra.pagina.ativa #mostrar-nome {
  color:                   var(--nb-text) !important;
  -webkit-text-fill-color: var(--nb-text) !important;
}
#pagina-compra.pagina.ativa #mostrar-whats,
#pagina-compra.pagina.ativa #mostrar-endereco {
  color:                   #374151 !important;
  -webkit-text-fill-color: #374151 !important;
}
#pagina-compra.pagina.ativa #mostrar-localizacao {
  color:                   var(--nb-muted) !important;
  -webkit-text-fill-color: var(--nb-muted) !important;
}

/* Botão vazio endereço */
#pagina-compra.pagina.ativa .endereco-vazio-btn,
#pagina-compra.pagina.ativa #btn-selecionar-endereco-compra {
  background:              var(--nb-blue) !important;
  color:                   #fff !important;
  -webkit-text-fill-color: #fff !important;
  border-radius:           var(--nb-radius) !important;
  border:                  none !important;
  box-shadow:              none !important;
}

/* 9 ─── Radio e accent-color → azul ─────────────────────────────────────── */
#pagina-compra input[type="radio"],
.frete-opcao-compra input[type="radio"],
.pagamento-inline-opcao input[type="radio"],
.pagamento-opcao-desktop input[type="radio"] {
  accent-color: var(--nb-blue) !important;
}

/* 10 ─── Mobile: override cor primária + fundo body azul suave ───────────── */
@media (max-width: 768px) {
  :root {
    --mobile-primary:   #3483FA;
    --mobile-primary-2: #2968C8;
  }

  body {
    background:
      radial-gradient(circle at 10% 0%, rgba(52,131,250,0.07), transparent 34%),
      radial-gradient(circle at 100% 0%, rgba(52,131,250,0.04), transparent 34%),
      var(--mobile-bg) !important;
  }

  .btn-comprar-agora {
    background:              #fff !important;
    color:                   var(--nb-blue) !important;
    -webkit-text-fill-color: var(--nb-blue) !important;
    border:                  1.5px solid var(--nb-blue) !important;
    border-radius:           var(--nb-radius) !important;
    box-shadow:              none !important;
  }

  .btn-finalizar-compra {
    border-radius: var(--nb-radius) !important;
    background:    var(--nb-blue) !important;
    box-shadow:    none !important;
  }
}

/* 11 ─── Espaçamento checkout mobile: compacto estilo ML ────────────────── */
@media (max-width: 767px) {
  #pagina-compra.pagina.ativa .compra-secoes-alinhadas {
    gap: 10px !important;
  }

  #pagina-compra.pagina.ativa .compra-card {
    gap: 10px !important;
    padding: 14px !important;
  }

  #pagina-compra.pagina.ativa .endereco-box,
  #pagina-compra.pagina.ativa .frete-box-compra,
  #pagina-compra.pagina.ativa .pagamento-inline-box,
  #pagina-compra.pagina.ativa .compra-resumo-final {
    padding: 14px !important;
  }

  #pagina-compra.pagina.ativa .compra-resumo-itens {
    padding: 12px 14px !important;
  }

  #pagina-compra.pagina.ativa .frete-opcoes-compra {
    gap: 8px !important;
  }

  #pagina-compra.pagina.ativa .compra-total-linha {
    padding: 4px 0 !important;
    font-size: 13px !important;
  }
}
/* 12 ─── Logo Pix: imagem real, sem emoji/SVG verde ─────────────────────── */
.payment-logo-pix {
  width:        18px !important;
  height:       18px !important;
  object-fit:   contain !important;
  display:      inline-block !important;
  flex-shrink:  0 !important;
  vertical-align: middle !important;
  margin-right: 4px !important;
}

/* Garante que o span antigo (caso reste) não mostre nada */
.pagamento-metodo-simbolo:empty {
  display: none !important;
}

/* 13 ─── Font-family Poppins em toda a seção de pagamento ───────────────── */
#pagina-compra .pagamento-inline-box,
#pagina-compra .pagamento-inline-box *,
#pagina-compra .checkout-forma-pagamento-desktop,
#pagina-compra .checkout-forma-pagamento-desktop *,
#pagina-pagamento,
#pagina-pagamento * {
  font-family: var(--na-font) !important;
}

/* 14 ─── Alinhamento limpo nas opções de pagamento ──────────────────────── */

/* Header da opção: ícone + nome na mesma linha */
#pagina-compra .pagamento-opcao-header,
#pagina-compra .pagamento-opcao-desktop-header {
  display:     flex !important;
  align-items: center !important;
  gap:         7px !important;
  flex-wrap:   nowrap !important;
}

/* Título da opção: ícone + texto alinhados */
#pagina-compra .pagamento-opcao-titulo,
#pagina-compra .pagamento-opcao-desktop strong {
  display:     inline-flex !important;
  align-items: center !important;
  gap:         6px !important;
  font-size:   14px !important;
  font-weight: 600 !important;
  color:       var(--nb-text) !important;
  -webkit-text-fill-color: var(--nb-text) !important;
}

/* Subtítulo abaixo do título */
#pagina-compra .pagamento-opcao-subtitulo,
#pagina-compra .pagamento-opcao-desktop p {
  display:    block !important;
  font-size:  12px !important;
  color:      var(--nb-muted) !important;
  -webkit-text-fill-color: var(--nb-muted) !important;
  margin-top: 2px !important;
}

/* Conteúdo da opção: empilhado verticalmente */
#pagina-compra .pagamento-inline-opcao-conteudo,
#pagina-compra .pagamento-opcao-desktop-conteudo {
  display:        flex !important;
  flex-direction: column !important;
  gap:            2px !important;
  min-width:      0 !important;
  flex:           1 1 0 !important;
}

/* Logo pix dentro do header alinhada ao baseline do texto */
#pagina-compra .pagamento-opcao-header .payment-logo-pix,
#pagina-compra .pagamento-opcao-desktop-header .payment-logo-pix,
.pagamento-opcao-titulo .payment-logo-pix {
  width:          18px !important;
  height:         18px !important;
  vertical-align: middle !important;
  flex-shrink:    0 !important;
}

/* Botão Adicionar alinhado à direita */
#pagina-compra .pagamento-opcao-desktop-header .btn-adicionar-cartao-desktop,
#pagina-compra .pagamento-opcao-desktop-header .btn-editar-cartao-desktop,
#pagina-compra .pagamento-opcao-header .btn-adicionar-cartao,
#pagina-compra .pagamento-opcao-header .btn-editar-cartao {
  margin-left: auto !important;
  flex-shrink: 0 !important;
}
/* ══ fim NEXA BLUE ══════════════════════════════════════════════════════════ */

/* ── Divisores finos entre seções do checkout ────────────────────────────── */
/* Zero gap no container + borda apenas abaixo de cada seção = linha divisória */
#pagina-compra.pagina.ativa .compra-secoes-alinhadas {
  gap:        0 !important;
  margin-top: 0 !important;
}

/* Seções internas: sem borda própria completa, só linha divisória abaixo */
#pagina-compra.pagina.ativa .compra-secoes-alinhadas > .compra-resumo-itens,
#pagina-compra.pagina.ativa .compra-secoes-alinhadas > .endereco-box,
#pagina-compra.pagina.ativa .compra-secoes-alinhadas > .frete-box-compra,
#pagina-compra.pagina.ativa .compra-secoes-alinhadas > .pagamento-inline-box {
  border:        none !important;
  border-bottom: 1px solid #E5E7EB !important;
  border-radius: 0 !important;
}

/* Última seção: sem divisória abaixo */
#pagina-compra.pagina.ativa .compra-secoes-alinhadas > .compra-resumo-final {
  border:        none !important;
  border-radius: 0 !important;
}

/* Mobile: fechar o vão entre o header e o card de produto */
@media (max-width: 767px) {
  /* Remove padding-top do container — header sticky já ocupa seu espaço */
  #pagina-compra.pagina.ativa .compra-container {
    padding-top: 0 !important;
  }

  /* Card de produto: sem margem extra, sem bordas próprias, só linha abaixo */
  #pagina-compra.pagina.ativa .compra-card {
    margin-top:    0 !important;
    margin-bottom: 0 !important;
    border:        none !important;
    border-bottom: 1px solid #E5E7EB !important;
    border-radius: 0 !important;
  }
}
/* ── fim divisores finos ────────────────────────────────────────────────── */

/* ── Endereço: formulário ocupa área útil — sem card dentro de card ─────── */
@media (max-width: 767px) {
  /* Fundo branco no container — elimina a área cinza ao redor */
  #pagina-endereco.pagina-endereco,
  #pagina-endereco .pagina-endereco-conteudo {
    background:       #ffffff !important;
    background-color: #ffffff !important;
  }

  /* Header: remove margin-bottom; a border-bottom já separa */
  #pagina-endereco .topo-endereco {
    margin-bottom: 0 !important;
  }

  /* Lista e formulário: sem margens laterais, sem sombra, sem borda externa */
  #pagina-endereco .lista-enderecos-box,
  #pagina-endereco .form-endereco-shopee {
    margin:        0 !important;
    border:        none !important;
    border-radius: 0 !important;
    box-shadow:    none !important;
    padding:       16px !important;
  }
}
/* ── fim endereco form ──────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════════════
   NEXA CLEAN SCREENS
   Credito/Debito + Endereco: visual limpo, sem card dentro de card.
   Apenas CSS. Nenhuma logica ou JS alterado.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* 1. Endereco: esconde X quando a seta <- esta ativa (etapa de formulario) */
  #pagina-endereco .topo-endereco:has(.btn-voltar-etapa-endereco:not([hidden])) .btn-fechar-endereco {
    display:        none !important;
    pointer-events: none !important;
  }

  /* 2. Card screens: fundo branco (remove o cinza #f5f7fb) */
  #card-payment-screen,
  #card-list-screen {
    background:       #ffffff !important;
    background-color: #ffffff !important;
  }

  /* 3. Header das card screens: titulo centralizado, seta absoluta a esquerda */
  #card-payment-screen .card-screen-header,
  #card-list-screen .card-screen-header {
    justify-content: center !important;
    position:        sticky !important;
  }
  #card-payment-screen .card-screen-header h2,
  #card-list-screen .card-screen-header h2 {
    text-align: center !important;
  }
  #card-payment-screen .card-nav-btn,
  #card-list-screen .card-nav-btn {
    position:  absolute !important;
    left:      12px !important;
    top:       50% !important;
    transform: translateY(-50%) !important;
  }

  /* 4. Corpo: sem padding nem gap -- secoes fluem coladas */
  #card-payment-screen .card-screen-body,
  #card-list-screen .card-screen-body {
    padding:   0 !important;
    gap:       0 !important;
    max-width: 100% !important;
    margin:    0 !important;
  }

  /* 5. Banner de seguranca: linha fina, sem card */
  #card-payment-screen .card-security-banner {
    background:    #f8fafc !important;
    border:        none !important;
    border-bottom: 1px solid #E5E7EB !important;
    border-radius: 0 !important;
    padding:       12px 16px !important;
    margin:        0 !important;
    box-shadow:    none !important;
  }

  /* 6. Cartoes aceitos: sem card, so linha fina */
  #card-payment-screen .card-accepted-section {
    background:    #ffffff !important;
    border:        none !important;
    border-bottom: 1px solid #E5E7EB !important;
    border-radius: 0 !important;
    box-shadow:    none !important;
    padding:       14px 16px 12px !important;
    margin:        0 !important;
  }

  /* 7. Logos: chips pill-style elegantes */
  #card-payment-screen .card-accepted-logos {
    display:     flex !important;
    flex-wrap:   wrap !important;
    gap:         8px !important;
    align-items: center !important;
  }
  #card-payment-screen .card-logo-item {
    display:        inline-flex !important;
    align-items:    center !important;
    gap:            6px !important;
    padding:        5px 12px 5px 7px !important;
    border-radius:  999px !important;
    border:         1.5px solid #E5E7EB !important;
    background:     #ffffff !important;
    box-shadow:     none !important;
    font-size:      11.5px !important;
    font-weight:    700 !important;
    color:          #374151 !important;
    min-height:     28px !important;
    letter-spacing: 0.02em !important;
  }
  #card-payment-screen .card-logo-icon,
  #card-payment-screen .card-logo-img {
    width:         20px !important;
    height:        20px !important;
    flex:          0 0 20px !important;
    border-radius: 50% !important;
    font-size:     9px !important;
    font-weight:   900 !important;
  }

  /* 8. Secoes de formulario: sem card, so linha fina */
  #card-payment-screen .card-form-section,
  #card-list-screen .card-form-section {
    background:    #ffffff !important;
    border:        none !important;
    border-bottom: 1px solid #E5E7EB !important;
    border-radius: 0 !important;
    box-shadow:    none !important;
    padding:       16px !important;
    margin:        0 !important;
  }

  /* 9. Wrapper do botao confirmar: sem linha abaixo */
  #card-payment-screen .card-confirm-wrapper {
    border:  none !important;
    padding: 16px !important;
    margin:  0 !important;
  }

  /* 10. Rodape da lista de cartoes: linha fina acima */
  #card-list-screen .card-list-footer {
    border-top:    1px solid #E5E7EB !important;
    border-bottom: none !important;
    padding:       16px !important;
    margin:        0 !important;
    background:    #ffffff !important;
  }

  /* 11. Titulos das secoes: azul ML (nao roxo) */
  #card-payment-screen .card-section-title,
  #card-list-screen .card-section-title {
    color:                   #3483FA !important;
    -webkit-text-fill-color: #3483FA !important;
    font-size:               10.5px !important;
    font-weight:             700 !important;
    text-transform:          uppercase !important;
    letter-spacing:          0.08em !important;
    margin:                  0 0 14px !important;
  }

  /* 12. Focus dos campos: azul ML (nao roxo) */
  #card-payment-screen .card-field:focus {
    border-color: #3483FA !important;
    box-shadow:   0 0 0 3px rgba(52, 131, 250, 0.12) !important;
  }

  /* 13. Botao confirmar: azul ML */
  #card-payment-screen .btn-primary-card {
    background:    linear-gradient(135deg, #3483FA 0%, #2968C8 100%) !important;
    box-shadow:    0 4px 16px rgba(52, 131, 250, 0.28) !important;
    border-radius: 8px !important;
  }
}
/* fim NEXA CLEAN SCREENS */

/* ── Cartoes aceitos: somente simbolo, formato circular ─────────────────── */
@media (max-width: 767px) {
  /* Fileira de circulos */
  #card-payment-screen .card-accepted-logos {
    gap:         10px !important;
    flex-wrap:   wrap !important;
    align-items: center !important;
  }

  /* Cada bandeira: circulo branco com borda fina */
  #card-payment-screen .card-logo-item {
    width:           44px !important;
    height:          44px !important;
    min-height:      44px !important;
    padding:         0 !important;
    border-radius:   50% !important;
    border:          1.5px solid #E5E7EB !important;
    background:      #ffffff !important;
    display:         inline-flex !important;
    align-items:     center !important;
    justify-content: center !important;
    gap:             0 !important;
    box-shadow:      none !important;
    flex-shrink:     0 !important;
  }

  /* Esconde os textos VISA, MC, ELO, AMEX, HIPER */
  #card-payment-screen .card-logo-item > span:not([class]) {
    display: none !important;
  }

  /* Icone da bandeira: circulo colorido maior */
  #card-payment-screen .card-logo-icon {
    width:           28px !important;
    height:          28px !important;
    flex:            0 0 28px !important;
    border-radius:   50% !important;
    font-size:       11px !important;
    font-weight:     900 !important;
    display:         inline-flex !important;
    align-items:     center !important;
    justify-content: center !important;
  }

  /* Imagem do Mastercard */
  #card-payment-screen .card-logo-img {
    width:         28px !important;
    height:        28px !important;
    flex:          0 0 28px !important;
    object-fit:    contain !important;
    border-radius: 0 !important;
  }
}
/* ── fim cartoes aceitos simbolo ────────────────────────────────────────── */

/* ======================================================================
   NEXA FINAL — Limpeza visual: radius 6px, sem roxo, sem bola no X
   Apenas CSS. Zero alteracao de logica, JS ou funcionalidade.
   ====================================================================== */

/* AJUSTE 1 — Remove glow roxo nos botoes do produto (mobile) */
@media (max-width: 767px) {
  body.nexa-produto-ativa #pagina-pedido .pd-btn-cart {
    box-shadow:              none !important;
    border-radius:           6px !important;
    background:              #3483FA !important;
    color:                   #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border:                  none !important;
  }
  body.nexa-produto-ativa #pagina-pedido .pd-btn-buy {
    box-shadow:              none !important;
    border-radius:           6px !important;
    background:              #ffffff !important;
    border:                  1.5px solid #3483FA !important;
    color:                   #3483FA !important;
    -webkit-text-fill-color: #3483FA !important;
  }
}

/* AJUSTE 1 — Tambem global (desktop) */
.pd-btn-cart {
  box-shadow:    none !important;
  border-radius: 6px !important;
}
.pd-btn-buy {
  box-shadow:    none !important;
  border-radius: 6px !important;
}

/* AJUSTE 2 — X do checkout: sem bolinha ao redor */
@media (max-width: 767px) {
  #pagina-compra.pagina.ativa .btn-fechar-compra {
    background:              transparent !important;
    border:                  none !important;
    box-shadow:              none !important;
    border-radius:           0 !important;
    width:                   40px !important;
    height:                  40px !important;
    font-size:               24px !important;
    color:                   #374151 !important;
    -webkit-text-fill-color: #374151 !important;
  }
}

/* AJUSTE 3 — Esconde X da tela de parcelas (JS pode mostrar, CSS suprime) */
#parcelas-sheet-fechar,
.parcelas-sheet-fechar {
  display: none !important;
}

/* AJUSTE 4 + AJUSTE 5 — radius 6px, parcela selecionada azul (mobile) */
@media (max-width: 767px) {
  /* Inputs e selects do cartao */
  #card-payment-screen .card-field,
  #card-payment-screen input.card-field,
  #card-payment-screen select.card-field,
  #card-payment-screen .card-installments-trigger {
    border-radius: 6px !important;
  }

  /* Opcoes de parcelas: radius 6px */
  .parcela-opcao {
    border-radius: 6px !important;
  }

  /* Parcela selecionada: fundo azul claro, sem roxo */
  .parcela-opcao.selecionada {
    background:              #EAF3FF !important;
    color:                   #3483FA !important;
    -webkit-text-fill-color: #3483FA !important;
    border:                  1px solid rgba(52, 131, 250, 0.22) !important;
    border-radius:           6px !important;
  }
  .parcela-opcao.selecionada::after {
    color:                   #3483FA !important;
    -webkit-text-fill-color: #3483FA !important;
  }

  /* Bottom sheet: radius menor no topo */
  .parcelas-sheet {
    border-radius: 12px 12px 0 0 !important;
  }
}

/* AJUSTE 6 — Font Poppins explicita no sheet de parcelas */
.parcelas-sheet,
.parcelas-sheet *,
.parcelas-sheet-topo h3,
.parcela-opcao {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}

/* fim NEXA FINAL */

/* ================================================
   UF PICKER — seletor customizado de estado
   ================================================ */

.uf-picker-trigger {
  width: 100%;
  height: 48px;
  border: 1px solid #D9DEE8 !important;
  border-radius: 6px !important;
  background: #FFFFFF;
  color: #374151;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: none !important;
  box-sizing: border-box;
  position: relative !important;
  z-index: 2 !important;
  pointer-events: auto !important;
}

.uf-picker-trigger:focus {
  outline: 2px solid #2563eb;
  outline-offset: 0;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.uf-picker-trigger.campo-erro {
  border-color: #ef4444 !important;
}

.uf-picker-value {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #9CA3AF;
  font-size: 14px;
  font-weight: 600;
}

.uf-picker-trigger.uf-has-value .uf-picker-value {
  color: #111827;
}

.uf-picker-arrow {
  flex-shrink: 0;
  font-size: 14px;
  color: #6B7280;
  margin-left: 8px;
  line-height: 1;
}

.uf-picker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.40);
  z-index: 200000;
  pointer-events: auto !important;
}

.uf-picker-sheet {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  max-width: 430px;
  margin: 0 auto;
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid #E5E7EB;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
  z-index: 200001;
  padding: 16px;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  pointer-events: auto !important;
}

/* ── Entrega: summary card após seleção ──────────────────────────────────── */
.checkout-selected-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
}

.checkout-selected-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}

.checkout-selected-title {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  line-height: 1.2;
}

.checkout-selected-subtitle {
  font-size: 12px;
  color: #6b7280;
  line-height: 1.3;
}

.frete-resumo-direita {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.checkout-selected-price {
  font-size: 13px;
  font-weight: 700;
  color: #f97316;
  white-space: nowrap;
}

.checkout-change-btn {
  border: 1px solid #dbeafe;
  background: #fff;
  color: #2563eb;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
}

.checkout-change-btn:hover {
  background: #eff6ff;
}

/* ── CEP inline error ───────────────────────────────────────────────────── */
.card-cep-error {
  display: none;
  color: #ef4444;
  font-size: 12px;
  margin-top: 4px;
  margin-bottom: 0;
  line-height: 1.4;
}

.uf-picker-header {
  margin-bottom: 14px;
  font-size: 15px;
  font-weight: 600;
  color: #111827;
  text-align: center;
  font-family: inherit;
}

.uf-picker-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  pointer-events: auto !important;
}

.uf-picker-option {
  height: 40px;
  border-radius: 6px !important;
  border: 1px solid #E5E7EB;
  background: #FFFFFF;
  color: #111827;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.10s, border-color 0.10s;
  pointer-events: auto !important;
}

.uf-picker-option:hover {
  background: #F3F4F6;
  border-color: #D1D5DB;
}

.uf-picker-option.selected {
  background: #EAF3FF !important;
  border-color: #2563eb !important;
  color: #2563eb !important;
}

@media (max-width: 360px) {
  .uf-picker-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* fim UF PICKER */

/* ================================================
   RADIUS 6px — produto selecionado + entrega
   ================================================ */

/* Produto na secao 'Produtos selecionados' */
#pagina-compra .compra-item-resumo,
#pagina-compra .compra-item-resumo.compra-item-card {
  border-radius: 6px !important;
}

@media (max-width: 767px) {
  #pagina-compra.pagina.ativa .compra-item-resumo,
  #pagina-compra.pagina.ativa .compra-item-resumo.compra-item-card {
    border-radius: 6px !important;
  }
}

/* Opcoes de entrega (normal + selecionada) */
.frete-opcao-compra-conteudo,
#pagina-compra .frete-opcao-compra-conteudo,
#pagina-compra.pagina.ativa .frete-opcao-compra-conteudo,
#pagina-compra.pagina.ativa .frete-opcao-compra input[type="radio"]:checked + .frete-opcao-compra-conteudo {
  border-radius: 6px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ABA AVALIAÇÕES — tab única (sem a aba Perguntas ao lado)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Remove aparência de "abas múltiplas" quando há só uma */
.pd-tab.pd-tab-unica {
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
  font-weight: 700 !important;
  pointer-events: none !important;
  cursor: default !important;
  color: inherit !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BOTÃO "PERGUNTAS SOBRE O PRODUTO"
   ═══════════════════════════════════════════════════════════════════════════ */

.pd-perguntas-btn-wrap {
  padding: 14px 0 12px !important;
}

.pd-btn-perguntas {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  height: 48px !important;
  min-height: unset !important;
  padding: 0 16px !important;
  border: none !important;
  border-radius: 6px !important;
  background: #2563EB !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  font-family: var(--na-font) !important;
  cursor: pointer !important;
  text-align: center !important;
  transition: background 0.15s ease !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
}

.pd-btn-perguntas svg {
  flex-shrink: 0 !important;
  stroke: #ffffff !important;
  color: #ffffff !important;
}

.pd-btn-perguntas:hover {
  background: #1D4ED8 !important;
}

.pd-btn-perguntas:active {
  transform: scale(.98) !important;
  background: #1E40AF !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PÁGINA DE PERGUNTAS IA (#pagina-perguntas-produto)
   ═══════════════════════════════════════════════════════════════════════════ */

#pagina-perguntas-produto {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10100 !important;
  background: #f8f9fc !important;
  display: none !important;
  flex-direction: column !important;
  overflow: hidden !important;
  /* Zera paddings/margins herdados da classe .pagina (mobile: padding-bottom: 92px, etc.) */
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
}

#pagina-perguntas-produto.ativa {
  display: flex !important;
}

/* Wrapper flex col full height — preenche o pai (#pagina-perguntas-produto) que já tem inset:0 */
.ppq-wrapper {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  max-width: 600px !important;
  margin: 0 auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* ── Header ─────────────────────────────────────────────────────────────── */

.ppq-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 14px 10px 6px !important;
  background: #ffffff !important;
  border-bottom: 1px solid #e5e7eb !important;
  flex-shrink: 0 !important;
  min-height: 56px !important;
  padding-top: max(10px, env(safe-area-inset-top, 10px)) !important;
  box-sizing: border-box !important;
}

.ppq-btn-voltar {
  width: 40px !important;
  height: 40px !important;
  border: none !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: #374151 !important;
  flex-shrink: 0 !important;
  border-radius: 8px !important;
  padding: 0 !important;
}

.ppq-btn-voltar:active {
  background: #f3f4f6 !important;
}

.ppq-produto-topo {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.ppq-produto-img {
  width: 36px !important;
  height: 36px !important;
  border-radius: 6px !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  border: 1px solid #e5e7eb !important;
}

.ppq-produto-nome {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #111827 !important;
  font-family: 'Poppins', -apple-system, sans-serif !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
}

.ppq-ia-badge {
  flex-shrink: 0 !important;
  background: #2563eb !important;
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
  border-radius: 999px !important;
  letter-spacing: 0.04em !important;
  font-family: 'Poppins', sans-serif !important;
}

/* ── Área do chat ────────────────────────────────────────────────────────── */

.ppq-chat {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 16px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  box-sizing: border-box !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Mensagem genérica */
.ppq-msg {
  display: flex !important;
  max-width: 88% !important;
}

/* Mensagem do usuário — alinhada à direita */
.ppq-msg.ppq-usuario {
  align-self: flex-end !important;
  flex-direction: row-reverse !important;
}

.ppq-msg.ppq-usuario .ppq-msg-texto {
  background: #2563eb !important;
  color: #ffffff !important;
  border-radius: 16px 16px 4px 16px !important;
}

/* Mensagem da IA — alinhada à esquerda */
.ppq-msg.ppq-ia {
  align-self: flex-start !important;
}

.ppq-msg.ppq-ia .ppq-msg-texto {
  background: #ffffff !important;
  color: #111827 !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 16px 16px 16px 4px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
}

/* Texto da bolha */
.ppq-msg-texto {
  padding: 10px 14px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  font-family: 'Poppins', -apple-system, sans-serif !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
}

/* Loading dots */
.ppq-msg.ppq-carregando .ppq-msg-texto {
  padding: 14px 18px !important;
}

.ppq-dots {
  display: inline-flex !important;
  gap: 4px !important;
  align-items: center !important;
}

.ppq-dots span {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #9ca3af !important;
  animation: ppq-bounce 1.2s infinite ease-in-out !important;
  display: inline-block !important;
}

.ppq-dots span:nth-child(1) { animation-delay: 0s !important; }
.ppq-dots span:nth-child(2) { animation-delay: 0.2s !important; }
.ppq-dots span:nth-child(3) { animation-delay: 0.4s !important; }

@keyframes ppq-bounce {
  0%, 80%, 100% { transform: scale(0.8); opacity: 0.5; }
  40% { transform: scale(1.2); opacity: 1; }
}

/* ── Área de input ────────────────────────────────────────────────────────── */

.ppq-input-row {
  display: flex !important;
  align-items: flex-end !important;
  gap: 8px !important;
  padding: 10px 14px !important;
  padding-bottom: max(10px, env(safe-area-inset-bottom, 10px)) !important;
  background: #ffffff !important;
  border-top: 1px solid #e5e7eb !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

.ppq-input {
  flex: 1 !important;
  min-height: 44px !important;
  max-height: 120px !important;
  padding: 10px 14px !important;
  border: 1.5px solid #d1d5db !important;
  border-radius: 22px !important;
  font-size: 14px !important;
  font-family: 'Poppins', -apple-system, sans-serif !important;
  color: #111827 !important;
  background: #f9fafb !important;
  resize: none !important;
  outline: none !important;
  line-height: 1.45 !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s ease !important;
}

.ppq-input:focus {
  border-color: #2563eb !important;
  background: #ffffff !important;
}

.ppq-input::placeholder {
  color: #9ca3af !important;
}

.ppq-btn-enviar {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  border: none !important;
  background: #2563eb !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: background 0.15s ease, transform 0.1s ease !important;
}

.ppq-btn-enviar svg {
  stroke: #ffffff !important;
}

.ppq-btn-enviar:hover {
  background: #1d4ed8 !important;
}

.ppq-btn-enviar:active {
  transform: scale(0.92) !important;
}

.ppq-btn-enviar:disabled {
  background: #93c5fd !important;
  cursor: not-allowed !important;
}

/* Desktop: mostra o botão de perguntas somente no mobile */
@media (min-width: 768px) {
  .pd-perguntas-btn-wrap {
    display: none !important;
  }
}

/* fim RADIUS 6px */

/* ══════════════════════════════════════════════════════════════════════
   CORREÇÕES VISUAIS — MAIO 2026
   ══════════════════════════════════════════════════════════════════════ */

/* 1. UF duplicado: garantir que o select oculto fique sempre invisível
      mesmo com .card-field { display:block !important } de outra regra */
#card-state-input {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  overflow: hidden !important;
  pointer-events: none !important;
  position: absolute !important;
}

/* 2. Cartões aceitos — linha única com logos dentro de círculos */
.cards-accepted-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin: 10px 0 16px !important;
  padding: 12px 16px !important;
}

.cards-accepted-title {
  color: #16A34A !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: .03em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  font-family: var(--na-font) !important;
}

.cards-accepted-logos {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}

.card-brand-circle {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 1px solid #E5E7EB !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.08) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

.card-brand-circle img {
  display: block !important;
  width: 28px !important;
  height: auto !important;
  max-height: 20px !important;
  object-fit: contain !important;
}

/* Ocultar seção antiga de cartões (caso ainda exista algum HTML legado) */
.card-accepted-section { display: none !important; }

/* 3. Badge "X itens" no checkout — azul neutro, sem roxo */
#pagina-compra.pagina.ativa #compra-resumo-contagem {
  background: #EFF6FF !important;
  color: #2563EB !important;
  -webkit-text-fill-color: #2563EB !important;
  border: 1px solid #DBEAFE !important;
}

/* 4. Botão "Alterar" / pills de pagamento — azul neutro */
#pagina-compra.pagina.ativa .pagamento-inline-pill-alterar {
  background: #EFF6FF !important;
  color: #2563EB !important;
  -webkit-text-fill-color: #2563EB !important;
  border: 1px solid #BFDBFE !important;
  border-radius: 999px !important;
}

/* 5. Botão X do checkout — visual profissional de app (fino, clean) */
#pagina-compra.pagina.ativa .btn-fechar-compra,
#pagina-compra .btn-fechar-compra {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  border-radius: 6px !important;
  border: none !important;
  background: transparent !important;
  color: #334155 !important;
  -webkit-text-fill-color: #334155 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 30px !important;
  font-weight: 300 !important;
  font-family: Arial, sans-serif !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: background .12s ease, transform .1s ease !important;
}

#pagina-compra.pagina.ativa .btn-fechar-compra:hover,
#pagina-compra .btn-fechar-compra:hover,
#pagina-compra.pagina.ativa .btn-fechar-compra:focus-visible {
  background: #F1F5F9 !important;
  border-color: transparent !important;
  outline: none !important;
}

#pagina-compra.pagina.ativa .btn-fechar-compra:active,
#pagina-compra .btn-fechar-compra:active {
  transform: scale(.94) !important;
  background: #E2E8F0 !important;
}

/* 6. Font-family Poppins explícita no checkout e formulário de cartão */
#pagina-compra,
#pagina-compra *,
#card-payment-screen,
#card-payment-screen *,
.card-screen-body *,
.compra-container *,
.compra-resumo-itens *,
.compra-card * {
  font-family: var(--na-font) !important;
}

/* 7. Separadores entre seções da página de produto (base — desktop) */
.pd-perguntas-btn-wrap {
  border-top: 1px solid var(--na-border) !important;
  padding: 14px 0 12px !important;
}

.pd-detalhes-resumo-card {
  border-top: 1px solid var(--na-border) !important;
  padding-top: 14px !important;
  margin-top: 0 !important;
}

.pd-relacionados {
  border-top: 1px solid var(--na-border) !important;
  padding-top: 14px !important;
  margin-top: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   PÁGINA DE PRODUTO MOBILE — Correções visuais finais
   Aplica apenas em mobile (max-width:767px) com body.nexa-produto-ativa.
   NÃO afeta desktop, admin, checkout, carrinho, home, nem outros elementos.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── Botão Perguntas: alinhado com os botões Adicionar/Comprar ───────── */
  /* pd-col-info tem padding:22px 20px, então 20px de cada lado */
  body.nexa-produto-ativa #pagina-pedido .pd-perguntas-btn-wrap {
    padding: 10px 20px !important;
    margin: 0 !important;
    border-top: 1px solid #e5e7eb !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pd-btn-perguntas {
    height: 56px !important;
    min-height: unset !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* ── Avaliações: sem margin-bottom exagerado abaixo da seção de tabs ─── */
  body.nexa-produto-ativa #pagina-pedido .pd-tabs-section {
    margin-bottom: 0 !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pd-tab-corpo {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  /* ── Detalhes do produto: card branco, borda 1px, border-radius 6px ──── */
  body.nexa-produto-ativa #pagina-pedido .pd-detalhes-resumo-card {
    display: block !important;
    margin: 0 !important;           /* remove o margin:20px 0 6px do genérico */
    padding: 14px 16px !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-top: 1px solid #e5e7eb !important;
    border-radius: 6px !important;  /* override dos 14px do genérico mobile */
    box-shadow: none !important;
    box-sizing: border-box !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }

  /* ── Seção "Complete sua rotina" ────────────────────────────────────── */
  body.nexa-produto-ativa #pagina-pedido .pd-relacionados {
    margin: 0 !important;
    border-top: 1px solid #e5e7eb !important; /* substitui a faixa 6px cinza */
    padding-top: 14px !important;
  }

    /* ── Cards "Complete sua rotina": espelham o estilo dos cards da home ─── */
  body.nexa-produto-ativa #pagina-pedido .pd-grade-relacionados .produto-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.07) !important;
    border-radius: 14px !important;
    min-height: 220px !important;
    padding: 10px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    transform: none !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pd-grade-relacionados .produto-card:active {
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06) !important;
    transform: scale(0.98) !important;
  }

  /* Img wrap: container interno arredondado, igual à home */
  body.nexa-produto-ativa #pagina-pedido .pd-grade-relacionados .produto-img-wrap {
    width: 100% !important;
    height: 110px !important;
    min-height: 110px !important;
    flex-shrink: 0 !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    border-radius: 10px !important;
    background: #f8fafc !important;
    border: none !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* Imagem */
  body.nexa-produto-ativa #pagina-pedido .pd-grade-relacionados .imagem-produto {
    width: 100% !important;
    height: 104px !important;
    max-height: 104px !important;
    padding: 4px !important;
    object-fit: contain !important;
    object-position: center !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
  }

  /* Halo: oculto */
  body.nexa-produto-ativa #pagina-pedido .pd-grade-relacionados .produto-img-halo {
    display: none !important;
  }

  /* Card body: flex coluna, empurra footer para baixo */
  body.nexa-produto-ativa #pagina-pedido .pd-grade-relacionados .produto-card-body {
    flex: 1 1 auto !important;
    padding: 2px 0 0 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* Avaliação */
  body.nexa-produto-ativa #pagina-pedido .pd-grade-relacionados .produto-rating {
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    margin: 0 0 3px !important;
    font-size: 10px !important;
    line-height: 1 !important;
    height: 14px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pd-grade-relacionados .produto-rating[hidden] {
    display: none !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pd-grade-relacionados .produto-rating-stars {
    color: #f59e0b !important;
    -webkit-text-fill-color: #f59e0b !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pd-grade-relacionados .produto-rating-nota,
  body.nexa-produto-ativa #pagina-pedido .pd-grade-relacionados .produto-rating-vendidos {
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    min-width: 0 !important;
  }

  /* Nome: 2 linhas máx */
  body.nexa-produto-ativa #pagina-pedido .pd-grade-relacionados .nome-produto {
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    margin: 0 0 3px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  /* Marca */
  body.nexa-produto-ativa #pagina-pedido .pd-grade-relacionados .marca-produto {
    font-size: 10px !important;
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
    margin: 0 0 6px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  /* Footer: preço + botão carrinho na base */
  body.nexa-produto-ativa #pagina-pedido .pd-grade-relacionados .produto-card-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-top: auto !important;
    gap: 4px !important;
    padding-top: 4px !important;
  }

  /* Preço */
  body.nexa-produto-ativa #pagina-pedido .pd-grade-relacionados .preco-produto {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #F97316 !important;
    -webkit-text-fill-color: #F97316 !important;
    margin: 0 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  /* Botão carrinho */
  body.nexa-produto-ativa #pagina-pedido .pd-grade-relacionados .produto-btn-cart {
    background: #2563eb !important;
    border: none !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3) !important;
    cursor: pointer !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pd-grade-relacionados .produto-btn-cart svg {
    width: 18px !important;
    height: 18px !important;
  }

  /* Faixa "Indisponível": radius inferior acompanha o card */
  body.nexa-produto-ativa #pagina-pedido .pd-grade-relacionados .produto-card-indisponivel {
    border-radius: 0 0 14px 14px !important;
    font-size: 11px !important;
  }

  /* Favorito, trust-row, best-row: ocultos */
  body.nexa-produto-ativa #pagina-pedido .pd-grade-relacionados .produto-btn-fav,
  body.nexa-produto-ativa #pagina-pedido .pd-grade-relacionados .produto-trust-row,
  body.nexa-produto-ativa #pagina-pedido .pd-grade-relacionados .produto-best-row {
    display: none !important;
  }

}

/* ── Banner com imagem: ocultar overlay HTML (texto + CTA sobrepostos) ───
   Quando bc-slide--img-only, a própria imagem já contém o visual do anúncio.
   NÃO afeta banners sem imagem (que continuam com o overlay de texto).    */
#mobile-promos .bc-slide--img-only .bc-slide-inner { display: none !important; }
#mobile-promos .bc-slide--img-only::before        { display: none !important; }
#mobile-promos .bc-slide--img-only img.bc-img     {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: inherit !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   "COMPLETE SUA ROTINA" — Cards compactos e profissionais
   Aplica apenas em mobile (max-width:767px) com body.nexa-produto-ativa.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── Grade: 2 colunas, gap 10px ─────────────────────────────────────── */
  body.nexa-produto-ativa #pagina-pedido .pd-grade-relacionados {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    background: transparent !important;
    border-radius: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ── Card: branco, borda fina, sombra suave ──────────────────────────── */
  body.nexa-produto-ativa #pagina-pedido .pd-grade-relacionados .produto-card {
    position: relative !important;
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.07) !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.07) !important;
    border-radius: 6px !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    transform: none !important;
    font-family: Roboto, Arial, Helvetica, sans-serif !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pd-grade-relacionados .produto-card * {
    font-family: Roboto, Arial, Helvetica, sans-serif !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pd-grade-relacionados .produto-card:active {
    transform: scale(0.985) !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08) !important;
  }

  /* ── Img wrap: 140px, separador na base ──────────────────────────────── */
  body.nexa-produto-ativa #pagina-pedido .pd-grade-relacionados .produto-img-wrap {
    width: 100% !important;
    height: 140px !important;
    min-height: 140px !important;
    max-height: 140px !important;
    flex-shrink: 0 !important;
    flex-basis: 140px !important;
    border-radius: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
    background: #fafafa !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* Imagem sem distorção */
  body.nexa-produto-ativa #pagina-pedido .pd-grade-relacionados .imagem-produto {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 6px !important;
    display: block !important;
    box-sizing: border-box !important;
  }

  /* Halo: oculto */
  body.nexa-produto-ativa #pagina-pedido .pd-grade-relacionados .produto-img-halo {
    display: none !important;
  }

  /* ── Card body: espaço reservado para o footer absoluto ──────────────── */
  body.nexa-produto-ativa #pagina-pedido .pd-grade-relacionados .produto-card-body {
    flex: 1 1 auto !important;
    padding: 7px 9px 52px !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* ── Nome: 2 linhas max ──────────────────────────────────────────────── */
  body.nexa-produto-ativa #pagina-pedido .pd-grade-relacionados .nome-produto {
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
    margin: 0 0 2px !important;
    min-height: 0 !important;
    max-height: 28px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  /* ── Marca ───────────────────────────────────────────────────────────── */
  body.nexa-produto-ativa #pagina-pedido .pd-grade-relacionados .marca-produto {
    font-size: 10px !important;
    font-weight: 600 !important;
    color: #6b7280 !important;
    -webkit-text-fill-color: #6b7280 !important;
    margin: 0 0 3px !important;
    max-height: 13px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    line-height: 1.15 !important;
  }

  /* ── Rating: estrelas visíveis ───────────────────────────────────────── */
  body.nexa-produto-ativa #pagina-pedido .pd-grade-relacionados .produto-rating {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 2px !important;
    height: 15px !important;
    min-height: 15px !important;
    max-height: 15px !important;
    margin: 0 0 4px !important;
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }

  /* Mostrar estrelas mesmo sem avaliação */
  body.nexa-produto-ativa #pagina-pedido .pd-grade-relacionados .produto-rating[hidden] {
    display: flex !important;
    margin: 0 0 4px !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pd-grade-relacionados .produto-rating-stars {
    color: #f59e0b !important;
    -webkit-text-fill-color: #f59e0b !important;
    font-size: 9.5px !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pd-grade-relacionados .produto-rating-nota {
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    min-width: 0 !important;
  }

  /* Fallback para produtos sem avaliação */
  body.nexa-produto-ativa #pagina-pedido .pd-grade-relacionados .produto-rating-nota:empty::after {
    content: "5,0";
  }

  body.nexa-produto-ativa #pagina-pedido .pd-grade-relacionados .produto-rating-vendidos {
    color: #94a3b8 !important;
    -webkit-text-fill-color: #94a3b8 !important;
    font-size: 9px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    min-width: 0 !important;
  }

  /* ── Trust row: legível, sem corte, pode quebrar linha ───────────────── */
  body.nexa-produto-ativa #pagina-pedido .pd-grade-relacionados .produto-trust-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 3px 4px !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pd-grade-relacionados .produto-trust-chip {
    display: inline-flex !important;
    align-items: center !important;
    height: auto !important;
    min-height: 15px !important;
    padding: 1px 5px !important;
    border-radius: 4px !important;
    border: none !important;
    background: rgba(124, 58, 237, 0.06) !important;
    color: #5b21b6 !important;
    -webkit-text-fill-color: #5b21b6 !important;
    font-size: 9px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
    max-width: 100% !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pd-grade-relacionados .produto-trust-chip:nth-child(n+3) {
    display: none !important;
  }

  /* ── Footer absoluto: preço + botão na mesma linha ───────────────────── */
  body.nexa-produto-ativa #pagina-pedido .pd-grade-relacionados .produto-card-footer {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    padding: 6px 9px 8px !important;
    background: #ffffff !important;
    border-top: 1px solid rgba(15, 23, 42, 0.05) !important;
    z-index: 2 !important;
    margin: 0 !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pd-grade-relacionados .produto-preco-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pd-grade-relacionados .produto-preco-antigo {
    display: block !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #94a3b8 !important;
    -webkit-text-fill-color: #94a3b8 !important;
    text-decoration: line-through !important;
    white-space: nowrap !important;
    line-height: 1 !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pd-grade-relacionados .preco-produto {
    font-size: 15px !important;
    font-weight: 950 !important;
    color: #f45b0b !important;
    -webkit-text-fill-color: #f45b0b !important;
    margin: 0 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* ── Botão carrinho: compacto, no footer ─────────────────────────────── */
  body.nexa-produto-ativa #pagina-pedido .pd-grade-relacionados .produto-btn-cart {
    position: static !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border: 0 !important;
    border-radius: 6px !important;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.14), transparent 38%),
      linear-gradient(135deg, #7c3aed 0%, #2563eb 100%) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(88, 28, 135, 0.22) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    z-index: auto !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pd-grade-relacionados .produto-btn-cart:active {
    transform: scale(0.93) !important;
    box-shadow: 0 2px 6px rgba(88, 28, 135, 0.20) !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pd-grade-relacionados .produto-btn-cart svg {
    width: 17px !important;
    height: 17px !important;
    flex-shrink: 0 !important;
    stroke: currentColor !important;
    stroke-width: 2.2 !important;
  }

  body.nexa-produto-ativa #pagina-pedido .pd-grade-relacionados .produto-btn-cart.adicionado {
    background: #22c55e !important;
    box-shadow: 0 3px 8px rgba(34, 197, 94, 0.24) !important;
  }

  /* Faixa Indisponível */
  body.nexa-produto-ativa #pagina-pedido .pd-grade-relacionados .produto-card-indisponivel {
    border-radius: 0 0 6px 6px !important;
    font-size: 11px !important;
  }

  /* Elementos desnecessários ocultos */
  body.nexa-produto-ativa #pagina-pedido .pd-grade-relacionados .produto-btn-fav,
  body.nexa-produto-ativa #pagina-pedido .pd-grade-relacionados .produto-best-row,
  body.nexa-produto-ativa #pagina-pedido .pd-grade-relacionados .produto-card-badges,
  body.nexa-produto-ativa #pagina-pedido .pd-grade-relacionados .produto-badge-desconto {
    display: none !important;
  }

  /* Garantir pointer-events no trigger da UF */
  .uf-picker-trigger {
    pointer-events: auto !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 1 !important;
  }

}

/* ══════════════════════════════════════════════════════════════════════════
   CHECKOUT MOBILE — Refinamento visual profissional
   Cards consistentes, botões Alterar padronizados, resumo premium.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── 1. Pagamento: cabeçalho de seção igual ao frete ────────────────── */
  #pagina-compra.pagina.ativa .pagamento-resumo-topo {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 14px 8px !important;
    border-bottom: 1px solid rgba(15,23,42,0.06) !important;
  }
  #pagina-compra.pagina.ativa .pagamento-resumo-topo h3 {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
    margin: 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
  }

  /* ── 2. Pagamento: corpo com padding para o card ────────────────────── */
  #pagina-compra.pagina.ativa .pagamento-resumo-corpo {
    padding: 12px 14px !important;
  }

  /* ── 3. Frete: cabeçalho de seção consistente ───────────────────────── */
  #pagina-compra.pagina.ativa .frete-topo-compra {
    display: flex !important;
    align-items: center !important;
    padding: 10px 14px 8px !important;
    border-bottom: 1px solid rgba(15,23,42,0.06) !important;
  }
  #pagina-compra.pagina.ativa .frete-topo-compra h3 {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
    margin: 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
  }

  /* ── 4. Frete resumo: espaçamento externo ───────────────────────────── */
  #pagina-compra.pagina.ativa #frete-resumo-compra {
    padding: 12px 14px !important;
  }

  /* ── 5. Summary card: padding compacto e fundo sutil ───────────────── */
  #pagina-compra.pagina.ativa .checkout-selected-summary {
    padding: 10px 12px !important;
    gap: 10px !important;
    border-radius: 8px !important;
    border: 1px solid #e5e7eb !important;
    background: #f9fafb !important;
  }

  /* ── 6. Frete resumo direita: preço e botão na mesma linha ─────────── */
  #pagina-compra.pagina.ativa .frete-resumo-direita {
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
  }

  /* ── 7. Botões Alterar — padronização total (frete + pagamento) ─────── */
  #pagina-compra.pagina.ativa .checkout-change-btn {
    border: 1px solid #dbeafe !important;
    background: #fff !important;
    color: #2563eb !important;
    -webkit-text-fill-color: #2563eb !important;
    border-radius: 999px !important;
    padding: 5px 12px !important;
    height: auto !important;
    line-height: 1.4 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-shadow: none !important;
    background-image: none !important;
    transition: background 0.12s ease !important;
  }
  #pagina-compra.pagina.ativa .checkout-change-btn:hover {
    background: #eff6ff !important;
  }
  #pagina-compra.pagina.ativa .checkout-change-btn:active {
    transform: scale(0.96) !important;
    opacity: 1 !important;
  }

  /* ── 8. Endereço alterar pill (::after) — igual ao checkout-change-btn */
  #pagina-compra.pagina.ativa .endereco-topo::after {
    content: "Alterar" !important;
    display: inline-flex !important;
    align-items: center !important;
    height: auto !important;
    padding: 5px 12px !important;
    line-height: 1.4 !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #2563eb !important;
    -webkit-text-fill-color: #2563eb !important;
    background: #fff !important;
    border: 1px solid #dbeafe !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
  }

  /* ── 9. Endereço: localização menor, itálico e cinza suave ─────────── */
  #pagina-compra.pagina.ativa #mostrar-localizacao {
    font-size: 11px !important;
    font-style: italic !important;
    color: #94a3b8 !important;
    -webkit-text-fill-color: #94a3b8 !important;
    margin-top: 3px !important;
  }

  /* ── 10. Resumo final: topo consistente ─────────────────────────────── */
  #pagina-compra.pagina.ativa .compra-resumo-final-topo {
    padding: 10px 14px 8px !important;
    border-bottom: 1px solid rgba(15,23,42,0.06) !important;
  }
  #pagina-compra.pagina.ativa .compra-resumo-final-topo h3 {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
    margin: 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
  }

  /* ── 11. Resumo final: linhas de valor limpas ───────────────────────── */
  #pagina-compra.pagina.ativa .compra-total-linha {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 14px !important;
    border-bottom: 1px solid rgba(15,23,42,0.04) !important;
    margin: 0 !important;
  }
  #pagina-compra.pagina.ativa .compra-total-linha span {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #6b7280 !important;
    -webkit-text-fill-color: #6b7280 !important;
  }
  #pagina-compra.pagina.ativa .compra-total-linha strong {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
  }

  /* Linha de total final: destaque premium */
  #pagina-compra.pagina.ativa .compra-total-linha-destaque {
    border-top: 1.5px solid #e5e7eb !important;
    border-bottom: none !important;
    padding-top: 13px !important;
    padding-bottom: 13px !important;
    margin-top: 2px !important;
  }
  #pagina-compra.pagina.ativa .compra-total-linha-destaque span {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
  }
  #pagina-compra.pagina.ativa .compra-total-linha-destaque strong {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #3483FA !important;
    -webkit-text-fill-color: #3483FA !important;
  }

  /* ── 12. Botão Finalizar compra — altura e visual profissional ──────── */
  #pagina-compra.pagina.ativa .btn-finalizar-compra {
    display: block !important;
    width: calc(100% - 28px) !important;
    margin: 14px auto 20px !important;
    height: 52px !important;
    min-height: 52px !important;
    border-radius: 12px !important;
    background: #3483FA !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    text-align: center !important;
    border: none !important;
    box-shadow: 0 4px 18px rgba(52,131,250,0.28) !important;
    cursor: pointer !important;
  }
  #pagina-compra.pagina.ativa .btn-finalizar-compra:active {
    transform: scale(0.98) !important;
    filter: brightness(0.88) !important;
    opacity: 1 !important;
    box-shadow: 0 2px 8px rgba(52,131,250,0.18) !important;
  }

}

/* ══════════════════════════════════════════════════════════════════════════
   CHECKOUT MOBILE — Refinamento visual v3
   Prioridades: borda suave, cards compactos, checkbox refinado,
   botões Alterar/Adicionar uniformes, alinhamento preciso.
   CSS only. Zero alteração de lógica ou comportamento.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ══ FORMA DE ENTREGA — opções de seleção ══════════════════════════════ */

  /* Card de cada opção: compacto, borda suave, micro-sombra */
  #pagina-compra.pagina.ativa .frete-opcao-compra-conteudo {
    border: 1px solid #e8eaed !important;
    border-radius: 10px !important;
    padding: 11px 13px !important;
    background: #fff !important;
    box-shadow: 0 1px 3px rgba(15,23,42,0.04) !important;
    gap: 10px !important;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease !important;
  }

  /* Selecionado: destaque discreto, sem azul pesado */
  #pagina-compra.pagina.ativa .frete-opcao-compra input[type="radio"]:checked + .frete-opcao-compra-conteudo,
  #pagina-compra.pagina.ativa .frete-opcao-compra:has(input:checked) .frete-opcao-compra-conteudo {
    border-color: #b8d4f7 !important;
    background: #f4f8fe !important;
    box-shadow: none !important;
  }

  /* Indicador ::after (bolinha de radio) — suavizado */
  #pagina-compra.pagina.ativa .frete-opcao-compra-conteudo::after {
    border-color: #c8d0db !important;
    background: #fff !important;
    box-shadow: inset 0 1px 2px rgba(15,23,42,0.06) !important;
  }
  #pagina-compra.pagina.ativa .frete-opcao-compra input[type="radio"]:checked + .frete-opcao-compra-conteudo::after {
    border-color: #3483FA !important;
    background: #3483FA !important;
    box-shadow: inset 0 0 0 4px #fff !important;
  }

  /* Título */
  #pagina-compra.pagina.ativa .frete-opcao-compra-texto strong {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    line-height: 1.3 !important;
  }

  /* Subtítulo */
  #pagina-compra.pagina.ativa .frete-opcao-compra-texto p {
    font-size: 11px !important;
    font-weight: 400 !important;
    color: #6b7280 !important;
    -webkit-text-fill-color: #6b7280 !important;
    margin: 1px 0 0 !important;
    line-height: 1.35 !important;
  }

  /* Preço */
  #pagina-compra.pagina.ativa .frete-opcao-compra span {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #f97316 !important;
    -webkit-text-fill-color: #f97316 !important;
    white-space: nowrap !important;
    opacity: 1 !important;
  }

  /* ══ FORMA DE ENTREGA — card resumo após seleção ══════════════════════ */

  #pagina-compra.pagina.ativa .checkout-selected-summary {
    padding: 12px 14px !important;
    border-radius: 10px !important;
    border: 1px solid #e2e8f0 !important;
    background: #fff !important;
    box-shadow: 0 1px 5px rgba(15,23,42,0.06) !important;
    gap: 12px !important;
  }

  #pagina-compra.pagina.ativa .checkout-selected-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    line-height: 1.3 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  #pagina-compra.pagina.ativa .checkout-selected-subtitle {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #6b7280 !important;
    -webkit-text-fill-color: #6b7280 !important;
    margin-top: 3px !important;
    line-height: 1.35 !important;
  }

  #pagina-compra.pagina.ativa .checkout-selected-price {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #f97316 !important;
    -webkit-text-fill-color: #f97316 !important;
    white-space: nowrap !important;
  }

  /* ══ FORMA DE PAGAMENTO — opções de seleção ═══════════════════════════ */

  /* Lista: espaçamento compacto */
  #pagina-compra.pagina.ativa .pagamento-inline-opcoes {
    gap: 8px !important;
    padding: 10px 13px 14px !important;
  }

  /* Card base: compacto, borda suave, micro-sombra */
  #pagina-compra.pagina.ativa .pagamento-inline-opcao {
    border: 1px solid #e8eaed !important;
    border-radius: 10px !important;
    padding: 11px 13px !important;
    background: #fff !important;
    box-shadow: 0 1px 3px rgba(15,23,42,0.04) !important;
    gap: 10px !important;
    transition: border-color 0.15s ease, background 0.15s ease !important;
  }

  /* Selecionado: sutil e limpo */
  #pagina-compra.pagina.ativa .pagamento-inline-opcao:has(input:checked),
  #pagina-compra.pagina.ativa .pagamento-inline-opcao.selecionado,
  #pagina-compra.pagina.ativa .pagamento-inline-opcao.selected {
    border-color: #b8d4f7 !important;
    background: #f4f8fe !important;
    box-shadow: none !important;
  }

  /* Checkbox base: menor, borda fina, cantos suaves */
  #pagina-compra.pagina.ativa .pagamento-inline-opcao::before {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    border: 1.5px solid #c8d0db !important;
    border-radius: 5px !important;
    background: #fafafa !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    box-shadow: inset 0 1px 2px rgba(15,23,42,0.04) !important;
  }

  /* Checkbox selecionado: azul limpo, check centralizado */
  #pagina-compra.pagina.ativa .pagamento-inline-opcao:has(input:checked)::before,
  #pagina-compra.pagina.ativa .pagamento-inline-opcao.selecionado::before,
  #pagina-compra.pagina.ativa .pagamento-inline-opcao.selected::before {
    content: '✓' !important;
    background: #3483FA !important;
    border-color: #3483FA !important;
    color: #fff !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    box-shadow: none !important;
  }

  /* Título da opção: menos agressivo */
  #pagina-compra.pagina.ativa .pagamento-opcao-titulo,
  #pagina-compra.pagina.ativa .pagamento-inline-opcao-conteudo strong {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    gap: 6px !important;
    line-height: 1.3 !important;
  }

  /* Subtítulo da opção */
  #pagina-compra.pagina.ativa .pagamento-opcao-subtitulo,
  #pagina-compra.pagina.ativa .pagamento-inline-opcao-conteudo span:not(.pagamento-metodo-simbolo):not(.btn-adicionar-cartao):not(.btn-editar-cartao) {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #6b7280 !important;
    -webkit-text-fill-color: #6b7280 !important;
    margin-top: 1px !important;
  }

  /* "Nenhum cartão salvo" — muted */
  #pagina-compra.pagina.ativa .pagamento-opcao-vazio {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #94a3b8 !important;
    -webkit-text-fill-color: #94a3b8 !important;
    margin-top: 2px !important;
  }

  /* Header interno da opção: gap compacto */
  #pagina-compra.pagina.ativa .pagamento-opcao-header {
    margin-bottom: 2px !important;
    gap: 8px !important;
    align-items: center !important;
  }

  /* Título da seção "Forma de pagamento" (estado selecionando) */
  #pagina-compra.pagina.ativa .pagamento-inline-secao-titulo {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    padding: 10px 13px 2px !important;
    margin: 0 !important;
  }

  /* ══ BOTÕES ALTERAR + ADICIONAR — mesmo padrão visual ════════════════ */

  /* btn-adicionar-cartao e btn-editar-cartao: igual ao checkout-change-btn */
  #pagina-compra.pagina.ativa .btn-adicionar-cartao,
  #pagina-compra.pagina.ativa .btn-editar-cartao {
    border: 1px solid #dbeafe !important;
    background: #fff !important;
    color: #2563eb !important;
    -webkit-text-fill-color: #2563eb !important;
    border-radius: 999px !important;
    padding: 4px 10px !important;
    height: auto !important;
    min-height: unset !important;
    line-height: 1.4 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    transition: background 0.12s ease !important;
    touch-action: manipulation !important;
  }
  #pagina-compra.pagina.ativa .btn-adicionar-cartao:hover,
  #pagina-compra.pagina.ativa .btn-editar-cartao:hover {
    background: #eff6ff !important;
  }
  #pagina-compra.pagina.ativa .btn-adicionar-cartao:active,
  #pagina-compra.pagina.ativa .btn-editar-cartao:active {
    transform: scale(0.96) !important;
    filter: none !important;
    opacity: 1 !important;
  }

  /* Botão "Adicionar" do estado vazio: azul sólido (ação primária) */
  #pagina-compra.pagina.ativa #btn-pagamento-adicionar {
    background: #3483FA !important;
    background-image: none !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border: none !important;
    border-radius: 999px !important;
    height: 28px !important;
    min-height: 28px !important;
    line-height: 1 !important;
    padding: 0 14px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 6px rgba(52,131,250,0.22) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
  }
  #pagina-compra.pagina.ativa #btn-pagamento-adicionar:active {
    transform: scale(0.96) !important;
    filter: brightness(0.90) !important;
    opacity: 1 !important;
  }

}

/* ══════════════════════════════════════════════════════════════════════════
   CHECKOUT MOBILE — Badge, botões Alterar e fonte
   CSS only. Nenhuma lógica ou comportamento alterado.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Fonte Roboto (idêntica aos cards da home) — tela Finalizar compra ── */
#pagina-compra,
#pagina-compra input,
#pagina-compra button,
#pagina-compra select,
#pagina-compra textarea,
#pagina-compra label,
#pagina-compra * {
  font-family: Roboto, Arial, Helvetica, sans-serif !important;
}

/* ── 1b. Pesos tipográficos profissionais ───────────────────────────────── */

/* Títulos de seção (h2, h3): negrito limpo */
#pagina-compra h2,
#pagina-compra h3,
#pagina-compra .pagamento-inline-label,
#pagina-compra .frete-topo-compra h3,
#pagina-compra .pagamento-resumo-topo h3,
#pagina-compra .pagamento-inline-secao-titulo {
  font-weight: 700 !important;
}

/* Nomes de produto e títulos selecionados */
#pagina-compra .compra-item-nome,
#pagina-compra .checkout-selected-title,
#pagina-compra .pagamento-opcao-titulo {
  font-weight: 600 !important;
}

/* Labels do resumo final (Subtotal, Frete, Total) */
#pagina-compra .compra-resumo-linha span:first-child,
#pagina-compra .compra-resumo-label,
#pagina-compra .compra-resumo-linha-total span:first-child {
  font-weight: 500 !important;
}

/* Valores normais (subtotal, frete) */
#pagina-compra .compra-resumo-linha span:last-child,
#pagina-compra .compra-resumo-valor {
  font-weight: 600 !important;
}

/* Total final: destaque máximo */
#pagina-compra .compra-resumo-linha-total span:last-child,
#pagina-compra .compra-resumo-total,
#pagina-compra .compra-total-valor {
  font-weight: 800 !important;
}

/* Subtítulos e detalhes secundários */
#pagina-compra .pagamento-inline-sub,
#pagina-compra .checkout-selected-subtitle,
#pagina-compra .compra-item-variante,
#pagina-compra .compra-item-detalhe,
#pagina-compra .frete-opcao-compra p {
  font-weight: 400 !important;
}

/* Botão Finalizar compra */
#pagina-compra #btn-finalizar-compra,
#pagina-compra .btn-finalizar-compra {
  font-weight: 700 !important;
}

/* Botões Alterar e Adicionar */
#pagina-compra .checkout-change-btn,
#pagina-compra #btn-pagamento-adicionar,
#pagina-compra .pagamento-inline-pill-btn {
  font-weight: 700 !important;
}

@media (max-width: 767px) {

  /* ── 2. Badge "X itens" — discreto e integrado ──────────────────────── */
  #pagina-compra.pagina.ativa #compra-resumo-contagem {
    background: #f1f5f9 !important;
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    padding: 2px 8px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
  }

  /* ── 3. Botões "Alterar" — menores, mais discretos ──────────────────── */

  /* Frete e Pagamento (.checkout-change-btn) */
  #pagina-compra.pagina.ativa .checkout-change-btn {
    padding: 3px 9px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    border: 1px solid #e2e8f0 !important;
    background: #fff !important;
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
    border-radius: 6px !important;
    height: auto !important;
    box-shadow: none !important;
  }
  #pagina-compra.pagina.ativa .checkout-change-btn:hover {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
  }
  #pagina-compra.pagina.ativa .checkout-change-btn:active {
    transform: scale(0.96) !important;
    opacity: 1 !important;
  }

  /* Endereço (::after pseudo-element) — será redefinido abaixo */
  #pagina-compra.pagina.ativa .endereco-topo::after {
    content: "Alterar" !important;
    padding: 3px 9px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    border: 1px solid #e2e8f0 !important;
    background: #fff !important;
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
    border-radius: 6px !important;
    height: auto !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
  }

}

/* ══════════════════════════════════════════════════════════════════════════
   CHECKOUT MOBILE — Botões "Alterar" v4 — padrão premium
   Aplica o mesmo visual em Endereço, Entrega e Pagamento.
   CSS only. Zero lógica alterada.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* Frete e Pagamento (.checkout-change-btn) */
  #pagina-compra.pagina.ativa .checkout-change-btn {
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    border: 1px solid #D9E7FF !important;
    background: #FFFFFF !important;
    color: #2563EB !important;
    -webkit-text-fill-color: #2563EB !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    box-shadow: none !important;
    background-image: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease !important;
  }
  #pagina-compra.pagina.ativa .checkout-change-btn:hover {
    background: #F5F9FF !important;
    border-color: #C9DCFF !important;
    color: #1D4ED8 !important;
    -webkit-text-fill-color: #1D4ED8 !important;
  }
  #pagina-compra.pagina.ativa .checkout-change-btn:active {
    transform: scale(0.96) !important;
    opacity: 1 !important;
    background: #EFF6FF !important;
  }

  /* Endereço — ::after com mesmo padrão visual */
  #pagina-compra.pagina.ativa .endereco-topo::after {
    content: "Alterar" !important;
    height: 28px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    border: 1px solid #D9E7FF !important;
    background: #FFFFFF !important;
    color: #2563EB !important;
    -webkit-text-fill-color: #2563EB !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 28px !important;
    box-shadow: none !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
  }

}

/* ══════════════════════════════════════════════════════════════════════════
   SELECIONAR ENDEREÇO — Refinamento visual premium
   Card selecionado, badges, Editar, status e botão Adicionar.
   CSS only. Zero lógica alterada.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── Card base: branco, borda suave, micro-sombra ──────────────────── */
  #pagina-endereco .item-endereco-salvo {
    border: 1px solid #e8eaed !important;
    background: #fff !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(15,23,42,0.04) !important;
    padding: 13px 14px !important;
    transition: border-color 0.15s ease !important;
  }

  /* ── Card selecionado: azul suave, sem roxo, sem glow ──────────────── */
  #pagina-endereco .item-endereco-salvo.ativo,
  #pagina-compra .item-endereco-salvo.ativo {
    background: #f5f9ff !important;
    border-color: #b8d4f7 !important;
    box-shadow: none !important;
  }

  /* ── Nome em destaque limpo ─────────────────────────────────────────── */
  #pagina-endereco .item-endereco-topo strong {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    line-height: 1.3 !important;
  }

  /* ── Badge "CASA"/"TRABALHO" — discreto e elegante ─────────────────── */
  #pagina-endereco .tag-endereco-salvo {
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    color: #475569 !important;
    -webkit-text-fill-color: #475569 !important;
    border-radius: 6px !important;
    padding: 2px 7px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    box-shadow: none !important;
  }

  /* ── Botão "Editar" — mesmo padrão dos botões Alterar ──────────────── */
  #pagina-endereco .btn-editar-endereco {
    height: 26px !important;
    min-height: 26px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    border: 1px solid #D9E7FF !important;
    background: #FFFFFF !important;
    color: #2563EB !important;
    -webkit-text-fill-color: #2563EB !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    transition: background 0.12s ease !important;
  }
  #pagina-endereco .btn-editar-endereco:hover {
    background: #F5F9FF !important;
    border-color: #C9DCFF !important;
  }
  #pagina-endereco .btn-editar-endereco:active {
    transform: scale(0.96) !important;
    filter: none !important;
    opacity: 1 !important;
  }

  /* ── Parágrafos de texto (whatsapp, endereço) ───────────────────────── */
  #pagina-endereco .item-endereco-salvo p {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #6b7280 !important;
    -webkit-text-fill-color: #6b7280 !important;
    margin: 2px 0 !important;
    line-height: 1.4 !important;
    opacity: 1 !important;
  }

  /* ── Status "Clique para usar" — muted, pequeno ─────────────────────── */
  #pagina-endereco .item-endereco-status {
    font-size: 11px !important;
    font-weight: 400 !important;
    color: #94a3b8 !important;
    -webkit-text-fill-color: #94a3b8 !important;
    margin-top: 6px !important;
    opacity: 1 !important;
  }

  /* ── Status quando selecionado: azul discreto ───────────────────────── */
  #pagina-endereco .item-endereco-salvo.ativo .item-endereco-status {
    color: #2563eb !important;
    -webkit-text-fill-color: #2563eb !important;
    font-weight: 600 !important;
    font-size: 11px !important;
  }

  /* ── Botão "Adicionar novo endereço" — azul sólido profissional ────── */
  .btn-adicionar-mobile {
    background: #2563EB !important;
    background-image: none !important;
    height: 48px !important;
    min-height: 48px !important;
    border-radius: 12px !important;
    border: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 10px rgba(37,99,235,0.22) !important;
    gap: 8px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background 0.15s ease !important;
  }
  .btn-adicionar-mobile:hover {
    background: #1D4ED8 !important;
  }
  .btn-adicionar-mobile:active {
    transform: scale(0.98) !important;
    filter: brightness(0.90) !important;
    opacity: 1 !important;
  }
  .btn-adicionar-mobile svg {
    stroke: #ffffff !important;
    color: #ffffff !important;
    flex-shrink: 0 !important;
  }

}

/* ── Preço "Grátis" — verde profissional (Retirada na Loja) ─────────────── */
/* Cobre: lista de opções, card resumo selecionado, fallback global */
#pagina-compra.pagina.ativa .frete-opcao-compra span.frete-preco-gratis,
#pagina-compra.pagina.ativa .checkout-selected-price.frete-preco-gratis,
.frete-preco-gratis {
  color: #16A34A !important;
  -webkit-text-fill-color: #16A34A !important;
  font-weight: 700 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   TELA "DEFINIR LOCALIZAÇÃO" — Refinamento visual
   Apenas aparência: botão X limpo, card compacto, tipografia equilibrada,
   botão confirmar mais sutil. Zero lógica alterada.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Botão X — sem círculo, sem fundo, sem borda, traço fino ──────────── */
#pagina-localizacao .btn-fechar-localizacao {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(255, 255, 255, 0.70) !important;
  font-size: 26px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: color 0.15s ease !important;
}

#pagina-localizacao .btn-fechar-localizacao:hover {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, 0.95) !important;
  transform: none !important;
}

#pagina-localizacao .btn-fechar-localizacao:active {
  background: transparent !important;
  opacity: 0.75 !important;
  transform: none !important;
}

/* Mesmo estilo no breakpoint mobile */
@media (max-width: 767px) {
  #pagina-localizacao .btn-fechar-localizacao {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
  }
}

/* ── Card lat/lng/endereço — mais compacto e leve ─────────────────────── */
#pagina-localizacao .resumo-localizacao {
  margin: 0 0 16px !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.03) !important;
}

#pagina-localizacao .resumo-localizacao p {
  margin: 4px 0 !important;
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  line-height: 1.4 !important;
}

#pagina-localizacao .resumo-localizacao strong {
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.80) !important;
}

/* ── Botão "Minha localização" — peso mais equilibrado ───────────────── */
#pagina-localizacao .btn-geo-atual {
  font-weight: 600 !important;
  font-size: 13px !important;
  border-radius: 10px !important;
  min-height: 38px !important;
  padding: 0 12px !important;
  gap: 7px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(14, 14, 22, 0.88) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22) !important;
}

/* ── Botão "Confirmar localização" — gradiente mais suave ───────────── */
#pagina-localizacao .btn-confirmar-localizacao {
  background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%) !important;
  background-image: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%) !important;
  box-shadow: 0 4px 18px rgba(37, 99, 235, 0.30) !important;
  min-height: 52px !important;
  height: auto !important;
  padding: 14px 22px !important;
  border-radius: 14px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  border: none !important;
}

#pagina-localizacao .btn-confirmar-localizacao:hover {
  box-shadow: 0 6px 22px rgba(37, 99, 235, 0.42) !important;
  background: linear-gradient(135deg, #1D4ED8 0%, #1e40af 100%) !important;
  background-image: linear-gradient(135deg, #1D4ED8 0%, #1e40af 100%) !important;
}

/* ── Texto descritivo — mais discreto ───────────────────────────────── */
#pagina-localizacao .texto-localizacao {
  font-size: 14px !important;
  color: rgba(255, 255, 255, 0.50) !important;
  margin: 0 0 12px !important;
  line-height: 1.45 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   TELA "PAGAMENTO VIA PIX" — Tela cheia profissional
   Tela ocupa 100vw × 100dvh, sem modal/card, sem fundo cinza.
   Blocos separados por 1px (gap-as-divider). Zero lógica alterada.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* ── Seção raiz: fundo branco, sem overlay escuro, sem padding externo ── */
  #pagina-pix.pagina-pix {
    background: #F4F7FB !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  /* ── Container principal: fullscreen, sem moldura ────────────────────── */
  #pagina-pix .pagina-pix-conteudo {
    width: 100% !important;
    max-width: none !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: #F4F7FB !important;
    gap: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* ── Header sticky: título centralizado, X absoluto à direita ────────── */
  #pagina-pix .topo-pix {
    position: sticky !important;
    top: 0 !important;
    z-index: 30 !important;
    background: #FFFFFF !important;
    border-bottom: 1px solid #E5E7EB !important;
    border-radius: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 16px !important;
    min-height: 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }

  #pagina-pix .topo-pix h2 {
    color: #0F172A !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    -webkit-text-fill-color: #0F172A !important;
    text-align: center !important;
    margin: 0 !important;
    flex: 1 !important;
    line-height: 1.2 !important;
  }

  /* ── Botão X — posição absoluta preservada, sem círculo, sem fundo ────  */
  #pagina-pix .btn-fechar-pix,
  [data-theme="light"] #pagina-pix .btn-fechar-pix {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    font-size: 26px !important;
    font-weight: 300 !important;
    color: #64748B !important;
    -webkit-text-fill-color: #64748B !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: color 0.15s ease !important;
  }

  #pagina-pix .btn-fechar-pix:hover {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #0F172A !important;
    -webkit-text-fill-color: #0F172A !important;
    transform: translateY(-50%) !important;
  }

  #pagina-pix .btn-fechar-pix:active {
    background: transparent !important;
    opacity: 0.65 !important;
    transform: translateY(-50%) !important;
  }

  /* ── Container das seções: gap-as-divider ────────────────────────────  */
  /* background #E5E7EB + gap: 1px → o fundo vaza 1px como linha divisória */
  #pagina-pix #pix-status-pendente {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
    background: #E5E7EB !important;
    border-radius: 0 !important;
    overflow: visible !important;
    border: none !important;
    padding-bottom: env(safe-area-inset-bottom, 16px) !important;
    flex: 1 !important;
  }

  /* ── Seções individuais: flat, sem sombra, sem raio ─────────────────── */
  #pagina-pix .pix-tempo-box,
  #pagina-pix .pix-qrcode-container,
  #pagina-pix .pix-codigo-box,
  #pagina-pix .pix-instrucoes,
  #pagina-pix .pix-acoes,
  #pagina-pix .pix-status-aprovado {
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ── Bloco timer ────────────────────────────────────────────────────── */
  #pagina-pix .pix-tempo-box {
    background: #FFFFFF !important;
    padding: 14px 14px 12px !important;
    text-align: center !important;
  }

  #pagina-pix .pix-tempo-box h3 {
    color: #64748B !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    margin: 0 0 4px !important;
  }

  #pagina-pix .pix-contador {
    color: #7C3AED !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    margin: 0 0 2px !important;
    line-height: 1.1 !important;
  }

  #pagina-pix .pix-vencimento {
    color: #94A3B8 !important;
    font-size: 11px !important;
  }

  /* ── Bloco QR Code ──────────────────────────────────────────────────── */
  #pagina-pix .pix-qrcode-container {
    background: #FFFFFF !important;
    padding: 14px !important;
    gap: 8px !important;
  }

  #pagina-pix .pix-qrcode-topo strong {
    color: #0F172A !important;
    font-size: 13px !important;
    font-weight: 600 !important;
  }

  #pagina-pix .pix-qrcode-topo span {
    color: #16A34A !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
  }

  #pagina-pix .pix-qrcode-imagem img {
    border-radius: 6px !important;
    box-shadow: none !important;
  }

  #pagina-pix .pix-qrcode-container > p {
    color: #94A3B8 !important;
    font-size: 11px !important;
  }

  /* ── Bloco código + ambiente seguro ─────────────────────────────────── */
  #pagina-pix .pix-codigo-box {
    background: #FFFFFF !important;
    padding: 14px !important;
    gap: 10px !important;
  }

  #pagina-pix .pix-seguro-badge {
    background: rgba(20, 184, 166, 0.05) !important;
    border: 1px solid rgba(20, 184, 166, 0.16) !important;
    border-radius: 8px !important;
    padding: 7px 10px !important;
    gap: 7px !important;
  }

  #pagina-pix .pix-seguro-badge strong {
    color: #0F172A !important;
    font-size: 12px !important;
    font-weight: 600 !important;
  }

  #pagina-pix .pix-seguro-badge small {
    color: #64748B !important;
    font-size: 10px !important;
    line-height: 1.4 !important;
  }

  #pagina-pix .pix-seguro-selo {
    background: rgba(20, 184, 166, 0.10) !important;
    color: #0D9488 !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    border-radius: 4px !important;
    padding: 2px 5px !important;
  }

  #pagina-pix .pix-codigo-box label {
    color: #64748B !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
  }

  #pagina-pix #codigo-pix-texto {
    background: #F8FAFC !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 8px !important;
    color: #334155 !important;
    font-size: 11px !important;
    font-family: 'Courier New', Courier, monospace !important;
    padding: 10px 12px !important;
    min-height: 60px !important;
    max-height: 76px !important;
    line-height: 1.5 !important;
  }

  /* ── Botão "Copiar código Pix" — azul sólido premium ────────────────── */
  #pagina-pix .btn-copiar-pix {
    background: #2563EB !important;
    background-image: none !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    border: none !important;
    border-radius: 12px !important;
    min-height: 48px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.18) !important;
    letter-spacing: 0.01em !important;
    transition: background 0.15s ease, box-shadow 0.15s ease !important;
  }

  #pagina-pix .btn-copiar-pix:hover {
    background: #1D4ED8 !important;
    background-image: none !important;
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.26) !important;
    opacity: 1 !important;
  }

  #pagina-pix .btn-copiar-pix:active {
    background: #1e40af !important;
    background-image: none !important;
    opacity: 1 !important;
    transform: scale(0.98) !important;
  }

  /* ── Bloco "Como pagar" ──────────────────────────────────────────────── */
  /* Especificidade elevada para vencer [data-theme="light"] #pagina-pix .pix-instrucoes (especif. 120).
     padding-bottom estendido para cobrir a safe-area que era do pix-status-pendente.       */
  [data-theme="light"] #pagina-pix .pix-instrucoes,
  #pagina-pix #pix-status-pendente .pix-instrucoes {
    background: #FFFFFF !important;
    padding: 16px 14px calc(20px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Remove o padding-bottom cinza do container — o branco do pix-instrucoes cobre o fundo */
  #pagina-pix #pix-status-pendente {
    padding-bottom: 0 !important;
  }

  #pagina-pix .pix-instrucoes h3 {
    color: #0F172A !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    margin: 0 0 8px !important;
  }

  #pagina-pix .pix-instrucoes li {
    color: #64748B !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin-bottom: 4px !important;
  }

  /* ── Link "Ir para minhas compras" — dentro do bloco de instruções ────  */
  #pagina-pix .pix-acoes {
    background: transparent !important;
    padding: 0 !important;
    margin-top: 14px !important;
    border-top: 1px solid #F1F5F9 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
  }

  #pagina-pix .btn-ok-pix {
    background: rgba(22, 163, 74, 0.07) !important;
    border: 1px solid rgba(22, 163, 74, 0.22) !important;
    color: #16A34A !important;
    -webkit-text-fill-color: #16A34A !important;
    border-radius: 12px !important;
    min-height: 48px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
  }

  #pagina-pix .btn-ok-pix:active {
    background: rgba(22, 163, 74, 0.12) !important;
  }

  /* ── Link "Ir para minhas compras" ─────────────────────────────────────  */
  #pagina-pix .pix-link-pedidos {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    padding: 10px 0 !important;
    color: #2563EB !important;
    -webkit-text-fill-color: #2563EB !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
  }
  #pagina-pix .pix-link-pedidos:active {
    opacity: 0.7 !important;
  }

  /* ── Light mode — garantia de transparência no X ─────────────────────  */
  [data-theme="light"] #pagina-pix .btn-fechar-pix {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    color: #64748B !important;
    -webkit-text-fill-color: #64748B !important;
  }

  /* ── Logo Pix: cápsula branca discreta no cabeçalho do QR Code ─────── */
  #pagina-pix .pix-logo-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 3px 9px !important;
    background: #FFFFFF !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    flex-shrink: 0 !important;
  }

  #pagina-pix .pix-logo-badge {
    width: 42px !important;
    height: 16px !important;
    object-fit: contain !important;
    display: block !important;
    background: transparent !important;
    flex-shrink: 0 !important;
  }

  /* ── Card "Ambiente seguro": neutro, sem teal exagerado ─────────────── */
  #pagina-pix .pix-seguro-badge {
    background: #F8FAFC !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    gap: 10px !important;
    display: flex !important;
    align-items: center !important;
  }

  #pagina-pix .mp-developers-logo {
    width: 48px !important;
    height: 30px !important;
    min-width: 48px !important;
    object-fit: contain !important;
    display: block !important;
    flex-shrink: 0 !important;
    border-radius: 4px !important;
  }

  #pagina-pix .pix-seguro-badge strong {
    color: #0F172A !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    display: block !important;
    margin-bottom: 1px !important;
  }

  #pagina-pix .pix-seguro-badge small {
    color: #64748B !important;
    font-size: 10px !important;
    line-height: 1.4 !important;
    display: block !important;
  }

  /* ── Campo "Código Pix": refinado, scrollbar discreta ───────────────── */
  #pagina-pix #codigo-pix-texto {
    background: #F8FAFC !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 10px !important;
    color: #334155 !important;
    font-size: 11px !important;
    font-family: 'Courier New', Courier, monospace !important;
    padding: 11px 13px !important;
    min-height: 64px !important;
    max-height: 80px !important;
    line-height: 1.55 !important;
    word-break: break-all !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    resize: none !important;
    scrollbar-width: thin !important;
    scrollbar-color: #CBD5E1 transparent !important;
  }

  #pagina-pix #codigo-pix-texto::-webkit-scrollbar {
    width: 4px !important;
  }
  #pagina-pix #codigo-pix-texto::-webkit-scrollbar-track {
    background: transparent !important;
  }
  #pagina-pix #codigo-pix-texto::-webkit-scrollbar-thumb {
    background: #CBD5E1 !important;
    border-radius: 2px !important;
  }

  /* ── Seção "Como pagar": espaçamento e leitura melhorados ───────────── */
  #pagina-pix .pix-instrucoes {
    padding: 16px 14px !important;
  }

  #pagina-pix .pix-instrucoes h3 {
    color: #0F172A !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    margin: 0 0 10px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid #F1F5F9 !important;
  }

  #pagina-pix .pix-instrucoes ol {
    padding-left: 20px !important;
    margin: 0 !important;
    list-style-type: decimal !important;
  }

  #pagina-pix .pix-instrucoes li {
    color: #475569 !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    margin-bottom: 6px !important;
    padding-left: 2px !important;
  }

  #pagina-pix .pix-instrucoes li:last-child {
    margin-bottom: 0 !important;
  }

  /* ── Botão "Já paguei": verde limpo e profissional ──────────────────── */
  #pagina-pix .btn-ok-pix {
    background: #F0FDF4 !important;
    border: 1px solid #BBF7D0 !important;
    color: #16A34A !important;
    -webkit-text-fill-color: #16A34A !important;
    border-radius: 12px !important;
    min-height: 48px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    letter-spacing: 0.01em !important;
    transition: background 0.15s ease !important;
  }

  #pagina-pix .btn-ok-pix:hover {
    background: #DCFCE7 !important;
    border-color: #86EFAC !important;
  }

  #pagina-pix .btn-ok-pix:active {
    background: #DCFCE7 !important;
    opacity: 1 !important;
    transform: scale(0.98) !important;
  }

  /* ════════════════════════════════════════════════════════════════════
     PIX MOBILE — FUNDO BRANCO TOTAL
     Estes seletores estão no fim do bloco e têm especificidade máxima
     para vencer TODAS as regras cinza anteriores (incluindo as com
     [data-theme="light"] que têm especificidade 120).
     Não altera Mercado Pago, QR Code, código Pix, webhook, timer.
     ════════════════════════════════════════════════════════════════════ */

  /* Camada 1: a própria #pagina-pix — branco sólido */
  #pagina-pix.pagina-pix {
    background: #FFFFFF !important;
  }

  /* Camada 2: container interno — branco */
  #pagina-pix .pagina-pix-conteudo {
    background: #FFFFFF !important;
  }

  /* Camada 3: #pix-status-pendente — branco, sem gap cinza, sem padding cinza */
  #pagina-pix #pix-status-pendente {
    background: #FFFFFF !important;
    gap: 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }

  /* Separadores finos entre seções (substitui o gap cinza que foi removido) */
  #pagina-pix #pix-status-pendente .pix-qrcode-container,
  #pagina-pix #pix-status-pendente .pix-codigo-box,
  #pagina-pix #pix-status-pendente .pix-instrucoes {
    border-top: 1px solid #F1F5F9 !important;
  }

  /* Bloco "Como pagar" — branco garantido.
     Especificidade 210 vence o [data-theme="light"] #pagina-pix .pix-instrucoes (120). */
  #pagina-pix #pix-status-pendente .pix-instrucoes {
    background: #FFFFFF !important;
    padding: 18px 20px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    margin: 0 !important;
  }

  /* Div .pix-acoes dentro de .pix-instrucoes — flex centralizado, sem fundo */
  #pagina-pix #pix-status-pendente .pix-instrucoes .pix-acoes {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin-top: 16px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-top: 1px solid #F1F5F9 !important;
    box-shadow: none !important;
  }

  /* Link "Ir para minhas compras" — azul profissional, centralizado */
  #pagina-pix .pix-link-pedidos {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #2563EB !important;
    -webkit-text-fill-color: #2563EB !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    padding: 10px 12px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
    letter-spacing: 0.01em !important;
  }

  #pagina-pix .pix-link-pedidos:active {
    opacity: 0.75 !important;
  }

}

/* ════════════════════════════════════════════════════════════════════════════
   PIX MOBILE — AJUSTES FINAIS: separador, padding lateral, link centralizado
   Bloco separado para máxima precedência de cascade.
   Não altera QR Code, código Pix, botão copiar, Mercado Pago, webhook, timer.
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* 1. Bloco "Como pagar": padding lateral generoso + separador de 1px */
  #pagina-pix #pix-status-pendente .pix-instrucoes {
    padding: 20px 20px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    border-top: 1px solid #E5E7EB !important;
  }

  /* 2. Lista ol: recuo correto dentro do padding lateral */
  #pagina-pix #pix-status-pendente .pix-instrucoes ol {
    padding-left: 20px !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 3. Container do link: flex centralizado, SEM border-top próprio */
  #pagina-pix #pix-status-pendente .pix-instrucoes .pix-acoes {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin-top: 16px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* 4. O link em si: auto-width para que o justify-content do pai o centralize */
  #pagina-pix .pix-link-pedidos {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    width: auto !important;
    color: #2563EB !important;
    -webkit-text-fill-color: #2563EB !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    padding: 10px 12px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
  }

}

/* ══════════════════════════════════════════════════════════════════════════
   TELA PIX — ISOLAMENTO TOTAL DO SCROLL + LOGO PILL BRANCA
   body.pix-open: adicionada em JS ao abrir Pix, removida ao fechar.
   ══════════════════════════════════════════════════════════════════════════ */

/* 1. Logo Pix — fundo branco: sobrepõe .pix-qrcode-topo span {background:#e8fbf7}
      Fora de media query para precedência máxima em qualquer viewport */
#pagina-pix .pix-qrcode-topo > span,
#pagina-pix .pix-qrcode-topo span.pix-logo-pill,
#pagina-pix .pix-logo-pill {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
}

/* 2. Desktop: garantir que body.pix-open NÃO afete layout do desktop */
@media (min-width: 768px) {
  body.pix-open {
    overflow: auto !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
  }
}

/* 3. SOMENTE MOBILE: bloquear scroll do body quando Pix estiver aberto
      position: fixed + overflow: hidden é o único método confiável em iOS Safari */
@media (max-width: 767px) {

  body.pix-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100dvh !important;
  }

  /* 4. Overscroll containment — impede rubber-band de revelar conteúdo abaixo */
  #pagina-pix.pagina-pix {
    overscroll-behavior: contain !important;
    overscroll-behavior-y: contain !important;
  }

  /* 5. Fallback: ocultar botão Finalizar compra se Pix estiver aberto */
  body.pix-open .btn-finalizar-compra,
  body.pix-open #pagina-compra .btn-finalizar-compra {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

}

/* 6. Desktop: página produto e estado geral sem interferência de classes mobile */
@media (min-width: 768px) {
  #pagina-pedido {
    filter: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  body.pix-open #pagina-pedido,
  body.pix-open .pagina {
    filter: none !important;
    opacity: 1 !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   DESKTOP — RESTAURAÇÃO DO TEMA ESCURO NA PÁGINA DO PRODUTO
   Garante que nenhum vazamento de CSS mobile/checkout torne o desktop claro.
   Aplica SOMENTE em ≥768px. Não afeta mobile.
   Alta especificidade: usa html body + #pagina-pedido para vencer qualquer
   regra global anterior (incluindo NEXA BLUE e checkout styles).
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {

  /* ── Base: html, body e container da página ─────────────────────────── */
  html,
  html body {
    background: #05070d !important;
    color: #f0f0f5 !important;
  }

  html body #pagina-pedido,
  html body #pagina-pedido.pagina,
  html body #pagina-pedido.pagina.ativa {
    background: #05070d !important;
    background-color: #05070d !important;
    color: #f0f0f5 !important;
  }

  /* ── Containers internos: transparente para herdar fundo escuro ──────── */
  html body #pagina-pedido .pd-page-inner,
  html body #pagina-pedido .pd-main-grid,
  html body #pagina-pedido .pd-col-galeria,
  html body #pagina-pedido .pd-col-info,
  html body #pagina-pedido .pd-col-lateral,
  html body #pagina-pedido .pd-galeria-wrapper,
  html body #pagina-pedido .pd-badges-flutuantes,
  html body #pagina-pedido .pd-acoes,
  html body #pagina-pedido .pd-preco-bloco,
  html body #pagina-pedido .pd-beneficios,
  html body #pagina-pedido .pd-qty-row,
  html body #pagina-pedido .pd-tabs-section,
  html body #pagina-pedido .pd-tabs-nav,
  html body #pagina-pedido .pd-tab-corpo,
  html body #pagina-pedido .pd-tab-painel,
  html body #pagina-pedido .pd-perguntas-btn-wrap,
  html body #pagina-pedido .pd-detalhes-resumo-card,
  html body #pagina-pedido .pd-relacionados,
  html body #pagina-pedido .pd-relacionados-header,
  html body #pagina-pedido .pd-breadcrumb {
    background: transparent !important;
    background-color: transparent !important;
  }

  /* ── Galeria: caixa de imagem e miniaturas ───────────────────────────── */
  html body #pagina-pedido .pedido-imagem-box,
  html body #pagina-pedido .pd-imagem-box-redesign {
    background: #14141A !important;
    background-color: #14141A !important;
    border-color: #2D2D3A !important;
  }

  html body #pagina-pedido .pedido-miniatura,
  html body #pagina-pedido #pedido-miniaturas,
  html body #pagina-pedido .pd-miniaturas-vertical {
    background: #0D0D15 !important;
    background-color: #0D0D15 !important;
  }

  /* ── Cards e painéis ─────────────────────────────────────────────────── */
  html body #pagina-pedido .pd-card-lateral,
  html body #pagina-pedido .pd-card-compra {
    background: #14141A !important;
    background-color: #14141A !important;
    border-color: #2D2D3A !important;
    color: #f0f0f5 !important;
  }

  html body #pagina-pedido .pd-form-bloco {
    background: rgba(255, 255, 255, 0.03) !important;
    background-color: rgba(255, 255, 255, 0.03) !important;
    border-color: #2D2D3A !important;
    color: #f0f0f5 !important;
  }

  html body #pagina-pedido .pd-rev-resumo-box {
    background: rgba(255, 255, 255, 0.03) !important;
    background-color: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255,255,255,0.06) !important;
    color: #f0f0f5 !important;
  }

  html body #pagina-pedido .pd-rev-card {
    background: transparent !important;
    background-color: transparent !important;
    border-color: rgba(255,255,255,0.06) !important;
  }

  html body #pagina-pedido .pd-detalhes-sheet-painel {
    background: #14141A !important;
    background-color: #14141A !important;
    border-color: #2D2D3A !important;
    color: #f0f0f5 !important;
  }

  /* ── Controle de quantidade ──────────────────────────────────────────── */
  html body #pagina-pedido .pd-qty-control {
    background: #14141A !important;
    background-color: #14141A !important;
    border-color: #2D2D3A !important;
    color: #f0f0f5 !important;
  }

  html body #pagina-pedido .pd-qty-btn {
    background: transparent !important;
    background-color: transparent !important;
    color: #f0f0f5 !important;
  }

  html body #pagina-pedido .pd-qty-valor {
    color: #f0f0f5 !important;
  }

  /* ── Botões de ação — NEXA BLUE overrides restaurados para escuro ─────── */
  /* .pd-btn-cart: mantém azul (correto para desktop e mobile) */
  html body #pagina-pedido .pd-btn-cart {
    background: linear-gradient(135deg, #3483FA 0%, #2968C8 100%) !important;
    color: #fff !important;
    border: none !important;
  }

  /* .pd-btn-buy: era forçado para #fff pelo NEXA BLUE globalmente — restaurar escuro */
  html body #pagina-pedido .pd-btn-buy {
    background: #14141A !important;
    background-color: #14141A !important;
    color: #f0f0f5 !important;
    border: 1px solid #2D2D3A !important;
  }

  html body #pagina-pedido .pd-btn-buy:hover {
    background: #1A1A26 !important;
    background-color: #1A1A26 !important;
    border-color: #3483FA !important;
    color: #3483FA !important;
  }

  /* ── Inputs e textareas dentro do produto ────────────────────────────── */
  html body #pagina-pedido .pd-form-bloco input,
  html body #pagina-pedido .pd-form-bloco textarea,
  html body #pagina-pedido .pd-cep-input,
  html body #pagina-pedido .pd-form-campo input,
  html body #pagina-pedido .pd-form-campo textarea {
    background: rgba(255, 255, 255, 0.05) !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: #2D2D3A !important;
    color: #f0f0f5 !important;
  }

  /* ── Tabs ────────────────────────────────────────────────────────────── */
  html body #pagina-pedido .pd-tab {
    background: transparent !important;
    color: rgba(226,226,240,0.55) !important;
  }

  html body #pagina-pedido .pd-tab.ativa,
  html body #pagina-pedido .pd-tab:hover {
    color: #E2E2F0 !important;
  }

  /* ── Produtos relacionados ───────────────────────────────────────────── */
  html body #pagina-pedido .pd-grade-relacionados .produto-card {
    background: #14141A !important;
    background-color: #14141A !important;
    border-color: #2D2D3A !important;
    color: #f0f0f5 !important;
  }

  /* ── Textos: cor legível sobre fundo escuro ──────────────────────────── */
  html body #pagina-pedido .pd-nome,
  html body #pagina-pedido .pd-preco-principal,
  html body #pagina-pedido .pd-card-titulo,
  html body #pagina-pedido h1,
  html body #pagina-pedido h2,
  html body #pagina-pedido h3,
  html body #pagina-pedido h4 {
    color: #f0f0f5 !important;
  }

  html body #pagina-pedido .pd-marca,
  html body #pagina-pedido .pd-descricao-curta,
  html body #pagina-pedido .pd-qty-label,
  html body #pagina-pedido .pd-parcelamento {
    color: rgba(226,226,240,0.55) !important;
  }

  /* ── Divisores ───────────────────────────────────────────────────────── */
  html body #pagina-pedido hr,
  html body #pagina-pedido .pd-divider {
    border-color: #2D2D3A !important;
  }

}

/* ══════════════════════════════════════════════════════════════════════════
   DESKTOP ≥ 768px — RESTAURAÇÃO TEMA ESCURO: CHECKOUT (pagina-compra)
   As regras NEXA BLUE (seção 4-7) aplicam fundo branco SEM media query,
   afetando desktop. Este bloco sobrescreve especificamente no desktop.
   Mobile (≤ 767px) não é alterado.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {

  /* ── Container principal do painel de compra ─────────────────────────── */
  #pagina-compra.pagina.ativa .compra-container {
    background: linear-gradient(180deg, #060b19, #0a1124 60%, #08101e) !important;
    color: #f0f0f5 !important;
  }

  /* ── Cards e seções internas do checkout ─────────────────────────────── */
  #pagina-compra.pagina.ativa .compra-card,
  #pagina-compra.pagina.ativa .compra-resumo-itens,
  #pagina-compra.pagina.ativa .compra-resumo-final,
  #pagina-compra.pagina.ativa .endereco-box,
  #pagina-compra.pagina.ativa .frete-box-compra,
  #pagina-compra.pagina.ativa .pagamento-inline-box {
    background:    rgba(255, 255, 255, 0.04) !important;
    border:        1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 20px !important;
    box-shadow:    none !important;
    color:         #f0f0f5 !important;
  }

  /* ── Divisores entre seções: borda escura (sobrescreve #E5E7EB) ──────── */
  #pagina-compra.pagina.ativa .compra-secoes-alinhadas > .compra-resumo-itens,
  #pagina-compra.pagina.ativa .compra-secoes-alinhadas > .endereco-box,
  #pagina-compra.pagina.ativa .compra-secoes-alinhadas > .frete-box-compra,
  #pagina-compra.pagina.ativa .compra-secoes-alinhadas > .pagamento-inline-box {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  /* ── Títulos das seções ──────────────────────────────────────────────── */
  #pagina-compra.pagina.ativa .compra-resumo-topo h3,
  #pagina-compra.pagina.ativa .compra-resumo-final h3,
  #pagina-compra.pagina.ativa .endereco-topo h3,
  #pagina-compra.pagina.ativa .frete-titulo,
  #pagina-compra.pagina.ativa .pagamento-inline-label {
    color:                   #f0f0f5 !important;
    -webkit-text-fill-color: #f0f0f5 !important;
  }

  /* ── Textos do produto no card ───────────────────────────────────────── */
  #pagina-compra.pagina.ativa .compra-detalhes h2,
  #pagina-compra.pagina.ativa #compra-nome {
    color:                   #f0f0f5 !important;
    -webkit-text-fill-color: #f0f0f5 !important;
  }
  #pagina-compra.pagina.ativa #compra-pagamento,
  #pagina-compra.pagina.ativa #compra-estoque,
  #pagina-compra.pagina.ativa .compra-total-linha span {
    color:                   rgba(226,226,240,0.65) !important;
    -webkit-text-fill-color: rgba(226,226,240,0.65) !important;
  }

  /* ── Endereço: textos legíveis no fundo escuro ───────────────────────── */
  #pagina-compra.pagina.ativa #mostrar-nome {
    color:                   #f0f0f5 !important;
    -webkit-text-fill-color: #f0f0f5 !important;
  }
  #pagina-compra.pagina.ativa #mostrar-whats,
  #pagina-compra.pagina.ativa #mostrar-endereco {
    color:                   rgba(226,226,240,0.80) !important;
    -webkit-text-fill-color: rgba(226,226,240,0.80) !important;
  }
  #pagina-compra.pagina.ativa #mostrar-localizacao {
    color:                   rgba(226,226,240,0.55) !important;
    -webkit-text-fill-color: rgba(226,226,240,0.55) !important;
  }

  /* ── Opções de frete ─────────────────────────────────────────────────── */
  #pagina-compra .frete-opcao-compra-conteudo,
  .frete-opcao-compra-conteudo {
    border:        1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 12px !important;
    background:    rgba(255, 255, 255, 0.04) !important;
    color:         #f0f0f5 !important;
  }
  #pagina-compra .frete-opcao-compra input[type="radio"]:checked + .frete-opcao-compra-conteudo,
  .frete-opcao-compra input[type="radio"]:checked + .frete-opcao-compra-conteudo,
  #pagina-compra .frete-opcao-compra.selecionado .frete-opcao-compra-conteudo,
  .frete-opcao-compra.selecionado .frete-opcao-compra-conteudo {
    border-color: #3483FA !important;
    background:   rgba(52,131,250,0.10) !important;
  }
  #pagina-compra .frete-opcao-compra-texto strong {
    color:                   #f0f0f5 !important;
    -webkit-text-fill-color: #f0f0f5 !important;
  }
  #pagina-compra .frete-opcao-compra-texto p,
  #pagina-compra .frete-opcao-compra-texto span:not(.frete-preco) {
    color:                   rgba(226,226,240,0.55) !important;
    -webkit-text-fill-color: rgba(226,226,240,0.55) !important;
  }

  /* ── Forma de pagamento desktop: container + opções escuros ──────────── */
  #pagina-compra.pagina.ativa .checkout-forma-pagamento-desktop {
    background:    rgba(255, 255, 255, 0.04) !important;
    border:        1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 20px !important;
    box-shadow:    none !important;
    color:         #f0f0f5 !important;
  }
  #pagina-compra.pagina.ativa .checkout-forma-pagamento-desktop h3 {
    color:                   #f0f0f5 !important;
    -webkit-text-fill-color: #f0f0f5 !important;
    font-size:               15px !important;
    font-weight:             700 !important;
  }

  #pagina-compra.pagina.ativa .pagamento-opcao-desktop {
    border:        1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 12px !important;
    background:    rgba(255, 255, 255, 0.04) !important;
    color:         #f0f0f5 !important;
    min-height:    80px !important;
  }
  #pagina-compra.pagina.ativa .pagamento-opcao-desktop:hover {
    border-color: #3483FA !important;
    background:   rgba(52,131,250,0.10) !important;
  }
  #pagina-compra.pagina.ativa .pagamento-opcao-desktop.selected,
  #pagina-compra.pagina.ativa .pagamento-opcao-desktop.selecionado,
  #pagina-compra.pagina.ativa .pagamento-opcao-desktop:has(input[type="radio"]:checked) {
    border-color: #3483FA !important;
    background:   rgba(52,131,250,0.10) !important;
    box-shadow:   0 0 0 2px rgba(52,131,250,0.15) !important;
  }
  #pagina-compra.pagina.ativa .pagamento-opcao-desktop strong {
    color:                   #f0f0f5 !important;
    -webkit-text-fill-color: #f0f0f5 !important;
    font-size:               15px !important;
    font-weight:             700 !important;
  }
  #pagina-compra.pagina.ativa .pagamento-opcao-desktop p,
  #pagina-compra.pagina.ativa .pagamento-opcao-desktop small {
    color:                   rgba(226,226,240,0.55) !important;
    -webkit-text-fill-color: rgba(226,226,240,0.55) !important;
  }

  /* ── Pagamento inline (quando usado no desktop) ───────────────────────── */
  #pagina-compra.pagina.ativa .pagamento-inline-opcao {
    border:        1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 12px !important;
    background:    rgba(255, 255, 255, 0.04) !important;
    color:         #f0f0f5 !important;
  }
  #pagina-compra.pagina.ativa .pagamento-inline-opcao.selecionado,
  #pagina-compra.pagina.ativa .pagamento-inline-opcao:has(input[type="radio"]:checked) {
    border-color: #3483FA !important;
    background:   rgba(52,131,250,0.10) !important;
  }

  /* ── Textos do pagamento ─────────────────────────────────────────────── */
  #pagina-compra.pagina.ativa .pagamento-opcao-titulo,
  #pagina-compra.pagina.ativa .pagamento-inline-opcao-conteudo strong {
    color:                   #f0f0f5 !important;
    -webkit-text-fill-color: #f0f0f5 !important;
  }
  #pagina-compra.pagina.ativa .pagamento-opcao-subtitulo,
  #pagina-compra.pagina.ativa .pagamento-opcao-detalhe,
  #pagina-compra.pagina.ativa .pagamento-opcao-vazio,
  #pagina-compra.pagina.ativa .pagamento-inline-card-detail,
  #pagina-compra.pagina.ativa .pagamento-inline-opcao-conteudo span:not(.pagamento-metodo-simbolo) {
    color:                   rgba(226,226,240,0.55) !important;
    -webkit-text-fill-color: rgba(226,226,240,0.55) !important;
  }

}
/* ══ fim DESKTOP DARK CHECKOUT ══════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   DESKTOP ≥ 768px — LAYOUT CHECKOUT:
   · Remove card duplicado (.compra-card)
   · Ampliar e destacar "Produtos selecionados" como card principal
   · Botão X limpo no topo-direito do painel
   Não afeta mobile (max-width: 767px).
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {

  /* ── 1. Ocultar card duplicado no topo ───────────────────────────────── */
  #pagina-compra.pagina.ativa .compra-card,
  #pagina-compra.pagina.ativa #compra-card-preview {
    display: none !important;
  }

  /* ── 2. Botão X — fixo no topo-direito do painel (> 900px) ──────────── */
  #pagina-compra.pagina.ativa .compra-header-mobile {
    position: fixed !important;
    top:       0 !important;
    right:     0 !important;
    width:     50% !important;
    height:    60px !important;
    display:   flex !important;
    align-items:     center !important;
    justify-content: flex-end !important;
    padding:   0 24px !important;
    margin:    0 !important;
    pointer-events: none !important;
    background: transparent !important;
    border:     none !important;
    box-shadow: none !important;
    z-index:    10001 !important;
  }

  #pagina-compra.pagina.ativa .compra-header-titulo {
    display: none !important;
  }

  #pagina-compra.pagina.ativa .btn-fechar-compra {
    position:    relative !important;
    inset:       auto !important;
    width:       44px !important;
    height:      44px !important;
    min-width:   44px !important;
    min-height:  44px !important;
    pointer-events: auto !important;
    background:      transparent !important;
    border:          none !important;
    border-radius:   0 !important;
    box-shadow:      none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color:                   rgba(255,255,255,0.60) !important;
    -webkit-text-fill-color: rgba(255,255,255,0.60) !important;
    font-size:   28px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    display:      flex !important;
    align-items:  center !important;
    justify-content: center !important;
    cursor:    pointer !important;
    padding:   0 !important;
    margin:    0 !important;
    transition: color 0.18s ease !important;
  }

  #pagina-compra.pagina.ativa .btn-fechar-compra:hover,
  #pagina-compra.pagina.ativa .btn-fechar-compra:focus-visible {
    color:                   rgba(255,255,255,0.95) !important;
    -webkit-text-fill-color: rgba(255,255,255,0.95) !important;
    background:  transparent !important;
    box-shadow:  none !important;
    border:      none !important;
    transform:   none !important;
    outline:     none !important;
  }

  /* ── 3. Container: padding-top para deixar espaço ao botão X ─────────── */
  #pagina-compra.pagina.ativa .compra-container {
    padding-top: 72px !important;
  }

  /* ── 4. Seções: gap entre elas no desktop ────────────────────────────── */
  #pagina-compra.pagina.ativa .compra-secoes-alinhadas {
    gap:       16px !important;
    margin-top: 0 !important;
  }

  /* Cada seção: borda completa + radius (sobrescreve border-bottom global) */
  #pagina-compra.pagina.ativa .compra-secoes-alinhadas > .compra-resumo-itens,
  #pagina-compra.pagina.ativa .compra-secoes-alinhadas > .endereco-box,
  #pagina-compra.pagina.ativa .compra-secoes-alinhadas > .frete-box-compra,
  #pagina-compra.pagina.ativa .compra-secoes-alinhadas > .pagamento-inline-box,
  #pagina-compra.pagina.ativa .compra-secoes-alinhadas > .compra-resumo-final {
    border:        1px solid rgba(255,255,255,0.08) !important;
    border-radius: 20px !important;
  }

  /* ── 5. Card "Produtos selecionados" — card principal, maior e destacado */
  #pagina-compra.pagina.ativa .compra-resumo-itens {
    padding:       28px !important;
    border-radius: 24px !important;
    border:        1px solid rgba(255,255,255,0.12) !important;
    background:    linear-gradient(135deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.025) 100%) !important;
    box-shadow:    0 6px 32px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.07) !important;
    overflow:      visible !important;
  }

  /* Título do card */
  #pagina-compra.pagina.ativa .compra-resumo-topo h3 {
    font-size:   20px !important;
    font-weight: 700 !important;
    color:                   #f0f0f5 !important;
    -webkit-text-fill-color: #f0f0f5 !important;
    letter-spacing: -0.01em !important;
    margin: 0 !important;
  }

  /* Badge de contagem */
  #pagina-compra.pagina.ativa #compra-resumo-contagem {
    font-size:   12px !important;
    font-weight: 700 !important;
    padding:     4px 12px !important;
    border-radius: 999px !important;
    background:  rgba(52,131,250,0.15) !important;
    color:                   #93c5fd !important;
    -webkit-text-fill-color: #93c5fd !important;
    border: 1px solid rgba(52,131,250,0.30) !important;
  }

  /* ── 6. Cada item do resumo: grid com imagem maior ───────────────────── */
  #pagina-compra.pagina.ativa .compra-item-resumo.compra-item-card {
    display: grid !important;
    grid-template-columns: 88px minmax(0,1fr) minmax(140px,auto) !important;
    align-items: center !important;
    gap:     18px !important;
    padding: 18px !important;
    border-radius: 18px !important;
    background:    rgba(255,255,255,0.04) !important;
    border:        1px solid rgba(255,255,255,0.07) !important;
    box-shadow:    none !important;
    transition:    background 0.15s ease, border-color 0.15s ease !important;
  }

  #pagina-compra.pagina.ativa .compra-item-resumo.compra-item-card:hover {
    background:  rgba(255,255,255,0.07) !important;
    border-color: rgba(255,255,255,0.14) !important;
  }

  /* Imagem do item — maior */
  #pagina-compra.pagina.ativa .compra-item-resumo-imagem {
    width:         88px !important;
    height:        88px !important;
    border-radius: 16px !important;
    background:    #f5f5f5 !important;
    border:        1px solid rgba(255,255,255,0.10) !important;
  }

  /* Nome do produto */
  #pagina-compra.pagina.ativa .compra-item-resumo-info strong {
    font-size:   17px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color:                   #f0f0f5 !important;
    -webkit-text-fill-color: #f0f0f5 !important;
  }

  /* Marca / subtexto */
  #pagina-compra.pagina.ativa .compra-item-resumo-marca {
    color:                   rgba(226,226,240,0.55) !important;
    -webkit-text-fill-color: rgba(226,226,240,0.55) !important;
    font-size:   13px !important;
    font-weight: 600 !important;
  }

  /* Preço total do item — azul destaque */
  #pagina-compra.pagina.ativa .compra-item-resumo-preco strong {
    font-size:   21px !important;
    font-weight: 800 !important;
    color:                   #60a5fa !important;
    -webkit-text-fill-color: #60a5fa !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  /* Label "TOTAL" acima do preço */
  #pagina-compra.pagina.ativa .compra-item-resumo-preco span {
    font-size:   11px !important;
    color:                   rgba(226,226,240,0.45) !important;
    -webkit-text-fill-color: rgba(226,226,240,0.45) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
  }

  /* Linha subtotal */
  #pagina-compra.pagina.ativa .compra-subtotal-linha {
    font-size:   16px !important;
    font-weight: 700 !important;
    color:       #f0f0f5 !important;
    margin-top:  22px !important;
    padding-top: 18px !important;
    border-top:  1px solid rgba(255,255,255,0.08) !important;
  }

  #pagina-compra.pagina.ativa .compra-subtotal-linha strong {
    font-size:   21px !important;
    color:                   #60a5fa !important;
    -webkit-text-fill-color: #60a5fa !important;
  }

}

/* Ajuste do header para 768-900px (container 100% largura) */
@media (min-width: 768px) and (max-width: 900px) {
  #pagina-compra.pagina.ativa .compra-header-mobile {
    width: 100% !important;
  }
}
/* ══ fim DESKTOP LAYOUT CHECKOUT ════════════════════════════════════════════ */

/* ══ DESKTOP DARK PIX PAGE ════════════════════════════════════════════════════
   Sobrescreve os backgrounds brancos do styles.css base APENAS para desktop.
   Mobile (≤ 767px) é controlado pelos blocos @media (max-width: 767px)
   existentes nos blocos anteriores — NÃO tocar neles.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {

  /* ── Container principal ─────────────────────────────────────────────── */
  #pagina-pix,
  .pagina-pix {
    background: #05070d !important;
  }

  .pagina-pix-conteudo {
    background: linear-gradient(180deg, #060b19 0%, #0a1124 60%, #08101e 100%) !important;
    color:         #f0f0f5 !important;
    border-radius: 0 !important;
    box-shadow:    none !important;
  }

  /* ── Topo (título + X) ───────────────────────────────────────────────── */
  .topo-pix {
    background:   transparent !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  }

  .topo-pix h2 {
    color:                   #f0f0f5 !important;
    -webkit-text-fill-color: #f0f0f5 !important;
    font-weight: 700 !important;
  }

  .btn-fechar-pix {
    background:      transparent !important;
    border:          none !important;
    border-radius:   0 !important;
    box-shadow:      none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color:                   rgba(255,255,255,0.60) !important;
    -webkit-text-fill-color: rgba(255,255,255,0.60) !important;
    font-size:   28px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    cursor:      pointer !important;
    transition:  color 0.18s ease !important;
  }

  .btn-fechar-pix:hover,
  .btn-fechar-pix:focus-visible {
    color:                   rgba(255,255,255,0.95) !important;
    -webkit-text-fill-color: rgba(255,255,255,0.95) !important;
    background:  transparent !important;
    box-shadow:  none !important;
    border:      none !important;
    outline:     none !important;
  }

  /* ── Cards internos ──────────────────────────────────────────────────── */
  .pix-tempo-box,
  .pix-qrcode-container,
  .pix-codigo-box,
  .pix-instrucoes {
    background:    rgba(255,255,255,0.04) !important;
    border:        1px solid rgba(255,255,255,0.08) !important;
    border-radius: 16px !important;
    color:         #f0f0f5 !important;
    box-shadow:    none !important;
  }

  /* ── Textos dentro do timer ──────────────────────────────────────────── */
  .pix-tempo-label {
    color:                   rgba(226,226,240,0.65) !important;
    -webkit-text-fill-color: rgba(226,226,240,0.65) !important;
  }

  .pix-tempo-valor,
  .pix-tempo-numero {
    color:                   #f0f0f5 !important;
    -webkit-text-fill-color: #f0f0f5 !important;
    font-weight: 700 !important;
  }

  /* ── Logo Pix (pill badge no topo do QR) — menor e discreta ─────────── */
  .pix-qrcode-topo span {
    font-size:     11px !important;
    padding:       4px 10px !important;
    background:    rgba(0,127,112,0.12) !important;
    color:                   #4ade80 !important;
    -webkit-text-fill-color: #4ade80 !important;
    border:        1px solid rgba(0,127,112,0.30) !important;
    border-radius: 999px !important;
  }

  /* ── Título e subtexto acima do QR ──────────────────────────────────── */
  .pix-qrcode-titulo,
  .pix-qrcode-topo h3,
  .pix-qrcode-topo p {
    color:                   #f0f0f5 !important;
    -webkit-text-fill-color: #f0f0f5 !important;
  }

  /* ── QR Code: manter fundo branco para legibilidade do scanner ───────── */
  .pix-qrcode-container canvas,
  .pix-qrcode-container img,
  #qrcode-pix canvas,
  #qrcode-pix img {
    background:    #ffffff !important;
    border-radius: 12px !important;
    padding:       10px !important;
  }

  /* ── Textarea do código Pix ──────────────────────────────────────────── */
  #codigo-pix-texto {
    background:    rgba(255,255,255,0.05) !important;
    border:        1px solid rgba(255,255,255,0.10) !important;
    color:                   rgba(226,226,240,0.80) !important;
    -webkit-text-fill-color: rgba(226,226,240,0.80) !important;
    border-radius: 10px !important;
  }

  /* ── Badge de segurança ──────────────────────────────────────────────── */
  .pix-seguro-badge,
  .pix-seguro-badge * {
    color:                   rgba(226,226,240,0.55) !important;
    -webkit-text-fill-color: rgba(226,226,240,0.55) !important;
    background:  transparent !important;
    border-color: rgba(255,255,255,0.10) !important;
  }

  /* ── Instruções ──────────────────────────────────────────────────────── */
  .pix-instrucoes h4,
  .pix-instrucoes p,
  .pix-instrucoes li,
  .pix-instrucoes span {
    color:                   rgba(226,226,240,0.75) !important;
    -webkit-text-fill-color: rgba(226,226,240,0.75) !important;
  }

  .pix-instrucoes h4 {
    color:                   #f0f0f5 !important;
    -webkit-text-fill-color: #f0f0f5 !important;
    font-weight: 700 !important;
  }

  /* ── Botão "Copiar código Pix" — azul primário ───────────────────────── */
  .btn-copiar-pix {
    background:    linear-gradient(135deg, #3483FA 0%, #2968C8 100%) !important;
    color:                   #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border:        none !important;
    border-radius: 14px !important;
    font-weight:   700 !important;
    box-shadow:    0 4px 18px rgba(52,131,250,0.35) !important;
    transition:    all 0.18s ease !important;
  }

  .btn-copiar-pix:hover,
  .btn-copiar-pix:focus-visible {
    background:  linear-gradient(135deg, #4b96ff 0%, #3483FA 100%) !important;
    box-shadow:  0 6px 24px rgba(52,131,250,0.50) !important;
    transform:   translateY(-1px) !important;
    outline:     none !important;
  }

  /* ── Botão "Já paguei" — verde suave ────────────────────────────────── */
  .btn-ok-pix {
    background:    rgba(34,197,94,0.14) !important;
    color:                   #4ade80 !important;
    -webkit-text-fill-color: #4ade80 !important;
    border:        1px solid rgba(34,197,94,0.35) !important;
    border-radius: 14px !important;
    font-weight:   700 !important;
    box-shadow:    none !important;
    transition:    all 0.18s ease !important;
  }

  .btn-ok-pix:hover,
  .btn-ok-pix:focus-visible {
    background:  rgba(34,197,94,0.22) !important;
    border-color: rgba(34,197,94,0.55) !important;
    transform:   translateY(-1px) !important;
    outline:     none !important;
  }

}
/* ══ fim DESKTOP DARK PIX PAGE ══════════════════════════════════════════════ */

/* ══ DESKTOP DARK CHECKOUT — ENTREGA / PAGAMENTO / RESUMO FINAL ══════════════
   Sobrescreve os backgrounds brancos da entrega selecionada e do resumo final.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {

  /* ── Card de entrega/pagamento selecionado ───────────────────────────── */
  #pagina-compra.pagina.ativa .checkout-selected-summary {
    background:    rgba(255,255,255,0.04) !important;
    border:        1px solid rgba(255,255,255,0.09) !important;
    border-radius: 16px !important;
    box-shadow:    none !important;
  }

  #pagina-compra.pagina.ativa .checkout-selected-title {
    color:                   #f0f0f5 !important;
    -webkit-text-fill-color: #f0f0f5 !important;
    font-weight: 600 !important;
  }

  #pagina-compra.pagina.ativa .checkout-selected-subtitle {
    color:                   rgba(226,226,240,0.60) !important;
    -webkit-text-fill-color: rgba(226,226,240,0.60) !important;
  }

  #pagina-compra.pagina.ativa .checkout-selected-price {
    color:                   #60a5fa !important;
    -webkit-text-fill-color: #60a5fa !important;
    font-weight: 700 !important;
  }

  /* ── Botão "Alterar" ─────────────────────────────────────────────────── */
  #pagina-compra.pagina.ativa .checkout-change-btn {
    background:    transparent !important;
    border:        1px solid rgba(52,131,250,0.45) !important;
    border-radius: 10px !important;
    color:                   #60a5fa !important;
    -webkit-text-fill-color: #60a5fa !important;
    font-weight:   600 !important;
    box-shadow:    none !important;
    transition:    all 0.15s ease !important;
  }

  #pagina-compra.pagina.ativa .checkout-change-btn:hover,
  #pagina-compra.pagina.ativa .checkout-change-btn:focus-visible {
    background:   rgba(52,131,250,0.10) !important;
    border-color: rgba(52,131,250,0.70) !important;
    outline:      none !important;
  }

  /* ── Resumo final: subtotal, frete, total ────────────────────────────── */
  #pagina-compra.pagina.ativa .compra-total-linha span {
    color:                   rgba(226,226,240,0.70) !important;
    -webkit-text-fill-color: rgba(226,226,240,0.70) !important;
    font-size: 15px !important;
  }

  #pagina-compra.pagina.ativa .compra-total-linha strong {
    color:                   #f0f0f5 !important;
    -webkit-text-fill-color: #f0f0f5 !important;
    font-weight: 600 !important;
  }

  /* Linha de destaque: "Total final" */
  #pagina-compra.pagina.ativa .compra-total-linha.compra-total-linha-destaque span {
    color:                   #f0f0f5 !important;
    -webkit-text-fill-color: #f0f0f5 !important;
    font-weight: 700 !important;
    font-size:   17px !important;
  }

  #pagina-compra.pagina.ativa .compra-total-linha.compra-total-linha-destaque strong {
    color:                   #60a5fa !important;
    -webkit-text-fill-color: #60a5fa !important;
    font-weight: 800 !important;
    font-size:   22px !important;
  }

  /* ── Título do card de resumo final ─────────────────────────────────── */
  #pagina-compra.pagina.ativa .compra-resumo-final h3 {
    color:                   #f0f0f5 !important;
    -webkit-text-fill-color: #f0f0f5 !important;
    font-weight: 700 !important;
  }

}
/* ══ fim DESKTOP DARK CHECKOUT — ENTREGA / RESUMO FINAL ═════════════════════ */

/* ══ MOBILE CARRINHO VAZIO — COMPACTO ════════════════════════════════════════
   Usa body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa para igualar a
   especificidade (2,3,1) do bloco concorrente que forçava min-height: 100dvh.
   Por aparecer DEPOIS no arquivo, vence na cascata com !important igual.
   Desktop NÃO é afetado — tudo dentro de @media (max-width: 767px).
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── 1. Estado "Seu carrinho está vazio" — sem card branco no mobile ─────── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .carrinho-vazio {
    min-height:      auto !important;
    height:          auto !important;
    padding:         28px 18px 24px !important;
    border-radius:   0 !important;
    background:      transparent !important;
    border:          none !important;
    box-shadow:      none !important;
    display:         flex !important;
    flex-direction:  column !important;
    align-items:     center !important;
    justify-content: center !important;
    text-align:      center !important;
    gap:             0 !important;
    color:           #0f172a !important;
    margin-bottom:   0 !important;
  }

  /* ── 2. Ícone ────────────────────────────────────────────────────────────── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .carrinho-vazio::before {
    width:         36px !important;
    height:        36px !important;
    border-radius: 10px !important;
    margin-bottom: 10px !important;
    flex-shrink:   0 !important;
    background:    linear-gradient(135deg, #3483FA, #2968C8) !important;
    box-shadow:    0 0 14px rgba(52, 131, 250, 0.20) !important;
  }

  /* ── 3. Título ───────────────────────────────────────────────────────────── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .carrinho-vazio h3 {
    font-size:   15px !important;
    font-weight: 800 !important;
    color:       #0f172a !important;
    margin:      0 0 4px !important;
    line-height: 1.25 !important;
  }

  /* ── 4. Texto descritivo ─────────────────────────────────────────────────── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .carrinho-vazio p {
    font-size:   11px !important;
    color:       #64748b !important;
    margin:      0 0 14px !important;
    line-height: 1.4 !important;
  }

  /* ── 5. Botão "Ver produtos" ─────────────────────────────────────────────── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa #btn-comprar-carrinho-vazio,
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .carrinho-vazio .btn-comprar {
    display:         inline-flex !important;
    align-items:     center !important;
    justify-content: center !important;
    height:          40px !important;
    padding:         0 24px !important;
    border-radius:   10px !important;
    background:      #2563eb !important;
    color:           #ffffff !important;
    font-size:       13px !important;
    font-weight:     700 !important;
    border:          none !important;
    box-shadow:      0 3px 10px rgba(37, 99, 235, 0.18) !important;
    letter-spacing:  0.01em !important;
    width:           auto !important;
    min-width:       0 !important;
    transition:      background 0.18s ease, box-shadow 0.18s ease !important;
  }

  /* ── 6. Seção "Você também pode gostar" — sobe na tela ─────────────────── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .recomendados {
    margin-top:      10px !important;
    padding-top:     0 !important;
    padding-bottom:  70px !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .recomendados h2 {
    font-size:     15px !important;
    font-weight:   800 !important;
    color:         #0f172a !important;
    margin:        0 0 8px !important;
    padding:       0 8px !important;
  }

}
/* ══ fim MOBILE CARRINHO VAZIO ═══════════════════════════════════════════════ */

/* ══ MOBILE CARRINHO RECOMENDADOS — CARDS IGUAIS À HOME ═════════════════════
   Sobrescreve body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa
   #grade-recomendados ... que reduzia cards a 178px / imagem 84px.
   Valores IDÊNTICOS ao estilo final da Home (nexa-mobile-product-cards.css
   "Marketplace style"). Desktop NÃO é afetado.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── Grid ────────────────────────────────────────────────────────────── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa #grade-recomendados {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows:        270px !important;
    gap:                   8px !important;
    padding:               8px 8px 24px !important;
    align-items:           stretch !important;
  }

  /* ── Card ────────────────────────────────────────────────────────────── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa #grade-recomendados .produto-card {
    width:            100% !important;
    height:           270px !important;
    min-height:       270px !important;
    max-height:       270px !important;
    padding:          0 !important;
    border-radius:    6px !important;
    border:           1px solid #e5e7eb !important;
    background:       #ffffff !important;
    background-image: none !important;
    box-shadow:       0 1px 3px rgba(0,0,0,0.08) !important;
    display:          flex !important;
    flex-direction:   column !important;
    overflow:         hidden !important;
    box-sizing:       border-box !important;
    color:            #111827 !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa #grade-recomendados .produto-card:hover,
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa #grade-recomendados .produto-card:active {
    transform: none !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa #grade-recomendados .produto-card:active {
    transform: scale(0.985) !important;
  }

  /* ── Área da imagem ──────────────────────────────────────────────────── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa #grade-recomendados .produto-img-wrap {
    width:         100% !important;
    height:        160px !important;
    min-height:    160px !important;
    max-height:    160px !important;
    flex:          0 0 160px !important;
    margin:        0 !important;
    padding:       0 !important;
    border-radius: 0 !important;
    border:        0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
    background:    #ffffff !important;
    box-shadow:    none !important;
    position:      relative !important;
    display:       grid !important;
    place-items:   center !important;
    line-height:   0 !important;
    overflow:      hidden !important;
    box-sizing:    border-box !important;
  }

  /* ── Imagem ───────────────────────────────────────────────────────────── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa #grade-recomendados .imagem-produto {
    width:           100% !important;
    max-width:       none !important;
    height:          100% !important;
    max-height:      none !important;
    position:        absolute !important;
    inset:           0 !important;
    margin:          auto !important;
    padding:         0 !important;
    object-fit:      cover !important;
    object-position: 50% 50% !important;
    background:      #ffffff !important;
    border-radius:   0 !important;
    transform:       none !important;
    filter:          none !important;
  }

  /* ── Corpo do card ────────────────────────────────────────────────────── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa #grade-recomendados .produto-card-body {
    flex:           1 1 auto !important;
    min-height:     0 !important;
    padding:        8px !important;
    display:        flex !important;
    flex-direction: column !important;
    gap:            2px !important;
    overflow:       hidden !important;
  }

  /* ── Nome ─────────────────────────────────────────────────────────────── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa #grade-recomendados .nome-produto {
    min-height:              0 !important;
    max-height:              30px !important;
    margin:                  0 !important;
    color:                   #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    font-size:               13px !important;
    font-weight:             500 !important;
    line-height:             1.18 !important;
    letter-spacing:          0 !important;
    display:                 -webkit-box !important;
    -webkit-line-clamp:      2 !important;
    -webkit-box-orient:      vertical !important;
    overflow:                hidden !important;
    overflow-wrap:           anywhere !important;
  }

  /* ── Marca ─────────────────────────────────────────────────────────────── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa #grade-recomendados .marca-produto {
    min-height:              0 !important;
    max-height:              12px !important;
    margin:                  0 !important;
    color:                   #7c8799 !important;
    -webkit-text-fill-color: #7c8799 !important;
    font-size:               10.5px !important;
    font-weight:             400 !important;
    line-height:             1.1 !important;
    display:                 -webkit-box !important;
    -webkit-line-clamp:      1 !important;
    -webkit-box-orient:      vertical !important;
    overflow:                hidden !important;
  }

  /* ── Footer: preço + botão ─────────────────────────────────────────────── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa #grade-recomendados .produto-card-footer {
    width:           100% !important;
    min-height:      38px !important;
    flex:            0 0 38px !important;
    margin-top:      auto !important;
    padding:         0 !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: space-between !important;
    gap:             5px !important;
    position:        static !important;
    inset:           auto !important;
  }

  /* ── Wrap do preço ─────────────────────────────────────────────────────── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa #grade-recomendados .produto-preco-wrap {
    min-width:       0 !important;
    max-width:       calc(100% - 43px) !important;
    min-height:      0 !important;
    margin:          0 !important;
    display:         flex !important;
    flex-direction:  column !important;
    justify-content: center !important;
    gap:             1px !important;
  }

  /* ── Preço ─────────────────────────────────────────────────────────────── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa #grade-recomendados .preco-produto {
    color:                   #f97316 !important;
    -webkit-text-fill-color: #f97316 !important;
    font-size:               18px !important;
    font-weight:             700 !important;
    line-height:             1 !important;
    letter-spacing:          0 !important;
    white-space:             nowrap !important;
    overflow:                visible !important;
    text-overflow:           clip !important;
  }

  /* ── Botão de carrinho ──────────────────────────────────────────────────── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa #grade-recomendados .produto-btn-cart {
    width:           38px !important;
    height:          38px !important;
    min-width:       38px !important;
    min-height:      38px !important;
    max-width:       38px !important;
    max-height:      38px !important;
    flex:            0 0 38px !important;
    border-radius:   6px !important;
    padding:         0 !important;
    background:      linear-gradient(135deg, #7c3aed 0%, #2563eb 100%) !important;
    box-shadow:      none !important;
    border:          none !important;
    display:         inline-flex !important;
    align-items:     center !important;
    justify-content: center !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa #grade-recomendados .produto-btn-cart svg {
    width:      20px !important;
    height:     20px !important;
    min-width:  20px !important;
    min-height: 20px !important;
    max-width:  20px !important;
    max-height: 20px !important;
  }

  /* ── Ocultar elementos que a Home não mostra ─────────────────────────── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa #grade-recomendados .produto-card-badges,
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa #grade-recomendados .produto-btn-fav,
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa #grade-recomendados .produto-img-halo {
    display: none !important;
  }

}

/* ── ≤ 374px ─────────────────────────────────────────────────────────────── */
@media (max-width: 374px) {
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa #grade-recomendados {
    grid-auto-rows: 256px !important;
    gap:            8px !important;
    padding-left:   6px !important;
    padding-right:  6px !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa #grade-recomendados .produto-card {
    height:     256px !important;
    min-height: 256px !important;
    max-height: 256px !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa #grade-recomendados .produto-img-wrap {
    height:     148px !important;
    min-height: 148px !important;
    max-height: 148px !important;
    flex:       0 0 148px !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa #grade-recomendados .preco-produto {
    font-size: 17px !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa #grade-recomendados .produto-btn-cart {
    width:      36px !important;
    height:     36px !important;
    min-width:  36px !important;
    min-height: 36px !important;
    max-width:  36px !important;
    max-height: 36px !important;
    flex-basis: 36px !important;
  }
}

/* ── ≤ 359px ─────────────────────────────────────────────────────────────── */
@media (max-width: 359px) {
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa #grade-recomendados {
    grid-auto-rows: 248px !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa #grade-recomendados .produto-card {
    height:     248px !important;
    min-height: 248px !important;
    max-height: 248px !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa #grade-recomendados .produto-img-wrap {
    height:     140px !important;
    min-height: 140px !important;
    max-height: 140px !important;
    flex:       0 0 140px !important;
  }
}

/* ══ MOBILE CARRINHO — VISUAL PROFISSIONAL ════════════════════════════════════
   Sobrescreve o bloco dark-list em ~9700 usando o mesmo seletor de alta
   especificidade. Por vir depois no arquivo, vence na cascata (mesma
   especificidade, posição posterior ganha).
   APENAS @media (max-width: 767px) — desktop intocado.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── Lista: gap entre cards, sem borda escura ── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .lista-carrinho {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    border-top: none !important;
    padding-bottom: 16px !important;
    margin-bottom: 0 !important;
  }

  /* ── Card branco profissional ── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho {
    grid-template-columns: 20px 60px minmax(0, 1fr) auto !important;
    grid-template-areas:
      "check img info   remove"
      "check img qtd    remove" !important;
    align-items: center !important;
    gap: 6px 9px !important;
    min-height: auto !important;
    padding: 12px 10px !important;
    border: 1px solid #e5e7eb !important;
    border-bottom: 1px solid #e5e7eb !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    box-shadow: 0 1px 4px rgba(15,23,42,0.06) !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho:hover {
    border-color: #d1d5db !important;
    box-shadow: 0 2px 8px rgba(15,23,42,0.09) !important;
    transform: none !important;
    background: #ffffff !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho.selecionado {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 1px rgba(37,99,235,0.15), 0 2px 8px rgba(37,99,235,0.10) !important;
    background: #ffffff !important;
  }

  /* ── Checkbox ── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-selecao {
    grid-area: check !important;
    align-self: center !important;
    padding-top: 0 !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .checkbox-item-carrinho {
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    accent-color: #2563eb !important;
  }

  /* ── Esquerda: display:contents mantido (img e info viram filhos diretos do grid) ── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-esquerda {
    display: contents !important;
  }

  /* ── Imagem ── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-imagem {
    grid-area: img !important;
    align-self: center !important;
    width: 60px !important;
    height: 60px !important;
    border-radius: 10px !important;
    background: #f8fafc !important;
    border: 1px solid rgba(15,23,42,0.07) !important;
    padding: 5px !important;
    box-sizing: border-box !important;
    object-fit: contain !important;
  }

  /* ── Info (nome + preço) ── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-info {
    grid-area: info !important;
    align-self: center !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    min-width: 0 !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-info h3 {
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    white-space: normal !important;
    text-overflow: clip !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    line-height: 1.25 !important;
    margin: 0 0 2px !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-info p {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #f97316 !important;
    line-height: 1.2 !important;
  }

  /* ── Controles de quantidade ── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-qtd {
    grid-area: qtd !important;
    grid-column: auto !important;
    justify-self: start !important;
    align-self: center !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .btn-qtd-carrinho {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    max-width: 30px !important;
    max-height: 30px !important;
    border-radius: 8px !important;
    background: #f1f5f9 !important;
    color: #0f172a !important;
    border: 1px solid #e2e8f0 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-valor-qtd {
    min-width: 22px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    text-align: center !important;
  }

  /* ── Botão Remover — vermelho, visível, discreto ── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .btn-remover-carrinho {
    grid-area: remove !important;
    grid-column: auto !important;
    align-self: center !important;
    justify-self: center !important;
    width: auto !important;
    min-height: auto !important;
    padding: 6px 9px !important;
    border: none !important;
    border-radius: 8px !important;
    background: rgba(239,68,68,0.08) !important;
    color: #ef4444 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .btn-remover-carrinho:hover,
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .btn-remover-carrinho:active {
    background: rgba(239,68,68,0.15) !important;
    color: #dc2626 !important;
    transform: none !important;
  }

  /* ── Barra inferior fixa — branca e refinada ── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .barra-selecao-carrinho {
    position: fixed !important;
    right: 10px !important;
    bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
    left: 10px !important;
    z-index: 80 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 10px 14px !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 4px 24px rgba(15,23,42,0.12), 0 1px 6px rgba(15,23,42,0.06) !important;
    backdrop-filter: none !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .checkbox-selecionar-todos {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    gap: 7px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    line-height: 1 !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .checkbox-selecionar-todos input,
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .checkbox-item-carrinho {
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    accent-color: #2563eb !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .barra-selecao-acoes {
    flex: 1 1 auto !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    min-width: 0 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #64748b !important;
    line-height: 1 !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa #resumo-selecao-carrinho {
    max-width: none !important;
    text-align: right !important;
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
  }

  /* ── Botão Comprar — ação principal forte ── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .btn-comprar-selecionados {
    flex-shrink: 0 !important;
    min-width: 90px !important;
    height: 40px !important;
    padding: 0 18px !important;
    border-radius: 11px !important;
    background: #2563eb !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    border: none !important;
    box-shadow: 0 2px 10px rgba(37,99,235,0.28) !important;
    cursor: pointer !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .btn-comprar-selecionados:active {
    transform: scale(0.97) !important;
    box-shadow: 0 1px 4px rgba(37,99,235,0.18) !important;
  }

}
/* ══ fim MOBILE CARRINHO RECOMENDADOS ═══════════════════════════════════════ */

/* ══ MOBILE CARRINHO — LISTA LIMPA v2 ════════════════════════════════════════
   Itens: largura 100 %, separador 1px, sem border-radius, imagem 64px,
   lixeira no lugar de "Remover", fonte Poppins igual à home.
   APENAS @media (max-width: 767px) — desktop intocado.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── Lista: gap zero, borda superior, sem fundo escuro ── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .lista-carrinho {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    border-top: 1px solid #e5e7eb !important;
    padding-bottom: 16px !important;
    margin-bottom: 0 !important;
  }

  /* ── Item: 100 % de largura, sem arredondamento, linha 1px ── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho {
    grid-template-columns: 20px 64px minmax(0, 1fr) 36px !important;
    grid-template-areas:
      "check img info   remove"
      "check img qtd    remove" !important;
    align-items: center !important;
    gap: 5px 10px !important;
    min-height: auto !important;
    width: 100% !important;
    padding: 12px 2px !important;
    border: none !important;
    border-bottom: 1px solid #e5e7eb !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
    margin: 0 !important;
    font-family: var(--na-font) !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho:hover {
    border-bottom-color: #e5e7eb !important;
    box-shadow: none !important;
    transform: none !important;
    background: #f8fafc !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho.selecionado {
    background: #eff6ff !important;
    border-bottom-color: #bfdbfe !important;
    box-shadow: none !important;
  }

  /* ── Checkbox ── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-selecao {
    grid-area: check !important;
    align-self: center !important;
    padding-top: 0 !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .checkbox-item-carrinho {
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    accent-color: #2563eb !important;
  }

  /* ── Esquerda: display:contents (img e info tornam-se filhos diretos do grid) ── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-esquerda {
    display: contents !important;
  }

  /* ── Imagem: 64 × 64px ── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-imagem {
    grid-area: img !important;
    align-self: center !important;
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    border-radius: 6px !important;
    background: #f8fafc !important;
    border: 1px solid rgba(15,23,42,0.07) !important;
    padding: 4px !important;
    box-sizing: border-box !important;
    object-fit: contain !important;
  }

  /* ── Info: nome + preço ── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-info {
    grid-area: info !important;
    align-self: center !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    min-width: 0 !important;
    font-family: var(--na-font) !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-info h3 {
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    white-space: normal !important;
    text-overflow: clip !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    line-height: 1.3 !important;
    margin: 0 0 2px !important;
    font-family: var(--na-font) !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-info p {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #f97316 !important;
    line-height: 1.2 !important;
    font-family: var(--na-font) !important;
  }

  /* ── Controles de quantidade ── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-qtd {
    grid-area: qtd !important;
    grid-column: auto !important;
    justify-self: start !important;
    align-self: center !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .btn-qtd-carrinho {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
    border-radius: 6px !important;
    background: #f1f5f9 !important;
    color: #0f172a !important;
    border: 1px solid #e2e8f0 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    font-family: var(--na-font) !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-valor-qtd {
    min-width: 22px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    text-align: center !important;
    font-family: var(--na-font) !important;
  }

  /* ── Botão lixeira: esconde texto "Remover", exibe ícone SVG via ::before ── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .btn-remover-carrinho {
    grid-area: remove !important;
    grid-column: auto !important;
    align-self: center !important;
    justify-self: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 6px !important;
    background: transparent !important;
    font-size: 0 !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    line-height: 1 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .btn-remover-carrinho::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23EF4444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2'/%3E%3C/svg%3E") !important;
    display: block !important;
    line-height: 0 !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .btn-remover-carrinho:hover,
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .btn-remover-carrinho:active {
    background: rgba(239,68,68,0.08) !important;
    transform: none !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .btn-remover-carrinho:disabled,
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .btn-remover-carrinho[disabled] {
    opacity: 0.4 !important;
  }

}
/* ══ fim MOBILE CARRINHO LISTA LIMPA v2 ══════════════════════════════════════ */

/* ══ MOBILE CARRINHO — MARKETPLACE CLEAN (definitivo) ════════════════════════
   Vence todos os blocos anteriores: mesma especificidade, posição posterior.
   Lista Mercado Livre: linha 1px, sem card, lixeira cinza, barra premium.
   APENAS @media (max-width: 767px) — desktop intocado.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── Container: padding-bottom para caber barra + nav ── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .carrinho-container {
    padding-bottom: calc(144px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* ── Lista: gap zero, borda de abertura no topo ── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .lista-carrinho {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    border-top: 1px solid #e5e7eb !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  /* ── Item: lista limpa, 100% de largura, sem card, sem border-radius ── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho {
    grid-template-columns: 22px 64px minmax(0, 1fr) 40px !important;
    grid-template-areas:
      "check img info   remove"
      "check img qtd    remove" !important;
    align-items: center !important;
    gap: 5px 10px !important;
    min-height: 80px !important;
    width: 100% !important;
    padding: 12px 14px !important;
    border: none !important;
    border-bottom: 1px solid #e5e7eb !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
    margin: 0 !important;
    font-family: var(--na-font) !important;
  }

  /* MATAR borda azul no hover — alta especificidade ganha sobre global */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho:hover {
    border: none !important;
    border-bottom: 1px solid #e5e7eb !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    background: #f9fafb !important;
  }

  /* MATAR borda azul no selecionado */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho.selecionado {
    border: none !important;
    border-bottom: 1px solid #bfdbfe !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #eff6ff !important;
  }

  /* ── Checkbox ── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-selecao {
    grid-area: check !important;
    align-self: center !important;
    padding-top: 0 !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .checkbox-item-carrinho {
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    accent-color: #2563eb !important;
    cursor: pointer !important;
  }

  /* ── Esquerda: display:contents (img e info ficam no grid) ── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-esquerda {
    display: contents !important;
  }

  /* ── Imagem: 64×64px ── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-imagem {
    grid-area: img !important;
    align-self: center !important;
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    border-radius: 8px !important;
    background: #f8fafc !important;
    border: 1px solid #f1f5f9 !important;
    padding: 4px !important;
    box-sizing: border-box !important;
    object-fit: contain !important;
  }

  /* ── Info: nome + preço ── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-info {
    grid-area: info !important;
    align-self: center !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    min-width: 0 !important;
    font-family: var(--na-font) !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-info h3 {
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    white-space: normal !important;
    text-overflow: clip !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #111827 !important;
    line-height: 1.35 !important;
    margin: 0 0 1px !important;
    font-family: var(--na-font) !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-info p {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #f97316 !important;
    line-height: 1.1 !important;
    font-family: var(--na-font) !important;
  }

  /* ── Controles de quantidade ── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-qtd {
    grid-area: qtd !important;
    grid-column: auto !important;
    justify-self: start !important;
    align-self: center !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .btn-qtd-carrinho {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
    padding: 0 !important;
    border-radius: 6px !important;
    background: #f8fafc !important;
    color: #374151 !important;
    border: 1px solid #d1d5db !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    font-family: var(--na-font) !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .btn-qtd-carrinho:active {
    background: #e2e8f0 !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-valor-qtd {
    min-width: 24px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #111827 !important;
    text-align: center !important;
    font-family: var(--na-font) !important;
  }

  /* ── Botão lixeira: cinza → vermelho no hover/active (CSS mask) ── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .btn-remover-carrinho {
    grid-area: remove !important;
    grid-column: auto !important;
    align-self: center !important;
    justify-self: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 8px !important;
    background: transparent !important;
    font-size: 0 !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    cursor: pointer !important;
    white-space: nowrap !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .btn-remover-carrinho::before {
    content: '' !important;
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
    background-color: #94a3b8 !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2'/%3E%3C/svg%3E") !important;
    -webkit-mask-size: 18px 18px !important;
    mask-size: 18px 18px !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .btn-remover-carrinho:hover::before,
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .btn-remover-carrinho:active::before {
    background-color: #ef4444 !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .btn-remover-carrinho:hover,
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .btn-remover-carrinho:active {
    background: rgba(239,68,68,0.06) !important;
    transform: none !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .btn-remover-carrinho:disabled::before,
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .btn-remover-carrinho[disabled]::before {
    background-color: #cbd5e1 !important;
    opacity: 0.5 !important;
  }

  /* ── Barra inferior: full-width, acima do nav (64px), sem radius ── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .barra-selecao-carrinho {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 590 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    height: 56px !important;
    min-height: 56px !important;
    margin: 0 !important;
    padding: 0 16px !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    border: none !important;
    border-top: 1px solid #e5e7eb !important;
    box-shadow: 0 -2px 12px rgba(15,23,42,0.07) !important;
    backdrop-filter: none !important;
  }

  /* ── Selecionar todos ── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .checkbox-selecionar-todos {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #374151 !important;
    line-height: 1 !important;
    font-family: var(--na-font) !important;
    white-space: nowrap !important;
    min-width: 0 !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .checkbox-selecionar-todos input,
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .checkbox-item-carrinho {
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    accent-color: #2563eb !important;
  }

  /* ── Resumo seleção ── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .barra-selecao-acoes {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    min-width: 0 !important;
    font-family: var(--na-font) !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa #resumo-selecao-carrinho {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #6b7280 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 130px !important;
    text-align: right !important;
    flex-shrink: 1 !important;
  }

  /* ── Botão Comprar: ação principal ── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .btn-comprar-selecionados {
    flex-shrink: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    min-width: 100px !important;
    padding: 0 20px !important;
    border-radius: 6px !important;
    background: #2563eb !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    font-family: var(--na-font) !important;
    border: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    letter-spacing: 0 !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .btn-comprar-selecionados:active {
    background: #1d4ed8 !important;
    transform: scale(0.98) !important;
  }

}
/* ══ fim MOBILE CARRINHO MARKETPLACE CLEAN ═══════════════════════════════════ */

/* ══ MOBILE CARRINHO — REFINAMENTO FINAL ════════════════════════════════════
   Espaçamento, imagem 68px, barra com grid para evitar texto cortado.
   APENAS @media (max-width: 767px) — desktop intocado.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── Item: mais espaço interno ── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho {
    grid-template-columns: 22px 68px minmax(0, 1fr) 40px !important;
    gap: 6px 12px !important;
    min-height: 84px !important;
    padding: 14px 16px !important;
  }

  /* ── Imagem: 68×68px ── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-imagem {
    width: 68px !important;
    height: 68px !important;
    min-width: 68px !important;
  }

  /* ── Lixeira: centralização explícita ── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .btn-remover-carrinho {
    align-self: center !important;
    justify-self: center !important;
  }

  /* ── Checkbox do item: refinado ── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .checkbox-item-carrinho {
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    accent-color: #2563eb !important;
    cursor: pointer !important;
  }

  /* ── Barra inferior: grid 2 colunas para não cortar texto ── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .barra-selecao-carrinho {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    align-items: center !important;
    height: auto !important;
    min-height: 56px !important;
    padding: 10px 16px !important;
    gap: 0 12px !important;
  }

  /* ── Selecionar todos: coluna 1 auto ── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .checkbox-selecionar-todos {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #374151 !important;
    white-space: nowrap !important;
    font-family: var(--na-font) !important;
  }

  /* ── Checkbox selecionar todos ── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .checkbox-selecionar-todos input {
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    accent-color: #2563eb !important;
  }

  /* ── Ações: coluna 2 — flex com resumo crescendo ── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .barra-selecao-acoes {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    min-width: 0 !important;
  }

  /* ── Texto de resumo: sem corte, quebra se necessário ── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa #resumo-selecao-carrinho {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    color: #6b7280 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    text-align: right !important;
    line-height: 1.3 !important;
    font-family: var(--na-font) !important;
  }

  /* ── Botão Comprar: fixo, não encolhe ── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .btn-comprar-selecionados {
    flex-shrink: 0 !important;
    min-width: 90px !important;
  }

}
/* ══ fim MOBILE CARRINHO REFINAMENTO FINAL ═══════════════════════════════════ */

/* ══ MOBILE CARRINHO — RESUMO BARRA INFERIOR ════════════════════════════════
   Substitui "X produtos selecionados" por resumo 3 linhas: Produtos/Envios/Total.
   APENAS @media (max-width: 767px) — desktop intocado.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* Container: padding-bottom para barra mais alta */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .carrinho-container {
    padding-bottom: calc(152px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Barra: altura auto para comportar 3 linhas */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .barra-selecao-carrinho {
    height: auto !important;
    min-height: 60px !important;
    padding: 11px 16px !important;
    align-items: center !important;
  }

  /* resumo: flex coluna à direita */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa #resumo-selecao-carrinho {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: center !important;
    gap: 1px !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    text-align: right !important;
    font-family: var(--na-font) !important;
  }

  /* Linha genérica: Produtos e Envios */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa #resumo-selecao-carrinho .crsl {
    display: block !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    color: #64748b !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    font-family: var(--na-font) !important;
  }

  /* Linha Total: destaque */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa #resumo-selecao-carrinho .crsl-total {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin-top: 2px !important;
    line-height: 1.2 !important;
  }

}
/* ══ fim MOBILE CARRINHO RESUMO BARRA INFERIOR ═══════════════════════════════ */


/* ══ MOBILE CARRINHO — RESUMO BARRA MAIOR ═══════════════════════════════════
   Área central do resumo maior: grid aninhado, min-height 78px, texto 11px.
   APENAS @media (max-width: 767px) — desktop intocado.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* Container: padding-bottom atualizado para barra 78px */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .carrinho-container {
    padding-bottom: calc(160px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Barra: 2 colunas (label | .barra-selecao-acoes), altura 78px */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .barra-selecao-carrinho {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    align-items: center !important;
    height: auto !important;
    min-height: 78px !important;
    padding: 12px 16px !important;
    gap: 0 12px !important;
  }

  /* .barra-selecao-acoes: grid 2 colunas (resumo | botão) */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .barra-selecao-acoes {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
  }

  /* Resumo: coluna flex, alinhado à esquerda, mais espaço */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa #resumo-selecao-carrinho {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 3px !important;
    min-width: 0 !important;
    max-width: none !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    text-align: left !important;
  }

  /* Linha genérica: Produtos e Envios */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa #resumo-selecao-carrinho .crsl {
    display: block !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    color: #64748b !important;
    line-height: 1.2 !important;
    white-space: normal !important;
  }

  /* Linha Total: destaque maior */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa #resumo-selecao-carrinho .crsl-total {
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    line-height: 1.2 !important;
    margin-top: 0 !important;
  }

  /* Botão Comprar: alinhado ao centro verticalmente */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .btn-comprar-selecionados {
    align-self: center !important;
    flex-shrink: 0 !important;
  }

}
/* ══ fim MOBILE CARRINHO RESUMO BARRA MAIOR ══════════════════════════════════ */


/* ══ MOBILE CARRINHO — SELECIONAR TODOS TOPO + BARRA LIMPA ══════════════════
   Move "Selecionar todos" para acima da lista. Barra inferior: resumo preto + botão.
   APENAS @media (max-width: 767px) — desktop intocado.
   ══════════════════════════════════════════════════════════════════════════ */

/* Sempre escondido fora do mobile */
#selecionar-todos-topo {
  display: none;
}

@media (max-width: 767px) {

  /* ── "Selecionar todos" acima da lista ──────────────────────────────── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .selecionar-todos-topo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    cursor: pointer;
    border-bottom: 1px solid #f1f5f9;
    font-family: var(--na-font);
    user-select: none;
    -webkit-user-select: none;
  }

  /* Caixa visual do checkbox */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .selecionar-todos-topo .stt-box {
    width: 18px;
    height: 18px;
    border: 2px solid #cbd5e1;
    border-radius: 4px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    position: relative;
    transition: background 0.15s, border-color 0.15s;
  }

  /* Caixa: marcado ou indeterminate → azul */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .selecionar-todos-topo.stt-checked .stt-box,
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .selecionar-todos-topo.stt-indeterminate .stt-box {
    background: #2563eb;
    border-color: #2563eb;
  }

  /* Checkmark quando selecionado */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .selecionar-todos-topo.stt-checked .stt-box::after {
    content: '';
    display: block;
    width: 10px;
    height: 6px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg) translate(0, -1px);
  }

  /* Traço quando indeterminate */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .selecionar-todos-topo.stt-indeterminate .stt-box::after {
    content: '';
    display: block;
    width: 10px;
    height: 2px;
    background: #fff;
    border-radius: 1px;
  }

  /* Texto do label */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .selecionar-todos-topo .stt-text {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.2;
  }

  /* ── Esconder checkbox original da barra inferior ──────────────────── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .barra-selecao-carrinho .checkbox-selecionar-todos {
    display: none !important;
  }

  /* ── Barra inferior: ocupa linha inteira (sem coluna do checkbox) ───── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .barra-selecao-carrinho {
    display: grid !important;
    grid-template-columns: 1fr !important;
    padding: 10px 16px !important;
    min-height: 72px !important;
    height: auto !important;
    align-items: center !important;
  }

  /* .barra-selecao-acoes: resumo | botão */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .barra-selecao-acoes {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    justify-content: unset !important;
  }

  /* Resumo: coluna vertical, texto à esquerda */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa #resumo-selecao-carrinho {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 3px !important;
    min-width: 0 !important;
    max-width: none !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    text-align: left !important;
    flex: unset !important;
  }

  /* Produtos e Envios: preto legível */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa #resumo-selecao-carrinho .crsl {
    display: block !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    line-height: 1.3 !important;
    white-space: normal !important;
  }

  /* Total: destaque máximo */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa #resumo-selecao-carrinho .crsl-total {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    line-height: 1.3 !important;
    margin-top: 1px !important;
  }

  /* Botão Comprar centralizado verticalmente */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .btn-comprar-selecionados {
    align-self: center !important;
    flex-shrink: 0 !important;
  }

  /* Container: padding-bottom para barra sem o checkbox */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .carrinho-container {
    padding-bottom: calc(148px + env(safe-area-inset-bottom, 0px)) !important;
  }

}
/* ══ fim MOBILE CARRINHO SELECIONAR TODOS TOPO + BARRA LIMPA ════════════════ */


/* ══ MOBILE CARRINHO — BARRA INFERIOR LISTA VERTICAL ════════════════════════
   Resumo: rótulo à esquerda / valor à direita. Botão centralizado abaixo.
   APENAS @media (max-width: 767px) — desktop intocado.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* Barra: flex coluna, ocupa toda a largura */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .barra-selecao-carrinho {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    min-height: auto !important;
    height: auto !important;
    gap: 0 !important;
  }

  /* .barra-selecao-acoes: coluna (resumo → botão) */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .barra-selecao-acoes {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: 100% !important;
    justify-content: unset !important;
  }

  /* Resumo: coluna com gap entre linhas */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa #resumo-selecao-carrinho {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: unset !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    text-align: left !important;
    flex: unset !important;
    overflow: visible !important;
  }

  /* Cada linha: rótulo à esquerda, valor à direita */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa #resumo-selecao-carrinho .crsl {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    margin-top: 0 !important;
  }

  /* Total: mais destaque */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa #resumo-selecao-carrinho .crsl-total {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin-top: 4px !important;
    line-height: 1.3 !important;
  }

  /* Botão: abaixo do resumo, centralizado horizontalmente */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .btn-comprar-selecionados {
    width: 100% !important;
    max-width: 220px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 10px auto 0 !important;
    align-self: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
    background: #2563eb !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    flex-shrink: 0 !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
  }

  /* Container: padding-bottom para barra mais alta */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .carrinho-container {
    padding-bottom: calc(180px + env(safe-area-inset-bottom, 0px)) !important;
  }

}
/* ══ fim MOBILE CARRINHO BARRA INFERIOR LISTA VERTICAL ══════════════════════ */


/* ══ MOBILE CARRINHO — REFINAMENTO IMAGEM + PREÇO + BARRA ═══════════════════
   1) Imagem 70px. 2) Preço só valor final. 3) Espaço inferior barra.
   APENAS @media (max-width: 767px) — desktop intocado.
   ══════════════════════════════════════════════════════════════════════════ */

/* Preço desktop: sempre visível fora do mobile */
.item-preco-mobile { display: none; }

@media (max-width: 767px) {

  /* ── Preço: esconder "1 x R$... = R$..." no mobile ──────────────────── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-preco-desktop {
    display: none !important;
  }

  /* Preço mobile: só valor final */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-preco-mobile {
    display: block !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #f97316 !important;
    line-height: 1.3 !important;
    margin: 3px 0 0 !important;
    font-family: var(--na-font) !important;
  }

  /* ── Imagem dos produtos: 70px ───────────────────────────────────────── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-imagem {
    width: 70px !important;
    height: 70px !important;
    min-width: 70px !important;
    object-fit: contain !important;
    border-radius: 6px !important;
  }

  /* ── Barra inferior: mais espaço abaixo do botão ─────────────────────── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .barra-selecao-carrinho {
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .btn-comprar-selecionados {
    margin-bottom: 4px !important;
  }

  /* Container: ajuste padding-bottom para barra mais alta */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .carrinho-container {
    padding-bottom: calc(195px + env(safe-area-inset-bottom, 0px)) !important;
  }

}
/* ══ fim MOBILE CARRINHO REFINAMENTO IMAGEM + PREÇO + BARRA ══════════════════ */


/* ══ MOBILE CARRINHO — ITENS MAIORES ════════════════════════════════════════
   Aumenta altura, imagem, espaçamento e botões dos itens do carrinho.
   APENAS @media (max-width: 767px) — desktop intocado.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* Item: mais alto, mais respiro */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho {
    min-height: 110px !important;
    padding: 16px 0 !important;
    gap: 14px !important;
    align-items: center !important;
  }

  /* Esquerda (imagem + info): gap maior */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-esquerda {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
  }

  /* Imagem: 74px */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-imagem {
    width: 74px !important;
    height: 74px !important;
    min-width: 74px !important;
    object-fit: contain !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
  }

  /* Info (nome + preço): mais espaçada */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    min-width: 0 !important;
  }

  /* Nome do produto */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-info h3 {
    font-size: 14px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    white-space: normal !important;
  }

  /* Controles de quantidade: botões maiores */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-qtd {
    gap: 10px !important;
    margin-top: 4px !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .btn-qtd-carrinho {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    font-size: 16px !important;
    border-radius: 8px !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-valor-qtd {
    font-size: 15px !important;
    min-width: 22px !important;
  }

}
/* ══ fim MOBILE CARRINHO ITENS MAIORES ═══════════════════════════════════════ */


/* ══ MOBILE CARRINHO — CORREÇÃO LAYOUT ITENS (fix ITENS MAIORES) ════════════
   Restaura display:contents em .item-carrinho-esquerda.
   Aumenta coluna da imagem para 72px. Layout grid-areas volta a funcionar.
   APENAS @media (max-width: 767px) — desktop intocado.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* Grid: 4 colunas — checkbox | imagem 72px | info (1fr) | lixeira */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho {
    grid-template-columns: 22px 72px minmax(0, 1fr) 40px !important;
    grid-template-areas:
      "check img info   remove"
      "check img qtd    remove" !important;
    min-height: 96px !important;
    padding: 12px 14px !important;
    gap: 5px 10px !important;
    align-items: center !important;
  }

  /* CRÍTICO: restaurar display:contents para que img/info entrem no grid */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-esquerda {
    display: contents !important;
  }

  /* Imagem: 72px, grid-area: img */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-imagem {
    grid-area: img !important;
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    object-fit: contain !important;
    border-radius: 8px !important;
    background: #f8fafc !important;
    border: 1px solid #f1f5f9 !important;
    padding: 4px !important;
    box-sizing: border-box !important;
    align-self: center !important;
    flex-shrink: unset !important;
  }

  /* Info: grid-area: info, flex coluna */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-info {
    grid-area: info !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    min-width: 0 !important;
    align-self: center !important;
    align-items: flex-start !important;
  }

  /* Nome: 2 linhas máximo, legível */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-info h3 {
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    color: #111827 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    width: 100% !important;
    margin: 0 !important;
  }

  /* Preço mobile: laranja, sem quebra */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-preco-mobile {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #f97316 !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    display: block !important;
    line-height: 1.2 !important;
    margin: 0 !important;
  }

  /* Quantidade: grid-area qtd */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-qtd {
    grid-area: qtd !important;
    grid-column: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    justify-self: start !important;
    align-self: center !important;
    margin-top: 0 !important;
  }

  /* Botões +/- */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .btn-qtd-carrinho {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    font-size: 15px !important;
    border-radius: 6px !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-valor-qtd {
    font-size: 14px !important;
    min-width: 22px !important;
    text-align: center !important;
  }

}
/* ══ fim MOBILE CARRINHO CORREÇÃO LAYOUT ITENS ═══════════════════════════════ */


/* ══ MOBILE CARRINHO — ITENS LEVEMENTE MAIORES (safe) ═══════════════════════
   Aumenta imagem, preço e botões sem alterar display:contents/grid-areas.
   APENAS @media (max-width: 767px) — desktop intocado.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* Grid: imagem cresce para 74px; tudo proporcional */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho {
    grid-template-columns: 22px 74px minmax(0, 1fr) 40px !important;
    grid-template-areas:
      "check img info   remove"
      "check img qtd    remove" !important;
    min-height: 104px !important;
    padding: 14px 14px !important;
    gap: 6px 10px !important;
  }

  /* display:contents mantido — crítico para o grid-areas funcionar */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-esquerda {
    display: contents !important;
  }

  /* Imagem: 74px */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-imagem {
    grid-area: img !important;
    width: 74px !important;
    height: 74px !important;
    min-width: 74px !important;
    object-fit: contain !important;
    align-self: center !important;
  }

  /* Nome: ligeiramente maior */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-info h3 {
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
  }

  /* Preço: destacado */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-preco-mobile {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #f97316 !important;
    white-space: nowrap !important;
    word-break: normal !important;
    line-height: 1.2 !important;
    display: block !important;
  }

  /* Botões +/-: 34px */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .btn-qtd-carrinho {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    font-size: 16px !important;
    border-radius: 7px !important;
  }

  /* Quantidade: gap confortável */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-qtd {
    gap: 10px !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-valor-qtd {
    font-size: 15px !important;
    min-width: 24px !important;
    font-weight: 700 !important;
  }

}
/* ══ fim MOBILE CARRINHO ITENS LEVEMENTE MAIORES ════════════════════════════ */


/* ══ MOBILE CARRINHO — ITENS MAIORES v2 ═════════════════════════════════════
   Aumenta imagem 80px, preço 18px, botões 36px, min-height 124px.
   display:contents mantido — grid-areas intocado.
   APENAS @media (max-width: 767px) — desktop intocado.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho {
    grid-template-columns: 22px 80px minmax(0, 1fr) 40px !important;
    grid-template-areas:
      "check img info   remove"
      "check img qtd    remove" !important;
    min-height: 124px !important;
    padding: 16px 14px !important;
    gap: 8px 10px !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-esquerda {
    display: contents !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-imagem {
    grid-area: img !important;
    width: 80px !important;
    height: 80px !important;
    min-width: 80px !important;
    object-fit: contain !important;
    align-self: center !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-info h3 {
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-preco-mobile {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #f97316 !important;
    white-space: nowrap !important;
    word-break: normal !important;
    line-height: 1.2 !important;
    display: block !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .btn-qtd-carrinho {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    font-size: 17px !important;
    border-radius: 8px !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-qtd {
    gap: 10px !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-valor-qtd {
    font-size: 16px !important;
    min-width: 26px !important;
    font-weight: 700 !important;
  }

}
/* ══ fim MOBILE CARRINHO ITENS MAIORES v2 ═══════════════════════════════════ */


/* ══ MOBILE CARRINHO — ITENS MAIORES v3 ═════════════════════════════════════
   Imagem 86px, min-height 138px, botões 38px. display:contents mantido.
   APENAS @media (max-width: 767px) — desktop intocado.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho {
    grid-template-columns: 22px 86px minmax(0, 1fr) 40px !important;
    grid-template-areas:
      "check img info   remove"
      "check img qtd    remove" !important;
    min-height: 138px !important;
    padding: 18px 14px !important;
    gap: 8px 12px !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-esquerda {
    display: contents !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-imagem {
    grid-area: img !important;
    width: 86px !important;
    height: 86px !important;
    min-width: 86px !important;
    object-fit: contain !important;
    align-self: center !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-info h3 {
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-preco-mobile {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #f97316 !important;
    white-space: nowrap !important;
    word-break: normal !important;
    line-height: 1.2 !important;
    display: block !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .btn-qtd-carrinho {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    font-size: 18px !important;
    border-radius: 8px !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-qtd {
    gap: 12px !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-valor-qtd {
    font-size: 16px !important;
    min-width: 26px !important;
    font-weight: 700 !important;
  }

}
/* ══ fim MOBILE CARRINHO ITENS MAIORES v3 ═══════════════════════════════════ */


/* ══ MOBILE CARRINHO — ITENS MAIORES v4 ═════════════════════════════════════
   Imagem 92px, min-height 156px, col-gap 14px. display:contents mantido.
   APENAS @media (max-width: 767px) — desktop intocado.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho {
    grid-template-columns: 22px 92px minmax(0, 1fr) 40px !important;
    grid-template-areas:
      "check img info   remove"
      "check img qtd    remove" !important;
    min-height: 156px !important;
    padding: 18px 14px !important;
    gap: 10px 14px !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-esquerda {
    display: contents !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-imagem {
    grid-area: img !important;
    width: 92px !important;
    height: 92px !important;
    min-width: 92px !important;
    object-fit: contain !important;
    align-self: center !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-info h3 {
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-preco-mobile {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #f97316 !important;
    white-space: nowrap !important;
    word-break: normal !important;
    line-height: 1.2 !important;
    display: block !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .btn-qtd-carrinho {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    font-size: 18px !important;
    border-radius: 8px !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-qtd {
    gap: 12px !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-valor-qtd {
    font-size: 16px !important;
    min-width: 28px !important;
    font-weight: 700 !important;
  }

}
/* ══ fim MOBILE CARRINHO ITENS MAIORES v4 ═══════════════════════════════════ */

/* ══ CARRINHO MOBILE: TELA INTEIRA + HEADER PRÓPRIO + SEM BOTTOM NAV ════════
   Desktop NÃO é afetado — tudo dentro de @media (max-width: 767px).
   ══════════════════════════════════════════════════════════════════════════ */

/* Garante que o header mobile seja invisível fora do mobile e quando inativo */
.carrinho-mobile-header { display: none; }

@media (max-width: 767px) {

  /* ── 1. Esconde a navegação inferior quando o carrinho está aberto ─────── */
  body.nexa-carrinho-ativa .caixa {
    display: none !important;
  }

  /* ── 2. Carrinho ocupa a viewport inteira (sobrepõe topo e bottom nav) ─── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa {
    position:   fixed !important;
    top:        0 !important;
    right:      0 !important;
    bottom:     0 !important;
    left:       0 !important;
    width:      100vw !important;
    height:     100dvh !important;
    min-height: 0 !important;
    margin:     0 !important;
    padding:    0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index:    50 !important;
    background: var(--na-bg) !important;
  }

  /* ── 3. Espaço para o header fixo de 56px dentro do container ──────────── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .carrinho-container {
    padding-top: 56px !important;
    box-sizing:  border-box !important;
  }

  /* ── 4. Esconde h1 original (substituído pelo header mobile) ───────────── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .titulo-carrinho {
    display: none !important;
  }

  /* ── 5. Header mobile — gradiente roxo-azul igual ao logo da Home ──────── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .carrinho-mobile-header {
    display:          flex !important;
    align-items:      center !important;
    justify-content:  center !important;
    position:         fixed !important;
    top:              0 !important;
    left:             0 !important;
    right:            0 !important;
    height:           56px !important;
    background-color: #7c3aed !important;
    background:       linear-gradient(135deg, #7c3aed 0%, #2563eb 100%) !important;
    border-bottom:    none !important;
    box-shadow:       none !important;
    z-index:          200 !important;
    padding:          0 16px !important;
    box-sizing:       border-box !important;
  }

  /* ── 6. Botão voltar — branco sobre o gradiente ─────────────────────────── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .carrinho-btn-voltar {
    position:                   absolute !important;
    left:                       4px !important;
    display:                    flex !important;
    align-items:                center !important;
    justify-content:            center !important;
    width:                      44px !important;
    height:                     44px !important;
    background:                 none !important;
    background-color:           transparent !important;
    border:                     none !important;
    box-shadow:                 none !important;
    cursor:                     pointer !important;
    color:                      #ffffff !important;
    fill:                       none !important;
    padding:                    0 !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  /* Seta SVG branca */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .carrinho-btn-voltar svg,
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .carrinho-btn-voltar svg polyline {
    color:  #ffffff !important;
    stroke: #ffffff !important;
  }

  /* ── 7. Título "Carrinho" branco centralizado ───────────────────────────── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .carrinho-header-titulo {
    font-size:       16px !important;
    font-weight:     700 !important;
    color:           #ffffff !important;
    letter-spacing:  0.01em !important;
    font-family:     var(--na-font) !important;
  }

}
/* ══ fim CARRINHO MOBILE TELA INTEIRA ═══════════════════════════════════════ */

/* ══ CARRINHO MOBILE: BARRA INFERIOR FIXADA NO BOTTOM ═══════════════════════
   Corrige bottom: 64px → 0 (bottom nav já oculto quando carrinho está aberto).
   Garante padding-bottom suficiente para o conteúdo não ficar sob a barra.
   APENAS @media (max-width: 767px) — desktop intocado.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── Barra: colada no fundo da tela, sem gap do bottom nav ─────────────── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .barra-selecao-carrinho {
    position:      fixed !important;
    left:          0 !important;
    right:         0 !important;
    bottom:        0 !important;
    border-radius: 0 !important;
    border-top:    1px solid #E5E7EB !important;
    box-shadow:    0 -4px 18px rgba(15, 23, 42, 0.08) !important;
    background:    #ffffff !important;
    z-index:       100 !important;
  }

  /* ── Container: padding-bottom = altura real da barra + safe area ────────── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .carrinho-container {
    padding-bottom: calc(210px + env(safe-area-inset-bottom, 0px)) !important;
  }

}
/* ══ fim CARRINHO MOBILE BARRA INFERIOR FIXADA NO BOTTOM ════════════════════ */

/* ══ CARRINHO MOBILE — REFINAMENTO VISUAL FINAL ══════════════════════════════
   Itens limpos estilo app marketplace. APENAS @media (max-width: 767px).
   Desktop intocado.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── 1. Fundo geral da página: cinza azulado suave ───────────────────────── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa {
    background: #F4F7FB !important;
  }

  /* ── 2. Item: branco, sem card, separado por linha 1px ──────────────────── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho {
    background:    #ffffff !important;
    border:        none !important;
    border-bottom: 1px solid #E5E7EB !important;
    border-radius: 0 !important;
    box-shadow:    none !important;
  }

  /* Item selecionado: azul muito claro, linha discreta */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho.selecionado {
    background:    #F0F7FF !important;
    border-bottom: 1px solid #DBEAFE !important;
    border-radius: 0 !important;
    box-shadow:    none !important;
    border-top:    none !important;
    border-left:   none !important;
    border-right:  none !important;
  }

  /* ── 3. Imagem: 90px, fundo suave, centralizada ─────────────────────────── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-imagem {
    width:         90px !important;
    height:        90px !important;
    min-width:     90px !important;
    object-fit:    contain !important;
    border-radius: 4px !important;
    background:    #F8FBFF !important;
    align-self:    center !important;
  }

  /* ── 4. Nome: 16px / 800 / quase preto ──────────────────────────────────── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-info h3 {
    font-size:   16px !important;
    font-weight: 800 !important;
    color:       #0F172A !important;
    line-height: 1.3 !important;
  }

  /* ── 5. Botões de quantidade: 38px, radius 6px, borda suave ─────────────── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .btn-qtd-carrinho {
    width:         38px !important;
    height:        38px !important;
    min-width:     38px !important;
    min-height:    38px !important;
    border-radius: 6px !important;
    border:        1px solid #D1D5DB !important;
    background:    #ffffff !important;
    box-shadow:    none !important;
    color:         #0F172A !important;
    font-weight:   700 !important;
  }

  /* ── 6. Lixeira: cinza discreta → vermelho ao tocar (já configurado antes) ─ */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .btn-remover-carrinho::before {
    background-color: #94A3B8 !important;
  }
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .btn-remover-carrinho:hover::before,
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .btn-remover-carrinho:active::before {
    background-color: #EF4444 !important;
  }

  /* ── 7. Barra inferior: fundo branco limpo ───────────────────────────────── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .barra-selecao-carrinho {
    background: #ffffff !important;
  }

  /* ── 8. Botão Comprar: 44px, centralizado, azul profissional ────────────── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .btn-comprar-selecionados {
    height:          44px !important;
    min-height:      44px !important;
    max-width:       240px !important;
    width:           100% !important;
    border-radius:   6px !important;
    background:      #2563EB !important;
    color:           #ffffff !important;
    font-size:       15px !important;
    font-weight:     700 !important;
    border:          none !important;
    box-shadow:      none !important;
    margin:          12px auto 0 !important;
    align-self:      center !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
  }

}
/* ══ fim CARRINHO MOBILE REFINAMENTO VISUAL FINAL ═══════════════════════════ */

/* ══ BADGE NOTIFICAÇÃO NAVEGAÇÃO INFERIOR MOBILE ════════════════════════════
   Badge vermelha com número real, posicionada no canto superior direito
   do ícone do carrinho. right: calc(50% - 20px) centraliza sobre o ícone
   (22px) em qualquer largura de tela (360/390/430px).
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* Âncora: cada tab precisa de position:relative e overflow:visible */
  .caixa .menu-btn {
    position: relative !important;
    overflow: visible !important;
  }

  /* Badge: pill vermelho com número no canto superior direito do ícone */
  .caixa .sidebar-badge {
    position:      absolute !important;
    top:           4px !important;
    right:         calc(50% - 20px) !important; /* alinha borda direita na borda direita do ícone */
    min-width:     18px !important;
    height:        18px !important;
    padding:       0 5px !important;
    border-radius: 999px !important;
    background:    #EF4444 !important;
    color:         #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size:     10px !important;
    font-weight:   700 !important;
    line-height:   1 !important;
    display:       flex !important;
    align-items:   center !important;
    justify-content: center !important;
    border:        2px solid #ffffff !important;
    box-shadow:    0 1px 4px rgba(0, 0, 0, 0.18) !important;
    z-index:       10 !important;
    box-sizing:    border-box !important;
    margin:        0 !important;
    flex:          none !important;
    white-space:   nowrap !important;
  }

  /* Respeita display:none do JS quando carrinho está vazio */
  .caixa .sidebar-badge[style*="display: none"],
  .caixa .sidebar-badge[style*="display:none"] {
    display: none !important;
  }

}
/* ══ fim BADGE NOTIFICAÇÃO NAVEGAÇÃO INFERIOR MOBILE ════════════════════════ */

/* ══ CARRINHO MOBILE — BARRA INFERIOR COMPACTA ═══════════════════════════════
   Quando "Você também pode gostar" entra na viewport, a barra vira uma
   linha única: Total + valor + botão Comprar.
   JS adiciona/remove .cart-summary-compact via IntersectionObserver.
   APENAS @media (max-width: 767px) — desktop intocado.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* Transição suave entre estado normal e compacto */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .barra-selecao-carrinho {
    transition: padding 0.22s ease !important;
  }

  /* ── Estado compacto: linha única ────────────────────────────────────── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .barra-selecao-carrinho.cart-summary-compact {
    flex-direction:  row !important;
    align-items:     center !important;
    padding:         10px 16px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    min-height:      60px !important;
    height:          auto !important;
    gap:             12px !important;
  }

  /* Ocultar checkbox "Selecionar todos" no modo compacto */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .barra-selecao-carrinho.cart-summary-compact .checkbox-selecionar-todos {
    display: none !important;
  }

  /* .barra-selecao-acoes: linha única (resumo à esquerda, botão à direita) */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .barra-selecao-carrinho.cart-summary-compact .barra-selecao-acoes {
    flex-direction:  row !important;
    align-items:     center !important;
    justify-content: space-between !important;
    gap:             12px !important;
    flex:            1 !important;
    width:           100% !important;
  }

  /* #resumo-selecao-carrinho: só mostra linha do Total */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .barra-selecao-carrinho.cart-summary-compact #resumo-selecao-carrinho {
    flex-direction: column !important;
    gap:            0 !important;
    flex:           1 !important;
    min-width:      0 !important;
  }

  /* Ocultar linhas Produtos e Frete */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .barra-selecao-carrinho.cart-summary-compact #resumo-selecao-carrinho .crsl:not(.crsl-total) {
    display: none !important;
  }

  /* Linha Total: destaque máximo, margem zero */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .barra-selecao-carrinho.cart-summary-compact #resumo-selecao-carrinho .crsl-total {
    font-size:   15px !important;
    font-weight: 800 !important;
    color:       #0F172A !important;
    margin-top:  0 !important;
    width:       100% !important;
    display:     flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap:         8px !important;
  }

  /* Botão Comprar: tamanho reduzido, sem margem extra */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .barra-selecao-carrinho.cart-summary-compact .btn-comprar-selecionados {
    width:       auto !important;
    min-width:   104px !important;
    max-width:   none !important;
    height:      42px !important;
    min-height:  42px !important;
    margin:      0 !important;
    padding:     0 18px !important;
    flex-shrink: 0 !important;
    align-self:  auto !important;
    font-size:   14px !important;
    font-weight: 700 !important;
    background:  #2563EB !important;
    color:       #ffffff !important;
    border:      none !important;
    border-radius: 6px !important;
  }

  /* padding-bottom menor no modo compacto (barra ~60px) */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .carrinho-container.cart-container-compact {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
  }

}
/* ══ fim CARRINHO MOBILE BARRA INFERIOR COMPACTA ════════════════════════════ */

/* ══ CARRINHO MOBILE — CARDS "VOCÊ TAMBÉM PODE GOSTAR" ══════════════════════
   Espelha o estilo dos cards da Home (nexa-mobile-product-cards.css).
   Corrige: estrelas ocultas (global display:none), imagem sem altura fixa,
   nome/marca desalinhados, footer sem posição absoluta.
   APENAS @media (max-width: 767px) — desktop intocado.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── Grade: 2 colunas, mesma altura fixa da Home ────────────────────── */
  #pagina-carrinho .recomendados #grade-recomendados {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: 326px !important;
    gap: 10px !important;
    padding: 12px 12px 26px !important;
    align-items: stretch !important;
  }

  /* ── Título da seção ─────────────────────────────────────────────────── */
  #pagina-carrinho .recomendados h2 {
    font-size:   16px !important;
    font-weight: 800 !important;
    padding:     8px 12px 4px !important;
    margin:      0 !important;
  }

  /* ── Card: mesmas proporções da Home ────────────────────────────────── */
  #pagina-carrinho .recomendados .produto-card {
    min-width:      0 !important;
    width:          100% !important;
    height:         100% !important;
    min-height:     0 !important;
    max-height:     326px !important;
    padding:        0 !important;
    border-radius:  22px !important;
    border:         1px solid rgba(15, 23, 42, 0.06) !important;
    background:     #ffffff !important;
    background-image: none !important;
    box-shadow:     0 10px 28px rgba(15, 23, 42, 0.08) !important;
    color:          #111827 !important;
    overflow:       hidden !important;
    position:       relative !important;
    display:        flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    box-sizing:     border-box !important;
  }

  #pagina-carrinho .recomendados .produto-card:active {
    transform:  scale(0.985) !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.10) !important;
  }

  /* Ocultar badges de selos e botão favoritar */
  #pagina-carrinho .recomendados .produto-card-badges,
  #pagina-carrinho .recomendados .produto-btn-fav {
    display: none !important;
  }

  /* Badge de desconto: canto superior esquerdo */
  #pagina-carrinho .recomendados .produto-badge-desconto {
    position:   absolute !important;
    top:        10px !important;
    left:       10px !important;
    z-index:    4 !important;
    display:    inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 24px !important;
    padding:    0 8px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #7c3aed, #4f46e5) !important;
    color:      #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size:  11px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
  }

  /* ── Área da imagem: altura fixa idêntica à Home ─────────────────────── */
  #pagina-carrinho .recomendados .produto-img-wrap {
    width:       100% !important;
    height:      150px !important;
    min-height:  150px !important;
    max-height:  150px !important;
    flex-basis:  150px !important;
    flex-shrink: 0 !important;
    margin:      0 !important;
    padding:     0 !important;
    border-radius: 0 !important;
    background:  #ffffff !important;
    border:      0 !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
    box-shadow:  none !important;
    display:     flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow:    hidden !important;
  }

  #pagina-carrinho .recomendados .produto-img-halo {
    display: none !important;
  }

  #pagina-carrinho .recomendados .imagem-produto {
    width:           100% !important;
    height:          100% !important;
    max-height:      none !important;
    padding:         0 !important;
    object-fit:      contain !important;
    object-position: center !important;
    background:      transparent !important;
    border-radius:   0 !important;
  }

  /* ── Body: flex coluna com espaço para footer absoluto ──────────────── */
  #pagina-carrinho .recomendados .produto-card-body {
    flex:        1 1 auto !important;
    min-height:  0 !important;
    padding:     8px 10px 52px !important;
    display:     flex !important;
    flex-direction: column !important;
    height:      auto !important;
    overflow:    hidden !important;
  }

  /* Best seller row */
  #pagina-carrinho .recomendados .produto-best-row {
    display:      inline-flex !important;
    align-items:  center !important;
    gap:          5px !important;
    width:        fit-content !important;
    max-width:    100% !important;
    height:       22px !important;
    min-height:   22px !important;
    margin:       0 0 6px !important;
    padding:      0 8px !important;
    border-radius: 999px !important;
    background:   rgba(124, 58, 237, 0.10) !important;
    color:        #5b21b6 !important;
    -webkit-text-fill-color: #5b21b6 !important;
    font-size:    10px !important;
    line-height:  1 !important;
    font-weight:  950 !important;
    white-space:  nowrap !important;
  }

  /* ── Nome: 2 linhas, altura fixa, sempre na mesma posição ───────────── */
  #pagina-carrinho .recomendados .nome-produto {
    display:      -webkit-box !important;
    min-height:   30px !important;
    max-height:   30px !important;
    margin:       0 0 4px !important;
    color:        #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    font-size:    13px !important;
    line-height:  1.15 !important;
    font-weight:  950 !important;
    letter-spacing: 0 !important;
    overflow:     hidden !important;
    overflow-wrap: anywhere !important;
    word-break:   normal !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
  }

  /* ── Marca: 1 linha, cinza, altura fixa ─────────────────────────────── */
  #pagina-carrinho .recomendados .marca-produto {
    display:      -webkit-box !important;
    visibility:   visible !important;
    width:        auto !important;
    height:       auto !important;
    min-height:   14px !important;
    max-height:   14px !important;
    margin:       0 0 6px !important;
    padding:      0 !important;
    color:        #6b7280 !important;
    -webkit-text-fill-color: #6b7280 !important;
    font-size:    11px !important;
    line-height:  1.1 !important;
    font-weight:  650 !important;
    overflow:     hidden !important;
    overflow-wrap: anywhere !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
  }

  #pagina-carrinho .recomendados .marca-produto:empty {
    display: none !important;
  }

  /* ── Estrelas: visíveis quando produto tem avaliação ────────────────── */
  #pagina-carrinho .recomendados .produto-rating {
    display:     flex !important;
    align-items: center !important;
    flex-wrap:   nowrap !important;
    gap:         4px !important;
    height:      18px !important;
    min-height:  18px !important;
    max-height:  18px !important;
    margin:      0 0 5px !important;
    color:       #64748b !important;
    -webkit-text-fill-color: #64748b !important;
    font-size:   11px !important;
    line-height: 1 !important;
    font-weight: 750 !important;
    overflow:    hidden !important;
    white-space: nowrap !important;
  }

  /* Sem avaliação: mantém hidden */
  #pagina-carrinho .recomendados .produto-rating[hidden],
  #pagina-carrinho .recomendados .produto-rating-vendidos[hidden] {
    display: none !important;
  }

  /* Estrelas: amarelo */
  #pagina-carrinho .recomendados .produto-rating-stars {
    color:          #f59e0b !important;
    -webkit-text-fill-color: #f59e0b !important;
    letter-spacing: 0 !important;
    white-space:    nowrap !important;
    flex:           0 0 auto !important;
  }

  #pagina-carrinho .recomendados .produto-rating-nota,
  #pagina-carrinho .recomendados .produto-rating-vendidos {
    min-width:     0 !important;
    overflow:      hidden !important;
    text-overflow: ellipsis !important;
    white-space:   nowrap !important;
  }

  /* ── Trust chips ─────────────────────────────────────────────────────── */
  #pagina-carrinho .recomendados .produto-trust-row {
    display:     flex !important;
    align-items: center !important;
    flex-wrap:   nowrap !important;
    gap:         4px !important;
    height:      22px !important;
    min-height:  22px !important;
    max-height:  22px !important;
    margin:      0 0 6px !important;
    overflow:    hidden !important;
  }

  #pagina-carrinho .recomendados .produto-trust-chip {
    display:       inline-flex !important;
    align-items:   center !important;
    height:        20px !important;
    min-height:    20px !important;
    max-width:     100% !important;
    padding:       0 6px !important;
    border-radius: 999px !important;
    background:    rgba(124, 58, 237, 0.08) !important;
    color:         #5b21b6 !important;
    -webkit-text-fill-color: #5b21b6 !important;
    font-size:     9px !important;
    line-height:   1 !important;
    font-weight:   850 !important;
    white-space:   nowrap !important;
    flex:          0 1 auto !important;
    overflow:      hidden !important;
    text-overflow: ellipsis !important;
  }

  #pagina-carrinho .recomendados .produto-trust-chip:nth-child(n+3) {
    display: none !important;
  }

  /* ── Footer: absoluto na base do card ───────────────────────────────── */
  #pagina-carrinho .recomendados .produto-card-footer {
    display:         flex !important;
    align-items:     flex-end !important;
    justify-content: space-between !important;
    gap:             8px !important;
    position:        absolute !important;
    left:            10px !important;
    right:           10px !important;
    bottom:          10px !important;
    margin-top:      0 !important;
    height:          46px !important;
    min-height:      46px !important;
    flex:            0 0 46px !important;
  }

  #pagina-carrinho .recomendados .produto-preco-wrap {
    min-width:       0 !important;
    display:         flex !important;
    flex-direction:  column !important;
    justify-content: flex-end !important;
    gap:             3px !important;
    min-height:      46px !important;
    overflow:        hidden !important;
  }

  /* Preço antigo tachado */
  #pagina-carrinho .recomendados .produto-preco-antigo {
    display:         block !important;
    color:           #94a3b8 !important;
    -webkit-text-fill-color: #94a3b8 !important;
    font-size:       11px !important;
    line-height:     1 !important;
    font-weight:     750 !important;
    text-decoration: line-through !important;
    white-space:     nowrap !important;
  }

  /* Preço atual: laranja grande */
  #pagina-carrinho .recomendados .preco-produto {
    display:        block !important;
    color:          #F97316 !important;
    -webkit-text-fill-color: #F97316 !important;
    font-size:      18px !important;
    line-height:    1 !important;
    font-weight:    950 !important;
    letter-spacing: 0 !important;
    white-space:    nowrap !important;
  }

  /* Botão carrinho: 44px, gradiente roxo-azul */
  #pagina-carrinho .recomendados .produto-btn-cart {
    width:       44px !important;
    height:      44px !important;
    min-width:   44px !important;
    min-height:  44px !important;
    border:      0 !important;
    border-radius: 6px !important;
    background:  linear-gradient(135deg, #7c3aed, #2563eb) !important;
    color:       #ffffff !important;
    box-shadow:  none !important;
    display:     inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex:        0 0 auto !important;
    padding:     0 !important;
  }

  #pagina-carrinho .recomendados .produto-btn-cart svg {
    width:        22px !important;
    height:       22px !important;
    stroke:       currentColor !important;
    stroke-width: 2.2 !important;
  }

  #pagina-carrinho .recomendados .produto-btn-cart.adicionado {
    background: #22c55e !important;
  }

  /* ── Tela muito pequena (< 390px): grade levemente menor ────────────── */
  @media (max-width: 389px) {
    #pagina-carrinho .recomendados #grade-recomendados {
      grid-auto-rows: 286px !important;
    }
    #pagina-carrinho .recomendados .produto-card {
      max-height: 286px !important;
    }
    #pagina-carrinho .recomendados .produto-img-wrap {
      height:     120px !important;
      min-height: 120px !important;
      max-height: 120px !important;
      flex-basis: 120px !important;
    }
  }

}
/* ══ fim CARRINHO MOBILE CARDS VOCÊ TAMBÉM PODE GOSTAR ══════════════════════ */


/* ══ MOBILE CARRINHO — CARDS RECOMENDADOS: CORREÇÃO ESTRELAS + SELOS ════════
   1) Stars: overrides [hidden] suppression — product-rating sempre flex.
   2) Selos: escondidos em telas <390px para evitar overflow no body.
   3) best-row vazio: não ocupa espaço.
   4) Body 360px: menos padding para acomodar todos os elementos.
   APENAS @media (max-width: 767px) — desktop intocado.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* Forçar estrelas visíveis mesmo quando [hidden] está no elemento.
     Especificidade mais alta que a regra de supressão existente.
     Para produtos sem avaliação, o container fica vazio (18px de altura). */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .recomendados .produto-rating,
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .recomendados .produto-rating[hidden] {
    display:     flex !important;
    align-items: center !important;
    flex-wrap:   nowrap !important;
    gap:         4px !important;
    height:      18px !important;
    min-height:  18px !important;
    max-height:  18px !important;
    margin:      0 0 4px !important;
    overflow:    hidden !important;
    white-space: nowrap !important;
    color:       #64748b !important;
    -webkit-text-fill-color: #64748b !important;
    font-size:   11px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
  }

  /* Estrelas: amarelo */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .recomendados .produto-rating-stars {
    color:          #f59e0b !important;
    -webkit-text-fill-color: #f59e0b !important;
    letter-spacing: 0 !important;
    white-space:    nowrap !important;
    flex:           0 0 auto !important;
    display:        inline !important;
  }

  /* best-row vazio: não ocupa espaço */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .recomendados .produto-best-row:empty {
    display:    none !important;
    margin:     0 !important;
    height:     0 !important;
    min-height: 0 !important;
  }

  /* Trust-row: menor margin para economizar espaço */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .recomendados .produto-trust-row {
    margin: 0 0 4px !important;
  }

  /* Trust-chip: fonte menor para caber em 1 linha */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .recomendados .produto-trust-chip {
    font-size:  8px !important;
    padding:    0 5px !important;
    height:     18px !important;
    min-height: 18px !important;
  }

}

/* Telas ≤ 389px: esconder selos para evitar overflow — card tem menos altura */
@media (max-width: 389px) {

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .recomendados .produto-trust-row {
    display: none !important;
  }

  /* Body: reduzir padding-bottom para dar mais espaço ao conteúdo */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .recomendados .produto-card-body {
    padding-bottom: 52px !important;
  }

  /* Margins menores para compactar conteúdo */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .recomendados .nome-produto {
    margin: 0 0 3px !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .recomendados .marca-produto {
    margin: 0 0 4px !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .recomendados .produto-rating {
    margin: 0 0 3px !important;
  }

}
/* ══ fim MOBILE CARRINHO CARDS RECOMENDADOS CORREÇÃO ════════════════════════ */

/* ══ MOBILE CARRINHO — RECOMENDADOS: AJUSTE FINAL HIERARQUIA v2 ════════════
   Corrige: nome cortando, marca grudada, selos apertados, hierarquia visual.
   Alta especificidade para sobrepor todos os blocos anteriores.
   APENAS @media (max-width: 767px). Desktop intocado.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── Card body ──────────────────────────────────────────────────────── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .recomendados .produto-card-body {
    display:        flex !important;
    flex-direction: column !important;
    gap:            0 !important;
    overflow:       hidden !important;
    padding:        10px 10px 54px !important;
  }

  /* ── Nome: 2 linhas via -webkit-line-clamp; min-height garante
     altura consistente mesmo em nomes de 1 linha ────────────────────── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .recomendados .nome-produto {
    display:            -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow:           hidden !important;
    overflow-wrap:      break-word !important;
    word-break:         normal !important;
    white-space:        normal !important;
    min-height:         30px !important;
    max-height:         none !important;
    margin:             0 0 4px !important;
    padding:            0 !important;
    color:              #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    font-size:          13px !important;
    line-height:        1.15 !important;
    font-weight:        800 !important;
    letter-spacing:     0 !important;
  }

  /* ── Marca: 1 linha truncada, cinza, espaçamento visual do nome ─────── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .recomendados .marca-produto {
    display:            block !important;
    overflow:           hidden !important;
    text-overflow:      ellipsis !important;
    white-space:        nowrap !important;
    visibility:         visible !important;
    min-height:         14px !important;
    max-height:         14px !important;
    height:             14px !important;
    margin:             0 0 5px !important;
    padding:            0 !important;
    color:              #6b7280 !important;
    -webkit-text-fill-color: #6b7280 !important;
    font-size:          11px !important;
    line-height:        1.1 !important;
    font-weight:        600 !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .recomendados .marca-produto:empty {
    display: none !important;
  }

  /* ── Estrelas: forçadas visíveis (com ou sem atributo [hidden]) ─────── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .recomendados .produto-rating,
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .recomendados .produto-rating[hidden] {
    display:     flex !important;
    align-items: center !important;
    flex-wrap:   nowrap !important;
    gap:         4px !important;
    height:      18px !important;
    min-height:  18px !important;
    max-height:  18px !important;
    margin:      0 0 5px !important;
    overflow:    hidden !important;
    white-space: nowrap !important;
    color:       #64748b !important;
    -webkit-text-fill-color: #64748b !important;
    font-size:   11px !important;
    line-height: 1 !important;
    font-weight: 750 !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .recomendados .produto-rating-stars {
    color:          #f59e0b !important;
    -webkit-text-fill-color: #f59e0b !important;
    letter-spacing: 0 !important;
    white-space:    nowrap !important;
    flex:           0 0 auto !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .recomendados .produto-rating-nota,
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .recomendados .produto-rating-vendidos {
    min-width:     0 !important;
    overflow:      hidden !important;
    text-overflow: ellipsis !important;
    white-space:   nowrap !important;
  }

  /* ── Selos: cada chip ocupa metade exata da linha com ellipsis ──────── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .recomendados .produto-trust-row {
    display:     flex !important;
    align-items: center !important;
    flex-wrap:   nowrap !important;
    gap:         4px !important;
    height:      20px !important;
    min-height:  20px !important;
    max-height:  20px !important;
    margin:      0 !important;
    overflow:    hidden !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .recomendados .produto-trust-chip {
    display:         inline-flex !important;
    align-items:     center !important;
    justify-content: center !important;
    flex:            1 1 0 !important;
    min-width:       0 !important;
    max-width:       calc(50% - 2px) !important;
    height:          18px !important;
    min-height:      18px !important;
    padding:         0 6px !important;
    border-radius:   999px !important;
    background:      rgba(124, 58, 237, 0.08) !important;
    color:           #5b21b6 !important;
    -webkit-text-fill-color: #5b21b6 !important;
    font-size:       8px !important;
    line-height:     1 !important;
    font-weight:     850 !important;
    white-space:     nowrap !important;
    overflow:        hidden !important;
    text-overflow:   ellipsis !important;
  }

}

/* Telas ≤ 389px: esconder selos — card menor não comporta todos os elementos */
@media (max-width: 389px) {
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .recomendados .produto-trust-row {
    display: none !important;
  }
}
/* ══ fim MOBILE CARRINHO RECOMENDADOS AJUSTE FINAL v2 ════════════════════════ */

/* ══ MOBILE CARRINHO — RECOMENDADOS: REMOVER SELOS ════════════════════════
   Remove "Compra segura" / "Entrega garantida" dos cards no carrinho mobile.
   Redistribui espaço entre estrelas e o footer de preço/botão.
   APENAS @media (max-width: 767px). Desktop intocado.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* Ocultar selos completamente nesta seção */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .recomendados .produto-trust-row {
    display: none !important;
  }

  /* Estrelas: margem-bottom maior para preencher o espaço dos selos removidos */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .recomendados .produto-rating,
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .recomendados .produto-rating[hidden] {
    margin: 0 0 10px !important;
  }

}
/* ══ fim MOBILE CARRINHO RECOMENDADOS REMOVER SELOS ═════════════════════════ */

/* ══ MOBILE CARRINHO — RECOMENDADOS: LAYOUT DEFINITIVO ════════════════════
   Usa #grade-recomendados (ID, especificidade 2-3-1) para sobrepor o bloco
   antigo de mesma especificidade. Posicionado por último = ganha na cascata.
   Corrige: card alto demais para o conteúdo, gap:2px colando nome/marca,
   margin:0 em tudo, imagem cobrindo (cover) vs. conter o produto.
   APENAS @media (max-width: 767px). Desktop intocado.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── Grid: cards mais altos para acomodar nome+marca+estrelas+footer ── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa #grade-recomendados {
    grid-auto-rows: 310px !important;
    gap:            10px !important;
    padding:        10px 10px 24px !important;
  }

  /* ── Card ────────────────────────────────────────────────────────────── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa #grade-recomendados .produto-card {
    height:     310px !important;
    min-height: 310px !important;
    max-height: 310px !important;
    border-radius: 16px !important;
    border:     1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.07) !important;
  }

  /* ── Imagem: 150px, object-fit contain para ver produto inteiro ─────── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa #grade-recomendados .produto-img-wrap {
    height:     150px !important;
    min-height: 150px !important;
    max-height: 150px !important;
    flex:       0 0 150px !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa #grade-recomendados .imagem-produto {
    object-fit: contain !important;
  }

  /* ── Corpo: gap 0 — controle de espaço via margin em cada elemento ─── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa #grade-recomendados .produto-card-body {
    gap:     0 !important;
    padding: 10px 10px 8px !important;
    overflow: hidden !important;
  }

  /* ── Best-row (Mais vendido): ocultar para não consumir espaço extra ── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa #grade-recomendados .produto-best-row {
    display: none !important;
  }

  /* ── Nome: 2 linhas, min-height reserva espaço para cards de 1 linha ── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa #grade-recomendados .nome-produto {
    display:            -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow:           hidden !important;
    overflow-wrap:      break-word !important;
    word-break:         normal !important;
    white-space:        normal !important;
    font-size:          13px !important;
    font-weight:        700 !important;
    line-height:        1.25 !important;
    color:              #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    min-height:         33px !important;
    max-height:         33px !important;
    letter-spacing:     0 !important;
    margin:             0 0 5px !important;
    padding:            0 !important;
  }

  /* ── Marca: 1 linha, cinza suave, espaçamento visível abaixo do nome ── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa #grade-recomendados .marca-produto {
    display:       block !important;
    overflow:      hidden !important;
    text-overflow: ellipsis !important;
    white-space:   nowrap !important;
    visibility:    visible !important;
    font-size:     11px !important;
    font-weight:   600 !important;
    line-height:   1.2 !important;
    color:         #6b7280 !important;
    -webkit-text-fill-color: #6b7280 !important;
    height:        14px !important;
    min-height:    14px !important;
    max-height:    14px !important;
    margin:        0 0 6px !important;
    padding:       0 !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa #grade-recomendados .marca-produto:empty {
    display:    none !important;
    height:     0 !important;
    min-height: 0 !important;
    margin:     0 !important;
  }

  /* ── Estrelas: visíveis com ou sem [hidden], abaixo da marca ────────── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa #grade-recomendados .produto-rating,
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa #grade-recomendados .produto-rating[hidden] {
    display:     flex !important;
    align-items: center !important;
    flex-wrap:   nowrap !important;
    gap:         4px !important;
    height:      18px !important;
    min-height:  18px !important;
    max-height:  18px !important;
    margin:      0 !important;
    overflow:    hidden !important;
    white-space: nowrap !important;
    font-size:   11px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    color:       #64748b !important;
    -webkit-text-fill-color: #64748b !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa #grade-recomendados .produto-rating-stars {
    color:          #f59e0b !important;
    -webkit-text-fill-color: #f59e0b !important;
    letter-spacing: 0 !important;
    flex:           0 0 auto !important;
    white-space:    nowrap !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa #grade-recomendados .produto-rating-nota,
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa #grade-recomendados .produto-rating-vendidos {
    min-width:     0 !important;
    overflow:      hidden !important;
    text-overflow: ellipsis !important;
    white-space:   nowrap !important;
    font-size:     10px !important;
    color:         #64748b !important;
    -webkit-text-fill-color: #64748b !important;
  }

  /* ── Selos: ocultos definitivamente ────────────────────────────────── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa #grade-recomendados .produto-trust-row {
    display: none !important;
  }

}
/* ══ fim MOBILE CARRINHO RECOMENDADOS LAYOUT DEFINITIVO ═════════════════════ */

/* ══ MOBILE CARRINHO — FAIXA PROGRESSO FRETE GRÁTIS ════════════════════════
   Exibida apenas no mobile (display controlado por JS).
   Posição: abaixo da lista de produtos, acima de "Você também pode gostar".
   APENAS @media (max-width: 767px). Desktop intocado.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .frete-gratis-progresso {
    background:    #ffffff !important;
    border-radius: 14px !important;
    border:        1px solid rgba(37, 99, 235, 0.15) !important;
    box-shadow:    0 2px 12px rgba(37, 99, 235, 0.07) !important;
    padding:       16px !important;
    margin:        8px 12px 8px !important;
    box-sizing:    border-box !important;
  }

  /* Título principal */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .fgp-titulo {
    display:     block !important;
    font-size:   13px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color:       #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    margin:      0 0 10px !important;
    padding:     0 !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .fgp-titulo strong {
    color:       #2563eb !important;
    -webkit-text-fill-color: #2563eb !important;
    font-weight: 800 !important;
  }

  /* Linha da barra + meta */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .fgp-barra-row {
    display:     flex !important;
    align-items: center !important;
    gap:         10px !important;
    margin:      0 0 8px !important;
  }

  /* Trilha (fundo cinza) */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .fgp-barra-trilha {
    flex:          1 1 auto !important;
    height:        8px !important;
    min-height:    8px !important;
    border-radius: 999px !important;
    background:    #e5e7eb !important;
    position:      relative !important;
    overflow:      visible !important;
  }

  /* Preenchimento azul */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .fgp-barra-fill {
    height:        100% !important;
    border-radius: 999px !important;
    background:    linear-gradient(90deg, #2563eb 0%, #7c3aed 100%) !important;
    transition:    width 0.4s ease !important;
    min-width:     4px !important;
    max-width:     100% !important;
    position:      absolute !important;
    left:          0 !important;
    top:           0 !important;
  }

  /* Bolinha indicadora na ponta do progresso */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .fgp-barra-dot {
    width:         14px !important;
    height:        14px !important;
    min-width:     14px !important;
    min-height:    14px !important;
    border-radius: 50% !important;
    background:    #2563eb !important;
    border:        2px solid #ffffff !important;
    box-shadow:    0 1px 4px rgba(37, 99, 235, 0.40) !important;
    position:      absolute !important;
    top:           50% !important;
    transform:     translate(-50%, -50%) !important;
    transition:    left 0.4s ease !important;
    pointer-events: none !important;
  }

  /* Rótulo R$ 160 */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .fgp-meta {
    flex:        0 0 auto !important;
    font-size:   12px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    color:       #2563eb !important;
    -webkit-text-fill-color: #2563eb !important;
    white-space: nowrap !important;
  }

  /* Texto de status (faltam / parabéns) */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .fgp-status {
    display:     block !important;
    font-size:   12px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    color:       #374151 !important;
    -webkit-text-fill-color: #374151 !important;
    margin:      0 !important;
    padding:     0 !important;
  }

  /* Estado: atingiu o frete grátis */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .fgp-status.fgp-ganhou {
    color:       #16a34a !important;
    -webkit-text-fill-color: #16a34a !important;
    font-weight: 700 !important;
  }

  /* Barra 100%: trocar gradiente para verde */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .frete-gratis-progresso.fgp-completo .fgp-barra-fill {
    background: linear-gradient(90deg, #16a34a 0%, #22c55e 100%) !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .frete-gratis-progresso.fgp-completo .fgp-barra-dot {
    background: #16a34a !important;
    box-shadow: 0 1px 4px rgba(22, 163, 74, 0.40) !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .frete-gratis-progresso.fgp-completo .fgp-meta {
    color:       #16a34a !important;
    -webkit-text-fill-color: #16a34a !important;
  }

}
/* ══ fim MOBILE CARRINHO FAIXA PROGRESSO FRETE GRÁTIS ═══════════════════════ */

/* ══ MOBILE CARRINHO — ITENS MAIORES v5 ═════════════════════════════════════
   Imagem 110px, min-height 176px. CRÍTICO: display:contents mantido em
   .item-carrinho-esquerda. grid-template-columns sincronizado com imagem.
   APENAS @media (max-width: 767px) — desktop intocado.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── Card: grid com coluna de imagem = 110px ───────────────────────────── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho {
    grid-template-columns: 22px 110px minmax(0, 1fr) 40px !important;
    grid-template-areas:
      "check img info   remove"
      "check img qtd    remove" !important;
    min-height:  176px !important;
    padding:     20px 14px !important;
    gap:         10px 14px !important;
    align-items: center !important;
  }

  /* CRÍTICO: display:contents faz img e info participarem diretamente do grid */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-esquerda {
    display: contents !important;
  }

  /* ── Imagem 110×110px (deve coincidir com a coluna do grid acima) ───────── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-imagem {
    grid-area:     img !important;
    width:         110px !important;
    height:        110px !important;
    min-width:     110px !important;
    object-fit:    contain !important;
    align-self:    center !important;
    border-radius: 6px !important;
    background:    #F8FBFF !important;
    border:        1px solid #EEF2FF !important;
    padding:       4px !important;
    box-sizing:    border-box !important;
  }

  /* ── Info: nome + preço em coluna ─────────────────────────────────────── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-info {
    grid-area:      info !important;
    display:        flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap:            6px !important;
    min-width:      0 !important;
    align-self:     center !important;
  }

  /* ── Nome ──────────────────────────────────────────────────────────────── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-info h3 {
    font-size:   15px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color:       #0F172A !important;
    -webkit-text-fill-color: #0F172A !important;
    overflow-wrap: break-word !important;
    word-break:  normal !important;
    white-space: normal !important;
    margin:      0 !important;
  }

  /* ── Preço mobile ─────────────────────────────────────────────────────── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-preco-mobile {
    font-size:   17px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    color:       #F97316 !important;
    -webkit-text-fill-color: #F97316 !important;
    white-space: nowrap !important;
    display:     block !important;
    margin:      0 !important;
  }

  /* ── Controles de quantidade ──────────────────────────────────────────── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-qtd {
    grid-area:   qtd !important;
    display:     flex !important;
    align-items: center !important;
    gap:         10px !important;
    align-self:  center !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .btn-qtd-carrinho {
    width:       40px !important;
    height:      40px !important;
    min-width:   40px !important;
    max-width:   40px !important;
    min-height:  40px !important;
    max-height:  40px !important;
    font-size:   20px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
  }

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .item-carrinho-valor-qtd {
    font-size:   17px !important;
    font-weight: 700 !important;
    min-width:   28px !important;
    text-align:  center !important;
  }

  /* ── Lixeira: centralizada na coluna remove ───────────────────────────── */
  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .btn-remover-carrinho {
    grid-area:   remove !important;
    align-self:  center !important;
  }

}
/* ══ fim MOBILE CARRINHO ITENS MAIORES v5 ═══════════════════════════════════ */

/* ══ MOBILE CARRINHO — FAIXA FRETE GRÁTIS: SEM CARD, LARGURA TOTAL ═════════
   Remove borda/sombra/card; faz o bloco ocupar 100% da largura.
   APENAS @media (max-width: 767px). Desktop intocado.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .frete-gratis-progresso {
    width:         100% !important;
    max-width:     none !important;
    box-sizing:    border-box !important;
    border:        none !important;
    outline:       none !important;
    box-shadow:    none !important;
    border-radius: 0 !important;
    background:    transparent !important;
    margin:        0 !important;
    padding:       12px 14px !important;
  }

}
/* ══ fim MOBILE CARRINHO FAIXA FRETE GRÁTIS SEM CARD ════════════════════════ */

/* ══ MOBILE CARRINHO — FRETE GRÁTIS NO RESUMO ══════════════════════════════
   Estiliza "Grátis" em verde quando subtotal >= R$160.
   APENAS @media (max-width: 767px). Desktop intocado.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  body.nexa-carrinho-ativa #pagina-carrinho.pagina.ativa .crsl-frete-gratis {
    color:       #16a34a !important;
    -webkit-text-fill-color: #16a34a !important;
    font-weight: 700 !important;
  }

}
/* ══ fim MOBILE CARRINHO FRETE GRÁTIS RESUMO ════════════════════════════════ */

/* ══ MOBILE CHECKOUT — FRETE GRÁTIS NO FINALIZAR COMPRA ════════════════════
   "Grátis" em verde no resumo e total da tela Finalizar compra.
   APENAS @media (max-width: 767px). Desktop intocado.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  .checkout-frete-gratis {
    color:       #16a34a !important;
    -webkit-text-fill-color: #16a34a !important;
    font-weight: 700 !important;
  }

}
/* ══ fim MOBILE CHECKOUT FRETE GRÁTIS FINALIZAR COMPRA ══════════════════════ */

/* ══ MOBILE CARRINHO — RECOMENDADOS MAIS LARGOS ════════════════════════════
   APENAS @media (max-width: 767px). Desktop intocado.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  #pagina-carrinho .carrinho-container {
    padding-left:  6px !important;
    padding-right: 6px !important;
  }

  #pagina-carrinho .produtos {
    padding-left:  0 !important;
    padding-right: 0 !important;
    width:         100% !important;
    display:       grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap:           8px !important;
    box-sizing:    border-box !important;
  }

  #pagina-carrinho .produto-card {
    width:         100% !important;
    max-width:     none !important;
    border-radius: 6px !important;
    overflow:      hidden !important;
  }

  #pagina-carrinho .produto-img-wrap { border-radius: 6px !important; }
  #pagina-carrinho .imagem-produto   { border-radius: 0 !important; }
  #pagina-carrinho .produto-btn-cart { border-radius: 6px !important; }

}
/* ══ fim MOBILE CARRINHO RECOMENDADOS MAIS LARGOS ═══════════════════════════ */

/* ══ BADGE CARRINHO — ANCORADA NO ÍCONE ═════════════════════════════════════
   HTML: btn-carrinho agora tem <span.menu-btn-icon-wrap> em torno do SVG+badge.
   Desktop: wrapper age como o SVG era (flex-item), badge absolute à direita.
   Mobile: wrapper tem position:relative; badge fica no canto top-right do ícone.
   REGRA: mobile usa @media (max-width: 767px). Desktop intocado visualmente.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Todos os viewports: wrapper do ícone ──────────────────────────────── */
.caixa #btn-carrinho .menu-btn-icon-wrap {
  display:       inline-flex !important;
  align-items:   center !important;
  flex-shrink:   0 !important;
  overflow:      visible !important;
  /* SEM position:relative aqui — no desktop a badge é relativa ao .menu-btn */
}

/* ── Desktop: badge posicionada à direita do botão (como margin-left:auto era) */
.caixa #btn-carrinho .sidebar-badge {
  position:  absolute !important;
  right:     12px !important;
  top:       50% !important;
  transform: translateY(-50%) !important;
  margin-left: 0 !important;
  flex:      none !important;
}

/* ── Mobile: wrapper vira âncora; badge no canto top-right do ícone ──────── */
@media (max-width: 767px) {

  /* Âncora: position:relative no wrapper do ícone (não no botão inteiro) */
  .caixa #btn-carrinho .menu-btn-icon-wrap {
    position:        relative !important;
    display:         inline-flex !important;
    align-items:     center !important;
    justify-content: center !important;
    overflow:        visible !important;
    width:           auto !important;
    max-width:       none !important;
    flex-shrink:     0 !important;
    margin-right:    0 !important;
    white-space:     normal !important;
  }

  /* Garante que o botão também não corte o overflow */
  .caixa #btn-carrinho {
    overflow: visible !important;
  }

  /* Badge: canto top-right do ícone */
  .caixa #btn-carrinho .sidebar-badge {
    position:      absolute !important;
    top:           -5px !important;
    right:         -11px !important;
    transform:     none !important;
    min-width:     18px !important;
    height:        18px !important;
    padding:       0 5px !important;
    border-radius: 999px !important;
    background:    #EF4444 !important;
    color:         #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    font-size:     10px !important;
    font-weight:   800 !important;
    line-height:   1 !important;
    display:       flex !important;
    align-items:   center !important;
    justify-content: center !important;
    border:        2px solid #FFFFFF !important;
    box-shadow:    0 1px 4px rgba(0, 0, 0, 0.18) !important;
    z-index:       20 !important;
    box-sizing:    border-box !important;
    margin:        0 !important;
    white-space:   nowrap !important;
  }

  /* Respeita display:none do JS quando carrinho está vazio */
  .caixa #btn-carrinho .sidebar-badge[style*="display: none"],
  .caixa #btn-carrinho .sidebar-badge[style*="display:none"] {
    display: none !important;
  }

}
/* ══ fim BADGE CARRINHO ANCORADA NO ÍCONE ════════════════════════════════════ */

/* ══ MENSAGENS MOBILE: TELA INTEIRA + HEADER PRÓPRIO + SEM BOTTOM NAV ════════
   Espelha o comportamento do Carrinho mobile.
   Desktop NÃO é afetado — tudo dentro de @media (max-width: 767px).
   ══════════════════════════════════════════════════════════════════════════ */

/* Header invisível globalmente; só aparece em mobile quando mensagens está ativa */
.mensagens-mobile-topo { display: none; }

/* Barra de tabs invisível globalmente; só aparece em mobile quando mensagens está ativa */
.chat-wpp-tabs { display: none; }

@media (max-width: 767px) {

  /* ── 1. Esconde a navegação inferior quando mensagens está aberto ──────── */
  body.nexa-mensagens-ativa .caixa {
    display: none !important;
  }

  /* ── 2. Mensagens ocupa a viewport inteira ───────────────────────────────  */
  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa {
    position:   fixed !important;
    top:        0 !important;
    right:      0 !important;
    bottom:     0 !important;
    left:       0 !important;
    width:      100vw !important;
    height:     100dvh !important;
    min-height: 0 !important;
    margin:     0 !important;
    padding:    0 !important;
    overflow:   hidden !important;
    z-index:    50 !important;
    background: var(--na-bg) !important;
    display:    flex !important;
    flex-direction: column !important;
  }

  /* ── 3. Header mobile visível ────────────────────────────────────────────  */
  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .mensagens-mobile-topo {
    display:          flex !important;
    align-items:      center !important;
    justify-content:  center !important;
    flex-shrink:      0 !important;
    width:            100% !important;
    height:           56px !important;
    background-color: #7c3aed !important;
    background:       linear-gradient(135deg, #7c3aed 0%, #2563eb 100%) !important;
    position:         relative !important;
    z-index:          200 !important;
    padding:          0 16px !important;
    box-sizing:       border-box !important;
    border-bottom:    none !important;
    box-shadow:       none !important;
  }

  /* ── 4. Botão voltar ─────────────────────────────────────────────────────  */
  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .mensagens-btn-voltar {
    position:                   absolute !important;
    left:                       4px !important;
    display:                    flex !important;
    align-items:                center !important;
    justify-content:            center !important;
    width:                      44px !important;
    height:                     44px !important;
    background:                 none !important;
    background-color:           transparent !important;
    border:                     none !important;
    box-shadow:                 none !important;
    cursor:                     pointer !important;
    color:                      #ffffff !important;
    padding:                    0 !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  /* Seta branca */
  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .mensagens-btn-voltar svg,
  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .mensagens-btn-voltar svg polyline {
    color:  #ffffff !important;
    stroke: #ffffff !important;
  }

  /* ── 5. Título centralizado ──────────────────────────────────────────────  */
  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .mensagens-header-titulo {
    font-size:      16px !important;
    font-weight:    700 !important;
    color:          #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    letter-spacing: 0.01em !important;
    font-family:    var(--na-font) !important;
  }

  /* ── 6. Container de mensagens cresce para preencher o restante da tela ──  */
  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .mensagens-container {
    flex:       1 1 auto !important;
    min-height: 0 !important;
    height:     auto !important;
    margin:     0 !important;
    padding:    0 !important;
    display:    flex !important;
    overflow:   hidden !important;
  }

  /* ── 7. Sidebar de conversas permanece oculta no mobile ─────────────────  */
  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .lista-conversas {
    display: none !important;
  }

  /* ── 8. Chat area ocupa 100% do container ───────────────────────────────  */
  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .chat-area {
    width:          100% !important;
    height:         100% !important;
    flex:           1 1 auto !important;
    min-height:     0 !important;
    display:        flex !important;
    flex-direction: column !important;
    overflow:       hidden !important;
    border:         none !important;
    border-radius:  0 !important;
  }

  /* ── 9. Área de mensagens: cresce e rola ────────────────────────────────  */
  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .chat-mensagens {
    flex:       1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* ── 10. Input fixo no fundo — sem offset do bottom nav ─────────────────  */
  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .chat-input-area {
    flex-shrink: 0 !important;
    position:    sticky !important;
    bottom:      0 !important;
    padding:     10px 12px env(safe-area-inset-bottom, 0px) !important;
  }

}
/* ══ fim MENSAGENS MOBILE TELA INTEIRA ══════════════════════════════════════ */

/* ══ MENSAGENS MOBILE: COMPOSER PROFISSIONAL ════════════════════════════════
   Fix definitivo do chat-input-area. Seletores com máxima especificidade
   vencem todos os blocos escuros anteriores (rgba(8,9,15), rgba(10,12,20)).
   APENAS @media (max-width: 767px). Desktop intocado.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── Área de digitação: fundo limpo, sem faixa escura ──────────────────── */
  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .chat-input-area {
    flex-shrink:             0 !important;
    position:                relative !important;
    display:                 flex !important;
    align-items:             center !important;
    gap:                     10px !important;
    background:              #F4F7FB !important;
    border-top:              1px solid #E2E8F0 !important;
    box-shadow:              0 -2px 12px rgba(15, 23, 42, 0.06) !important;
    padding:                 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    backdrop-filter:         none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* ── Campo de texto: pill branco com borda suave ───────────────────────── */
  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .chat-input {
    flex:          1 !important;
    height:        46px !important;
    min-height:    46px !important;
    border-radius: 999px !important;
    border:        1px solid #D1D5DB !important;
    background:    #FFFFFF !important;
    padding:       0 18px !important;
    font-size:     14px !important;
    color:         #0F172A !important;
    -webkit-text-fill-color: #0F172A !important;
    outline:       none !important;
    box-shadow:    none !important;
  }

  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .chat-input::placeholder {
    color: rgba(15, 23, 42, 0.40) !important;
  }

  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .chat-input:focus {
    border-color: #2563EB !important;
    box-shadow:   0 0 0 3px rgba(37, 99, 235, 0.12) !important;
  }

  /* ── Botão enviar: círculo azul com ícone centralizado ─────────────────── */
  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa #btn-enviar {
    width:           46px !important;
    height:          46px !important;
    min-width:       46px !important;
    flex-shrink:     0 !important;
    border-radius:   50% !important;
    background:      #2563EB !important;
    color:           #FFFFFF !important;
    border:          none !important;
    box-shadow:      0 2px 8px rgba(37, 99, 235, 0.30) !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    padding:         0 !important;
    -webkit-tap-highlight-color: transparent !important;
    transform:       none !important;
  }

  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa #btn-enviar svg {
    stroke: #FFFFFF !important;
    fill:   none !important;
    width:  20px !important;
    height: 20px !important;
  }

  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa #btn-enviar:active {
    transform:  scale(0.92) !important;
    box-shadow: none !important;
  }

  /* ── Chat area: garante que fundo seja claro ────────────────────────────── */
  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .chat-area {
    background: #F4F7FB !important;
  }

  /* ── Chat topo: fundo branco profissional ───────────────────────────────── */
  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .chat-topo {
    background:  #FFFFFF !important;
    border-bottom: 1px solid #E2E8F0 !important;
    box-shadow:  0 1px 6px rgba(15, 23, 42, 0.05) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

}
/* ══ fim MENSAGENS MOBILE COMPOSER ══════════════════════════════════════════ */

/* ══ MENSAGENS MOBILE: REDESIGN VISUAL PROFISSIONAL ═════════════════════════
   Cobre: chat-topo, bolhas, área de mensagens e composer completo.
   APENAS @media (max-width: 767px). Desktop intocado.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ─────────────────────────────────────────────────────────────────────────
     CABEÇALHO DO CHAT (.chat-topo)
     ───────────────────────────────────────────────────────────────────────── */
  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .chat-topo {
    background:              #FFFFFF !important;
    border-bottom:           1px solid #E5E7EB !important;
    box-shadow:              0 1px 8px rgba(15, 23, 42, 0.05) !important;
    backdrop-filter:         none !important;
    -webkit-backdrop-filter: none !important;
    min-height:              64px !important;
    height:                  auto !important;
    padding:                 12px 16px !important;
    display:                 flex !important;
    align-items:             center !important;
    gap:                     12px !important;
  }

  /* Avatar: círculo gradiente */
  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .chat-topo-avatar {
    width:           42px !important;
    height:          42px !important;
    min-width:       42px !important;
    border-radius:   50% !important;
    background:      linear-gradient(135deg, #7c3aed 0%, #2563eb 100%) !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    flex-shrink:     0 !important;
    box-shadow:      0 2px 8px rgba(124, 58, 237, 0.28) !important;
  }

  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .chat-topo-avatar svg {
    stroke: #FFFFFF !important;
    width:  20px !important;
    height: 20px !important;
  }

  /* Informações: nome + status */
  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .chat-topo-info {
    flex:           1 !important;
    min-width:      0 !important;
    display:        flex !important;
    flex-direction: column !important;
    gap:            2px !important;
  }

  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .chat-topo-info h3 {
    font-size:     15px !important;
    font-weight:   700 !important;
    color:         #0F172A !important;
    -webkit-text-fill-color: #0F172A !important;
    margin:        0 !important;
    line-height:   1.2 !important;
    white-space:   nowrap !important;
    overflow:      hidden !important;
    text-overflow: ellipsis !important;
  }

  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .chat-status-texto {
    font-size:   12px !important;
    font-weight: 500 !important;
    color:       #22C55E !important;
    -webkit-text-fill-color: #22C55E !important;
    line-height: 1.2 !important;
  }

  /* Ocultar .chat-mobile-wpp-acoes (movido para .chat-wpp-tabs abaixo do topo) */
  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .chat-mobile-wpp-acoes {
    display: none !important;
  }

  /* ─────────────────────────────────────────────────────────────────────────
     BARRA SEGMENTADA: [Atendimento] [Suporte]  — abaixo do .chat-topo
     ───────────────────────────────────────────────────────────────────────── */
  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .chat-wpp-tabs {
    display:          flex !important;
    flex-direction:   row !important;
    flex-shrink:      0 !important;
    width:            100% !important;
    background:       #FFFFFF !important;
    border-bottom:    1px solid #E5E7EB !important;
    padding:          8px 16px !important;
    gap:              8px !important;
    box-sizing:       border-box !important;
  }

  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .chat-wpp-tabs .chat-mobile-wpp-link {
    flex:             1 !important;
    display:          flex !important;
    align-items:      center !important;
    justify-content:  center !important;
    height:           38px !important;
    border-radius:    10px !important;
    font-size:        13px !important;
    font-weight:      600 !important;
    text-decoration:  none !important;
    white-space:      nowrap !important;
    line-height:      1 !important;
    transition:       background 0.18s, color 0.18s, box-shadow 0.18s !important;
    box-sizing:       border-box !important;
    border:           1.5px solid #E5E7EB !important;
    background:       #FFFFFF !important;
    color:            #475569 !important;
    -webkit-text-fill-color: #475569 !important;
    box-shadow:       none !important;
  }

  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .chat-wpp-tabs .chat-mobile-wpp-atendimento {
    background:       linear-gradient(135deg, #7C3AED 0%, #2563EB 100%) !important;
    color:            #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    border-color:     transparent !important;
    box-shadow:       0 2px 8px rgba(124, 58, 237, 0.22) !important;
  }

  /* ─────────────────────────────────────────────────────────────────────────
     ÁREA DE MENSAGENS (.chat-mensagens)
     ───────────────────────────────────────────────────────────────────────── */
  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .chat-mensagens {
    background:  #F4F6FB !important;
    padding:     16px 14px 14px !important;
    gap:         10px !important;
    flex:        1 1 auto !important;
    min-height:  0 !important;
    overflow-y:  auto !important;
    -webkit-overflow-scrolling: touch !important;
    display:     flex !important;
    flex-direction: column !important;
  }

  /* Bolha recebida (app / bot) */
  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .mensagem.recebida {
    background:    #FFFFFF !important;
    border:        1px solid #E5E7EB !important;
    border-radius: 18px 18px 18px 4px !important;
    padding:       10px 14px !important;
    max-width:     80% !important;
    box-shadow:    0 1px 4px rgba(15, 23, 42, 0.06) !important;
    color:         #0F172A !important;
    -webkit-text-fill-color: #0F172A !important;
    font-size:     14px !important;
    line-height:   1.52 !important;
    align-self:    flex-start !important;
    margin:        0 !important;
  }

  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .mensagem.recebida p {
    color:       #0F172A !important;
    -webkit-text-fill-color: #0F172A !important;
    margin:      0 !important;
    font-size:   14px !important;
    line-height: 1.52 !important;
  }

  /* Bolha enviada (usuário) */
  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .mensagem.enviada {
    background:     linear-gradient(135deg, #7c3aed 0%, #2563eb 100%) !important;
    border:         none !important;
    border-radius:  18px 18px 4px 18px !important;
    padding:        10px 14px !important;
    max-width:      80% !important;
    color:          #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    font-size:      14px !important;
    line-height:    1.52 !important;
    margin-left:    auto !important;
    align-self:     flex-end !important;
    box-shadow:     0 2px 8px rgba(124, 58, 237, 0.22) !important;
    margin-bottom:  0 !important;
    display:        flex !important;
    flex-direction: column !important;
    gap:            6px !important;
    align-items:    flex-start !important;
  }

  /* Remove o balão secundário que aparecia dentro do balão principal */
  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .mensagem.enviada p {
    background:  transparent !important;
    padding:     0 !important;
    border-radius: 0 !important;
    color:       #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    margin:      0 !important;
    font-size:   14px !important;
    line-height: 1.52 !important;
  }

  /* ─────────────────────────────────────────────────────────────────────────
     COMPOSER: [ + ] [ cam ] [ input ] [ enviar ]
     ───────────────────────────────────────────────────────────────────────── */
  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .chat-input-area {
    flex-shrink:             0 !important;
    position:                relative !important;
    display:                 flex !important;
    align-items:             center !important;
    gap:                     8px !important;
    background:              #FFFFFF !important;
    border-top:              1px solid #E5E7EB !important;
    box-shadow:              0 -2px 14px rgba(15, 23, 42, 0.07) !important;
    padding:                 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    backdrop-filter:         none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Botões extras: + e câmera */
  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .chat-btn-extra {
    width:           38px !important;
    height:          38px !important;
    min-width:       38px !important;
    flex-shrink:     0 !important;
    border-radius:   50% !important;
    background:      #F1F5F9 !important;
    border:          1px solid #E2E8F0 !important;
    color:           #64748B !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    padding:         0 !important;
    cursor:          pointer !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .chat-btn-extra svg {
    stroke: #64748B !important;
    fill:   none !important;
    width:  18px !important;
    height: 18px !important;
  }

  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .chat-btn-extra:active {
    background: #E2E8F0 !important;
    transform:  scale(0.90) !important;
  }

  /* Input de texto */
  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .chat-input {
    flex:          1 !important;
    height:        42px !important;
    min-height:    42px !important;
    border-radius: 999px !important;
    border:        1px solid #D1D5DB !important;
    background:    #F8FAFC !important;
    padding:       0 16px !important;
    font-size:     14px !important;
    color:         #0F172A !important;
    -webkit-text-fill-color: #0F172A !important;
    outline:       none !important;
    box-shadow:    none !important;
    min-width:     0 !important;
  }

  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .chat-input::placeholder {
    color: rgba(15, 23, 42, 0.38) !important;
  }

  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .chat-input:focus {
    border-color: #2563EB !important;
    background:   #FFFFFF !important;
    box-shadow:   0 0 0 2px rgba(37, 99, 235, 0.14) !important;
  }

  /* Botão enviar */
  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa #btn-enviar {
    width:           42px !important;
    height:          42px !important;
    min-width:       42px !important;
    flex-shrink:     0 !important;
    border-radius:   50% !important;
    background:      #2563EB !important;
    color:           #FFFFFF !important;
    border:          none !important;
    box-shadow:      0 2px 8px rgba(37, 99, 235, 0.30) !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    padding:         0 !important;
    -webkit-tap-highlight-color: transparent !important;
    transform:       none !important;
  }

  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa #btn-enviar svg {
    stroke: #FFFFFF !important;
    fill:   none !important;
    width:  18px !important;
    height: 18px !important;
  }

  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa #btn-enviar:active {
    transform:  scale(0.90) !important;
    box-shadow: none !important;
  }

}
/* ══ fim MENSAGENS MOBILE REDESIGN VISUAL ════════════════════════════════════ */

/* ══ CHAT ANEXOS: menu +, prévia, toast ══════════════════════════════════════ */

/* Oculta por padrão — só aparece em mobile via JS (hidden remove) */
#chat-anexo-menu,
#chat-anexo-preview {
  display: none;
}

@media (max-width: 767px) {

  /* ── Menu popup de anexos ─────────────────────────────────────────────────── */
  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa #chat-anexo-menu {
    display:          flex !important;
    flex-direction:   column !important;
    position:         absolute !important;
    bottom:           calc(100% + 8px) !important;
    left:             8px !important;
    background:       #FFFFFF !important;
    border:           1px solid #E5E7EB !important;
    border-radius:    14px !important;
    box-shadow:       0 8px 24px rgba(15, 23, 42, 0.13) !important;
    padding:          6px !important;
    gap:              2px !important;
    min-width:        160px !important;
    z-index:          300 !important;
    animation:        chat-menu-in 0.15s ease !important;
  }

  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa #chat-anexo-menu[hidden] {
    display: none !important;
  }

  @keyframes chat-menu-in {
    from { opacity: 0; transform: translateY(6px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }

  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .chat-anexo-opcao {
    display:          flex !important;
    align-items:      center !important;
    gap:              10px !important;
    width:            100% !important;
    padding:          10px 14px !important;
    background:       transparent !important;
    border:           none !important;
    border-radius:    10px !important;
    font-size:        14px !important;
    font-weight:      500 !important;
    color:            #1E293B !important;
    -webkit-text-fill-color: #1E293B !important;
    cursor:           pointer !important;
    text-align:       left !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .chat-anexo-opcao:active {
    background: #F1F5F9 !important;
  }

  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .chat-anexo-opcao-icone {
    width:            32px !important;
    height:           32px !important;
    min-width:        32px !important;
    border-radius:    8px !important;
    background:       #EFF6FF !important;
    display:          flex !important;
    align-items:      center !important;
    justify-content:  center !important;
  }

  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .chat-anexo-opcao-icone svg {
    stroke: #2563EB !important;
  }

  /* ── Prévia do anexo ──────────────────────────────────────────────────────── */
  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa #chat-anexo-preview {
    display:          flex !important;
    align-items:      center !important;
    gap:              8px !important;
    flex-shrink:      0 !important;
    background:       #FFFFFF !important;
    border-top:       1px solid #E5E7EB !important;
    padding:          8px 14px !important;
    max-height:       64px !important;
    overflow:         hidden !important;
    box-sizing:       border-box !important;
  }

  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa #chat-anexo-preview[hidden] {
    display: none !important;
  }

  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .chat-anexo-thumb-img {
    width:            48px !important;
    height:           48px !important;
    object-fit:       cover !important;
    border-radius:    6px !important;
    border:           1px solid #E5E7EB !important;
    flex-shrink:      0 !important;
  }

  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .chat-anexo-thumb-img[hidden] {
    display: none !important;
  }

  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .chat-anexo-icone-arquivo {
    width:            40px !important;
    height:           40px !important;
    min-width:        40px !important;
    border-radius:    8px !important;
    background:       #EFF6FF !important;
    display:          flex !important;
    align-items:      center !important;
    justify-content:  center !important;
    flex-shrink:      0 !important;
  }

  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .chat-anexo-icone-arquivo[hidden] {
    display: none !important;
  }

  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .chat-anexo-nome {
    flex:             1 !important;
    font-size:        12px !important;
    font-weight:      500 !important;
    color:            #475569 !important;
    -webkit-text-fill-color: #475569 !important;
    overflow:         hidden !important;
    text-overflow:    ellipsis !important;
    white-space:      nowrap !important;
    min-width:        0 !important;
  }

  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .chat-anexo-remover {
    width:            26px !important;
    height:           26px !important;
    min-width:        26px !important;
    border-radius:    50% !important;
    background:       #F1F5F9 !important;
    border:           none !important;
    font-size:        16px !important;
    line-height:      1 !important;
    color:            #64748B !important;
    -webkit-text-fill-color: #64748B !important;
    display:          flex !important;
    align-items:      center !important;
    justify-content:  center !important;
    cursor:           pointer !important;
    padding:          0 !important;
    flex-shrink:      0 !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  /* ── Bolha com imagem no chat ─────────────────────────────────────────────── */
  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .mensagem.enviada .msg-imagem-anexada {
    display:       block !important;
    max-width:     200px !important;
    max-height:    200px !important;
    border-radius: 10px !important;
    object-fit:    cover !important;
    width:         auto !important;
    height:        auto !important;
  }

  /* ── Bolha com arquivo no chat ────────────────────────────────────────────── */
  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .msg-arquivo-pill {
    display:       flex !important;
    align-items:   center !important;
    gap:           8px !important;
    font-size:     13px !important;
    font-weight:   500 !important;
    color:         #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    max-width:     220px !important;
    overflow:      hidden !important;
  }

  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .msg-arquivo-pill span {
    overflow:      hidden !important;
    text-overflow: ellipsis !important;
    white-space:   nowrap !important;
    color:         #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
  }

  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .msg-arquivo-pill svg {
    flex-shrink: 0 !important;
    stroke:      #FFFFFF !important;
  }

}

/* ── Toast global (fora de media query — aparece sobre tudo) ─────────────── */
.chat-anexo-toast {
  position:      fixed !important;
  bottom:        90px !important;
  left:          50% !important;
  transform:     translateX(-50%) !important;
  background:    #1E293B !important;
  color:         #FFFFFF !important;
  font-size:     13px !important;
  font-weight:   500 !important;
  padding:       10px 20px !important;
  border-radius: 999px !important;
  box-shadow:    0 4px 16px rgba(0,0,0,0.18) !important;
  z-index:       9999 !important;
  pointer-events: none !important;
  opacity:       0 !important;
  transition:    opacity 0.25s !important;
  white-space:   nowrap !important;
}

.chat-anexo-toast[hidden] { display: none !important; }

.chat-anexo-toast.chat-anexo-toast-visivel {
  opacity: 1 !important;
}

/* ══ fim CHAT ANEXOS ═════════════════════════════════════════════════════════ */

/* ══ CHAT REFINAMENTOS: voltar, grid de miniaturas ══════════════════════════ */

@media (max-width: 767px) {

  /* ── Ocultar .mensagens-mobile-topo — back button agora está no .chat-topo ── */
  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .mensagens-mobile-topo {
    display: none !important;
  }

  /* ── Botão voltar no .chat-topo ──────────────────────────────────────────── */
  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .chat-topo-voltar {
    display:          flex !important;
    align-items:      center !important;
    justify-content:  center !important;
    flex-shrink:      0 !important;
    width:            32px !important;
    height:           32px !important;
    background:       transparent !important;
    border:           none !important;
    padding:          0 !important;
    margin-right:     2px !important;
    cursor:           pointer !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .chat-topo-voltar svg {
    stroke: #0F172A !important;
    flex-shrink: 0 !important;
  }

  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .chat-topo-voltar:active svg {
    stroke: #2563EB !important;
  }

  /* ── Esconder .chat-topo-voltar fora desse contexto (desktop/outras páginas) ── */

  /* ── Grid de miniaturas de anexos ────────────────────────────────────────── */
  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa #chat-anexo-grid {
    display:          flex !important;
    flex-direction:   row !important;
    flex-wrap:        wrap !important;
    gap:              6px !important;
    padding:          8px 14px !important;
    background:       #FFFFFF !important;
    border-top:       1px solid #E5E7EB !important;
    flex-shrink:      0 !important;
    box-sizing:       border-box !important;
  }

  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa #chat-anexo-grid[hidden] {
    display: none !important;
  }

  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .chat-thumb-item {
    position:      relative !important;
    width:         76px !important;
    height:        76px !important;
    flex-shrink:   0 !important;
    border-radius: 10px !important;
    overflow:      visible !important;
    border:        1.5px solid #E5E7EB !important;
    background:    #F8FAFC !important;
  }

  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .chat-thumb-img {
    display:       block !important;
    width:         100% !important;
    height:        100% !important;
    object-fit:    cover !important;
    border-radius: 10px !important;
  }

  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .chat-thumb-file-icon {
    display:          flex !important;
    align-items:      center !important;
    justify-content:  center !important;
    width:            100% !important;
    height:           100% !important;
    background:       #EFF6FF !important;
    border-radius:    10px !important;
  }

  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .chat-thumb-x {
    /* tamanho fixo — bloqueia qualquer regra global que infle o botão */
    width:            14px !important;
    height:           14px !important;
    min-width:        14px !important;
    min-height:       14px !important;
    max-width:        14px !important;
    max-height:       14px !important;
    /* reset de aparência nativa iOS/Android */
    -webkit-appearance: none !important;
    appearance:       none !important;
    /* posição */
    position:         absolute !important;
    top:              2px !important;
    right:            2px !important;
    z-index:          10 !important;
    /* layout interno */
    display:          flex !important;
    align-items:      center !important;
    justify-content:  center !important;
    /* espaçamento */
    padding:          0 !important;
    margin:           0 !important;
    /* visual */
    border-radius:    50% !important;
    background:       rgba(255, 255, 255, 0.92) !important;
    border:           1px solid #E5E7EB !important;
    box-shadow:       0 1px 2px rgba(15, 23, 42, 0.10) !important;
    /* texto */
    color:            #475569 !important;
    -webkit-text-fill-color: #475569 !important;
    font-size:        9px !important;
    font-weight:      700 !important;
    line-height:      1 !important;
    /* misc */
    cursor:           pointer !important;
    overflow:         hidden !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .chat-thumb-x::before,
  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .chat-thumb-x::after {
    display:  none !important;
    content:  none !important;
  }

  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .chat-thumb-x:active {
    background:  rgba(254, 226, 226, 0.95) !important;
    border-color: #FCA5A5 !important;
    color:        #EF4444 !important;
    -webkit-text-fill-color: #EF4444 !important;
  }

  /* ── Imagem enviada no chat ───────────────────────────────────────────────── */
  body.nexa-mensagens-ativa #pagina-mensagens.pagina.ativa .msg-imagem-anexada {
    display:       block !important;
    max-width:     180px !important;
    max-height:    180px !important;
    min-width:     80px !important;
    border-radius: 10px !important;
    object-fit:    cover !important;
    width:         auto !important;
    height:        auto !important;
  }

}

/* ── Ocultar chat-topo-voltar fora do contexto mobile ────────────────────── */
.chat-topo-voltar { display: none; }

/* ══ fim CHAT REFINAMENTOS ══════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════════
   PIX MOBILE — "Como pagar" — BLOCO DEFINITIVO v8
   Outer (.pix-instrucoes): card centralizado com align-self:center.
   Inner (.pix-instrucoes-inner): dono único do padding lateral.
   Botão: -webkit-appearance:none em todos os seletores relevantes.
   NÃO altera QR Code, código Pix, botão Copiar, Mercado Pago, webhook, timer.
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Card centralizado — align-self:center quebra o flex-stretch do pai */
  [data-theme="light"] #pagina-pix .pix-instrucoes,
  #pagina-pix #pix-status-pendente .pix-instrucoes {
    width: calc(100% - 28px) !important;
    max-width: 390px !important;
    align-self: center !important;
    margin: 24px auto 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  /* Inner: padding envolve todo o conteúdo */
  #pagina-pix #pix-status-pendente .pix-instrucoes-inner {
    width: 100% !important;
    padding: 22px 24px 28px !important;
    box-sizing: border-box !important;
    text-align: left !important;
  }

  /* Título — margin-left: 20px alinha com o início dos números da lista */
  #pagina-pix #pix-status-pendente .pix-instrucoes-inner h3 {
    margin: 0 0 18px 20px !important;
    padding: 0 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: #0F172A !important;
    text-align: left !important;
    border-bottom: none !important;
  }

  /* Lista */
  #pagina-pix #pix-status-pendente .pix-instrucoes-inner ol {
    margin: 0 0 24px 20px !important;
    padding: 0 !important;
    font-size: 16px !important;
    line-height: 1.42 !important;
    color: #334155 !important;
    text-align: left !important;
    list-style-type: decimal !important;
  }

  #pagina-pix #pix-status-pendente .pix-instrucoes-inner li {
    margin: 0 0 4px 0 !important;
    padding-left: 2px !important;
    color: #334155 !important;
  }

  #pagina-pix #pix-status-pendente .pix-instrucoes-inner li:last-child {
    margin-bottom: 0 !important;
  }

  /* Container do link — padding-left alinha com a lista */
  #pagina-pix #pix-status-pendente .pix-instrucoes-inner .pix-acoes {
    width: 100% !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 0 0 20px !important;
    box-sizing: border-box !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* Botão/link: remove aparência nativa do browser (iOS/Android) */
  #pagina-pix #pix-status-pendente .pix-instrucoes-inner .pix-link-pedidos,
  #pagina-pix #pix-status-pendente .pix-instrucoes-inner .pix-acoes a,
  #pagina-pix #pix-status-pendente .pix-instrucoes-inner .pix-acoes button {
    -webkit-appearance: none !important;
    appearance: none !important;
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #2563EB !important;
    -webkit-text-fill-color: #2563EB !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    font-family: inherit !important;
    display: inline !important;
    width: auto !important;
  }

  #pagina-pix #pix-status-pendente .pix-instrucoes-inner .pix-link-pedidos:hover,
  #pagina-pix #pix-status-pendente .pix-instrucoes-inner .pix-acoes button:hover {
    opacity: 0.85 !important;
  }

  #pagina-pix #pix-status-pendente .pix-instrucoes-inner .pix-link-pedidos:active,
  #pagina-pix #pix-status-pendente .pix-instrucoes-inner .pix-acoes button:active {
    opacity: 0.7 !important;
  }

}

/* ══════════════════════════════════════════════════════════════════════════
   PIX — "COMO PAGAR" + BOTÃO — CORREÇÃO DEFINITIVA (v9-final)
   Problema raiz: o inline-style no <head> carrega DEPOIS deste arquivo e
   usa #pagina-pix #pix-status-pendente .pix-como-pagar (0,2,1,0) para
   forçar background: transparent, desfazendo o card branco do bloco v8.
   Solução: seletor com DUAS classes (.pix-instrucoes.pix-como-pagar) eleva
   a especificidade para 0,2,2,0 e vence o inline-style (0,2,1,0).
   Para o botão: #pagina-pix #btn-ok-pix (0,2,0,0) vence
   #pagina-pix .pix-link-pedidos (0,1,1,0) que força fundo transparente.
   NÃO altera QR Code, código Pix, timer, Mercado Pago, webhook, lógica.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* 1. Card "Como pagar" — especificidade 0,2,2,0 vence inline-style 0,2,1,0
        Ambas as classes (.pix-instrucoes.pix-como-pagar) devem estar no elemento */
  #pagina-pix #pix-status-pendente .pix-instrucoes.pix-como-pagar {
    width: calc(100% - 28px) !important;
    max-width: 390px !important;
    margin: 24px auto 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-top: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    overflow: hidden !important;
    align-self: center !important;
  }

  /* 2. Wrapper do botão: alinhado com o card acima */
  #pagina-pix #pix-status-pendente .pix-minhas-compras-wrap {
    width: calc(100% - 28px) !important;
    max-width: 390px !important;
    margin: 16px auto 28px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    display: block !important;
  }

  /* 3. Botão "Ir para minhas compras" — especificidade 0,2,0,0 (dois IDs)
        Vence #pagina-pix .pix-link-pedidos (0,1,1,0) que força transparent.
        Usa ID para garantir fundo azul sólido e comportamento de botão real. */
  #pagina-pix #btn-ok-pix {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 50px !important;
    padding: 14px 18px !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 10px !important;
    background: #2563eb !important;
    background-color: #2563eb !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    text-decoration: none !important;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.22) !important;
    cursor: pointer !important;
    font-family: inherit !important;
    box-sizing: border-box !important;
  }

  #pagina-pix #btn-ok-pix:active {
    opacity: 0.78 !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   PIX — "COMO PAGAR" v10-final: card + botão preview
   Seletor de duas classes (0,2,2,0) vence o inline-style (0,2,1,0).
   Botão usa id+class distintos de qualquer regra antiga — sem interferência.
   NÃO altera QR Code, código Pix, Mercado Pago, webhook, timer, lógica.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── 1. Seção "Como pagar": flat, só linha separadora no topo ────────── */
  #pagina-pix #pix-status-pendente .pix-instrucoes.pix-como-pagar {
    width:         calc(100% - 32px) !important;
    max-width:     390px !important;
    margin:        24px auto 0 !important;
    padding:       22px 0 24px !important;
    box-sizing:    border-box !important;
    background:    transparent !important;
    border:        none !important;
    border-top:    1px solid #e5e7eb !important;
    border-radius: 0 !important;
    box-shadow:    none !important;
    overflow:      visible !important;
    align-self:    center !important;
  }

  /* ── 2. Inner: sem padding extra — espaçamento vem do pai ───────────── */
  #pagina-pix #pix-status-pendente .pix-instrucoes.pix-como-pagar .pix-instrucoes-inner {
    width:      100% !important;
    padding:    0 !important;
    box-sizing: border-box !important;
    background: transparent !important;
    border:     none !important;
    box-shadow: none !important;
    display:    block !important;
  }

  /* ── 3. Título "Como pagar" ──────────────────────────────────────────── */
  #pagina-pix #pix-status-pendente .pix-como-pagar-titulo,
  #pagina-pix #pix-status-pendente .pix-instrucoes.pix-como-pagar h2,
  #pagina-pix #pix-status-pendente .pix-instrucoes.pix-como-pagar h3 {
    margin:         0 0 16px !important;
    padding:        0 !important;
    color:          #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    font-size:      22px !important;
    font-weight:    800 !important;
    line-height:    1.2 !important;
    text-align:     left !important;
    letter-spacing: -0.02em !important;
    text-transform: none !important;
    border:         none !important;
    background:     transparent !important;
  }

  /* ── 4. Lista de instruções ──────────────────────────────────────────── */
  #pagina-pix #pix-status-pendente .pix-instrucoes.pix-como-pagar ol {
    margin:       0 !important;
    padding-left: 22px !important;
    color:        #334155 !important;
    font-size:    16px !important;
    font-weight:  500 !important;
    line-height:  1.45 !important;
    text-align:   left !important;
    background:   transparent !important;
  }

  #pagina-pix #pix-status-pendente .pix-instrucoes.pix-como-pagar li {
    margin:      0 0 6px !important;
    padding-left: 2px !important;
    color:       #334155 !important;
    -webkit-text-fill-color: #334155 !important;
    background:  transparent !important;
  }

  #pagina-pix #pix-status-pendente .pix-instrucoes.pix-como-pagar li:last-child {
    margin-bottom: 0 !important;
  }

  /* ── 5. "Ir para minhas compras" — texto azul, sem fundo, sem caixa ──── */
  #pagina-pix #pix-status-pendente #btn-preview-minhas-compras,
  #pagina-pix #pix-status-pendente .btn-minhas-compras-preview {
    -webkit-appearance:      none !important;
    appearance:              none !important;
    display:                 flex !important;
    align-items:             center !important;
    justify-content:         center !important;
    width:                   100% !important;
    min-height:              52px !important;
    margin:                  20px 0 0 !important;
    padding:                 14px 18px !important;
    border:                  none !important;
    outline:                 none !important;
    border-radius:           0 !important;
    background:              transparent !important;
    background-color:        transparent !important;
    background-image:        none !important;
    color:                   #2563eb !important;
    -webkit-text-fill-color: #2563eb !important;
    font-size:               16px !important;
    font-weight:             800 !important;
    line-height:             1.2 !important;
    text-align:              center !important;
    text-decoration:         none !important;
    letter-spacing:          0 !important;
    box-shadow:              none !important;
    cursor:                  pointer !important;
    font-family:             inherit !important;
    box-sizing:              border-box !important;
    position:                static !important;
  }

  #pagina-pix #pix-status-pendente #btn-preview-minhas-compras:hover,
  #pagina-pix #pix-status-pendente .btn-minhas-compras-preview:hover,
  #pagina-pix #pix-status-pendente #btn-preview-minhas-compras:active,
  #pagina-pix #pix-status-pendente .btn-minhas-compras-preview:active {
    background:              transparent !important;
    background-color:        transparent !important;
    background-image:        none !important;
    box-shadow:              none !important;
    border:                  none !important;
    transform:               none !important;
    opacity:                 1 !important;
    filter:                  none !important;
  }

}

/* ══════════════════════════════════════════════════════════════════════════
   PÁGINA "MINHAS COMPRAS" (#pagina-minhas-compras)
   Tela inteira, tema claro, gradiente no topo igual à home mobile.
   Desktop não afetado — tudo dentro de @media (max-width: 768px).
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Página: ocupa 100vw × 100dvh, fundo branco ─────────────────────── */
  #pagina-minhas-compras.pagina {
    position:   fixed !important;
    inset:      0 !important;
    z-index:    200 !important;
    display:    none !important;
    flex-direction: column !important;
    width:      100vw !important;
    height:     100dvh !important;
    min-height: 100dvh !important;
    background: #ffffff !important;
    color:      #111827 !important;
    margin:     0 !important;
    padding:    0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  #pagina-minhas-compras.pagina.ativa {
    display: flex !important;
  }

  /* ── Cabeçalho: gradiente roxo-azul igual à home ─────────────────────── */
  .minhas-compras-topo {
    width:      100% !important;
    flex-shrink: 0 !important;
    min-height: 72px !important;
    padding:    calc(14px + env(safe-area-inset-top, 0px)) 18px 14px !important;
    display:    flex !important;
    align-items: center !important;
    gap:        14px !important;
    background: linear-gradient(135deg, #7c3aed 0%, #2563eb 100%) !important;
    color:      #ffffff !important;
    box-sizing: border-box !important;
  }

  /* Botão voltar: círculo semitransparente */
  .btn-voltar-minhas-compras {
    width:           42px !important;
    height:          42px !important;
    min-width:       42px !important;
    flex-shrink:     0 !important;
    border:          none !important;
    border-radius:   999px !important;
    background:      rgba(255, 255, 255, 0.14) !important;
    color:           #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size:       28px !important;
    line-height:     1 !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    cursor:          pointer !important;
    padding:         0 !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .btn-voltar-minhas-compras:active {
    background: rgba(255, 255, 255, 0.28) !important;
    transform:  scale(0.92) !important;
  }

  /* Título do cabeçalho */
  .minhas-compras-topo h2 {
    margin:      0 !important;
    color:       #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size:   20px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    flex:        1 !important;
    min-width:   0 !important;
  }

  /* ── Conteúdo principal ──────────────────────────────────────────────── */
  .minhas-compras-conteudo {
    width:      100% !important;
    flex:       1 1 auto !important;
    padding:    22px 18px calc(32px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
  }

  /* Sub-títulos das seções */
  .minhas-compras-conteudo h3 {
    margin:          0 0 12px !important;
    color:           #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    font-size:       15px !important;
    font-weight:     800 !important;
    line-height:     1.2 !important;
    letter-spacing:  0.04em !important;
    text-transform:  uppercase !important;
  }

  /* Campo de busca + botão */
  .minhas-compras-busca {
    display:       flex !important;
    gap:           8px !important;
    width:         100% !important;
    margin-bottom: 8px !important;
  }

  .minhas-compras-busca input {
    flex:          1 !important;
    min-width:     0 !important;
    height:        48px !important;
    padding:       0 14px !important;
    border:        1px solid #e5e7eb !important;
    border-radius: 12px !important;
    background:    #ffffff !important;
    color:         #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    font-size:     14px !important;
    font-family:   inherit !important;
    outline:       none !important;
    box-sizing:    border-box !important;
  }

  .minhas-compras-busca input:focus {
    border-color: #2563eb !important;
    box-shadow:   0 0 0 3px rgba(37, 99, 235, 0.12) !important;
  }

  .minhas-compras-busca button {
    height:        48px !important;
    padding:       0 18px !important;
    border:        none !important;
    border-radius: 12px !important;
    background:    #2563eb !important;
    color:         #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size:     14px !important;
    font-weight:   800 !important;
    font-family:   inherit !important;
    cursor:        pointer !important;
    white-space:   nowrap !important;
    flex-shrink:   0 !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .minhas-compras-busca button:active {
    filter: brightness(0.88) !important;
  }

  /* Texto de ajuda */
  .minhas-compras-ajuda {
    margin:      0 0 24px !important;
    color:       #64748b !important;
    -webkit-text-fill-color: #64748b !important;
    font-size:   13px !important;
    line-height: 1.4 !important;
  }

  /* Lista de pedidos */
  .lista-minhas-compras {
    width: 100% !important;
  }

  /* Estado vazio */
  .minhas-compras-vazio {
    margin:        24px 0 0 !important;
    padding:       24px 16px !important;
    border:        1px dashed #d1d5db !important;
    border-radius: 14px !important;
    background:    #f8fafc !important;
    color:         #64748b !important;
    -webkit-text-fill-color: #64748b !important;
    font-size:     14px !important;
    line-height:   1.4 !important;
    text-align:    center !important;
  }

}

/* ══════════════════════════════════════════════════════════════════════════
   BADGE AVISOS (sino) — mobile only
   Posiciona o contador como bolinha absoluta acima do ícone,
   igual ao contador do carrinho. Não afeta desktop nem outros botões.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Âncora para posicionamento absoluto do badge */
  #btn-sininho {
    position: relative !important;
    overflow: visible !important;
  }

  /* Badge: bolinha vermelha no canto superior direito do ícone */
  #btn-sininho #badge-avisos,
  #btn-sininho .sidebar-badge,
  #btn-sininho .menu-badge-notificacoes {
    position:        absolute !important;
    top:             4px !important;
    left:            50% !important;
    transform:       translateX(10px) !important;
    min-width:       18px !important;
    height:          18px !important;
    padding:         0 5px !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    background:      #ef4444 !important;
    color:           #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-radius:   999px !important;
    border:          2px solid #ffffff !important;
    font-size:       10px !important;
    font-weight:     800 !important;
    line-height:     1 !important;
    margin:          0 !important;
    z-index:         5 !important;
    box-sizing:      border-box !important;
    pointer-events:  none !important;
    flex-shrink:     0 !important;
    width:           auto !important;
    text-align:      center !important;
    white-space:     nowrap !important;
  }

  /* Respeita display:none do JS (com ou sem espaço) */
  #btn-sininho #badge-avisos[style*="display:none"],
  #btn-sininho #badge-avisos[style*="display: none"],
  #btn-sininho .menu-badge-notificacoes[style*="display:none"],
  #btn-sininho .menu-badge-notificacoes[style*="display: none"] {
    display: none !important;
  }

}

/* ══════════════════════════════════════════════════════════════════════════
   FIX 1 — Configurações mobile: remove barra preta, tela inteira limpa
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  body.nexa-configuracoes-ativa {
    background: #f5f6fb !important;
    padding-bottom: 0 !important;
    overflow-x: hidden !important;
  }

  /* Oculta bottom nav — ele causava a barra preta quando a página era fixed */
  body.nexa-configuracoes-ativa .caixa {
    display: none !important;
  }

  #pagina-configuracoes {
    width:      100% !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    margin:     0 !important;
    padding:    0 !important;
    background: #f5f6fb !important;
    color:      #111827 !important;
    box-sizing: border-box !important;
  }

  #pagina-configuracoes .configuracoes-container {
    min-height:     calc(100vh - 72px) !important;
    background:     #f5f6fb !important;
    padding-bottom: 32px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   FIX 2 — Botão voltar: somente seta, sem círculo nem fundo
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  #pagina-configuracoes .btn-voltar,
  #pagina-configuracoes .btn-voltar-configuracoes,
  #pagina-configuracoes .config-voltar,
  .btn-voltar-config {
    -webkit-appearance: none !important;
    appearance:         none !important;
    background:         transparent !important;
    background-image:   none !important;
    border:             none !important;
    box-shadow:         none !important;
    border-radius:      0 !important;
    width:              42px !important;
    height:             42px !important;
    min-width:          42px !important;
    min-height:         0 !important;
    padding:            0 !important;
    display:            flex !important;
    align-items:        center !important;
    justify-content:    center !important;
    color:              #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size:          34px !important;
    font-weight:        500 !important;
    line-height:        1 !important;
    cursor:             pointer !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  #pagina-configuracoes .btn-voltar:hover,
  #pagina-configuracoes .btn-voltar-configuracoes:hover,
  #pagina-configuracoes .config-voltar:hover,
  .btn-voltar-config:hover {
    background:   transparent !important;
    border:       none !important;
    box-shadow:   none !important;
    border-color: transparent !important;
  }

  #pagina-configuracoes .btn-voltar:active,
  #pagina-configuracoes .btn-voltar-configuracoes:active,
  #pagina-configuracoes .config-voltar:active,
  .btn-voltar-config:active {
    background: transparent !important;
    opacity:    0.65 !important;
  }
}