/* Estrutura do carrossel — sem cor nenhuma aqui de propósito.
   Cada loja define a skin (cores, formas, textura) no próprio style.css. */
.crx-carousel { position: relative; overflow: hidden; }
/* height:100% em toda a cadeia: um slide que é só imagem de fundo (position:
   absolute) não contribui altura nenhuma ao fluxo normal, e sem isso o track
   colapsa para 0 — o container externo mantinha a altura (é ele que define
   min(52vw,340px) etc.), mas por dentro tudo desaparecia. */
.crx-carousel-track { display: flex; height: 100%; transition: transform .55s cubic-bezier(.4,0,.2,1); touch-action: pan-y; }
.crx-carousel-track > .crx-slide { flex: 0 0 100%; min-width: 0; height: 100%; }

.crx-carousel-dots {
  position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%);
  display: flex; gap: 8px; z-index: 3;
}
.crx-carousel-dots button {
  width: 8px; height: 8px; border-radius: 999px; border: none;
  background: rgba(255,255,255,.45); cursor: pointer; padding: 0;
  transition: width .25s ease, background .25s ease;
}
.crx-carousel-dots button.active { width: 22px; background: #fff; }

.crx-carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: 50%; border: none;
  background: rgba(0,0,0,.35); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 3; transition: background .2s;
  font-size: 1.1rem; line-height: 1;
}
.crx-carousel-arrow:hover { background: rgba(0,0,0,.55); }
.crx-carousel-arrow.prev { left: 14px; }
.crx-carousel-arrow.next { right: 14px; }
@media (max-width: 640px) { .crx-carousel-arrow { display: none; } }