/* BWEB Compact Circular Categories (front) */

.bweb-ccc-wrap{
  width:100%;
  background:var(--bweb-container-bg, #000);
  padding:var(--bweb-pad-top, 18px) 0 var(--bweb-pad-bottom, 18px);
  margin:var(--bweb-mar-top, 0px) 0 var(--bweb-mar-bottom, 0px);
}

.bweb-ccc-track{
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  gap:var(--bweb-gap, 16px);
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling: touch;
  padding:0 8px;
}

.bweb-ccc-track::-webkit-scrollbar{
  height:10px;
}
.bweb-ccc-track::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,0.18);
  border-radius:999px;
}
.bweb-ccc-track::-webkit-scrollbar-track{
  background:transparent;
}

.bweb-ccc-item{
  text-align:center;
  min-width:calc(var(--bweb-circle-size, 120px) + 2px);
  scroll-snap-align:start;
}

.bweb-ccc-circle{
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  width:var(--bweb-circle-size, 120px);
  height:var(--bweb-circle-size, 120px);
  border-radius:999px;
  overflow:hidden;
  background:var(--bweb-circle-bg, #000);
  margin:0 auto;
  padding:8%;
  transform:translateZ(0);
  box-sizing:border-box;
}

.bweb-ccc-circle::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:999px;
  pointer-events:none;
  box-shadow:0 0 0 var(--bweb-ring-width, 3px) rgba(255,255,255,var(--bweb-ring-opacity,0.35)) inset;
  transition:box-shadow .18s ease;
}

.bweb-ccc-img{
  width:100% !important;
  height:100% !important;
  object-fit:contain;
  border-radius:999px;
  display:block;
  transform:scale(1);
  transition:transform .18s ease;
}

.bweb-ccc-fallback{
  width:100%;
  height:100%;
  display:block;
  background:rgba(255,255,255,0.06);
}

.bweb-ccc-item:hover .bweb-ccc-img{
  transform:scale(var(--bweb-hover-scale, 1.06));
}
.bweb-ccc-item:hover .bweb-ccc-circle::after{
  box-shadow:0 0 0 var(--bweb-ring-width, 3px) rgba(255,255,255,var(--bweb-ring-opacity-hover,0.70)) inset;
}

.bweb-ccc-title{
  margin-top:10px;
  color:var(--bweb-title-color, #fff);
  font-weight:600;
  line-height:1.15;
  font-size:var(--bweb-title-size, 14px);
  max-width:var(--bweb-circle-size, 120px);
  margin-left:auto;
  margin-right:auto;
}

.bweb-ccc-count{
  margin-top:4px;
  color:var(--bweb-count-color, rgba(255,255,255,0.70));
  font-size:var(--bweb-count-size, 12px);
}

/* When we decide to "lock" to a perfect fit, hide scrollbar + center content */
.bweb-ccc-wrap[data-bweb-fit="1"] .bweb-ccc-track{
  overflow-x:hidden;
  justify-content:center;
}