<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script>
window.TabsManager = window.TabsManager || {
  initialized: false,
  
  init: function() {
    if (this.initialized) return;
    this.initialized = true;
    
    $(document).ready(() => {
      this.initAllTabs();
    });
    
    // Theme editor support
    if (window.Shopify && window.Shopify.designMode) {
      $(document).on('shopify:section:load shopify:block:select shopify:section:select shopify:section:rerender', () => {
        setTimeout(() => this.initAllTabs(), 100);
      });
    }
    
    // Handle case when DOM is already loaded
    if (document.readyState === 'complete' || document.readyState === 'interactive') {
      setTimeout(() => this.initAllTabs(), 100);
    }
  },
  
  initAllTabs: function() {
    $('.tabs-container').each(function() {
      TabsManager.initTabsForContainer($(this));
    });
  },
  
  initTabsForContainer: function($container) {
    const containerId = $container.attr('id');
    
    // Calculate and set the width of tabs-stage dynamically
    let totalTabsWidth = 0;
    $container.find('.tabs-nav li').each(function() {
      totalTabsWidth += $(this).outerWidth(true);
    });
    $container.find('.tabs-stage').css('max-width', totalTabsWidth);

    // Remove previous event listeners for this container
    $container.find('.tabs-nav a').off('click.tabs');

    // Add scoped event listeners
    $container.find('.tabs-nav a').on('click.tabs', function(event) {
      event.preventDefault();
      
      // Only affect tabs within this container
      $container.find('.tab-active').removeClass('tab-active');
      $(this).parent().addClass('tab-active');
      $container.find('.tabs-stage div').hide();
      
      const targetTab = $(this).attr('href');
      $container.find(targetTab).show();
    });

    // Ensure active tab is visible
    if ($container.find('.tab-active').length === 0) {
      $container.find('.tabs-nav a:first').trigger('click.tabs');
    } else {
      const activeTabHref = $container.find('.tab-active a').attr('href');
      $container.find('.tabs-stage div').hide();
      $container.find(activeTabHref).show();
    }
  }
};

// Initialize the manager
TabsManager.init();
</script>

<!-- Now use this for EACH block (notice the simpler structure) -->
<div
  {{ block.shopify_attributes }}
  id="tabs-container-{{ block.id }}"
  class="tabs-container {{ block.settings.visibility }}"
  style="--margin-top: {{ block.settings.margin_top | divided_by: 10.0 }}rem;--margin-bottom: {{ block.settings.margin_bottom | divided_by: 10.0 }}rem;"
>
  <div class="product__description {{ block.settings.visibility }}">
    <ul class="tabs-nav">
      <li class="desc tab-active">
        <a href="#tab-1-{{ block.id }}" rel="nofollow">{{ block.settings.descriptiontabtitle }}</a>
      </li>

      {% if block.settings.enable_secondtab %}
        <li class="">
          <a href="#tab-2-{{ block.id }}" rel="nofollow">{{ block.settings.secondtabtitle }}</a>
        </li>
      {% endif %}

      {% if block.settings.enable_thirdtab %}
        <li>
          <a href="#tab-3-{{ block.id }}" rel="nofollow">{{ block.settings.thirdtabtitle }}</a>
        </li>
      {% endif %}
    </ul>

    <div class="tabs-stage">
      <div id="tab-1-{{ block.id }}" style="display: block;" class="description">
        {{ block.settings.descriptiontabcontent }}
        {{ block.settings.page.content }}
      </div>

      {% if block.settings.enable_secondtab %}
        <div id="tab-2-{{ block.id }}" style="display: none;">
          {{ block.settings.secondtabcontent }}
          {{ block.settings.page2.content }}
        </div>
      {% endif %}

      {% if block.settings.enable_thirdtab %}
        <div id="tab-3-{{ block.id }}" style="display: none;">
          {{ block.settings.thirdtabcontent }}
          {{ block.settings.page3.content }}
        </div>
      {% endif %}
    </div>
  </div>
</div>

<style>
   .product__info-container .product__description {
      margin: 0;
    }
    .product__description .tabs-nav {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .product__description .tabs-nav li:first-child a {
      border-right: 0;
      -moz-border-radius-topleft: {{ block.settings.border_radius }}px;
      -webkit-border-top-left-radius: {{ block.settings.border_radius }}px;
      border-top-left-radius: {{ block.settings.border_radius }}px;
    }
    .product__description .tabs-nav li:last-child a {
      border-top-right-radius: {{ block.settings.border_radius }}px;
      border-left: 0;
    }
    .product__description .tabs-nav .tab-active a {
      background: white;
      border-bottom-color: #0000;
      color: rgba(var(--color-button),var(--alpha-button-background));
      cursor: default;
    }
    .product__description .tabs-nav a {
      background: #f4f6f4;
      border: 1px solid #c6c9cd;
      color: #8b9098;
      display: block;
      font-size: 15px;
      font-weight: 700;
      height: 45px;
      letter-spacing: 0;
      text-align: center;
      text-transform: {{block.settings.tabtitlestyle}};
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .product__description .tabs-nav li {
      float: left;
      width: 33.33%;
    }
    .product__description .tabs-stage {
      border: 1px solid #c6c9cd;
      -webkit-border-radius: 0 0 {{ block.settings.border_radius }}px {{ block.settings.border_radius }}px;
      -moz-border-radius: 0 0 {{ block.settings.border_radius }}px {{ block.settings.border_radius }}px;
      -ms-border-radius: 0 0 {{ block.settings.border_radius }}px {{ block.settings.border_radius }}px;
      -o-border-radius: 0 0 {{ block.settings.border_radius }}px {{ block.settings.border_radius }}px;
      border-radius: 0 0 {{ block.settings.border_radius }}px {{ block.settings.border_radius }}px;
      border-top: 0;
      clear: both;
      position: relative;
      top: -7px;
    }
    .product__description .tabs-stage p {
      margin: 0 0 15px;
      color: #000;
    }
    .product__description .tabs-stage p:last-child {
      margin-bottom: 0;
    }
    .product__description .tabs-stage a {
      cursor: pointer;
      font-weight: 600;
      color: rgba(var(--color-button),var(--alpha-button-background));
      text-decoration: underline;
    }
    .product__description .tabs-stage > div {
      padding: 20px;
      font-size: 16px;
      letter-spacing: 0;
    }
    .product__description .tabs-nav li a {
      text-decoration: none;
    }
    .product__description ul {
      margin-left: 20px;
    }
    @media screen and (max-width: 767px) {
      .product__description .tabs-nav a {
        font-size: 12px;
        padding: 0 5px;
      }
    }
</style>