.lateralBar-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.5);
  opacity:0;
  pointer-events:none;
  transition:opacity .3s;
  z-index:90;
}
.lateralBar-overlay.active{
  opacity:1;
  pointer-events:all;
}
.lateralBar-container{
  position:fixed;
  top:0;
  right:0;
  height:100vh;
  width:100vw;
  max-width:400px;
  background:var(--red);
  color:#fff;
  padding:2rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  transform:translateX(100%);
  transition:transform .3s ease-in-out;
  z-index:100;
}
.lateralBar-container.active{
  transform:translateX(0);
}
.lateralBar-buttons{
    display: flex;
    gap: 3rem;
    margin-top: 20px;
    margin-bottom: 20px;
}

.lateralBar-cart {
    background: none;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    position: relative; /* 🔹 necesario para posicionar el badge */
}

/* Badge del carrito */
.cart-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: red;
    color: white;
    font-size: 0.75rem;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    box-sizing: border-box;
}

.lateralBar-cart img {
  width: 30px;
  height: auto;
  filter: brightness(0) invert(1);
}