/* ======================================== */
/* 🔥 SLIDER TOPO */
/* ======================================== */
.slider{
  position:relative;
  overflow:hidden;
  z-index: 1;
}

.slider-track{
  display:flex;
  transition: transform 0.8s ease;
}

.slide{
  min-width:100%;
}

.slide img{
  width:100%;
  height:auto;
  display:block;
}

.slider-dots{
  position:absolute;
  bottom:10px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:8px;
  z-index:2;
}

.slider-dots span{
  width:8px;
  height:8px;
  background:rgba(52, 131, 250,0.3);
  border-radius:50%;
  cursor:pointer;
  transition:0.3s;
}

.slider-dots .active{
  background:#3483FA;
  transform:scale(1.3);
}

/* ======================================== */
/* 🔥 OFERTAS (SLIDER PRINCIPAL) */
/* ======================================== */
.offer-slider{
  overflow:hidden;
  width:100%;
  position:relative;
}

.offer-track{
  display:flex;
  transition: transform 0.5s ease;
  width:100%;
}

.offer-slide{
  min-width:100%;
  width:100%;
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  position:relative;
}


/* ======================================== */
/* 🖼 IMAGEM OFERTA */
/* ======================================== */
.offer-image-wrapper{
  position:relative;
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
}

.offer-image-wrapper img{
  width:100%;
  max-width:280px;
  display:block;
}


/* ======================================== */
/* 🔥 BADGE MAIS VENDIDO (AJUSTE FINAL) */
/* ======================================== */
.offer-image-wrapper{
  position:relative;
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
}

/* 👇 AQUI ESTÁ O SEGREDO */
.offer-image-wrapper .badge-mais-vendido{
  position:absolute;
  top:10px;

  /* centraliza baseado na imagem */
  left:50%;
  transform:translateX(-130px);

  z-index:10;

  background:#ff3b30;
  color:#fff;
  font-size:12px;
  font-weight:bold;
  padding:5px 10px;
  border-radius:6px;
}

/* ======================================== */
/* 🔥 SETAS */
/* ======================================== */
.arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:none;
  border:none;
  font-size:36px;
  font-weight:bold;
  color:#4CAF50;
  cursor:pointer;
  z-index:999;
  width:50px;
  height:50px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.arrow.left{
  left:-5px;
}

.arrow.right{
  right:-5px;
}

/* ======================================== */
/* 📦 INFO PRODUTO OFERTA */
/* ======================================== */

.offer-box{
  text-align:center;
  padding:10px;
  gap:4px;

  min-height:140px; /* 🔥 trava altura do bloco */
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

/* 🔥 TÍTULO CONTROLADO */
.offer-title{
  font-size:14px;
  color:#333;

  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;

  line-height:1.3;
  min-height:36px;
}

.rating{
    margin: 0;
}

/* 🔥 evita empurrar layout */
.rating,
.vendidos,
.old,
.new{
  font-size:13px;
}

/* botão sempre fixo embaixo */
.offer-box .btn{
  margin-top:auto;
}

/* ======================================== */
/* 💰 PREÇOS */
/* ======================================== */
.old{
  text-decoration:line-through;
  color:#FF6767;
  font-size:14px;
}

.new{
  color:#2ecc71;
  font-size:20px;
  font-weight:bold;
}

/* ======================================== */
/* 🔘 BOTÕES */
/* ======================================== */
.btn{
  margin:12px 30px;
  background:#27ae60;
  color:#fff;
  border:none;
  padding:12px;
  border-radius:25px;
  font-weight:bold;
  font-size:14px;
  cursor:pointer;
  display:block;
}

.btn-ver-mais{
    font-weight: bold;
  display:inline-block;
  padding:10px 20px;
  background:orange;
  color:#fff;
  border-radius:10px;
  text-decoration:none;
}



/* ======================================== */
/* 💬 DEPOIMENTOS */
/* ======================================== */
.depo-slider{
  overflow:hidden;
  width:100%;
}

.depo-track{
  display:flex;
  transition: transform 0.6s ease;
}

.depo-slide{
  min-width:100%;
  display:flex;
  justify-content:center;
}

.depo-slide img{
  width:100%;
  height:auto;
  display:block;
}


/* ======================================== */
/* 🔘 DOTS (DEPOIMENTOS) */
/* ======================================== */
.depo-dots{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:10px;
}

.depo-dots span{
  width:10px;
  height:10px;
  background:#ccc;
  border-radius:50%;
  cursor:pointer;
  transition:0.3s;
}

.depo-dots .active{
  background:#4CAF50;
  transform:scale(1.2);
}