/* Product Tab Carousel – Style 3 (fix vertical stack, enforce single row) */

/* Container */
.site-module .module-header.style-3 { }

/* TAB BAR */
.site-module .module-header.style-3 .tab-header.tab-style-3 {
  background: transparent;
  border-radius: 12px;
  padding: 12px 0;
  position: relative;
}

/* UL: FORCE HORIZONTAL FLEX ONE LINE */
.site-module .module-header.style-3 .tab-header.tab-style-3 ul {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 24px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
  overflow-x: auto;                /* desktop: allow scroll if many */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  width: 100%;
}
.site-module .module-header.style-3 .tab-header.tab-style-3 ul::-webkit-scrollbar { display: none; }

/* LI: inline-flex, don't stretch */
.site-module .module-header.style-3 .tab-header.tab-style-3 ul li {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* LINK */
.site-module .module-header.style-3 .tab-header.tab-style-3 ul li a {
  position: relative;
  display: inline-block !important;
  padding: 8px 4px;
  text-transform: none;
  font-weight: 600;
  letter-spacing: 0;
  color: #9e9e9e;
  transition: color .2s ease, opacity .2s ease;
  opacity: 1;
  text-decoration: none;
  white-space: nowrap !important;
}

.site-module .module-header.style-3 .tab-header.tab-style-3 ul li a:hover { opacity: 1; color: #000; }

/* ACTIVE */
.site-module .module-header.style-3 .tab-header.tab-style-3 ul li.active a,
.site-module .module-header.style-3 .tab-header.tab-style-3 ul li a[aria-selected="true"] {
  color: #000;
  font-weight: 700;
}

.site-module .module-header.style-3 .tab-header.tab-style-3 ul li.active a::after,
.site-module .module-header.style-3 .tab-header.tab-style-3 ul li a[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -6px;
  height: 3px;
  border-radius: 2px;
  background: #000;
  width: 28px;
}

/* Focus ring */
.site-module .module-header.style-3 .tab-header.tab-style-3 ul li a:focus {
  outline: 2px solid #00000055;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Baseline across bar */
.site-module .module-header.style-3 .tab-header.tab-style-3::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: #000;
}

/* -------- Mobile: evenly spaced, no scroll unless necessary -------- */
@media (max-width: 767px) {
  .site-module .module-header.style-3 .tab-header.tab-style-3 ul {
    justify-content: space-between !important;
    overflow-x: hidden;           /* hide scroll by default */
  }
  /* If there are many tabs, uncomment the two rules below to allow scroll on mobile too */
  /* .site-module .module-header.style-3 .tab-header.tab-style-3 ul { overflow-x: auto; }
     .site-module .module-header.style-3 .tab-header.tab-style-3 ul::-webkit-scrollbar { display: none; } */

  .site-module .module-header.style-3 .tab-header.tab-style-3 ul li { flex: 0 0 auto; }
  .site-module .module-header.style-3 .tab-header.tab-style-3 ul li a { padding: 10px 6px 12px; }
  .site-module .module-header.style-3 .tab-header.tab-style-3 ul li.active a::after { bottom: -2px; }
}


/* --- Mobile scrolling for tabs (one row, scrollable) --- */
@media (max-width: 767px) {
  .site-module .module-header.style-3 .tab-header.tab-style-3 ul {
    justify-content: flex-start !important;   /* allow natural flow */
    overflow-x: auto !important;              /* enable horizontal scroll */
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;            /* smooth snap */
    padding: 0 8px;                           /* breathing room at edges */
  }
  .site-module .module-header.style-3 .tab-header.tab-style-3 ul::-webkit-scrollbar { display: none; }
  .site-module .module-header.style-3 .tab-header.tab-style-3 ul li {
    scroll-snap-align: start;
  }
}


/* Axis-lock improvements */
.site-module .module-header.style-3 .tab-header.tab-style-3 ul {
  overscroll-behavior-y: contain;     /* don't pass vertical scroll to page while interacting */
  touch-action: pan-x;                 /* hint browser to track only horizontal pan */
  overflow-y: hidden;                  /* prevent vertical jiggle */
}