/* ---------- bloque completo Productos (index) ---------- */
.product-section{
  padding:80px 20px 100px;
  background:#ebebeb;
  text-align:center;
}

.section-header{margin-bottom:25px}
.section-title{
  font:700 32px/1 "Segoe UI",sans-serif;
  text-transform:uppercase;
  color:#333;
}
.view-all-link{
  display:block;
  margin-bottom:8px;
  font:700 18px/1 "Segoe UI",sans-serif;
  color:#333;
  text-decoration:none;
}
.view-all-link:hover{text-decoration:underline}

/* ---------- carrusel ---------- */
.carousel-container{
  position:relative;
  overflow:hidden;
  padding:0 70px;                 /* colchón para las flechas */
}
.product-carousel{display:flex;gap:15px;transition:transform .3s}

.product-item{
  flex:0 0 220px;
  background:#333;
  color:#fff;
  padding:10px;
  border-radius:10px;
  text-align:center;
  box-shadow:0 2px 5px rgba(0,0,0,.3);
}
.product-item img{width:100%;border-radius:6px;margin-bottom:10px}
.product-name{font:700 16px/1.2 "Segoe UI",sans-serif}
.product-price{font:700 14px/1 "Segoe UI",sans-serif;color:#f4c10f}

/* ---------- flechas ---------- */
.carousel-btn{
  position:absolute;top:50%;transform:translateY(-50%);
  width:40px;height:40px;border-radius:50%;
  border:none;cursor:pointer;
  background:#f4c10f;color:#fff;font-size:22px;
  box-shadow:0 2px 6px rgba(0,0,0,.4);
  transition:background .25s;
  z-index:2;
}
.carousel-btn:hover{background:#cca30e}
.prev-btn{left:20px}
.next-btn{right:20px}

/* responsive: flechas algo más pequeñas */
@media(max-width:1023px){
  .carousel-container{padding:0 45px}
  .carousel-btn{width:34px;height:34px;font-size:18px}
}