/* =================================
   Terms Page: Accent Scrollbar Bar
================================= */

.cb-sectionbar{
  width:100%;
  background:var(--cb-surface);
  border:1px solid var(--cb-border);
  border-radius:18px;
  box-shadow:0 10px 22px rgba(0,0,0,.06);

  /* keep your nice "card" padding */
  padding:1rem 1.25rem;
  box-sizing:border-box;

  overflow:hidden; /* clips everything to rounded ends */
}

@media (min-width:768px){
  .cb-sectionbar{ padding:1.25rem 2rem; }
}

.cb-sectionbar-inner{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:1.6rem;

  justify-content:flex-start;   /* overflow case */
  overflow-x:auto;
  overflow-y:hidden;

  padding:0 1.25rem .45rem;     /* keeps it “designed” */
  scrollbar-gutter: stable;
}

/* When there’s plenty of room (desktop), center it */
@media (min-width: 992px){
  .cb-sectionbar-inner{
    justify-content:center;
  }
}

/* Default (mobile/tablet): keep the track visible so users notice it can scroll */
.cb-sectionbar-inner::-webkit-scrollbar{ height:4px; }

.cb-sectionbar-inner::-webkit-scrollbar-track{
  background:rgba(156,135,82,.22);
  border-radius:999px;
  margin-inline:10px;
}

.cb-sectionbar-inner::-webkit-scrollbar-thumb{
  background:var(--cb-accent);
  border-radius:999px;
}

/* Desktop: don't look like a full bar */
@media (min-width: 992px){
  .cb-sectionbar-inner::-webkit-scrollbar{ height:3px; }

  .cb-sectionbar-inner::-webkit-scrollbar-track{
    background:transparent;      /* <-- removes the “full bar” look */
    margin-inline:12px;
  }

  .cb-sectionbar-inner::-webkit-scrollbar-thumb{
    background:rgba(156,135,82,.85);
  }
}

/* Firefox */
.cb-sectionbar-inner{
  scrollbar-width:thin;
  scrollbar-color: var(--cb-accent) rgba(156,135,82,.22);
}
@media (min-width: 992px){
  .cb-sectionbar-inner{
    scrollbar-color: rgba(156,135,82,.85) transparent; /* subtle track on desktop */
  }
}

/* Links (keep yours) */
.cb-sectionbar a{
  color:var(--cb-muted);
  text-decoration:none;
  white-space:nowrap;
  position:relative;
  font-size:.95rem;
  transition:color .15s ease;
  flex:0 0 auto;
}
.cb-sectionbar a:hover{ color:var(--cb-text); }

.cb-sectionbar a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-4px;
  width:0%;
  height:2px;
  background:var(--cb-accent);
  transition:width .18s ease;
  border-radius:2px;
}
.cb-sectionbar a:hover::after{ width:100%; }
.cb-headbands-stack {
  position: relative;
  min-height: 460px;
}

.cb-headbands-img {
  position: absolute;
  width: 62%;
  max-width: 300px;
  height: auto;
  object-fit: cover;
  background: #fff;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

.cb-headbands-img-1 {
  top: 0;
  left: 0;
  z-index: 2;
}

.cb-headbands-img-2 {
  bottom: 0;
  right: 0;
  z-index: 1;
}

@media (max-width: 767.98px) {
  .cb-headbands-stack {
    min-height: 380px;
  }

  .cb-headbands-img {
    width: 72%;
    max-width: none;
  }
}