/* ============================================================
   fpv-produtos.css — grade de produtos em VITRINE (task 18, pivô
   comercial: loja passa a vender só drones e rádios).

   HISTÓRICO: a versão anterior aqui era uma grade densa estilo
   BYDJI (bydji.com) — cards pequenos, sem borda/sombra, cantos
   retos, muitas colunas via auto-fill (ver git log para os tokens
   originais extraídos ao vivo de bydji/live/, NÃO versionado).

   Task 18 troca a densidade por VITRINE: catálogo pequeno e
   especializado, então cada produto ganha destaque — 1 card por
   linha no mobile, no MÁXIMO 2 por linha no desktop (nunca mais),
   imagem 4:3 grande sem padding interno, título/preço bem maiores.
   Linguagem visual alinhada ao cartão de destaque (fpv-destaque.css):
   cantos 4px, SEM sombra pesada por padrão (o usuário removeu a
   shadow do destaque em 2026-08-24) — aqui harmonizamos com uma
   borda sutil + sombra leve só no hover (o card de destaque é único
   na página e não precisa de affordance de clique; os cards da
   grade precisam, daí o hover discreto). object-fit:contain na foto
   permanece regra inviolável (produto sobre fundo branco, sem corte).
   ============================================================ */

/* fundo cinza claro por trás da grade — equivalente ao
   --ThemesBodyColor (#F0F0F0) do BYDJI: como o card em si não tem
   borda/sombra (ver abaixo), esse leve contraste de página é o que
   separa um card do outro visualmente, igual à loja de referência. */
#fpv-produtos {
  background: #F0F0F0;
  padding: 16px;
  border-radius: 4px;
}

/* ---------- guarda do cascade para o atributo `hidden` ----------
   BUG (task 14b, rolagem infinita, 2026-08-24): mesma classe de bug já
   corrigida em fpv-produto-pagina.css (task 2, 2026-08-13). Vários
   elementos alternados via `elemento.hidden = true/false` no JS
   (.fpv-prod-grid, .fpv-prod-more-error, .fpv-prod-loadmore-btn, ...)
   definem `display` explicitamente nas regras abaixo — e uma regra de
   origem "user agent" (`[hidden] { display: none }` do browser) SEMPRE
   perde para qualquer declaração `display` de origem "author" com peso
   normal, independente de especificidade (CSS Cascading §6.1: origem e
   importância são resolvidas ANTES de especificidade). Consequência real
   observada: o bloco "Não foi possível carregar mais produtos." e o
   botão de fallback "Carregar mais" ficavam sempre presentes no DOM
   assim que criados (ensureInfraElements, na primeira página com mais
   de 1 página), mesmo com `.hidden = true` — só ficavam fora da tela até
   o usuário rolar até o fim da grade, onde de fato ficam posicionados,
   parecendo um "erro no fim da lista" que na verdade nunca existiu.
   Reforçamos aqui com !important para o atributo `hidden` sempre vencer,
   cobrindo qualquer elemento dentro da seção (atual ou futuro). */
#fpv-produtos [hidden] {
  display: none !important;
}

/* ---------- grade em vitrine: 1 col mobile, MÁX 2 col desktop ---------- */
#fpv-produtos .fpv-prod-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 640px) {
  #fpv-produtos .fpv-prod-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

@media (min-width: 1024px) {
  #fpv-produtos .fpv-prod-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
}

/* ---------- card (vitrine: cantos 4px como o destaque, borda sutil em
   vez de sombra pesada, sombra leve só no hover) ---------- */
#fpv-produtos .fpv-card {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  box-shadow: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#fpv-produtos .fpv-card:hover {
  text-decoration: none;
  border-color: #d5d5d5;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

/* imagem: 4:3 GRANDE, fundo branco, sem padding interno — mesma
   linguagem do cartão em destaque (fpv-destaque.css). object-fit:contain
   permanece regra inviolável (produto inteiro visível, sem corte). */
#fpv-produtos .fpv-card-imgwrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #fff;
  overflow: hidden;
}

#fpv-produtos .fpv-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0;
  transition: transform 0.3s ease, opacity 0.25s ease;
}

/* hover discreto: zoom bem sutil (card grande sem padding não deveria
   "saltar" na tela) */
#fpv-produtos .fpv-card:hover .fpv-card-img {
  transform: scale(1.03);
}

/* ---------- slide de fotos dentro do card (task 18): setas nas extremidades
   + dots discretos, só criados pelo JS quando o produto tem 2+ fotos
   (fpv-produtos.js). Mesmo padrão visual das setas do antigo bloco de
   destaque (fpv-destaque.css, removido) — contraste escuro semitransparente,
   círculo, sem depender de ícone externo. ---------- */
#fpv-produtos .fpv-card-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: rgba(16, 17, 20, 0.5);
  color: #fff;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  transition: background 0.15s ease;
}

#fpv-produtos .fpv-card-arrow:hover {
  background: rgba(16, 17, 20, 0.75);
}

#fpv-produtos .fpv-card-arrow-prev { left: 10px; }
#fpv-produtos .fpv-card-arrow-next { right: 10px; }

#fpv-produtos .fpv-card-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  z-index: 5;
}

#fpv-produtos .fpv-card-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.65);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

#fpv-produtos .fpv-card-dot:hover {
  background: rgba(255, 255, 255, 0.9);
}

#fpv-produtos .fpv-card-dot.is-active {
  background: #FF6B00;
  box-shadow: none;
  transform: scale(1.2);
}

/* ---------- ícone "adicionar ao carrinho" (task 23): canto inferior
   direito da imagem — livre mesmo com o slide de fotos (setas ficam no
   meio das laterais, dots centrados no rodapé), e não compete por
   espaço com o preço em destaque (a alternativa "ao lado do preço" foi
   descartada por esse motivo — ver comentário em fpv-produtos.js). ---------- */
#fpv-produtos .fpv-card-cart-btn {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 6;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: #FF6B00;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: background 0.15s ease, transform 0.15s ease;
}

#fpv-produtos .fpv-card-cart-btn:hover {
  background: #e65f00;
  transform: scale(1.06);
}

#fpv-produtos .fpv-card-cart-btn:disabled,
#fpv-produtos .fpv-card-cart-btn.is-disabled {
  background: #b9bcc2;
  cursor: not-allowed;
  box-shadow: none;
  opacity: 0.7;
  transform: none;
}

/* ---------- botão "comprar via WhatsApp" (task 37): versão compacta (só
   ícone) do módulo compartilhado site/assets/fpv-whatsapp.js — fica
   COLADO no ícone de carrinho, no canto inferior direito (pedido do dono:
   "quero que os botões carrinho e whatsapp juntos"; antes ficavam em
   cantos opostos da imagem). O deslocamento é a largura do carrinho
   (2.25rem) mais o mesmo respiro de 10px da borda; se mudar o tamanho
   dos ícones, mude os dois juntos. Verde igual ao do botão "Fale no
   WhatsApp" da página Fale Conosco (.fpv-ctt-whatsapp-btn em
   fpv-contato.css) — mesmo tom em todo o site. Mesmo z-index do
   carrinho (acima dos dots do slide, centralizados no rodapé). ---------- */
#fpv-produtos .fpv-card-wa-btn {
  position: absolute;
  right: calc(10px + 2.25rem + 8px);
  bottom: 10px;
  z-index: 6;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: #1DA851;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: background 0.15s ease, transform 0.15s ease;
}

#fpv-produtos .fpv-card-wa-btn:hover {
  background: #178F45;
  transform: scale(1.06);
}

#fpv-produtos .fpv-card-wa-btn .fpv-wa-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  line-height: 0;
}

#fpv-produtos .fpv-card-wa-btn .fpv-wa-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------- botão "Previsualizar" (task 23): rodapé do corpo do card,
   texto discreto — não deve competir visualmente com o preço acima. ---------- */
#fpv-produtos .fpv-card-preview-btn {
  align-self: flex-start;
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #666;
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

#fpv-produtos .fpv-card-preview-btn:hover {
  color: #FF6B00;
}

/* ---------- toast "Produto adicionado ao carrinho" (task 23): CSS-only,
   ~2s (fade in + hold + fade out todo dentro do @keyframes) — o JS só
   alterna a classe .is-visible, o tempo/curva de exibição vive aqui. ---------- */
.fpv-prod-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(16px);
  z-index: 2000;
  background: rgba(20, 20, 20, 0.92);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  opacity: 0;
  pointer-events: none;
  max-width: calc(100vw - 32px);
  text-align: center;
}

.fpv-prod-toast.is-visible {
  animation: fpv-prod-toast-inout 2s ease forwards;
}

@keyframes fpv-prod-toast-inout {
  0% { opacity: 0; transform: translateX(-50%) translateY(16px); }
  10% { opacity: 1; transform: translateX(-50%) translateY(0); }
  85% { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(8px); }
}

/* selo de desconto sobre a imagem, no canto — oval vermelho */
#fpv-produtos .fpv-card-ribbon {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #FF0000;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  padding: 5px 10px;
  border-radius: 999px;
  letter-spacing: 0.01em;
}

/* corpo do card */
#fpv-produtos .fpv-card-body {
  padding: 16px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

#fpv-produtos .fpv-card-title {
  font-family: "FPVHeaderSans", "Segoe UI", Arial, sans-serif;
  font-size: 20px;
  line-height: 1.3;
  min-height: calc(20px * 1.3 * 2);
  color: #262a2f;
  font-weight: 700;
  margin: 0 0 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#fpv-produtos .fpv-card-meta {
  font-size: 14px;
  color: #666;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#fpv-produtos .fpv-card-price-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 20px;
  margin-top: 4px;
}

/* preço "de": cinza riscado */
#fpv-produtos .fpv-card-price-old {
  font-size: 16px;
  color: #82888F;
  text-decoration: line-through;
}

/* preço atual: em destaque — bem maior que o resto do card */
#fpv-produtos .fpv-card-price-current {
  font-family: "FPVHeaderSans", "Segoe UI", Arial, sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: #000000;
  margin: 0;
  line-height: 1.2;
}

#fpv-produtos .fpv-card-price-current .fpv-card-currency {
  font-size: 15px;
  font-weight: 500;
  margin-right: 2px;
}

#fpv-produtos .fpv-card-micro {
  font-size: 13px;
  color: #999;
  margin: 2px 0 0;
}

/* ---------- preço no Pix + parcelamento no cartão (task 36b) ----------
   Bloco compartilhado (site/assets/fpv-precos.js) reaproveitado pelo
   modal de previsualização e pela página do produto — aqui na vitrine
   com tipografia bem mais compacta que o preço em destaque acima, para
   não competir com ele nem estourar a largura do card estreito. */
#fpv-produtos .fpv-precos-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 4px 0 2px;
  min-width: 0;
}

#fpv-produtos .fpv-precos-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  min-width: 0;
}

#fpv-produtos .fpv-precos-del {
  font-size: 12px;
  color: #82888F;
  font-weight: 400;
  text-decoration: line-through;
}

#fpv-produtos .fpv-precos-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 999px;
  background: #FF6B00;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

#fpv-produtos .fpv-precos-pix-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: #FF6B00;
  line-height: 0;
}

#fpv-produtos .fpv-precos-pix-icon svg {
  display: block;
  width: 13px;
  height: 13px;
}

#fpv-produtos .fpv-precos-pix-price {
  font-size: 15px;
  font-weight: 700;
  color: #262a2f;
}

#fpv-produtos .fpv-precos-pix-label {
  font-size: 11px;
  font-weight: 600;
  color: #FF6B00;
}

#fpv-produtos .fpv-precos-line--3 {
  font-size: 11px;
  color: #666;
  line-height: 1.3;
}

#fpv-produtos .fpv-precos-install-base {
  font-weight: 600;
}

#fpv-produtos .fpv-precos-install-highlight {
  font-weight: 700;
  color: #262a2f;
}

@media (min-width: 640px) {
  #fpv-produtos .fpv-card-title {
    font-size: 22px;
    min-height: calc(22px * 1.3 * 2);
  }
  #fpv-produtos .fpv-card-price-current {
    font-size: 30px;
  }
}

@media (min-width: 1024px) {
  #fpv-produtos .fpv-card-body {
    padding: 20px 22px 24px;
  }
  #fpv-produtos .fpv-card-title {
    font-size: 24px;
    min-height: calc(24px * 1.3 * 2);
  }
  #fpv-produtos .fpv-card-price-current {
    font-size: 32px;
  }
}

/* ---------- estado vazio / título da seção ---------- */
#fpv-produtos .fpv-prod-empty {
  color: #999;
}

/* ---------- skeleton de carregamento (acompanha o tamanho do card em
   vitrine: proporção aproximada de imagem 4:3 + bloco de texto grande —
   ajustada por breakpoint junto com .fpv-card-title/.fpv-card-price-current
   acima, já que o texto maior nas telas largas ocupa proporcionalmente
   menos altura relativa a um card mais largo) ---------- */
#fpv-produtos .fpv-prod-skel {
  aspect-ratio: 4 / 4.9;
  border-radius: 4px;
  background: linear-gradient(90deg, #eee 25%, #f5f5f5 37%, #eee 63%);
  background-size: 400% 100%;
  animation: fpv-prod-shimmer 1.4s ease infinite;
}

@media (min-width: 640px) {
  #fpv-produtos .fpv-prod-skel {
    aspect-ratio: 4 / 4.4;
  }
}

@media (min-width: 1024px) {
  #fpv-produtos .fpv-prod-skel {
    aspect-ratio: 4 / 4.3;
  }
}

@keyframes fpv-prod-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* ---------- tema escuro do site ---------- */
.joog-dark #fpv-produtos {
  background: #101114;
}

.joog-dark #fpv-produtos .fpv-card {
  background: #1a1d22;
  border-color: #2a2d33;
}

.joog-dark #fpv-produtos .fpv-card:hover {
  border-color: #383c44;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

.joog-dark #fpv-produtos .fpv-card-title {
  color: #e8eaed;
}

.joog-dark #fpv-produtos .fpv-card-price-current {
  color: #ffffff;
}

.joog-dark #fpv-produtos .fpv-card-meta,
.joog-dark #fpv-produtos .fpv-card-micro,
.joog-dark #fpv-produtos .fpv-card-price-old {
  color: #9aa0a6;
}

.joog-dark #fpv-produtos .fpv-precos-del {
  color: #9aa0a6;
}

.joog-dark #fpv-produtos .fpv-precos-pix-price,
.joog-dark #fpv-produtos .fpv-precos-install-highlight {
  color: #e8eaed;
}

.joog-dark #fpv-produtos .fpv-precos-line--3 {
  color: #9aa0a6;
}

.joog-dark #fpv-produtos .fpv-card-arrow {
  background: rgba(26, 29, 34, 0.85);
  color: #e8eaed;
}

.joog-dark #fpv-produtos .fpv-card-arrow:hover {
  background: #1a1d22;
}

.joog-dark #fpv-produtos .fpv-card-dot {
  background: rgba(255, 255, 255, 0.28);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.joog-dark #fpv-produtos .fpv-card-dot:hover {
  background: rgba(255, 255, 255, 0.5);
}

.joog-dark #fpv-produtos .fpv-card-dot.is-active {
  background: #FF6B00;
  box-shadow: none;
}

.joog-dark #fpv-produtos .fpv-card-preview-btn {
  color: #9aa0a6;
}

.joog-dark #fpv-produtos .fpv-card-preview-btn:hover {
  color: #FF6B00;
}

.joog-dark #fpv-produtos .fpv-card-cart-btn:disabled,
.joog-dark #fpv-produtos .fpv-card-cart-btn.is-disabled {
  background: #44484f;
}

.joog-dark #fpv-produtos .fpv-prod-skel {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.06) 25%, rgba(255, 255, 255, 0.12) 37%, rgba(255, 255, 255, 0.06) 63%);
  background-size: 400% 100%;
}

/* A dobra de produtos fica acima da imagem do rodapé (fpvfoo) na pilha de
   empilhamento — sem isto, a imagem sobrepõe a grade quando ficam adjacentes. */
#fpv-produtos { position: relative; z-index: 30; }

/* ---------- rolagem infinita (task 14b) ---------- */

/* sentinela invisível observada pelo IntersectionObserver — sem altura
   perceptível, só precisa existir no fluxo do documento para cruzar o
   viewport quando o usuário rola até perto do fim da grade. */
#fpv-produtos .fpv-prod-sentinel {
  height: 1px;
}

#fpv-produtos .fpv-prod-loading-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 0 4px;
  margin: 0;
  color: #999;
  font-size: 13px;
}

/* spinner discreto — cinza claro com o topo em laranja (identidade FPVSHOP
   #FF6B00, mesma usada em fpv-produto-pagina.css), decorativo
   (aria-hidden, o texto ao lado permanece para leitores de tela). */
#fpv-produtos .fpv-prod-spinner {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 2px solid #ddd;
  border-top-color: #FF6B00;
  animation: fpv-prod-spin 0.8s linear infinite;
}

@keyframes fpv-prod-spin {
  to { transform: rotate(360deg); }
}

#fpv-produtos .fpv-prod-more-error {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 16px 0 4px;
  text-align: center;
}

#fpv-produtos .fpv-prod-more-error-msg {
  color: #c0392b;
  font-size: 13px;
}

#fpv-produtos .fpv-prod-retry-btn,
#fpv-produtos .fpv-prod-loadmore-btn {
  border: 1px solid #ccc;
  background: #fff;
  color: #404852;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
}

#fpv-produtos .fpv-prod-retry-btn:hover,
#fpv-produtos .fpv-prod-loadmore-btn:hover {
  background: #f5f5f5;
}

#fpv-produtos .fpv-prod-loadmore-btn {
  display: block;
  margin: 8px auto 4px;
}

#fpv-produtos .fpv-prod-loadmore-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.joog-dark #fpv-produtos .fpv-prod-loading-more {
  color: #9aa0a6;
}

.joog-dark #fpv-produtos .fpv-prod-spinner {
  border-color: #33363c;
  border-top-color: #FF6B00;
}

.joog-dark #fpv-produtos .fpv-prod-retry-btn,
.joog-dark #fpv-produtos .fpv-prod-loadmore-btn {
  background: #1a1d22;
  border-color: #33363c;
  color: #e8eaed;
}

.joog-dark #fpv-produtos .fpv-prod-retry-btn:hover,
.joog-dark #fpv-produtos .fpv-prod-loadmore-btn:hover {
  background: #22252b;
}