/* CRX Logos Showcase - styles v1.3 */
.crxls-wrap{ position:relative; width:100%; }
.crxls-carousel{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  flex-wrap:nowrap;
  overflow:hidden;
  scroll-behavior:smooth;
  gap:16px;
  cursor:grab; /* show hand cursor */
}
.crxls-carousel:active{
  cursor:grabbing;
}
.crxls-item{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
}
.crxls-item .crxls-logo-img{
  max-height:64px;
  width:auto;
  height:auto;
  display:block;
  filter:none;
  transition:filter .25s ease, opacity .25s ease;
}

/* grayscale mode */
.crxls-has-grayscale .crxls-logo-img{
  filter:grayscale(100%) opacity(0.8);
}
.crxls-has-grayscale .crxls-item:hover .crxls-logo-img,
.crxls-has-grayscale .crxls-item:focus-within .crxls-logo-img{
  filter:none;
  opacity:1;
}

.crxls-wrap .crxls-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  border:none; background:rgba(0,0,0,0.5); color:#fff;
  width:36px; height:36px; border-radius:50%;
  cursor:pointer; line-height:36px; text-align:center;
}
.crxls-wrap .crxls-prev{ left:8px; }
.crxls-wrap .crxls-next{ right:8px; }
.crxls-wrap .crxls-nav:focus{ outline:2px solid #fff; outline-offset:2px; }

.crxls-empty{ opacity:.7; font-style:italic; }


/* --- Fix: prevent logo cropping; keep proper containment and centering --- */
.crxls-carousel{ --crxls-item-height: 120px; }
@media (min-width: 768px){ .crxls-carousel{ --crxls-item-height: 140px; } }
@media (min-width: 1200px){ .crxls-carousel{ --crxls-item-height: 160px; } }

.crxls-item{
  height: var(--crxls-item-height);
  display:flex;
  align-items:center;
  justify-content:center;
  /* Allow images to fully fit without clipping */
  overflow: visible;
}

.crxls-item img,
.crxls-logo img,
.crxls-item picture img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  object-position:center;
  display:block;
}

/* If some skins use background-image on a child, force contain */
.crxls-item [style*="background-image"]{
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
}

/* Optional: keep button/drag cursors as a pointer-style hand over the area */
.crxls-wrap, .crxls-carousel{ cursor: grab; }
.crxls-carousel:active{ cursor: grabbing; }
.crxls-item a, .crxls-wrap .crxls-nav{ cursor: pointer; }