/* ==== Related products (ACF Specs slider) ==== */

.acf-related-specs-slider{
  --card-w: 150px;           /* bump this up a little */
  --card-gap: 28px;          /* more air between items */
  --title-lines: 2;          /* clamp product name */
  --pad-x: 28px;
  --pad-y: 24px;

  background: #f6f7f9;       /* light gray background strip */
  border-radius: 10px;
  padding: var(--pad-y) var(--pad-x);
  margin: 26px auto 36px;    /* center the whole block */
  max-width: 1100px;         /* keep it nicely centered on wide screens */
}

.acf-related-specs__heading{
  font-size: 18px;
  line-height: 1.2;
  font-weight: 600;
  margin: 0 0 18px 0;
  text-align: center;
}

.acf-related-specs-slider .slider-wrapper{
  position: relative;
}

/* SCROLLER - Enhanced for Touch Swipe */
.acf-related-specs-slider .slides-container{
  display: flex;
  gap: var(--card-gap);
  overflow-x: auto;                 /* Always enable horizontal scroll */
  overflow-y: hidden;
  scroll-behavior: smooth;
  padding: 6px 2px;
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  scroll-snap-type: x mandatory;     /* Snap to cards */
  scrollbar-width: none;             /* Firefox - hide scrollbar */
  -ms-overflow-style: none;          /* IE/Edge - hide scrollbar */
}

/* Hide scrollbar for Chrome/Safari */
.acf-related-specs-slider .slides-container::-webkit-scrollbar{
  display: none;
}

/* Dragging state */
.acf-related-specs-slider .slides-container.dragging{
  scroll-behavior: auto;
  cursor: grabbing;
}

.acf-related-specs-slider .slides-container{
  cursor: grab;
}

.acf-related-specs-slider .slides-container:active{
  cursor: grabbing;
}

/* Show scrollbar only on desktop when needed */
@media (min-width: 769px) {
  .acf-related-specs-slider .slides-container::-webkit-scrollbar{
    display: block;
    height: 8px;
  }
  .acf-related-specs-slider .slides-container::-webkit-scrollbar-thumb{
    background: rgba(0,0,0,.12);
    border-radius: 8px;
  }
  .acf-related-specs-slider .slides-container::-webkit-scrollbar-track{
    background: rgba(0,0,0,.05);
    border-radius: 8px;
  }
}

/* Responsive behavior - always scrollable on mobile, center on desktop when items fit */
@media (min-width: 769px) {
  .acf-related-specs-slider .slides-container.is-scrollable{
    /* On desktop, center items if they all fit in viewport */
    justify-content: flex-start;
  }
  
  /* Only center if items don't exceed container width */
  .acf-related-specs-slider .slides-container.is-scrollable:not(.overflowing){
    justify-content: center;
    overflow-x: hidden;
  }
}

/* CARD */
.acf-related-specs-slider .slide{
  flex: 0 0 auto;
  width: var(--card-w);
  scroll-snap-align: center;
}

.acf-related-specs-slider .slider-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  background: #fff;
  border-radius: 12px;
  padding: 14px 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  transition: transform .18s ease, box-shadow .18s ease;
}

.acf-related-specs-slider .slider-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

.acf-related-specs-slider .slider-thumb{
  width: 100%;
  height: 120px;                  /* a bit bigger */
  display: grid;
  place-items: center;
  margin-bottom: 10px;
}
.acf-related-specs-slider .slider-thumb img,
.acf-related-specs-slider .slider-thumb .attachment-woocommerce_thumbnail{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* PRODUCT NAME: bold + clamp to prevent crowding */
.acf-related-specs-slider .slider-title{
  font-size: 13px;
  font-weight: 700;               /* make it bold */
  text-align: center;
  line-height: 1.35;
  min-height: calc(1em * var(--title-lines) * 1.35);
  display: -webkit-box;
  -webkit-line-clamp: var(--title-lines);
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #111;
  padding: 2px 4px;
}

/* NAV ARROWS: only appear when > 6 items */
.acf-related-specs-slider .slide-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  cursor: pointer;
  font-size: 22px;
  line-height: 36px;
  text-align: center;
  padding: 0;
  z-index: 2;
}
.acf-related-specs-slider .slide-nav.prev{ left: -6px; }
.acf-related-specs-slider .slide-nav.next{ right: -6px; }
.acf-related-specs-slider.arrows-hidden .slide-nav{ display:none; }

/* Tablet Responsive */
@media (max-width: 1024px) and (min-width: 769px){
  .acf-related-specs-slider{ 
    --card-w: 140px; 
    --card-gap: 20px; 
    max-width: 95vw;
  }
}

/* Mobile Large */
@media (max-width: 768px){
  .acf-related-specs-slider{ 
    --card-w: 130px; 
    --card-gap: 16px; 
    max-width: 94vw; 
    padding: 16px 12px;
    margin: 20px auto 24px;
  }
  .acf-related-specs-slider .slide-nav.prev{ left: -2px; }
  .acf-related-specs-slider .slide-nav.next{ right: -2px; }
  .acf-related-specs-slider .slider-thumb{
    height: 100px;
  }
  .acf-related-specs-slider .slider-title{
    font-size: 12px;
    min-height: calc(1em * 2 * 1.35);
  }
}

/* Mobile Medium */
@media (max-width: 480px){
  .acf-related-specs-slider{ 
    --card-w: 120px; 
    --card-gap: 12px; 
    max-width: 96vw;
    padding: 12px 8px;
    margin: 16px auto 20px;
  }
  .acf-related-specs-slider .slider-thumb{
    height: 85px;
  }
  .acf-related-specs-slider .slider-title{
    font-size: 11px;
    padding: 1px 2px;
  }
  .acf-related-specs-slider .slider-card{
    padding: 10px 8px;
  }
}

/* Mobile Small */
@media (max-width: 360px){
  .acf-related-specs-slider{ 
    --card-w: 110px; 
    --card-gap: 10px; 
    padding: 10px 6px;
    margin: 14px auto 18px;
  }
  .acf-related-specs-slider .slider-thumb{
    height: 75px;
  }
  .acf-related-specs-slider .slider-title{
    font-size: 10px;
  }
  .acf-related-specs-slider .slider-card{
    padding: 8px 6px;
  }
}