<![CDATA[
<section class="responsive-tabs-section">
<div class="tabs-scroll-container">
<div class="tabs-inner" id="tabsScroll">
<div class="tab active" data-tab="fabric">FABRIC</div>
<div class="tab" data-tab="color">COLOR</div>
<div class="tab" data-tab="technique">TECHNIQUE</div>
<div class="tab" data-tab="shipping">SHIPPING TIME</div>
<div class="tab" data-tab="returns">GENERAL RETURNS POLICY</div>
<div class="tab" data-tab="receiving">RECEIVING ORDER GUIDELINES</div>
<div class="tab" data-tab="disclaimer">COLOUR DISCLAIMER</div>
<div class="tab" data-tab="copyright">COPYRIGHT</div>
</div>
<div class="tabs-arrows">
<button class="arrow-btn left" onclick="scrollTabs(-1)">❮</button>
<button class="arrow-btn right" onclick="scrollTabs(1)">❯</button>
</div>
</div>
<div class="tab-content active" id="fabric">
<p>
{% if product.metafields.custom.fabric %}
{{ product.metafields.custom.fabric }}
{% elsif product.tags contains 'fabric' %}
{{ product.tags | join: ', ' }}
{% else %}
Pure Handloom
{% endif %}
</p>
</div>
<div class="tab-content" id="color">
<p>
{% if product.metafields.custom.color %}
{{ product.metafields.custom.color }}
{% elsif product.color %}
{{ product.color }}
{% elsif product.options_with_values.size > 0 %}
{% assign color_option = product.options_with_values | where: 'name', 'Color' | first %}
{% if color_option %}
{{ color_option.values | join: ', ' }}
{% else %}
Available in multiple colors.
{% endif %}
{% else %}
Available in multiple colors.
{% endif %}
</p>
</div>
<div class="tab-content" id="technique">
<p>
{% if product.metafields.custom.technique %}
{{ product.metafields.custom.technique }}
{% else %}
Handcrafted using traditional weaving techniques.
{% endif %}
</p>
</div>
<div class="tab-content" id="shipping">
<p>
{% if product.metafields.custom.shipping_time %}
{{ product.metafields.custom.shipping_time }}
{% else %}
Estimated shipping: 3–5 business days.
{% endif %}
</p>
</div>
<div class="tab-content" id="returns">
<p>No returns /exchanges are possible in case of international orders or for products purchased during any sale
event.
Please read our refunds policy here.</p>
</div>
<div class="tab-content" id="receiving">
<p>As we ship your orders via third-party shipment agencies, we want to ensure that the parcel reaches you intact
and in good condition. Therefore, in case you receive a damaged, broken, or opened parcel, we request you to
record a video and take images of the same and not accept the order. You can mail all the images and videos along
with the order number so that we can use the same to resolve the issue for you at the earliest and settle claims
with the shipment agency.</p>
</div>
<div class="tab-content" id="disclaimer">
<p>
This product has been crafted by hand and may have slight irregularities or imperfections in color or
embellishment or weaving. Any weaving or embroidery irregularities or shade variations are characteristic of the
fabric and cannot be considered defects. colors as you see on the website may vary from the actual colors of the
garments due to the process of photography and your device.
</p>
</div>
<div class="tab-content" id="copyright">
<p><b>
Copyright protection in India is governed by the Copyright Act of 1957. Under this Act, a photograph is
considered
an 'artistic work' and is thus protected. If someone violates the copyright, the photographer can seek legal
remedies, including compensation for damages.</b>
</p>
</div>
</section><style>.responsive-tabs-section {
font-family: 'Poppins', sans-serif;
margin: 20px auto;
max-width: 900px;
overflow: hidden;
}
.tabs-scroll-container {
position: relative;
display: flex;
justify-content: space-between;
}
.tabs-inner {
display: flex;
gap: 60px;
overflow-x: auto;
scroll-behavior: smooth;
white-space: nowrap;
scrollbar-width: none;
flex: 1;
padding-right: 50px;
border-bottom: 1px solid #dddddd;
}
.tabs-inner::-webkit-scrollbar {
display: none;
}
.tab {
cursor: pointer;
font-size: 13px;
color: #79425e;
font-weight: 600;
position: relative;
padding-bottom: 10px;
flex: 0 0 auto;
transition: color 0.3s ease;
}
.tab:hover {
color: #000;
}
.tab.active {
color: #000;
}
.tab.active::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background-color: #000;
}
.tabs-arrows {
position: absolute;
right: 0;
display: flex;
align-items: center;
background: #fff;
}
.arrow-btn {
background: transparent;
border: 1px solid #ddd;
color: #b36a5e;
font-size: 12px;
cursor: pointer;
padding: 3px 6px;
margin-left: 2px;
border-radius: 3px;
transition: all 0.2s ease;
}
.arrow-btn:hover {
background-color: #f7f7f7;
}
.tab-content {
display: none;
padding: 15px 10px;
color: #333;
font-size: 14px;
line-height: 1.6;
}
.tab-content.active {
display: block;
}
/* Responsive adjustments */
@media (max-width: 1024px) {
.tabs-inner {
gap: 40px;
}
}
@media (max-width: 768px) {
.tabs-inner {
gap: 25px;
padding-right: 40px;
}
.tab {
font-size: 12px;
padding-bottom: 8px;
}
.arrow-btn {
font-size: 11px;
padding: 2px 4px;
}
}
@media (max-width: 480px) {
.tabs-inner {
gap: 20px;
padding-right: 35px;
}
.tab {
font-size: 11px;
}
.tab-content {
font-size: 13px;
padding: 15px 5px;
}
.arrow-btn {
padding: 2px 4px;
}
}</style> <script type="litespeed/javascript">document.addEventListener("DOMContentLiteSpeedLoaded",function(){const tabs=document.querySelectorAll(".tab");const contents=document.querySelectorAll(".tab-content");const tabsContainer=document.getElementById("tabsScroll");tabs.forEach(tab=>{tab.addEventListener("click",()=>{tabs.forEach(t=>t.classList.remove("active"));tab.classList.add("active");contents.forEach(c=>c.classList.remove("active"));document.getElementById(tab.dataset.tab).classList.add("active");const containerWidth=tabsContainer.offsetWidth;const tabLeft=tab.offsetLeft;const tabWidth=tab.offsetWidth;const scrollLeft=tabLeft-(containerWidth/2)+(tabWidth/2);tabsContainer.scrollTo({left:scrollLeft,behavior:'smooth'})})});window.scrollTabs=function(direction){const scrollAmount=150;tabsContainer.scrollBy({left:direction*scrollAmount,behavior:'smooth'})}})</script>]]>