/* ==========================================================================
   Draive · Tema WordPress
   O que o protótipo não tinha: classes do WordPress/WooCommerce, imagens reais,
   abas em links (filtros feitos no servidor), estados de carregamento e o logo em imagem.
   ========================================================================== */

/* ---------- Classes do WordPress ---------- */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.alignleft { float: left; margin: 0 var(--dv-esp-4) var(--dv-esp-3) 0; }
.alignright { float: right; margin: 0 0 var(--dv-esp-3) var(--dv-esp-4); }
.aligncenter { display: block; margin-inline: auto; }
.wp-caption-text { font-size: var(--dv-texto-xs); color: var(--dv-cor-texto-suave); }

/* Barra de administração: o header sticky desce junto */
.admin-bar .dv-header { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) { .admin-bar .dv-header { top: 0; } }

/* ---------- Logo ---------- */
.dv-header__logo:has(.dv-header__logo-img) { padding: 0; border: 0; }
.dv-header__logo-img { width: auto; max-height: 2.25rem; }
/* Logotipo de Draive → Configurações → Estilo: altura escolhida (celular / desktop), largura pela proporção */
.dv-header__logo:has(.dv-header__logo-img--draive) { height: auto; }
.dv-header__logo-img--draive { display: block; height: var(--dv-logo-altura-mobile, 2.25rem); max-height: none; max-width: min(100%, 60vw); object-fit: contain; object-position: left center; }
@media (min-width: 1100px) {
  .dv-header__logo-img--draive { height: var(--dv-logo-altura, 2.25rem); max-width: 320px; }
}

/* ---------- Imagens de produto (placeholder .dv-img com foto) ---------- */
/* A foto ocupa a caixa por posição: no Safari, height: 100% não resolve contra uma altura vinda só de aspect-ratio. */
.dv-img--foto { position: relative; overflow: hidden; background: var(--dv-cor-fundo); }
.dv-img--foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
button.dv-img { padding: 0; cursor: pointer; }
button.dv-img[aria-pressed="true"] { border-color: var(--dv-cor-texto); box-shadow: 0 0 0 1px var(--dv-cor-texto); }
.dv-produto > a[aria-hidden] { display: block; }

/* ---------- Abas como links (Pedidos recentes: filtro no servidor) ---------- */
a.dv-abas__opcao { color: inherit; text-decoration: none; }
a.dv-abas__opcao > span { color: var(--dv-cor-texto-suave); }
a.dv-abas__opcao:hover > span { color: var(--dv-cor-texto); }
a.dv-abas__opcao[aria-current] > span { color: var(--dv-cor-texto); font-weight: var(--dv-peso-medio); }
a.dv-abas__opcao[aria-current] > span::after {
  content: "";
  position: absolute;
  inset: auto var(--dv-esp-3) -1px;
  height: 2px;
  background: var(--dv-cor-acento);
}
a.dv-abas__opcao:focus-visible { outline: var(--dv-foco); outline-offset: calc(-1 * var(--dv-foco-largura)); }

/* ---------- Chips e links que viram botões ---------- */
a.dv-chip { color: inherit; text-decoration: none; }
.dv-paginacao span.dv-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
a.dv-btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }

/* ---------- Carregando (trocas parciais e chamadas à API) ---------- */
[aria-busy="true"] { cursor: progress; }
[data-dv-parcial="resultados"][aria-busy="true"],
[data-dv="lista"][aria-busy="true"] { opacity: 0.55; transition: opacity var(--dv-duracao) ease-out; }
.dv-opcao-filial[aria-busy="true"] { opacity: 0.6; }

/* ---------- Toast de erro ---------- */
.dv-toast--erro { background: var(--dv-cor-erro); color: #fff; }

/* ---------- Conta ---------- */
@media (min-width: 900px) {
  .dv-conta__colunas--uma { grid-template-columns: minmax(0, 32rem); justify-content: center; }
}
.dv-conta__avisos:empty, [data-dv="avisos"]:empty { display: none; }
[data-dv="avisos"] { display: grid; gap: var(--dv-esp-2); }
[data-dv="avisos"]:focus { outline: none; }

/* Avisos do WooCommerce (woocommerce/notices) com link ou botão dentro */
/* O WooCommerce põe o botão antes do texto: com flex, o botão vai para depois (order). */
.dv-aviso > div:has(> a.button, > .wc-forward) { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--dv-esp-2); }
.dv-aviso a.button, .dv-aviso .wc-forward { order: 1; font-weight: var(--dv-peso-medio); }

/* ---------- Rodapé ---------- */
.dv-rodape__lista { display: flex; flex-wrap: wrap; gap: var(--dv-esp-3); margin: 0; padding: 0; list-style: none; }
.dv-rodape__link { color: inherit; }

/* ---------- Páginas de conteúdo (page.php, index.php) ---------- */
.dv-conteudo { display: grid; gap: var(--dv-esp-5); }
.dv-conteudo__texto { max-width: 72ch; }
.dv-conteudo__texto > * + * { margin-top: var(--dv-esp-3); }
.dv-conteudo__texto img { height: auto; }
.dv-lista-posts { display: grid; gap: var(--dv-esp-4); }
.dv-resumo-post { display: grid; gap: var(--dv-esp-2); }
.dv-resumo-post__titulo { font-size: var(--dv-texto-lg); }

/* ---------- Produto variável: formulário padrão do WooCommerce ---------- */
.dv-produto-pagina__info form.cart { display: grid; gap: var(--dv-esp-3); }
.dv-produto-pagina__info form.cart select { min-height: var(--dv-altura-controle); padding: 0 var(--dv-esp-3); border: 1px solid var(--dv-cor-borda-forte); border-radius: var(--dv-raio-md); }
.dv-produto-pagina__info form.cart .button { justify-self: start; min-height: var(--dv-altura-controle); padding: 0 var(--dv-esp-4); border: 0; border-radius: var(--dv-raio-md); background: var(--dv-cor-acento); color: var(--dv-cor-acento-texto); font-weight: var(--dv-peso-medio); }