/* =====================================================================
   LOJA v2 — "Vitrine iluminada" (proposta C do pipeline 23, adotada na v2 em 28/10; pipeline 26)
   A loja vira uma rua à noite: seção escura e cada produto numa vitrine acesa (fundo claro e quente,
   luz de cima) com moldura dupla (fio laranja + passe-partout).

   Fotos (29/10, vídeo da Izadira — pipeline 27; antes: ajuste 1 do benchmark, pipeline 25):
   - .card__principal = a foto que aparece primeiro:
       · produto com imagem de IA ("ia": true no produtos.json): a imagem ilustrativa (.card__ia),
         com o selo "Imagem ilustrativa" sempre visível junto com ela
       · produto sem IA: a foto REAL recortada, sem o piso (.card__recorte)
   - .card__segunda = 2ª foto: nos cards com IA, a foto real recortada (.card__recorte);
     nos outros, a foto original no piso (.card__piso)
   O enquadramento vem do TIPO da foto (.card__ia / .card__recorte / .card__piso), não da posição.
   Quando a 2ª foto aparece (ajuste 5), a principal e o selo somem (o recorte tem fundo transparente):
   - mouse: só em telas com mouse de verdade — @media (hover: hover) and (pointer: fine)
   - teclado: quando um link, botão ou "Detalhes" do card tem :focus-visible (o toque não aciona)
   - toque: botão "Foto real" (cards com IA) / "Outra foto" (data-foto="2" no card, controlado pelo app.js)
   Movimento: só a troca suave de opacidade; o estilo.css zera as transições em prefers-reduced-motion.
   Para voltar à v1: ramo master (tag loja-v1).
   ===================================================================== */

/* ---------- Seção ---------- */
#loja { background:
    radial-gradient(70% 420px at 50% 0, rgba(245,165,6,.10), rgba(245,165,6,0) 70%),
    var(--azul-noite-2); color: var(--branco); }
#loja > .dentro > h2 { color: var(--branco); }
#loja .como-comprar { color: var(--azul-noite); } /* caixa branca: texto volta a escuro */
#loja .sobrelinha--escura { color: var(--laranja); }
#loja .destaque { color: var(--texto-claro); }
#loja .loja__origem { color: var(--branco); }
#loja .legenda-fotos, #loja .legenda-ia { color: var(--texto-claro); }

/* Aviso único acima da grade (ajuste 2): a estrutura está pronta, o texto aguarda o jurídico.
   O build.mjs só gera este parágrafo quando AVISO_UNICO e AVISO_CURTO tiverem o OK do JuridicoFBRAIN. */
#loja .loja__aviso-unico { margin: 24px 0 0; padding: 14px 18px; border-radius: 4px; background: rgba(255,255,255,.05); border-top: 1px solid rgba(245,165,6,.5); color: var(--texto-claro); font-size: 17px; line-height: 1.5; max-width: 52em; }

/* ---------- Card ---------- */
#loja .card { background: var(--azul-noite); border: 1px solid rgba(255,255,255,.07); border-radius: 6px; box-shadow: 0 24px 48px -24px rgba(0,0,0,.7); }
#loja .card > :not(.card__foto) { margin-inline: 24px; }
#loja .card h3 { color: var(--branco); }
#loja .card__resumo { color: var(--texto-claro); }
#loja .card summary { color: var(--laranja); }
#loja .card details ul { color: var(--branco); }
#loja .card__detalhes { border-bottom-color: rgba(255,255,255,.12); }
#loja .card__aviso { background: rgba(255,255,255,.04); color: var(--texto-claro); border-left: none; border-radius: 4px; border-top: 1px solid rgba(245,165,6,.5); }
#loja .card__aviso--curto { font-size: 16px; padding: 8px 12px; }
#loja .card__preco { color: var(--branco); }

/* ---------- Vitrine acesa (a foto) ---------- */
#loja .card__foto { margin: 16px 16px 0; border-radius: 2px; overflow: hidden;
  background:
    radial-gradient(70% 40% at 50% 92%, rgba(23,49,66,.22), rgba(23,49,66,0) 70%),
    radial-gradient(85% 95% at 50% 0%, #FFF8EA 0%, #F1E6D2 45%, #C9BBA3 100%);
  box-shadow: 0 0 0 1px rgba(245,165,6,.65), 0 0 0 7px var(--azul-noite), 0 0 0 8px rgba(255,255,255,.12); }
/* Foto real recortada, "dentro" da vitrine (seja a principal ou a 2ª) */
#loja .card__foto .card__recorte { left: 9%; top: 12%; width: 82%; height: 76%; object-fit: contain;
  filter: drop-shadow(0 18px 14px rgba(23,49,66,.45)) drop-shadow(0 2px 2px rgba(23,49,66,.35)); }
/* Fita/cinto que já vinha cortado na foto: encosta nas duas bordas, como se continuasse para fora do quadro */
#loja .card[data-sangra="true"] .card__recorte { left: 0; width: 100%; }
/* Imagem de IA e foto no piso: ocupam a vitrine inteira (object-fit: cover do estilo.css) */
#loja .card__foto .card__principal { z-index: 1; transition: opacity .35s ease; }
/* 2ª foto por cima, invisível até ser pedida (continua no leitor de tela: nos cards com IA ela tem alt próprio) */
#loja .card__foto .card__segunda { z-index: 2; opacity: 0; transition: opacity .35s ease; }
/* Selo "Imagem ilustrativa": acompanha a imagem de IA, que agora é a principal — visível de cara */
#loja .card__etiqueta-ia { z-index: 3; opacity: 1; transition: opacity .35s ease; }

/* Quando a 2ª foto aparece — regras separadas: se um navegador antigo não entender :has(), as outras continuam valendo */
#loja .card[data-foto="2"] .card__segunda { opacity: 1; }
#loja .card[data-foto="2"] .card__principal,
#loja .card[data-foto="2"] .card__etiqueta-ia { opacity: 0; }
#loja .card:has(a:focus-visible, button:focus-visible, summary:focus-visible) .card__segunda { opacity: 1; }
#loja .card:has(a:focus-visible, button:focus-visible, summary:focus-visible) .card__principal,
#loja .card:has(a:focus-visible, button:focus-visible, summary:focus-visible) .card__etiqueta-ia { opacity: 0; }
@media (hover: hover) and (pointer: fine) {
  #loja .card:hover { box-shadow: 0 24px 48px -20px rgba(0,0,0,.8); }
  #loja .card:hover .card__segunda { opacity: 1; }
  #loja .card:hover .card__principal,
  #loja .card:hover .card__etiqueta-ia { opacity: 0; }
}

/* Botão "Outra foto": só em telas de toque (onde não existe passar o mouse) */
#loja .card__trocar { display: none; }
@media not all and (hover: hover) and (pointer: fine) {
  #loja .card__trocar { display: inline-flex; align-items: center; gap: 8px; position: absolute; z-index: 4; left: 8px; top: 8px;
    min-height: 48px; padding: 0 16px 0 12px; border: 0; border-radius: 999px; cursor: pointer;
    background: rgba(15,37,51,.88); color: var(--branco); font: inherit; font-size: 16px; font-weight: 600; line-height: 1; }
  /* Ícone: duas fotos sobrepostas */
  #loja .card__trocar::before { content: ""; width: 16px; height: 12px; border: 2px solid currentColor; border-radius: 2px; box-shadow: 4px -4px 0 -2px rgba(15,37,51,.88), 4px -4px 0 0 currentColor; margin: 4px 2px 0 0; }
  #loja .card__trocar[aria-pressed="true"] { background: var(--laranja); color: var(--azul-noite); }
  /* Cards com IA: o botão desce para o canto de baixo (no alto ele cobria o rosto da pessoa da imagem ilustrativa);
     o selo "Imagem ilustrativa" fica no canto de baixo à direita, então o botão é curto ("Foto real") para os dois caberem */
  #loja .card[data-ia="true"] .card__trocar { top: auto; bottom: 8px; padding: 0 12px 0 10px; font-size: 15px; }
  #loja .card[data-ia="true"] .card__etiqueta-ia { right: 8px; bottom: 8px; min-height: 48px; display: inline-flex; align-items: center; font-size: 14px; padding: 0 8px; }
  #loja .card__trocar[aria-pressed="true"]::before { box-shadow: 4px -4px 0 -2px var(--laranja), 4px -4px 0 0 currentColor; }
}

/* Link "Ver a foto real do produto" (só nos cards com imagem de IA): miniatura da foto original */
#loja .card__foto-real { color: var(--laranja); }
#loja .card__foto-real img { border-color: rgba(255,255,255,.18); }

/* Vitrine do topo: saiu em 29/10 (pipeline 27) — a loja completa vem logo abaixo do topo. */