/* Draive · Componentes reutilizáveis (prefixo dv-, BEM) */

/* ---------- Botões ---------- */
.dv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dv-esp-2);
  min-height: var(--dv-altura-controle);
  padding: 0 var(--dv-esp-4);
  border: 1px solid var(--dv-cor-borda-forte);
  border-radius: var(--dv-raio-md);
  background: var(--dv-cor-fundo);
  color: var(--dv-cor-texto);
  font-size: var(--dv-texto-sm);
  font-weight: var(--dv-peso-medio);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dv-duracao), border-color var(--dv-duracao);
}
.dv-btn:hover { background: var(--dv-cor-superficie); }
.dv-btn:disabled, .dv-btn[aria-disabled="true"] { opacity: 0.45; }

.dv-btn--primario {
  background: var(--dv-cor-acento);
  border-color: var(--dv-cor-acento);
  color: var(--dv-cor-acento-texto);
  font-weight: var(--dv-peso-forte);
}
.dv-btn--primario:hover { background: var(--dv-cor-acento-hover); border-color: var(--dv-cor-acento-hover); }

/* WhatsApp: verde da marca WhatsApp (fixo, não segue a cor do tema); texto escuro para ter contraste */
.dv-btn--whatsapp {
  background: #25d366;
  border-color: #25d366;
  color: #0b2e17;
  font-weight: var(--dv-peso-forte);
}
.dv-btn--whatsapp:hover { background: #1ebe5b; border-color: #1ebe5b; }

.dv-btn--secundario { background: var(--dv-cor-fundo); }

/* Ações destrutivas e irreversíveis (excluir permanentemente) */
.dv-btn--perigo { background: var(--dv-cor-erro); border-color: var(--dv-cor-erro); color: #fff; font-weight: var(--dv-peso-forte); }
.dv-btn--perigo:hover { background: var(--dv-cor-erro-hover); border-color: var(--dv-cor-erro-hover); }
.dv-btn--perigo-contorno { border-color: var(--dv-cor-erro); color: var(--dv-cor-erro); }
.dv-btn--perigo-contorno:hover { background: var(--dv-cor-erro-fundo); }
.dv-btn--link.dv-btn--texto-perigo { color: var(--dv-cor-erro); }

.dv-btn--fantasma { border-color: transparent; background: transparent; }
.dv-btn--fantasma:hover { background: var(--dv-cor-superficie); }

.dv-btn--link {
  min-height: auto;
  padding: 0;
  border: 0;
  background: none;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.dv-btn--link:hover { background: none; }

.dv-btn--pequeno { min-height: 2rem; padding: 0 var(--dv-esp-3); font-size: var(--dv-texto-xs); }
.dv-btn--grande { min-height: 3rem; padding: 0 var(--dv-esp-5); font-size: var(--dv-texto-md); }
.dv-btn--bloco { width: 100%; }

.dv-btn--icone {
  width: var(--dv-altura-controle);
  padding: 0;
  border-color: transparent;
  background: transparent;
}
.dv-btn--icone:hover { background: var(--dv-cor-superficie); }

/* ---------- Campos ---------- */
.dv-campo { display: grid; gap: var(--dv-esp-1); }
.dv-campo__rotulo { font-size: var(--dv-texto-sm); font-weight: var(--dv-peso-medio); }
.dv-campo__ajuda { font-size: var(--dv-texto-xs); color: var(--dv-cor-texto-suave); }

.dv-input, .dv-select, .dv-textarea {
  width: 100%;
  min-height: var(--dv-altura-controle);
  padding: var(--dv-esp-2) var(--dv-esp-3);
  border: 1px solid var(--dv-cor-borda-forte);
  border-radius: var(--dv-raio-md);
  background: var(--dv-cor-fundo);
  font-size: var(--dv-texto-sm);
}
.dv-textarea { min-height: 6rem; resize: vertical; }
.dv-input:read-only { background: var(--dv-cor-superficie); border-color: var(--dv-cor-borda); }
.dv-input:user-invalid { border-color: var(--dv-cor-erro); }

/* ---------- Badges ---------- */
.dv-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--dv-esp-1);
  padding: 0.125rem var(--dv-esp-2);
  border: 1px solid var(--dv-cor-borda-forte);
  border-radius: var(--dv-raio-pill);
  font-size: var(--dv-texto-xs);
  font-weight: var(--dv-peso-medio);
  line-height: 1.4;
  white-space: nowrap;
}
/* Tipo do carrinho: mesmo estilo para Recomendação e Criado por você */
.dv-badge--ia, .dv-badge--personalizado { background: var(--dv-cor-fundo); }
.dv-badge--ativo { background: var(--dv-cor-acento); border-color: var(--dv-cor-acento); color: var(--dv-cor-acento-texto); }
.dv-badge--arquivado { color: var(--dv-cor-texto-suave); }
/* Status: cor + fundo translúcido, sem borda */
.dv-badge--sucesso { border-color: transparent; background: var(--dv-cor-sucesso-fundo); color: var(--dv-cor-sucesso); }
.dv-badge--alerta { border-color: transparent; background: var(--dv-cor-alerta-fundo); color: var(--dv-cor-alerta); }
.dv-badge--erro { border-color: transparent; background: var(--dv-cor-erro-fundo); color: var(--dv-cor-erro); }
.dv-badge--info { border-color: transparent; background: var(--dv-cor-info-fundo); color: var(--dv-cor-info); }
.dv-badge--secundario { border-color: transparent; background: var(--dv-cor-secundaria-fundo); color: var(--dv-cor-secundaria); }

/* ---------- Avisos (notices) ---------- */
.dv-aviso {
  display: flex;
  gap: var(--dv-esp-3);
  align-items: flex-start;
  padding: var(--dv-esp-3) var(--dv-esp-4);
  border: var(--dv-borda);
  border-left-width: 4px;
  border-radius: var(--dv-raio-md);
  background: var(--dv-cor-superficie);
  font-size: var(--dv-texto-sm);
}
.dv-aviso--alerta { background: var(--dv-cor-alerta-fundo); border-color: var(--dv-cor-alerta); }
.dv-aviso--erro { background: var(--dv-cor-erro-fundo); border-color: var(--dv-cor-erro); }
.dv-aviso--sucesso { background: var(--dv-cor-sucesso-fundo); border-color: var(--dv-cor-sucesso); }
.dv-aviso--info { background: var(--dv-cor-info-fundo); border-color: var(--dv-cor-info); }
.dv-aviso--secundario { background: var(--dv-cor-secundaria-fundo); border-color: var(--dv-cor-secundaria); }
.dv-aviso > svg { margin-top: 0.1rem; }

/* ---------- Estado vazio ---------- */
.dv-vazio {
  display: grid;
  justify-items: center;
  gap: var(--dv-esp-3);
  padding: var(--dv-esp-7) var(--dv-esp-4);
  border: 2px dashed var(--dv-cor-borda);
  border-radius: var(--dv-raio-lg);
  text-align: center;
  color: var(--dv-cor-texto-suave);
}
.dv-vazio > svg { color: var(--dv-cor-texto); }  /* ícone do estado vazio na cor escura */
.dv-vazio__titulo { color: var(--dv-cor-texto); font-size: var(--dv-texto-lg); font-weight: var(--dv-peso-forte); }

/* ---------- Placeholder de imagem (caixa com X, clássico de wireframe) ---------- */
.dv-img {
  display: block; /* também nos <span> montados em JS (ui.js imagem()), senão o placeholder colapsa */
  aspect-ratio: 1;
  border: var(--dv-borda);
  border-radius: var(--dv-raio-md);
  background:
    linear-gradient(to top right, transparent calc(50% - 0.5px), var(--dv-cor-borda) 50%, transparent calc(50% + 0.5px)),
    linear-gradient(to top left, transparent calc(50% - 0.5px), var(--dv-cor-borda) 50%, transparent calc(50% + 0.5px)),
    var(--dv-cor-superficie);
}

/* ---------- Stepper de quantidade ---------- */
.dv-qtd {
  display: inline-flex;
  align-items: stretch;
  height: var(--dv-altura-controle);
  border: 1px solid var(--dv-cor-borda-forte);
  border-radius: var(--dv-raio-md);
  overflow: hidden;
  background: var(--dv-cor-fundo);
}
.dv-qtd__btn {
  width: 2.25rem;
  border: 0;
  background: var(--dv-cor-superficie);
  font-size: var(--dv-texto-lg);
  line-height: 1;
}
.dv-qtd__btn:hover { background: var(--dv-cor-superficie-2); }
.dv-qtd__btn:focus-visible { outline-offset: calc(-1 * var(--dv-foco-largura)); }
.dv-qtd__input {
  width: 3.25rem;
  border: 0;
  border-inline: var(--dv-borda);
  text-align: center;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.dv-qtd__input::-webkit-inner-spin-button,
.dv-qtd__input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.dv-qtd__input:focus-visible { outline-offset: calc(-1 * var(--dv-foco-largura)); }
.dv-qtd--pequeno { height: 2rem; }
.dv-qtd--pequeno .dv-qtd__btn { width: 1.9rem; font-size: var(--dv-texto-md); }
.dv-qtd--pequeno .dv-qtd__input { width: 2.5rem; font-size: var(--dv-texto-sm); }

/* ---------- Controle segmentado (radios) ---------- */
.dv-segmentado {
  display: inline-flex;
  flex-wrap: wrap;
  padding: 3px;
  gap: 2px;
  border: var(--dv-borda);
  border-radius: var(--dv-raio-md);
  background: var(--dv-cor-fundo);
}
.dv-segmentado__opcao { position: relative; }
.dv-segmentado__opcao input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.dv-segmentado__opcao span {
  display: inline-flex;
  align-items: center;
  gap: var(--dv-esp-1);
  min-height: 2rem;
  padding: 0 var(--dv-esp-3);
  border-radius: calc(var(--dv-raio-md) - 3px);
  font-size: var(--dv-texto-sm);
  white-space: nowrap;
}
.dv-segmentado__opcao input:checked + span {
  background: var(--dv-cor-primaria);
  color: var(--dv-cor-primaria-texto);
  font-weight: var(--dv-peso-medio);
}
.dv-segmentado__opcao input:checked + span .dv-segmentado__contador { color: inherit; opacity: 0.75; }
.dv-segmentado__opcao input:focus-visible + span { outline: var(--dv-foco); outline-offset: 1px; }
.dv-segmentado__contador { color: var(--dv-cor-texto-suave); font-size: var(--dv-texto-xs); }

/* ---------- Dialog (modal) ---------- */
.dv-dialog {
  width: min(480px, calc(100vw - 2 * var(--dv-gutter)));
  max-height: calc(100dvh - 2 * var(--dv-gutter));
  padding: 0;
  border: var(--dv-borda);
  border-radius: var(--dv-raio-lg);
  box-shadow: var(--dv-sombra-2);
  color: var(--dv-cor-texto);
}
.dv-dialog::backdrop { background: var(--dv-cor-overlay); }
.dv-dialog--largo[open] { display: flex; flex-direction: column; }
.dv-dialog--largo .dv-dialog__corpo { overflow-y: auto; }

/* Modal "Itens do pedido" (accordion somente leitura) */
.dv-dialog--largo { width: min(760px, calc(100vw - 2 * var(--dv-gutter))); }
.dv-itens-pedido { gap: 0; }
.dv-itens-pedido__rodape { align-items: center; }
.dv-itens-pedido__total { margin-right: auto; font-size: var(--dv-texto-md); }
.dv-dialog__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dv-esp-3);
  padding: var(--dv-esp-4) var(--dv-esp-5);
  border-bottom: var(--dv-borda);
}
.dv-dialog__titulo { font-size: var(--dv-texto-lg); }
.dv-dialog__corpo { display: grid; gap: var(--dv-esp-4); padding: var(--dv-esp-5); }
.dv-dialog__rodape {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--dv-esp-2);
  padding: var(--dv-esp-4) var(--dv-esp-5);
  border-top: var(--dv-borda);
  background: var(--dv-cor-superficie);
}
.dv-dialog[open] { animation: dv-surgir var(--dv-duracao) ease-out; }

/* ---------- Drawer (dialog lateral: mini cart, menu mobile, filtros) ---------- */
.dv-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: var(--dv-largura-drawer);
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  border-left: var(--dv-borda);
  box-shadow: var(--dv-sombra-2);
  color: var(--dv-cor-texto);
}
.dv-drawer[open] { display: flex; flex-direction: column; animation: dv-deslizar-dir var(--dv-duracao) ease-out; }
.dv-drawer--esquerda { inset: 0 auto 0 0; border-left: 0; border-right: var(--dv-borda); }
.dv-drawer--esquerda[open] { animation-name: dv-deslizar-esq; }
.dv-drawer::backdrop { background: var(--dv-cor-overlay); }
.dv-drawer__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dv-esp-3);
  padding: var(--dv-esp-3) var(--dv-esp-4);
  border-bottom: var(--dv-borda);
}
.dv-drawer__corpo { flex: 1; overflow-y: auto; padding: var(--dv-esp-4); }
.dv-drawer__rodape {
  display: grid;
  gap: var(--dv-esp-2);
  padding: var(--dv-esp-4);
  border-top: var(--dv-borda);
  background: var(--dv-cor-superficie);
}

@keyframes dv-surgir { from { opacity: 0; transform: translateY(8px); } }
@keyframes dv-deslizar-dir { from { transform: translateX(100%); } }
@keyframes dv-deslizar-esq { from { transform: translateX(-100%); } }

/* ---------- Popover (dropdowns). Posição definida via JS (ui.js > ancorar) ---------- */
.dv-popover {
  position: fixed;
  inset: auto;
  margin: 0;
  padding: var(--dv-esp-2);
  min-width: 220px;
  max-width: calc(100vw - 2 * var(--dv-gutter));
  max-height: calc(100dvh - 120px);
  overflow: auto;
  border: var(--dv-borda);
  border-radius: var(--dv-raio-md);
  background: var(--dv-cor-fundo);
  box-shadow: var(--dv-sombra-2);
  color: var(--dv-cor-texto);
}
.dv-popover:popover-open { animation: dv-surgir var(--dv-duracao) ease-out; }

.dv-menu { display: grid; gap: 2px; }
.dv-menu__item {
  display: flex;
  align-items: center;
  gap: var(--dv-esp-2);
  width: 100%;
  padding: var(--dv-esp-2) var(--dv-esp-3);
  border: 0;
  border-radius: var(--dv-raio-sm);
  background: none;
  font-size: var(--dv-texto-sm);
  text-align: left;
  text-decoration: none;
}
.dv-menu__item:hover, .dv-menu__item:focus-visible { background: var(--dv-cor-superficie); }
.dv-menu__separador { height: 1px; margin: var(--dv-esp-1) 0; background: var(--dv-cor-borda); }
.dv-menu__cabecalho { padding: var(--dv-esp-2) var(--dv-esp-3); font-size: var(--dv-texto-xs); color: var(--dv-cor-texto-suave); }

/* ---------- Toasts ---------- */
.dv-toasts {
  position: fixed;
  /* Lados explícitos + altura pelo conteúdo: o Safari (iOS) esticava o popover até o topo da tela */
  top: auto;
  left: auto;
  right: var(--dv-gutter);
  bottom: var(--dv-gutter);
  width: min(380px, calc(100vw - 2 * var(--dv-gutter)));
  height: fit-content;
  max-height: calc(100dvh - 2 * var(--dv-gutter));
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  overflow: visible;
  display: grid;
  align-content: end;               /* se a caixa crescer, os toasts ficam embaixo sem esticar */
  gap: var(--dv-esp-2);
  pointer-events: none;
}
.dv-toasts:not(:popover-open) { display: none; }
.dv-toast {
  display: flex;
  align-items: center;
  gap: var(--dv-esp-3);
  padding: var(--dv-esp-3) var(--dv-esp-4);
  border-radius: var(--dv-raio-md);
  background: var(--dv-cor-primaria);
  color: var(--dv-cor-primaria-texto);
  box-shadow: var(--dv-sombra-2);
  font-size: var(--dv-texto-sm);
  pointer-events: auto;
  animation: dv-surgir var(--dv-duracao) ease-out;
}
.dv-toast__msg { flex: 1; }
.dv-toast__acao {
  padding: var(--dv-esp-1) var(--dv-esp-2);
  border: 1px solid var(--dv-cor-acento);
  border-radius: var(--dv-raio-sm);
  background: var(--dv-cor-acento);
  color: var(--dv-cor-acento-texto);
  font-size: var(--dv-texto-xs);
  font-weight: var(--dv-peso-forte);
  text-decoration: none;
  white-space: nowrap;
}
.dv-toast__acao:focus-visible, .dv-toast__fechar:focus-visible { outline-color: #fff; }
.dv-toast__fechar { border: 0; background: none; color: inherit; padding: 0 var(--dv-esp-1); font-size: var(--dv-texto-lg); line-height: 1; }
/* Claro (clean): mais discreto, para confirmações rotineiras */
.dv-toast--claro { border: var(--dv-borda); background: var(--dv-cor-fundo); color: var(--dv-cor-texto); }
.dv-toast--claro .dv-toast__fechar { color: var(--dv-cor-texto-suave); }
.dv-toast--claro .dv-toast__fechar:hover { color: var(--dv-cor-texto); }
.dv-toast--claro .dv-toast__acao:focus-visible, .dv-toast--claro .dv-toast__fechar:focus-visible { outline-color: var(--dv-cor-foco); }

/* ---------- Faixa de preço (dois ranges sobrepostos) ---------- */
.dv-faixa { display: grid; gap: var(--dv-esp-3); }
.dv-faixa__trilho { position: relative; height: 1.5rem; }
.dv-faixa__trilho::before {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 4px;
  transform: translateY(-50%);
  border-radius: 2px;
  background: var(--dv-cor-superficie-2);
}
.dv-faixa__preenchido {
  position: absolute;
  top: 50%;
  height: 4px;
  transform: translateY(-50%);
  border-radius: 2px;
  background: var(--dv-cor-acento);
}
.dv-faixa__range {
  position: absolute;
  inset: 0;
  width: 100%;
  margin: 0;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}
.dv-faixa__range::-webkit-slider-runnable-track { height: 100%; background: none; }
.dv-faixa__range::-moz-range-track { background: none; }
.dv-faixa__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1.25rem; height: 1.25rem;
  margin-top: 0.125rem;
  border: 2px solid var(--dv-cor-primaria);
  border-radius: 50%;
  background: var(--dv-cor-fundo);
  pointer-events: auto;
  cursor: grab;
}
.dv-faixa__range::-moz-range-thumb {
  width: 1rem; height: 1rem;
  border: 2px solid var(--dv-cor-primaria);
  border-radius: 50%;
  background: var(--dv-cor-fundo);
  pointer-events: auto;
  cursor: grab;
}
.dv-faixa__range:focus-visible { outline: none; }
.dv-faixa__range:focus-visible::-webkit-slider-thumb { outline: var(--dv-foco); outline-offset: 2px; }
.dv-faixa__range:focus-visible::-moz-range-thumb { outline: var(--dv-foco); outline-offset: 2px; }
.dv-faixa__campos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--dv-esp-2); }

/* ---------- Tabela simples ---------- */
.dv-tabela { width: 100%; border-collapse: collapse; font-size: var(--dv-texto-sm); }
.dv-tabela th {
  padding: var(--dv-esp-2) var(--dv-esp-3);
  border-bottom: 2px solid var(--dv-cor-borda);
  color: var(--dv-cor-texto-suave);
  font-size: var(--dv-texto-xs);
  font-weight: var(--dv-peso-medio);
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dv-tabela td { padding: var(--dv-esp-3); border-bottom: var(--dv-borda); vertical-align: middle; }

/* ---------- Painel / caixa ---------- */
.dv-painel {
  padding: var(--dv-esp-5);
  border: var(--dv-borda);
  border-radius: var(--dv-raio-lg);
  background: var(--dv-cor-fundo);
}
.dv-painel--cinza { background: var(--dv-cor-superficie); }

/* ---------- Breadcrumb ---------- */
.dv-breadcrumb ol { list-style: none; padding: 0; margin: 0;
   display: flex; flex-wrap: wrap; gap: var(--dv-esp-2); font-size: var(--dv-texto-sm); color: var(--dv-cor-texto-suave); }
.dv-breadcrumb li + li::before { content: "/"; margin-right: var(--dv-esp-2); }

/* ---------- Barra de progresso (limite de crédito) ---------- */
.dv-barra { height: 8px; border-radius: 4px; background: var(--dv-cor-superficie-2); overflow: hidden; }
.dv-barra__valor { height: 100%; background: var(--dv-cor-acento); }
.dv-barra--estourou .dv-barra__valor { background: var(--dv-cor-erro); }

/* ---------- Accordion por categoria (carrinho e mini cart) ----------
   Cabeçalho: Categoria / N itens / total. Corpo: itens da categoria. */
.dv-acordeao { display: grid; gap: var(--dv-esp-3); }
.dv-acordeao__barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--dv-esp-2); margin-bottom: var(--dv-esp-3); }
.dv-acordeao__item { border: var(--dv-borda); border-radius: var(--dv-raio-lg); background: var(--dv-cor-fundo); overflow: hidden; }
.dv-acordeao__cabecalho {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: var(--dv-esp-4);
  padding: var(--dv-esp-3) var(--dv-esp-4);
  background: var(--dv-cor-superficie);
  list-style: none;
  cursor: pointer;
}
.dv-acordeao__cabecalho::-webkit-details-marker { display: none; }
.dv-acordeao__cabecalho:hover { background: var(--dv-cor-superficie-2); }
.dv-acordeao__cabecalho:focus-visible { outline-offset: calc(-1 * var(--dv-foco-largura)); }
.dv-acordeao__cabecalho > svg { transition: transform var(--dv-duracao); }
.dv-acordeao__item:not([open]) .dv-acordeao__cabecalho > svg { transform: rotate(-90deg); }
.dv-acordeao__item[open] .dv-acordeao__cabecalho { border-bottom: var(--dv-borda); }
.dv-acordeao__nome { font-weight: var(--dv-peso-forte); }
.dv-acordeao__qtd { font-size: var(--dv-texto-sm); color: var(--dv-cor-texto-suave); }
.dv-acordeao__total { font-weight: var(--dv-peso-forte); min-width: 6.5rem; text-align: right; }

.dv-acordeao__item--compacto { border-radius: var(--dv-raio-md); }
.dv-acordeao__item--compacto .dv-acordeao__cabecalho { gap: var(--dv-esp-2); padding: var(--dv-esp-2) var(--dv-esp-3); font-size: var(--dv-texto-sm); }
.dv-acordeao__item--compacto .dv-acordeao__total { min-width: 0; }
.dv-acordeao__item--compacto .dv-minicart__itens { padding: var(--dv-esp-3); }

/* ---------- Abas (radios com o visual do menu da navbar) ----------
   Ativa: 2px de acento na base. Encoste a aba na borda inferior do container
   para a linha cobrir a borda (bottom: -1px), como em .dv-nav__link. */
.dv-abas { display: flex; align-items: stretch; gap: var(--dv-esp-1); }
.dv-abas__opcao { position: relative; display: flex; }
.dv-abas__opcao input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.dv-abas__opcao > span {
  display: inline-flex;
  align-items: center;
  gap: var(--dv-esp-2);
  min-height: 2.75rem;
  padding: 0 var(--dv-esp-3);
  border-radius: var(--dv-raio-md);
  font-size: var(--dv-texto-sm);
  white-space: nowrap;
}
.dv-abas__opcao > input:checked + span { font-weight: var(--dv-peso-medio); }
.dv-abas__opcao > input:checked + span::after {
  content: "";
  position: absolute;
  inset: auto var(--dv-esp-3) -1px;
  height: 2px;
  background: var(--dv-cor-acento);
}
.dv-abas__opcao > input:focus-visible + span { outline: var(--dv-foco); outline-offset: calc(-1 * var(--dv-foco-largura)); }
.dv-abas__contador {
  display: inline-grid;
  place-items: center;
  flex: none;
  box-sizing: border-box;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.25rem;
  border-radius: var(--dv-raio-pill);
  background: var(--dv-cor-superficie-2);
  color: var(--dv-cor-texto);
  font-size: 0.6875rem;
  font-weight: var(--dv-peso-medio);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.dv-abas__contador:empty { display: none; }

/* ---------- Barra flutuante do carrinho (header.js > montarBarraCarrinho) ----------
   Centralizada no rodapé; some no carrinho e no checkout. */
.dv-barra-carrinho {
  position: fixed;
  left: 50%;
  bottom: var(--dv-gutter);
  z-index: 35;
  display: flex;
  align-items: center;
  gap: var(--dv-esp-4);
  width: min(560px, calc(100vw - 2 * var(--dv-gutter)));
  padding: var(--dv-esp-3) var(--dv-esp-3) var(--dv-esp-3) var(--dv-esp-5);
  border-radius: var(--dv-raio-lg);
  background: var(--dv-cor-primaria);
  color: var(--dv-cor-primaria-texto);
  box-shadow: var(--dv-sombra-2);
  --dv-barra-x: -50%;               /* centralização horizontal; no mobile vira 0 */
  transform: translateX(var(--dv-barra-x));
  animation: dv-barra-subir 360ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.dv-barra-carrinho[hidden] { display: none; }
/* Entra de baixo para cima (ao carregar e sempre que volta a aparecer) */
@keyframes dv-barra-subir {
  from { opacity: 0; transform: translate(var(--dv-barra-x), calc(100% + var(--dv-gutter))); }
  to { opacity: 1; transform: translate(var(--dv-barra-x), 0); }
}
@media (prefers-reduced-motion: reduce) { .dv-barra-carrinho { animation: none; } }
.dv-barra-carrinho__info { flex: 1; min-width: 0; }
.dv-barra-carrinho__valores { display: flex; align-items: baseline; gap: var(--dv-esp-2); font-size: var(--dv-texto-lg); font-weight: var(--dv-peso-forte); line-height: 1.2; }
.dv-barra-carrinho__sep { opacity: 0.4; font-weight: var(--dv-peso-normal); }
/* Progresso até o faturamento mínimo: linha fina entre o total e a nota */
.dv-barra-carrinho__minimo { height: 3px; margin-block: 5px 3px; border-radius: 2px; background: color-mix(in srgb, var(--dv-cor-acento) 25%, transparent); overflow: hidden; }
.dv-barra-carrinho__minimo[hidden] { display: none; }
.dv-barra-carrinho__minimo > span { display: block; height: 100%; border-radius: inherit; background: var(--dv-cor-acento); transition: width 240ms ease; }
@media (prefers-reduced-motion: reduce) { .dv-barra-carrinho__minimo > span { transition: none; } }
.dv-barra-carrinho__nota { overflow: hidden; font-size: var(--dv-texto-xs); opacity: 0.75; text-overflow: ellipsis; white-space: nowrap; }
.dv-barra-carrinho__acao {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--dv-esp-2);
  min-height: 2.75rem;
  padding: 0 var(--dv-esp-4);
  border-radius: var(--dv-raio-md);
  background: var(--dv-cor-acento);
  color: var(--dv-cor-acento-texto);
  font-size: var(--dv-texto-sm);
  font-weight: var(--dv-peso-forte);
  text-decoration: none;
  white-space: nowrap;
}
.dv-barra-carrinho__acao:hover { background: var(--dv-cor-acento-hover); }
.dv-barra-carrinho__acao:focus-visible { outline-color: #fff; }

/* Espaço no fim da página para a barra não cobrir o conteúdo; toasts acima dela */
body.tem-barra-carrinho { padding-bottom: 6rem; }
body.tem-barra-carrinho .dv-toasts { bottom: calc(var(--dv-gutter) + 5.5rem); }

/* Mobile: a barra deixa livre o canto direito, onde ficam os botões de chat de terceiros.
   Sem chat, zere a reserva: :root { --dv-reserva-chat: 0px; } */
@media (max-width: 699px) {
  .dv-barra-carrinho {
    left: var(--dv-gutter);
    right: calc(var(--dv-gutter) + var(--dv-reserva-chat, 3.5rem + var(--dv-esp-2)));
    width: auto;
    gap: var(--dv-esp-2);
    padding: var(--dv-esp-2) var(--dv-esp-2) var(--dv-esp-2) var(--dv-esp-3);
    --dv-barra-x: 0;
  }
  .dv-barra-carrinho__valores { font-size: var(--dv-texto-md); white-space: nowrap; }
  /* Só o ícone no mobile; o texto continua para leitores de tela */
  .dv-barra-carrinho__acao { justify-content: center; width: 2.75rem; padding: 0; }
  .dv-barra-carrinho__rotulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}