/*
Theme Name: FJ Imports
Theme URI: https://fjimports.links.red
Description: Tema da loja da FJ Imports. Filho do Twenty Twenty-Five, com a paleta B da marca no modo escuro. Cores e tipografia moram no theme.json; este arquivo cobre o que o theme.json nao alcanca.
Author: IP Solucoes
Author URI: https://agenciaipsolucoes.com.br
Template: twentytwentyfive
Version: 1.6.4
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.4
Text Domain: fj-imports
*/

/* A logo da marca e clara: garante que ela nunca apareca sobre area clara. */
.wp-block-site-logo img {
  max-width: 190px;
  height: auto;
}

/*
  Barra do topo em tres colunas: menu na esquerda, logo no centro, conta na direita.
  Duas armadilhas do tema de blocos moram aqui:
  1. O WooCommerce injeta o bloco de conta LOGO DEPOIS da navegacao, nao no fim. Por isso
     cada peca declara a coluna dela na mao: confiar na ordem do DOM joga a logo pra direita.
     E como a logo vem DEPOIS do bloco de conta no DOM, ela precisa declarar a linha tambem:
     sem `grid-row: 1` o grid empurra ela pra uma segunda linha, porque o cursor de
     posicionamento nao volta pra tras.
  2. O WordPress imprime `.wp-block-group-is-layout-flex { display: flex }` DEPOIS deste
     arquivo. Com uma classe so, o flex dele ganha e o grid nunca acontece. Por isso o
     seletor abaixo soma as duas classes: e o que faz o display: grid valer.
*/
.fj-barra-topo.wp-block-group-is-layout-flex {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.fj-barra-topo > .wp-block-navigation {
  grid-area: 1 / 1;
  justify-self: start;
}
.fj-barra-topo > .wp-block-site-logo {
  grid-area: 1 / 2;
  justify-self: center;
}
.fj-barra-topo > .wp-block-woocommerce-customer-account {
  grid-area: 1 / 3;
  justify-self: end;
}

/*
  Nas paginas de loja o WooCommerce injeta TAMBEM o mini carrinho, sempre antes da
  logo. Sem coluna declarada ele caia numa segunda linha. Os dois icones dividem a
  coluna 3: o de conta recua a largura de um icone, e so quando o carrinho existe.
*/
.fj-barra-topo > .wc-block-mini-cart {
  grid-area: 1 / 3;
  justify-self: end;
}
.fj-barra-topo > .wp-block-woocommerce-customer-account:has(+ .wc-block-mini-cart) {
  margin-right: 36px;
}

/* Em tela estreita a logo encolhe pra caber entre os dois icones. */
@media (max-width: 480px) {
  .fj-barra-topo > .wp-block-site-logo img { max-width: 150px; }
}

/* Cartao de produto do WooCommerce: superficie escura com fio fino, sem sombra. */
.wc-block-grid__product,
ul.products li.product {
  background: var(--wp--preset--color--superficie);
  border: 1px solid var(--wp--preset--color--borda);
  border-radius: 12px;
  padding: 14px;
}

/*
  Foto de produto sempre em fundo branco: e exigencia da imagem principal de
  marketplace e faz a peca respirar. O quadrado fixo evita que o placeholder do
  WooCommerce estique e vire um bloco branco gigante enquanto nao ha foto.
*/
.wc-block-grid__product-image img,
ul.products li.product img {
  background: #FFFFFF;
  border-radius: 8px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  width: 100%;
  height: auto;
}

/*
  Barra de ordenacao e contagem: o padrao do Woo nasce claro (some no tema escuro) e
  usa float, que no celular espreme a contagem em quatro linhas e joga o select pra
  fora da tela. Aqui as duas viram bloco, uma embaixo da outra.
*/
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
  float: none;
  display: block;
  width: 100%;
  margin: 0 0 14px;
}
.woocommerce .woocommerce-ordering select {
  width: 100%;
  max-width: 100%;
}
.woocommerce .woocommerce-ordering select,
.woocommerce-page .woocommerce-ordering select {
  background: var(--wp--preset--color--superficie);
  color: var(--wp--preset--color--contraste);
  border: 1px solid var(--wp--preset--color--borda-forte);
  border-radius: 8px;
  padding: 10px 12px;
}
.woocommerce .woocommerce-result-count {
  color: var(--wp--preset--color--apoio);
  font-size: 0.85rem;
}

/* Preco usa o laranja da marca, que e a cor de acao. */
.woocommerce-Price-amount,
.wc-block-grid__product-price {
  color: var(--wp--preset--color--acao);
  font-weight: 700;
}

/* Campo de formulario no escuro: o padrao do Woo assume fundo claro. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  background: var(--wp--preset--color--superficie);
  color: var(--wp--preset--color--contraste);
  border: 1px solid var(--wp--preset--color--borda-forte);
  border-radius: 8px;
  padding: 12px 14px;
}

/* Avisos do Woo (carrinho atualizado, erro de cupom) tambem nascem claros. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  background: var(--wp--preset--color--superficie);
  color: var(--wp--preset--color--contraste);
  border-top: 3px solid var(--wp--preset--color--acao);
}

/*
  Home e loja: grade de categorias e vitrine.
  O shortcode do WooCommerce nasce com layout de tema claro e float; aqui ele vira
  grade de verdade, no escuro, com a mesma linguagem do resto do site.

  Colunas fixas por faixa, decisao do Italo em 19/08:
  celular 2, tablet 3, desktop 4. Nada de auto-fill, que decidia sozinho e
  entregava uma coluna so no celular.

  Com duas colunas no celular o cartao fica estreito, entao titulo, preco e botao
  encolhem junto: senao o nome do produto quebra em cinco linhas e o botao estoura.
*/
.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }
}
@media (min-width: 1024px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
  }
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }
.woocommerce ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: center;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 0.95rem;
  line-height: 1.35;
  margin: 6px 0 0;
  color: var(--wp--preset--color--contraste);
}
.woocommerce ul.products li.product .button {
  margin-top: auto;
  align-self: center;
}

/* Cartao estreito no celular: tudo encolhe junto pra caber em duas colunas. */
@media (max-width: 767px) {
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 0.82rem;
    line-height: 1.3;
  }
  .woocommerce ul.products li.product .price,
  .woocommerce ul.products li.product .woocommerce-Price-amount {
    font-size: 0.92rem;
  }
  .woocommerce ul.products li.product .button {
    width: 100%;
    padding: 11px 8px;
    font-size: 0.78rem;
    letter-spacing: 0;
  }
  .woocommerce ul.products li.product { padding: 10px; }
  .woocommerce ul.products li.product-category h2 { font-size: 0.82rem; }
}

/* Cartao de categoria: mesma superficie do de produto, nome legivel no escuro. */
.woocommerce ul.products li.product-category a {
  text-decoration: none;
}
.woocommerce ul.products li.product-category h2 {
  font-size: 0.95rem;
  color: var(--wp--preset--color--contraste);
  margin-top: 10px;
}
.woocommerce ul.products li.product-category mark.count {
  background: transparent;
  color: var(--wp--preset--color--apoio);
  font-size: 0.78rem;
}

/* Menu em sobreposicao: fundo cheio, item grande, o suficiente pra dedo. */
.wp-block-navigation__responsive-container.is-menu-open {
  background: var(--wp--preset--color--base) !important;
  padding: 28px 24px;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  font-size: 1.15rem;
  font-weight: 600;
  padding: 10px 0;
}

/* Titulo de produto e de categoria seguem a familia de titulo da marca. */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product-category h2,
.woocommerce div.product .product_title {
  font-family: var(--wp--preset--font-family--titulo);
  font-weight: 700;
  letter-spacing: -0.015em;
}

/*
  Faixa de confianca: tres colunas lado a lado ate no celular, porque empilhar
  transforma o bloco numa torre e empurra o produto pra baixo da dobra. Em tela
  estreita o texto encolhe em vez de quebrar a linha.
*/
.fj-confianca .wp-block-column { min-width: 0; }
@media (max-width: 600px) {
  .fj-confianca .wp-block-column p:first-child { font-size: 0.72rem !important; line-height: 1.3 !important; }
  .fj-confianca .wp-block-column p:last-child { font-size: 0.64rem !important; line-height: 1.3 !important; }
  .fj-confianca .wp-block-columns { gap: 10px !important; }
}

/*
  A loja e as paginas de categoria NAO usam ul.products: elas usam o bloco
  wc-block-product-template, que traz o proprio responsivo (columns-N) e entrega
  UMA coluna no celular. As regras abaixo valem pra esse markup e sao o que de fato
  manda em /loja/ e em /product-category/. Seletor duplo de proposito, pra ganhar
  do CSS do proprio WooCommerce sem !important.
*/
.wc-block-product-template.wc-block-product-template__responsive,
.wp-block-woocommerce-product-template.wc-block-product-template {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
@media (min-width: 768px) {
  .wc-block-product-template.wc-block-product-template__responsive,
  .wp-block-woocommerce-product-template.wc-block-product-template {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }
}
@media (min-width: 1024px) {
  .wc-block-product-template.wc-block-product-template__responsive,
  .wp-block-woocommerce-product-template.wc-block-product-template {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
  }
}
.wc-block-product-template .wc-block-product {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
}

/*
  Nome de produto com 2 ou 3 linhas desalinhava preco e botao entre os cartoes da
  mesma fileira. O botao empurrado pro fim resolve sem travar altura de titulo.
*/
.wc-block-product-template .wc-block-product .wc-block-components-product-button {
  margin-top: auto;
}

/* Foto de produto do bloco: mesmo quadrado branco da grade do shortcode. */
.wc-block-product-template .wc-block-components-product-image img {
  background: #FFFFFF;
  border-radius: 8px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  width: 100%;
  height: auto;
}
.wc-block-product-template .wc-block-components-product-price {
  color: var(--wp--preset--color--acao);
  font-weight: 700;
}
.wc-block-product-template .wc-block-components-product-title {
  font-family: var(--wp--preset--font-family--titulo);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--wp--preset--color--contraste);
}

/*
  Cartao estreito no celular, no markup de bloco.
  Aqui o !important e necessario, nao e preguica: o template do WooCommerce carrega
  tamanho de fonte INLINE no elemento, e estilo inline ganha de qualquer seletor.
  Sem isso o nome do produto ocupa duas linhas grandes e o botao quebra em duas.
*/
@media (max-width: 767px) {
  .wc-block-product-template .wc-block-components-product-title,
  .wc-block-product-template .wc-block-components-product-title a {
    font-size: 0.8rem !important;
    line-height: 1.28 !important;
    margin-top: 4px !important;
  }
  .wc-block-product-template .wc-block-components-product-price,
  .wc-block-product-template .wc-block-components-product-price .woocommerce-Price-amount {
    font-size: 0.9rem !important;
    margin: 2px 0 !important;
  }
  .wc-block-product-template .wp-block-button__link,
  .wc-block-product-template .wc-block-components-product-button .wp-block-button__link {
    width: 100%;
    padding: 10px 6px !important;
    font-size: 0.74rem !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    border-radius: 8px;
  }
  .wc-block-product-template .wc-block-product { gap: 2px; }
}

/* ==========================================================================
   Pagina de produto
   ========================================================================== */

/*
  Galeria: sem o carrossel inicializado, o WooCommerce empilha as imagens e sobra
  um bloco escuro gigante no lugar da foto. Aqui a primeira imagem ocupa a largura
  toda, no mesmo quadrado branco da vitrine, e as demais somem.
*/
.woocommerce div.product .woocommerce-product-gallery {
  width: 100%;
  float: none;
  margin: 0 0 26px;
  opacity: 1 !important;
}
.woocommerce div.product .woocommerce-product-gallery__wrapper {
  display: block;
  width: 100% !important;
  transform: none !important;
}
.woocommerce div.product .woocommerce-product-gallery__image {
  width: 100% !important;
}
.woocommerce div.product .woocommerce-product-gallery__image:not(:first-child) {
  display: none;
}
.woocommerce div.product .woocommerce-product-gallery__image img {
  width: 100%;
  height: auto;
  background: #FFFFFF;
  border-radius: 12px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}
/* A lupa de tela cheia so faz sentido com o carrossel de pe. */
.woocommerce div.product .woocommerce-product-gallery__trigger { display: none; }

/* Campo de quantidade: o padrao do Woo nasce branco e grita no tema escuro. */
.woocommerce div.product form.cart .quantity input.qty {
  background: var(--wp--preset--color--superficie);
  color: var(--wp--preset--color--contraste);
  border: 1px solid var(--wp--preset--color--borda-forte);
  border-radius: 8px;
  padding: 14px 8px;
  width: 74px;
  text-align: center;
  font-size: 1rem;
}
.woocommerce div.product form.cart { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.woocommerce div.product form.cart .button { flex: 1 1 200px; }

/* Estoque e meta: cinza de apoio, nao branco puro competindo com o titulo. */
.woocommerce div.product .stock,
.woocommerce div.product .product_meta { color: var(--wp--preset--color--apoio); font-size: 0.85rem; }
.woocommerce div.product .product_meta { border-top: 1px solid var(--wp--preset--color--borda); padding-top: 16px; margin-top: 22px; }
.woocommerce div.product .product_meta a { color: var(--wp--preset--color--contraste); }

/* Bloco de apoio: atalho de WhatsApp e garantias, logo abaixo do botao de comprar. */
.fj-produto-apoio {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--wp--preset--color--borda);
}
.fj-produto-whats {
  display: block;
  text-align: center;
  padding: 15px 18px;
  border: 1px solid var(--wp--preset--color--borda-forte);
  border-radius: 10px;
  background: var(--wp--preset--color--superficie);
  color: var(--wp--preset--color--contraste);
  font-weight: 700;
  text-decoration: none;
}
.fj-produto-garantias {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.fj-produto-garantias li {
  position: relative;
  padding-left: 20px;
  font-size: 0.87rem;
  line-height: 1.5;
  color: var(--wp--preset--color--apoio);
}
.fj-produto-garantias li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--wp--preset--color--acao);
}
.fj-produto-garantias strong { color: var(--wp--preset--color--contraste); font-weight: 700; }
.fj-produto-link { margin-top: 16px; font-size: 0.85rem; }
.fj-produto-link a { color: var(--wp--preset--color--apoio); }

/*
  NAO reintroduzir grid de duas colunas aqui.
  A pagina de produto usa o template de BLOCOS do WooCommerce, que ja monta duas
  colunas sozinho no desktop. Um `display: grid` em `.woocommerce div.product`
  pega o wrapper de blocos e joga cada filho numa coluna automatica: o titulo e a
  descricao viram uma tira de uma letra por linha. Aconteceu em 19/08.
*/
}