<div class="page-wrapper">
<a href="#maincontent" 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 xlink: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__container container">
<ul class="list contact-bar__list contact-bar__list--icons">
<li class="list-item contact-bar__item">
<a href="#" class="
contact-bar__link
">
<span class="
icon
contact-bar__icon
" aria-label="">
<svg class="icon " role="img">
<use xlink:href="/images/icons-sprite.svg#undefined"></use>
</svg>
</span>
<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="
icon
contact-bar__icon
" aria-label="">
<svg class="icon " role="img">
<use xlink:href="/images/icons-sprite.svg#undefined"></use>
</svg>
</span>
<span class="
button__text
contact-bar__text
">
Klantenservice
</span>
</a>
</li>
<li class="list-item contact-bar__item">
<a href="#" class="
contact-bar__link
">
<span class="
icon
contact-bar__icon
" aria-label="">
<svg class="icon " role="img">
<use xlink:href="/images/icons-sprite.svg#undefined"></use>
</svg>
</span>
<span class="
button__text
contact-bar__text
">
Groothandel
</span>
</a>
</li>
</ul>
<ul class="list contact-bar__list contact-bar__list--icons">
<li class="list-item contact-bar__item">
<a href="tel:+31858772604" class="
contact-bar__link
">
<span class="
icon
contact-bar__icon
" aria-label="">
<svg class="icon " role="img">
<title>Phone</title>
<use xlink:href="/images/icons-sprite.svg#phone"></use>
</svg>
</span>
<span class="
button__text
contact-bar__text
">
T: 085 - 877 26 04
</span>
</a>
</li>
<li class="contact-bar__item">
<a href="mailto:info@dekistenkoning.nl" class="
contact-bar__link
">
<span class="
icon
contact-bar__icon
" aria-label="">
<svg class="icon " role="img">
<title>Email</title>
<use xlink:href="/images/icons-sprite.svg#envelope"></use>
</svg>
</span>
<span class="
button__text
contact-bar__text
">
E-mail
</span>
</a>
</li>
</ul>
</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_nl.png" 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 xlink: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 xlink: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 xlink: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 xlink: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 xlink: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 xlink: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 xlink: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 xlink: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 xlink: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 xlink: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 xlink: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__container ">
<ul class="list contact-bar__list contact-bar__list--icons">
<li class="list-item contact-bar__item">
<a href="#" class="
contact-bar__link
">
<span class="
icon
contact-bar__icon
" aria-label="">
<svg class="icon " role="img">
<use xlink:href="/images/icons-sprite.svg#undefined"></use>
</svg>
</span>
<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="
icon
contact-bar__icon
" aria-label="">
<svg class="icon " role="img">
<use xlink:href="/images/icons-sprite.svg#undefined"></use>
</svg>
</span>
<span class="
button__text
contact-bar__text
">
Klantenservice
</span>
</a>
</li>
<li class="list-item contact-bar__item">
<a href="#" class="
contact-bar__link
">
<span class="
icon
contact-bar__icon
" aria-label="">
<svg class="icon " role="img">
<use xlink:href="/images/icons-sprite.svg#undefined"></use>
</svg>
</span>
<span class="
button__text
contact-bar__text
">
Groothandel
</span>
</a>
</li>
</ul>
<ul class="list contact-bar__list contact-bar__list--icons">
<li class="list-item contact-bar__item">
<a href="tel:+31858772604" class="
contact-bar__link
">
<span class="
icon
contact-bar__icon
" aria-label="">
<svg class="icon " role="img">
<title>Phone</title>
<use xlink:href="/images/icons-sprite.svg#phone"></use>
</svg>
</span>
<span class="
button__text
contact-bar__text
">
T: 085 - 877 26 04
</span>
</a>
</li>
<li class="contact-bar__item">
<a href="mailto:info@dekistenkoning.nl" class="
contact-bar__link
">
<span class="
icon
contact-bar__icon
" aria-label="">
<svg class="icon " role="img">
<title>Email</title>
<use xlink:href="/images/icons-sprite.svg#envelope"></use>
</svg>
</span>
<span class="
button__text
contact-bar__text
">
E-mail
</span>
</a>
</li>
</ul>
</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 xlink: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__buttons">
<div class="header__icon">
<a class="
header-button
button
button--icon
button--icon-light
button--icon-fill margin-right-xs
" href="#" aria-label="Account">
<svg class="icon header-button__icon" role="presentation" focusable="false">
<title>Account</title>
<use xlink:href="/images/icons-sprite.svg#new-user"></use>
</svg>
<span class="header-button__label">Aanmelden</span>
</a>
</div>
<div class="header__icon">
<a class="
header-button
button
button--icon
button--icon-light
button--icon-fill margin-right-xs
" href="#" aria-label="Wishlist">
<svg class="icon header-button__icon" role="presentation" focusable="false">
<title>Heart</title>
<use xlink:href="/images/icons-sprite.svg#new-heart"></use>
</svg>
<span class="header-button__label">Verlanglijstje</span>
</a>
</div>
<div class="header__minicart">
<button type="button" class="
header-button
button
button--icon
button--icon-light
modal-trigger
margin-left-xs
" aria-label="Shopping cart dropdown trigger" data-modal-trigger="modal-minicart">
<svg class="icon header-button__icon" role="presentation" focusable="false">
<title>Winkelwagen</title>
<use xlink:href="/images/icons-sprite.svg#new-cart"></use>
</svg>
<span class="header-button__counter">
<span class="header-button__counter-dot">2</span>
</span>
<span class="header-button__label">Winkelwagen</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 class="input input--inline minicart-product__input margin-bottom-0 margin-right-m">
<label class="
label
input__label
minicart-product__label
" for="mini-qty-1">
Qty:
</label>
<input class="input__field minicart-product__field" id="mini-qty-1" name="mini-qty" type="text" placeholder="32" aria-label="Change the quantity" min="1">
</div>
<button class="button button--secondary minicart-product__update" type="button">
Update
</button>
</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 xlink: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 xlink: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 class="input input--inline minicart-product__input margin-bottom-0 margin-right-m">
<label class="
label
input__label
minicart-product__label
" for="mini-qty-2">
Qty:
</label>
<input class="input__field minicart-product__field" id="mini-qty-2" name="mini-qty" type="text" placeholder="32" aria-label="Change the quantity" min="1">
</div>
<button class="button button--secondary minicart-product__update" type="button">
Update
</button>
</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 xlink: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 xlink: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 xlink: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 border-color-light" id="search" name="search" type="search" placeholder="Zoeken in de winkel...">
</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 xlink: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="/nieuw" class="mega-menu__link">
Nieuw
</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
">
Bekijk alle
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="#" class="
link
mega-menu__inner-link
">
Kisten
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Kisten
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Kisten
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Kisten
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Kisten
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Terug in voorraad
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Trending nu
</a>
</li>
</ul>
</li>
<li class="mega-menu__item mega-menu__item--parent mega-menu__item--rows">
<a href="/fruitkisten" class="mega-menu__link">
Fruitkisten
</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="/meubels" class="mega-menu__link">
Meubels
</a>
</li>
<li class="mega-menu__item ">
<a href="/woonaccessoires" class="mega-menu__link">
Woonaccessoires
</a>
</li>
<li class="mega-menu__item ">
<a href="/partijverkoop" class="mega-menu__link">
Partijverkoop
</a>
</li>
<li class="mega-menu__item mega-menu__item--parent mega-menu__item--rows">
<a href="/maatwerk" class="mega-menu__link">
Maatwerk
</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">
Inspiratie
</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="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="tiling--slider">
<div class="tiling--item">
<div class="tiling--item__info">
<a href="#" class="tiling--item__photo">
<span class="tiling--image__container">
<picture class="image cart-list-item__image">
<img class="lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/category/kerst-fruitkisten.jpg" alt="" />
</picture>
</span>
</a>
<div class="tiling--item__details">
<strong class="tiling--item__name">
<a class="tiling--item__link" href="#">Kerst Fruitkisten</a>
</strong>
</div>
</div>
</div>
<div class="tiling--item">
<div class="tiling--item__info">
<a href="#" class="tiling--item__photo">
<span class="tiling--image__container">
<picture class="image cart-list-item__image">
<img class="lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/category/kerst-fruitkisten.jpg" alt="" />
</picture>
</span>
</a>
<div class="tiling--item__details">
<strong class="tiling--item__name">
<a class="tiling--item__link" href="#">Kerst Fruitkisten</a>
</strong>
</div>
</div>
</div>
<div class="tiling--item">
<div class="tiling--item__info">
<a href="#" class="tiling--item__photo">
<span class="tiling--image__container">
<picture class="image cart-list-item__image">
<img class="lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/category/kerst-fruitkisten.jpg" alt="" />
</picture>
</span>
</a>
<div class="tiling--item__details">
<strong class="tiling--item__name">
<a class="tiling--item__link" href="#">Kerst Fruitkisten</a>
</strong>
</div>
</div>
</div>
<div class="tiling--item">
<div class="tiling--item__info">
<a href="#" class="tiling--item__photo">
<span class="tiling--image__container">
<picture class="image cart-list-item__image">
<img class="lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/category/kerst-fruitkisten.jpg" alt="" />
</picture>
</span>
</a>
<div class="tiling--item__details">
<strong class="tiling--item__name">
<a class="tiling--item__link" href="#">Kerst Fruitkisten</a>
</strong>
</div>
</div>
</div>
<div class="tiling--item">
<div class="tiling--item__info">
<a href="#" class="tiling--item__photo">
<span class="tiling--image__container">
<picture class="image cart-list-item__image">
<img class="lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/category/kerst-fruitkisten.jpg" alt="" />
</picture>
</span>
</a>
<div class="tiling--item__details">
<strong class="tiling--item__name">
<a class="tiling--item__link" href="#">Kerst Fruitkisten</a>
</strong>
</div>
</div>
</div>
</div>
<div class="catalog-list">
<div class="catalog-list__sidebar">
<div class="filters">
<div class="active-filters ">
<h2 class="active-filters__heading">
Now Shopping by
</h2>
<ul class="list">
<li class="active-filters__item list__item ">
<a href="#" class="active-filters__remove button button--icon" aria-label="Disable filter: Label - Value" title="Disable filter: Label - Value">
<svg class="icon " role="presentation" focusable="false">
<title>Close</title>
<use xlink:href="/images/icons-sprite.svg#close"></use>
</svg>
</a>
<div class="active-filters__description">
<span class="active-filters__label">
label name:
</span>
<span class="active-filters__value">
some value
</span>
</div>
</li>
<li class="active-filters__item list__item ">
<a href="#" class="active-filters__remove button button--icon" aria-label="Disable filter: Label - Value" title="Disable filter: Label - Value">
<svg class="icon " role="presentation" focusable="false">
<title>Close</title>
<use xlink:href="/images/icons-sprite.svg#close"></use>
</svg>
</a>
<div class="active-filters__description">
<span class="active-filters__label">
label text which is long:
</span>
<span class="active-filters__value">
another value little bit longer
</span>
</div>
</li>
<li class="active-filters__item list__item ">
<a href="#" class="active-filters__remove button button--icon" aria-label="Disable filter: Label - Value" title="Disable filter: Label - Value">
<svg class="icon " role="presentation" focusable="false">
<title>Close</title>
<use xlink:href="/images/icons-sprite.svg#close"></use>
</svg>
</a>
<div class="active-filters__description">
<span class="active-filters__label">
short label:
</span>
<span class="active-filters__value">
Not so short value text with some numbers 123123
</span>
</div>
</li>
</ul>
<a href="#" class="active-filters__clear-all button button--fluid button--secondary margin-top-l" title="Clear all filters">
Clear All
</a>
</div>
<div class="filters__item">
<button class="button button--icon button--icon-light modal-trigger filters__trigger" type="button" aria-label="Open categories filter" data-modal-trigger="filters-category" aria-expanded="true">
<span class="button__text ">
Category
</span>
<svg class="icon " role="presentation" focusable="false">
<use xlink:href="/images/icons-sprite.svg#angle-right"></use>
</svg>
</button>
<div role="dialog" aria-hidden="true" id="filters-category" data-modal="filters-category" class="modal filters__modal modal--tertiary" aria-lebelledby="filters-categories-title">
<div role="document" class="modal__container filters__container" tabindex="0">
<div class="modal__content filters__content">
<div class="modal__top filters__content-top">
<h2 class="modal__heading filters__heading" id="filters-categories-title">
Category
</h2>
</div>
<div class="modal__middle filters__content-middle">
<div class="filter filter--category ">
<ul class="list categories-list">
<li class="list__item categories-list__item">
<a href="#" class="
link
categories-list__link
" aria-current="true">
New In
</a>
</li>
<li class="list__item categories-list__item">
<a href="#" class="
link
categories-list__link
">
Boots
</a>
</li>
<li class="list__item categories-list__item">
<a href="#" class="
link
categories-list__link
">
Flat sandals
</a>
</li>
<li class="list__item categories-list__item">
<a href="#" class="
link
categories-list__link
">
Flat shoes
</a>
</li>
<li class="list__item categories-list__item">
<a href="#" class="
link
categories-list__link
">
Heels
</a>
</li>
<li class="list__item categories-list__item">
<a href="#" class="
link
categories-list__link
">
Loafers
</a>
</li>
<li class="list__item categories-list__item">
<a href="#" class="
link
categories-list__link
">
Sandals
</a>
</li>
<li class="list__item categories-list__item">
<a href="#" class="
link
categories-list__link
">
Sliders & Flip Flops
</a>
</li>
<li class="list__item categories-list__item">
<a href="#" class="
link
categories-list__link
">
Socks & Tights
</a>
</li>
<li class="list__item categories-list__item">
<a href="#" class="
link
categories-list__link
">
Trainers
</a>
</li>
</ul>
</div>
</div>
</div>
<button class="button button--icon button--rotate-icon filters__close-button modal__close-button" type="button" aria-label="Close filters modal">
<svg class="icon button__icon modal__close-button-icon" role="presentation" focusable="false">
<title>Close</title>
<use xlink:href="/images/icons-sprite.svg#close"></use>
</svg>
</button>
</div>
</div>
<script type="text/javascript">
new Modal(document.querySelector('[data-modal-trigger="filters-category"]'));
</script>
</div>
<div class="filters__item">
<button class="button button--icon button--icon-light modal-trigger filters__trigger filters__trigger--open" type="button" aria-label="Open shopping options" data-modal-trigger="filters-options" aria-expanded="true">
<span class="button__text ">
Shopping Options
</span>
<svg class="icon " role="presentation" focusable="false">
<use xlink:href="/images/icons-sprite.svg#angle-right"></use>
</svg>
</button>
<div role="dialog" aria-hidden="true" id="filters-options" data-modal="filters-options" class="modal filters__modal modal--tertiary" aria-lebelledby="filters-option-title">
<div role="document" class="modal__container filters__container" tabindex="0">
<div class="modal__content filters__content">
<div class="modal__top filters__content-top">
<h2 class="modal__heading filters__heading" id="filters-option-title">
Shopping options
</h2>
</div>
<div class="modal__middle filters__content-middle">
<div class="dropdown-list filters__dropdown" id="test-id">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
dropdown-list__item--collapse
filter
filter--checkbox
">
<div class="dropdown-list__label-wrapper filter__label-wrapper">
<button type="button" class="dropdown-list__label" aria-controls="color" aria-expanded="true">
<h3 class="filter__heading">
Color
</h3>
<svg class="icon dropdown-list__icon" role="presentation" focusable="false">
<title>Arrow down</title>
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</button>
</div>
<div id="color" class="dropdown-list__content filter__content " aria-hidden="false">
<div class="more-info">
<button class="button button--icon button--fluid more-info__trigger" type="button" aria-expanded="false">
<span class="button__text ">
More information
</span>
<svg class="icon button__icon" role="presentation" focusable="false">
<title>Show tooltip</title>
<use xlink:href="/images/icons-sprite.svg#info"></use>
</svg>
</button>
<div class="more-info__content-wrapper" aria-hidden="true">
<div class="more-info__content">
<h3 class="more-info__heading">
Example title
</h3>
<div class="more-info__data">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam venenatis nisl quis imperdiet tincidunt. Nulla massa diam, aliquet vitae laoreet a, fermentum eu velit. Quisque ornare erat in orci hendrerit feugiat at sit amet neque. Fusce elementum semper feugiat. Curabitur egestas neque in leo finibus ultricies.
</div>
<button class="button button--icon button--rotate-icon more-info__close" type="button" aria-label="Close more info">
<svg class="icon " role="presentation" focusable="false">
<title>Close more information</title>
<use xlink:href="/images/icons-sprite.svg#close"></use>
</svg>
</button>
</div>
</div>
</div>
<ul class="list filter__list">
<li class="filter__color-item">
<a href='#' class="filter__color-option filter__color-option--active">
<div class="filter__color-sample" style="background: #000"></div>
<span class="filter__color-label">
Black
</span>
</a>
</li>
<li class="filter__color-item">
<a href='#' class="filter__color-option filter__color-option">
<div class="filter__color-sample" style="background: red"></div>
<span class="filter__color-label">
Red
</span>
</a>
</li>
<li class="filter__color-item">
<a href='#' class="filter__color-option filter__color-option">
<div class="filter__color-sample" style="background: #5cb85c"></div>
<span class="filter__color-label">
Green
</span>
</a>
</li>
<li class="filter__color-item">
<a href='#' class="filter__color-option filter__color-option">
<div class="filter__color-sample" style="background: #0275d8"></div>
<span class="filter__color-label">
Blue
</span>
</a>
</li>
</ul>
</div>
</li>
<li class="
dropdown-list__item
dropdown-list__item--collapse
filter
filter--checkbox
">
<div class="dropdown-list__label-wrapper filter__label-wrapper">
<button type="button" class="dropdown-list__label filter__label" aria-controls="swatch" aria-expanded="true">
<h3 class="filter__heading">
Swatch
</h3>
<svg class="icon dropdown-list__icon" role="presentation" focusable="false">
<title>Arrow down</title>
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</button>
</div>
<div id="swatch" class="dropdown-list__content filter__content " aria-hidden="false">
<div class="more-info">
<button class="button button--icon button--fluid more-info__trigger" type="button" aria-expanded="false">
<span class="button__text ">
More information
</span>
<svg class="icon button__icon" role="presentation" focusable="false">
<title>Show tooltip</title>
<use xlink:href="/images/icons-sprite.svg#info"></use>
</svg>
</button>
<div class="more-info__content-wrapper" aria-hidden="true">
<div class="more-info__content">
<h3 class="more-info__heading">
Example title
</h3>
<div class="more-info__data">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam venenatis nisl quis imperdiet tincidunt. Nulla massa diam, aliquet vitae laoreet a, fermentum eu velit. Quisque ornare erat in orci hendrerit feugiat at sit amet neque. Fusce elementum semper feugiat. Curabitur egestas neque in leo finibus ultricies.
</div>
<button class="button button--icon button--rotate-icon more-info__close" type="button" aria-label="Close more info">
<svg class="icon " role="presentation" focusable="false">
<title>Close more information</title>
<use xlink:href="/images/icons-sprite.svg#close"></use>
</svg>
</button>
</div>
</div>
</div>
<ul class="list filter__list">
<li class="filter__swatch-item">
<a href="#" class="filter__swatch-option ">
XS
</a>
</li>
<li class="filter__swatch-item">
<a href="#" class="filter__swatch-option filter__swatch-option--active">
S
</a>
</li>
<li class="filter__swatch-item">
<a href="#" class="filter__swatch-option ">
M
</a>
</li>
<li class="filter__swatch-item">
<a href="#" class="filter__swatch-option ">
L
</a>
</li>
<li class="filter__swatch-item">
<a href="#" class="filter__swatch-option ">
XL
</a>
</li>
</ul>
</div>
</li>
<li class="
dropdown-list__item
dropdown-list__item--collapse
filter
filter--checkbox
">
<div class="dropdown-list__label-wrapper filter__label-wrapper">
<button type="button" class="dropdown-list__label" aria-controls="checkbox" aria-expanded="false">
<h3 class="filter__heading">
Filters
</h3>
<svg class="icon dropdown-list__icon" role="presentation" focusable="false">
<title>Arrow down</title>
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</button>
</div>
<div id="checkbox" class="dropdown-list__content filter__content " aria-hidden="true">
<div class="more-info">
<button class="button button--icon button--fluid more-info__trigger" type="button" aria-expanded="false">
<span class="button__text ">
More information
</span>
<svg class="icon button__icon" role="presentation" focusable="false">
<title>Show tooltip</title>
<use xlink:href="/images/icons-sprite.svg#info"></use>
</svg>
</button>
<div class="more-info__content-wrapper" aria-hidden="true">
<div class="more-info__content">
<h3 class="more-info__heading">
Example title
</h3>
<div class="more-info__data">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam venenatis nisl quis imperdiet tincidunt. Nulla massa diam, aliquet vitae laoreet a, fermentum eu velit. Quisque ornare erat in orci hendrerit feugiat at sit amet neque. Fusce elementum semper feugiat. Curabitur egestas neque in leo finibus ultricies.
</div>
<button class="button button--icon button--rotate-icon more-info__close" type="button" aria-label="Close more info">
<svg class="icon " role="presentation" focusable="false">
<title>Close more information</title>
<use xlink:href="/images/icons-sprite.svg#close"></use>
</svg>
</button>
</div>
</div>
</div>
<ul class="list">
<li>
<a href="#" class="checkbox checkbox--link ">
<svg class="
checkbox__icon
checkbox__icon--checked
" role="presentation">
<use xlink:href="/images/icons-sprite.svg#checked"></use>
</svg>
<svg class="
checkbox__icon
checkbox__icon--unchecked
" role="presentation">
<use xlink:href="/images/icons-sprite.svg#unchecked"></use>
</svg>
<span class="checkbox__label">
Value 1
</span>
</a>
</li>
<li>
<a href="#" class="checkbox checkbox--link checkbox--link-checked">
<svg class="
checkbox__icon
checkbox__icon--checked
" role="presentation">
<use xlink:href="/images/icons-sprite.svg#checked"></use>
</svg>
<svg class="
checkbox__icon
checkbox__icon--unchecked
" role="presentation">
<use xlink:href="/images/icons-sprite.svg#unchecked"></use>
</svg>
<span class="checkbox__label">
Value 2
</span>
</a>
</li>
<li>
<a href="#" class="checkbox checkbox--link ">
<svg class="
checkbox__icon
checkbox__icon--checked
" role="presentation">
<use xlink:href="/images/icons-sprite.svg#checked"></use>
</svg>
<svg class="
checkbox__icon
checkbox__icon--unchecked
" role="presentation">
<use xlink:href="/images/icons-sprite.svg#unchecked"></use>
</svg>
<span class="checkbox__label">
Value 3
</span>
</a>
</li>
</ul>
</div>
</li>
<li class="
dropdown-list__item
dropdown-list__item--collapse
filter
filter--range
">
<div class="dropdown-list__label-wrapper filter__label-wrapper">
<button type="button" class="dropdown-list__label" aria-controls="range" aria-expanded="false">
<h3 class="filter__heading">
Range
</h3>
<svg class="icon dropdown-list__icon" role="presentation" focusable="false">
<title>Arrow down</title>
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</button>
</div>
<div id="range" class="dropdown-list__content filter__content " aria-hidden="true">
<div class="more-info">
<button class="button button--icon button--fluid more-info__trigger" type="button" aria-expanded="false">
<span class="button__text ">
More information
</span>
<svg class="icon button__icon" role="presentation" focusable="false">
<title>Show tooltip</title>
<use xlink:href="/images/icons-sprite.svg#info"></use>
</svg>
</button>
<div class="more-info__content-wrapper" aria-hidden="true">
<div class="more-info__content">
<h3 class="more-info__heading">
Example title
</h3>
<div class="more-info__data">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam venenatis nisl quis imperdiet tincidunt. Nulla massa diam, aliquet vitae laoreet a, fermentum eu velit. Quisque ornare erat in orci hendrerit feugiat at sit amet neque. Fusce elementum semper feugiat. Curabitur egestas neque in leo finibus ultricies.
</div>
<button class="button button--icon button--rotate-icon more-info__close" type="button" aria-label="Close more info">
<svg class="icon " role="presentation" focusable="false">
<title>Close more information</title>
<use xlink:href="/images/icons-sprite.svg#close"></use>
</svg>
</button>
</div>
</div>
</div>
<div class="range-filter ">
<div class="range-filter__slider " data-min="0" data-max="1000" data-show-float="0"></div>
<div class="range-filter__inputs-wrapper ">
<div class="input range-filter__input range-filter__input--lower">
<label class="
label
input__label
range-filter__label
" for="range-filter-min">
Minimum value
</label>
<input class="input__field range-filter__field range-filter__field--lower" id="range-filter-min" name="range-filter-min" type="" placeholder="">
</div>
<span class="range-filter__suffix ">
$
</span>
<span class="range-filter__dash">-</span>
<div class="input range-filter__input range-filter__input--upper">
<label class="
label
input__label
range-filter__label
" for="range-filter-max">
Maximum value
</label>
<input class="input__field range-filter__field range-filter__field--upper" id="range-filter-max" name="range-filter-max" type="" placeholder="">
</div>
<span class="range-filter__suffix ">
$
</span>
</div>
</div>
<button class="button range-filter__button button--fluid margin-vc-sm" type="button" data-min="0" data-max="1000" data-attribute="price" href="#" data-filter-url="#">
Apply
</button>
<script src="/components/raw/range/range.js"></script>
</div>
</li>
</ul>
</div>
<script type="text/javascript">
new DropdownList(document.getElementById('test-id'));
</script>
</div>
</div>
<button class="button button--icon button--rotate-icon modal__close-button filters__close-button" type="button" aria-label="Close filters modal">
<svg class="icon button__icon modal__close-button-icon" role="presentation" focusable="false">
<title>Close</title>
<use xlink:href="/images/icons-sprite.svg#close"></use>
</svg>
</button>
</div>
</div>
<script type="text/javascript">
new Modal(document.querySelector('[data-modal-trigger="filters-options"]'));
</script>
</div>
</div>
</div>
<div class="catalog-list__products">
<div class="toolbar ">
<div class="toolbar__mode">
<button class="button button--icon toolbar__mode-button button--icon-light toolbar__mode-button--active" aria-label="grid view">
<svg class="icon toolbar__mode-icon" role="presentation" focusable="false">
<title>Grid</title>
<use xlink:href="/images/icons-sprite.svg#grid"></use>
</svg>
</button>
<button class="button button--icon toolbar__mode-button button--icon-light" aria-label="list view">
<svg class="icon toolbar__mode-icon" role="presentation" focusable="false">
<title>List</title>
<use xlink:href="/images/icons-sprite.svg#list"></use>
</svg>
</button>
</div>
<div class="select toolbar__sorter">
<label class="
label
toolbar__sorter-label margin-right-s margin-bottom-0
" for="sorter">
Sort By
</label>
<select id="sorter" class="select__field toolbar__sorter-select" name="sorter">
<option class="" value="product-name">
Product Name
</option>
<option class="" value="price">
Price
</option>
<option class="" value="option3" disabled>
Option 3
</option>
</select>
</div>
<script src="/components/raw/select/select.js"></script>
<div class="toolbar__amount toolbar__amount">
<span class="toolbar__amount-content">
Items 1-9 of
12
</span>
</div>
<div class="select toolbar__limiter margin-0">
<label class="
label
toolbar__limiter-label margin-right-s margin-bottom-0
" for="limiter">
Show
</label>
<select id="limiter" class="select__field toolbar__limiter-select" name="limiter">
<option class="" value="12">
12
</option>
<option class="" value="24">
24
</option>
<option class="" value="36" disabled>
36
</option>
</select>
</div>
<script src="/components/raw/select/select.js"></script>
</div>
<ul class="list">
<li class="product-list-item ">
<a href="#" class="
link
product-list-item__image-link
">
<div class="badges product-list-item__badges">
<div class="badge ">
-15%
</div>
<div class="badge badge--new">
New
</div>
</div>
<div class="lazyload-wrapper product-list-item__image">
<img class="image lazyload " src="" data-src="/images/product/product-160_240.jpg" alt="">
</div>
</a>
<div class="product-list-item__main">
<div class="product-list-item__details">
<div class="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-list-item__name">
<a class="link product-list-item__name-link" href="#" title="Title">
Some product name - very long name because that's important
</a>
</h2>
<div class="product-list-item__sku">
SKU: CEL-31145
</div>
<div class="product-list-item__list">
<!-- Markup generated by snowdog/module-bullet-points -->
<dl class="list list--description ">
<dt class="list__label">
Attribute
</dt>
<dd class="list__value">
Value
</dd>
<dt class="list__label">
Attribute
</dt>
<dd class="list__value">
Value
</dd>
<dt class="list__label">
Attribute
</dt>
<dd class="list__value">
Value
</dd>
<dt class="list__label">
Attribute
</dt>
<dd class="list__value">
Value
</dd>
</dl>
</div>
</div>
<div class="product-list-item__actions">
<button class="button button--link modal-trigger product-list-item__stock" type="button" data-modal-trigger="shipping-latency-1">
In stock
</button>
<div role="dialog" aria-hidden="true" id="shipping-latency-1" data-modal="shipping-latency-1" class="modal " aria-labbeledny="shipping-latency-title-1">
<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-1">
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 xlink:href="/images/icons-sprite.svg#close"></use>
</svg>
</button>
</div>
</div>
<script type="text/javascript">
new Modal(document.querySelector('[data-modal-trigger="shipping-latency-1"]'));
</script>
<div class="product-list-item__price">
<div class="price " aria-label="Product price" tabindex="0">
<span class="price__value ">
$
159.95
</span>
</div>
</div>
<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-list-item__actions-inner">
<button class="button button--icon product-list-item__button-action" type="button" aria-label="Add to compare">
<svg class="icon button__icon" role="presentation" focusable="false">
<title>Compare</title>
<use xlink:href="/images/icons-sprite.svg#compare"></use>
</svg>
</button>
<button class="button button--icon product-list-item__button-action" type="button" aria-label="Add to Wish List">
<svg class="icon button__icon" role="presentation" focusable="false">
<title>Heart</title>
<use xlink:href="/images/icons-sprite.svg#heart"></use>
</svg>
</button>
<form action="#" class="product-list-item__add-to-action">
<button class="button button--add-to button--add-to product-list-item__add-to-button button--fluid" type="button" 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 xlink:href="/images/icons-sprite.svg#shopping-cart"></use>
</svg>
</button>
</form>
</div>
</div>
</div>
</li>
<li class="product-list-item ">
<a href="#" class="
link
product-list-item__image-link
">
<div class="badges product-list-item__badges">
<div class="badge ">
-15%
</div>
<div class="badge badge--new">
New
</div>
</div>
<div class="lazyload-wrapper product-list-item__image">
<img class="image lazyload " src="" data-src="/images/product/product-160_240.jpg" alt="">
</div>
</a>
<div class="product-list-item__main">
<div class="product-list-item__details">
<div class="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-list-item__name">
<a class="link product-list-item__name-link" href="#" title="Title">
Some product name - very long name because that's important
</a>
</h2>
<div class="product-list-item__sku">
SKU: CEL-31145
</div>
<div class="product-list-item__description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
</div>
</div>
<div class="product-list-item__actions">
<button class="button button--link modal-trigger product-list-item__stock" type="button" data-modal-trigger="shipping-latency-2">
In stock
</button>
<div role="dialog" aria-hidden="true" id="shipping-latency-2" data-modal="shipping-latency-2" class="modal " aria-labbeledny="shipping-latency-title-2">
<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-2">
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 xlink:href="/images/icons-sprite.svg#close"></use>
</svg>
</button>
</div>
</div>
<script type="text/javascript">
new Modal(document.querySelector('[data-modal-trigger="shipping-latency-2"]'));
</script>
<div class="product-list-item__price">
<div class="price aria-label=" Product price" tabindex="0"">
<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="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-list-item__actions-inner">
<button class="button button--icon product-list-item__button-action" type="button" aria-label="Add to compare">
<svg class="icon button__icon" role="presentation" focusable="false">
<title>Compare</title>
<use xlink:href="/images/icons-sprite.svg#compare"></use>
</svg>
</button>
<button class="button button--icon product-list-item__button-action" type="button" aria-label="Add to Wish List">
<svg class="icon button__icon" role="presentation" focusable="false">
<title>Heart</title>
<use xlink:href="/images/icons-sprite.svg#heart"></use>
</svg>
</button>
<form action="#" class="product-list-item__add-to-action">
<button class="button button--add-to button--add-to product-list-item__add-to-button button--fluid" type="button" 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 xlink:href="/images/icons-sprite.svg#shopping-cart"></use>
</svg>
</button>
</form>
</div>
</div>
</div>
</li>
<li class="product-list-item ">
<a href="#" class="
link
product-list-item__image-link
">
<div class="badges product-list-item__badges">
<div class="badge ">
-15%
</div>
<div class="badge badge--new">
New
</div>
</div>
<div class="lazyload-wrapper product-list-item__image">
<img class="image lazyload " src="" data-src="/images/product/product-160_240.jpg" alt="">
</div>
</a>
<div class="product-list-item__main">
<div class="product-list-item__details">
<div class="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-list-item__name">
<a class="link product-list-item__name-link" href="#" title="Title">
Some product name - very long name because that's important
</a>
</h2>
<div class="product-list-item__sku">
SKU: CEL-31145
</div>
<div class="product-list-item__list">
<!-- Markup generated by snowdog/module-bullet-points -->
<dl class="list list--description ">
<dt class="list__label">
Attribute
</dt>
<dd class="list__value">
Value
</dd>
<dt class="list__label">
Attribute
</dt>
<dd class="list__value">
Value
</dd>
<dt class="list__label">
Attribute
</dt>
<dd class="list__value">
Value
</dd>
<dt class="list__label">
Attribute
</dt>
<dd class="list__value">
Value
</dd>
</dl>
</div>
</div>
<div class="product-list-item__actions">
<button class="button button--link modal-trigger product-list-item__stock" type="button" data-modal-trigger="shipping-latency-3">
In stock
</button>
<div role="dialog" aria-hidden="true" id="shipping-latency-3" data-modal="shipping-latency-3" class="modal " aria-labbeledny="shipping-latency-title-3">
<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-3">
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 xlink:href="/images/icons-sprite.svg#close"></use>
</svg>
</button>
</div>
</div>
<script type="text/javascript">
new Modal(document.querySelector('[data-modal-trigger="shipping-latency-3"]'));
</script>
<div class="product-list-item__price">
<div class="price " aria-label="Product price" tabindex="0">
<span class="price__value ">
$
159.95
</span>
</div>
</div>
<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-list-item__actions-inner">
<button class="button button--icon product-list-item__button-action" type="button" aria-label="Add to compare">
<svg class="icon button__icon" role="presentation" focusable="false">
<title>Compare</title>
<use xlink:href="/images/icons-sprite.svg#compare"></use>
</svg>
</button>
<button class="button button--icon product-list-item__button-action" type="button" aria-label="Add to Wish List">
<svg class="icon button__icon" role="presentation" focusable="false">
<title>Heart</title>
<use xlink:href="/images/icons-sprite.svg#heart"></use>
</svg>
</button>
<form action="#" class="product-list-item__add-to-action">
<button class="button button--add-to button--add-to product-list-item__add-to-button button--fluid" type="button" 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 xlink:href="/images/icons-sprite.svg#shopping-cart"></use>
</svg>
</button>
</form>
</div>
</div>
</div>
</li>
<li class="product-list-item ">
<a href="#" class="
link
product-list-item__image-link
">
<div class="badges product-list-item__badges">
<div class="badge ">
-15%
</div>
<div class="badge badge--new">
New
</div>
</div>
<div class="lazyload-wrapper product-list-item__image">
<img class="image lazyload " src="" data-src="/images/product/product-160_240.jpg" alt="">
</div>
</a>
<div class="product-list-item__main">
<div class="product-list-item__details">
<div class="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-list-item__name">
<a class="link product-list-item__name-link" href="#" title="Title">
Some product name - very long name because that's important
</a>
</h2>
<div class="product-list-item__sku">
SKU: CEL-31145
</div>
<div class="product-list-item__list">
<!-- Markup generated by snowdog/module-bullet-points -->
<dl class="list list--description ">
<dt class="list__label">
Attribute
</dt>
<dd class="list__value">
Value
</dd>
<dt class="list__label">
Attribute
</dt>
<dd class="list__value">
Value
</dd>
<dt class="list__label">
Attribute
</dt>
<dd class="list__value">
Value
</dd>
<dt class="list__label">
Attribute
</dt>
<dd class="list__value">
Value
</dd>
</dl>
</div>
</div>
<div class="product-list-item__actions">
<button class="button button--link modal-trigger product-list-item__stock" type="button" data-modal-trigger="shipping-latency-4">
In stock
</button>
<div role="dialog" aria-hidden="true" id="shipping-latency-4" data-modal="shipping-latency-4" class="modal " aria-labbeledny="shipping-latency-title-4">
<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-4">
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 xlink:href="/images/icons-sprite.svg#close"></use>
</svg>
</button>
</div>
</div>
<script type="text/javascript">
new Modal(document.querySelector('[data-modal-trigger="shipping-latency-4"]'));
</script>
<div class="product-list-item__price">
<div class="price " aria-label="Product price" tabindex="0">
<span class="price__value ">
$
159.95
</span>
</div>
</div>
<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-list-item__actions-inner">
<button class="button button--icon product-list-item__button-action" type="button" aria-label="Add to compare">
<svg class="icon button__icon" role="presentation" focusable="false">
<title>Compare</title>
<use xlink:href="/images/icons-sprite.svg#compare"></use>
</svg>
</button>
<button class="button button--icon product-list-item__button-action" type="button" aria-label="Add to Wish List">
<svg class="icon button__icon" role="presentation" focusable="false">
<title>Heart</title>
<use xlink:href="/images/icons-sprite.svg#heart"></use>
</svg>
</button>
<form action="#" class="product-list-item__add-to-action">
<button class="button button--add-to button--add-to product-list-item__add-to-button button--fluid" type="button" 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 xlink:href="/images/icons-sprite.svg#shopping-cart"></use>
</svg>
</button>
</form>
</div>
</div>
</div>
</li>
<li class="product-list-item ">
<a href="#" class="
link
product-list-item__image-link
">
<div class="badges product-list-item__badges">
<div class="badge ">
-15%
</div>
<div class="badge badge--new">
New
</div>
</div>
<div class="lazyload-wrapper product-list-item__image">
<img class="image lazyload " src="" data-src="/images/product/product-160_240.jpg" alt="">
</div>
</a>
<div class="product-list-item__main">
<div class="product-list-item__details">
<div class="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-list-item__name">
<a class="link product-list-item__name-link" href="#" title="Title">
Some product name - very long name because that's important
</a>
</h2>
<div class="product-list-item__sku">
SKU: CEL-31145
</div>
<div class="product-list-item__description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
</div>
</div>
<div class="product-list-item__actions">
<button class="button button--link modal-trigger product-list-item__stock" type="button" data-modal-trigger="shipping-latency-5">
In stock
</button>
<div role="dialog" aria-hidden="true" id="shipping-latency-5" data-modal="shipping-latency-5" class="modal " aria-labbeledny="shipping-latency-title-5">
<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-5">
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 xlink:href="/images/icons-sprite.svg#close"></use>
</svg>
</button>
</div>
</div>
<script type="text/javascript">
new Modal(document.querySelector('[data-modal-trigger="shipping-latency-5"]'));
</script>
<div class="product-list-item__price">
<div class="price aria-label=" Product price" tabindex="0"">
<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="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-list-item__actions-inner">
<button class="button button--icon product-list-item__button-action" type="button" aria-label="Add to compare">
<svg class="icon button__icon" role="presentation" focusable="false">
<title>Compare</title>
<use xlink:href="/images/icons-sprite.svg#compare"></use>
</svg>
</button>
<button class="button button--icon product-list-item__button-action" type="button" aria-label="Add to Wish List">
<svg class="icon button__icon" role="presentation" focusable="false">
<title>Heart</title>
<use xlink:href="/images/icons-sprite.svg#heart"></use>
</svg>
</button>
<form action="#" class="product-list-item__add-to-action">
<button class="button button--add-to button--add-to product-list-item__add-to-button button--fluid" type="button" 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 xlink:href="/images/icons-sprite.svg#shopping-cart"></use>
</svg>
</button>
</form>
</div>
</div>
</div>
</li>
<li class="product-list-item ">
<a href="#" class="
link
product-list-item__image-link
">
<div class="badges product-list-item__badges">
<div class="badge ">
-15%
</div>
<div class="badge badge--new">
New
</div>
</div>
<div class="lazyload-wrapper product-list-item__image">
<img class="image lazyload " src="" data-src="/images/product/product-160_240.jpg" alt="">
</div>
</a>
<div class="product-list-item__main">
<div class="product-list-item__details">
<div class="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-list-item__name">
<a class="link product-list-item__name-link" href="#" title="Title">
Some product name - very long name because that's important
</a>
</h2>
<div class="product-list-item__sku">
SKU: CEL-31145
</div>
<div class="product-list-item__list">
<!-- Markup generated by snowdog/module-bullet-points -->
<dl class="list list--description ">
<dt class="list__label">
Attribute
</dt>
<dd class="list__value">
Value
</dd>
<dt class="list__label">
Attribute
</dt>
<dd class="list__value">
Value
</dd>
<dt class="list__label">
Attribute
</dt>
<dd class="list__value">
Value
</dd>
<dt class="list__label">
Attribute
</dt>
<dd class="list__value">
Value
</dd>
</dl>
</div>
</div>
<div class="product-list-item__actions">
<button class="button button--link modal-trigger product-list-item__stock" type="button" data-modal-trigger="shipping-latency-6">
In stock
</button>
<div role="dialog" aria-hidden="true" id="shipping-latency-6" data-modal="shipping-latency-6" class="modal " aria-labbeledny="shipping-latency-title-6">
<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-6">
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 xlink:href="/images/icons-sprite.svg#close"></use>
</svg>
</button>
</div>
</div>
<script type="text/javascript">
new Modal(document.querySelector('[data-modal-trigger="shipping-latency-6"]'));
</script>
<div class="product-list-item__price">
<div class="price aria-label=" Product price" tabindex="0"">
<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="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-list-item__actions-inner">
<button class="button button--icon product-list-item__button-action" type="button" aria-label="Add to compare">
<svg class="icon button__icon" role="presentation" focusable="false">
<title>Compare</title>
<use xlink:href="/images/icons-sprite.svg#compare"></use>
</svg>
</button>
<button class="button button--icon product-list-item__button-action" type="button" aria-label="Add to Wish List">
<svg class="icon button__icon" role="presentation" focusable="false">
<title>Heart</title>
<use xlink:href="/images/icons-sprite.svg#heart"></use>
</svg>
</button>
<form action="#" class="product-list-item__add-to-action">
<button class="button button--add-to button--add-to product-list-item__add-to-button button--fluid" type="button" 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 xlink:href="/images/icons-sprite.svg#shopping-cart"></use>
</svg>
</button>
</form>
</div>
</div>
</div>
</li>
<li class="product-list-item ">
<a href="#" class="
link
product-list-item__image-link
">
<div class="badges product-list-item__badges">
<div class="badge ">
-15%
</div>
<div class="badge badge--new">
New
</div>
</div>
<div class="lazyload-wrapper product-list-item__image">
<img class="image lazyload " src="" data-src="/images/product/product-160_240.jpg" alt="">
</div>
</a>
<div class="product-list-item__main">
<div class="product-list-item__details">
<div class="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-list-item__name">
<a class="link product-list-item__name-link" href="#" title="Title">
Some product name - very long name because that's important
</a>
</h2>
<div class="product-list-item__sku">
SKU: CEL-31145
</div>
<div class="product-list-item__list">
<!-- Markup generated by snowdog/module-bullet-points -->
<dl class="list list--description ">
<dt class="list__label">
Attribute
</dt>
<dd class="list__value">
Value
</dd>
<dt class="list__label">
Attribute
</dt>
<dd class="list__value">
Value
</dd>
<dt class="list__label">
Attribute
</dt>
<dd class="list__value">
Value
</dd>
<dt class="list__label">
Attribute
</dt>
<dd class="list__value">
Value
</dd>
</dl>
</div>
</div>
<div class="product-list-item__actions">
<button class="button button--link modal-trigger product-list-item__stock" type="button" data-modal-trigger="shipping-latency-7">
In stock
</button>
<div role="dialog" aria-hidden="true" id="shipping-latency-7" data-modal="shipping-latency-7" class="modal " aria-labbeledny="shipping-latency-title-7">
<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-7">
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 xlink:href="/images/icons-sprite.svg#close"></use>
</svg>
</button>
</div>
</div>
<script type="text/javascript">
new Modal(document.querySelector('[data-modal-trigger="shipping-latency-7"]'));
</script>
<div class="product-list-item__price">
<div class="price " aria-label="Product price" tabindex="0">
<span class="price__value ">
$
159.95
</span>
</div>
</div>
<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-list-item__actions-inner">
<button class="button button--icon product-list-item__button-action" type="button" aria-label="Add to compare">
<svg class="icon button__icon" role="presentation" focusable="false">
<title>Compare</title>
<use xlink:href="/images/icons-sprite.svg#compare"></use>
</svg>
</button>
<button class="button button--icon product-list-item__button-action" type="button" aria-label="Add to Wish List">
<svg class="icon button__icon" role="presentation" focusable="false">
<title>Heart</title>
<use xlink:href="/images/icons-sprite.svg#heart"></use>
</svg>
</button>
<form action="#" class="product-list-item__add-to-action">
<button class="button button--add-to button--add-to product-list-item__add-to-button button--fluid" type="button" 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 xlink:href="/images/icons-sprite.svg#shopping-cart"></use>
</svg>
</button>
</form>
</div>
</div>
</div>
</li>
<li class="product-list-item ">
<a href="#" class="
link
product-list-item__image-link
">
<div class="badges product-list-item__badges">
<div class="badge ">
-15%
</div>
<div class="badge badge--new">
New
</div>
</div>
<div class="lazyload-wrapper product-list-item__image">
<img class="image lazyload " src="" data-src="/images/product/product-160_240.jpg" alt="">
</div>
</a>
<div class="product-list-item__main">
<div class="product-list-item__details">
<div class="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-list-item__name">
<a class="link product-list-item__name-link" href="#" title="Title">
Some product name - very long name because that's important
</a>
</h2>
<div class="product-list-item__sku">
SKU: CEL-31145
</div>
<div class="product-list-item__description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
</div>
</div>
<div class="product-list-item__actions">
<button class="button button--link modal-trigger product-list-item__stock" type="button" data-modal-trigger="shipping-latency-8">
In stock
</button>
<div role="dialog" aria-hidden="true" id="shipping-latency-8" data-modal="shipping-latency-8" class="modal " aria-labbeledny="shipping-latency-title-8">
<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-8">
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 xlink:href="/images/icons-sprite.svg#close"></use>
</svg>
</button>
</div>
</div>
<script type="text/javascript">
new Modal(document.querySelector('[data-modal-trigger="shipping-latency-8"]'));
</script>
<div class="product-list-item__price">
<div class="price " aria-label="Product price" tabindex="0">
<span class="price__value ">
$
159.95
</span>
</div>
</div>
<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-list-item__actions-inner">
<button class="button button--icon product-list-item__button-action" type="button" aria-label="Add to compare">
<svg class="icon button__icon" role="presentation" focusable="false">
<title>Compare</title>
<use xlink:href="/images/icons-sprite.svg#compare"></use>
</svg>
</button>
<button class="button button--icon product-list-item__button-action" type="button" aria-label="Add to Wish List">
<svg class="icon button__icon" role="presentation" focusable="false">
<title>Heart</title>
<use xlink:href="/images/icons-sprite.svg#heart"></use>
</svg>
</button>
<form action="#" class="product-list-item__add-to-action">
<button class="button button--add-to button--add-to product-list-item__add-to-button button--fluid" type="button" 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 xlink:href="/images/icons-sprite.svg#shopping-cart"></use>
</svg>
</button>
</form>
</div>
</div>
</div>
</li>
<li class="product-list-item ">
<a href="#" class="
link
product-list-item__image-link
">
<div class="badges product-list-item__badges">
<div class="badge ">
-15%
</div>
<div class="badge badge--new">
New
</div>
</div>
<div class="lazyload-wrapper product-list-item__image">
<img class="image lazyload " src="" data-src="/images/product/product-160_240.jpg" alt="">
</div>
</a>
<div class="product-list-item__main">
<div class="product-list-item__details">
<div class="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-list-item__name">
<a class="link product-list-item__name-link" href="#" title="Title">
Some product name - very long name because that's important
</a>
</h2>
<div class="product-list-item__sku">
SKU: CEL-31145
</div>
<div class="product-list-item__description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
</div>
</div>
<div class="product-list-item__actions">
<button class="button button--link modal-trigger product-list-item__stock" type="button" data-modal-trigger="shipping-latency-9">
In stock
</button>
<div role="dialog" aria-hidden="true" id="shipping-latency-9" data-modal="shipping-latency-9" class="modal " aria-labbeledny="shipping-latency-title-9">
<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-9">
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 xlink:href="/images/icons-sprite.svg#close"></use>
</svg>
</button>
</div>
</div>
<script type="text/javascript">
new Modal(document.querySelector('[data-modal-trigger="shipping-latency-9"]'));
</script>
<div class="product-list-item__price">
<div class="price " aria-label="Product price" tabindex="0">
<span class="price__value ">
$
159.95
</span>
</div>
</div>
<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-list-item__actions-inner">
<button class="button button--icon product-list-item__button-action" type="button" aria-label="Add to compare">
<svg class="icon button__icon" role="presentation" focusable="false">
<title>Compare</title>
<use xlink:href="/images/icons-sprite.svg#compare"></use>
</svg>
</button>
<button class="button button--icon product-list-item__button-action" type="button" aria-label="Add to Wish List">
<svg class="icon button__icon" role="presentation" focusable="false">
<title>Heart</title>
<use xlink:href="/images/icons-sprite.svg#heart"></use>
</svg>
</button>
<form action="#" class="product-list-item__add-to-action">
<button class="button button--add-to button--add-to product-list-item__add-to-button button--fluid" type="button" 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 xlink:href="/images/icons-sprite.svg#shopping-cart"></use>
</svg>
</button>
</form>
</div>
</div>
</div>
</li>
</ul>
<nav class="pager margin-vc-xl" role="navigation" aria-label="Pagination navigation">
<ul class="pager__list">
<li class="pager__item">
<a href="#" class="
pager__link
pager__link--prev
button button--icon
" aria-label="Link to previous page, disabled" disabled tabindex="-1">
<svg class="icon pager__link-prev" role="presentation" focusable="false">
<use xlink:href="/images/icons-sprite.svg#arrow-left"></use>
</svg>
</a>
</li>
<li class="pager__item pager__item--current" aria-current="page" aria-label="Page 1, current page">
1
</li>
<li class="pager__item">
<a href="#" class="pager__link link" aria-label="Link to page 2">
2
</a>
</li>
<li class="pager__item">
<a href="#" class="pager__link link" aria-label="Link to page 3">
3
</a>
</li>
<li class="pager__item">
<a href="#" class="pager__link link" aria-label="Link to page 4">
4
</a>
</li>
<li class="pager__item">
<a href="#" class="pager__link link" aria-label="Link to page 5">
5
</a>
</li>
<li class="pager__item">
<a href="#" class="
pager__link
pager__link--next
button button--icon
" aria-label="Link to next page">
<svg class="icon pager__link-next" role="presentation" focusable="false">
<use xlink:href="/images/icons-sprite.svg#arrow-right"></use>
</svg>
</a>
</li>
</ul>
</nav>
<div class="catalog-list__category-description">
<p>The LX600 Catadioptric telescope design uses a combination of mirrors and lenses to gather light and form a sharp image. There is a wide range of popular telescopes for amateur astronomers, such as Schmidt-Cassegrain and Maksutov-Cassegrain telescopes, that are of the catadioptric design. There are also catadioptric telescopes for sale that are designed primarily for astrophotography or imaging, like the Ritchey-Chretien (RC), Meade ACF, and Celestron EdgeHD.</p>
<p>The Schmidt-Cassegrain Telescope, or SCT, is the most popular design in the broader catadioptric telescope line-up. The Schmidt-Cassegrain has a folded optical system consisting of a primary mirror and a corrector plate with the secondary mirror right in the center. This design allows the telescope tube to be much more compact than a Newtonian reflector or a Refractor. The most popular Schmidt-Cassegrain has a large 8" diameter mirror and an optical tube that is about 18" long - a perfect combination of good light-gathering and easy-to-carry portability.</p>
<p>The Maksutov-Cassegrain, or Mak-Cass, catadioptric telescope looks very much like an SCT but has a longer focal length due to the way the light travels inside the tube. The Maksutov-Cassegrain really shines when used for terrestrial or astronomical viewing, especially when turned to the Moon or planets, but it isn't the best choice for deep-sky astrophotography due to its long focal length when compared other catadioptric designs.</p>
<p>Catadioptrics optimized for imaging are rising in popularity as more amateur astronomers fall under the spell of astrophotography. These telescopes have a wide, flat field that works nicely with today's larger format DSLR and dedicated astronomy cameras. While many catadioptric telescopes for sale can be used for both visual astronomy and imaging, amateur astronomers who prefer visual observations or have a camera with a smaller sensor don't necessarily require the edge-to-edge flatness that a larger sensor does.</p>
</div>
</div>
<div class="catalog-list__sidebar-additional">
<div class="sidebar-block">
<div class="sidebar-block__heading ">
<h2 class="heading--second-level sidebar-block__title">
Compare Products
</h2>
<span class="sidebar-block__counter">
3 items
</span>
</div>
<ol class="list sidebar-block__list">
<li class="sidebar-block__item">
<button class="button button--icon sidebar-block__remove margin-right-xs" aria-label="Remove product from compare" title="Remove product from compare">
<svg class="icon icon sidebar-block__remove-icon" role="img">
<title>Close</title>
<use xlink:href="/images/icons-sprite.svg#close"></use>
</svg>
</button>
<a class="link sidebar-block__link" href="#" title="Chaz Kangeroo Hoodie">
Chaz Kangeroo Hoodie
</a>
</li>
<li class="sidebar-block__item">
<button class="button button--icon sidebar-block__remove margin-right-xs" aria-label="Remove product from compare" title="Remove product from compare">
<svg class="icon icon sidebar-block__remove-icon" role="img">
<title>Close</title>
<use xlink:href="/images/icons-sprite.svg#close"></use>
</svg>
</button>
<a class="link sidebar-block__link" href="#" title="Bruno Compete Hoodie">
Bruno Compete Hoodie
</a>
</li>
<li class="sidebar-block__item">
<button class="button button--icon sidebar-block__remove margin-right-xs" aria-label="Remove product from compare" title="Remove product from compare">
<svg class="icon icon sidebar-block__remove-icon" role="img">
<title>Close</title>
<use xlink:href="/images/icons-sprite.svg#close"></use>
</svg>
</button>
<a class="link sidebar-block__link" href="#" title="Hero Hoodie">
Hero Hoodie
</a>
</li>
</ol>
<div class="sidebar-block__actions">
<a class="link sidebar-block__action" href="#" title="Compare">
Compare
</a>
<button class="button button--link sidebar-block__action" type="button">
Clear all
</button>
</div>
</div>
<div class="sidebar-block">
<div class="sidebar-block__heading">
<h2 class="sidebar-block__title">
Recently Ordered
</h2>
</div>
<ol class="list sidebar-block__list">
<li>
<div class="sidebar-block__item">
<a href="#" class="link sidebar-block__link">
Chaz Kangeroo Hoodie
</a>
</div>
<div class="checkbox sidebar-block__checkbox">
<input type="checkbox" id="reorder-item-1" name="order-item-1" class="checkbox__field ">
<svg class="
checkbox__icon
checkbox__icon--checked
" role="presentation">
<use xlink:href="/images/icons-sprite.svg#checked"></use>
</svg>
<svg class="
checkbox__icon
checkbox__icon--unchecked
" role="presentation">
<use xlink:href="/images/icons-sprite.svg#unchecked"></use>
</svg>
<label for="reorder-item-1" class="checkbox__label ">
<span class="checkbox__text">
Add to Cart
</span>
</label>
</div>
</li>
<li>
<div class="sidebar-block__item">
<a href="#" class="link sidebar-block__link">
Bruno Compete Hoodie
</a>
</div>
<div class="checkbox sidebar-block__checkbox">
<input type="checkbox" id="reorder-item-2" name="order-item-2" class="checkbox__field ">
<svg class="
checkbox__icon
checkbox__icon--checked
" role="presentation">
<use xlink:href="/images/icons-sprite.svg#checked"></use>
</svg>
<svg class="
checkbox__icon
checkbox__icon--unchecked
" role="presentation">
<use xlink:href="/images/icons-sprite.svg#unchecked"></use>
</svg>
<label for="reorder-item-2" class="checkbox__label ">
<span class="checkbox__text">
Add to Cart
</span>
</label>
</div>
</li>
<li>
<div class="sidebar-block__item">
<a href="#" class="link sidebar-block__link">
Hero Hoodie
</a>
</div>
<div class="checkbox sidebar-block__checkbox">
<input type="checkbox" id="reorder-item-3" name="order-item-3" class="checkbox__field ">
<svg class="
checkbox__icon
checkbox__icon--checked
" role="presentation">
<use xlink:href="/images/icons-sprite.svg#checked"></use>
</svg>
<svg class="
checkbox__icon
checkbox__icon--unchecked
" role="presentation">
<use xlink:href="/images/icons-sprite.svg#unchecked"></use>
</svg>
<label for="reorder-item-3" class="checkbox__label ">
<span class="checkbox__text">
Add to Cart
</span>
</label>
</div>
</li>
</ol>
<div class="sidebar-block__actions">
<button class="button button--link sidebar-block__action" type="button">
Add to Cart
</button>
<a class="link sidebar-block__action" href="#" title="View All">
View All
</a>
</div>
</div>
<div class="sidebar-block">
<div class="sidebar-block__heading ">
<h2 class="sidebar-block__title">
My Wish List
</h2>
<span class="sidebar-block__counter">
3 items
</span>
</div>
<ol class="list sidebar-block__list">
<li class="margin-bottom-m">
<div class="sidebar-block__item">
<div class="sidebar-block__product-image">
<a href="#">
<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>
</a>
</div>
<div class="sidebar-block__product-info">
<a href="#" class="link sidebar-block__link">
Chaz Kangeroo Hoodie
</a>
<div class="price ">
<span class="price__value ">
$
159.95
</span>
</div>
</div>
</div>
<div class="sidebar-block__actions">
<button class="button button--link sidebar-block__action" type="button">
Add to Cart
</button>
<button class="button button--link sidebar-block__action" type="button">
Remove this item
</button>
</div>
</li>
<li class="margin-bottom-m">
<div class="sidebar-block__item">
<div class="sidebar-block__product-image">
<a href="#">
<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>
</a>
</div>
<div class="sidebar-block__product-info">
<a href="#" class="link sidebar-block__link">
Bruno Compete Hoodie
</a>
<div class="price ">
<span class="price__value ">
$
159.95
</span>
</div>
</div>
</div>
<div class="sidebar-block__actions">
<button class="button button--link sidebar-block__action" type="button">
Add to Cart
</button>
<button class="button button--link sidebar-block__action" type="button">
Remove this item
</button>
</div>
</li>
<li class="margin-bottom-m">
<div class="sidebar-block__item">
<div class="sidebar-block__product-image">
<a href="#">
<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>
</a>
</div>
<div class="sidebar-block__product-info">
<a href="#" class="link sidebar-block__link">
Hero Hoodie
</a>
<div class="price ">
<span class="price__value ">
$
159.95
</span>
</div>
</div>
</div>
<div class="sidebar-block__actions">
<button class="button button--link sidebar-block__action" type="button">
Add to Cart
</button>
<button class="button button--link sidebar-block__action" type="button">
Remove this item
</button>
</div>
</li>
</ol>
<a class="button button--secondary button--fluid" href="#">
Go to Wish List
</a>
</div>
<div class="sidebar-block">
<div class="sidebar-block__heading">
<h2 class="sidebar-block__title">
Recently Viewed
</h2>
</div>
<ol class="list sidebar-block__list">
<li class="">
<div class="sidebar-block__item">
<div class="sidebar-block__product-image">
<a href="#">
<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>
</a>
</div>
<div class="sidebar-block__product-info">
<a href="#" class="link sidebar-block__link">
Chaz Kangeroo Hoodie
</a>
<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>
<div class="sidebar-block__actions">
<button class="button button--link margin-bottom-s sidebar-block__action" type="button">
Add to Cart
</button>
</div>
</li>
<li class="">
<div class="sidebar-block__item">
<div class="sidebar-block__product-image">
<a href="#">
<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>
</a>
</div>
<div class="sidebar-block__product-info">
<a href="#" class="link sidebar-block__link">
Bruno Compete Hoodie
</a>
<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>
<div class="sidebar-block__actions">
<button class="button button--link margin-bottom-s sidebar-block__action" type="button">
Add to Cart
</button>
</div>
</li>
<li class="">
<div class="sidebar-block__item">
<div class="sidebar-block__product-image">
<a href="#">
<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>
</a>
</div>
<div class="sidebar-block__product-info">
<a href="#" class="link sidebar-block__link">
Hero Hoodie
</a>
<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>
<div class="sidebar-block__actions">
<button class="button button--link margin-bottom-s sidebar-block__action" type="button">
Add to Cart
</button>
</div>
</li>
</ol>
</div>
</div>
</div>
</main>
</div>
<footer>
<div class="footer-top margin-top-xl">
<div class="container newsletter__footer ">
<div class="row">
<div class="newsletter__content col-xs-12 col-md-6">
<div class="newsletter__footer--heading ">
<h2 class="newsletter__footer--title">
Wil je 10% korting op je volgende bestelling?
</h2>
<p class="newsletter__footer--subtitle">
Meld je nu aan voor de nieuwsbrief van Kistenkoning en ontvang 10% korting op je volgende aankoop.
</p>
</div>
<form class="newsletter__form newsletter__footer--form">
<div class="newsletter__footer--fields">
<div class="control">
<label for="newsletter">
<span class="label">Abonneer u op onze nieuwsbrief</span>
<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>
</label>
<div class="newsletter__footer--agreements">
<div class="checkbox newsletter__footer--checkbox">
<input type="checkbox" id="newsletter" name="" class="checkbox__field ">
<svg class="
checkbox__icon
checkbox__icon--checked
" role="presentation">
<use xlink:href="/images/icons-sprite.svg#checked"></use>
</svg>
<svg class="
checkbox__icon
checkbox__icon--unchecked
" role="presentation">
<use xlink:href="/images/icons-sprite.svg#unchecked"></use>
</svg>
<label for="newsletter" class="checkbox__label ">
<span class="checkbox__text">
<a href="#" title="Privacy Policy">Privacy Policy</a>
</span>
</label>
</div>
</div>
</div>
</div>
<div class="newsletter__footer--button">
<button class="button button--secondary newsletter__button">
Sign Up
</button>
</div>
</form>
</div>
<div class="newsletter__image col-xs-12 col-md-6">
<div class="lazyload-wrapper ">
<img class="image lazyload " src="" data-src="https://www.dekistenkoning.nl/media/blocks/footer/footer_nieuwsbrief.jpg" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="footer-center">
<div class="contact-bar__footer container">
<div class="row">
<div class="col-sm-3 flex--row">
<div class="contact-bar__footer--icon"><svg class="icon " role="img">
<use xlink:href="/images/icons-sprite.svg#phone"></use>
</svg>
</div>
<div class="contact-bar__footer--content flex--column">
<span class="contact-bar__footer--title">Bel gratis 0348 - 437811</span>
<span class="contact-bar__footer--description">Op werkdagen van 9:00 - 17:00 uur</span>
</div>
</div>
<div class="col-sm-3 flex--row">
<div class="contact-bar__footer--icon"><svg class="icon " role="img">
<use xlink:href="/images/icons-sprite.svg#envelope"></use>
</svg>
</div>
<div class="contact-bar__footer--content flex--column">
<span class="contact-bar__footer--title">Stuur een mail</span>
<span class="contact-bar__footer--description">Antwoord binnen 24 uur</span>
</div>
</div>
<div class="col-sm-3 flex--row">
<div class="contact-bar__footer--icon"><svg class="icon " role="img">
<use xlink:href="/images/icons-sprite.svg#facebook-logo"></use>
</svg>
</div>
<div class="contact-bar__footer--content flex--column">
<span class="contact-bar__footer--title">Via Facebook</span>
<span class="contact-bar__footer--description">Antwoord binnen 24 uur</span>
</div>
</div>
<div class="col-sm-3 flex--row">
<div class="contact-bar__footer--icon"><svg class="icon " role="img">
<use xlink:href="/images/icons-sprite.svg#chat"></use>
</svg>
</div>
<div class="contact-bar__footer--content flex--column">
<span class="contact-bar__footer--title">Via de Chat</span>
<span class="contact-bar__footer--description">Op werkdagen van 9:00 - 17:00 uur</span>
</div>
</div>
</div>
</div>
</div>
<div class="footer margin-top-xl">
<div class="footer__handler container">
<button class="button button--icon footer__scroll-top" type="button" aria-label="scroll to top">
<svg class="icon " role="presentation" focusable="false">
<title>Scroll to top</title>
<use xlink:href="/images/icons-sprite.svg#arrow-up"></use>
</svg>
</button>
<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 xlink: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 xlink: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 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 xlink: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 xlink:href="/images/icons-sprite.svg#twitter"></use>
</svg>
</a>
</li>
</ul>
</div>
<div class="footer__payments">
<ul class="footer__payments-list list list--horizontal ">
<li class="list__item">
<svg class="icon footer__payments-list-icon" role="img">
<title>AfterPay</title>
<use xlink:href="/images/icons-sprite.svg#afterpay"></use>
</svg>
</li>
<li class="list__item">
<svg class="icon footer__payments-list-icon" role="img">
<title>iDEAL</title>
<use xlink:href="/images/icons-sprite.svg#ideal"></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 xlink:href="/images/icons-sprite.svg#paypal"></use>
</svg>
</li>
<li class="list__item">
<svg class="icon footer__payments-list-icon" role="img">
<title>American Express</title>
<use xlink: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--visa" role="img">
<title>Visa</title>
<use xlink:href="/images/icons-sprite.svg#visa"></use>
</svg>
</li>
</ul>
</div>
</div>
<section class="footer__bottom-bar ">
<div class="footer__bottom-bar-handler container">
<div class="footer__copyright">
<small>
Copyright © 2019 Alpaca
</small>
</div>
<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 xlink: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 xlink: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 xlink:href="/images/icons-sprite.svg#close"></use>
</svg>
</button>
</div>
</div>
<script src="/components/raw/cookie-message/cookie-message.js"></script>
</div>
</footer>
<script src="/components/raw/footer/footer.js"></script>
<div class="page-wrapper">
{{ render '@header' }}
<main class="container" id="maincontent">
{{ render '@breadcrumbs' }}
<div class="tiling--slider">
{{#each categories as |category| }}
{{ render '@category-tile'category merge=true }}
{{/each}}
</div>
<div class="catalog-list">
<div class="catalog-list__sidebar">
{{ render '@filters' }}
</div>
<div class="catalog-list__products">
{{ render '@toolbar' }}
<ul class="list">
{{#each items as |item|}}
{{ render '@product-list-item' item merge=true }}
{{/each}}
</ul>
{{ render '@pager' pager merge=true }}
<div class="catalog-list__category-description">
{{{ categoryDescription }}}
</div>
</div>
<div class="catalog-list__sidebar-additional">
{{ render '@sidebar-block' }}
{{ render '@sidebar-block--recently-ordered' }}
{{ render '@sidebar-block--wishlist' }}
{{ render '@sidebar-block--recently-viewed' }}
</div>
</div>
</main>
</div>
{{ render '@footer' }}
{
"banner": {
"class": "catalog-list__banner"
},
"categories": [
{
"text": "Kerst Fruitkisten",
"class": "category-item-link",
"image": {
"class": "cart-list-item__image",
"defaultSrc": "/images/category/kerst-fruitkisten.jpg"
}
},
{
"text": "Kerst Fruitkisten",
"class": "category-item-link",
"image": {
"class": "cart-list-item__image",
"defaultSrc": "/images/category/kerst-fruitkisten.jpg"
}
},
{
"text": "Kerst Fruitkisten",
"class": "category-item-link",
"image": {
"class": "cart-list-item__image",
"defaultSrc": "/images/category/kerst-fruitkisten.jpg"
}
},
{
"text": "Kerst Fruitkisten",
"class": "category-item-link",
"image": {
"class": "cart-list-item__image",
"defaultSrc": "/images/category/kerst-fruitkisten.jpg"
}
},
{
"text": "Kerst Fruitkisten",
"class": "category-item-link",
"image": {
"class": "cart-list-item__image",
"defaultSrc": "/images/category/kerst-fruitkisten.jpg"
}
}
],
"items": [
{
"tag": "li"
},
{
"tag": "li",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.",
"bulletList": false,
"price": {
"name": "price--with-special-price",
"context": {
"attributes": "aria-label=\"Product price\" tabindex=\"0\""
}
},
"stockButton": {
"attributes": "type=\"button\" data-modal-trigger=\"shipping-latency-2\""
},
"shippingLatencyModal": {
"modal": {
"id": "shipping-latency-2",
"attributes": "aria-labbeledny=\"shipping-latency-title-2\""
},
"heading": {
"attributes": "id=\"shipping-latency-title-2\""
}
}
},
{
"tag": "li",
"stockButton": {
"attributes": "type=\"button\" data-modal-trigger=\"shipping-latency-3\""
},
"shippingLatencyModal": {
"modal": {
"id": "shipping-latency-3",
"attributes": "aria-labbeledny=\"shipping-latency-title-3\""
},
"heading": {
"attributes": "id=\"shipping-latency-title-3\""
}
}
},
{
"tag": "li",
"stockButton": {
"attributes": "type=\"button\" data-modal-trigger=\"shipping-latency-4\""
},
"shippingLatencyModal": {
"modal": {
"id": "shipping-latency-4",
"attributes": "aria-labbeledny=\"shipping-latency-title-4\""
},
"heading": {
"attributes": "id=\"shipping-latency-title-4\""
}
}
},
{
"tag": "li",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.",
"bulletList": false,
"price": {
"name": "price--with-special-price",
"context": {
"attributes": "aria-label=\"Product price\" tabindex=\"0\""
}
},
"stockButton": {
"attributes": "type=\"button\" data-modal-trigger=\"shipping-latency-5\""
},
"shippingLatencyModal": {
"modal": {
"id": "shipping-latency-5",
"attributes": "aria-labbeledny=\"shipping-latency-title-5\""
},
"heading": {
"attributes": "id=\"shipping-latency-title-5\""
}
}
},
{
"tag": "li",
"price": {
"name": "price--with-special-price",
"context": {
"attributes": "aria-label=\"Product price\" tabindex=\"0\""
}
},
"stockButton": {
"attributes": "type=\"button\" data-modal-trigger=\"shipping-latency-6\""
},
"shippingLatencyModal": {
"modal": {
"id": "shipping-latency-6",
"attributes": "aria-labbeledny=\"shipping-latency-title-6\""
},
"heading": {
"attributes": "id=\"shipping-latency-title-6\""
}
}
},
{
"tag": "li",
"stockButton": {
"attributes": "type=\"button\" data-modal-trigger=\"shipping-latency-7\""
},
"shippingLatencyModal": {
"modal": {
"id": "shipping-latency-7",
"attributes": "aria-labbeledny=\"shipping-latency-title-7\""
},
"heading": {
"attributes": "id=\"shipping-latency-title-7\""
}
}
},
{
"tag": "li",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.",
"bulletList": false,
"stockButton": {
"attributes": "type=\"button\" data-modal-trigger=\"shipping-latency-8\""
},
"shippingLatencyModal": {
"modal": {
"id": "shipping-latency-8",
"attributes": "aria-labbeledny=\"shipping-latency-title-8\""
},
"heading": {
"attributes": "id=\"shipping-latency-title-8\""
}
}
},
{
"tag": "li",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.",
"bulletList": false,
"stockButton": {
"attributes": "type=\"button\" data-modal-trigger=\"shipping-latency-9\""
},
"shippingLatencyModal": {
"modal": {
"id": "shipping-latency-9",
"attributes": "aria-labbeledny=\"shipping-latency-title-9\""
},
"heading": {
"attributes": "id=\"shipping-latency-title-9\""
}
}
}
],
"pager": {
"class": "margin-vc-xl"
},
"categoryDescription": "<p>The LX600 Catadioptric telescope design uses a combination of mirrors and lenses to gather light and form a sharp image. There is a wide range of popular telescopes for amateur astronomers, such as Schmidt-Cassegrain and Maksutov-Cassegrain telescopes, that are of the catadioptric design. There are also catadioptric telescopes for sale that are designed primarily for astrophotography or imaging, like the Ritchey-Chretien (RC), Meade ACF, and Celestron EdgeHD.</p><p>The Schmidt-Cassegrain Telescope, or SCT, is the most popular design in the broader catadioptric telescope line-up. The Schmidt-Cassegrain has a folded optical system consisting of a primary mirror and a corrector plate with the secondary mirror right in the center. This design allows the telescope tube to be much more compact than a Newtonian reflector or a Refractor. The most popular Schmidt-Cassegrain has a large 8\" diameter mirror and an optical tube that is about 18\" long - a perfect combination of good light-gathering and easy-to-carry portability.</p><p>The Maksutov-Cassegrain, or Mak-Cass, catadioptric telescope looks very much like an SCT but has a longer focal length due to the way the light travels inside the tube. The Maksutov-Cassegrain really shines when used for terrestrial or astronomical viewing, especially when turned to the Moon or planets, but it isn't the best choice for deep-sky astrophotography due to its long focal length when compared other catadioptric designs.</p><p>Catadioptrics optimized for imaging are rising in popularity as more amateur astronomers fall under the spell of astrophotography. These telescopes have a wide, flat field that works nicely with today's larger format DSLR and dedicated astronomy cameras. While many catadioptric telescopes for sale can be used for both visual astronomy and imaging, amateur astronomers who prefer visual observations or have a camera with a smaller sensor don't necessarily require the edge-to-edge flatness that a larger sensor does.</p>"
}
$catalog-list__margin : 0 0 $spacer--extra-large !default;
$catalog-list__banner-padding : $spacer--large 0 !default;
$catalog-list__banner-padding\@medium : $spacer--medium 0 !default;
$catalog-list__banner-padding\@large : 0 !default;
$catalog-list__banner-margin\@large : 0 0 $spacer--medium 0;
$catalog-list__banner-border : $border-base !default;
$catalog-list__banner-border-width : 0 0 1px 0 !default;
$catalog-list__banner-border-width\@large : 0 !default;
$catalog-list__sidebar-width : 250px !default;
$catalog-list__sidebar-width\@xl : 310px !default;
$catalog-list__sidebar-margin\@large : 0 $spacer--medium 0 0 !default;
$catalog-list__sidebar-additionl-margin\@large : $spacer--medium $spacer--medium 0 0 !default;
$catalog-list__products-width : calc(100% - #{$catalog-list__sidebar-width + $spacer--medium}) !default;
$filters__item-margin : 0 !default;
$filters__item-margin\@large : 0 0 32px 0 !default;
.catalog-list {
display: flex;
flex-flow: column wrap;
margin: $catalog-list__margin;
@include mq($screen-l) {
display: flex;
grid-template-columns: $catalog-list__sidebar-width 1fr 1fr;
grid-template-rows: auto auto auto 1fr;
grid-template-areas:
'banner banner banner'
'title title title'
'sidebar products products'
'sidebar2 products products';
}
@include mq($screen-xl) {
grid-template-columns: $catalog-list__sidebar-width\@xl 1fr 1fr;
}
&__title {
width: 100%;
@include mq($screen-l) {
grid-area: title;
}
}
&__banner {
padding: $catalog-list__banner-padding;
border: $catalog-list__banner-border;
border-width: $catalog-list__banner-border-width;
@include mq($screen-m) {
padding: $catalog-list__banner-padding\@medium;
}
@include mq($screen-l) {
grid-area: banner;
padding: $catalog-list__banner-padding\@large;
margin: $catalog-list__banner-margin\@large;
border-width: $catalog-list__banner-border-width\@large;
}
}
&__products {
order: 2;
@include mq($screen-l) {
grid-area: products;
}
}
&__sidebar {
order: 1;
@include mq($screen-l) {
grid-area: sidebar;
margin: $catalog-list__sidebar-margin\@large;
z-index: $z-index-highest;
// necessary for tooltip proper visibility
}
}
&__category-description {
padding: $spacer--extra-large 0 $spacer--medium 0;
p {
line-height: 2;
}
}
&__sidebar-additional {
order: 3;
@include mq($screen-l) {
grid-area: sidebar2;
align-self: start;
margin: $catalog-list__sidebar-additionl-margin\@large;
}
}
.filters {
&__item {
margin: $filters__item-margin;
@include mq($screen-l) {
margin: $filters__item-margin\@large;
}
}
&__trigger--open {
position: fixed;
bottom: 10px;
width: calc(100% - 20px);
z-index: 49;
padding: 10px;
margin: 0;
left: 10px;
right: 10px;
border: 0;
box-shadow: 0 0 6px #555;
background-color: #555;
.icon,
.button__icon {
fill: #fff;
}
.button__text {
color: #fff;
}
&:hover {
background-color: #555;
opacity: 1;
.icon,
.button__icon {
fill: #fff;
}
.button__text {
color: #fff;
}
}
@include mq($screen-l) {
position: relative;
border-bottom: 1px solid #d8d8d8;
background-color: #fff;
width: 100%;
bottom: 0;
left: 0;
right: 0;
padding: 8px 8px 8px 0;
box-shadow: none;
border-radius: 0;
.icon,
.button__icon {
fill: $color-primary;
}
.button__text {
color: $color-primary;
}
&:hover {
background-color: #fff;
opacity: 1;
.icon,
.button__icon {
fill: $color-primary;
}
.button__text {
color: $color-primary;
}
}
}
}
}
}
.tiling--slider {
display: flex;
flex-direction: row;
margin: $spacer--small 0;
@include mq($screen-m) {
margin: $spacer--semi-medium 0;
}
@include mq($screen-l) {
margin: $spacer--semi-large 0;
}
}
There are no notes for this item.