/* Round carousel dots, shared by every carousel on the site: the homepage box picker
   (components/box-picker.js) and the homepage reels, reviews and recommendations carousels
   (wireMobileCarouselDots in index.html), box pages (components/box-page.js), /boxes, the toy
   play-card sheet (components/toy-detail-modal.js) and the photo lightbox
   (components/photo-lightbox.js).
   Each dot is a plain round dot, including the current one, which only changes color.
   A gallery sets its own look on its dots container with --bb-dot-size, --bb-dot-color
   and --bb-dot-active-color. */
.bb-dot {
  width: var(--bb-dot-size, 7px);
  height: var(--bb-dot-size, 7px);
  padding: 0;
  border: none;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--bb-dot-color, #EDE4D4);
  transition: background 0.15s;
}
.bb-dot.active,
.bb-dot.is-active { background: var(--bb-dot-active-color, #E8795C); }