/* BC Scrolling Banner — front styles (brown palette ready) */

.bc-scroller{
  --bg: var(--bc-scroller-bg, #5B3A29); /* fallback to your brown */
  --fg: var(--bc-scroller-fg, #FFFFFF);
  --h:  var(--bc-scroller-height, 44px);
  --fz: var(--bc-scroller-font, 16px);

  position: sticky;
  top: 0;
  z-index: 9999;
  background: var(--bg);
  color: var(--fg);
  height: var(--h);
  line-height: var(--h);
  overflow: hidden;
  border-bottom: 1px solid rgba(0,0,0,.12);
}
.bc-scroller .bc-scroller__viewport{
  height: 100%;
  mask-image: linear-gradient(to right, transparent 0, black 40px, black calc(100% - 40px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 40px, black calc(100% - 40px), transparent 100%);
}
.bc-scroller .bc-scroller__track{
  display: inline-flex;
  height: 100%;
  align-items: center;
  will-change: transform;
}
.bc-scroller .bc-scroller__item{
  padding: 0 28px;
  font-size: var(--fz);
  font-weight: 600;
  white-space: nowrap;
}
.bc-scroller .bc-scroller__link{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Pause on hover (JS toggles class if enabled) */
.bc-scroller.is-paused .bc-scroller__track{
  animation-play-state: paused !important;
}

/* Reduced motion: stop animation; center one item */
@media (prefers-reduced-motion: reduce) {
  .bc-scroller .bc-scroller__track {
    animation: none !important;
    transform: translate3d(0,0,0) !important;
    justify-content: center;
  }
}

/* If placed at bottom, let theme handle spacing; sticky not needed */
.bc-scroller[data-placement="bottom"]{
  position: static;
  border-top: 1px solid rgba(0,0,0,.12);
  border-bottom: none;
}

/* BC Scrolling Banner — front styles (brown palette ready) */

.bc-scroller{
  --bg: var(--bc-scroller-bg, #5B3A29); /* fallback brown */
  --fg: var(--bc-scroller-fg, #FFFFFF);
  --h:  var(--bc-scroller-height, 44px);
  --fz: var(--bc-scroller-font, 16px);

  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  background: var(--bg);
  color: var(--fg);
  height: var(--h);
  line-height: var(--h);
  overflow: hidden;
  border-bottom: 1px solid rgba(0,0,0,.12);
}

.bc-scroller .bc-scroller__viewport{
  height: 100%;
  mask-image: linear-gradient(to right,
    transparent 0,
    black 40px,
    black calc(100% - 40px),
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(to right,
    transparent 0,
    black 40px,
    black calc(100% - 40px),
    transparent 100%
  );
}

.bc-scroller .bc-scroller__track{
  display: inline-flex;
  height: 100%;
  align-items: center;
  will-change: transform;
}

.bc-scroller .bc-scroller__item{
  padding: 0 28px;
  font-size: var(--fz);
  font-weight: 600;
  white-space: nowrap;
}

.bc-scroller .bc-scroller__link{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Pause on hover (JS toggles class if enabled) */
.bc-scroller.is-paused .bc-scroller__track{
  animation-play-state: paused !important;
}

/* Reduced motion: stop animation; center one item */
@media (prefers-reduced-motion: reduce) {
  .bc-scroller .bc-scroller__track {
    animation: none !important;
    transform: translate3d(0,0,0) !important;
    justify-content: center;
  }
}

/* If placed at bottom, let theme handle spacing; sticky not needed */
.bc-scroller[data-placement="bottom"]{
  position: static;
  border-top: 1px solid rgba(0,0,0,.12);
  border-bottom: none;
}

/* ---------- Mobile Responsive Tweaks ---------- */

@media (max-width: 768px){
  .bc-scroller{
    --h: 34px;          /* slimmer bar */
    --fz: 13px;         /* smaller text */
  }

  .bc-scroller .bc-scroller__item{
    padding: 0 14px;    /* less horizontal padding so it fits nicely */
  }

  .bc-scroller .bc-scroller__viewport{
    mask-image: linear-gradient(to right,
      transparent 0,
      black 18px,
      black calc(100% - 18px),
      transparent 100%
    );
    -webkit-mask-image: linear-gradient(to right,
      transparent 0,
      black 18px,
      black calc(100% - 18px),
      transparent 100%
    );
  }
}

/* Extra tiny devices */
@media (max-width: 480px){
  .bc-scroller{
    --h: 30px;
    --fz: 12px;
  }

  .bc-scroller .bc-scroller__item{
    padding: 0 10px;
  }
}