/* Variáveis CSS padrão - podem ser sobrescritas pelo widget */
:root{
  --ctw-active-scale: 1.25;
  --ctw-neighbor-scale: 0.9;
  --ctw-base-scale: 0.55;
  --ctw-transition: 350ms;
}

/* Layout base */
.ctw-carousel-container{
  display:flex;
  align-items:center;
  gap:20px;
  width:100%;
  max-width:95%;           /* mais espaço para mais slides */
  margin-inline:auto;
  overflow:hidden;
}

.ctw-carousel{
  overflow:hidden;
  flex:1;
  min-width:0;             /* permite que o flex funcione corretamente */
  height:520px;            /* controla altura total do carrossel */
  display:flex;
  align-items:center;      /* centraliza verticalmente as imagens */
  position:relative;
}

.ctw-track{
  display:flex;
  align-items:flex-start;
  transition:transform var(--ctw-transition) ease;
}

.ctw-item{
  flex:0 0 auto;
  margin:0 25px;           /* espaçamento padrão (sobrescrito por inline styles) */
  position:relative;
  transition: transform var(--ctw-transition) ease, filter var(--ctw-transition) ease;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.ctw-item-link {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.ctw-item-link:hover {
  text-decoration: none;
}

.ctw-item img{
  width:250px;             /* largura padrão (sobrescrita por inline styles) */
  height:auto;
  max-height:100%;
  object-fit:cover;
  border-radius:12px;
  box-shadow:0 4px 18px rgba(0,0,0,.5);
  display:block;
}

/* Ensure the link is clickable */
.ctw-item {
  position: relative;
}

/* Escalas */
.ctw-item.ctw-inactive { transform: scale(var(--ctw-base-scale));     filter:saturate(0.8); opacity:0.6; }
.ctw-item.ctw-neighbor { transform: scale(var(--ctw-neighbor-scale)); filter:saturate(1.05); }
.ctw-item.ctw-visible  { transform: scale(var(--ctw-neighbor-scale)); filter:saturate(1.1); opacity:1; }
.ctw-item.ctw-active   { transform: scale(var(--ctw-active-scale)) !important; filter:saturate(1.3); z-index: 9999 !important; }

/* Z-index é controlado dinamicamente pelo JavaScript */
.ctw-track {
  position: relative;
}
.ctw-item {
  position: relative;
}

.ctw-nav{
  font-size:2.2rem;
  background:none;
  border:none;
  color:white;
  cursor:pointer;
  user-select:none;
}

/* Container do item ativo (template) */
.ctw-produto-atual{
  margin: 20px auto 0;
  max-width:80%;
  color:#fff;
  font-family:sans-serif;
  text-align:center;
}

/* Ajustes para mobile */
@media (max-width: 767px) {
  .ctw-carousel-container{
    max-width:100%;
    margin:0;
    padding:0 10px;
    gap:10px;
  }
  
  .ctw-carousel{
    overflow:visible;        /* permite ver pedaços dos itens laterais */
  }
  
  .ctw-track{
    padding:0 20%;           /* cria espaço lateral para mostrar ~25% dos itens */
  }
  
  /* Ajustar escalas para mobile - itens inativos maiores */
  .ctw-item.ctw-inactive { 
    transform: scale(0.65);  /* um pouco maior que o padrão 0.55 */
    opacity:0.7;             /* um pouco mais visível */
  }
  
  /* Botões de navegação menores no mobile */
  .ctw-nav{
    font-size:1.8rem;
    flex-shrink:0;           /* garante que as setas não encolham */
    z-index:10;              /* garante que fiquem acima dos itens */
    position:relative;
  }
}

/* Tema de fundo escuro opcional */
body.elementor-editor-active .ctw-carousel-container,
body .ctw-carousel-container {
  background: transparent;
}