<div class="page-wrapper catalog-product-view">
<a href="#maincontent" id="skip-nav-top" class="skip-nav">
Skip to content
</a>
<script src="/components/raw/skip-nav/skip-nav.js" defer></script>
<div class="marketing-bar marketing-bar--closed" data-type="marketing-bar">
<div class="container marketing-bar__container">
<div class="marketing-bar__text">
Subscribe and get 10$ for Shopping! Lorem ipsum text in marketing bar.
</div>
<button class="button button--icon button--rotate-icon marketing-bar__close" type="button" aria-label="Close marketing bar">
<svg class="icon button__icon marketing-bar__close-icon" role="img">
<title>Close</title>
<use href="/images/icons-sprite.svg#close"></use>
</svg>
</button>
</div>
</div>
<script src="/components/raw/marketing-bar/marketing-bar.js"></script>
<div class="contact-bar ">
<div class="contact-bar__wrapper">
<div class="contact-bar__container container">
<ul class="list contact-bar__list">
<li class="list-item contact-bar__item">
<a href="#" class="
contact-bar__link
">
<span class="
button__text
contact-bar__text
">
Account
</span>
</a>
</li>
<li class="list-item contact-bar__item">
<a href="#" class="
contact-bar__link
">
<span class="
button__text
contact-bar__text
">
Blog
</span>
</a>
</li>
<li class="list-item contact-bar__item">
<a href="#" class="
contact-bar__link
">
<span class="
button__text
contact-bar__text
">
Contact
</span>
</a>
</li>
</ul>
<ul class="list contact-bar__list contact-bar__list--icons">
<li class="list-item contact-bar__item">
<a href="tel:8002669590" class="
contact-bar__link
">
<span class="
icon
contact-bar__icon
" aria-label="">
<svg class="icon " role="img">
<title>Phone</title>
<use href="/images/icons-sprite.svg#phone"></use>
</svg>
</span>
<span class="
button__text
contact-bar__text
">
Call us for free 800 - 266 - 9590
</span>
</a>
</li>
<li class="contact-bar__item">
<a href="mailto:test@test.com" class="
contact-bar__link
">
<span class="
icon
contact-bar__icon
" aria-label="">
<svg class="icon " role="img">
<title>Email</title>
<use href="/images/icons-sprite.svg#envelope"></use>
</svg>
</span>
<span class="
button__text
contact-bar__text
">
Email Us
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<header class="header ">
<div class="container">
<div class="header__wrapper">
<a class="logo header__logo" href="#" aria-label="Homepage">
<img class="logo__image " src="/images/logo/logo.svg" alt="Alpaca Logo">
</a>
<div class="side-menu ">
<button class="button button--icon modal-trigger side-menu__trigger" type="button" data-modal-trigger="side-menu" aria-label="Open menu">
<svg class="icon side-menu__trigger-icon" role="presentation" focusable="false">
<title>Mobile-menu</title>
<use href="/images/icons-sprite.svg#mobile-menu"></use>
</svg>
</button>
<div role="dialog" aria-hidden="true" id="side-menu" data-modal="side-menu" class="modal modal--tertiary side-menu__modal">
<div role="document" class="modal__container side-menu__container" tabindex="0">
<div class="modal__content side-menu__content">
<div class="modal__middle side-menu__content-middle">
<div id="dropdown-default" class="dropdown-list dropdown-list--with-nested">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<button class="dropdown-list__label " aria-expanded="false" aria-controls="dropdown-1">
dropdown title
<svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
<title>Arrow Down</title>
<use href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</button>
<div id="dropdown-1" class="dropdown-list__content " aria-hidden="true">
<div id="" class="dropdown-list dropdown-list--inner">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-1-1">
Item name
<svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
<title>Arrow Down</title>
<use href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</a>
<div id="dropdown-1-1" class="dropdown-list__content " aria-hidden="true">
<div id="" class="dropdown-list dropdown-list--inner">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-1-2">
sublist item name
<svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
<title>Arrow Down</title>
<use href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</a>
<div id="dropdown-1-2" class="dropdown-list__content " aria-hidden="true">
<div id="" class="dropdown-list dropdown-list--inner">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sub sublist item name
</a>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sub sublist item name
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-2-2">
Item name
<svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
<title>Arrow Down</title>
<use href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</a>
<div id="dropdown-2-2" class="dropdown-list__content " aria-hidden="true">
<div id="" class="dropdown-list dropdown-list--inner">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
Item name
</a>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
Item name
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-2">
dropdown title
<svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
<title>Arrow Down</title>
<use href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</a>
<div id="dropdown-2" class="dropdown-list__content " aria-hidden="true">
<div id="" class="dropdown-list dropdown-list--inner">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
Item name
</a>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
Item name
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-3">
dropdown title
<svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
<title>Arrow Down</title>
<use href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</a>
<div id="dropdown-3" class="dropdown-list__content " aria-hidden="true">
<div id="" class="dropdown-list dropdown-list--inner">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-3-1">
Item name
<svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
<title>Arrow Down</title>
<use href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</a>
<div id="dropdown-3-1" class="dropdown-list__content " aria-hidden="true">
<div id="" class="dropdown-list dropdown-list--inner">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
Item name
</a>
</li>
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-3-2">
Item name
<svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
<title>Arrow Down</title>
<use href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</a>
<div id="dropdown-3-2" class="dropdown-list__content " aria-hidden="true">
<div id="" class="dropdown-list dropdown-list--inner">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-3-3">
Item name
<svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
<title>Arrow Down</title>
<use href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</a>
<div id="dropdown-3-3" class="dropdown-list__content " aria-hidden="true">
<div id="" class="dropdown-list dropdown-list--inner">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-3-4">
item name
<svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
<title>Arrow Down</title>
<use href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</a>
<div id="dropdown-3-4" class="dropdown-list__content " aria-hidden="true">
<div id="" class="dropdown-list dropdown-list--inner">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
<script type="text/javascript">
new DropdownList(document.getElementById('dropdown-default'));
</script>
</div>
<div class="modal__bottom side-menu__content-bottom">
<div class="modal__bottom-actions side-menu__bottom-actions">
<div class="
modal__bottom-action
side-menu__bottom-action
">
<div class="contact-bar contact-bar--vertical">
<div class="contact-bar__wrapper">
<div class="contact-bar__container ">
<ul class="list contact-bar__list">
<li class="list-item contact-bar__item">
<a href="#" class="
contact-bar__link
">
<span class="
button__text
contact-bar__text
">
Account
</span>
</a>
</li>
<li class="list-item contact-bar__item">
<a href="#" class="
contact-bar__link
">
<span class="
button__text
contact-bar__text
">
Blog
</span>
</a>
</li>
<li class="list-item contact-bar__item">
<a href="#" class="
contact-bar__link
">
<span class="
button__text
contact-bar__text
">
Contact
</span>
</a>
</li>
</ul>
<ul class="list contact-bar__list contact-bar__list--icons">
<li class="list-item contact-bar__item">
<a href="tel:8002669590" class="
contact-bar__link
">
<span class="
icon
contact-bar__icon
" aria-label="">
<svg class="icon " role="img">
<title>Phone</title>
<use href="/images/icons-sprite.svg#phone"></use>
</svg>
</span>
<span class="
button__text
contact-bar__text
">
Call us for free 800 - 266 - 9590
</span>
</a>
</li>
<li class="contact-bar__item">
<a href="mailto:test@test.com" class="
contact-bar__link
">
<span class="
icon
contact-bar__icon
" aria-label="">
<svg class="icon " role="img">
<title>Email</title>
<use href="/images/icons-sprite.svg#envelope"></use>
</svg>
</span>
<span class="
button__text
contact-bar__text
">
Email Us
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<button class="button button--icon button--rotate-icon modal__close-button side-menu__close-button" type="button" aria-label="click to close the modal">
<svg class="icon button__icon modal__close-button-icon" role="presentation" focusable="false">
<title>Close</title>
<use href="/images/icons-sprite.svg#close"></use>
</svg>
</button>
</div>
</div>
<script type="text/javascript">
new Modal(document.querySelector('[data-modal-trigger="side-menu"]'));
</script>
</div>
<div class="header__brief-info">
<div class="brief-info brief-info--link">
<ul class="list brief-info__items-container">
<li class="brief-info__list-item list__item">
<a class="
brief-info__link
">
<span class="
brief-info__icon-wrapper
">
<svg class="icon brief-info__icon" role="presentation" focusable="false">
<title>Free shipping icon</title>
<use href="/images/icons-sprite.svg#delivery-truck"></use>
</svg>
</span>
<span class="brief-info__title ">
Free Shipping
</span>
<span class="brief-info__subtitle
">
On Hundreds of Products
</span>
</a>
</li>
</ul>
</div>
</div>
<div class="header__buttons">
<a class="
header-button
button
button--icon
button--icon-light
button--icon-fill
" href="#" aria-label="Wishlist">
<svg class="icon header-button__icon" role="presentation" focusable="false">
<title>Heart</title>
<use href="/images/icons-sprite.svg#heart"></use>
</svg>
</a>
<div class="header__minicart">
<button type="button" class="
header-button
button
button--icon
button--icon-light
modal-trigger
" aria-label="Shopping cart dropdown trigger" data-modal-trigger="modal-minicart">
<svg class="icon header-button__icon" role="presentation" focusable="false">
<title>Shopping cart</title>
<use href="/images/icons-sprite.svg#shopping-cart"></use>
</svg>
<span class="header-button__counter">
<span class="header-button__counter-dot"></span>
</span>
</button>
</div>
<div role="dialog" aria-hidden="true" id="modal-minicart" data-modal="modal-minicart" class="modal modal--secondary" aria-labelledby="minicart-title" aria-describedby="minicart-products">
<div role="document" class="modal__container " tabindex="0">
<div class="modal__content modal__content--block">
<div class="minicart-content ">
<div class="minicart-content__top" id="minicart-title">
<h2 class="minicart-content__heading">
Shopping cart
</h2>
<div class="minicart-content__counter">
2 items
</div>
</div>
<div class="minicart-content__middle" id="minicart-products">
<div class="minicart-content__products-list">
<div class="minicart-product">
<div class="minicart-product__image">
<div class="lazyload-wrapper ">
<img class="
image
lazyload
" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/images/product/minicart-product-64x96.jpeg" alt="product name goes here">
</div>
</div>
<div class="minicart-product__data">
<div class="minicart-product__info">
<div class="minicart-product__name-wrapper">
<h3 class="minicart-product__name">
<a class="
link
link--invert
minicart-product__link
" href="#">
Some product name
</a>
</h3>
<div class="minicart-product__price margin-bottom-xs">
<div class="price ">
<span class="price__value price__value--old ">
<del aria-label="Price reduced from: $249.95">
$
249.95
</del>
</span>
<span class="price__value price__value--special ">
<ins aria-label="On sale at: $159.95">
$
159.95
</ins>
</span>
</div>
</div>
</div>
<dl class="list list--description minicart-product__attributes-list" title="Alpaca description list">
<dt class="list__label">
Lorem ipsum
</dt>
<dd class="list__value">
Lorem ipsum Value
</dd>
<dt class="list__label">
Lorem ipsum
</dt>
<dd class="list__value">
Lorem ipsum Value
</dd>
</dl>
</div>
<div class="minicart-product__bottom">
<div class="minicart-product__qty">
</div>
<div class="minicart-product__actions">
<a class="button button--icon " href="#" aria-label="edit product in your shopping cart">
<svg class="icon button__icon" role="presentation" focusable="false">
<title>Edit pencil</title>
<use href="/images/icons-sprite.svg#edit"></use>
</svg>
</a>
<a class="button button--icon " href="#" aria-label="remove this product from your shopping cart">
<svg class="icon button__icon" role="presentation" focusable="false">
<title>Trash bin</title>
<use href="/images/icons-sprite.svg#remove"></use>
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="minicart-product">
<div class="minicart-product__image">
<div class="lazyload-wrapper ">
<img class="
image
lazyload
" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/images/product/minicart-product-64x96.jpeg" alt="product name goes here">
</div>
</div>
<div class="minicart-product__data">
<div class="minicart-product__info">
<div class="minicart-product__name-wrapper">
<h3 class="minicart-product__name">
<a class="
link
link--invert
minicart-product__link
" href="#">
Some product 2 name
</a>
</h3>
<div class="minicart-product__price margin-bottom-xs">
<div class="price ">
<span class="price__value price__value--old ">
<del aria-label="Price reduced from: $249.95">
$
249.95
</del>
</span>
<span class="price__value price__value--special ">
<ins aria-label="On sale at: $159.95">
$
159.95
</ins>
</span>
</div>
</div>
</div>
<dl class="list list--description minicart-product__attributes-list" title="Alpaca description list">
<dt class="list__label">
Lorem ipsum
</dt>
<dd class="list__value">
Lorem ipsum Value
</dd>
<dt class="list__label">
Lorem ipsum
</dt>
<dd class="list__value">
Lorem ipsum Value
</dd>
</dl>
</div>
<div class="minicart-product__bottom">
<div class="minicart-product__qty">
</div>
<div class="minicart-product__actions">
<a class="button button--icon " href="#" aria-label="edit product in your shopping cart">
<svg class="icon button__icon" role="presentation" focusable="false">
<title>Edit pencil</title>
<use href="/images/icons-sprite.svg#edit"></use>
</svg>
</a>
<a class="button button--icon " href="#" aria-label="remove this product from your shopping cart">
<svg class="icon button__icon" role="presentation" focusable="false">
<title>Trash bin</title>
<use href="/images/icons-sprite.svg#remove"></use>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="minicart-content__bottom">
<div class="minicart-content__summary">
<div class="minicart-content__summary-label">
Cart Subtotal
</div>
<div class="minicart-content__summary-value">
$ 200.00
</div>
</div>
<div class="minicart-content__actions">
<a href="/edit" class="
button
button--secondary
minicart-content__edit
minicart-content__action-button
">
View and edit cart
</a>
<button class="button minicart-content__action-button minicart-content__checkout" type="button">
Go to Checkout
</button>
</div>
</div>
</div>
</div>
<button class="button button--icon button--rotate-icon modal__close-button" type="button" aria-label="click to close the modal">
<svg class="icon button__icon modal__close-button-icon" role="presentation" focusable="false">
<title>Close</title>
<use href="/images/icons-sprite.svg#close"></use>
</svg>
</button>
</div>
</div>
<script type="text/javascript">
new Modal(document.querySelector('[data-modal-trigger="modal-minicart"]'));
</script>
</div>
<div class="header__search-wrapper">
<form class="search-form">
<div class="search-form__wrapper">
<div class="input search-form__input-wrapper margin-0">
<label class="
label
input__label
label--hidden
" for="search">
Search products
</label>
<input class="input__field search-form__input" id="search" name="search" type="search" placeholder="Search entire store here...">
</div>
<button class="button button--icon button--icon search-form__button" type="button" aria-label="Search">
<svg class="icon button__icon" role="presentation" focusable="false">
<title>Search</title>
<use href="/images/icons-sprite.svg#search"></use>
</svg>
</button>
</div>
</form>
</div>
</div>
</div>
</header>
<div class="mega-menu ">
<ul class="mega-menu__list container ">
<li class="mega-menu__item mega-menu__item--parent mega-menu__item--secondary">
<a href="/new-in" class="mega-menu__link">
New In
</a>
<ul class="list mega-menu__inner-list mega-menu__inner-list--level1">
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
View all
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Clothing
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Shoes
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Accessories
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Face + Body
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Living + Gifts
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Back in stock
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Trending now
</a>
</li>
</ul>
</li>
<li class="mega-menu__item mega-menu__item--parent mega-menu__item--rows">
<a href="/clothing" class="mega-menu__link">
Clothing
</a>
<ul class="list mega-menu__inner-list mega-menu__inner-list--level1">
<li class="list__item mega-menu__inner-item mega-menu__inner-item--inline mega-menu__column-hidden">
<a href="" class="
link
mega-menu__inner-link
">
Row one
</a>
<ul class="list mega-menu__inner-list">
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
columns one item
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
columns one item 2
</a>
</li>
</ul>
</li>
<li class="list__item mega-menu__inner-item mega-menu__column-hidden mega-menu__inner-item--images">
<a href="" class="
link
mega-menu__inner-link
">
Row two
</a>
<ul class="list mega-menu__inner-list">
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
<div class="lazyload-wrapper ">
<img class="
image
lazyload
" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/images/product/cart-product-160_160.jpg" alt="brand name alt text">
</div>
Summer
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
<div class="lazyload-wrapper ">
<img class="
image
lazyload
" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/images/product/cart-product-160_160.jpg" alt="brand name alt text">
</div>
Spring
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
<div class="lazyload-wrapper ">
<img class="
image
lazyload
" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/images/product/cart-product-160_160.jpg" alt="brand name alt text">
</div>
Autumn
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
<div class="lazyload-wrapper ">
<img class="
image
lazyload
" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/images/product/cart-product-160_160.jpg" alt="brand name alt text">
</div>
Winter
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
<div class="lazyload-wrapper ">
<img class="
image
lazyload
" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/images/product/cart-product-160_160.jpg" alt="brand name alt text">
</div>
View all
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
<div class="lazyload-wrapper ">
<img class="
image
lazyload
" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/images/product/cart-product-160_160.jpg" alt="brand name alt text">
</div>
lorem ipsum
</a>
</li>
</ul>
</li>
<li class="list__item mega-menu__inner-item mega-menu__column-hidden mega-menu__inner-item--columns">
<a href="" class="
link
mega-menu__inner-link
">
Row three
</a>
<ul class="list mega-menu__inner-list">
<li class="list__item mega-menu__inner-item mega-menu__column-hidden">
<a href="" class="
link
mega-menu__inner-link
">
row 3 c 1
</a>
<ul class="list mega-menu__inner-list">
<li class="list__item mega-menu__inner-item mega-menu__inner-item--children">
<a href="" class="
link
mega-menu__inner-link
">
Men
</a>
<ul class="list mega-menu__inner-list">
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Elegant
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Casual
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Active
</a>
</li>
</ul>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Wallets
</a>
</li>
</ul>
</li>
<li class="list__item mega-menu__inner-item mega-menu__column-hidden">
<a href="" class="
link
mega-menu__inner-link
">
row 3 column 2
</a>
<ul class="list mega-menu__inner-list">
<li class="list__item mega-menu__inner-item mega-menu__inner-item--children">
<a href="" class="
link
mega-menu__inner-link
">
Women
</a>
<ul class="list mega-menu__inner-list">
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Elegant
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Casual
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Active
</a>
</li>
</ul>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Bags
</a>
</li>
</ul>
</li>
<li class="list__item mega-menu__inner-item mega-menu__column-hidden">
<a href="" class="
link
mega-menu__inner-link
">
row 3 column 3
</a>
<ul class="list mega-menu__inner-list">
<li class="list__item mega-menu__inner-item mega-menu__inner-item--children">
<a href="" class="
link
mega-menu__inner-link
">
Kids
</a>
<ul class="list mega-menu__inner-list">
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Pijamas
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
School Days
</a>
</li>
<li class="list__item mega-menu__inner-item mega-menu__inner-item--children">
<a href="" class="
link
mega-menu__inner-link
">
Kids Fance Dress
</a>
<ul class="list mega-menu__inner-list">
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Hats
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Special Ocassions
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="list__item mega-menu__inner-item mega-menu__column-hidden">
<a href="" class="
link
mega-menu__inner-link
">
row 3 column 4
</a>
<ul class="list mega-menu__inner-list">
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Jackets
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Shirts
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Dresses
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Trousers
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Hats
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="mega-menu__item ">
<a href="/shoes" class="mega-menu__link">
Shoes
</a>
</li>
<li class="mega-menu__item ">
<a href="/furniture" class="mega-menu__link">
Furniture
</a>
</li>
<li class="mega-menu__item ">
<a href="/accessories" class="mega-menu__link">
Accessories
</a>
</li>
<li class="mega-menu__item mega-menu__item--parent mega-menu__item--rows">
<a href="/activewear" class="mega-menu__link">
Activewear
</a>
<ul class="list mega-menu__inner-list mega-menu__inner-list--level1">
<li class="list__item mega-menu__inner-item mega-menu__inner-item--columns mega-menu__column-hidden">
<a href="" class="
link
mega-menu__inner-link
">
Row one
</a>
<ul class="list mega-menu__inner-list">
<li class="list__item mega-menu__inner-item mega-menu__column-hidden">
<a href="" class="
link
mega-menu__inner-link
">
row 3 c 1
</a>
<ul class="list mega-menu__inner-list">
<li class="list__item mega-menu__inner-item mega-menu__inner-item--children">
<a href="" class="
link
mega-menu__inner-link
">
Men
</a>
<ul class="list mega-menu__inner-list">
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Elegant
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Casual
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Active
</a>
</li>
</ul>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Wallets
</a>
</li>
</ul>
</li>
<li class="list__item mega-menu__inner-item mega-menu__column-hidden">
<a href="" class="
link
mega-menu__inner-link
">
row 3 column 2
</a>
<ul class="list mega-menu__inner-list">
<li class="list__item mega-menu__inner-item mega-menu__inner-item--children">
<a href="" class="
link
mega-menu__inner-link
">
Women
</a>
<ul class="list mega-menu__inner-list">
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Elegant
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Casual
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Active
</a>
</li>
</ul>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Bags
</a>
</li>
</ul>
</li>
<li class="list__item mega-menu__inner-item mega-menu__column-hidden">
<a href="" class="
link
mega-menu__inner-link
">
row 3 column 3
</a>
<ul class="list mega-menu__inner-list">
<li class="list__item mega-menu__inner-item mega-menu__inner-item--children">
<a href="" class="
link
mega-menu__inner-link
">
Kids
</a>
<ul class="list mega-menu__inner-list">
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Pijamas
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
School Days
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Fance Dress
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Special Occasion
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="list__item mega-menu__inner-item mega-menu__column-hidden">
<a href="" class="
link
mega-menu__inner-link
">
row 3 column 4
</a>
<ul class="list mega-menu__inner-list">
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Jackets
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Shirts
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Dresses
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Trousers
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Hats
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="mega-menu__item mega-menu__item--parent mega-menu__item--secondary">
<a href="/brands" class="mega-menu__link">
Brands Brands
</a>
<ul class="list mega-menu__inner-list mega-menu__inner-list--level1">
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
View all
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Clothing
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Shoes
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Accessories
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Face + Body
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Living + Gifts
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Back in stock
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Trending now
</a>
</li>
</ul>
</li>
</ul>
</div>
<script src="/components/raw/mega-menu/mega-menu.js"></script>
<main class="product-view container" id="maincontent">
<nav class="breadcrumbs margin-vc-s" aria-label="Breadcrumbs" role="navigation">
<ol class="breadcrumbs__list ">
<li class="breadcrumbs__item">
<a href="#" class="breadcrumbs__link">
Home
</a>
</li>
<li class="breadcrumbs__item">
<a href="#" class="breadcrumbs__link">
category2
</a>
</li>
<li class="breadcrumbs__item">
<a href="#" class="breadcrumbs__link">
category3
</a>
</li>
<li class="breadcrumbs__item">
<a href="#" class="breadcrumbs__link">
category4
</a>
</li>
<li class="breadcrumbs__item">
<a href="#" class="breadcrumbs__link">
category5
</a>
</li>
<li class="breadcrumbs__item" aria-current="true">
category6
</li>
</ol>
</nav>
<div class="product-view__wrapper">
<div class="product-view__description">
<div class="product-view__sku">
SKU: CEL-31145
</div>
<div class="product-view__title">
<h1 class="heading heading--page">
Bluzka ONLSANSA SINGLET WVN
</h1>
</div>
</div>
<div class="product-view__gallery">
<div class="badges product-view__badges">
<div class="badge ">
-15%
</div>
<div class="badge badge--new">
New
</div>
</div>
<div class="
gallery
gallery--vertical
">
<div class="
gallery__stage
gallery__stage--vertical
">
<div class="gallery__frame">
<div class="lazyload-wrapper ">
<img class="
image
lazyload
" src="" data-src="/images/product/product_432x648.jpg" alt="">
</div>
</div>
</div>
<div class="
gallery__nav
gallery__nav--vertical
">
<button class="button button--icon gallery__thumb-arr" type="button" aria-label="check more images">
<svg class="icon gallery__icon-arrow gallery__icon-arrow--vertical" role="presentation" focusable="false">
<use href="/images/icons-sprite.svg#angle-up"></use>
</svg>
</button>
<div class="
gallery__thumb
gallery__thumb--vertical
gallery__thumb--active
">
<div class="lazyload-wrapper ">
<img class="
image
lazyload
" src="" data-src="/images/product/product_64x96.jpg" alt="">
</div>
</div>
<div class="
gallery__thumb
gallery__thumb--vertical
">
<div class="lazyload-wrapper ">
<img class="
image
lazyload
" src="" data-src="/images/product/product_64x96.jpg" alt="">
</div>
</div>
<div class="
gallery__thumb
gallery__thumb--vertical
">
<div class="lazyload-wrapper ">
<img class="
image
lazyload
" src="" data-src="/images/product/product_64x96.jpg" alt="">
</div>
</div>
<div class="
gallery__thumb
gallery__thumb--vertical
">
<div class="lazyload-wrapper ">
<img class="
image
lazyload
" src="" data-src="/images/product/product_64x96.jpg" alt="">
</div>
</div>
<button class="button button--icon gallery__thumb-arr" type="button" aria-label="check more images">
<svg class="icon gallery__icon-arrow gallery__icon-arrow--vertical" role="presentation" focusable="false">
<use href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</button>
</div>
</div>
</div>
<div class="product-view__details">
<div class="product-view__rating">
<div class="
review
review--summary
">
<div class="review__summary-handle">
<div class="rating rating--secondary" aria-label="" title="" tabindex="0">
<div class="rating__star " role="presentation">
<span class="
rating__indicator
"></span>
</div>
</div>
<a href="#" class="review__summary-add">
32 Reviews
</a>
</div>
</div>
<div class="product-view__stock">
<button class="button button--link modal-trigger product-view__stock" type="button" data-modal-trigger="shipping-latency-product">
In stock
</button>
<div role="dialog" aria-hidden="true" id="shipping-latency-product" data-modal="shipping-latency-product" class="modal " aria-labbeledny="shipping-latency-title-product">
<div role="document" class="modal__container " tabindex="0">
<div class="modal__content ">
<div class="modal__top ">
<h2 class="modal__heading heading heading--third-level" id="shipping-latency-title-product">
Shipping Latency Modal
</h2>
</div>
<div class="modal__middle ">
<p class="
modal__description
margin-bottom-xs
">
This is a shipping latency modal. Inside we have some text from shippig latency module.
</p>
</div>
</div>
<button class="button button--icon button--rotate-icon modal__close-button" type="button" aria-label="click to close the modal">
<svg class="icon button__icon modal__close-button-icon" role="presentation" focusable="false">
<title>Close</title>
<use href="/images/icons-sprite.svg#close"></use>
</svg>
</button>
</div>
</div>
<script type="text/javascript">
new Modal(document.querySelector('[data-modal-trigger="shipping-latency-product"]'));
</script>
</div>
</div>
<div class="product-view__price">
<div class="price ">
<span class="price__value price__value--between">
<span class="price__text">
From
</span>
$
61.00
</span>
<span class="price__value price__value--between">
<span class="price__text">
To
</span>
$
79.00
</span>
</div>
</div>
<form class="product-view__form">
<div class="product-view__customization">
<div class="bundle-option ">
<h4 class="bundle-option__title" id="radio-options-title">
Sprite Stasis Ball
</h4>
<div class="radio bundle-option__radio margin-bottom-xs">
<fieldset class="fieldset " aria-labelledby="radio-options-title">
<div class="radio__handler">
<input type="radio" id="id1" name="radio1" class="radio__field">
<label for="id1" class="radio__label">
<span class="radio__text">
Sprite Stasis Ball 55 cm
</span>
</label>
</div>
<div class="radio__handler">
<input type="radio" id="id2" name="radio1" class="radio__field">
<label for="id2" class="radio__label">
<span class="radio__text">
Sprite Stasis Ball 65 cm
</span>
</label>
</div>
<div class="radio__handler">
<input type="radio" id="id3" name="radio1" class="radio__field">
<label for="id3" class="radio__label">
<span class="radio__text">
Sprite Stasis Ball 75 cm
</span>
</label>
</div>
</fieldset>
</div>
<div class="input bundle-option__qty margin-bottom-0">
<label class="
label
input__label
bundle-option__qty-label margin-0
" for="qty1">
Qty:
</label>
<input class="input__field bundle-option__qty-input margin-left-xs text-center" id="qty1" name="qty1" type="number" placeholder="" min="0">
</div>
</div>
<div class="bundle-option ">
<h4 class="bundle-option__title">
Sprite Yoga Strap
</h4>
<div class="checkbox ">
<input type="checkbox" id="checkbox-1" name="checkbox-name-1" class="checkbox__field ">
<svg class="
checkbox__icon
checkbox__icon--checked
" role="presentation">
<use href="/images/icons-sprite.svg#checked"></use>
</svg>
<svg class="
checkbox__icon
checkbox__icon--unchecked
" role="presentation">
<use href="/images/icons-sprite.svg#unchecked"></use>
</svg>
<label for="checkbox-1" class="checkbox__label ">
<span class="checkbox__text">
1 x Sprite Yoga Strap 6 foot
</span>
</label>
</div>
<div class="checkbox ">
<input type="checkbox" id="checkbox-2" name="checkbox-name-2" class="checkbox__field ">
<svg class="
checkbox__icon
checkbox__icon--checked
" role="presentation">
<use href="/images/icons-sprite.svg#checked"></use>
</svg>
<svg class="
checkbox__icon
checkbox__icon--unchecked
" role="presentation">
<use href="/images/icons-sprite.svg#unchecked"></use>
</svg>
<label for="checkbox-2" class="checkbox__label ">
<span class="checkbox__text">
1 x Sprite Yoga Strap 8 foot
</span>
</label>
</div>
</div>
<div class="bundle-option ">
<h4 class="bundle-option__title">
Sprite Foam Roller
</h4>
<div class="select bundle-option__select margin-bottom-m">
<label class="
label
label--hidden
" for="field-id">
Label text
</label>
<select id="field-id" class="select__field bundle-option__select" name="field-name">
<option class="" value="">
Sprite Foam Roller
</option>
<option class="" value="">
Sprite Foam Roller S
</option>
<option class="" value="" false>
Sprite Foam Roller XL
</option>
</select>
</div>
<script src="/components/raw/select/select.js"></script>
<div class="input bundle-option__qty margin-bottom-0">
<label class="
label
input__label
bundle-option__qty-label margin-0
" for="qty2">
Qty:
</label>
<input class="input__field bundle-option__qty-input margin-left-xs text-center" id="qty2" name="qty2" type="number" placeholder="" min="0">
</div>
</div>
</div>
<div class="product-view__qty">
<label for="qty" class="label">
Quantity
</label>
<div class="quantity-update ">
<button class="button button--icon quantity-update__button quantity-update__button--minus quantity-update__button--disabled" type="button" aria-label="Decrease the quantity">
<svg class="icon button__icon quantity-update__icon" role="presentation" focusable="false">
<use href="/images/icons-sprite.svg#minus"></use>
</svg>
</button>
<input class="quantity-update__input " type="number" id="qty" min="1" value="1" aria-label="Change the quantity" />
<button class="button button--icon quantity-update__button quantity-update__button--plus" type="button" aria-label="Increase the quantity">
<svg class="icon button__icon quantity-update__icon" role="presentation" focusable="false">
<use href="/images/icons-sprite.svg#plus"></use>
</svg>
</button>
</div>
<script src="/components/raw/quantity-update/../quantity-update/quantity-update.js"></script>
</div>
<div class="product-view__buttons">
<button class="button button--add-to button--add-to-cart product-view__add-to-cart" id="submit-add-to-cart-main" type="submit" aria-label="Add to cart">
<span class="button__text ">
Add to cart
</span>
</button>
<button class="button button--icon product-view__button" type="button" aria-label="Add product to wishlist">
<svg class="icon button__icon" role="presentation" focusable="false">
<use href="/images/icons-sprite.svg#heart"></use>
</svg>
</button>
<button class="button button--icon product-view__button" type="button" aria-label="Compare product">
<svg class="icon button__icon" role="presentation" focusable="false">
<use href="/images/icons-sprite.svg#compare"></use>
</svg>
</button>
</div>
<div class="
add-to-cart
" data-aos="fade-up" data-aos-anchor="#submit-add-to-cart-main" data-aos-anchor-placement="bottom-top">
<div class="add-to-cart__wrapper">
<div class="add-to-cart__title padding-right-m">
<h2 class="heading heading--page">
Bluzka ONLSANSA SINGLET WVN
</h2>
<div class="price ">
<span class="price__value price__value--old ">
<del aria-label="Price reduced from: $249.95">
$
249.95
</del>
</span>
<span class="price__value price__value--special ">
<ins aria-label="On sale at: $159.95">
$
159.95
</ins>
</span>
</div>
</div>
<div class="add-to-cart__action">
<button class="button button--add-to button--add-to" type="submit" aria-label="Add to cart">
<span class="button__text ">
Add to cart
</span>
<svg class="icon button__icon" role="presentation" focusable="false">
<title>Add to Cart</title>
<use href="/images/icons-sprite.svg#shopping-cart"></use>
</svg>
</button>
<button class="
button
button--icon
add-to-cart__button-more
" type="button" aria-expanded="false">
<svg class="icon button__icon" role="presentation" focusable="false">
<title>More</title>
<use href="/images/icons-sprite.svg#more"></use>
</svg>
<svg class="icon button__icon-close" role="presentation" focusable="false">
<title>Close</title>
<use href="/images/icons-sprite.svg#close"></use>
</svg>
</button>
<div class="add-to-cart__action-secondary">
<button class="button button--icon product-view__button" type="button" aria-label="Add product to wishlist">
<svg class="icon button__icon" role="presentation" focusable="false">
<title>Arrow left</title>
<use href="/images/icons-sprite.svg#heart"></use>
</svg>
<span class="button__text ">
Wishlist
</span>
</button>
<button class="button button--icon product-view__button" type="button" aria-label="Compare product">
<svg class="icon button__icon" role="presentation" focusable="false">
<title>Add to compare list</title>
<use href="/images/icons-sprite.svg#compare"></use>
</svg>
<span class="button__text ">
Compare
</span>
</button>
</div>
</div>
</div>
</div>
<script src="/components/raw/add-to-cart/add-to-cart-more.js"></script>
</form>
<div class="product-view__summary">
<div class="product-view__summary-price">
<div class="price ">
<span class="price__value ">
$
92.00
</span>
</div>
<span class="product-view__summary-unit">
/ bundle
</span>
</div>
<div class="product-view__summary-title">
Summary:
</div>
<ul class="product-view__summary-list list">
<li class="product-view__summary-item list__item">
<span class="product-view__summary-item-title">
Sprite Stasis Ball:
</span>
1 x Sprite Stasis Ball 55 cm
</li>
<li class="product-view__summary-item list__item">
<span class="product-view__summary-item-title">
Sprite Yoga Strap:
</span>
1 x Sprite Yoga Strap 6 foot
</li>
<li class="product-view__summary-item list__item">
<span class="product-view__summary-item-title">
Sprite Foam Roller:
</span>
1 x Sprite Foam Roller
</li>
</ul>
</div>
<div class="product-view__brief">
<div class="brief-info ">
<ul class="list brief-info__items-container">
<li class="brief-info__list-item list__item">
<button class="brief-info__item modal-trigger" type="button" data-modal-trigger="modal-info-1">
<span class="
brief-info__icon-wrapper
margin-right-xs
" aria-label="Delivery">
<svg class="icon brief-info__icon" role="presentation" focusable="false">
<title>Free shipping icon</title>
<use href="/images/icons-sprite.svg#delivery-truck"></use>
</svg>
</span>
<div class="brief-info__content">
<h3 class="brief-info__title ">
Free Shipping
</h3>
<p class="brief-info__subtitle
">
On Hundreds of Products
</p>
</div>
</button>
</li>
<li class="brief-info__list-item list__item">
<button class="brief-info__item modal-trigger" type="button" data-modal-trigger="modal-info-2">
<span class="
brief-info__icon-wrapper
margin-right-xs
" aria-label="Big Star">
<svg class="icon brief-info__icon" role="presentation" focusable="false">
<title>return</title>
<use href="/images/icons-sprite.svg#return"></use>
</svg>
</span>
<div class="brief-info__content">
<span class="brief-info__title ">
Return Policy
</span>
<p class="brief-info__subtitle
">
Lorem Ipsum is simply
</p>
</div>
</button>
</li>
</ul>
</div>
<div role="dialog" aria-hidden="true" id="modal-info-1" data-modal="modal-info-1" class="modal " aria-labbeledny="modal-info-1-title">
<div role="document" class="modal__container " tabindex="0">
<div class="modal__content ">
<div class="modal__top ">
<h2 class="modal__heading heading heading--third-level" id="modal-info-1-title">
Free shipping - Brief Info Modal 1
</h2>
</div>
<div class="modal__middle ">
<p class="
modal__description
margin-bottom-xs
">
This is info modal on product page. We can use here some fixed text (the same on every product page) or if we want to put here some product specific text we should use attribute value for this modal content.
</p>
</div>
</div>
<button class="button button--icon button--rotate-icon modal__close-button" type="button" aria-label="click to close the modal">
<svg class="icon button__icon modal__close-button-icon" role="presentation" focusable="false">
<title>Close</title>
<use href="/images/icons-sprite.svg#close"></use>
</svg>
</button>
</div>
</div>
<script type="text/javascript">
new Modal(document.querySelector('[data-modal-trigger="modal-info-1"]'));
</script>
<div role="dialog" aria-hidden="true" id="modal-info-2" data-modal="modal-info-2" class="modal " aria-labbeledny="modal-info-2-title">
<div role="document" class="modal__container " tabindex="0">
<div class="modal__content ">
<div class="modal__top ">
<h2 class="modal__heading heading heading--third-level" id="modal-info-2-title">
Return Policy - Brief Info Modal 2
</h2>
</div>
<div class="modal__middle ">
<p class="
modal__description
margin-bottom-xs
">
This is info modal on product page. We can use here some fixed text (the same on every product page) or if we want to put here some product specific text we should use attribute value for this modal content.
</p>
</div>
</div>
<button class="button button--icon button--rotate-icon modal__close-button" type="button" aria-label="click to close the modal">
<svg class="icon button__icon modal__close-button-icon" role="presentation" focusable="false">
<title>Close</title>
<use href="/images/icons-sprite.svg#close"></use>
</svg>
</button>
</div>
</div>
<script type="text/javascript">
new Modal(document.querySelector('[data-modal-trigger="modal-info-2"]'));
</script>
</div>
</div>
</div>
<div class="product-view__tabs">
<div class="product-view__tabs-sticky-wrap" data-aos="fade-down" data-aos-anchor="#tab-title-1" data-aos-anchor-placement="bottom-top">
<div class="product-view__tabs-sticky">
<a href="#tab-title-1" class="
tab__title
tab__title--sticky
">
Description
</a>
<a href="#tab-title-2" class="
tab__title
tab__title--sticky
tab__title--active
">
Specifications
</a>
<a href="#tab-title-3" class="
tab__title
tab__title--sticky
">
What's in the box
</a>
<a href="#tab-title-4" class="
tab__title
tab__title--sticky
">
Reviews (34)
</a>
</div>
</div>
<div class="tab product-view__tab" role="tablist" id="product-tabs">
<button class="tab__title " data-tab="tab-1" id="tab-title-1" aria-controls="tab-1" aria-selected="false" aria-expanded="false" role="tab">
Description
<svg class="icon tab__icon" role="presentation" focusable="false">
<use href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</button>
<div class="
tab__content
" id="tab-1" data-content="tab-1" aria-labelledby="tab-title-1" aria-hidden="true" role="tabpanel">
Etiam orci ex, tristique at tempor quis, bibendum vel diam. Nullam vel mollis leo. Etiam facilisis mattis tortor, a ullamcorper nulla congue sed. Morbi non odio neque. In ut leo a elit consectetur fermentum aliquet non eros. In elementum vitae nulla sed semper. Nulla lacinia fermentum quam eu scelerisque. Sed et bibendum augue. Etiam sagittis enim eu ex aliquet ornare. Donec congue facilisis neque.
</div>
<button class="tab__title tab__title--active " data-tab="tab-2" id="tab-title-2" aria-controls="tab-2" aria-selected="true" aria-expanded="true" role="tab">
Specifications
<svg class="icon tab__icon" role="presentation" focusable="false">
<use href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</button>
<div class="
tab__content
tab__content--active
product-view__table
" id="tab-2" data-content="tab-2" aria-labelledby="tab-title-2" aria-hidden="false" role="tabpanel">
<table class="table table--scope-row" tabindex="0" role="table">
<caption class="table__caption">
This is a table. Binded text in caption should explain what kind of data this table presents. Can be also a longer text with inline HTML elements inside
</caption>
<tbody>
<tr role="row">
<th class="" data-th="Example heading:" scope="row" role="rowheader">
Example heading
</th>
<td class="" data-th="Example heading:" role="gridcell">
Example content
</td>
</tr>
<tr role="row">
<th class="" data-th="Example heading:" scope="row" role="rowheader">
Example heading
</th>
<td class="" data-th="Example heading:" role="gridcell">
Example content
</td>
</tr>
<tr role="row">
<th class="" data-th="Example heading:" scope="row" role="rowheader">
Example heading
</th>
<td class="" data-th="Example heading:" role="gridcell">
Example content
</td>
</tr>
</tbody>
</table>
</div>
<button class="tab__title " data-tab="tab-3" id="tab-title-3" aria-controls="tab-3" aria-selected="false" aria-expanded="false" role="tab">
What's in the box
<svg class="icon tab__icon" role="presentation" focusable="false">
<use href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</button>
<div class="
tab__content
" id="tab-3" data-content="tab-3" aria-labelledby="tab-title-3" aria-hidden="true" role="tabpanel">
Etiam orci ex, tristique at tempor quis, bibendum vel diam. Nullam vel mollis leo. Etiam facilisis mattis tortor, a ullamcorper nulla congue sed. Morbi non odio neque. In ut leo a elit consectetur fermentum aliquet non eros. In elementum vitae nulla sed semper. Nulla lacinia fermentum quam eu scelerisque. Sed et bibendum augue. Etiam sagittis enim eu ex aliquet ornare. Donec congue facilisis neque.
</div>
<button class="tab__title " data-tab="tab-4" id="tab-title-4" aria-controls="tab-4" aria-selected="false" aria-expanded="false" role="tab">
Reviews (34)
<svg class="icon tab__icon" role="presentation" focusable="false">
<use href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</button>
<div class="
tab__content
" id="tab-4" data-content="tab-4" aria-labelledby="tab-title-4" aria-hidden="true" role="tabpanel">
<section class="product-review">
<div class="product-review__action">
<div class="
review
review--summary
">
<div class="review__summary-handle">
<div class="rating review__rating" aria-label="Average rating 72%" title="" tabindex="0">
<div class="rating__star " role="presentation" style="width: 72%">
<span class="
rating__indicator
"></span>
</div>
</div>
<a href="#" class="review__summary-add">
32 Reviews
</a>
</div>
</div>
<button class="button button--secondary-light product-review__write-btn" type="button" aria-label="button">
Write a review
</button>
</div>
<div class="
review
review--add
">
<h3 class="review__title">
Write a review
</h3>
<fieldset class="fieldset" aria-labelledby="rating-field-label">
<legend id="rating-field-label" class="rating-rate-legend review__rating-legend">
Score
</legend>
<div class="
rating
rating--rate
" role="listbox" aria-required="true" aria-labelledby="rating-field-label" tabindex="0">
<div class="rating__rate-item " role="option" aria-selected="false">
<label for="Rating_1" class="
rating__star
rating__star--rate
" aria-label="Rate option, 1 of 5. Click to vote">
<span class="
rating__indicator
"></span>
</label>
<input type="radio" name="ratings[1]" id="Rating_1" value="16" class="radio__field">
</div>
<div class="rating__rate-item " role="option" aria-selected="false">
<label for="Rating_2" class="
rating__star
rating__star--rate
" aria-label="Rate option, 2 of 5. Click to vote">
<span class="
rating__indicator
"></span>
</label>
<input type="radio" name="ratings[2]" id="Rating_2" value="16" class="radio__field">
</div>
<div class="rating__rate-item " role="option" aria-selected="false">
<label for="Rating_3" class="
rating__star
rating__star--rate
" aria-label="Rate option, 3 of 5. Click to vote">
<span class="
rating__indicator
"></span>
</label>
<input type="radio" name="ratings[3]" id="Rating_3" value="16" class="radio__field">
</div>
<div class="rating__rate-item " role="option" aria-selected="false">
<label for="Rating_4" class="
rating__star
rating__star--rate
" aria-label="Rate option, 4 of 5. Click to vote">
<span class="
rating__indicator
"></span>
</label>
<input type="radio" name="ratings[4]" id="Rating_4" value="16" class="radio__field">
</div>
<div class="rating__rate-item " role="option" aria-selected="false">
<label for="Rating_5" class="
rating__star
rating__star--rate
" aria-label="Rate option, 5 of 5. Click to vote">
<span class="
rating__indicator
"></span>
</label>
<input type="radio" name="ratings[5]" id="Rating_5" value="16" class="radio__field">
</div>
</div>
</fieldset>
<script src="/components/raw/rating/rating-rate.js"></script>
<fieldset class="fieldset review__fieldset">
<div class="input review__field">
<label class="
label
input__label
" for="review-nickname">
Nickname *
</label>
<input class="input__field " id="review-nickname" name="review-nickname" type="text" placeholder="" autocomplete="name">
</div>
<div class="input review__field">
<label class="
label
input__label
" for="review-summary">
Summary *
</label>
<input class="input__field " id="review-summary" name="review-summary" type="text" placeholder="" autocomplete="off">
</div>
<div class="input review__field">
<label class="
label
input__label
" for="review-text">
Review *
</label>
<textarea class="input__field input__field--textarea " id="review-text" name="review-text" placeholder="" autocomplete="off"></textarea>
</div>
<button class="button review__submit-btn" type="button" aria-label="button">
Post
</button>
<p class="review__required-info">
* Required fields
</p>
</fieldset>
</div>
<div class="product-review__reviews">
<ul class="list">
<li class="list__item">
<div class="
review
">
<div class="review__image">
<div class="lazyload-wrapper ">
<img class="
image
lazyload
" src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/banner/banner-480_480.png" alt="image alt text">
</div>
</div>
<div class="review__details">
<div class="review__wrapper">
<div class="review__author-details">
<h3 class="review__author-name">
anna Maria
</h3>
<div class="review__author-description">
Verified Buyer
</div>
</div>
<div class="review__date">
17/08/2018
</div>
</div>
<div class="rating rating--secondary review__rating" aria-label="Average rating 72%" title="" tabindex="0">
<div class="rating__star " role="presentation" style="width: 72%">
<span class="
rating__indicator
"></span>
</div>
</div>
<h4 class="review__title">
Review title
</h4>
<div class="review__description">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacus odio, rutrum a augue nec, varius vehicula odio. Praesent at nibh vehicula libero pellentesque vulputate. Ut malesuada dolor eget purus condimentum, eget porttitor est luctus. Donec tristique, tortor a iaculis mollis, ex erat gravida nunc, quis viverra tortor neque quis eros. Pellentesque lorem sapien, consequat non vestibulum ac, pellentesque vitae risus. Nunc eleifend magna id fringilla semper.
</p>
</div>
<div class="review__links">
<div class="review__links-column">
<a href="#" class="review__links-btn">
<svg class="icon " role="img">
<use href="/images/icons-sprite.svg#share"></use>
</svg>
<span>
Share
</span>
</a>
</div>
<div class="review__links-column">
<span class="review__links-legend">
Was This Review Helpful?
</span>
<a href="#" class="review__links-btn">
<svg class="icon " role="img">
<title>Thumb up</title>
<use href="/images/icons-sprite.svg#thumb-up"></use>
</svg>
<span>1</span>
</a>
<a href="#" class="review__links-btn">
<svg class="icon " role="img">
<title>Thumb down</title>
<use href="/images/icons-sprite.svg#thumb-down"></use>
</svg>
<span>1</span>
</a>
</div>
</div>
</div>
</div>
</li>
<li class="list__item">
<div class="
review
">
<div class="review__image">
<div class="lazyload-wrapper ">
<img class="
image
lazyload
" src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/banner/banner-480_480.png" alt="image alt text">
</div>
</div>
<div class="review__details">
<div class="review__wrapper">
<div class="review__author-details">
<h3 class="review__author-name">
John Smith
</h3>
<div class="review__author-description">
Verified Buyer
</div>
</div>
<div class="review__date">
07/08/2018
</div>
</div>
<div class="rating rating--secondary review__rating" aria-label="Average rating 62%" title="" tabindex="0">
<div class="rating__star " role="presentation" style="width: 62%">
<span class="
rating__indicator
"></span>
</div>
</div>
<h4 class="review__title">
Good product
</h4>
<div class="review__description">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacus odio, rutrum a augue nec, varius vehicula odio. Praesent at nibh vehicula libero pellentesque vulputate. Ut malesuada dolor eget purus condimentum, eget porttitor est luctus. Donec tristique, tortor a iaculis mollis, ex erat gravida nunc, quis viverra tortor neque quis eros. Pellentesque lorem sapien, consequat non vestibulum ac, pellentesque vitae risus. Nunc eleifend magna id fringilla semper.
</p>
</div>
<div class="review__links">
<div class="review__links-column">
<a href="#" class="review__links-btn">
<svg class="icon " role="img">
<use href="/images/icons-sprite.svg#share"></use>
</svg>
<span>
Share
</span>
</a>
</div>
<div class="review__links-column">
<span class="review__links-legend">
Was This Review Helpful?
</span>
<a href="#" class="review__links-btn">
<svg class="icon " role="img">
<title>Thumb up</title>
<use href="/images/icons-sprite.svg#thumb-up"></use>
</svg>
<span>1</span>
</a>
<a href="#" class="review__links-btn">
<svg class="icon " role="img">
<title>Thumb down</title>
<use href="/images/icons-sprite.svg#thumb-down"></use>
</svg>
<span>1</span>
</a>
</div>
</div>
</div>
</div>
</li>
<li class="list__item">
<div class="
review
">
<div class="review__image">
<div class="lazyload-wrapper ">
<img class="
image
lazyload
" src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/banner/banner-480_480.png" alt="image alt text">
</div>
</div>
<div class="review__details">
<div class="review__wrapper">
<div class="review__author-details">
<h3 class="review__author-name">
Janusz Janusz
</h3>
<div class="review__author-description">
Verified Buyer
</div>
</div>
<div class="review__date">
07/09/2018
</div>
</div>
<div class="rating rating--secondary review__rating" aria-label="Average rating 92%" title="" tabindex="0">
<div class="rating__star " role="presentation" style="width: 92%">
<span class="
rating__indicator
"></span>
</div>
</div>
<h4 class="review__title">
Lovie this product
</h4>
<div class="review__description">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacus odio, rutrum a augue nec, varius vehicula odio. Praesent at nibh vehicula libero pellentesque vulputate. Ut malesuada dolor eget purus condimentum, eget porttitor est luctus. Donec tristique, tortor a iaculis mollis, ex erat gravida nunc, quis viverra tortor neque quis eros. Pellentesque lorem sapien, consequat non vestibulum ac, pellentesque vitae risus. Nunc eleifend magna id fringilla semper.
</p>
</div>
<div class="review__links">
<div class="review__links-column">
<a href="#" class="review__links-btn">
<svg class="icon " role="img">
<use href="/images/icons-sprite.svg#share"></use>
</svg>
<span>
Share
</span>
</a>
</div>
<div class="review__links-column">
<span class="review__links-legend">
Was This Review Helpful?
</span>
<a href="#" class="review__links-btn">
<svg class="icon " role="img">
<title>Thumb up</title>
<use href="/images/icons-sprite.svg#thumb-up"></use>
</svg>
<span>1</span>
</a>
<a href="#" class="review__links-btn">
<svg class="icon " role="img">
<title>Thumb down</title>
<use href="/images/icons-sprite.svg#thumb-down"></use>
</svg>
<span>1</span>
</a>
</div>
</div>
</div>
</div>
</li>
<li class="list__item">
<div class="
review
">
<div class="review__image">
<div class="lazyload-wrapper ">
<img class="
image
lazyload
" src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/banner/banner-480_480.png" alt="image alt text">
</div>
</div>
<div class="review__details">
<div class="review__wrapper">
<div class="review__author-details">
<h3 class="review__author-name">
Grazyna Grazyna
</h3>
<div class="review__author-description">
Verified Buyer
</div>
</div>
<div class="review__date">
02/08/2018
</div>
</div>
<div class="rating rating--secondary review__rating" aria-label="Average rating 42%" title="" tabindex="0">
<div class="rating__star " role="presentation" style="width: 42%">
<span class="
rating__indicator
"></span>
</div>
</div>
<h4 class="review__title">
Good but not enought
</h4>
<div class="review__description">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacus odio, rutrum a augue nec, varius vehicula odio. Praesent at nibh vehicula libero pellentesque vulputate. Ut malesuada dolor eget purus condimentum, eget porttitor est luctus. Donec tristique, tortor a iaculis mollis, ex erat gravida nunc, quis viverra tortor neque quis eros. Pellentesque lorem sapien, consequat non vestibulum ac, pellentesque vitae risus. Nunc eleifend magna id fringilla semper.
</p>
</div>
<div class="review__links">
<div class="review__links-column">
<a href="#" class="review__links-btn">
<svg class="icon " role="img">
<use href="/images/icons-sprite.svg#share"></use>
</svg>
<span>
Share
</span>
</a>
</div>
<div class="review__links-column">
<span class="review__links-legend">
Was This Review Helpful?
</span>
<a href="#" class="review__links-btn">
<svg class="icon " role="img">
<title>Thumb up</title>
<use href="/images/icons-sprite.svg#thumb-up"></use>
</svg>
<span>1</span>
</a>
<a href="#" class="review__links-btn">
<svg class="icon " role="img">
<title>Thumb down</title>
<use href="/images/icons-sprite.svg#thumb-down"></use>
</svg>
<span>1</span>
</a>
</div>
</div>
</div>
</div>
</li>
<li class="list__item">
<div class="
review
">
<div class="review__image">
<div class="lazyload-wrapper ">
<img class="
image
lazyload
" src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/banner/banner-480_480.png" alt="image alt text">
</div>
</div>
<div class="review__details">
<div class="review__wrapper">
<div class="review__author-details">
<h3 class="review__author-name">
Jan Kowalski
</h3>
<div class="review__author-description">
Verified Buyer
</div>
</div>
<div class="review__date">
03/07/2018
</div>
</div>
<div class="rating rating--secondary review__rating" aria-label="Average rating 77%" title="" tabindex="0">
<div class="rating__star " role="presentation" style="width: 77%">
<span class="
rating__indicator
"></span>
</div>
</div>
<h4 class="review__title">
Recommended
</h4>
<div class="review__description">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacus odio, rutrum a augue nec, varius vehicula odio. Praesent at nibh vehicula libero pellentesque vulputate. Ut malesuada dolor eget purus condimentum, eget porttitor est luctus. Donec tristique, tortor a iaculis mollis, ex erat gravida nunc, quis viverra tortor neque quis eros. Pellentesque lorem sapien, consequat non vestibulum ac, pellentesque vitae risus. Nunc eleifend magna id fringilla semper.
</p>
</div>
<div class="review__links">
<div class="review__links-column">
<a href="#" class="review__links-btn">
<svg class="icon " role="img">
<use href="/images/icons-sprite.svg#share"></use>
</svg>
<span>
Share
</span>
</a>
</div>
<div class="review__links-column">
<span class="review__links-legend">
Was This Review Helpful?
</span>
<a href="#" class="review__links-btn">
<svg class="icon " role="img">
<title>Thumb up</title>
<use href="/images/icons-sprite.svg#thumb-up"></use>
</svg>
<span>1</span>
</a>
<a href="#" class="review__links-btn">
<svg class="icon " role="img">
<title>Thumb down</title>
<use href="/images/icons-sprite.svg#thumb-down"></use>
</svg>
<span>1</span>
</a>
</div>
</div>
</div>
</div>
</li>
<li class="list__item">
<div class="
review
">
<div class="review__image">
<div class="lazyload-wrapper ">
<img class="
image
lazyload
" src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/banner/banner-480_480.png" alt="image alt text">
</div>
</div>
<div class="review__details">
<div class="review__wrapper">
<div class="review__author-details">
<h3 class="review__author-name">
anna Maria
</h3>
<div class="review__author-description">
Verified Buyer
</div>
</div>
<div class="review__date">
07/06/2018
</div>
</div>
<div class="rating rating--secondary review__rating" aria-label="Average rating 10%" title="" tabindex="0">
<div class="rating__star " role="presentation" style="width: 10%">
<span class="
rating__indicator
"></span>
</div>
</div>
<h4 class="review__title">
Not recomennded
</h4>
<div class="review__description">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacus odio, rutrum a augue nec, varius vehicula odio. Praesent at nibh vehicula libero pellentesque vulputate. Ut malesuada dolor eget purus condimentum, eget porttitor est luctus. Donec tristique, tortor a iaculis mollis, ex erat gravida nunc, quis viverra tortor neque quis eros. Pellentesque lorem sapien, consequat non vestibulum ac, pellentesque vitae risus. Nunc eleifend magna id fringilla semper.
</p>
</div>
<div class="review__links">
<div class="review__links-column">
<a href="#" class="review__links-btn">
<svg class="icon " role="img">
<use href="/images/icons-sprite.svg#share"></use>
</svg>
<span>
Share
</span>
</a>
</div>
<div class="review__links-column">
<span class="review__links-legend">
Was This Review Helpful?
</span>
<a href="#" class="review__links-btn">
<svg class="icon " role="img">
<title>Thumb up</title>
<use href="/images/icons-sprite.svg#thumb-up"></use>
</svg>
<span>1</span>
</a>
<a href="#" class="review__links-btn">
<svg class="icon " role="img">
<title>Thumb down</title>
<use href="/images/icons-sprite.svg#thumb-down"></use>
</svg>
<span>1</span>
</a>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</section>
</div>
</div>
<script src="/components/raw/tab/tab.js"></script>
</div>
<div class="product-view__slider">
<section class="section ">
<div class="section__content section__content--products">
<div class="slider slider--products" data-mobile-first="true" data-infinite="false" data-center-mode="false" data-dots="true" data-autoplay="false" data-autoplay-speed="3000" data-pause-on-focus="true" data-pause-on-hover="true" data-slides-to-show="2" data-slides-to-scroll="1" data-swipe-to-slide="true" data-element-slides=".slider__slides" data-dots-class="slider__dots" data-loading-class="slider--loading" data-loader-visible-class="loader--visible" data-element-slide=".slider__item" data-element-loader=".loader" data-element-nav-prev=".slider__prev" data-element-nav-next=".slider__next" data-responsive-config='[{"breakpoint": 767, "settings": {"slidesToShow": 3, "slidesToScroll": 1, "dots": false}}, {"breakpoint": 1023, "settings": {"slidesToShow": 4, "slidesToScroll": 1, "dots": false}}]'>
<div class="loader loader--visible" aria-live="polite" aria-label="Do not refresh the page">
<div class="loader__icon"></div>
</div>
<div class="slider__heading ">
<h2 class="heading--first-level margin-0">
Recently viewed
</h2>
</div>
<div class="slider__handler">
<div class="slider__navigation ">
<div class="slider__arrows">
<button class="button button--icon button--icon-border slider__nav-button slider__prev" type="button" aria-label="Previous slide">
<svg class="icon button__icon slider__nav-icon" role="img">
<use href="/images/icons-sprite.svg#arrow-left"></use>
</svg>
</button>
<button class="button button--icon button--icon-border slider__nav-button slider__next" type="button" aria-label="Next slide">
<svg class="icon button__icon slider__nav-icon" role="img">
<use href="/images/icons-sprite.svg#arrow-right"></use>
</svg>
</button>
</div>
</div>
<div class="slider__container">
<div class="slider__slides">
<div class="
slider__item
slider__slide-item
">
<div class="product-grid-item product-grid-item--slider-item" tabindex="0">
<a href="#" class="product-grid-item__link" tabindex="-1">
<div class="badges product-grid-item__badges">
<div class="badge ">
-15%
</div>
<div class="badge badge--new">
New
</div>
</div>
<div class="lazyload-wrapper product-grid-item__image-wrapper">
<img class="
image
lazyload
" src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/product/product-368_552.jpg" alt="image alt text">
</div>
</a>
<section class="product-grid-item__details">
<div class="rating product-grid-item__rating rating--secondary" aria-label="Average rating: 72%" title="Average rating: 72%" tabindex="0">
<div class="rating__star " role="presentation" style="width: 72%">
<span class="
rating__indicator
"></span>
</div>
</div>
<h2 class="product-grid-item__name">
<a href="#" class="product-grid-item__name-link">
Long product name can have maximum 50 caractere...
</a>
</h2>
<div class="swatch__container swatch__container--catalog">
<div class="swatch ">
<div class="swatch__wrapper" aria-label="Color" tabindex="0" aria-activedescendant="opt-color-red-3" aria-required="true" role="listbox" aria-invalid="false">
<div class="swatch__option-container " id="opt-color-orange-1" aria-label="Orange" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option " style="background-color: #ffa500">
</div>
</div>
<div class="swatch__option-container " id="opt-color-green-2" aria-label="Green" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option " style="background-color: #00ff00">
</div>
</div>
<div class="swatch__option-container selected" id="opt-color-red-3" aria-label="Red" tabindex="0" role="option" aria-selected="true">
<div class="swatch__option " style="background-color: #ff0000">
</div>
</div>
<div class="swatch__option-container " id="opt-color-black-4" aria-label="White" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option " style="background-color: #000000">
</div>
</div>
</div>
</div>
<script src="/components/raw/swatch/swatch.js"></script>
</div>
<div class="product-grid-item__details-bottom">
<div class="product-grid-item__price ">
<div class="price ">
<span class="price__value ">
$
1 400
</span>
</div>
</div>
<div class="product-grid-item__actions ">
<div class="product-grid-item__secondary-action">
<button class="button button--icon add-to-wishlist" type="button" aria-label="Add to Wish List">
<svg class="icon button__icon" role="presentation" focusable="false">
<title>Heart</title>
<use href="/images/icons-sprite.svg#heart"></use>
</svg>
</button>
<button class="button button--icon " type="button" aria-label="Add to compare">
<svg class="icon button__icon" role="presentation" focusable="false">
<title>Compare</title>
<use href="/images/icons-sprite.svg#compare"></use>
</svg>
</button>
</div>
<form action="#" class="product-grid-item__primary-action">
<button class="button button--add-to button--add-to" type="submit" aria-label="Add to cart">
<span class="button__text ">
Add to cart
</span>
<svg class="icon button__icon" role="presentation" focusable="false">
<title>Add to cart</title>
<use href="/images/icons-sprite.svg#shopping-cart"></use>
</svg>
</button>
</form>
</div>
</div>
</section>
</div>
</div>
<div class="
slider__item
slider__slide-item
">
<div class="product-grid-item product-grid-item--slider-item" tabindex="0">
<a href="#" class="product-grid-item__link" tabindex="-1">
<div class="badges product-grid-item__badges">
<div class="badge ">
-15%
</div>
<div class="badge badge--new">
New
</div>
</div>
<div class="lazyload-wrapper product-grid-item__image-wrapper">
<img class="
image
lazyload
" src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/product/product-368_552.jpg" alt="image alt text">
</div>
</a>
<section class="product-grid-item__details">
<div class="rating product-grid-item__rating rating--secondary" aria-label="Average rating: 72%" title="Average rating: 72%" tabindex="0">
<div class="rating__star " role="presentation" style="width: 72%">
<span class="
rating__indicator
"></span>
</div>
</div>
<h2 class="product-grid-item__name">
<a href="#" class="product-grid-item__name-link">
Long product name can have maximum 50 caractere...
</a>
</h2>
<div class="swatch__container swatch__container--catalog">
<div class="swatch ">
<div class="swatch__wrapper" aria-label="Color" tabindex="0" aria-activedescendant="opt-color-red-3" aria-required="true" role="listbox" aria-invalid="false">
<div class="swatch__option-container " id="opt-color-orange-1" aria-label="Orange" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option " style="background-color: #ffa500">
</div>
</div>
<div class="swatch__option-container " id="opt-color-green-2" aria-label="Green" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option " style="background-color: #00ff00">
</div>
</div>
<div class="swatch__option-container selected" id="opt-color-red-3" aria-label="Red" tabindex="0" role="option" aria-selected="true">
<div class="swatch__option " style="background-color: #ff0000">
</div>
</div>
<div class="swatch__option-container " id="opt-color-black-4" aria-label="White" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option " style="background-color: #000000">
</div>
</div>
</div>
</div>
<script src="/components/raw/swatch/swatch.js"></script>
</div>
<div class="product-grid-item__details-bottom">
<div class="product-grid-item__price ">
<div class="price ">
<span class="price__value ">
$
1 400
</span>
</div>
</div>
<div class="product-grid-item__actions ">
<div class="product-grid-item__secondary-action">
<button class="button button--icon add-to-wishlist" type="button" aria-label="Add to Wish List">
<svg class="icon button__icon" role="presentation" focusable="false">
<title>Heart</title>
<use href="/images/icons-sprite.svg#heart"></use>
</svg>
</button>
<button class="button button--icon " type="button" aria-label="Add to compare">
<svg class="icon button__icon" role="presentation" focusable="false">
<title>Compare</title>
<use href="/images/icons-sprite.svg#compare"></use>
</svg>
</button>
</div>
<form action="#" class="product-grid-item__primary-action">
<button class="button button--add-to button--add-to" type="submit" aria-label="Add to cart">
<span class="button__text ">
Add to cart
</span>
<svg class="icon button__icon" role="presentation" focusable="false">
<title>Add to cart</title>
<use href="/images/icons-sprite.svg#shopping-cart"></use>
</svg>
</button>
</form>
</div>
</div>
</section>
</div>
</div>
<div class="
slider__item
slider__slide-item
">
<div class="product-grid-item product-grid-item--slider-item" tabindex="0">
<a href="#" class="product-grid-item__link" tabindex="-1">
<div class="badges product-grid-item__badges">
<div class="badge ">
-15%
</div>
<div class="badge badge--new">
New
</div>
</div>
<div class="lazyload-wrapper product-grid-item__image-wrapper">
<img class="
image
lazyload
" src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/product/product-368_552.jpg" alt="image alt text">
</div>
</a>
<section class="product-grid-item__details">
<div class="rating product-grid-item__rating rating--secondary" aria-label="Average rating: 72%" title="Average rating: 72%" tabindex="0">
<div class="rating__star " role="presentation" style="width: 72%">
<span class="
rating__indicator
"></span>
</div>
</div>
<h2 class="product-grid-item__name">
<a href="#" class="product-grid-item__name-link">
Some product name Lorem Ipsum Dolor sit
</a>
</h2>
<div class="swatch__container swatch__container--catalog">
<div class="swatch ">
<div class="swatch__wrapper" aria-label="Color" tabindex="0" aria-activedescendant="opt-color-red-3" aria-required="true" role="listbox" aria-invalid="false">
<div class="swatch__option-container " id="opt-color-orange-1" aria-label="Orange" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option " style="background-color: #ffa500">
</div>
</div>
<div class="swatch__option-container " id="opt-color-green-2" aria-label="Green" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option " style="background-color: #00ff00">
</div>
</div>
<div class="swatch__option-container selected" id="opt-color-red-3" aria-label="Red" tabindex="0" role="option" aria-selected="true">
<div class="swatch__option " style="background-color: #ff0000">
</div>
</div>
<div class="swatch__option-container " id="opt-color-black-4" aria-label="White" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option " style="background-color: #000000">
</div>
</div>
</div>
</div>
<script src="/components/raw/swatch/swatch.js"></script>
</div>
<div class="product-grid-item__details-bottom">
<div class="product-grid-item__price ">
<div class="price ">
<span class="price__value ">
$
1 400
</span>
</div>
</div>
<div class="product-grid-item__actions ">
<div class="product-grid-item__secondary-action">
<button class="button button--icon add-to-wishlist" type="button" aria-label="Add to Wish List">
<svg class="icon button__icon" role="presentation" focusable="false">
<title>Heart</title>
<use href="/images/icons-sprite.svg#heart"></use>
</svg>
</button>
<button class="button button--icon " type="button" aria-label="Add to compare">
<svg class="icon button__icon" role="presentation" focusable="false">
<title>Compare</title>
<use href="/images/icons-sprite.svg#compare"></use>
</svg>
</button>
</div>
<form action="#" class="product-grid-item__primary-action">
<button class="button button--add-to button--add-to" type="submit" aria-label="Add to cart">
<span class="button__text ">
Add to cart
</span>
<svg class="icon button__icon" role="presentation" focusable="false">
<title>Add to cart</title>
<use href="/images/icons-sprite.svg#shopping-cart"></use>
</svg>
</button>
</form>
</div>
</div>
</section>
</div>
</div>
<div class="
slider__item
slider__slide-item
">
<div class="product-grid-item product-grid-item--slider-item" tabindex="0">
<a href="#" class="product-grid-item__link" tabindex="-1">
<div class="badges product-grid-item__badges">
<div class="badge ">
-15%
</div>
<div class="badge badge--new">
New
</div>
</div>
<div class="lazyload-wrapper product-grid-item__image-wrapper">
<img class="
image
lazyload
" src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/product/product-368_552.jpg" alt="image alt text">
</div>
</a>
<section class="product-grid-item__details">
<div class="rating product-grid-item__rating rating--secondary" aria-label="Average rating: 72%" title="Average rating: 72%" tabindex="0">
<div class="rating__star " role="presentation" style="width: 72%">
<span class="
rating__indicator
"></span>
</div>
</div>
<h2 class="product-grid-item__name">
<a href="#" class="product-grid-item__name-link">
Some product name
</a>
</h2>
<div class="swatch__container swatch__container--catalog">
<div class="swatch ">
<div class="swatch__wrapper" aria-label="Color" tabindex="0" aria-activedescendant="opt-color-red-3" aria-required="true" role="listbox" aria-invalid="false">
<div class="swatch__option-container " id="opt-color-orange-1" aria-label="Orange" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option " style="background-color: #ffa500">
</div>
</div>
<div class="swatch__option-container " id="opt-color-green-2" aria-label="Green" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option " style="background-color: #00ff00">
</div>
</div>
<div class="swatch__option-container selected" id="opt-color-red-3" aria-label="Red" tabindex="0" role="option" aria-selected="true">
<div class="swatch__option " style="background-color: #ff0000">
</div>
</div>
<div class="swatch__option-container " id="opt-color-black-4" aria-label="White" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option " style="background-color: #000000">
</div>
</div>
</div>
</div>
<script src="/components/raw/swatch/swatch.js"></script>
</div>
<div class="product-grid-item__details-bottom">
<div class="product-grid-item__price ">
<div class="price ">
<span class="price__value price__value--old ">
<del aria-label="Price reduced from: $1000.00">
$
1000.00
</del>
</span>
<span class="price__value price__value--special ">
<ins aria-label="On sale at: $899.99">
$
899.99
</ins>
</span>
</div>
</div>
<div class="product-grid-item__actions ">
<div class="product-grid-item__secondary-action">
<button class="button button--icon add-to-wishlist" type="button" aria-label="Add to Wish List">
<svg class="icon button__icon" role="presentation" focusable="false">
<title>Heart</title>
<use href="/images/icons-sprite.svg#heart"></use>
</svg>
</button>
<button class="button button--icon " type="button" aria-label="Add to compare">
<svg class="icon button__icon" role="presentation" focusable="false">
<title>Compare</title>
<use href="/images/icons-sprite.svg#compare"></use>
</svg>
</button>
</div>
<form action="#" class="product-grid-item__primary-action">
<button class="button button--add-to button--add-to" type="submit" aria-label="Add to cart">
<span class="button__text ">
Add to cart
</span>
<svg class="icon button__icon" role="presentation" focusable="false">
<title>Add to cart</title>
<use href="/images/icons-sprite.svg#shopping-cart"></use>
</svg>
</button>
</form>
</div>
</div>
</section>
</div>
</div>
<div class="
slider__item
slider__slide-item
">
<div class="product-grid-item product-grid-item--slider-item" tabindex="0">
<a href="#" class="product-grid-item__link" tabindex="-1">
<div class="badges product-grid-item__badges">
<div class="badge ">
-15%
</div>
<div class="badge badge--new">
New
</div>
</div>
<div class="lazyload-wrapper product-grid-item__image-wrapper">
<img class="
image
lazyload
" src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/product/product-368_552.jpg" alt="image alt text">
</div>
</a>
<section class="product-grid-item__details">
<div class="rating product-grid-item__rating rating--secondary" aria-label="Average rating: 72%" title="Average rating: 72%" tabindex="0">
<div class="rating__star " role="presentation" style="width: 72%">
<span class="
rating__indicator
"></span>
</div>
</div>
<h2 class="product-grid-item__name">
<a href="#" class="product-grid-item__name-link">
Long product name can have maximum 50 caractere...
</a>
</h2>
<div class="swatch__container swatch__container--catalog">
<div class="swatch ">
<div class="swatch__wrapper" aria-label="Color" tabindex="0" aria-activedescendant="opt-color-red-3" aria-required="true" role="listbox" aria-invalid="false">
<div class="swatch__option-container " id="opt-color-orange-1" aria-label="Orange" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option " style="background-color: #ffa500">
</div>
</div>
<div class="swatch__option-container " id="opt-color-green-2" aria-label="Green" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option " style="background-color: #00ff00">
</div>
</div>
<div class="swatch__option-container selected" id="opt-color-red-3" aria-label="Red" tabindex="0" role="option" aria-selected="true">
<div class="swatch__option " style="background-color: #ff0000">
</div>
</div>
<div class="swatch__option-container " id="opt-color-black-4" aria-label="White" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option " style="background-color: #000000">
</div>
</div>
</div>
</div>
<script src="/components/raw/swatch/swatch.js"></script>
</div>
<div class="product-grid-item__details-bottom">
<div class="product-grid-item__price ">
<div class="price ">
<span class="price__value ">
$
1 400
</span>
</div>
</div>
<div class="product-grid-item__actions ">
<div class="product-grid-item__secondary-action">
<button class="button button--icon add-to-wishlist" type="button" aria-label="Add to Wish List">
<svg class="icon button__icon" role="presentation" focusable="false">
<title>Heart</title>
<use href="/images/icons-sprite.svg#heart"></use>
</svg>
</button>
<button class="button button--icon " type="button" aria-label="Add to compare">
<svg class="icon button__icon" role="presentation" focusable="false">
<title>Compare</title>
<use href="/images/icons-sprite.svg#compare"></use>
</svg>
</button>
</div>
<form action="#" class="product-grid-item__primary-action">
<button class="button button--add-to button--add-to" type="submit" aria-label="Add to cart">
<span class="button__text ">
Add to cart
</span>
<svg class="icon button__icon" role="presentation" focusable="false">
<title>Add to cart</title>
<use href="/images/icons-sprite.svg#shopping-cart"></use>
</svg>
</button>
</form>
</div>
</div>
</section>
</div>
</div>
<div class="
slider__item
slider__slide-item
">
<div class="product-grid-item product-grid-item--slider-item" tabindex="0">
<a href="#" class="product-grid-item__link" tabindex="-1">
<div class="badges product-grid-item__badges">
<div class="badge ">
-15%
</div>
<div class="badge badge--new">
New
</div>
</div>
<div class="lazyload-wrapper product-grid-item__image-wrapper">
<img class="
image
lazyload
" src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/product/product-368_552.jpg" alt="image alt text">
</div>
</a>
<section class="product-grid-item__details">
<div class="rating product-grid-item__rating rating--secondary" aria-label="Average rating: 72%" title="Average rating: 72%" tabindex="0">
<div class="rating__star " role="presentation" style="width: 72%">
<span class="
rating__indicator
"></span>
</div>
</div>
<h2 class="product-grid-item__name">
<a href="#" class="product-grid-item__name-link">
Some product name
</a>
</h2>
<div class="swatch__container swatch__container--catalog">
<div class="swatch ">
<div class="swatch__wrapper" aria-label="Color" tabindex="0" aria-activedescendant="opt-color-red-3" aria-required="true" role="listbox" aria-invalid="false">
<div class="swatch__option-container " id="opt-color-orange-1" aria-label="Orange" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option " style="background-color: #ffa500">
</div>
</div>
<div class="swatch__option-container " id="opt-color-green-2" aria-label="Green" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option " style="background-color: #00ff00">
</div>
</div>
<div class="swatch__option-container selected" id="opt-color-red-3" aria-label="Red" tabindex="0" role="option" aria-selected="true">
<div class="swatch__option " style="background-color: #ff0000">
</div>
</div>
<div class="swatch__option-container " id="opt-color-black-4" aria-label="White" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option " style="background-color: #000000">
</div>
</div>
</div>
</div>
<script src="/components/raw/swatch/swatch.js"></script>
</div>
<div class="product-grid-item__details-bottom">
<div class="product-grid-item__price ">
<div class="price ">
<span class="price__value price__value--old product-grid-item__old-price">
<del aria-label="Price reduced from: $1000.00">
$
1000.00
</del>
</span>
<span class="price__value price__value--special product-grid-item__special-price">
<ins aria-label="On sale at: $899.99">
$
899.99
</ins>
</span>
</div>
</div>
<div class="product-grid-item__actions ">
<div class="product-grid-item__secondary-action">
<button class="button button--icon add-to-wishlist" type="button" aria-label="Add to Wish List">
<svg class="icon button__icon" role="presentation" focusable="false">
<title>Heart</title>
<use href="/images/icons-sprite.svg#heart"></use>
</svg>
</button>
<button class="button button--icon " type="button" aria-label="Add to compare">
<svg class="icon button__icon" role="presentation" focusable="false">
<title>Compare</title>
<use href="/images/icons-sprite.svg#compare"></use>
</svg>
</button>
</div>
<form action="#" class="product-grid-item__primary-action">
<button class="button button--add-to button--add-to" type="submit" aria-label="Add to cart">
<span class="button__text ">
Add to cart
</span>
<svg class="icon button__icon" role="presentation" focusable="false">
<title>Add to cart</title>
<use href="/images/icons-sprite.svg#shopping-cart"></use>
</svg>
</button>
</form>
</div>
</div>
</section>
</div>
</div>
<div class="
slider__item
slider__slide-item
">
<div class="product-grid-item product-grid-item--slider-item" tabindex="0">
<a href="#" class="product-grid-item__link" tabindex="-1">
<div class="badges product-grid-item__badges">
<div class="badge ">
-15%
</div>
<div class="badge badge--new">
New
</div>
</div>
<div class="lazyload-wrapper product-grid-item__image-wrapper">
<img class="
image
lazyload
" src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/product/product-368_552.jpg" alt="image alt text">
</div>
</a>
<section class="product-grid-item__details">
<div class="rating product-grid-item__rating rating--secondary" aria-label="Average rating: 72%" title="Average rating: 72%" tabindex="0">
<div class="rating__star " role="presentation" style="width: 72%">
<span class="
rating__indicator
"></span>
</div>
</div>
<h2 class="product-grid-item__name">
<a href="#" class="product-grid-item__name-link">
Long product name can have maximum 50 caractere...
</a>
</h2>
<div class="swatch__container swatch__container--catalog">
<div class="swatch ">
<div class="swatch__wrapper" aria-label="Color" tabindex="0" aria-activedescendant="opt-color-red-3" aria-required="true" role="listbox" aria-invalid="false">
<div class="swatch__option-container " id="opt-color-orange-1" aria-label="Orange" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option " style="background-color: #ffa500">
</div>
</div>
<div class="swatch__option-container " id="opt-color-green-2" aria-label="Green" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option " style="background-color: #00ff00">
</div>
</div>
<div class="swatch__option-container selected" id="opt-color-red-3" aria-label="Red" tabindex="0" role="option" aria-selected="true">
<div class="swatch__option " style="background-color: #ff0000">
</div>
</div>
<div class="swatch__option-container " id="opt-color-black-4" aria-label="White" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option " style="background-color: #000000">
</div>
</div>
</div>
</div>
<script src="/components/raw/swatch/swatch.js"></script>
</div>
<div class="product-grid-item__details-bottom">
<div class="product-grid-item__price ">
<div class="price ">
<span class="price__value ">
$
1 400
</span>
</div>
</div>
<div class="product-grid-item__actions ">
<div class="product-grid-item__secondary-action">
<button class="button button--icon add-to-wishlist" type="button" aria-label="Add to Wish List">
<svg class="icon button__icon" role="presentation" focusable="false">
<title>Heart</title>
<use href="/images/icons-sprite.svg#heart"></use>
</svg>
</button>
<button class="button button--icon " type="button" aria-label="Add to compare">
<svg class="icon button__icon" role="presentation" focusable="false">
<title>Compare</title>
<use href="/images/icons-sprite.svg#compare"></use>
</svg>
</button>
</div>
<form action="#" class="product-grid-item__primary-action">
<button class="button button--add-to button--add-to" type="submit" aria-label="Add to cart">
<span class="button__text ">
Add to cart
</span>
<svg class="icon button__icon" role="presentation" focusable="false">
<title>Add to cart</title>
<use href="/images/icons-sprite.svg#shopping-cart"></use>
</svg>
</button>
</form>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="/components/raw/slider/slider.js"></script>
</div>
</section>
</div>
<div class="product-view__additional-block margin-vc-l">
<a href="#" class="banner " aria-label="descriptive text about banner action and / or image">
<picture class="image ">
<source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/banner/banner-320_176.jpg" media="(max-width: 480px)" />
<source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/banner/banner-768_416.jpg" media="(max-width: 960px)" />
<source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/banner/banner-1024_416.jpg" media="(max-width: 1328px)" />
<source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/banner/banner-1920_512.jpg" media="" />
<img class="lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/banner/banner-320_176.jpg" alt="banner-image" />
</picture>
</a>
<div class="content-block ">
<div class="content-block__row row">
<div class="content-block__column col-xs-12">
<h2 class="content-block__heading">
Lorem ipsum
</h2>
<div class="paragraph content-block__description">
<span>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text
</span>
</div>
<a class="link content-block__link" href="#" title="Title">
Link
</a>
</div>
</div>
</div>
</div>
</main>
</div>
<footer class="footer margin-top-xl">
<div class="footer__handler container">
<button class="button button--icon footer__scroll-top" type="button" data-focus-top="skip-nav-top" aria-label="scroll to top">
<svg class="icon " role="presentation" focusable="false">
<title>Scroll to top</title>
<use href="/images/icons-sprite.svg#arrow-up"></use>
</svg>
</button>
<section class="footer__newsletter">
<div class="newsletter ">
<div class="newsletter__heading ">
<h2 class="newsletter__title">
JOIN OUR EMAIL LIST
</h2>
<p class="newsletter__subtitle">
Sign up for savings and product announcements
</p>
</div>
<form class="newsletter__form">
<div class="newsletter__controls">
<div class="input newsletter__input">
<label class="
label
input__label
label--hidden
newsletter__label
" for="newsletterEmail">
Email for newsletter subscription
</label>
<input class="input__field newsletter__field" id="newsletterEmail" name="newsletterEamil" type="" placeholder="Enter your email">
</div>
<button class="button button--secondary newsletter__button">
Sign Up
</button>
</div>
<div class="newsletter__agreements">
<div class="checkbox newsletter__checkbox">
<input type="checkbox" id="newsletter" name="" class="checkbox__field ">
<svg class="
checkbox__icon
checkbox__icon--checked
" role="presentation">
<use href="/images/icons-sprite.svg#checked"></use>
</svg>
<svg class="
checkbox__icon
checkbox__icon--unchecked
" role="presentation">
<use href="/images/icons-sprite.svg#unchecked"></use>
</svg>
<label for="newsletter" class="checkbox__label ">
<span class="checkbox__text">
I agree to <a href="#" title="Terms and conditions">Terms & Conditions</a> and I am happy to receive your newsletter with all your promotions.
</span>
</label>
</div>
</div>
</form>
</div>
</section>
<div class="footer__social-handler ">
<h3 class="footer__social-list-title">
Let's get social!
</h3>
<ul class="list list--with-icon list--horizontal footer__social-list">
<li class="list__item ">
<a href="#" class="list__icon-link button button--icon button--icon-border" aria-label="Go to Our Facebook Page">
<svg class="icon footer__social-icon" role="img">
<title>Facebook logo</title>
<use href="/images/icons-sprite.svg#facebook"></use>
</svg>
</a>
</li>
<li class="list__item ">
<a href="#" class="list__icon-link button button--icon button--icon-border" aria-label="Check Our on Twitter">
<svg class="icon footer__social-icon" role="img">
<title>Twitter logo</title>
<use href="/images/icons-sprite.svg#twitter"></use>
</svg>
</a>
</li>
</ul>
</div>
<section class="footer__links">
<div id="dropdown-footer" class="dropdown-list dropdown-list--with-breakpoint">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<button class="dropdown-list__label " aria-expanded="false" aria-controls="dropdown-customers" aria-controls="dropdown-customers">
Customers
<svg class="icon dropdown-list__icon dropdown-list__icon--inner" role="presentation" focusable="false">
<title>Arrow down</title>
<use href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</button>
<div id="dropdown-customers" class="dropdown-list__content " aria-hidden="true">
<ul class="
list
list__columns
footer__links-list
">
<li class="
list__item
list__column
list__column--hidden
">
<a href="" class="
link
">
Column 1
</a>
<ul class="list">
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="Sign in">
Login to My Account
</a>
</li>
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="Sign up">
Create an Account
</a>
</li>
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="My Orders">
My Orders
</a>
</li>
</ul>
</li>
<li class="
list__item
list__column
list__column--hidden
">
<a href="" class="
link
">
Column 2
</a>
<ul class="list">
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="My Cart">
My Cart
</a>
</li>
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="Checkout">
Checkout
</a>
</li>
</ul>
</li>
</ul>
</div>
</li>
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<button class="dropdown-list__label " aria-expanded="false" aria-controls="dropdown-information" aria-controls="dropdown-information">
Information
<svg class="icon dropdown-list__icon dropdown-list__icon--inner" role="img">
<title>Arrow down</title>
<use href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</button>
<div id="dropdown-information" class="dropdown-list__content " aria-hidden="true">
<ul class="
list
list__columns
footer__links-list
">
<li class="
list__item
list__column
list__column--hidden
">
<a href="" class="
link
">
Column 1
</a>
<ul class="list">
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="Hours">
Hours
</a>
</li>
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="About Us">
About Us
</a>
</li>
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="Contact Us">
Contact Us
</a>
</li>
</ul>
</li>
<li class="
list__item
list__column
list__column--hidden
">
<a href="" class="
link
">
Column 2
</a>
<ul class="list">
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="Job Openings">
Job Openings
</a>
</li>
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="Returns">
Returns
</a>
</li>
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="Shipping">
Shipping
</a>
</li>
</ul>
</li>
<li class="
list__item
list__column
list__column--hidden
">
<a href="" class="
link
">
Column 3
</a>
<ul class="list">
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="Privacy Policy">
Privacy Policy
</a>
</li>
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="Terms & Conditions">
Terms & Conditions
</a>
</li>
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="Site Map">
Site Map
</a>
</li>
</ul>
</li>
<li class="
list__item
list__column
list__column--hidden
">
<a href="" class="
link
">
Column 4
</a>
<ul class="list">
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="Reviews">
Reviews
</a>
</li>
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="Email Us!">
Email Us!
</a>
</li>
</ul>
</li>
</ul>
</div>
</li>
</ul>
</div>
<script type="text/javascript">
new DropdownList(document.getElementById('dropdown-footer'));
</script>
</section>
</div>
<section class="footer__bottom-bar ">
<div class="footer__bottom-bar-handler container">
<div class="footer__copyright">
<small>
Copyright © 2019 Alpaca
</small>
</div>
<ul class="
footer__payments-list
list
list--horizontal
">
<li class="list__item">
<svg class="icon footer__payments-list-icon footer__payments-list-icon--visa" role="img">
<title>Visa</title>
<use href="/images/icons-sprite.svg#visa"></use>
</svg>
</li>
<li class="list__item">
<svg class="icon footer__payments-list-icon" role="img">
<title>Master Card</title>
<use href="/images/icons-sprite.svg#master-card"></use>
</svg>
</li>
<li class="list__item">
<svg class="icon footer__payments-list-icon" role="img">
<title>Discover</title>
<use href="/images/icons-sprite.svg#discover"></use>
</svg>
</li>
<li class="list__item">
<svg class="icon footer__payments-list-icon" role="img">
<title>American Express</title>
<use href="/images/icons-sprite.svg#american-express"></use>
</svg>
</li>
<li class="list__item">
<svg class="icon footer__payments-list-icon footer__payments-list-icon--paypal" role="img">
<title>PayPal</title>
<use href="/images/icons-sprite.svg#paypal"></use>
</svg>
</li>
</ul>
<div class="footer__switchers">
<div id="language-dropdown" class="dropdown-list dropdown-list--detailed-content footer__dropdown-switcher">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-detailed-content1">
German
<svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
<title>Arrow Down</title>
<use href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</a>
<div id="dropdown-detailed-content1" class="dropdown-list__content " aria-hidden="true">
<ul class="list ">
<li class="list__item ">
Lorem ipsum
</li>
<li class="list__item ">
Lorem ipsum
</li>
<li class="list__item ">
Lorem ipsum
</li>
<li class="list__item ">
Lorem ipsum
</li>
<li class="list__item ">
Lorem ipsum
</li>
</ul>
</div>
</li>
</ul>
</div>
<script type="text/javascript">
new DropdownList(document.getElementById('language-dropdown'));
</script>
<div id="currency-dropdown" class="dropdown-list dropdown-list--detailed-content footer__dropdown-switcher margin-right-xs">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-detailed-content2">
USD - US Dollar
<svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
<title>Arrow Down</title>
<use href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</a>
<div id="dropdown-detailed-content2" class="dropdown-list__content " aria-hidden="true">
<ul class="list ">
<li class="list__item ">
Lorem ipsum
</li>
<li class="list__item ">
Lorem ipsum
</li>
<li class="list__item ">
Lorem ipsum
</li>
<li class="list__item ">
Lorem ipsum
</li>
<li class="list__item ">
Lorem ipsum
</li>
</ul>
</div>
</li>
</ul>
</div>
<script type="text/javascript">
new DropdownList(document.getElementById('currency-dropdown'));
</script>
</div>
</div>
</section>
<div class="cookie-message cookie-message" data-type="cookie" tabindex="0" aria-label="Cookie policy message">
<div class="cookie-message__container">
<p class="cookie-message__text">
<a href="#" class="link--invert">Example link</a> Find out more about their purpose and settings in your browser. By browsing the site you are agreeing to use cookies according to your browser settings.
</p>
<button class="
button
button--icon
cookie-message__close
cookie-message__button
button--rotate-icon
" type="button" aria-label="Close cookie message">
<svg class="icon button__icon cookie-message__button-icon" role="presentation" focusable="false">
<title>Close</title>
<use href="/images/icons-sprite.svg#close"></use>
</svg>
</button>
</div>
</div>
<script src="/components/raw/cookie-message/cookie-message.js"></script>
</footer>
<script src="/components/raw/footer/footer.js"></script>
<script type="text/javascript">
AOS.init({
duration: 500
});
</script>
<div class="page-wrapper catalog-product-view">
{{ render '@header' }}
<main
class="product-view container"
id="maincontent"
>
{{ render '@breadcrumbs' }}
<div class="product-view__wrapper">
<div class="product-view__description">
<div class="product-view__sku">
{{ sku }}
</div>
<div class="product-view__title">
<h1 class="heading heading--page">
{{ title }}
</h1>
</div>
</div>
<div class="product-view__gallery">
{{ render '@badges' productBadges }}
{{ render '@gallery' }}
</div>
<div class="product-view__details">
<div class="product-view__rating">
{{ render '@review--summary' review }}
<div class="product-view__stock">
{{ render '@button' stockButton merge=true }}
{{ render '@modal' shippingLatencyModal }}
</div>
</div>
<div class="product-view__price">
{{ render '@price--between' }}
</div>
<form class="product-view__form">
<div class="product-view__customization">
{{ render '@bundle-option' }}
{{ render '@bundle-option--checkbox' }}
{{ render '@bundle-option--select' }}
</div>
<div class="product-view__qty">
<label
for="qty"
class="label"
>
{{ qtyLabel }}
</label>
{{ render '@quantity-update' }}
</div>
<div class="product-view__buttons">
{{ render '@button--add-to' addToCartBtn }}
{{ render '@button--icon' heartBtn }}
{{ render '@button--icon' compareBtn }}
</div>
{{ render '@add-to-cart' }}
</form>
<div class="product-view__summary">
<div class="product-view__summary-price">
{{ render '@price' price merge=true }}
<span class="product-view__summary-unit">
{{ priceUnit }}
</span>
</div>
<div class="product-view__summary-title">
{{ summaryTitle }}
</div>
<ul class="product-view__summary-list list">
{{#each summaries as |summary|}}
<li class="product-view__summary-item list__item">
<span class="product-view__summary-item-title">
{{ summary.title }}
</span>
{{ summary.item }}
</li>
{{/each}}
</ul>
</div>
<div class="product-view__brief">
{{ render '@brief-info--buttons' }}
{{ render '@modal' briefInfoModal1 }}
{{ render '@modal' briefInfoModal2 }}
</div>
</div>
</div>
<div class="product-view__tabs">
<div
class="product-view__tabs-sticky-wrap"
data-aos="fade-down"
data-aos-anchor="#tab-title-1"
data-aos-anchor-placement="bottom-top"
>
<div class="product-view__tabs-sticky">
{{#each tab.tabs as |item|}}
<a
href="#{{item.titleId}}"
class="
tab__title
tab__title--sticky
{{#if item.active}}
tab__title--active
{{/if}}
"
>
{{ item.title }}
</a>
{{/each}}
</div>
</div>
{{ render '@tab' tab }}
</div>
<div class="product-view__slider">
{{ render '@section' recentlyViewed }}
</div>
<div class="product-view__additional-block {{ additionalBlockClass }}">
{{ render '@banner' }}
{{ render '@content-block' }}
</div>
</main>
</div>
{{ render '@footer' }}
<script type="text/javascript">
AOS.init({
duration: 500
});
</script>
{
"title": "Bluzka ONLSANSA SINGLET WVN",
"titleClass": "product-view__title",
"sku": "SKU: CEL-31145",
"gallery": {
"class": "gallery--dots"
},
"productBadges": {
"class": "product-view__badges",
"badges": [
{
"contentElement": "badge",
"contentContext": {
"text": "-15%"
}
},
{
"contentElement": "badge--new",
"contentContext": {
"text": "New"
}
}
]
},
"stockButton": {
"class": "button--link modal-trigger product-view__stock",
"text": "In stock",
"attributes": "type=\"button\" data-modal-trigger=\"shipping-latency-product\""
},
"downloadableSamples": {
"label": {
"text": "Trailers:",
"class": "product-view__short-description-heading margin-bottom-xs"
},
"elements": [
{
"href": "#",
"text": "Trailer #1",
"class": "link--invert item-link samples-item-link"
},
{
"href": "#",
"text": "Trailer #2",
"class": "link--invert item-link samples-item-link"
},
{
"href": "#",
"text": "Trailer #3",
"class": "link--invert item-link samples-item-link"
}
]
},
"shortDescription": {
"class": "margin-top-m",
"heading": {
"tag": "h2",
"class": "product-view__short-description-heading margin-bottom-xs",
"text": "Short description:"
},
"text": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry. Lorem Ipsum has been the industry."
},
"downloadableLinks": {
"legend": {
"class": "fieldset__legend--hidden legend links-title",
"text": "Downloads"
},
"label": {
"class": "product-view__short-description-heading",
"text": "Downloads:"
},
"checkboxes": [
{
"id": "links_1",
"class": "field choice",
"attributes": "value=\"1\"",
"label": {
"text": "\n Episode 1\n <a\n class=\"\n link\n link--invert\n sample\n \"\n href=\"#\"\n >\n Sample\n </a>\n <span class=\"price-wrapper\">\n $9.00\n </span>\n "
}
},
{
"id": "links_2",
"class": "field choice",
"attributes": "value=\"2\"",
"label": {
"text": "\n Episode 2\n <a\n class=\"\n link\n link--invert\n sample\n \"\n href=\"#\"\n >\n Sample\n </a>\n <span class=\"price-wrapper\">\n $9.00\n </span>\n "
}
}
],
"selectAll": {
"id": "links-all",
"attributes": "data-notchecked=\"Select all\" data-checked=\"Unselect all\"",
"label": {
"text": "Select all"
}
}
},
"shippingLatencyModal": {
"modal": {
"id": "shipping-latency-product",
"attributes": "aria-labbeledny=\"shipping-latency-title-product\""
},
"buttonClose": {
"tag": "button",
"text": "",
"class": "button--rotate-icon modal__close-button",
"icon": {
"id": "close",
"class": "button__icon modal__close-button-icon",
"hidden": true
},
"attributes": "type=\"button\" aria-label=\"click to close the modal\""
},
"modalTop": true,
"heading": {
"tag": "h2",
"class": "heading heading--third-level",
"attributes": "id=\"shipping-latency-title-product\"",
"text": "Shipping Latency Modal"
},
"modalMiddle": true,
"modalDescription": {
"attributes": "",
"class": "margin-bottom-xs",
"tag": "p",
"text": "This is a shipping latency modal. Inside we have some text from shippig latency module."
}
},
"colorSwatch": {
"class": "margin-bottom-m"
},
"sizeOption": {
"class": "product-view__select-option required",
"label": {
"text": "Size"
},
"field": {
"id": "size",
"name": "size",
"class": "select--native",
"attributes": "required"
},
"options": [
{
"value": "",
"text": "Choose your size"
},
{
"value": "xs",
"text": "XS"
},
{
"value": "s",
"text": "S"
},
{
"value": "m",
"text": "M"
},
{
"value": "l",
"text": "L"
},
{
"value": "xl",
"text": "XL"
}
]
},
"qtyLabel": "Quantity",
"addToCartBtn": {
"tag": "button",
"text": "Add to cart",
"class": "button--add-to-cart product-view__add-to-cart",
"attributes": "id=\"submit-add-to-cart-main\" type=\"submit\" aria-label=\"Add to cart\""
},
"heartBtn": {
"tag": "button",
"text": "",
"class": "product-view__button",
"icon": {
"id": "heart",
"class": "button__icon",
"hidden": true
},
"attributes": "type=\"button\" aria-label=\"Add product to wishlist\""
},
"compareBtn": {
"tag": "button",
"text": "",
"class": "product-view__button",
"icon": {
"id": "compare",
"class": "button__icon",
"hidden": true
},
"attributes": "type=\"button\" aria-label=\"Compare product\""
},
"briefInfoModal1": {
"modal": {
"id": "modal-info-1",
"attributes": "aria-labbeledny=\"modal-info-1-title\""
},
"buttonClose": {
"tag": "button",
"text": "",
"class": "button--rotate-icon modal__close-button",
"icon": {
"id": "close",
"class": "button__icon modal__close-button-icon",
"hidden": true
},
"attributes": "type=\"button\" aria-label=\"click to close the modal\""
},
"modalTop": true,
"heading": {
"tag": "h2",
"class": "heading heading--third-level",
"attributes": "id=\"modal-info-1-title\"",
"text": "Free shipping - Brief Info Modal 1"
},
"modalMiddle": true,
"modalDescription": {
"attributes": "",
"class": "margin-bottom-xs",
"tag": "p",
"text": "This is info modal on product page. We can use here some fixed text (the same on every product page) or if we want to put here some product specific text we should use attribute value for this modal content."
}
},
"briefInfoModal2": {
"modal": {
"id": "modal-info-2",
"attributes": "aria-labbeledny=\"modal-info-2-title\""
},
"buttonClose": {
"tag": "button",
"text": "",
"class": "button--rotate-icon modal__close-button",
"icon": {
"id": "close",
"class": "button__icon modal__close-button-icon",
"hidden": true
},
"attributes": "type=\"button\" aria-label=\"click to close the modal\""
},
"modalTop": true,
"heading": {
"tag": "h2",
"class": "heading heading--third-level",
"attributes": "id=\"modal-info-2-title\"",
"text": "Return Policy - Brief Info Modal 2"
},
"modalMiddle": true,
"modalDescription": {
"attributes": "",
"class": "margin-bottom-xs",
"tag": "p",
"text": "This is info modal on product page. We can use here some fixed text (the same on every product page) or if we want to put here some product specific text we should use attribute value for this modal content."
}
},
"tab": {
"script": true,
"attributes": "id=\"product-tabs\"",
"class": "product-view__tab",
"icon": {
"class": "tab__icon",
"id": "angle-down",
"hidden": true
},
"tabs": [
{
"tabId": "tab-1",
"title": "Description",
"titleId": "tab-title-1",
"content": "Etiam orci ex, tristique at tempor quis, bibendum vel diam. Nullam vel mollis leo. Etiam facilisis mattis tortor, a ullamcorper nulla congue sed. Morbi non odio neque. In ut leo a elit consectetur fermentum aliquet non eros. In elementum vitae nulla sed semper. Nulla lacinia fermentum quam eu scelerisque. Sed et bibendum augue. Etiam sagittis enim eu ex aliquet ornare. Donec congue facilisis neque."
},
{
"active": true,
"tabId": "tab-2",
"title": "Specifications",
"titleId": "tab-title-2",
"class": {
"content": "product-view__table"
},
"contentElement": "table--scope-row"
},
{
"tabId": "tab-3",
"title": "What's in the box",
"titleId": "tab-title-3",
"content": "Etiam orci ex, tristique at tempor quis, bibendum vel diam. Nullam vel mollis leo. Etiam facilisis mattis tortor, a ullamcorper nulla congue sed. Morbi non odio neque. In ut leo a elit consectetur fermentum aliquet non eros. In elementum vitae nulla sed semper. Nulla lacinia fermentum quam eu scelerisque. Sed et bibendum augue. Etiam sagittis enim eu ex aliquet ornare. Donec congue facilisis neque."
},
{
"tabId": "tab-4",
"titleId": "tab-title-4",
"title": "Reviews (34)",
"contentElement": "product-review"
}
]
},
"review": {
"reviewsQty": "32 Reviews",
"rating": {
"class": "rating--secondary"
}
},
"recentlyViewed": {
"heading": false,
"contentClass": "section__content--products",
"components": [
{
"content": {
"content": "slider--products",
"contentContext": {
"script": true,
"heading": {
"content": "heading",
"contentContext": {
"tag": "h2",
"class": "heading--first-level margin-0",
"text": "Recently viewed"
}
}
}
}
}
]
},
"additionalBlockClass": "margin-vc-l",
"price": {
"regularPrice": "92.00"
},
"priceUnit": "/ bundle",
"summaryTitle": "Summary:",
"summaries": [
{
"title": "Sprite Stasis Ball:",
"item": "1 x Sprite Stasis Ball 55 cm"
},
{
"title": "Sprite Yoga Strap:",
"item": "1 x Sprite Yoga Strap 6 foot"
},
{
"title": "Sprite Foam Roller:",
"item": "1 x Sprite Foam Roller"
}
]
}
// container
$product-view__max-width\@large : 1120px !default;
$product-view__padding : $spacer--medium 0 0 0 !default;
$product-view__padding\@medium : $spacer--extra-large 0 0 0 !default;
$product-view__padding\@xl : $spacer--extra-large !default;
// wrapper / flex & grid
$product-view__wrapper-grid-template-columns\@medium : 50% 50% !default;
$product-view__wrapper-grid-template-rows\@medium : auto auto auto !default;
$product-view__wrapper-margin : 0 auto !default;
$product-view__wrapper-max-width : 1120px !default;
$product-view__column-gap\@medium : $spacer--medium !default;
$product-view__column-gap\@large : $spacer--extra-large !default;
$product-view__column-gap\@xl : #{$spacer--extra-large * 3} !default;
$product-view__gallery-order : 1 !default;
$product-view__gallery-grid-column-start\@medium : 1 !default;
$product-view__gallery-grid-row-start\@medium : 1 !default;
$product-view__gallery-grid-row-end\@medium : 3 !default;
$product-view__desc-order : 2 !default;
$product-view__details-order : 3 !default;
$product-view__details-desc-grid-column-start\@medium : 2 !default;
$product-view__details-grid-row-start\@medium : 2 !default;
$product-view__details-desc-width\@medium : calc(100% - #{$product-view__column-gap\@medium}) !default;
$product-view__details-desc-width\@large : calc(100% - #{$product-view__column-gap\@large}) !default;
$product-view__details-desc-width\@xl : calc(100% - #{$product-view__column-gap\@xl}) !default;
// gallery
$product-view__gallery-margin : 0 0 $spacer--medium !default;
//badges
$product-view__badges-z-index : $z-index-low !default;
$product-view__badges-top : $spacer--medium !default;
$product-view__badges-top\@medium : $spacer--semi-medium !default;
$product-view__badges-top\@large : $spacer--semi-medium !default;
$product-view__badges-left : 0 !default;
$product-view__badges-left\@medium : 0 !default;
$product-view__badges-left\@large : 82px !default;
$product-view__badges-left\@xl : 114px !default;
// title
$product-view__title-margin : 0 0 $spacer--semi-medium !default;
$product-view__title-margin\@medium : 0 !default;
$product-view__title-text-transform : initial !default;
$product-view__title-font-size : $font-size-large !default;
$product-view__title-font-size\@medium : $font-size-extra-large !default;
$product-view__title-font-size\@large : $font-size-super-extra-large !default;
// sku
$product-view__sku-display : none !default;
$product-view__sku-color : $gray-dark !default;
$product-view__sku-font-weight : $font-weight-normal !default;
// stock
$product-view__stock-min-height : 22px !default;
$product-view__stock-padding : 0 !default;
$product-view__stock-font-weight : $font-weight-bold !default;
$product-view__stock-text-transform : uppercase !default;
$product-view__stock-white-space : nowrap !default;
$product-view__stock-font-size : $font-size-small !default;
$product-view__stock-font-size\@medium : $font-size-base !default;
$product-view__stock-color : inherit !default;
$product-view__stock-min-width : 60px !default;
$product-view__stock-color-hover : $color-primary !default;
$product-view__stock-text-decoration : none !default;
$product-view__stock-text-decoration-hover : underline !default;
// rating
$product-view__rating-padding : 0 0 $spacer !default;
$product-view__rating-border : $border-base !default;
$product-view__rating-border-width : 0 0 $border-width-base !default;
// price
$product-view__price-display : none !default;
$product-view__price-display\@display-mq : block !default;
$product-view__price-display-mq : $screen-m !default;
$product-view__price-padding : $spacer--medium 0 !default;
$product-view__price-display--between : flex !default;
$product-view__price-flex-direction--between : column !default;
$product-view__price-line-height--between : 1.2 !default;
$product-view__price-text-display--between : inline-flex !default;
$product-view__price-text-min-width--between : 50px !default;
// short description
$product-view__short-description-heading-font-family : $font-family-base !default;
$product-view__short-description-heading-font-size : $font-size-base !default;
$product-view__short-description-heading-font-weight : $font-weight-bold !default;
$product-view__short-description-heading-color : $color-secondary !default;
$product-view__short-description-heading-text-transform : none !default;
// options
$product-view__select-option-height : 56px !default;
$product-view__options-margin : 0 0 $spacer--semi-medium !default;
// buttons
$product-view__buttons-mq-display : $screen-m !default;
// button
$product-view__button-width : 48% !default;
$product-view__button-width\@medium : auto !default;
$product-view__button-margin\@medium : 0 0 0 $spacer !default;
$product-view__button-min-size : 56px !default;
$product-view__button-bg : $gray-lighter !default;
$product-view__button-wishlist-filled-bg-color-hover : $color-primary !default;
$product-view__button-wishlist-filled-bg-image-after-hover : linear-gradient(to right, $white 50%, transparent 50%) !default;
$product-view__button-wishlist-width : 100% !default;
$product-view__button-wishlist-width\@medium : auto !default;
$product-view__button-wishlist-margin\@medium : 0 0 0 $spacer !default;
$product-view__button-wishlist-min-width : 56px !default;
$product-view__button-wishlist-min-height : 56px !default;
$product-view__button-wishlist-background-color : $gray-lighter !default;
$product-view__dropdown-wishlist-width : 100% !default;
$product-view__dropdown-wishlist-margin : $spacer 0 0 !default;
$product-view__dropdown-wishlist-margin\@medium : $spacer--medium 0 0 !default;
$product-view__dropdown-wishlist-button-width : 100% !default;
$product-view__dropdown-wishlist-button-after-left : calc(50% - 63px) !default;
$product-view__dropdown-wishlist-content-min-width\@medium : 360px !default;
$product-view__dropdown-wishlist-content-min-width\@large : 200% !default;
$product-view__requistion-dropdown-order : 5 !default;
$product-view__requistion-dropdown-width\@medium : 55% !default;
$product-view__requistion-dropdown-width\@large : 50% !default;
$product-view__requistion-dropdown-content-right : 0 !default;
$product-view__multiwishlist-dropdown-order : 4 !default;
$product-view__multiwishlist-dropdown-width\@medium : 44% !default;
$product-view__multiwishlist-dropdown-width\@large : 50% !default;
$product-view__multiwishlist-dropdown-item-padding\@large : 0 $spacer 0 0 !default;
$product-view__update-wishlist-width : 100% !default;
$product-view__update-wishlist-height : 56px !default;
$product-view__update-wishlist-margin : $spacer 0 0 !default;
$product-view__update-wishlist-margin\@medium : $spacer--medium 0 0 !default;
$product-view__update-wishlist-order : 2 !default;
$product-view__extra-actions-order : 3 !default;
$product-view__extra-actions-width : 100% !default;
$product-view__extra-actions-width\@medium : auto !default;
// add to cart button
$product-view__add-to-cart : none !default;
$product-view__order : 1 !default;
$product-view__flex-grow : 1 !default;
$product-view__add-to-cart-height : 56px !default;
$product-view__add-to-cart-padding : 0 $spacer--medium !default;
$product-view__add-to-cart\@buttons-mq-display : inline-flex !default;
// update requisition list button
$product-view__update-requisition-list-height : 56px !default;
$product-view__update-requisition-list-margin : 0 0 $spacer--medium !default;
$product-view__update-requisition-list-width : 100% !default;
$product-view__update-requisition-list-button-width : 100% !default;
// qty
$product-view__qty-margin : 0 0 $spacer--large !default;
// stock status
$product-view__stock-status-margin : $spacer--medium 0 0 0 !default;
$product-view__stock-status-margin\@medium : 0 !default;
// brief
$product-view__brief-margin : $spacer--large 0 !default;
$product-view__brief-margin\@medium : $spacer--medium 0 $spacer--semi-medium !default;
$product-view__brief-title-text-transform : capitalize !default;
$product-view__brief-title-font-weight : $font-weight-bold !default;
$product-view__brief-title-font-size : $font-size-base !default;
$product-view__brief-subtitle-font-size : $font-size-small !default;
$product-view__brief-item-margin : 0 0 $spacer !default;
// form
$product-view__form-padding : $spacer--medium 0 !default;
$product-view__form-border : $border-base !default;
$product-view__form-border-width : 0 0 $border-width-base !default;
// summary
$product-view__summary-padding : $spacer--medium 0 0 !default;
$product-view__summary-margin : 0 0 $spacer--large !default;
$product-view__summary-margin\@medium : 0 !default;
$product-view__summary-width : 100% !default;
$product-view__summary-title-font-family : $font-family-base !default;
$product-view__summary-title-font-size : $font-size-medium !default;
$product-view__summary-title-font-weight : $font-weight-bold !default;
$product-view__summary-title-text-transform : uppercase !default;
$product-view__summary-title-margin : 0 0 $spacer--medium !default;
$product-view__summary-list-font-size : $font-size-medium !default;
$product-view__summary-list-item-title-font-weight : $font-weight-medium !default;
$product-view__summary-list-item-title-text-transform : uppercase !default;
$product-view__summary-list-item-value-color : $gray-dark !default;
$product-view__summary-price-margin : 0 0 $spacer--medium !default;
$product-view__summary-price-font-size : $font-size-extra-large !default;
$product-view__summary-price-font-weight : $font-weight-bold !default;
$product-view__summary-unit-padding : 0 0 0 $spacer--extra-small !default;
$product-view__summary-unit-font-size : $font-size-extra-large !default;
// custamization
$product-view__customization-border : $border-base !default;
$product-view__customization-border-width : 0 0 1px !default;
$product-view__customization-padding : 0 0 $spacer--medium !default;
$product-view__customization-margin : 0 0 $spacer !default;
// tabs
$product-view__tabs-margin : 0 auto !default;
$product-view__tabs-margin\@medium : 64px auto 0 !default;
$product-view__tabs-padding\@medium : 0 $spacer--semi-medium !default;
$product-view__tabs-padding\@large : 0 !default;
$product-view__tabs-title-height : 56px !default;
$product-view__tabs-title-padding : 0 0 0 $spacer !default;
$product-view__tabs-title-padding\@medium : 0 0 0 $spacer--semi-medium !default;
$product-view__tabs-title-padding\@large : 0 !default;
$product-view__tabs-title-text-align : left !default;
$product-view__tabs-title-text-align\@large : center !default;
$product-view__tabs-sticky-bg : $white !default;
$product-view__tabs-sticky-border : $border-base !default;
$product-view__tabs-sticky-border-width : 0 0 $border-width-base 0 !default;
$product-view__tabs-sticky-shadow : $shadow !default;
$product-view__tabs-sticky-show-mq : $screen-m !default;
$product-view__tabs-sticky-max-width : $product-view__max-width\@large !default;
$product-view__tabs-sticky-margin : 0 auto !default;
$product-view__tabs-sticky-z-index : $z-index-high !default;
$product-view__tabs-sticky-label-height : 48px !default;
$product-view__tabs-sticky-label-border-width : 0 !default;
$product-view__tabs-sticky-label-decoration : none !default;
// product slider
$product-view__slider-margin : $spacer--extra-large 0 !default;
// grouped table
$product-view__grouped-table-margin : 0 0 $spacer--medium !default;
$product-view__grouped-table-border-width : 0 !default;
$product-view__grouped-cell-border-right : 0 !default;
$product-view__grouped-th-padding : $spacer 0 !default;
$product-view__grouped-th-font-size : $font-size-base !default;
$product-view__grouped-th-font-weight : $font-weight-base !default;
$product-view__grouped-th-bg-color : $white !default;
$product-view__grouped-th-align : right !default;
$product-view__grouped-th-align\@medium : left !default;
$product-view__grouped-td-padding : $spacer--medium 0 !default;
$product-view__grouped-td-vertical-align : top !default;
$product-view__grouped-td-qty-padding : 0 0 0 $spacer--medium !default;
$product-view__grouped-td-name-font-weight : $font-weight-medium !default;
$product-view__grouped-td-name-margin\@medium : 0 0 $spacer 0 !default;
$product-view__grouped-qty-field-max-width : 112px !default;
$product-view__grouped-qty-field-border-color : $gray !default;
$product-view__grouped-qty-field-align : center !default;
// sticky EE version
$product-view__add-to-cart-ee-wrapper-padding : $spacer--small $spacer $spacer !default;
$product-view__add-to-cart-ee-wrapper-padding\@medium : $spacer--semi-medium $spacer !default;
$product-view__add-to-cart-ee-wrapper-padding\@large : $spacer--semi-medium $spacer--semi-large !default;
$product-view__add-to-cart-ee-action-bottom : $spacer !default;
$product-view__add-to-cart-ee-action-right : $spacer !default;
$product-view__add-to-cart-ee-price-box-padding : $spacer--small 0 0 !default;
$product-view__add-to-cart-ee-price-box-padding\@large : $spacer--extra-small 0 0 !default;
// recaptcha
$product-view__grecaptcha-badge-bottom : 112px !default;
$product-view__grecaptcha-badge-bottom\@medium : 0 !default;
@import 'product-view-variables';
.product-view {
padding: $product-view__padding;
@include mq($screen-m) {
padding: $product-view__padding\@medium;
}
@include mq($screen-xl) {
padding: $product-view__padding\@xl;
}
&__wrapper {
display: flex;
flex-direction: column;
margin: $product-view__wrapper-margin;
max-width: $product-view__wrapper-max-width;
@include mq($screen-m) {
display: grid;
grid-template-columns: $product-view__wrapper-grid-template-columns\@medium;
grid-template-rows: $product-view__wrapper-grid-template-rows\@medium;
column-gap: $product-view__column-gap\@medium;
}
@include mq($screen-l) {
column-gap: $product-view__column-gap\@large;
}
@include mq($screen-xl) {
column-gap: $product-view__column-gap\@xl;
}
}
&__description,
&__details {
position: relative;
@include mq($screen-m) {
grid-column-start: $product-view__details-desc-grid-column-start\@medium;
width: $product-view__details-desc-width\@medium;
}
@include mq($screen-l) {
width: $product-view__details-desc-width\@large;
}
@include mq($screen-xl) {
width: $product-view__details-desc-width\@xl;
}
}
&__description {
order: $product-view__desc-order;
}
&__details {
order: $product-view__details-order;
@include mq($screen-m) {
grid-row-start: $product-view__details-grid-row-start\@medium;
}
}
&__gallery {
position: relative;
margin: $product-view__gallery-margin;
order: $product-view__gallery-order;
@include mq($screen-m) {
grid-column-start: $product-view__gallery-grid-column-start\@medium;
grid-row-start: $product-view__gallery-grid-row-start\@medium;
grid-row-end: $product-view__gallery-grid-row-end\@medium;
}
}
&__badges {
z-index: $product-view__badges-z-index;
top: $product-view__badges-top;
left: $product-view__badges-left;
@include mq($screen-m) {
top: $product-view__badges-top\@medium;
left: $product-view__badges-left\@medium;
}
@include mq($screen-l) {
top: $product-view__badges-top\@large;
left: $product-view__badges-left\@large;
}
@include mq($screen-xl) {
left: $product-view__badges-left\@xl;
}
}
&__title {
&.heading--page {
margin: $product-view__title-margin;
text-transform: $product-view__title-text-transform;
font-size: $product-view__title-font-size;
@include mq($screen-m) {
font-size: $product-view__title-font-size\@medium;
}
@include mq($screen-l) {
font-size: $product-view__title-font-size\@large;
}
}
}
&__sku {
display: $product-view__sku-display;
font-weight: $product-view__sku-font-weight;
color: $product-view__sku-color;
@include mq($screen-m) {
display: block;
}
}
&__stock {
min-width: $product-view__stock-min-width;
min-height: $product-view__stock-min-height;
padding: $product-view__stock-padding;
font-weight: $product-view__stock-font-weight;
white-space: $product-view__stock-white-space;
font-size: $product-view__stock-font-size;
color: $product-view__stock-color;
text-transform: $product-view__stock-text-transform;
text-decoration: $product-view__stock-text-decoration;
&:before,
&:after {
display: none;
}
&:hover {
color: $product-view__stock-color-hover;
text-decoration: $product-view__stock-text-decoration-hover;
}
@include mq($screen-m) {
font-size: $product-view__stock-font-size\@medium;
}
}
&__rating {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: $product-view__rating-padding;
border: $product-view__rating-border;
border-width: $product-view__rating-border-width;
}
&__price {
display: $product-view__price-display;
padding: $product-view__price-padding;
@include mq($product-view__price-display-mq) {
display: $product-view__price-display\@display-mq;
.price__value,
.price__value--special {
font-size: $font-size-extra-large;
}
.price__value--old {
font-size: $font-size-large;
}
}
}
.price--between {
display: $product-view__price-display--between;
flex-direction: $product-view__price-flex-direction--between;
line-height: $product-view__price-line-height--between;
.price__text {
display: $product-view__price-text-display--between;
min-width: $product-view__price-text-min-width--between;
}
}
&__short-description-heading {
font-family: $product-view__short-description-heading-font-family;
font-size: $product-view__short-description-heading-font-size;
font-weight: $product-view__short-description-heading-font-weight;
color: $product-view__short-description-heading-color;
text-transform: $product-view__short-description-heading-text-transform;
}
&__buttons-wrapper {
&--ee {
.product-view__extra-actions {
display: flex;
}
.product-view__update-wishlist {
order: 4;
}
.towishlist {
display: none;
}
}
}
&__buttons {
display: flex;
width: 100%;
align-items: flex-end;
flex-wrap: wrap;
.dropdown-list__label {
&.button--icon-filled {
&:after {
@include mq($screen-m) {
left: $product-view__dropdown-wishlist-button-after-left;
}
}
}
}
.paypal {
margin: 0 $spacer--medium 0 0;
}
}
&__extra-actions {
display: none;
align-items: center;
justify-content: space-between;
width: $product-view__extra-actions-width;
@include mq($screen-m) {
display: flex;
width: $product-view__extra-actions-width\@medium;
}
}
&__button {
width: $product-view__button-width;
background-color: $product-view__button-bg;
order: 2;
@include mq($screen-m) {
margin: $product-view__button-margin\@medium;
width: $product-view__button-width\@medium;
min-width: $product-view__button-min-size;
min-height: $product-view__button-min-size;
}
.button__text {
@include mq($screen-m) {
display: none;
}
}
&--wishlist {
&.button--icon-filled {
background-color: $product-view__button-bg;
.icon {
fill: $color-primary;
}
&:after {
display: block;
background-position: 0 100%;
}
&:hover {
&:before {
background-color: $product-view__button-wishlist-filled-bg-color-hover;
}
&:after {
display: block;
background-image: $product-view__button-wishlist-filled-bg-image-after-hover;
}
.icon {
fill: $white;
}
}
}
}
}
&__extra-actions {
order: $product-view__extra-actions-order;
}
&__addtowishlist {
display: none;
width: $product-view__button-wishlist-width;
min-height: $product-view__button-wishlist-min-height;
min-width: $product-view__button-wishlist-min-width;
background-color: $product-view__button-wishlist-background-color;
order: $product-view__update-wishlist-order;
@include mq($screen-m) {
display: flex;
width: $product-view__button-wishlist-width\@medium;
margin: $product-view__button-wishlist-margin\@medium;
}
.button__text {
display: none;
}
&--update {
display: flex;
.button__text {
display: inline-block;
}
}
}
&__update-wishlist {
width: $product-view__update-wishlist-width;
height: $product-view__update-wishlist-height;
margin: $product-view__update-wishlist-margin;
order: $product-view__update-wishlist-order;
@include mq($screen-m) {
margin: $product-view__update-wishlist-margin\@medium;
}
}
&__requisition,
&__multiwishlist {
width: $product-view__dropdown-wishlist-width;
margin: $product-view__dropdown-wishlist-margin;
@include mq($screen-m) {
margin: $product-view__dropdown-wishlist-margin\@medium;
}
.button {
width: $product-view__dropdown-wishlist-button-width;
}
.dropdown-list {
&__label {
justify-content: flex-start;
@include mq($screen-m) {
justify-content: center;
}
}
&__content {
@include mq($screen-m) {
min-width: $product-view__dropdown-wishlist-content-min-width\@medium;
}
@include mq($screen-l) {
min-width: $product-view__dropdown-wishlist-content-min-width\@large;
}
}
}
}
&__requisition {
order: $product-view__requistion-dropdown-order;
@include mq($screen-m) {
width: $product-view__requistion-dropdown-width\@medium;
}
@include mq($screen-l) {
width: $product-view__requistion-dropdown-width\@large;
}
.dropdown-list {
&__content {
right: $product-view__requistion-dropdown-content-right;
left: auto;
}
}
}
&__update-requisition-list {
display: flex;
height: $product-view__update-requisition-list-height;
width: $product-view__update-requisition-list-width;
margin: $product-view__update-requisition-list-margin;
.button {
width: $product-view__update-requisition-list-button-width;
}
}
&__multiwishlist {
order: $product-view__multiwishlist-dropdown-order;
@include mq($screen-m) {
width: $product-view__multiwishlist-dropdown-width\@medium;
}
@include mq($screen-l) {
width: $product-view__multiwishlist-dropdown-width\@large;
}
.dropdown-list {
&__item {
@include mq($screen-l) {
padding: $product-view__multiwishlist-dropdown-item-padding\@large;
}
}
}
}
&__add-to-cart,
&__update-cart {
display: $product-view__add-to-cart;
order: $product-view__order;
flex-grow: $product-view__flex-grow;
height: $product-view__add-to-cart-height;
padding: $product-view__add-to-cart-padding;
@include mq($product-view__buttons-mq-display) {
display: $product-view__add-to-cart\@buttons-mq-display;
}
}
&__select-option {
.select__field-list--single,
.select__field-item {
height: $product-view__select-option-height;
line-height: $product-view__select-option-height;
}
}
&__options {
margin: $product-view__options-margin;
}
&__qty {
margin: $product-view__qty-margin;
}
&__stock-status {
margin: $product-view__stock-status-margin;
@include mq($screen-m) {
margin: $product-view__stock-status-margin\@medium;
}
}
&__brief {
margin: $product-view__brief-margin;
@include mq($screen-m) {
margin: $product-view__brief-margin\@medium;
}
.brief-info {
display: block;
&__title {
text-transform: $product-view__brief-title-text-transform;
font-weight: $product-view__brief-title-font-weight;
font-size: $product-view__brief-title-font-size;
}
&__subtitle {
font-size: $product-view__brief-subtitle-font-size;
text-transform: none;
}
&__item {
margin: $product-view__brief-item-margin;
}
}
}
&__form {
padding: $product-view__form-padding;
border: $product-view__form-border;
border-width: $product-view__form-border-width;
}
&__summary {
width: $product-view__summary-width;
padding: $product-view__summary-padding;
margin: $product-view__summary-margin;
font-size: $font-size-medium;
@include mq($screen-m) {
margin: $product-view__summary-margin\@medium;
}
}
&__summary-price {
display: flex;
align-items: center;
margin: $product-view__summary-price-margin;
font-weight: $product-view__summary-price-font-weight;
.price__value {
font-size: $product-view__summary-price-font-size;
}
}
&__summary-unit {
padding: $product-view__summary-unit-padding;
font-size: $product-view__summary-unit-font-size;
}
&__summary-list {
font-size: $product-view__summary-list-font-size;
}
&__summary-title {
margin: $product-view__summary-title-margin;
font-family: $product-view__summary-title-font-family;
font-size: $product-view__summary-title-font-size;
font-weight: $product-view__summary-title-font-weight;
text-transform: $product-view__summary-title-text-transform;
}
&__summary-item-title {
display: block;
font-weight: $product-view__summary-list-item-title-font-weight;
text-transform: $product-view__summary-list-item-title-text-transform;
}
&__summary-item-value {
color: $product-view__summary-list-item-value-color;
}
&__customization {
border: $product-view__customization-border;
border-width: $product-view__customization-border-width;
padding: $product-view__customization-padding;
margin: $product-view__customization-margin;
}
// grouped product, overwrite default table styles
&__grouped-table {
margin: $product-view__grouped-table-margin;
border-width: $product-view__grouped-table-border-width;
& th,
& td {
border-right: $product-view__grouped-cell-border-right;
justify-content: flex-end;
&.product-view__grouped-product-name-cell {
justify-content: space-between;
@include mq($screen-m) {
display: table-cell;
}
&:before {
display: none;
}
}
}
& th,
& td:before {
padding: $product-view__grouped-th-padding;
font-size: $product-view__grouped-th-font-size;
font-weight: $product-view__grouped-th-font-weight;
background-color: $product-view__grouped-th-bg-color;
text-align: $product-view__grouped-th-align;
@include mq($screen-m) {
text-align: $product-view__grouped-th-align\@medium;
}
}
& td {
padding: $product-view__grouped-td-padding;
vertical-align: $product-view__grouped-td-vertical-align;
}
}
&__grouped-product-qty-td {
padding-left: $product-view__grouped-td-qty-padding;
}
&__grouped-product-name {
display: block;
font-weight: $product-view__grouped-td-name-font-weight;
@include mq($screen-m) {
margin: $product-view__grouped-td-name-margin\@medium;
}
}
&__grouped-qty {
max-width: $product-view__grouped-qty-field-max-width;
.input__field {
text-align: $product-view__grouped-qty-field-align;
border-color: $product-view__grouped-qty-field-border-color;
}
}
// tabs
&__tabs {
max-width: $product-view__wrapper-max-width;
margin: $product-view__tabs-margin;
@include mq($screen-m) {
margin: $product-view__tabs-margin\@medium;
padding: $product-view__tabs-padding\@medium;
}
@include mq($screen-l) {
padding: $product-view__tabs-padding\@large;
}
.tab__title {
height: $product-view__tabs-title-height;
padding: $product-view__tabs-title-padding;
text-align: $product-view__tabs-title-text-align;
@include mq($screen-m) {
padding: $product-view__tabs-title-padding\@medium;
}
@include mq($screen-l) {
text-align: $product-view__tabs-title-text-align\@large;
padding: $product-view__tabs-title-padding\@large;
}
}
}
&__tabs-sticky-wrap {
display: none;
@include mq($product-view__tabs-sticky-show-mq) {
display: block;
position: fixed;
visibility: hidden;
top: 0;
width: 100vw;
left: 50vw;
right: auto;
margin-left: -50vw;
margin-right: auto;
background-color: $product-view__tabs-sticky-bg;
border: $product-view__tabs-sticky-border;
border-width: $product-view__tabs-sticky-border-width;
box-shadow: $product-view__tabs-sticky-shadow;
z-index: $product-view__tabs-sticky-z-index;
&.aos-animate {
visibility: visible;
}
}
}
&__tabs-sticky {
display: flex;
flex-flow: row nowrap;
justify-content: center;
width: 100%;
max-width: $product-view__tabs-sticky-max-width;
margin: $product-view__tabs-sticky-margin;
.tab__title--sticky {
display: flex;
justify-content: center;
align-items: center;
height: $product-view__tabs-sticky-label-height;
border-width: $product-view__tabs-sticky-label-border-width;
text-decoration: $product-view__tabs-sticky-label-decoration;
}
}
&__table {
.table {
td {
@include mq($screen-m) {
text-align: right;
}
}
}
}
// styles for related / upsells
.slider--products {
margin: $product-view__slider-margin;
}
// styles for addtocart-sticky EE version
.add-to-cart--ee {
.add-to-cart__wrapper {
padding: $product-view__add-to-cart-ee-wrapper-padding;
@include mq($screen-m) {
padding: $product-view__add-to-cart-ee-wrapper-padding\@medium;
}
@include mq($screen-l) {
padding: $product-view__add-to-cart-ee-wrapper-padding\@large;
}
}
.add-to-cart__action {
position: absolute;
bottom: $product-view__add-to-cart-ee-action-bottom;
right: $product-view__add-to-cart-ee-action-right;
@include mq($screen-m) {
position: static;
}
}
.price-box {
display: flex;
flex-direction: column;
padding: $product-view__add-to-cart-ee-price-box-padding;
@include mq($screen-m) {
flex-direction: row;
align-items: center;
}
@include mq($screen-l) {
padding: $product-view__add-to-cart-ee-price-box-padding\@large;
}
}
}
}
.catalog-product-view {
.product-view {
&__buttons-wrapper {
&--ee {
.product-view__update-wishlist {
display: none;
}
.dropdown-list__icon {
margin: 0;
}
}
}
}
&.wishlist-index-configure {
.product-view {
&__buttons-wrapper {
&--ee {
.product-view__update-wishlist {
display: flex;
}
}
}
}
}
.grecaptcha-badge {
// sass-lint:disable-block no-important
bottom: $product-view__grecaptcha-badge-bottom !important;
@include mq($screen-m) {
bottom: $product-view__grecaptcha-badge-bottom\@medium !important;
}
}
}
'use strict';
class SelectAll {
constructor(wrapper) {
this.linkElement = wrapper.querySelectorAll('input[value]');
this.allElements = wrapper.querySelector('#links-all');
this.allElementsLabel = wrapper.querySelector('label[for="links-all"] .checkbox__text');
this.checkedText = this.allElements.getAttribute('data-checked');
this.notCheckedText = this.allElements.getAttribute('data-notchecked');
this.createGlobalEventHandlers();
}
reloadAllCheckText() {
let allChecked = true;
this.linkElement.forEach(el => {
if (!el.checked) {
allChecked = false;
}
});
if (allChecked) {
this.allElementsLabel.innerText = this.checkedText;
this.allElements.checked = true;
}
else {
this.allElementsLabel.innerText = this.notCheckedText;
this.allElements.checked = false;
}
}
createGlobalEventHandlers() {
this.linkElement.forEach(el => {
el.addEventListener('change', () => {
this.reloadAllCheckText();
})
})
this.allElements.addEventListener('change', () => {
if (this.allElements.checked) {
this.allElementsLabel.innerText = this.checkedText;
this.linkElement.forEach(el => {
el.checked = true;
});
}
else {
this.allElementsLabel.innerText = this.notCheckedText;
this.linkElement.forEach(el => {
el.checked = false;
});
}
});
}
}
new SelectAll(document.querySelector('#downloadable-links-list'));
No notes defined.