/* BE Category Carousel
   Override any of these from your theme / design tokens, e.g.
   .be-products{ --be-cc-gap:24px; --be-cc-per-view:4; } */
.be-products{
  --be-cc-gap:16px;
  --be-cc-per-view:3;
  --be-cc-text:#fff;
  --be-cc-circle:var(--be-purple,#50316b);
  --be-cc-dot:#fff;
  --be-cc-dot-size:8px;
}

.be-products__track{
  display:flex;
  gap:var(--be-cc-gap);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.be-products__track::-webkit-scrollbar{display:none}
.be-products__track:focus-visible{outline:2px solid var(--be-cc-dot);outline-offset:4px}

a.be-products__item{
  flex:0 0 calc((100% - (var(--be-cc-per-view) - 1) * var(--be-cc-gap)) / var(--be-cc-per-view));
  scroll-snap-align:start;
  display:block;
  text-decoration:none;
  text-align:center;
}
.be-products__img{display:block}
.be-products__img img{display:block;width:100%;height:auto}
.be-products__name{display:block;margin-top:4px;font-size:12px;color:var(--be-cc-text)}

/* Optional CSS circle behind transparent product images: [be_product_cats circle="yes"] */
.be-products--circle .be-products__img{
  display:grid;place-items:center;aspect-ratio:1;border-radius:50%;background:var(--be-cc-circle);
}
.be-products--circle .be-products__img img{width:70%}

.be-products__dots{display:flex;justify-content:center;gap:8px;margin-top:16px}
.be-products__dots:empty{display:none}
.be-products__dot{
  width:var(--be-cc-dot-size);height:var(--be-cc-dot-size);
  padding:0;border:0;border-radius:50%;
  background:var(--be-cc-dot);opacity:.4;cursor:pointer;
}
.be-products__dot[aria-current="true"]{opacity:1}

@media (max-width:767px){
  .be-products{--be-cc-per-view:2}
}
@media (prefers-reduced-motion:reduce){
  .be-products__track{scroll-behavior:auto}
}