.whatsapp-button {
    position: fixed;
    bottom: 80px;
    right: 20px;
    z-index: 99;
    background-color: #25d366;
    border-radius: 50px;
    padding: 10px;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
  }
  
  .whatsapp-button:hover {
    background-color: #128c7e;
    transform: scale(1.1);
  }
  
  .whatsapp-button img {
    width: 40px;
    height: 40px;
  }


*{box-sizing:border-box;margin:0;padding:0}
.carousel{position:relative;width:100%;margin:auto;overflow:hidden}

/* --- track & slides --- */
.slides{display:flex;transition:transform .5s ease-in-out}
.slides a{min-width:100%;text-decoration:none}
.slides img{
  display:block;
  width:100%;
  height:420px;          /* desktop/default height */
  object-fit:cover;      /* crops wide photos nicely */
}

/* --- mobile tweak: give it more vertical room --- */
@media (max-width:768px){
  .slides img{height:200px;}   /* adjust to taste */
}

/* --- nav arrows --- */
.nav{position:absolute;top:50%;left:0;right:0;
     display:flex;justify-content:space-between;transform:translateY(-50%)}
.nav button{background:rgba(0,0,0,.45);border:none;color:#fff;
            font-size:2rem;padding:.2em .6em;cursor:pointer}

/* --- dots --- */
.dots{position:absolute;bottom:.6em;left:50%;
      transform:translateX(-50%);display:flex;gap:.5em}
.dots button{width:.8rem;height:.8rem;border-radius:50%;
             border:none;background:#c4c4c4;cursor:pointer}
.dots button.active{background:#333}

/*   categorie featured */

#featured-product-categories .categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  /* optional: align-items start so cards all top-align */
  align-items: start;
}
/* mobile: one column only */
@media (max-width: 768px) {
  #featured-product-categories .categories-grid {
    grid-template-columns: 1fr;
  }
}