/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Expected identifier but found "%"
Line 37:0 Unexpected "<"
Line 39:1 Unexpected "{"
Line 39:10 Expected ":"
Line 42:0 Unexpected "<"
Line 44:1 Expected identifier but found "%"
Line 46:0 Unexpected "<"
Line 47:2 Expected identifier but found "%"
Line 48:2 Unexpected "<"
... and 107 more hidden warnings

**/
{%- liquid
	assign tab_border_color = section.settings.tab_border_color
	assign tab_border_color_rgb = section.settings.tab_border_color_rgb
	if tab_border_color_rgb != blank
		assign border_color = tab_border_color_rgb
	else
		assign border_color = tab_border_color
	endif

	assign isVerticalSidebar = false
	if tab_layout == 'vertical_sidebar'
		assign isVerticalSidebar = 'sidebar'
	endif

	assign isVerticalSidebarMobile = false
	if tab_layout_mobile == 'vertical_sidebar'
		assign isVerticalSidebarMobile = 'sidebar-mobile'
	endif
-%}


<div class="tabs-contents  clearfix halo-text-format" id="cust-{{ section.id }}">

{{ product.description }}
  

</div>

{% comment %}
  
<product-tab class="productView-tab layout-{{ tab_layout }} halo-product-tab" data-vertical="{{ isVerticalSidebar }}" data-vertical-mobile="{{ isVerticalSidebarMobile }}">
	{%- if tab_layout == 'horizontal' or tab_layout == 'popup' -%}
		<ul class="tabs tabs-horizontal list-unstyled disable-srollbar">
			{%- for block in section.blocks -%}
				{%- liquid
					assign title = block.settings.title
					assign key = block.settings.product_tab_key_metafield
                    assign source = block.settings.product_custom_source
					assign has_tab = false
    
                    if source == 'dynamic'
                       assign meta_ref = key
                    else
                    	if product.metafields.c_f or product.metafields.custom
                    		if product.metafields.c_f[key] != blank
	                			assign meta_ref = product.metafields.c_f[key]
	                		else
	                			assign meta_ref = product.metafields.custom[key]
                    		endif
	                	endif
                    endif 
                   
					if block.type == 'custom'
						if block.settings.type == 'metafield'
							if meta_ref
				                assign has_tab = true
				            else
				            	assign has_tab = false
				            endif
				        else
				        	assign has_tab = true
				        endif
					else
						assign has_tab = true
					endif
				-%}
				{%- if has_tab and title != blank -%}
					<li class="tab">
			            <a class="tab-title{% if block.type == 'description' and tab_layout == 'horizontal' %} is-open{% endif %}" href="#tab-{{ block.settings.title | escape | handleize }}" style="--border-color: {{ border_color }}">
			                {{ block.settings.title | escape }}
			            </a>
			        </li>
			    {%- endif -%}
			{%- endfor -%}
		</ul>
	{%- endif -%}



  
	<div class="tabs-contents tabs-contents-{{ tab_layout }} clearfix halo-text-format">
		{%- for block in section.blocks -%}
			{%- liquid
				assign title = block.settings.title
				assign has_tab = false
				assign source = block.settings.product_custom_source
				assign key = block.settings.product_tab_key_metafield

				if source == 'dynamic'
                   assign meta_ref = key
                else
                	if product.metafields.c_f or product.metafields.custom
                		if product.metafields.c_f[key] != blank
                			assign meta_ref = product.metafields.c_f[key]
                		else
                			assign meta_ref = product.metafields.custom[key]
                		endif
                	endif
                endif 
                
				if block.type == 'custom'
					if block.settings.type == 'metafield'
						if meta_ref
			                assign has_tab = true
			                assign content = meta_ref
			            else
			            	assign has_tab = false
			            endif
			        else
			        	assign has_tab = true
			        	assign content = block.settings.content
			        endif
				else
					assign has_tab = true
					if block.type == 'description'
                        assign current_variant = product.selected_or_first_available_variant
                        if current_variant.metafields.c_f.variant_description != blank
                            assign content = current_variant.metafields.c_f.variant_description
                        else
                            assign content = product.description
                        endif
					endif
				endif

				if block.type == 'description' or block.type == 'custom'
					assign style_mobile = false
					if block.settings.open_tab_mobile
						assign style_mobile = 'show-mobile'
					endif
					if tab_layout_mobile == 'popup'
						assign style_mobile = 'popup-mobile'
					elsif tab_layout_mobile == 'vertical_sidebar'
						assign style_mobile = 'sidebar-mobile'
					endif
				endif
			-%}
			{%- if has_tab and title != blank -%}
				<div class="tab-content{% if block.type == 'description' %}{% if tab_layout == 'vertical' or tab_layout == 'horizontal' %} is-active{% endif %}{% endif %}" id="tab-{{ title | escape | handleize }}">
					<div class="toggle-title{% if settings.product_page_layout == 'full_width_2' or template.suffix == 'template-full-width-2' %} title-content-full{% endif %}">
		                <a class="toggleLink{% if style_mobile %} {{ style_mobile }}{% endif %}{% if block.type == 'description' and tab_layout == 'vertical' %} is-open{% endif %}" data-collapsible href="#tab-{{ title | escape | handleize }}-mobile">
		                    <span class="text">
		                        {{ title | escape }}
		                    </span>
		                    {% if icon_style_layout == 'style_1' %}	
			                    <span class="icon-dropdown">
			                    	{% if settings.product_page_layout == 'full_width_2' or template.suffix == 'template-full-width-2' %}
			                    		{% render 'icon-down-2' %}
			                    	{% else %}
			                    		{% render 'icon-down' %}
			                    	{% endif %}
			                    </span>	
		                    {% else %}	
		                    	<span class="icon-plus">&nbsp;</span>
		                    {% endif %}
		                </a>
		            </div>
		            <div class="toggle-content{% if block.type == 'description' %}{% if tab_layout == 'vertical' or tab_layout == 'horizontal' %} is-active{% endif %}{% endif %}{% if style_mobile %} {{ style_mobile }}{% endif %}{% if block.settings.enable_btn_show_more %} toggle-content--height{% endif %}" id="tab-{{ title | escape | handleize }}-mobile"{% if block.settings.enable_btn_show_more %} style="--maximum-des-to-show: {{ block.settings.maximum_des_to_show | append: 'px'}}"{% endif %}{% if block.type == 'description' %} product-description-tab data-product-description-{{ product.id }}{% endif %}>
						{%- if tab_layout == 'vertical_sidebar' or style_mobile == 'sidebar-mobile' or style_mobile == 'popup-mobile' -%}
							<div class="tab-popup-header">
								<h5>
									<span class="text">{{ title | escape }}</span>
								</h5>
								<a class="pdViewTab-close pdViewTab-close-mobile" role="link" aria-disabled="true">x</a>
							</div>
							<div class="tab-popup-content">
						{%- endif -%}
							{{ content }}
							{%- if block.settings.enable_btn_show_more -%}
								{% assign letter = content | size %}
								<div class="tab-showMore is-show" data-letter="{{ letter }}" data-des-max="{{ block.settings.maximum_des_to_show }}">
									<a class="button button--secondary" href="#tab-{{ title | escape | handleize }}-mobile" data-show-more-text="{{ 'products.product.read_more' | t }}" data-show-less-text="{{ 'products.product.read_less' | t }}" data-show-more-toogle> 
										{{ 'products.product.read_more' | t }}
									</a>
								</div>
							{%- endif -%}
						{%- if tab_layout == 'vertical_sidebar' or style_mobile == 'sidebar-mobile' or style_mobile == 'popup-mobile' -%}
							</div>
						{%- endif -%}
		            </div>
					{%- if tab_layout == 'popup' -%}
						<a class="pdViewTab-close" href="javascript:void(0)">x</a>
					{%- endif -%}
				</div>
			{%- endif -%}
		{%- endfor -%}
	</div>
</product-tab>





<script src="{{ 'tabs.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'halo-faqs.js' | asset_url }}" defer="defer"></script>



  
{% assign description_tab = section.blocks | where: 'type', 'description' %}
{%- if description_tab == blank and tab_layout == 'horizontal' -%}
<script defer="defer">
	document.querySelector('.tabs-horizontal .tab:nth-child(1) .tab-title').classList.add('is-open');
	document.querySelector('.tabs-contents-horizontal .tab-content:nth-child(1)').classList.add('is-active');
	document.querySelector('.tabs-contents-horizontal .tab-content:nth-child(1) .toggleLink').classList.add('is-open');
	document.querySelector('.tabs-contents-horizontal .tab-content:nth-child(1) .toggle-content').style.display = 'block';






  
</script>
{%- endif -%}
{%- if tab_layout_mobile == 'vertical' and tab_layout == 'vertical' -%}
<script defer="defer">
	document.querySelector('.tabs-contents-vertical .tab-content .toggleLink').classList.remove('is-open');

</script>
{%- endif -%}




{% endcomment %}


<style>
/* General Tab Navigation Styling */
.tabs-nav {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    border-bottom: 2px solid #ddd;
    justify-content: center; /* Center tabs on the page */
    gap: 10px; /* Add spacing between tabs */
  padding: 0 0 0!important;
}

.tab-item {
    padding: 12px 20px;
    cursor: pointer;
    border: 1px solid transparent;
    background-color: #f7f7f7;
    color: #333;
    border-radius: 5px 5px 0 0;
    transition: all 0.3s ease;
    text-align: center;
    font-size: 16px;
  margin-top:0!important;
}

.tab-item.active {
    background-color: #fff;
    border-color: #ddd #ddd transparent;
    font-weight: bold;
    color: #2b6146; /* Highlighted tab color */
}

.tab-item:hover {
    background-color: #eaeaea;
    color: #2b6146;
}

/* Tab Content Styling */
.tabs-body {
    border: 1px solid #ddd;
    border-radius: 0 0 5px 5px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 20px;
}
  .tabs-contents, a, ul, p, div#tab-1{
    color:#000!important;
  }

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
    .tabs-nav {
        /* flex-direction: column; */
        border-bottom: none;
        margin: 0!important;
        gap: 5px;

      justify-content: start; 
    }

    .tab-item {
        border-radius: 5px;
        text-align: left;
        padding: 10px 15px;
        font-size: 14px;
        border: 1px solid #ddd;
        background: #fff;
        color: #333;
    }

    .tab-item.active {
        background-color: #f7f7f7;
        border: 1px solid #ddd;
    }

    /* Ensure the tab content is displayed below the tabs */
    .tabs-body {
        margin-top: 10px;
        border: none;
        padding: 10px 5px;
      box-shadow:none;
    }

    .tab-content {
        display: none;
        /* margin-top: 10px; */
    }

    .tab-content.active {
        display: block;
        background-color: #fff;
        border: 1px solid #ddd;
        padding: 15px;
        border-radius: 5px;
    }
}

/* Hover Animation */
.tab-item {
    position: relative;
    overflow: hidden;
}

.tab-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: #2c6e49;
    transition: width 0.3s ease, left 0.3s ease;
}

.tab-item:hover::after {
    width: 100%;
    left: 0;
}
</style>



<script>
  document.addEventListener("DOMContentLoaded", () => {
    // Select the container with the class `tabs-contents`
    const tabsContainer = document.querySelector(".tabs-contents");
    if (!tabsContainer) return;

    // Find all <h5> tags inside the tabs-contents container
    const headers = tabsContainer.querySelectorAll("h5");

    if (headers.length) {
        // Create a new tab navigation and content area
        const tabsNav = document.createElement("ul");
        tabsNav.className = "tabs-nav";
        const tabsContent = document.createElement("div");
        tabsContent.className = "tabs-body";

        headers.forEach((header, index) => {
            // Create a tab button
            const tabId = `tab-${index}`;
            const tabButton = document.createElement("li");
            tabButton.className = `tab-item ${index === 0 ? "active" : ""}`;
            tabButton.textContent = header.textContent.trim();
            tabButton.dataset.tabTarget = tabId;

            // Add the tab button to the navigation
            tabsNav.appendChild(tabButton);

            // Create the content wrapper
            const tabContent = document.createElement("div");
            tabContent.className = `tab-content ${index === 0 ? "active" : ""}`;
            tabContent.id = tabId;

            // Move all siblings of the <h5> header into this content area
            let sibling = header.nextElementSibling;
            while (sibling && sibling.tagName !== "H5") {
                const nextSibling = sibling.nextElementSibling;
                tabContent.appendChild(sibling);
                sibling = nextSibling;
            }

            // Add the tab content to the content area
            tabsContent.appendChild(tabContent);

            // Remove the original <h5> header
            header.remove();
        });

        // Append the tab navigation and content area to the container
        tabsContainer.prepend(tabsNav);
        tabsContainer.appendChild(tabsContent);

        // Add event listeners for tab switching
        tabsNav.addEventListener("click", (e) => {
            const tab = e.target.closest(".tab-item");
            if (!tab) return;

            // Deactivate all tabs and content
            tabsNav.querySelectorAll(".tab-item").forEach((item) => item.classList.remove("active"));
            tabsContent.querySelectorAll(".tab-content").forEach((content) => content.classList.remove("active"));

            // Activate the clicked tab and its content
            tab.classList.add("active");
            const target = document.getElementById(tab.dataset.tabTarget);
            if (target) target.classList.add("active");
        });
    }
});
</script>