/* =========================================================
   Ken Brown · Col Carousel
   ========================================================= */
.kb-col-carousel { position: relative; width: 100%; overflow: hidden; color: var(--custom-brand-text,#28242A); }
.kb-col-carousel__viewport { position: relative; width: 100%; overflow: hidden; touch-action: pan-y; cursor: grab; }
.kb-col-carousel.is-dragging .kb-col-carousel__viewport { cursor: grabbing; }
.kb-col-carousel__track { gap: 12px; width: max-content; will-change: transform; user-select: none; }
.kb-col-carousel__item { flex: 0 0 300px; width: 300px; min-width: 0; }
.kb-col-carousel__link { color: var(--custom-brand-text,#28242A); }
.kb-col-carousel__media { position: relative; background-color: #f7f4f1; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.kb-col-carousel__media::after { content: ""; position: absolute; inset: 0; z-index: 2; background-color: rgba(0,0,0,0); pointer-events: none; transition: background-color .35s ease; }
.kb-col-carousel__media:hover::after { background-color: rgba(0,0,0,.28); }
.kb-col-carousel__image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; pointer-events: none; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; transition: transform .45s cubic-bezier(.16,1,.3,1); }
.kb-col-carousel__media:hover .kb-col-carousel__image { transform: scale(1.045); }
.kb-col-carousel__content { min-height: 64px; }
.kb-col-carousel__eyebrow { color: rgba(40,36,42,.52); font-size: clamp(9px,.58vw,11px); font-weight: 400; line-height: 1.25; letter-spacing: .02em; }
.kb-col-carousel__title { color: var(--custom-brand-text,#28242A); font-size: clamp(12px,.72vw,14px); font-weight: 400; line-height: 1.2; }
.kb-col-carousel__model { margin-top: 1px; color: var(--custom-brand-text,#28242A); font-size: clamp(11px,.66vw,13px); line-height: 1.15; }
.kb-col-carousel__arrow { position: absolute; z-index: 5; top: 42%; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background-color: #fff; color: var(--custom-brand-text,#28242A); box-shadow: 0 2px 10px rgba(40,36,42,.10); opacity: 0; visibility: hidden; transform: translateY(-50%) scale(.92); transition: opacity .22s ease, visibility .22s ease, transform .28s cubic-bezier(.16,1,.3,1), box-shadow .22s ease; }
.kb-col-carousel:hover .kb-col-carousel__arrow, .kb-col-carousel:focus-within .kb-col-carousel__arrow { opacity: 1; visibility: visible; transform: translateY(-50%) scale(1); }
.kb-col-carousel__arrow:hover, .kb-col-carousel__arrow:focus { box-shadow: 0 4px 14px rgba(40,36,42,.16); }
.kb-col-carousel__arrow:focus-visible { outline: 2px solid rgba(40,36,42,.24); outline-offset: 3px; }
.kb-col-carousel__arrow:disabled { opacity: 0 !important; visibility: hidden !important; pointer-events: none; }
.kb-col-carousel__arrow--prev { left: 1.25rem; }
.kb-col-carousel__arrow--next { right: 1.25rem; }
.kb-col-carousel__arrow span { display: block; width: 10px; height: 10px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; }
.kb-col-carousel__arrow--prev span { margin-left: 4px; transform: rotate(-135deg); }
.kb-col-carousel__arrow--next span { margin-right: 4px; transform: rotate(45deg); }

@media (min-width: 1200px) and (max-width: 1399.98px) {
  .kb-col-carousel__item { flex-basis: 260px; width: 260px; }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .kb-col-carousel__item { flex-basis: 225px; width: 225px; }
}

@media (max-width: 991.98px) {
  .kb-col-carousel__item { flex-basis: min(38vw,280px); width: min(38vw,280px); }
}

@media (max-width: 767.98px) {
  .kb-col-carousel .container { max-width: none; padding-right: 0; }
  .kb-col-carousel__track { gap: 10px; }
  .kb-col-carousel__item { flex-basis: min(76vw,310px); width: min(76vw,310px); }
  .kb-col-carousel__content { padding-right: .75rem !important; }
}

@media (max-width: 575.98px) {
  .kb-col-carousel__item { flex-basis: 78vw; width: 78vw; }
}

.kb-col-carousel.is-dragging .kb-col-carousel__media { cursor: grabbing; }