<div class="stone-tabs" id="stone-tabs-{{ section.id }}">
<div class="stone-tabs__nav" role="tablist" aria-label="Product details">
<button type="button" class="stone-tabs__tab is-active"
id="features-tab-{{ section.id }}" role="tab"
aria-controls="features-panel-{{ section.id }}" aria-selected="true">
FEATURES
</button>
<button type="button" class="stone-tabs__tab"
id="specification-tab-{{ section.id }}" role="tab"
aria-controls="specification-panel-{{ section.id }}" aria-selected="false" tabindex="-1">
SPECIFICATION
</button>
<button type="button" class="stone-tabs__tab"
id="dimension-tab-{{ section.id }}" role="tab"
aria-controls="dimension-panel-{{ section.id }}" aria-selected="false" tabindex="-1">
DIMENSION
</button>
</div>
<div class="stone-tabs__panel" id="features-panel-{{ section.id }}"
role="tabpanel" aria-labelledby="features-tab-{{ section.id }}" tabindex="0">
<ul class="stone-tabs__features">
<li><strong>Natural Stone Look:</strong> Made with real stone for an authentic, premium finish.</li>
<li><strong>Random Ashlar Pattern:</strong> Mixed stone sizes create a distinctive architectural look.</li>
<li><strong>Warm Natural Color:</strong> Earth-tone shades complement patios, gardens and outdoor living areas.</li>
<li><strong>Easy Interlocking Installation:</strong> Snap-lock base enables fast, tool-free assembly.</li>
<li><strong>Indoor & Outdoor Use:</strong> Suitable for patios, balconies, walkways, decks and entryways.</li>
</ul>
</div>
<div class="stone-tabs__panel" id="specification-panel-{{ section.id }}"
role="tabpanel" aria-labelledby="specification-tab-{{ section.id }}" tabindex="0" hidden>
<dl class="stone-tabs__details">
<div><dt>Size</dt><dd>1 ft. × 1 ft.</dd></div>
<div><dt>Thickness</dt><dd>0.5 in.</dd></div>
<div><dt>Pieces per Box</dt><dd>8</dd></div>
<div><dt>Material</dt><dd>Surface: Stone; Base: Plastic</dd></div>
<div><dt>Installation Method</dt><dd>Tool-Free Interlocking Installation</dd></div>
<div><dt>Coverage per Box</dt><dd>8 sq. ft.</dd></div>
<div><dt>Warranty</dt><dd>1-Year Limited Warranty</dd></div>
</dl>
</div>
<div class="stone-tabs__panel" id="dimension-panel-{{ section.id }}"
role="tabpanel" aria-labelledby="dimension-tab-{{ section.id }}" tabindex="0" hidden>
<dl class="stone-tabs__details">
<div><dt>Product Size (W × D × H)</dt><dd>12 × 12 × 0.5 in.</dd></div>
<div><dt>Product Weight per Box</dt><dd>15 lb.</dd></div>
<div><dt>Package Size (W × D × H)</dt><dd>13 × 13 × 5 in.</dd></div>
<div><dt>Package Weight per Box</dt><dd>18.2 lb.</dd></div>
</dl>
</div>
</div>
<style>
#stone-tabs-{{ section.id }} {
max-width: 850px;
color: #252525;
}
#stone-tabs-{{ section.id }} .stone-tabs__nav {
display: flex;
gap: clamp(18px, 4vw, 48px);
border-bottom: 1px solid #dedede;
overflow-x: auto;
}
#stone-tabs-{{ section.id }} .stone-tabs__tab {
position: relative;
flex: 0 0 auto;
padding: 14px 0;
border: 0;
background: transparent;
color: #666;
font: inherit;
font-size: 14px;
font-weight: 400;
letter-spacing: 0.04em;
cursor: pointer;
}
#stone-tabs-{{ section.id }} .stone-tabs__tab.is-active {
color: #222;
font-size: 16px;
font-weight: 700;
}
#stone-tabs-{{ section.id }} .stone-tabs__tab.is-active::after {
content: "";
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 2px;
background: currentColor;
}
#stone-tabs-{{ section.id }} .stone-tabs__tab:focus-visible {
outline: 2px solid currentColor;
outline-offset: -4px;
}
#stone-tabs-{{ section.id }} .stone-tabs__panel {
padding: 24px 0;
font-size: 15px;
line-height: 1.7;
}
#stone-tabs-{{ section.id }} .stone-tabs__panel[hidden] {
display: none;
}
#stone-tabs-{{ section.id }} .stone-tabs__features {
margin: 0;
padding-left: 20px;
}
#stone-tabs-{{ section.id }} .stone-tabs__features li {
margin-bottom: 12px;
}
#stone-tabs-{{ section.id }} .stone-tabs__details {
margin: 0;
}
#stone-tabs-{{ section.id }} .stone-tabs__details > div {
display: grid;
grid-template-columns: minmax(160px, 40%) 1fr;
gap: 16px;
padding: 12px 0;
border-bottom: 1px solid #eee;
}
#stone-tabs-{{ section.id }} .stone-tabs__details dt {
font-weight: 400;
color: #666;
}
#stone-tabs-{{ section.id }} .stone-tabs__details dd {
margin: 0;
font-weight: 700;
}
@media (max-width: 600px) {
#stone-tabs-{{ section.id }} .stone-tabs__details > div {
grid-template-columns: 1fr;
gap: 2px;
}
}
</style>
<script>
(() => {
const root = document.getElementById('stone-tabs-{{ section.id }}');
if (!root) return;
const tabs = [...root.querySelectorAll('[role="tab"]')];
function activateTab(tab, moveFocus = false) {
tabs.forEach((item) => {
const active = item === tab;
item.classList.toggle('is-active', active);
item.setAttribute('aria-selected', String(active));
item.tabIndex = active ? 0 : -1;
document.getElementById(item.getAttribute('aria-controls')).hidden = !active;
});
if (moveFocus) tab.focus();
}
tabs.forEach((tab, index) => {
tab.addEventListener('click', () => activateTab(tab));
tab.addEventListener('keydown', (event) => {
let next;
if (event.key === 'ArrowRight') next = tabs[(index + 1) % tabs.length];
if (event.key === 'ArrowLeft') next = tabs[(index - 1 + tabs.length) % tabs.length];
if (event.key === 'Home') next = tabs[0];
if (event.key === 'End') next = tabs[tabs.length - 1];
if (next) {
event.preventDefault();
activateTab(next, true);
}
});
});
})();
</script>
