/* KO – Divi Horizontal Carousel Converter (Production Stable) */

:root{
  --ko-card-max: 540px;
  --ko-gap: 30px;
  --ko-pad-x: 40px;
  --ko-pad-x-mobile: 18px;

  --ko-nav-bottom: 18px;
  --ko-nav-offset: 120px;
}

/* EDGE-TO-EDGE BLURB IMAGE INSIDE KO CARD */
.ko-dhcc-item.et_pb_blurb .et_pb_blurb_content{
  width: 100%;
}

/* Kill any spacing Divi may add around the image area */
.ko-dhcc-item.et_pb_blurb .et_pb_main_blurb_image{
  width: 100% !important;
  margin: 0 !important;
}

/* Wrapper must be full-width block */
.ko-dhcc-item.et_pb_blurb .et_pb_image_wrap{
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
}

/* Image fills wrapper */
.ko-dhcc-item.et_pb_blurb .et_pb_main_blurb_image img{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}





.ko-dhcc-track{
  display:flex !important;
  flex-wrap:nowrap !important;
  overflow-x:auto !important;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling:touch;

  gap: var(--ko-gap);
  padding-left: var(--ko-pad-x);
  padding-right: var(--ko-pad-x);

  position: relative;
  padding-bottom: 86px;
}

.ko-dhcc-track::-webkit-scrollbar{ display:none; }
.ko-dhcc-track{ -ms-overflow-style:none; scrollbar-width:none; }

.ko-dhcc-item{
  flex: 0 0 auto !important;
  scroll-snap-align: start;
  float: none !important;
  margin: 0 !important;
  max-width: var(--ko-card-max) !important;
}

@media (min-width: 768px){
  .ko-dhcc-item{
    width: clamp(360px, 44%, var(--ko-card-max)) !important;
  }
}

@media (max-width: 767px){
  .ko-dhcc-track{
    padding-left: var(--ko-pad-x-mobile);
    padding-right: var(--ko-pad-x-mobile);
    padding-bottom: 74px;
  }
  .ko-dhcc-item{
    width: 86% !important;
  }
}

.ko-carousel-shell{
  position: relative;
}

.ko-carousel-shell .ko-carousel-nav{
  position: absolute;
  right: calc(var(--ko-pad-x) + var(--ko-nav-offset));
  bottom: var(--ko-nav-bottom);
  z-index: 50;
  width: auto !important;
}

.ko-carousel-shell .ko-carousel-nav .et_pb_column{
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap;
}

.ko-carousel-shell .ko-carousel-nav .et_pb_module{
  display: inline-flex;
}

.ko-carousel-shell .ko-carousel-nav .et_pb_module + .et_pb_module{
  margin-left: 24px;
}

.ko-carousel-prev,
.ko-carousel-next{
  cursor: pointer;
}

@media (max-width: 767px){
  .ko-carousel-shell .ko-carousel-nav{
    right: var(--ko-pad-x-mobile);
    bottom: 12px;
  }
}

/* --- EQUAL HEIGHT CARDS (STRETCH) ---
   Makes each slide/item the same height and allows the Divi module inside to expand.
   This is required so inner modules can pin content to the bottom (e.g., price/contact row).
*/
.ko-dhcc-track{
  align-items: stretch !important;
}

/* Each slide stretches to track height */
.ko-dhcc-track > .ko-dhcc-item{
  align-self: stretch !important;
  display: flex !important;
  flex-direction: column !important;
}

/* If slides are Divi columns, their inner wrapper must also be flex */
.ko-dhcc-track > .ko-dhcc-item.et_pb_column{
  display: flex !important;
  flex-direction: column !important;
}

.ko-dhcc-track > .ko-dhcc-item.et_pb_column > .et_pb_column_inner{
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

/* Key: allow the module inside the column to grow to fill remaining height */
.ko-dhcc-track > .ko-dhcc-item.et_pb_column > .et_pb_column_inner > .et_pb_module{
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

/* If slides are modules directly */
.ko-dhcc-track > .ko-dhcc-item.et_pb_module{
  display: flex !important;
  flex-direction: column !important;
}

/* Nav disabled state (prev/next) — Divi Icon module friendly */
.ko-nav-disabled{
  opacity: .75 !important;
  pointer-events: none !important; /* disable clicks on the control */
  transition: opacity .25s ease;
}

/* Fade the visible glyph (do NOT apply pointer-events here) */
.ko-nav-disabled .et_pb_icon_wrap,
.ko-nav-disabled .et-pb-icon,
.ko-nav-disabled .et-pb-icon:before{
  opacity: .75 !important;
}