/* Tab Navigation Container */
.produkt__tabs-nav {
  display: flex;
  gap: var(--spacing-4);
  padding: var(--spacing-4) 0;
  justify-content: flex-start;
}

/* Mobile Scrolling */
@media (max-width: 768px) {
  .produkt__tabs-nav-wrapper {
    position: relative;
  }

  .produkt__tabs-nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    padding-bottom: var(--spacing-4);
    gap: var(--spacing-2);
  }

  /* Hide scrollbar */
  .produkt__tabs-nav::-webkit-scrollbar {
    display: none;
  }

  /* Prevent text wrapping */
  .produkt__tab-btn {
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Add padding to container for better UX */
  .produkt__tabs-container {
    padding-left: max(var(--spacing-4), env(safe-area-inset-left));
    padding-right: max(var(--spacing-4), env(safe-area-inset-right));
  }

  .produkt__tabs-nav-wrapper::before,
  .produkt__tabs-nav-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 20px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
  }

  .produkt__tabs-nav-wrapper::before {
    left: 0;
    background: linear-gradient(to right, var(--color-primary), transparent);
  }

  .produkt__tabs-nav-wrapper::after {
    right: 0;
    background: linear-gradient(to left, var(--color-primary), transparent);
  }

  .produkt__tabs-nav.is-scrollable:not(.at-start) + .produkt__tabs-nav-wrapper::before {
    opacity: 1;
  }

  .produkt__tabs-nav.is-scrollable:not(.at-end) + .produkt__tabs-nav-wrapper::after {
    opacity: 1;
  }
}