/* =========================================================
   ZH OUTFITS — DESTAQUE DO CARD + GALERIA DE FOTOS
   - Passar o mouse num card: ele "salta" um pouco pra frente
     e os outros cards da mesma vitrine ficam desfocados.
   - Peças com mais de uma foto: setinhas nas laterais e
     pontinhos embaixo (lógica em js/card-galeria.js).
   Carrega depois de style.css (sobrescreve o hover antigo).
   ========================================================= */

/* ---------- fotos empilhadas: só a ativa aparece ---------- */
.card .card__thumb .card__foto{ opacity:0; transition:opacity .3s ease; }
.card .card__thumb .card__foto.is-ativa{ opacity:1; }
.card--esgotado .card__thumb .card__foto.is-ativa{ opacity:.55; }

/* ---------- setinhas ---------- */
.card__seta{
  position:absolute; top:50%; z-index:4; transform:translateY(-50%);
  width:34px; height:34px; padding:0 0 3px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(8,8,10,.72); color:var(--text); border:1px solid var(--line);
  font-size:1.5rem; line-height:1; cursor:pointer;
  opacity:0; transition:opacity .2s ease, border-color .2s, color .2s;
}
.card__seta--ant{ left:8px; }
.card__seta--prox{ right:8px; }
.card__seta:hover{ border-color:var(--gold); color:var(--gold-hi); }
.card__seta:focus-visible{ opacity:1; outline:2px solid var(--gold); outline-offset:2px; }

/* ---------- pontinhos ---------- */
.card__pontos{
  position:absolute; left:0; right:0; bottom:10px; z-index:4;
  display:flex; justify-content:center; gap:5px; pointer-events:none;
}
.card__pontos span{
  width:6px; height:6px; border-radius:50%;
  background:rgba(255,255,255,.45); transition:background .2s, transform .2s;
}
.card__pontos span.is-ativa{ background:var(--gold-hi); transform:scale(1.25); }

/* ---------- efeito de destaque ----------
   O js/card-destaque.js coloca a classe "is-destaque" no card:
   - no computador: cursor parado 1 segundo em cima do produto
   - no celular: dedo segurando 0,5 segundo em cima do produto
   Aí a FOTO se desprende do card: cresce, sobe e fica "flutuando"
   na frente, com sombra e borda dourada própria. O card fica no
   lugar, só sobe um pouquinho. Os outros cards da vitrine ficam
   desfocados. */

/* o card não pode cortar a foto quando ela crescer pra fora dele;
   o arredondado de cima passa a ser da própria foto */
.card{
  position:relative; overflow:visible;
  transition:transform .3s ease, border-color .2s, filter .3s ease;
}
.card__thumb{
  border-radius:var(--r-md) var(--r-md) 0 0;
  transition:transform .35s cubic-bezier(.2,.8,.2,1.15), box-shadow .35s ease, border-radius .35s ease;
}

.card.is-destaque{ transform:translateY(-4px); z-index:2; border-color:#41414c; }
.card.is-destaque .card__thumb{
  transform:translateY(-22px) scale(1.14);
  z-index:3;
  border-radius:var(--r-md);
  box-shadow:0 30px 60px rgba(0,0,0,.75), 0 0 0 1px var(--gold);
}

/* os outros cards da mesma vitrine ficam desfocados */
.grid--products:has(.card.is-destaque) .card:not(.is-destaque),
.rail:has(.card.is-destaque) .card:not(.is-destaque){
  filter:blur(1.5px) brightness(.75);
}

/* ---------- computador (com mouse) ---------- */
@media (hover:hover) and (pointer:fine){
  .card__thumb{ will-change:transform; }
  .card:hover .card__seta{ opacity:1; }

  /* a vitrine que rola pro lado cortaria a foto que salta pra fora:
     dá um respiro em volta sem mudar o alinhamento da página */
  .rail{
    padding:56px 24px 24px;
    margin:-56px -24px -14px;
    scroll-padding-inline:24px; /* o "encaixe" da rolagem respeita o respiro */
  }
}

/* ---------- celular (sem mouse) ---------- */
@media (hover:none){
  /* setinhas sempre visíveis */
  .card__seta{ opacity:1; width:30px; height:30px; font-size:1.3rem; }

  /* salto um pouco menor: a tela é estreita e a foto não pode
     passar da borda do celular */
  .card.is-destaque .card__thumb{ transform:translateY(-14px) scale(1.08); }

  /* segurar o dedo na foto não abre o menu "salvar imagem" do celular */
  .card__thumb{ -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }

  .rail{
    padding:36px 12px 16px;
    margin:-36px -12px -6px;
    scroll-padding-inline:12px;
  }
}

/* ---------- quem pediu menos animação no sistema ---------- */
@media (prefers-reduced-motion:reduce){
  .card, .card .card__thumb .card__foto{ transition:none; }
  .card.is-destaque, .card.is-destaque .card__thumb{ transform:none; }
  .card__thumb{ transition:none; }
}