/* =========================
   Level2Subcats - Layout
========================= */

.l2subcats-bar{
  margin: 0 0 14px;
}

/* zona scrollabilă cu chips */
.l2subcats-bar__inner{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 2px;

  overflow-x:auto;
  -webkit-overflow-scrolling: touch;

  /* drag UX */
  cursor: grab;
  user-select: none;

  /* ascunde scrollbar-ul nativ */
  scrollbar-width: none; /* Firefox */
}
.l2subcats-bar__inner::-webkit-scrollbar{ display:none; } /* Chrome/Safari */

.l2subcats-bar__inner.is-dragging{
  cursor: grabbing;
}

/* Chip */
.l2subcats-chip{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:10px;

  padding:10px 14px;            /* mai compact decât 12/16 */
  border:1px solid #e6e6e6;

  background:#fff;
  text-decoration:none;

  line-height:1;
}

.l2subcats-chip:hover{
  border-color:#cfcfcf;
}

.l2subcats-chip__img{
  width:35px;
  height:30px;
  border-radius:6px;
  object-fit:cover;
  display:block;
}

.l2subcats-chip__name{
  white-space:nowrap;
  font-size:14px;
  color:#111;

  /* dacă ai denumiri lungi, se taie frumos */
  max-width:240px;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* =========================
   Custom scrollbar (track full, thumb 25%)
========================= */

.l2subcats-scroll{
  width:100%;
  height:9px;                   /* mai groasă */
  margin:10px 0 0;
  background:#e0e0e0;
  border-radius:999px;
  position:relative;
}

.l2subcats-scroll__thumb{
  height:100%;
  width:25%;
  background:#1d92eb;           /* albastru site */
  border-radius:999px;
  transform:translateX(0);
  will-change:transform;
  cursor:grab;
}

.l2subcats-scroll__thumb:active{
  cursor:grabbing;
}

.l2subcats-scroll.is-hidden{
  display:none;
}


/* Permite pointer events și drag corect */
.l2subcats-bar__inner,
.l2subcats-scroll__thumb{
  touch-action: pan-y;   /* permite scroll vertical normal, dar lasă drag-ul orizontal */
}

.l2subcats-scroll,
.l2subcats-scroll__thumb{
  pointer-events: auto;
}


/* Ascunde scrollbar-ul custom pe telefon */
@media (max-width: 767px){
  .l2subcats-scroll{
    display: none !important;
  }
}


@media (max-width: 767px){
  .l2subcats-bar{ margin-bottom: 10px; }
}