/* Eletrobots · a camada de marca sobre o Kadence
   ==============================================

   O sistema de design não tem uma classe sequer: é React com style inline
   lendo var(--eb-*). O WooCommerce é o oposto — HTML fixo, cheio de classe,
   que a gente não escolhe. Esta folha é a ponte entre os dois: traduz os
   tokens da marca para os seletores que o Woo realmente imprime.

   Os seletores daqui foram colhidos do site vivo, não inventados. Estão
   catalogados em MARCACAO-REAL.md. Se um update do Kadence ou do Woo mudar
   a marcação, recapture antes de mexer aqui.

   Ordem: tokens, base, cabeçalho, cartão de produto, página de produto,
   botões e formulários, rodapé, celular.

   Regra que vale pra folha inteira: cor nunca é a única informação, canto é
   zero, sombra não existe (o sistema separa por filete e por fundo), e todo
   dígito que é medida ou preço sai em mono. */

@import url("tokens/fonts.css");
@import url("tokens/colors.css");
@import url("tokens/typography.css");
@import url("tokens/spacing.css");
@import url("tokens/shape.css");

/* ── 1. Base ──────────────────────────────────────────────────────────── */

body {
  background: var(--eb-surface-page);
  color: var(--eb-text-1);
  font-family: var(--eb-font-sans);
  font-size: var(--eb-size-body);
  font-weight: var(--eb-weight-body);
  line-height: var(--eb-leading-body);
}

h1, h2, h3, h4,
.entry-title,
.wp-block-heading {
  font-family: var(--eb-font-sans);
  font-weight: var(--eb-weight-bold);
  color: var(--eb-text-1);
}

h1, .entry-title { font-size: var(--eb-size-h1); line-height: var(--eb-leading-h1); letter-spacing: var(--eb-track-h1); }
h2 { font-size: var(--eb-size-h2); line-height: var(--eb-leading-h2); letter-spacing: var(--eb-track-h2); }
h3 { font-size: var(--eb-size-h3); line-height: var(--eb-leading-h3); letter-spacing: var(--eb-track-h3); }

/* O foco é visível e é tinta. Nunca remover sem repor. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: var(--eb-focus-ring);
  outline-offset: var(--eb-focus-offset);
}

/* Canto zero em tudo que o Kadence arredonda por padrão. */
.wp-block-button__link,
.button,
.kb-button,
input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], input[type="search"], input[type="password"],
select, textarea,
.entry.loop-entry,
.product-loop-boxed {
  border-radius: var(--eb-radius);
}

/* ── 2. Cabeçalho ─────────────────────────────────────────────────────── */

/* A barra de cima é tinta, não azul. Texto em mono porque é informação
   operacional — frete e prazo são dado, não conversa. */
.site-top-header-wrap,
.header-top-row {
  background: var(--eb-surface-dark);
  color: var(--eb-text-on-dark);
  font-family: var(--eb-font-mono);
  font-size: var(--eb-size-data);
  letter-spacing: 0.02em;
}

.site-top-header-wrap a,
.header-top-row a {
  color: var(--eb-text-on-dark);
  text-decoration: none;
}

.site-top-header-wrap a:hover,
.header-top-row a:hover {
  color: var(--eb-pin-2-on-dark);
}

.site-main-header-wrap,
.header-main-row {
  background: var(--eb-surface-card);
  border-bottom: var(--eb-border);
}

/* A busca deixa de ser lupa discreta e vira campo com moldura de tinta.
   Altura de controle grande: é o elemento mais usado de uma loja de mil SKUs. */
.header-search-bar input[type="search"],
.search-toggle-open-container input[type="search"],
form.woocommerce-product-search input[type="search"],
form.search-form input[type="search"] {
  height: var(--eb-control-lg);
  padding: 0 var(--eb-space-4);
  border: var(--eb-border-ink);
  background: var(--eb-surface-card);
  font-family: var(--eb-font-sans);
  font-size: var(--eb-size-body);
  color: var(--eb-text-1);
}

form.woocommerce-product-search input[type="search"]::placeholder,
form.search-form input[type="search"]::placeholder {
  color: var(--eb-text-3);
}

/* ── 3. Cartão de produto ─────────────────────────────────────────────── */

/* Atenção: a home usa blocos (wc-block-grid__*) e a categoria usa o loop
   clássico (woocommerce-loop-product__*). São duas famílias de classe pro
   mesmo cartão. Quem estiliza só uma deixa metade da loja sem marca. */

li.product,
.wc-block-grid__product,
.entry.loop-entry {
  background: var(--eb-surface-card);
  border: var(--eb-border);
  border-radius: var(--eb-radius);
  box-shadow: none;
  transition: border-color var(--eb-transition);
}

li.product:hover,
.wc-block-grid__product:hover,
.entry.loop-entry:hover {
  border-color: var(--eb-ink);
}

/* A foto sempre no mesmo quadrado, fundo branco puro. Sem isso a grade
   fica com produto de escala diferente e parece marketplace. */
li.product img,
.wc-block-grid__product img,
.woocommerce-loop-image-link img {
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--eb-white);
  width: 100%;
  height: auto;
}

.wc-block-grid__product-title,
.woocommerce-loop-product__title,
li.product .entry-title {
  font-family: var(--eb-font-sans);
  font-size: var(--eb-size-body);
  font-weight: var(--eb-weight-body);
  line-height: var(--eb-leading-tight);
  color: var(--eb-text-1);
  letter-spacing: 0;
  /* Duas linhas e corta: título de três linhas desalinha a grade inteira. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── 4. Preço ─────────────────────────────────────────────────────────── */

/* Preço é número, então é mono — e é a única coisa que usa o laranja.
   O botão é tinta justamente pra não competir com ele. */
.price,
.wc-block-grid__product-price,
.woocommerce-Price-amount {
  font-family: var(--eb-font-mono);
  font-weight: var(--eb-weight-bold);
  color: var(--eb-price);
  font-variant-numeric: tabular-nums;
}

.summary .price,
.summary .price .woocommerce-Price-amount {
  font-size: var(--eb-size-price);
  line-height: 1.2;
}

/* O símbolo da moeda é menor que o número: quem lê preço lê o número. */
.woocommerce-Price-currencySymbol {
  font-size: 0.62em;
  font-weight: var(--eb-weight-body);
  color: var(--eb-price-muted);
  margin-right: 0.15em;
}

/* Preço riscado da promoção fica cinza e fino, nunca laranja. */
.price del,
.price del .woocommerce-Price-amount {
  color: var(--eb-text-3);
  font-weight: var(--eb-weight-body);
  font-size: 0.7em;
  text-decoration-thickness: 1px;
}

.price ins {
  text-decoration: none;
}

/* Linha do Pix e do parcelamento — impressas pelo functions.php, logo
   abaixo do preço. Mono no valor, sans na explicação. */
.eb-pix {
  font-family: var(--eb-font-mono);
  font-size: var(--eb-size-data);
  color: var(--eb-ok);
  margin: var(--eb-space-1) 0 0;
}

.eb-parcelas {
  font-family: var(--eb-font-mono);
  font-size: var(--eb-size-data);
  color: var(--eb-text-2);
  margin: var(--eb-space-1) 0 0;
}

/* ── 5. Estoque ───────────────────────────────────────────────────────── */

/* Cor E palavra: o ponto colorido nunca carrega a informação sozinho. */
.stock {
  font-family: var(--eb-font-mono);
  font-size: var(--eb-size-data);
  line-height: var(--eb-leading-data);
  display: flex;
  align-items: center;
  gap: var(--eb-space-2);
  margin: var(--eb-space-3) 0;
}

.stock::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  background: currentColor;
}

.stock.in-stock { color: var(--eb-ok); }
.stock.available-on-backorder { color: var(--eb-warn); }
.stock.out-of-stock { color: var(--eb-error); }

/* Prazo de postagem, logo abaixo do estoque. Impresso pelo functions.php. */
.eb-prazo {
  font-family: var(--eb-font-mono);
  font-size: var(--eb-size-data);
  color: var(--eb-text-2);
  margin: calc(var(--eb-space-2) * -1) 0 var(--eb-space-4);
}

/* ── 6. Botões ────────────────────────────────────────────────────────── */

/* O botão principal é tinta. Isso é decisão de marca, não gosto: o laranja
   está reservado pro preço e perde a função se virar botão. */
.button,
.wp-block-button__link,
.single_add_to_cart_button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  /* inline-flex, não inline-block: o Woo imprime o botão ora como <button>,
     ora como <a class="button">. Link é inline, e min-height NÃO se aplica a
     inline não-substituído — sem isto o botão da grade nasce com 19px em vez
     dos 44px de alvo de toque. O Woo até põe um inline-block por conta
     própria, mas depender da folha dele pra acessibilidade é frágil. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--eb-action);
  color: var(--eb-action-fg);
  border: none;
  border-radius: var(--eb-radius);
  font-family: var(--eb-font-sans);
  font-weight: var(--eb-weight-bold);
  font-size: var(--eb-size-body);
  letter-spacing: 0;
  text-transform: none;
  min-height: var(--eb-control-md);
  padding: 0 var(--eb-space-5);
  transition: background var(--eb-transition);
}

.button:hover,
.single_add_to_cart_button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
  background: var(--eb-action-hover);
  color: var(--eb-action-fg);
}

.button:disabled,
.button.disabled,
.single_add_to_cart_button:disabled {
  background: var(--eb-action-disabled-bg);
  color: var(--eb-action-disabled-fg);
  cursor: not-allowed;
}

/* Na página de produto o botão é grande e ocupa a largura: é a ação
   principal da tela. */
.summary .single_add_to_cart_button {
  min-height: var(--eb-control-lg);
  width: 100%;
  font-size: var(--eb-size-lg);
}

/* ── 7. Quantidade ────────────────────────────────────────────────────── */

.quantity {
  display: inline-flex;
  align-items: stretch;
  border: var(--eb-border-ink);
  height: var(--eb-control-lg);
}

.quantity input.qty {
  width: 64px;
  border: none;
  text-align: center;
  font-family: var(--eb-font-mono);
  font-size: var(--eb-size-body);
  font-weight: var(--eb-weight-bold);
  background: var(--eb-surface-card);
  color: var(--eb-text-1);
  -moz-appearance: textfield;
  appearance: textfield;
}

.quantity input.qty::-webkit-outer-spin-button,
.quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.quantity input.minus,
.quantity input.plus {
  width: var(--eb-control-md);
  border: none;
  background: var(--eb-surface-card);
  color: var(--eb-text-1);
  font-family: var(--eb-font-mono);
  font-size: var(--eb-size-lg);
  cursor: pointer;
  transition: background var(--eb-transition);
}

.quantity input.minus:hover,
.quantity input.plus:hover {
  background: var(--eb-bone);
}

/* ── 8. Página de produto ─────────────────────────────────────────────── */

.summary.entry-summary .product_title {
  font-size: var(--eb-size-h1);
  line-height: var(--eb-leading-h1);
  letter-spacing: var(--eb-track-h1);
  margin-bottom: var(--eb-space-3);
}

/* SKU e avaliação em rótulo mono, caixa alta — é etiqueta, não fala. */
.eb-meta-linha {
  font-family: var(--eb-font-mono);
  font-size: var(--eb-size-label);
  letter-spacing: var(--eb-track-label);
  text-transform: uppercase;
  color: var(--eb-text-3);
  margin-bottom: var(--eb-space-4);
}

.woocommerce-product-details__short-description {
  color: var(--eb-text-2);
  font-size: var(--eb-size-body);
  line-height: var(--eb-leading-body);
  margin-bottom: var(--eb-space-4);
}

/* Tabela de especificação: mono nos dois lados, filete entre linhas.
   Número é sagrado — tabular-nums pra coluna alinhar. */
.woocommerce-product-attributes,
.shop_attributes {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--eb-font-mono);
  font-size: var(--eb-size-data);
  font-variant-numeric: tabular-nums;
}

.shop_attributes th,
.shop_attributes td {
  border: none;
  border-bottom: var(--eb-border);
  padding: var(--eb-space-3) 0;
  text-align: left;
}

.shop_attributes th {
  color: var(--eb-text-3);
  font-weight: var(--eb-weight-body);
  text-transform: uppercase;
  letter-spacing: var(--eb-track-label);
  font-size: var(--eb-size-label);
  width: 40%;
}

.shop_attributes td { color: var(--eb-text-1); }

/* Abas: filete embaixo, sem caixa nem cantinho. */
.woocommerce-tabs ul.wc-tabs {
  border-bottom: var(--eb-border-strong);
  padding: 0;
  margin: 0 0 var(--eb-space-6);
  display: flex;
  gap: var(--eb-space-5);
}

.woocommerce-tabs ul.wc-tabs::before { display: none; }

.woocommerce-tabs ul.wc-tabs li {
  background: none;
  border: none;
  border-radius: 0;
  margin: 0;
  padding: 0;
}

.woocommerce-tabs ul.wc-tabs li a {
  font-family: var(--eb-font-sans);
  font-weight: var(--eb-weight-bold);
  font-size: var(--eb-size-body);
  color: var(--eb-text-3);
  padding: var(--eb-space-3) 0;
  display: block;
  border-bottom: 2px solid transparent;
}

.woocommerce-tabs ul.wc-tabs li.active a {
  color: var(--eb-text-1);
  border-bottom-color: var(--eb-ink);
}

/* ── 9. Voltinho ──────────────────────────────────────────────────────── */

/* Regra da bíblia: o Voltinho só aparece onde a pessoa pode estar travada —
   dica, erro, vazio, espera. NUNCA em cima de preço, botão de compra ou
   dado técnico. Se você está tentado a pôr ele ao lado do "Adicionar ao
   carrinho", a resposta é não. */

.eb-voltinho-dica {
  display: flex;
  gap: var(--eb-space-4);
  align-items: flex-start;
  background: var(--eb-bone);
  border-left: 3px solid var(--eb-pin-3);
  padding: var(--eb-space-4);
  margin: var(--eb-space-5) 0;
}

.eb-voltinho-dica img {
  width: 48px;
  height: auto;
  flex: none;
}

.eb-voltinho-dica p {
  margin: 0;
  font-size: var(--eb-size-sm);
  line-height: var(--eb-leading-tight);
  color: var(--eb-text-2);
}

/* Estado vazio: busca sem resultado, carrinho vazio, 404. */
.eb-vazio {
  text-align: center;
  padding: var(--eb-space-9) var(--eb-space-4);
}

.eb-vazio img {
  width: 120px;
  height: auto;
  margin-bottom: var(--eb-space-5);
}

.eb-vazio h2 {
  font-size: var(--eb-size-h2);
  margin-bottom: var(--eb-space-3);
}

.eb-vazio p {
  color: var(--eb-text-2);
  max-width: 46ch;
  margin: 0 auto var(--eb-space-5);
}

/* ── 10. Rodapé ───────────────────────────────────────────────────────── */

.site-footer,
.site-footer-wrap {
  background: var(--eb-surface-dark);
  color: var(--eb-text-on-dark-2);
}

.site-footer a,
.site-footer-wrap a {
  color: var(--eb-text-on-dark-2);
  text-decoration: none;
}

.site-footer a:hover,
.site-footer-wrap a:hover {
  color: var(--eb-text-on-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-footer h2,
.site-footer h3,
.site-footer .widget-title {
  color: var(--eb-text-on-dark);
  font-size: var(--eb-size-label);
  letter-spacing: var(--eb-track-label);
  text-transform: uppercase;
  font-family: var(--eb-font-mono);
  font-weight: var(--eb-weight-body);
  margin-bottom: var(--eb-space-4);
}

/* CNPJ e razão social em mono: é dado cadastral. */
.eb-rodape-legal {
  font-family: var(--eb-font-mono);
  font-size: var(--eb-size-label);
  color: var(--eb-text-on-dark-3);
  line-height: var(--eb-leading-data);
  border-top: var(--eb-border-dark);
  padding-top: var(--eb-space-4);
  margin-top: var(--eb-space-6);
}

/* ── 11. Celular ──────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  /* Corpo nunca abaixo de 16px no celular: menos que isso o iOS dá zoom
     sozinho ao focar um campo. */
  body { font-size: 16px; }

  input[type="text"], input[type="email"], input[type="tel"],
  input[type="number"], input[type="search"], select, textarea {
    font-size: 16px;
  }

  h1, .entry-title, .summary .product_title {
    font-size: var(--eb-size-h2);
  }

  /* Alvo de toque mínimo em tudo que se clica. */
  .button, .single_add_to_cart_button,
  .quantity input.minus, .quantity input.plus {
    min-height: var(--eb-touch-min);
  }

  /* Barra fixa de compra. O botão flutuante do WhatsApp precisa subir
     junto — senão cobre exatamente a ação que paga a conta. */
  .eb-barra-compra {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 99;
    display: flex;
    align-items: center;
    gap: var(--eb-space-4);
    background: var(--eb-surface-card);
    border-top: var(--eb-border-strong);
    padding: var(--eb-space-3) var(--eb-margin-mobile);
  }

  .eb-barra-compra .price {
    font-size: var(--eb-size-lg);
    margin: 0;
  }

  .eb-barra-compra .button {
    flex: 1;
    min-height: var(--eb-touch-min);
  }

  body.single-product { padding-bottom: 84px; }

  body.single-product .eletrobots-floating-whatsapp,
  body.single-product [class*="floating-whatsapp"] {
    bottom: 96px;
  }
}