/* Club Fit - as 10 vitrines de categoria da home. JDZN, 22/09/2026.
 *
 * Este arquivo e curto de proposito. O card e o card do proprio tema e usa o
 * CSS do tema: foto, selo nutricional, preco, Pix, quantidade, botao. O
 * carrossel e o Swiper do tema, com a configuracao das vitrines nativas. Nada
 * disso e redesenhado aqui, porque redesenhar e onde a primeira tentativa se
 * perdeu.
 *
 * O que sobra para este arquivo sao quatro coisas: o respiro entre uma faixa e
 * a seguinte, o "Ver tudo" na mesma linha do titulo, o esqueleto que segura a
 * caixa antes dos pratos chegarem, e a saida honesta para quando o Swiper nao
 * estiver disponivel.
 *
 * Nenhuma cor nova: tudo sai das variaveis que o tema ja declara.
 */

/* Todas as dez faixas tem o mesmo respiro. Vitrine com espacamento diferente
   das vizinhas parece erro de montagem, mesmo quando e proposital. */
.cf-nat-vit { padding: 26px 0; }
.cf-nat-vit + .cf-nat-vit { border-top: 1px solid rgba(0, 0, 0, .06); }

/* As setas do tema sao posicionadas por fora do carrossel e precisam de um
   ancestral posicionado; sem isto elas se penduram no corpo da pagina. */
.cf-nat-vit .col-12 { position: relative; }

/* Titulo e "Ver tudo" na mesma linha: quem nao quer arrastar a vitrine inteira
   tem a saida para a categoria logo ali. O h2 mantem a classe section-title do
   tema, entao a tipografia continua a da loja. */
.cf-nat-cab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.cf-nat-cab .section-title { margin-bottom: 0; }

.cf-nat-todos {
  flex: none;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  color: var(--button-background, #9a2284);
}
.cf-nat-todos:hover,
.cf-nat-todos:focus { text-decoration: underline; color: var(--button-background, #9a2284); }

/* Esqueleto com a caixa do card, para a pagina nao dar salto quando os pratos
   entrarem. A proporcao 3/4 e a da foto do card do tema. */
/* A largura acompanha o carrossel: no celular um card por tela (com o pedaco
   do vizinho), no computador as colunas da loja. Errar isto faz a pagina dar
   um salto no instante em que os pratos entram. */
.cf-nat-esq-slide { width: 68%; }
@media (min-width: 768px) { .cf-nat-esq-slide { width: 25%; } }
.cf-nat-esq {
  aspect-ratio: 3 / 4;
  border-radius: 8px;
  margin-right: 15px;
  background: linear-gradient(90deg, rgba(0,0,0,.05) 25%, rgba(0,0,0,.09) 37%, rgba(0,0,0,.05) 63%);
  background-size: 400% 100%;
  animation: cf-nat-brilho 1.4s ease-in-out infinite;
}
@keyframes cf-nat-brilho {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .cf-nat-esq { animation: none; }
}

/* Saida honesta: se o Swiper nao carregar, os slides viram uma tira que rola
   com o dedo. Perde a seta, nao perde o prato - e nunca vira a parede de cards
   empilhados que foi o erro da primeira versao. */
.cf-nat-tira .swiper-wrapper {
  display: flex;
  overflow-x: auto;
  gap: 15px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.cf-nat-tira .swiper-slide {
  flex: 0 0 44%;
  scroll-snap-align: start;
}
@media (min-width: 768px) {
  .cf-nat-tira .swiper-slide { flex: 0 0 24%; }
}

.cf-nat-erro { margin: 0; padding: 12px 0; font-size: 13.5px; opacity: .85; }
.cf-nat-erro a,
.cf-nat-semjs a { color: var(--button-background, #9a2284); font-weight: 700; }
.cf-nat-semjs { margin: 8px 0 0; font-size: 14px; }

@media (max-width: 767px) {
  .cf-nat-vit { padding: 18px 0; }
  .cf-nat-todos { font-size: 12.5px; }
}

/* ===================================================================
   O EFEITO DE PROFUNDIDADE DA CASA, APLICADO A ESTAS VITRINES

   O coverflow do site nao esta aqui: ele ja existe em static/css/style-cf2.tpl
   (secao 10, de 02/09), feito em CSS porque a build do Swiper desta loja nao
   traz o modulo Coverflow. A regra que gira e apaga os vizinhos e generica -
   mira .swiper-slide-active, -prev e -next - entao ela ja alcanca estas
   vitrines sozinha.

   O que NAO alcanca sao quatro regras de apoio que estao presas aos NOMES das
   vitrines nativas (.js-swiper-featured, .js-swiper-new, .js-swiper-best-seller,
   .js-swiper-related). Estas vitrines tem nome proprio - .js-swiper-<categoria> -
   e por isso ficavam de fora. Sem elas o efeito existe e nao aparece:

     1. overflow: visible no palco - sem isto o container corta exatamente o
        card que avanca, e o giro fica escondido;
     2. respiro em cima e embaixo - o card ativo sobe 6px e ganha uma sombra
        grande; sem a folga, os dois sao cortados;
     3. align-items: stretch no trilho - sem isto os cards perdem a altura
        igual quando um tem tabela nutricional e o outro nao;
     4. z-index no SLIDE - esta e a mais importante e a menos obvia. O trilho e
        preserve-3d, e ali a ordem de pintura segue a posicao em 3D, nao o
        z-index do card. Sem contexto de empilhamento no slide, o vizinho pinta
        por cima da faixa do card ativo onde ficam o "+" e o COMPRAR: o toque
        cai no vizinho, a quantidade sobe no card errado e o COMPRAR nao pega.
        Isso ja tinha sido medido com toque real em 03/09 e resolvido para as
        vitrines nativas; aqui so estende o mesmo conserto.

   Nada e redefinido: isto so faz a regra que ja existe alcancar estas dez.
   =================================================================== */

html body .cf-nat .swiper-wrapper { align-items: stretch; }

@media (max-width: 991px) {
  html body .cf-nat .swiper-container {
    overflow: visible;
    padding-top: 12px !important;
    padding-bottom: 40px !important;
  }
  html body .cf-nat .swiper-slide { position: relative; z-index: 1; }
  html body .cf-nat .swiper-slide-prev,
  html body .cf-nat .swiper-slide-next { z-index: 3; }
  html body .cf-nat .swiper-slide-active { z-index: 10; }

  /* O PONTO DE FUGA TEM DE FICAR PARADO NO MEIO DA TELA
     O efeito da casa poe perspective e perspective-origin no TRILHO
     (.swiper-wrapper), que tem uns 4000px de largura e se move a cada
     arrasto. O ponto de fuga fica no meio do trilho, nao no meio da tela:
     conforme o trilho anda, os vizinhos - que tem profundidade (translateZ) -
     sao projetados cada vez mais para um lado. Medido em 22/09/2026 num
     navegador real: o vizinho da esquerda saia da tela 19px por passo e so
     voltava na volta do laco; o da direita crescia ate cobrir o card do meio.
     Foi exatamente o que o Diego descreveu ("o esquerdo vai sumindo e volta
     quando chega no final").
     Cada card ja carrega a propria perspective() dentro do transform, entao a
     do trilho e redundante - e e ela que deriva. Desligada AQUI, so para estas
     vitrines, os vizinhos saem sempre do mesmo lugar, dos dois lados, em
     qualquer posicao do carrossel (medido nos 14 passos, incluindo a volta:
     esquerda -138..60px, direita 352..550px, sem variar 1px). */
  html body .cf-nat .swiper-wrapper { perspective: none; transform-style: flat; }
}


/* ===================================================================
   No computador (>= 992px, onde o efeito de profundidade nao roda) os
   cards da mesma fileira ficam da mesma altura e o COMPRAR vai para o pe
   do card. Sem isto, o card cujo nome ocupa 3 linhas empurrava o proprio
   botao para baixo e a fileira ficava com os botoes desalinhados (medido
   em 23/09/2026: 18-19px de diferenca; com esta regra, 0px). */
@media (min-width: 992px) {
  html body .cf-nat .swiper-slide { height: auto; display: flex; }
  html body .cf-nat .swiper-slide > .js-item-product { display: flex; width: 100%; }
  html body .cf-nat .js-item-product > .js-item-container { display: flex; flex-direction: column; width: 100%; }
  html body .cf-nat .js-item-container > .js-item-quickshop-or-colors-container { display: flex; flex-direction: column; flex: 1 1 auto; }
  html body .cf-nat .js-item-description { display: flex; flex-direction: column; flex: 1 1 auto; }
  html body .cf-nat .js-item-description > .item-link { display: flex; flex-direction: column; flex: 1 1 auto; }
  html body .cf-nat .js-item-description .js-quickshop-or-stock-container { margin-top: auto; }
}