Add tabs to product descriptions

Ecwid CSS

1) Add this HTML code to the product description itself (similar to https://support.ecwid.com/hc/en-us/articles/207808475-How-to-add-tabs-in-product-description#AddTabs):

<section class="tabs"> 
<input class="tabs__input" checked="" type="radio" name="tab" id="tab-1"> 
<input class="tabs__input" type="radio" name="tab" id="tab-2"> 
<input class="tabs__input" type="radio" name="tab" id="tab-3"> 
<label class="tabs__link" for="tab-1">Tab 1</label> 
<label class="tabs__link" for="tab-2">Tab 2</label> 
<label class="tabs__link" for="tab-3">Tab 3</label> 
<article class="tabs__content"> 
<h3>Tab1</h3> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe aspernatur obcaecati sapiente, architecto aliquid temporibus nam beatae, soluta voluptate ex in eos dolorum sint, natus vel aliquam sit hic harum. 
</p> 
</article> 
<article class="tabs__content"> 
<h3>Tab2</h3> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe aspernatur obcaecati sapiente, architecto aliquid temporibus nam beatae, soluta voluptate ex in eos dolorum sint, natus vel aliquam sit hic harum. 
</p> 
</article> 
<article class="tabs__content"> 
<h3>Tab3</h3> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe aspernatur obcaecati sapiente, architecto aliquid temporibus nam beatae, soluta voluptate ex in eos dolorum sint, natus vel aliquam sit hic harum. 
</p> 
</article> 
</section> 


2) Add this snippet to the custom CSS theme in Ecwid control panel > Settings > Design:

.ecwid { 
$bg-color: #eee; 
$bg-color-active: #fff; 
$border-color: #ccc; 
$tabs-count: 3; 
.tabs { 
margin-bottom: 20px; 
.tabs__input { 
display: none; 
} 
.tabs__link { 
background: $bg-color; 
border: 1px solid $border-color; 
float: left; 
font-weight: 600; 
padding: 5px 10px; 
margin-right: -1px; 
margin-bottom: -1px; 
&:hover { 
background: darken($bg-color, 10%); 
} 
} 
.tabs__content { 
border: 1px solid $border-color; 
clear: both; 
display: none; 
padding: 10px; 
transition: opacity 200ms ease-out; 
} 
@for $i from 1 through $tabs-count { 
.tabs__input:checked:nth-of-type(#{$i}) ~ .tabs__link:nth-of-type(#{$i}) { 
background: $bg-color-active; 
border-bottom-color: $bg-color-active; 
} 
} 
@for $i from 1 through $tabs-count { 
.tabs__input:checked:nth-of-type(#{$i}) ~ .tabs__content:nth-of-type(#{$i}) { 
display: block; 
} 
} 
} 
}