<div class="page-wrapper">
<header class="header">
<div class="header__wrapper">
<div class="container">
<div class="header__top">
<div class="header__top--logo">
<a class="logo " href="#" aria-label="Homepage">
<img class="logo__image " src="/images/logo/logo.svg" alt="Alpaca Logo">
</a>
</div>
<div class="header__top--header-buttons">
<a class="keurmerk" href="#" aria-label="Thuiswinkel Waarborg">
<img class="keurmerk__image" src="/images/logo/waarborg.png" alt="Thuiswinkel Waarborg" width="95" height="30" />
</a>
<a class="header-button button--gray phonenumber" href="#" aria-label="Phone number">
<svg class="icon button__icon" role="img">
<title>Phone</title>
<use xlink:href="/images/icons-sprite.svg#custom-tel"></use>
</svg>
<span class="header-button__text">
Contact
</span>
</a>
<a class="header-button button--gray customer-account" href="#" aria-label="Customer Account">
<svg class="icon button__icon" role="img">
<title>User's account</title>
<use xlink:href="/images/icons-sprite.svg#custom-acc"></use>
</svg>
<span class="header-button__text">
Account
</span>
</a>
<div class="language-switch">
<button class="header-button button--white language-switch__link popup-trigger" data-popuptrigger="popup-language-switch" aria-label="vechtsportonline.nl">
NL
<svg class="icon icon button__icon" role="img">
<title>angle down</title>
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</button>
<dialog class="js--popup language-switch__dialog" data-popup="popup-language-switch" role="alertdialog">
<a class="language-switch__dialog--link" href="fightsportonline.com" aria-label="fightsportonline.com">
ENG
</a>
<a class="language-switch__dialog--link" href="kampfsportonline.de" aria-label="kampfsportonline.de">
DE
</a>
</dialog>
</div>
<div class="minicart">
<button class="header-button button--minicart minicart__link popup-trigger" data-popuptrigger="popup-minicart" aria-label="">
<svg class="icon button__icon" role="img">
<title>custom cart</title>
<use xlink:href="/images/icons-sprite.svg#custom-cart"></use>
</svg>
<span class="counter qty minicart__counter">
<span class="counter-number minicart__counter--qty">
10
</span>
</span>
</button>
</div>
</div>
</div>
<div class="header__bottom">
<div class="side-menu ">
<button type="button" class="side-menu__trigger" aria-label="Side menu open">
<svg class="icon side-menu__trigger-icon" role="img">
<title>Mobile menu</title>
<use xlink:href="/images/icons-sprite.svg#mobile-menu"></use>
</svg>
</button>
<span class="side-menu__trigger-text">
Categorieën
</span>
<div class="side-menu__content">
<div class="side-menu__trigger-wrapper">
<button type="button" class="side-menu__trigger" aria-label="Side menu close">
<svg class="icon side-menu__trigger-icon" role="img">
<title>Close</title>
<use xlink:href="/images/icons-sprite.svg#close"></use>
</svg>
<span class="header-button__text">
Menu
</span>
</button>
</div>
<div id="dropdown-side-menu" class="dropdown-list side-menu__dropdown">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
All
</a>
</li>
<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-side-menu'));
</script>
</div>
<div class="side-menu__overlay"></div>
</div>
<script src="/components/raw/side-menu/side-menu.js" defer></script>
<div class="mega-menu">
<ul class="mega-menu__list">
<li class="mega-menu__item mega-menu__item--parent">
<a href="/furniture" class="mega-menu__link">
Furniture
</a>
<ul class="mega-menu__inner-list mega-menu__inner-list--level1">
<li class="mega-menu__inner-item mega-menu__inner-item--level1 mega-menu__inner-item--image">
<a class="mega-menu__inner-link" href="#">
<div class="lazyload-wrapper ">
<img class="image lazyload " src="" data-src="/images/megamenu/menu-image.jpg" alt="">
</div>
<button class="button button--category" type="button" aria-label="click to do something">
Bekijk categorie
<svg class="icon button__icon" role="img">
<title>angle-right</title>
<use xlink:href="/images/icons-sprite.svg#angle-right"></use>
</svg>
</button>
</a>
</li>
<li class="mega-menu__inner-item mega-menu__inner-item--level1 mega-menu__inner-item--parent">
<a href="/example" class="mega-menu__inner-link">
Example
</a>
<ul class="list mega-menu__inner-list mega-menu__inner-list--level2">
<li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
<a href="" class="link mega-menu__inner-link">
</a>
</li>
<li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
<a href="" class="link mega-menu__inner-link">
Category name
</a>
</li>
<li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
<a href="" class="link mega-menu__inner-link">
</a>
</li>
<li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
<a href="" class="link mega-menu__inner-link">
Category long name
</a>
</li>
<li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
<a href="" class="link mega-menu__inner-link">
</a>
</li>
</ul>
</li>
<li class="mega-menu__inner-item mega-menu__inner-item--level1 mega-menu__inner-item--parent">
<a href="/example" class="mega-menu__inner-link">
Example2
</a>
<ul class="list mega-menu__inner-list mega-menu__inner-list--level2">
<li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
<a href="" class="link mega-menu__inner-link">
Category name
</a>
</li>
<li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
<a href="" class="link mega-menu__inner-link">
</a>
</li>
<li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
<a href="" class="link mega-menu__inner-link">
</a>
</li>
<li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
<a href="" class="link mega-menu__inner-link">
Category long very name
</a>
</li>
<li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
<a href="" class="link mega-menu__inner-link">
</a>
</li>
<li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
<a href="" class="link mega-menu__inner-link">
Category long very name
</a>
</li>
</ul>
</li>
<li class="mega-menu__inner-item mega-menu__inner-item--level1 mega-menu__inner-item--parent">
<a href="/example" class="mega-menu__inner-link">
Example3
</a>
<ul class="list mega-menu__inner-list mega-menu__inner-list--level2">
<li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
<a href="" class="link mega-menu__inner-link">
Category name
</a>
</li>
<li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
<a href="" class="link mega-menu__inner-link">
</a>
</li>
<li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
<a href="" class="link mega-menu__inner-link">
</a>
</li>
<li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
<a href="" class="link mega-menu__inner-link">
Category long very name
</a>
</li>
<li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
<a href="" class="link mega-menu__inner-link">
</a>
</li>
<li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
<a href="" class="link mega-menu__inner-link">
Category long very name
</a>
</li>
</ul>
</li>
<li class="mega-menu__inner-item mega-menu__inner-item--level1 mega-menu__inner-item--parent">
<a href="/example" class="mega-menu__inner-link">
Example long name
</a>
<ul class="list mega-menu__inner-list mega-menu__inner-list--level2">
<li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
<a href="" class="link mega-menu__inner-link">
Category name
</a>
</li>
<li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
<a href="" class="link mega-menu__inner-link">
</a>
</li>
<li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
<a href="" class="link mega-menu__inner-link">
</a>
</li>
<li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
<a href="" class="link mega-menu__inner-link">
Category long very name
</a>
</li>
<li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
<a href="" class="link mega-menu__inner-link">
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="mega-menu__item">
<a href="/accessories" class="mega-menu__link">
Accessories
</a>
</li>
<li class="mega-menu__item">
<a href="/world-of" class="mega-menu__link">
World of
</a>
</li>
</ul>
</div>
<script src="/components/raw/mega-menu/mega-menu.js"></script>
<div class="header__search">
<dialog class="minicart-content js--popup " data-popup="popup-minicart" role="alertdialog">
<div class="minicart-content__bar"></div>
<div class="minicart-content__wrapper">
<div class="minicart-content__total">
<div class="minicart-content__total-text">
2 producten in winkelwagen
</div>
<div class="minicart-content__total-close">
<svg class="icon minicart-content__total-close__icon js--popup__close-button" role="img">
<title>close</title>
<use xlink:href="/images/icons-sprite.svg#close"></use>
</svg>
</div>
</div>
<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/VENUM-CONTENDER2.jpg" alt="Venum (Kick)bokshandschoenen Contender 2.0">
</div>
</div>
<div class="minicart-product__info">
<h3 class="minicart-product__name">
<a class="link link--invert minicart-product__link" href="#">
UFC MMA Handschoenen zonder duim
</a>
</h3>
<p class="minicart-product__description">
Deze leren wedstrijdhandschoenen van UFC zijn de enige handschoenen die gedragen mogen worden door de UFC vechters in Octagon!
</p>
<div id="test-1" class="dropdown-list minicart-product__attributes">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
">
< class="dropdown-list__label " aria-expanded="false" aria-controls="see-details-1">
</>
</li>
</ul>
</div>
<script type="text/javascript">
new DropdownList(document.getElementById('test-1'));
</script>
<div class="minicart-product__bottom">
<div class="minicart-product__qty">
<div class="quantity-update ">
<input class="quantity-update__input " type="number" id="qty" min="1" value="1" aria-label="Change the quantity" />
<div class="quantity-update__buttons">
<button class="button button--icon quantity-update__button quantity-update__button--plus" type="button" aria-label="Increase the quantity">
<svg class="icon button__icon minicart-product__qty--buttonIcon" role="img">
<title>Arrow up</title>
<use xlink:href="/images/icons-sprite.svg#angle-up"></use>
</svg>
</button>
<button class="button button--icon quantity-update__button quantity-update__button--minus quantity-update__button--disabled" type="button" aria-label="Decrease the quantity">
<svg class="icon button__icon minicart-product__qty--buttonIcon" role="img">
<title>Arrow down</title>
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</button>
</div>
</div>
<script src="/components/raw/button/../quantity-update/quantity-update.js"></script>
</div>
<div class="minicart-product__price">
€ 109,95
</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/VENUM-CONTENDER2.jpg" alt="Venum (Kick)bokshandschoenen Contender 2.0">
</div>
</div>
<div class="minicart-product__info">
<h3 class="minicart-product__name">
<a class="link link--invert minicart-product__link" href="#">
Venum (Kick)bokshandschoenen Contender 2.0
</a>
</h3>
<p class="minicart-product__description">
Dit zijn de nieuwe bestsellers onder de kickboxhandschoenen van Venum! Betaalbare (kick)bokshandschoenen van Venum, zonder concessies aan kwaliteit!
</p>
<div id="test-1" class="dropdown-list minicart-product__attributes">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<button class="dropdown-list__label minicart-product__attributes-button" aria-expanded="false" aria-controls="see-details" aria-controls="see-details">
Bekijk Details
<svg class="icon dropdown-list__icon" role="img">
<title>Arrow down</title>
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</button>
<div id="see-details" class="dropdown-list__content minicart-product__attributes-button" aria-hidden="true">
<dl class="list list--description minicart-product__attributes-list">
<dt class="list__label">Maat</dt>
<dd class="list__value">12 oz</dd>
<dt class="list__label">Kleur</dt>
<dd class="list__value">Zwart/Grijs-Wit</dd>
</dl>
</div>
</li>
</ul>
</div>
<script type="text/javascript">
new DropdownList(document.getElementById('test-1'));
</script>
<div class="minicart-product__bottom">
<div class="minicart-product__qty">
<div class="quantity-update ">
<input class="quantity-update__input " type="number" id="qty" min="1" value="1" aria-label="Change the quantity" />
<div class="quantity-update__buttons">
<button class="button button--icon quantity-update__button quantity-update__button--plus" type="button" aria-label="Increase the quantity">
<svg class="icon button__icon minicart-product__qty--buttonIcon" role="img">
<title>Arrow up</title>
<use xlink:href="/images/icons-sprite.svg#angle-up"></use>
</svg>
</button>
<button class="button button--icon quantity-update__button quantity-update__button--minus quantity-update__button--disabled" type="button" aria-label="Decrease the quantity">
<svg class="icon button__icon minicart-product__qty--buttonIcon" role="img">
<title>Arrow down</title>
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</button>
</div>
</div>
<script src="/components/raw/button/../quantity-update/quantity-update.js"></script>
</div>
<div class="minicart-product__price">
44,95
</div>
</div>
</div>
</div>
</div>
<div class="minicart-content__summary">
<div class="minicart-content__summary-label">
Totaal
</div>
<div class="minicart-content__summary-value">
€ 219,90
</div>
</div>
<div class="minicart-content__actions">
<div class="row">
<div class="col-xs-7">
<button class="button button minicart-content__actions--button minicart-content__actions--button-showcart" type="button">
Bekijk en bewerk Winkelwagen
<svg class="icon button__icon minicart-content__actions--button-icon" role="img">
<title>Arrow right</title>
<use xlink:href="/images/icons-sprite.svg#angle-right"></use>
</svg>
</button>
</div>
<div class="col-xs-5">
<button class="button button minicart-content__actions--button minicart-content__actions--button-checkout" type="button">
Ga naar afrekenen
<svg class="icon button__icon minicart-content__actions--button-icon" role="img">
<title>Arrow right</title>
<use xlink:href="/images/icons-sprite.svg#angle-right"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
</dialog>
<form class="form minisearch">
<div class="field search">
<div class="input input--search">
<span class="form-check" aria-label="form-check-field-id">
<svg class="icon brief-info__icon" role="img">
<title>USP Check</title>
<use xlink:href="/images/icons-sprite.svg#usp-check"></use>
</svg>
</span>
<label class="
label
" for="field-id">
Label text
</label>
<input class="input__field " id="field-id" name="field-name" type="text" placeholder="Zoeken">
</div>
<div class="search-autocomplete"></div>
</div>
<div class="actions">
<button type="submit" title="Zoek" class="search">
<svg class="icon " role="img">
<title>zoeken</title>
<use xlink:href="/images/icons-sprite.svg#search"></use>
</svg>
<span>Zoeken</span>
</button>
</div>
</form>
</div>
</div>
<div class="header__breadcrumbs">
<nav class="breadcrumbs breadcrumbs--white " aria-label="Breadcrumbs" role="navigation">
<ol class="breadcrumbs__list breadcrumbs--white__list ">
<li class="breadcrumbs__item breadcrumbs--white__item">
<a href="#" class="breadcrumbs--white__link breadcrumbs__link breadcrumbs__link--active link--invert">
Home
</a>
</li>
<li class="breadcrumbs__item breadcrumbs--white__item">
<a href="#" class="breadcrumbs--white__link breadcrumbs__link link--invert">
Handschoenen
</a>
</li>
<li class="breadcrumbs__item breadcrumbs--white__item">
<a href="#" class="breadcrumbs--white__link breadcrumbs__link link--invert">
Kickboks handschoenen
</a>
</li>
<li class="breadcrumbs__item breadcrumbs--white__item">
<a href="#" class="breadcrumbs--white__link breadcrumbs__link link--invert">
Venum Contender 2.0 Zwart - S
</a>
</li>
</ol>
</nav>
</div>
<div class="hero ">
<div class="hero__wrapper container">
<div class="hero__text">
<h1 class="hero__text--heading--title">
kom naar onze fysieke winkel!
</h1>
<h4 class="hero__text--heading--description">
</h4>
<a class="button button--skew" href="#" title="I am a link button">
Over ons
<svg class="icon button__icon" role="img">
<title>angle-right</title>
<use xlink:href="/images/icons-sprite.svg#angle-right"></use>
</svg>
</a>
</div>
<div class="hero__image">
<div class="">
<img class="image " src="/images/product/UFC_MMA_GLOVES.png" alt="" loading="lazy">
</div>
</div>
</div>
</div>
</div>
<div class="header__background header__background--category-page"></div>
</div>
</header>
<script src="/components/raw/header/../popup/popup.js"></script>
<main class="container">
<div class="catalog-list__wrapper">
<div class="catalog-list__filters">
<div class="filters ">
<h2 class="filters__heading">
<svg class="icon filters__heading--icon" aria-hidden="true" role="img">
<title>filter</title>
<use xlink:href="/images/icons-sprite.svg#custom-filter"></use>
</svg>
Filters
</h2>
<button type="button" class="filters__switcher filters__heading" data-state-current="hidden">
<svg class="icon filters__switcher-icon" role="img">
<title>filter</title>
<use xlink:href="/images/icons-sprite.svg#custom-filter"></use>
</svg>
Filters
</button>
<div class="
filters__list
filters__list--mobile-hidden
dropdown-list
dropdown-list--secondary
">
<div class="filters__active">
<div class="filters__active--heading">
<h3 class="filter__title">
Actieve filters
</h3>
<button class="button button--icon filters__close" type="button" aria-label="close filters button, click to close the filters">
<svg class="icon filters__close-icon button__icon " role="img">
<title>Close</title>
<use xlink:href="/images/icons-sprite.svg#close"></use>
</svg>
</button>
</div>
<ul class="active-filters list ">
<li class="active-filters__item list__item ">
<a href="#" class="active-filters__remove " aria-label="Disable filter: Label - Value" title="Disable filter: Label - Value">
<svg class="icon active-filters__remove-icon" role="img">
<title>Close</title>
<use xlink:href="/images/icons-sprite.svg#close"></use>
</svg>
</a>
<span class="active-filters__label">
Kleur:
</span>
<span class="active-filters__value">
Rood
</span>
</li>
<li class="active-filters__item list__item ">
<a href="#" class="active-filters__remove " aria-label="Disable filter: Label - Value" title="Disable filter: Label - Value">
<svg class="icon active-filters__remove-icon" role="img">
<title>Close</title>
<use xlink:href="/images/icons-sprite.svg#close"></use>
</svg>
</a>
<span class="active-filters__label">
Maat:
</span>
<span class="active-filters__value">
S
</span>
</li>
<li class="active-filters__item list__item ">
<a href="#" class="active-filters__remove " aria-label="Disable filter: Label - Value" title="Disable filter: Label - Value">
<svg class="icon active-filters__remove-icon" role="img">
<title>Close</title>
<use xlink:href="/images/icons-sprite.svg#close"></use>
</svg>
</a>
<span class="active-filters__label">
Merk:
</span>
<span class="active-filters__value">
UFC
</span>
</li>
<a href="#" class="active-filters__clear-all " title="Wis alle filters">
Wis alle filters
</a>
</ul>
</div>
<div>
<div class="filter ">
<h3 class="filter__title">
Zoek op merk
</h3>
<div class="filter__content">
<div class="filter__list filter__list--select">
<div class="select ">
<label class="label " for="brand">
Show
</label>
<select id="brand" class="select__field select__field--red " name="brand">
<option value="1">
Kies merk
</option>
<option value="2">
Venum
</option>
<option value="3">
Joya
</option>
<option value="4">
Booster
</option>
<option value="5">
Super Pro
</option>
<option value="6">
Vechtsport Online
</option>
</select>
</div>
</div>
</div>
</div>
<div class="filter ">
<h3 class="filter__title">
Maat
</h3>
<div class="filter__content">
<div class="filter__list filter__list--select">
<div class="select ">
<label class="label " for="size">
Show
</label>
<select id="size" class="select__field select__field--red " name="size">
<option value="1">
Kies je maat
</option>
<option value="2">
Extra small
</option>
<option value="3">
Small
</option>
<option value="4">
Medium
</option>
<option value="5">
Large
</option>
<option value="6">
Extra large
</option>
</select>
</div>
</div>
</div>
</div>
<div class="filter ">
<h3 class="filter__title">
Prijs
</h3>
<div class="range-filter filter__range">
<div class="smile-es-range-slider" data-role="range-price-slider-price">
<div class="range-filter__labels">
<div data-role="from-label">€ 10</div>
<div data-role="to-label">€ 150</div>
</div>
<div data-role="slider-bar" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false">
<div class="ui-slider-range ui-widget-header ui-corner-all" style="left: 0%; width: 100%;"></div>
<a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 0%;"></a>
<a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 100%;"></a>
</div>
<div class="actions-toolbar">
<div data-role="message-box">12 producten</div>
<div class="actions-primary">
<a class="action primary button button--secondary" data-role="apply-range">
<span>Filteren</span>
</a>
</div>
</div>
</div>
</div>
<script src="/components/raw/range/range.js"></script>
</div>
<div class="filter ">
<h3 class="filter__title">
Kleur
</h3>
<div class="filter__content">
<div class="filter__list filter__list--swatches">
<div class="filter__color-item">
<a href='#' class="filter__color-option filter__color-option--active">
<div class="filter__color-sample" style="background: #000"></div>
</a>
</div>
<div class="filter__color-item">
<a href='#' class="filter__color-option filter__color-option">
<div class="filter__color-sample" style="background: red"></div>
</a>
</div>
<div class="filter__color-item">
<a href='#' class="filter__color-option filter__color-option">
<div class="filter__color-sample" style="background: #5cb85c"></div>
</a>
</div>
<div class="filter__color-item">
<a href='#' class="filter__color-option filter__color-option">
<div class="filter__color-sample" style="background: #0275d8"></div>
</a>
</div>
<div class="filter__color-item">
<a href='#' class="filter__color-option filter__color-option">
<div class="filter__color-sample" style="background: #f1a83b"></div>
</a>
</div>
<div class="filter__color-item">
<a href='#' class="filter__color-option filter__color-option">
<div class="filter__color-sample" style="background: #ff5e98"></div>
</a>
</div>
<div class="filter__color-item">
<a href='#' class="filter__color-option filter__color-option">
<div class="filter__color-sample" style="background: #8f27b4"></div>
</a>
</div>
</div>
</div>
</div>
<div class="filter ">
<h3 class="filter__title">
Type Bokszak
</h3>
<div class="filter__content">
<div class="filter__list">
<div>
<a href="#" class="checkbox checkbox--link ">
<svg class="checkbox__icon">
<use xlink:href="/images/icons-sprite.svg#checked"></use>
</svg>
<span class="checkbox__label">
Uppercut bags
</span>
</a>
</div>
<div>
<a href="#" class="checkbox checkbox--link checkbox--link-checked">
<svg class="checkbox__icon">
<use xlink:href="/images/icons-sprite.svg#checked"></use>
</svg>
<span class="checkbox__label">
Angle bags
</span>
</a>
</div>
<div>
<a href="#" class="checkbox checkbox--link ">
<svg class="checkbox__icon">
<use xlink:href="/images/icons-sprite.svg#checked"></use>
</svg>
<span class="checkbox__label">
Water gevulde stootzakken
</span>
</a>
</div>
<div>
<a href="#" class="checkbox checkbox--link ">
<svg class="checkbox__icon">
<use xlink:href="/images/icons-sprite.svg#checked"></use>
</svg>
<span class="checkbox__label">
Hangende bokszakken
</span>
</a>
</div>
<div>
<a href="#" class="checkbox checkbox--link ">
<svg class="checkbox__icon">
<use xlink:href="/images/icons-sprite.svg#checked"></use>
</svg>
<span class="checkbox__label">
Staande bokszakken
</span>
</a>
</div>
<div>
<a href="#" class="checkbox checkbox--link ">
<svg class="checkbox__icon">
<use xlink:href="/images/icons-sprite.svg#checked"></use>
</svg>
<span class="checkbox__label">
Dummies
</span>
</a>
</div>
<div>
<a href="#" class="checkbox checkbox--link ">
<svg class="checkbox__icon">
<use xlink:href="/images/icons-sprite.svg#checked"></use>
</svg>
<span class="checkbox__label">
Bevestigingsmateriaal
</span>
</a>
</div>
<div>
<a href="#" class="checkbox checkbox--link ">
<svg class="checkbox__icon">
<use xlink:href="/images/icons-sprite.svg#checked"></use>
</svg>
<span class="checkbox__label">
Overige
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="/components/raw/filters/../filters/filters.js"></script>
</div>
<div class="catalog-list__toolbar">
<div class="toolbar ">
<div class="toolbar__limiter toolbar__limiter--relative">
<div class="select toolbar__limiter-wrapper">
<label class="label toolbar__limiter-label" for="Sorteren op">
Toon
</label>
<select id="Sorteren op" class="select__field toolbar__limiter-select " name="sort-by">
<option value="12">
12
</option>
<option value="24">
24
</option>
<option value="36">
36
</option>
</select>
</div>
</div>
<div class="toolbar__sorter">
<div class="select toolbar__sorter-wrapper">
<label class="label toolbar__sorter-label" for="sort-by">
Sorteren op
</label>
<select id="sort-by" class="select__field toolbar__sorter-select " name="sort-by">
<option value="prijs high to low">
Prijs hoog - laag
</option>
<option value="prijs low to high">
Prijs laag - hoog
</option>
<option value="new">
Nieuw
</option>
<option value="best reviewd">
Best beoordeeld
</option>
</select>
</div>
</div>
</div>
</div>
<div class="catalog-list__grid">
<div class="catalog-grid">
<div class="catalog-grid-item " tabindex="0">
<a href="#" class="catalog-grid-item__link" tabindex="-1">
<div class="lazyload-wrapper catalog-grid-item__image-wrapper">
<img class="image lazyload " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/images/catalog-grid-item/product-1_320_312.jpg" alt="image alt text">
</div>
</a>
<section class="catalog-grid-item__details">
<h2 class="catalog-grid-item__name">
<a href="#" class="catalog-grid-item__name-link">
Some product name - very long name because that's important
</a>
</h2>
<div class="catalog-grid-item__price">
<div class="price ">
<span class="price__value ">
$
1 400
</span>
</div>
</div>
<div class="rating catalog-grid-item__rating" aria-label="Average rating: 72%" title="4/5 sterren" tabindex="0">
<div class="rating__star " role="presentation" style="width: 72%">
<span class="
rating__indicator
"></span>
</div>
</div>
<div class="rating__title">
4/5 sterren
</div>
<div class="catalog-grid-item__options">
<div class="swatch ">
<div class="swatch__wrapper" aria-label="Size" tabindex="0" aria-activedescendant="opt-size-s" aria-required="true" role="listbox" aria-invalid="false">
<div class="swatch__option-container " id="opt-size-xs" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option ">
XS
</div>
</div>
<div class="swatch__option-container selected" id="opt-size-s" tabindex="0" role="option" aria-selected="true">
<div class="swatch__option ">
S
</div>
</div>
<div class="swatch__option-container " id="opt-size-m" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option ">
M
</div>
</div>
<div class="swatch__option-container " id="opt-size-l" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option ">
L
</div>
</div>
<div class="swatch__option-container " id="opt-size-xl" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option ">
XL
</div>
</div>
</div>
</div>
<script src="/components/raw/swatch/swatch.js"></script>
<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 swatch__option--image" style="background-image: url(../../images/swatch/swatch-orange.jpg)">
</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 swatch__option--image" style="background-image: url(../../images/swatch/swatch-green.jpg)">
</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 swatch__option--image" style="background-image: url(../../images/swatch/swatch-red.jpg)">
</div>
</div>
<div class="swatch__option-container " id="opt-color-white-4" aria-label="White" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option swatch__option--image" style="background-image: url(../../images/swatch/swatch-white.jpg)">
</div>
</div>
</div>
</div>
<script src="/components/raw/swatch/swatch.js"></script>
</div>
<div class="catalog-grid-item__actions">
<form action="#" class="catalog-grid-item__primary-form">
<button class="button button button--secondary catalog-grid-item__primary-action">
<span class="catalog-grid-item__cart-text">Add to Cart</span>
<svg class="icon icon catalog-grid-item__cart-icon" role="img">
<title>Shopping cart</title>
<use xlink:href="/images/icons-sprite.svg#shopping-cart"></use>
</svg>
</button>
</form>
<div class="catalog-grid-item__secondary-action">
<button class="button button--icon" type="button" aria-label="Add to Wish List">
<svg class="icon button__icon" role="img">
<title>Heart</title>
<use xlink:href="/images/icons-sprite.svg#heart"></use>
</svg>
</button>
<button class="button button--icon" type="button" aria-label="Add to compare">
<svg class="icon button__icon" role="img">
<title>Compare</title>
<use xlink:href="/images/icons-sprite.svg#compare"></use>
</svg>
</button>
</div>
</div>
</section>
</div>
<div class="catalog-grid-item " tabindex="0">
<a href="#" class="catalog-grid-item__link" tabindex="-1">
<div class="lazyload-wrapper catalog-grid-item__image-wrapper">
<img class="image lazyload " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/images/catalog-grid-item/product-1_320_312.jpg" alt="image alt text">
</div>
</a>
<section class="catalog-grid-item__details">
<h2 class="catalog-grid-item__name">
<a href="#" class="catalog-grid-item__name-link">
Some product name - very long name because that's important
</a>
</h2>
<div class="catalog-grid-item__price">
<div class="price ">
<span class="price__value ">
$
1 400
</span>
</div>
</div>
<div class="rating catalog-grid-item__rating" aria-label="Average rating: 72%" title="4/5 sterren" tabindex="0">
<div class="rating__star " role="presentation" style="width: 72%">
<span class="
rating__indicator
"></span>
</div>
</div>
<div class="rating__title">
4/5 sterren
</div>
<div class="catalog-grid-item__options">
<div class="swatch ">
<div class="swatch__wrapper" aria-label="Size" tabindex="0" aria-activedescendant="opt-size-s" aria-required="true" role="listbox" aria-invalid="false">
<div class="swatch__option-container " id="opt-size-xs" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option ">
XS
</div>
</div>
<div class="swatch__option-container selected" id="opt-size-s" tabindex="0" role="option" aria-selected="true">
<div class="swatch__option ">
S
</div>
</div>
<div class="swatch__option-container " id="opt-size-m" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option ">
M
</div>
</div>
<div class="swatch__option-container " id="opt-size-l" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option ">
L
</div>
</div>
<div class="swatch__option-container " id="opt-size-xl" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option ">
XL
</div>
</div>
</div>
</div>
<script src="/components/raw/swatch/swatch.js"></script>
<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 swatch__option--image" style="background-image: url(../../images/swatch/swatch-orange.jpg)">
</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 swatch__option--image" style="background-image: url(../../images/swatch/swatch-green.jpg)">
</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 swatch__option--image" style="background-image: url(../../images/swatch/swatch-red.jpg)">
</div>
</div>
<div class="swatch__option-container " id="opt-color-white-4" aria-label="White" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option swatch__option--image" style="background-image: url(../../images/swatch/swatch-white.jpg)">
</div>
</div>
</div>
</div>
<script src="/components/raw/swatch/swatch.js"></script>
</div>
<div class="catalog-grid-item__actions">
<form action="#" class="catalog-grid-item__primary-form">
<button class="button button button--secondary catalog-grid-item__primary-action">
<span class="catalog-grid-item__cart-text">Add to Cart</span>
<svg class="icon icon catalog-grid-item__cart-icon" role="img">
<title>Shopping cart</title>
<use xlink:href="/images/icons-sprite.svg#shopping-cart"></use>
</svg>
</button>
</form>
<div class="catalog-grid-item__secondary-action">
<button class="button button--icon" type="button" aria-label="Add to Wish List">
<svg class="icon button__icon" role="img">
<title>Heart</title>
<use xlink:href="/images/icons-sprite.svg#heart"></use>
</svg>
</button>
<button class="button button--icon" type="button" aria-label="Add to compare">
<svg class="icon button__icon" role="img">
<title>Compare</title>
<use xlink:href="/images/icons-sprite.svg#compare"></use>
</svg>
</button>
</div>
</div>
</section>
</div>
<div class="catalog-grid-item " tabindex="0">
<a href="#" class="catalog-grid-item__link" tabindex="-1">
<div class="lazyload-wrapper catalog-grid-item__image-wrapper">
<img class="image lazyload " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/images/catalog-grid-item/product-1_320_312.jpg" alt="image alt text">
</div>
</a>
<section class="catalog-grid-item__details">
<h2 class="catalog-grid-item__name">
<a href="#" class="catalog-grid-item__name-link">
Some product name - very long name because that's important
</a>
</h2>
<div class="catalog-grid-item__price">
<div class="price ">
<span class="price__value ">
$
1 400
</span>
</div>
</div>
<div class="rating catalog-grid-item__rating" aria-label="Average rating: 72%" title="4/5 sterren" tabindex="0">
<div class="rating__star " role="presentation" style="width: 72%">
<span class="
rating__indicator
"></span>
</div>
</div>
<div class="rating__title">
4/5 sterren
</div>
<div class="catalog-grid-item__options">
<div class="swatch ">
<div class="swatch__wrapper" aria-label="Size" tabindex="0" aria-activedescendant="opt-size-s" aria-required="true" role="listbox" aria-invalid="false">
<div class="swatch__option-container " id="opt-size-xs" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option ">
XS
</div>
</div>
<div class="swatch__option-container selected" id="opt-size-s" tabindex="0" role="option" aria-selected="true">
<div class="swatch__option ">
S
</div>
</div>
<div class="swatch__option-container " id="opt-size-m" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option ">
M
</div>
</div>
<div class="swatch__option-container " id="opt-size-l" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option ">
L
</div>
</div>
<div class="swatch__option-container " id="opt-size-xl" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option ">
XL
</div>
</div>
</div>
</div>
<script src="/components/raw/swatch/swatch.js"></script>
<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 swatch__option--image" style="background-image: url(../../images/swatch/swatch-orange.jpg)">
</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 swatch__option--image" style="background-image: url(../../images/swatch/swatch-green.jpg)">
</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 swatch__option--image" style="background-image: url(../../images/swatch/swatch-red.jpg)">
</div>
</div>
<div class="swatch__option-container " id="opt-color-white-4" aria-label="White" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option swatch__option--image" style="background-image: url(../../images/swatch/swatch-white.jpg)">
</div>
</div>
</div>
</div>
<script src="/components/raw/swatch/swatch.js"></script>
</div>
<div class="catalog-grid-item__actions">
<form action="#" class="catalog-grid-item__primary-form">
<button class="button button button--secondary catalog-grid-item__primary-action">
<span class="catalog-grid-item__cart-text">Add to Cart</span>
<svg class="icon icon catalog-grid-item__cart-icon" role="img">
<title>Shopping cart</title>
<use xlink:href="/images/icons-sprite.svg#shopping-cart"></use>
</svg>
</button>
</form>
<div class="catalog-grid-item__secondary-action">
<button class="button button--icon" type="button" aria-label="Add to Wish List">
<svg class="icon button__icon" role="img">
<title>Heart</title>
<use xlink:href="/images/icons-sprite.svg#heart"></use>
</svg>
</button>
<button class="button button--icon" type="button" aria-label="Add to compare">
<svg class="icon button__icon" role="img">
<title>Compare</title>
<use xlink:href="/images/icons-sprite.svg#compare"></use>
</svg>
</button>
</div>
</div>
</section>
</div>
<div class="catalog-grid-item " tabindex="0">
<a href="#" class="catalog-grid-item__link" tabindex="-1">
<div class="lazyload-wrapper catalog-grid-item__image-wrapper">
<img class="image lazyload " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/images/catalog-grid-item/product-1_320_312.jpg" alt="image alt text">
</div>
</a>
<section class="catalog-grid-item__details">
<h2 class="catalog-grid-item__name">
<a href="#" class="catalog-grid-item__name-link">
Some product name - very long name because that's important
</a>
</h2>
<div class="catalog-grid-item__price">
<div class="price ">
<span class="price__value ">
$
1 400
</span>
</div>
</div>
<div class="rating catalog-grid-item__rating" aria-label="Average rating: 72%" title="4/5 sterren" tabindex="0">
<div class="rating__star " role="presentation" style="width: 72%">
<span class="
rating__indicator
"></span>
</div>
</div>
<div class="rating__title">
4/5 sterren
</div>
<div class="catalog-grid-item__options">
<div class="swatch ">
<div class="swatch__wrapper" aria-label="Size" tabindex="0" aria-activedescendant="opt-size-s" aria-required="true" role="listbox" aria-invalid="false">
<div class="swatch__option-container " id="opt-size-xs" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option ">
XS
</div>
</div>
<div class="swatch__option-container selected" id="opt-size-s" tabindex="0" role="option" aria-selected="true">
<div class="swatch__option ">
S
</div>
</div>
<div class="swatch__option-container " id="opt-size-m" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option ">
M
</div>
</div>
<div class="swatch__option-container " id="opt-size-l" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option ">
L
</div>
</div>
<div class="swatch__option-container " id="opt-size-xl" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option ">
XL
</div>
</div>
</div>
</div>
<script src="/components/raw/swatch/swatch.js"></script>
<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 swatch__option--image" style="background-image: url(../../images/swatch/swatch-orange.jpg)">
</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 swatch__option--image" style="background-image: url(../../images/swatch/swatch-green.jpg)">
</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 swatch__option--image" style="background-image: url(../../images/swatch/swatch-red.jpg)">
</div>
</div>
<div class="swatch__option-container " id="opt-color-white-4" aria-label="White" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option swatch__option--image" style="background-image: url(../../images/swatch/swatch-white.jpg)">
</div>
</div>
</div>
</div>
<script src="/components/raw/swatch/swatch.js"></script>
</div>
<div class="catalog-grid-item__actions">
<form action="#" class="catalog-grid-item__primary-form">
<button class="button button button--secondary catalog-grid-item__primary-action">
<span class="catalog-grid-item__cart-text">Add to Cart</span>
<svg class="icon icon catalog-grid-item__cart-icon" role="img">
<title>Shopping cart</title>
<use xlink:href="/images/icons-sprite.svg#shopping-cart"></use>
</svg>
</button>
</form>
<div class="catalog-grid-item__secondary-action">
<button class="button button--icon" type="button" aria-label="Add to Wish List">
<svg class="icon button__icon" role="img">
<title>Heart</title>
<use xlink:href="/images/icons-sprite.svg#heart"></use>
</svg>
</button>
<button class="button button--icon" type="button" aria-label="Add to compare">
<svg class="icon button__icon" role="img">
<title>Compare</title>
<use xlink:href="/images/icons-sprite.svg#compare"></use>
</svg>
</button>
</div>
</div>
</section>
</div>
<div class="catalog-grid-item " tabindex="0">
<a href="#" class="catalog-grid-item__link" tabindex="-1">
<div class="lazyload-wrapper catalog-grid-item__image-wrapper">
<img class="image lazyload " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/images/catalog-grid-item/product-1_320_312.jpg" alt="image alt text">
</div>
</a>
<section class="catalog-grid-item__details">
<h2 class="catalog-grid-item__name">
<a href="#" class="catalog-grid-item__name-link">
Some product name - very long name because that's important
</a>
</h2>
<div class="catalog-grid-item__price">
<div class="price ">
<span class="price__value ">
$
1 400
</span>
</div>
</div>
<div class="rating catalog-grid-item__rating" aria-label="Average rating: 72%" title="4/5 sterren" tabindex="0">
<div class="rating__star " role="presentation" style="width: 72%">
<span class="
rating__indicator
"></span>
</div>
</div>
<div class="rating__title">
4/5 sterren
</div>
<div class="catalog-grid-item__options">
<div class="swatch ">
<div class="swatch__wrapper" aria-label="Size" tabindex="0" aria-activedescendant="opt-size-s" aria-required="true" role="listbox" aria-invalid="false">
<div class="swatch__option-container " id="opt-size-xs" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option ">
XS
</div>
</div>
<div class="swatch__option-container selected" id="opt-size-s" tabindex="0" role="option" aria-selected="true">
<div class="swatch__option ">
S
</div>
</div>
<div class="swatch__option-container " id="opt-size-m" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option ">
M
</div>
</div>
<div class="swatch__option-container " id="opt-size-l" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option ">
L
</div>
</div>
<div class="swatch__option-container " id="opt-size-xl" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option ">
XL
</div>
</div>
</div>
</div>
<script src="/components/raw/swatch/swatch.js"></script>
<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 swatch__option--image" style="background-image: url(../../images/swatch/swatch-orange.jpg)">
</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 swatch__option--image" style="background-image: url(../../images/swatch/swatch-green.jpg)">
</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 swatch__option--image" style="background-image: url(../../images/swatch/swatch-red.jpg)">
</div>
</div>
<div class="swatch__option-container " id="opt-color-white-4" aria-label="White" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option swatch__option--image" style="background-image: url(../../images/swatch/swatch-white.jpg)">
</div>
</div>
</div>
</div>
<script src="/components/raw/swatch/swatch.js"></script>
</div>
<div class="catalog-grid-item__actions">
<form action="#" class="catalog-grid-item__primary-form">
<button class="button button button--secondary catalog-grid-item__primary-action">
<span class="catalog-grid-item__cart-text">Add to Cart</span>
<svg class="icon icon catalog-grid-item__cart-icon" role="img">
<title>Shopping cart</title>
<use xlink:href="/images/icons-sprite.svg#shopping-cart"></use>
</svg>
</button>
</form>
<div class="catalog-grid-item__secondary-action">
<button class="button button--icon" type="button" aria-label="Add to Wish List">
<svg class="icon button__icon" role="img">
<title>Heart</title>
<use xlink:href="/images/icons-sprite.svg#heart"></use>
</svg>
</button>
<button class="button button--icon" type="button" aria-label="Add to compare">
<svg class="icon button__icon" role="img">
<title>Compare</title>
<use xlink:href="/images/icons-sprite.svg#compare"></use>
</svg>
</button>
</div>
</div>
</section>
</div>
<div class="catalog-grid-item " tabindex="0">
<a href="#" class="catalog-grid-item__link" tabindex="-1">
<div class="lazyload-wrapper catalog-grid-item__image-wrapper">
<img class="image lazyload " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/images/catalog-grid-item/product-1_320_312.jpg" alt="image alt text">
</div>
</a>
<section class="catalog-grid-item__details">
<h2 class="catalog-grid-item__name">
<a href="#" class="catalog-grid-item__name-link">
Some product name - very long name because that's important
</a>
</h2>
<div class="catalog-grid-item__price">
<div class="price ">
<span class="price__value ">
$
1 400
</span>
</div>
</div>
<div class="rating catalog-grid-item__rating" aria-label="Average rating: 72%" title="4/5 sterren" tabindex="0">
<div class="rating__star " role="presentation" style="width: 72%">
<span class="
rating__indicator
"></span>
</div>
</div>
<div class="rating__title">
4/5 sterren
</div>
<div class="catalog-grid-item__options">
<div class="swatch ">
<div class="swatch__wrapper" aria-label="Size" tabindex="0" aria-activedescendant="opt-size-s" aria-required="true" role="listbox" aria-invalid="false">
<div class="swatch__option-container " id="opt-size-xs" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option ">
XS
</div>
</div>
<div class="swatch__option-container selected" id="opt-size-s" tabindex="0" role="option" aria-selected="true">
<div class="swatch__option ">
S
</div>
</div>
<div class="swatch__option-container " id="opt-size-m" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option ">
M
</div>
</div>
<div class="swatch__option-container " id="opt-size-l" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option ">
L
</div>
</div>
<div class="swatch__option-container " id="opt-size-xl" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option ">
XL
</div>
</div>
</div>
</div>
<script src="/components/raw/swatch/swatch.js"></script>
<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 swatch__option--image" style="background-image: url(../../images/swatch/swatch-orange.jpg)">
</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 swatch__option--image" style="background-image: url(../../images/swatch/swatch-green.jpg)">
</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 swatch__option--image" style="background-image: url(../../images/swatch/swatch-red.jpg)">
</div>
</div>
<div class="swatch__option-container " id="opt-color-white-4" aria-label="White" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option swatch__option--image" style="background-image: url(../../images/swatch/swatch-white.jpg)">
</div>
</div>
</div>
</div>
<script src="/components/raw/swatch/swatch.js"></script>
</div>
<div class="catalog-grid-item__actions">
<form action="#" class="catalog-grid-item__primary-form">
<button class="button button button--secondary catalog-grid-item__primary-action">
<span class="catalog-grid-item__cart-text">Add to Cart</span>
<svg class="icon icon catalog-grid-item__cart-icon" role="img">
<title>Shopping cart</title>
<use xlink:href="/images/icons-sprite.svg#shopping-cart"></use>
</svg>
</button>
</form>
<div class="catalog-grid-item__secondary-action">
<button class="button button--icon" type="button" aria-label="Add to Wish List">
<svg class="icon button__icon" role="img">
<title>Heart</title>
<use xlink:href="/images/icons-sprite.svg#heart"></use>
</svg>
</button>
<button class="button button--icon" type="button" aria-label="Add to compare">
<svg class="icon button__icon" role="img">
<title>Compare</title>
<use xlink:href="/images/icons-sprite.svg#compare"></use>
</svg>
</button>
</div>
</div>
</section>
</div>
<div class="catalog-grid-item " tabindex="0">
<a href="#" class="catalog-grid-item__link" tabindex="-1">
<div class="lazyload-wrapper catalog-grid-item__image-wrapper">
<img class="image lazyload " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/images/catalog-grid-item/product-1_320_312.jpg" alt="image alt text">
</div>
</a>
<section class="catalog-grid-item__details">
<h2 class="catalog-grid-item__name">
<a href="#" class="catalog-grid-item__name-link">
Some product name - very long name because that's important
</a>
</h2>
<div class="catalog-grid-item__price">
<div class="price ">
<span class="price__value ">
$
1 400
</span>
</div>
</div>
<div class="rating catalog-grid-item__rating" aria-label="Average rating: 72%" title="4/5 sterren" tabindex="0">
<div class="rating__star " role="presentation" style="width: 72%">
<span class="
rating__indicator
"></span>
</div>
</div>
<div class="rating__title">
4/5 sterren
</div>
<div class="catalog-grid-item__options">
<div class="swatch ">
<div class="swatch__wrapper" aria-label="Size" tabindex="0" aria-activedescendant="opt-size-s" aria-required="true" role="listbox" aria-invalid="false">
<div class="swatch__option-container " id="opt-size-xs" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option ">
XS
</div>
</div>
<div class="swatch__option-container selected" id="opt-size-s" tabindex="0" role="option" aria-selected="true">
<div class="swatch__option ">
S
</div>
</div>
<div class="swatch__option-container " id="opt-size-m" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option ">
M
</div>
</div>
<div class="swatch__option-container " id="opt-size-l" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option ">
L
</div>
</div>
<div class="swatch__option-container " id="opt-size-xl" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option ">
XL
</div>
</div>
</div>
</div>
<script src="/components/raw/swatch/swatch.js"></script>
<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 swatch__option--image" style="background-image: url(../../images/swatch/swatch-orange.jpg)">
</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 swatch__option--image" style="background-image: url(../../images/swatch/swatch-green.jpg)">
</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 swatch__option--image" style="background-image: url(../../images/swatch/swatch-red.jpg)">
</div>
</div>
<div class="swatch__option-container " id="opt-color-white-4" aria-label="White" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option swatch__option--image" style="background-image: url(../../images/swatch/swatch-white.jpg)">
</div>
</div>
</div>
</div>
<script src="/components/raw/swatch/swatch.js"></script>
</div>
<div class="catalog-grid-item__actions">
<form action="#" class="catalog-grid-item__primary-form">
<button class="button button button--secondary catalog-grid-item__primary-action">
<span class="catalog-grid-item__cart-text">Add to Cart</span>
<svg class="icon icon catalog-grid-item__cart-icon" role="img">
<title>Shopping cart</title>
<use xlink:href="/images/icons-sprite.svg#shopping-cart"></use>
</svg>
</button>
</form>
<div class="catalog-grid-item__secondary-action">
<button class="button button--icon" type="button" aria-label="Add to Wish List">
<svg class="icon button__icon" role="img">
<title>Heart</title>
<use xlink:href="/images/icons-sprite.svg#heart"></use>
</svg>
</button>
<button class="button button--icon" type="button" aria-label="Add to compare">
<svg class="icon button__icon" role="img">
<title>Compare</title>
<use xlink:href="/images/icons-sprite.svg#compare"></use>
</svg>
</button>
</div>
</div>
</section>
</div>
<div class="catalog-grid-item " tabindex="0">
<a href="#" class="catalog-grid-item__link" tabindex="-1">
<div class="lazyload-wrapper catalog-grid-item__image-wrapper">
<img class="image lazyload " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/images/catalog-grid-item/product-1_320_312.jpg" alt="image alt text">
</div>
</a>
<section class="catalog-grid-item__details">
<h2 class="catalog-grid-item__name">
<a href="#" class="catalog-grid-item__name-link">
Some product name - very long name because that's important
</a>
</h2>
<div class="catalog-grid-item__price">
<div class="price ">
<span class="price__value ">
$
1 400
</span>
</div>
</div>
<div class="rating catalog-grid-item__rating" aria-label="Average rating: 72%" title="4/5 sterren" tabindex="0">
<div class="rating__star " role="presentation" style="width: 72%">
<span class="
rating__indicator
"></span>
</div>
</div>
<div class="rating__title">
4/5 sterren
</div>
<div class="catalog-grid-item__options">
<div class="swatch ">
<div class="swatch__wrapper" aria-label="Size" tabindex="0" aria-activedescendant="opt-size-s" aria-required="true" role="listbox" aria-invalid="false">
<div class="swatch__option-container " id="opt-size-xs" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option ">
XS
</div>
</div>
<div class="swatch__option-container selected" id="opt-size-s" tabindex="0" role="option" aria-selected="true">
<div class="swatch__option ">
S
</div>
</div>
<div class="swatch__option-container " id="opt-size-m" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option ">
M
</div>
</div>
<div class="swatch__option-container " id="opt-size-l" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option ">
L
</div>
</div>
<div class="swatch__option-container " id="opt-size-xl" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option ">
XL
</div>
</div>
</div>
</div>
<script src="/components/raw/swatch/swatch.js"></script>
<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 swatch__option--image" style="background-image: url(../../images/swatch/swatch-orange.jpg)">
</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 swatch__option--image" style="background-image: url(../../images/swatch/swatch-green.jpg)">
</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 swatch__option--image" style="background-image: url(../../images/swatch/swatch-red.jpg)">
</div>
</div>
<div class="swatch__option-container " id="opt-color-white-4" aria-label="White" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option swatch__option--image" style="background-image: url(../../images/swatch/swatch-white.jpg)">
</div>
</div>
</div>
</div>
<script src="/components/raw/swatch/swatch.js"></script>
</div>
<div class="catalog-grid-item__actions">
<form action="#" class="catalog-grid-item__primary-form">
<button class="button button button--secondary catalog-grid-item__primary-action">
<span class="catalog-grid-item__cart-text">Add to Cart</span>
<svg class="icon icon catalog-grid-item__cart-icon" role="img">
<title>Shopping cart</title>
<use xlink:href="/images/icons-sprite.svg#shopping-cart"></use>
</svg>
</button>
</form>
<div class="catalog-grid-item__secondary-action">
<button class="button button--icon" type="button" aria-label="Add to Wish List">
<svg class="icon button__icon" role="img">
<title>Heart</title>
<use xlink:href="/images/icons-sprite.svg#heart"></use>
</svg>
</button>
<button class="button button--icon" type="button" aria-label="Add to compare">
<svg class="icon button__icon" role="img">
<title>Compare</title>
<use xlink:href="/images/icons-sprite.svg#compare"></use>
</svg>
</button>
</div>
</div>
</section>
</div>
<div class="catalog-grid-item " tabindex="0">
<a href="#" class="catalog-grid-item__link" tabindex="-1">
<div class="lazyload-wrapper catalog-grid-item__image-wrapper">
<img class="image lazyload " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/images/catalog-grid-item/product-1_320_312.jpg" alt="image alt text">
</div>
</a>
<section class="catalog-grid-item__details">
<h2 class="catalog-grid-item__name">
<a href="#" class="catalog-grid-item__name-link">
Some product name - very long name because that's important
</a>
</h2>
<div class="catalog-grid-item__price">
<div class="price ">
<span class="price__value ">
$
1 400
</span>
</div>
</div>
<div class="rating catalog-grid-item__rating" aria-label="Average rating: 72%" title="4/5 sterren" tabindex="0">
<div class="rating__star " role="presentation" style="width: 72%">
<span class="
rating__indicator
"></span>
</div>
</div>
<div class="rating__title">
4/5 sterren
</div>
<div class="catalog-grid-item__options">
<div class="swatch ">
<div class="swatch__wrapper" aria-label="Size" tabindex="0" aria-activedescendant="opt-size-s" aria-required="true" role="listbox" aria-invalid="false">
<div class="swatch__option-container " id="opt-size-xs" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option ">
XS
</div>
</div>
<div class="swatch__option-container selected" id="opt-size-s" tabindex="0" role="option" aria-selected="true">
<div class="swatch__option ">
S
</div>
</div>
<div class="swatch__option-container " id="opt-size-m" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option ">
M
</div>
</div>
<div class="swatch__option-container " id="opt-size-l" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option ">
L
</div>
</div>
<div class="swatch__option-container " id="opt-size-xl" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option ">
XL
</div>
</div>
</div>
</div>
<script src="/components/raw/swatch/swatch.js"></script>
<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 swatch__option--image" style="background-image: url(../../images/swatch/swatch-orange.jpg)">
</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 swatch__option--image" style="background-image: url(../../images/swatch/swatch-green.jpg)">
</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 swatch__option--image" style="background-image: url(../../images/swatch/swatch-red.jpg)">
</div>
</div>
<div class="swatch__option-container " id="opt-color-white-4" aria-label="White" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option swatch__option--image" style="background-image: url(../../images/swatch/swatch-white.jpg)">
</div>
</div>
</div>
</div>
<script src="/components/raw/swatch/swatch.js"></script>
</div>
<div class="catalog-grid-item__actions">
<form action="#" class="catalog-grid-item__primary-form">
<button class="button button button--secondary catalog-grid-item__primary-action">
<span class="catalog-grid-item__cart-text">Add to Cart</span>
<svg class="icon icon catalog-grid-item__cart-icon" role="img">
<title>Shopping cart</title>
<use xlink:href="/images/icons-sprite.svg#shopping-cart"></use>
</svg>
</button>
</form>
<div class="catalog-grid-item__secondary-action">
<button class="button button--icon" type="button" aria-label="Add to Wish List">
<svg class="icon button__icon" role="img">
<title>Heart</title>
<use xlink:href="/images/icons-sprite.svg#heart"></use>
</svg>
</button>
<button class="button button--icon" type="button" aria-label="Add to compare">
<svg class="icon button__icon" role="img">
<title>Compare</title>
<use xlink:href="/images/icons-sprite.svg#compare"></use>
</svg>
</button>
</div>
</div>
</section>
</div>
<div class="catalog-grid-item " tabindex="0">
<a href="#" class="catalog-grid-item__link" tabindex="-1">
<div class="lazyload-wrapper catalog-grid-item__image-wrapper">
<img class="image lazyload " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/images/catalog-grid-item/product-1_320_312.jpg" alt="image alt text">
</div>
</a>
<section class="catalog-grid-item__details">
<h2 class="catalog-grid-item__name">
<a href="#" class="catalog-grid-item__name-link">
Some product name - very long name because that's important
</a>
</h2>
<div class="catalog-grid-item__price">
<div class="price ">
<span class="price__value ">
$
1 400
</span>
</div>
</div>
<div class="rating catalog-grid-item__rating" aria-label="Average rating: 72%" title="4/5 sterren" tabindex="0">
<div class="rating__star " role="presentation" style="width: 72%">
<span class="
rating__indicator
"></span>
</div>
</div>
<div class="rating__title">
4/5 sterren
</div>
<div class="catalog-grid-item__options">
<div class="swatch ">
<div class="swatch__wrapper" aria-label="Size" tabindex="0" aria-activedescendant="opt-size-s" aria-required="true" role="listbox" aria-invalid="false">
<div class="swatch__option-container " id="opt-size-xs" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option ">
XS
</div>
</div>
<div class="swatch__option-container selected" id="opt-size-s" tabindex="0" role="option" aria-selected="true">
<div class="swatch__option ">
S
</div>
</div>
<div class="swatch__option-container " id="opt-size-m" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option ">
M
</div>
</div>
<div class="swatch__option-container " id="opt-size-l" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option ">
L
</div>
</div>
<div class="swatch__option-container " id="opt-size-xl" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option ">
XL
</div>
</div>
</div>
</div>
<script src="/components/raw/swatch/swatch.js"></script>
<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 swatch__option--image" style="background-image: url(../../images/swatch/swatch-orange.jpg)">
</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 swatch__option--image" style="background-image: url(../../images/swatch/swatch-green.jpg)">
</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 swatch__option--image" style="background-image: url(../../images/swatch/swatch-red.jpg)">
</div>
</div>
<div class="swatch__option-container " id="opt-color-white-4" aria-label="White" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option swatch__option--image" style="background-image: url(../../images/swatch/swatch-white.jpg)">
</div>
</div>
</div>
</div>
<script src="/components/raw/swatch/swatch.js"></script>
</div>
<div class="catalog-grid-item__actions">
<form action="#" class="catalog-grid-item__primary-form">
<button class="button button button--secondary catalog-grid-item__primary-action">
<span class="catalog-grid-item__cart-text">Add to Cart</span>
<svg class="icon icon catalog-grid-item__cart-icon" role="img">
<title>Shopping cart</title>
<use xlink:href="/images/icons-sprite.svg#shopping-cart"></use>
</svg>
</button>
</form>
<div class="catalog-grid-item__secondary-action">
<button class="button button--icon" type="button" aria-label="Add to Wish List">
<svg class="icon button__icon" role="img">
<title>Heart</title>
<use xlink:href="/images/icons-sprite.svg#heart"></use>
</svg>
</button>
<button class="button button--icon" type="button" aria-label="Add to compare">
<svg class="icon button__icon" role="img">
<title>Compare</title>
<use xlink:href="/images/icons-sprite.svg#compare"></use>
</svg>
</button>
</div>
</div>
</section>
</div>
<div class="catalog-grid-item " tabindex="0">
<a href="#" class="catalog-grid-item__link" tabindex="-1">
<div class="lazyload-wrapper catalog-grid-item__image-wrapper">
<img class="image lazyload " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/images/catalog-grid-item/product-1_320_312.jpg" alt="image alt text">
</div>
</a>
<section class="catalog-grid-item__details">
<h2 class="catalog-grid-item__name">
<a href="#" class="catalog-grid-item__name-link">
Some product name - very long name because that's important
</a>
</h2>
<div class="catalog-grid-item__price">
<div class="price ">
<span class="price__value ">
$
1 400
</span>
</div>
</div>
<div class="rating catalog-grid-item__rating" aria-label="Average rating: 72%" title="4/5 sterren" tabindex="0">
<div class="rating__star " role="presentation" style="width: 72%">
<span class="
rating__indicator
"></span>
</div>
</div>
<div class="rating__title">
4/5 sterren
</div>
<div class="catalog-grid-item__options">
<div class="swatch ">
<div class="swatch__wrapper" aria-label="Size" tabindex="0" aria-activedescendant="opt-size-s" aria-required="true" role="listbox" aria-invalid="false">
<div class="swatch__option-container " id="opt-size-xs" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option ">
XS
</div>
</div>
<div class="swatch__option-container selected" id="opt-size-s" tabindex="0" role="option" aria-selected="true">
<div class="swatch__option ">
S
</div>
</div>
<div class="swatch__option-container " id="opt-size-m" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option ">
M
</div>
</div>
<div class="swatch__option-container " id="opt-size-l" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option ">
L
</div>
</div>
<div class="swatch__option-container " id="opt-size-xl" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option ">
XL
</div>
</div>
</div>
</div>
<script src="/components/raw/swatch/swatch.js"></script>
<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 swatch__option--image" style="background-image: url(../../images/swatch/swatch-orange.jpg)">
</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 swatch__option--image" style="background-image: url(../../images/swatch/swatch-green.jpg)">
</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 swatch__option--image" style="background-image: url(../../images/swatch/swatch-red.jpg)">
</div>
</div>
<div class="swatch__option-container " id="opt-color-white-4" aria-label="White" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option swatch__option--image" style="background-image: url(../../images/swatch/swatch-white.jpg)">
</div>
</div>
</div>
</div>
<script src="/components/raw/swatch/swatch.js"></script>
</div>
<div class="catalog-grid-item__actions">
<form action="#" class="catalog-grid-item__primary-form">
<button class="button button button--secondary catalog-grid-item__primary-action">
<span class="catalog-grid-item__cart-text">Add to Cart</span>
<svg class="icon icon catalog-grid-item__cart-icon" role="img">
<title>Shopping cart</title>
<use xlink:href="/images/icons-sprite.svg#shopping-cart"></use>
</svg>
</button>
</form>
<div class="catalog-grid-item__secondary-action">
<button class="button button--icon" type="button" aria-label="Add to Wish List">
<svg class="icon button__icon" role="img">
<title>Heart</title>
<use xlink:href="/images/icons-sprite.svg#heart"></use>
</svg>
</button>
<button class="button button--icon" type="button" aria-label="Add to compare">
<svg class="icon button__icon" role="img">
<title>Compare</title>
<use xlink:href="/images/icons-sprite.svg#compare"></use>
</svg>
</button>
</div>
</div>
</section>
</div>
<div class="catalog-grid-item " tabindex="0">
<a href="#" class="catalog-grid-item__link" tabindex="-1">
<div class="lazyload-wrapper catalog-grid-item__image-wrapper">
<img class="image lazyload " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/images/catalog-grid-item/product-1_320_312.jpg" alt="image alt text">
</div>
</a>
<section class="catalog-grid-item__details">
<h2 class="catalog-grid-item__name">
<a href="#" class="catalog-grid-item__name-link">
Some product name - very long name because that's important
</a>
</h2>
<div class="catalog-grid-item__price">
<div class="price ">
<span class="price__value ">
$
1 400
</span>
</div>
</div>
<div class="rating catalog-grid-item__rating" aria-label="Average rating: 72%" title="4/5 sterren" tabindex="0">
<div class="rating__star " role="presentation" style="width: 72%">
<span class="
rating__indicator
"></span>
</div>
</div>
<div class="rating__title">
4/5 sterren
</div>
<div class="catalog-grid-item__options">
<div class="swatch ">
<div class="swatch__wrapper" aria-label="Size" tabindex="0" aria-activedescendant="opt-size-s" aria-required="true" role="listbox" aria-invalid="false">
<div class="swatch__option-container " id="opt-size-xs" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option ">
XS
</div>
</div>
<div class="swatch__option-container selected" id="opt-size-s" tabindex="0" role="option" aria-selected="true">
<div class="swatch__option ">
S
</div>
</div>
<div class="swatch__option-container " id="opt-size-m" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option ">
M
</div>
</div>
<div class="swatch__option-container " id="opt-size-l" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option ">
L
</div>
</div>
<div class="swatch__option-container " id="opt-size-xl" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option ">
XL
</div>
</div>
</div>
</div>
<script src="/components/raw/swatch/swatch.js"></script>
<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 swatch__option--image" style="background-image: url(../../images/swatch/swatch-orange.jpg)">
</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 swatch__option--image" style="background-image: url(../../images/swatch/swatch-green.jpg)">
</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 swatch__option--image" style="background-image: url(../../images/swatch/swatch-red.jpg)">
</div>
</div>
<div class="swatch__option-container " id="opt-color-white-4" aria-label="White" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option swatch__option--image" style="background-image: url(../../images/swatch/swatch-white.jpg)">
</div>
</div>
</div>
</div>
<script src="/components/raw/swatch/swatch.js"></script>
</div>
<div class="catalog-grid-item__actions">
<form action="#" class="catalog-grid-item__primary-form">
<button class="button button button--secondary catalog-grid-item__primary-action">
<span class="catalog-grid-item__cart-text">Add to Cart</span>
<svg class="icon icon catalog-grid-item__cart-icon" role="img">
<title>Shopping cart</title>
<use xlink:href="/images/icons-sprite.svg#shopping-cart"></use>
</svg>
</button>
</form>
<div class="catalog-grid-item__secondary-action">
<button class="button button--icon" type="button" aria-label="Add to Wish List">
<svg class="icon button__icon" role="img">
<title>Heart</title>
<use xlink:href="/images/icons-sprite.svg#heart"></use>
</svg>
</button>
<button class="button button--icon" type="button" aria-label="Add to compare">
<svg class="icon button__icon" role="img">
<title>Compare</title>
<use xlink:href="/images/icons-sprite.svg#compare"></use>
</svg>
</button>
</div>
</div>
</section>
</div>
</div>
<div class="catalog-list__pager">
<div class="toolbar--bottom ">
<div class="toolbar--bottom-amount">
1630 producten gevonden
</div>
<div class="toolbar--bottom-limiter toolbar__limiter">
Toon
<div class="select toolbar__limiter-wrapper">
<label class="label toolbar__limiter-label" for="Sorteren op">
Toon
</label>
<select id="Sorteren op" class="select__field toolbar__limiter-select " name="sort-by">
<option value="12">
12
</option>
<option value="24">
24
</option>
<option value="36">
36
</option>
</select>
</div>
producten per pagina
</div>
</div>
<nav class="pager " role="navigation" aria-label="Pagination navigation">
<ul class="pager__list">
<li class="pager__item">
<a href="#" class="pager__link pager__link--prev" aria-label="Link to previous page, disabled" type="button" disabled tabindex="-1">
<svg class="pager__icon" aria-hidden="true">
<use xlink:href="/images/icons-sprite.svg#angle-left"></use>
</svg>
<span class="pager__label">
Terug
</span>
</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--invert" aria-label="Link to page 2">
2
</a>
</li>
<li class="pager__item">
<a href="#" class="pager__link link--invert" aria-label="Link to page 3">
3
</a>
</li>
<li class="pager__item">
<a href="#" class="pager__link link--invert" aria-label="Link to page 4">
4
</a>
</li>
<li class="pager__item">
<a href="#" class="pager__link link--invert" aria-label="Link to page 5">
5
</a>
</li>
<li class="pager__item">
<a href="#" class="pager__link pager__link--next" aria-label="Link to next page" type="button">
<span class="pager__label">
Volgende
</span>
<svg class="pager__icon" aria-hidden="true">
<use xlink:href="/images/icons-sprite.svg#angle-right"></use>
</svg>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</main>
</div>
<div class="categorie-footer">
<div class="categorie-footer__content">
<h3 class="categorie-footer__title">Kom naar onze fysieke winkel!</h3>
<h4 class="categorie-footer__subtitle">In eget orci nec nulla volutpat gravida nec ut magna. Cras cursus vel arcu vel scelerisque. Donec vehicula lectus lorem, quis egestas urna iaculis in. </h4>
<button class="button button--skew categorie-footer__button" type="button" aria-label="Submit">
Over ons
<svg class="icon footer__icon" role="img">
<title>Arrow right</title>
<use xlink:href="/images/icons-sprite.svg#angle-right"></use>
</svg>
</button>
</div>
<div class="categorie-footer__background">
<div class="lazyload-wrapper ">
<img class="image lazyload categorie-footer__image" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/images/category/category-footer-background.jpg" alt="category footer image">
</div>
</div>
</div>
<footer class="footer">
<div class="footer-brands">
<div class="container">
<div class="row">
<div class="col-xs-4 col-md-2">
<div class="">
<a class="" href="https://m2.vechtsportonline.nl/" aria-label="Home page link">
<img class="image" alt="Vechtsportonline.nl" src="https://m2.vechtsportonline.nl/static/version1600075943/frontend/Elgentos/vso/nl_NL/images/logos/logo-red-black.jpg">
</a>
</div>
</div>
<div class="col-xs-8 col-md-10">
<div class="footer-brands__slider">
<div class="slider ">
<div class="slider__handler">
<div class="slider__slides">
<div class="slider__item ">
<div class="lazyload-wrapper "><img class="image lazyloaded" src="https://m2.vechtsportonline.nl/media/footer/brands/adidas_bokshandschoenen.jpg" alt="Adidas Bokshandschoenen"></div>
</div>
<div class="slider__item ">
<div class="lazyload-wrapper "><img class="image lazyloaded" src="https://m2.vechtsportonline.nl/media/footer/brands/booster_fight_gear.png" alt="Booster Fight Gear"></div>
</div>
<div class="slider__item ">
<div class="lazyload-wrapper "><img class="image lazyloaded" src="https://m2.vechtsportonline.nl/media/footer/brands/essimo.jpg" alt="Essimo"></div>
</div>
<div class="slider__item ">
<div class="lazyload-wrapper "><img class="image lazyloaded" src="https://m2.vechtsportonline.nl/media/footer/brands/ernesto_hoost.png" alt="Ernesto Hoost"></div>
</div>
<div class="slider__item ">
<div class="lazyload-wrapper "><img class="image lazyloaded" src="https://m2.vechtsportonline.nl/media/footer/brands/everlast.png" alt="Everlast"></div>
</div>
<div class="slider__item ">
<div class="lazyload-wrapper "><img class="image lazyloaded" src="https://m2.vechtsportonline.nl/media/footer/brands/hayabusa_fightwear.png" alt="Hayabusa Fightwear"></div>
</div>
<div class="slider__item ">
<div class="lazyload-wrapper "><img class="image lazyloaded" src="https://m2.vechtsportonline.nl/media/footer/brands/joya_fight_gear.png" alt="Joya Fight Gear"></div>
</div>
<div class="slider__item ">
<div class="lazyload-wrapper "><img class="image lazyloaded" src="https://m2.vechtsportonline.nl/media/footer/brands/king_bokshandschoenen.jpg" alt="King bokshandschoenen "></div>
</div>
<div class="slider__item ">
<div class="lazyload-wrapper "><img class="image lazyloaded" src="https://m2.vechtsportonline.nl/media/footer/brands/matsuru.png" alt="Matsuru "></div>
</div>
<div class="slider__item ">
<div class="lazyload-wrapper "><img class="image lazyloaded" src="https://m2.vechtsportonline.nl/media/footer/brands/nike_boksschoenen.jpg" alt="Nike boksschoenen"></div>
</div>
<div class="slider__item ">
<div class="lazyload-wrapper "><img class="image lazyloaded" src="https://m2.vechtsportonline.nl/media/footer/brands/qnt.png" alt="QNT"></div>
</div>
<div class="slider__item ">
<div class="lazyload-wrapper "><img class="image lazyloaded" src="https://m2.vechtsportonline.nl/media/footer/brands/ringhorns.png" alt="Ringhorns"> <</div>
</div>
<div class="slider__item ">
<div class="lazyload-wrapper "><img class="image lazyloaded" src="https://m2.vechtsportonline.nl/media/footer/brands/superpro.jpg" alt="SuperPro"></div>
</div>
<div class="slider__item ">
<div class="lazyload-wrapper "><img class="image lazyloaded" src="https://m2.vechtsportonline.nl/media/footer/brands/tapout.jpg" alt="Tapout"></div>
</div>
<div class="slider__item ">
<div class="lazyload-wrapper "><img class="image lazyloaded" src="https://m2.vechtsportonline.nl/media/footer/brands/tunturi.png" alt="Tunturi"></div>
</div>
<div class="slider__item ">
<div class="lazyload-wrapper "><img class="image lazyloaded" src="https://m2.vechtsportonline.nl/media/footer/brands/twins_bokshandschoenen.jpg" alt="Twins bokshandschoenen"></div>
</div>
<div class="slider__item ">
<div class="lazyload-wrapper "><img class="image lazyloaded" src="https://m2.vechtsportonline.nl/media/footer/brands/vechtsportonline.jpg" alt="vechtsportonline"></div>
</div>
<div class="slider__item ">
<div class="lazyload-wrapper "><img class="image lazyloaded" src="https://m2.vechtsportonline.nl/media/footer/brands/venum.png" alt="Venum"></div>
</div>
<div class="slider__item ">
<div class="lazyload-wrapper "><img class="image lazyloaded" src="https://m2.vechtsportonline.nl/media/footer/brands/xxl_nutrition.png" alt="XXL Nutrition"></div>
</div>
</div>
</div>
<div class="slider__navigation ">
<button class="button button--icon slider__navigation-icon slider__prev" type="button" aria-label="Previous slide">
<svg class="icon button__icon slider__icon" role="img">
<title>Arrow left</title>
<use xlink:href="https://m2.vechtsportonline.nl/static/version1600075943/frontend/Elgentos/vso/nl_NL/images/icons-sprite.svg#angle-left">
</use>
</svg>
</button>
<button class="button button--icon slider__navigation-icon slider__next" type="button" aria-label="Next slide">
<svg class="icon button__icon slider__icon" role="img">
<title>Arrow right</title>
<use xlink:href="https://m2.vechtsportonline.nl/static/version1600075943/frontend/Elgentos/vso/nl_NL/images/icons-sprite.svg#angle-right">
</use>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-6 col-xl-5">
<div class="footer__contact">
<div class="row">
<div class="col-md-6">
<div class="footer__route-address">
<h3 class="footer__title">Bezoek onze Showroom!</h3>
<div class="m-b--1">
Atoomweg 6-3 <br>
9743 AK Groningen<br>
</div>
<a href="https://www.google.nl/maps/dir//Vechtsportonline.nl,+Atoomweg+6-3,+9743+AK+Groningen/@53.2146086,6.46887,12z/data=!4m9!4m8!1m0!1m5!1m1!1s0x47c9d2a9d5fa0411:0xb29c5ff99a82e229!2m2!1d6.5389093!2d53.2146291!3e0" title="Route Vechtportonline.nl" target="blank">
<button class="button button--icon" role="button" tabindex="0">
Route <svg class="icon m-l--1" role="img">
<title>Arrow right</title>
<use xlink:href="https://m2.vechtsportonline.nl/static/version1600075943/frontend/Elgentos/vso/nl_NL/images/icons-sprite.svg#angle-right">
</use>
</svg>
</button>
</a>
</div>
</div>
<div class="col-md-6">
<div class="footer__item footer-openinghours">
<h3 class="footer__title">Openingstijden</h3>
<div class="flex flex--between">
<span class="">Maandag</span>
<span>13:30 - 18:00u</span>
</div>
<div class="flex flex--between">
<span class="">Dinsdag</span>
<span>10:00 - 18:00u</span>
</div>
<div class="flex flex--between">
<span class="">Woensdag</span>
<span>10:00 - 18:00u</span>
</div>
<div class="flex flex--between">
<span class="">Donderdag</span>
<span>10:00 - 18:00u</span>
</div>
<div class="flex flex--between">
<span class="">Vrijdag</span>
<span>10:00 - 18:00u</span>
</div>
<div class="flex flex--between">
<span class="">Zaterdag</span>
<span>
10:00 - 17:00u </span>
</div>
<div class="flex flex--between">
<span class="">Zondag</span>
<span>
Gesloten </span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3 col-xl-2 m-b--2">
<h3 class=" footer__title">Snel navigeren</h3>
<ul class="list footer-navigation-list">
<li class="list__item ">
<div class="widget block block-category-link">
<a href="https://m2.vechtsportonline.nl/bescherming/scheenbeschermers" title="Kickboks Scheenbeschermers"><span>Kickboks Scheenbeschermers</span></a>
</div>
</li>
<li class="list__item ">
<div class="widget block block-category-link">
<a href="https://m2.vechtsportonline.nl/kleding/broekjes-broeken/kickboks-broekjes" title="(Kick)bokshandschoenen"><span>(Kick)bokshandschoenen</span></a>
</div>
</li>
<li class="list__item ">
<div class="widget block block-category-link">
<a href="https://m2.vechtsportonline.nl/handschoenen/kick-bokshandschoenen" title="Kickboks Broekjes"><span>Kickboks Broekjes</span></a>
</div>
</li>
<li class="list__item ">
<div class="widget block block-category-link">
<a href="https://m2.vechtsportonline.nl/bescherming/kruisbeschermers-tok" title="Kickboks Kruisbeschermers"><span>Kickboks Kruisbeschermers</span></a>
</div>
</li>
<li class="list__item ">
<div class="widget block block-category-link">
<a href="https://m2.vechtsportonline.nl/bescherming/bitjes" title="Kickboks Bitjes"><span>Kickboks Bitjes</span></a>
</div>
</li>
<li class="list__item ">
<div class="widget block block-category-link">
<a href="https://m2.vechtsportonline.nl/bescherming/bandages" title="Kickboks Bandages"><span>Kickboks Bandages</span></a>
</div>
</li>
<li class="list__item ">
<div class="widget block block-category-link">
<a href="https://m2.vechtsportonline.nl/bescherming/binnenhandschoenen" title="Kickboks Binnenhandschoenen"><span>Kickboks Binnenhandschoenen</span></a>
</div>
</li>
<li class="list__item ">
<div class="widget block block-category-link">
<a href="https://m2.vechtsportonline.nl/kickboks-sets" title="Kickboks Setjes"><span>Kickboks Setjes</span></a>
</div>
</li>
</ul>
</div>
<div class="col-md-6 col-lg-2 col-xl-2 m-b--w">
<h3 class="footer__title">Klantenservice</h3>
<ul class="list footer-contact-list ">
<li class="list__item"><a href="https://m2.vechtsportonline.nl/veelgestelde-vragen">Veelgestelde
Vragen</a></li>
<li class="list__item"><a href="https://m2.vechtsportonline.nl/ruilen-retourneren">Ruilen /
Retourneren</a></li>
<li class="list__item"><a href="https://m2.vechtsportonline.nl/garantie">Garantie</a></li>
<li class="list__item"><a href="https://m2.vechtsportonline.nl/betaalmethoden">Betaal
Mogelijkheden</a></li>
<li class="list__item"><a href="https://m2.vechtsportonline.nl/klachten">Klachten</a></li>
<li class="list__item"><a href="https://m2.vechtsportonline.nl/privacy-veiligheid">Privacy &
Veiligheid</a></li>
<li class="list__item"><a href="https://m2.vechtsportonline.nl/contact/">Contact</a></li>
</ul>
</div>
<div class="col-lg-12 col-xl-3">
<form class="newsletter" novalidate="novalidate" action="https://m2.vechtsportonline.nl/newsletter/subscriber/new/" method="post" id="newsletter-validate-detail">
<h3 class="footer__title">
Nieuwsbrief </h3>
<div class="newsletter__controls">
<div class="input newsletter__input" data-children-count="1">
<input name="email" type="email" id="newsletter" class="input__field newsletter__field" placeholder="Enter your email" required="" data-kwimpalastatus="alive" data-kwimpalaid="1600257046335-0">
<span style="animation: initial; transition: initial; color: initial; color-scheme: initial; font: initial; font-feature-settings: initial; font-kerning: initial; font-optical-sizing: initial; font-variation-settings: initial; text-orientation: initial; text-rendering: initial; -webkit-font-smoothing: initial; -webkit-locale: initial; -webkit-text-orientation: initial; -webkit-writing-mode: initial; writing-mode: initial; zoom: initial; place-content: initial; place-items: initial; place-self: initial; alignment-baseline: initial; appearance: initial; backdrop-filter: initial; backface-visibility: initial; background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzLjUgNS4yODgxMUMxMy41IDUuMTkzNzYgMTMuNDA1NyA1LjA5OTQxIDEzLjI3MzYgNS4wNjE2NkwxMS42ODg2IDQuNDc2NjZDMTEuNDI0NCA0LjM2MzQxIDExLjEyMjUgNC40OTU1MSAxMS4xMjI1IDQuNjg0MjZWMTEuNTgxN0MxMS4xMjk5IDExLjYzNTUgMTEuMTUxMiAxMS42ODY0IDExLjE4NDMgMTEuNzI5NEMxMS4yMTc0IDExLjc3MjQgMTEuMjYxMSAxMS44MDYxIDExLjMxMTIgMTEuODI3MUwxMi45MzQxIDEyLjQxMjFDMTMuMTc5NCAxMi41MDY0IDEzLjUwMDIgMTIuMzc0MyAxMy41MDAyIDEyLjE2NjdMMTMuNSA1LjI4ODExWk05LjQ3OTQyIDEwLjU0MzdDOS40Nzk0MiAxMC40NDk0IDkuMzg1MDcgMTAuMzU1IDkuMjUyOTcgMTAuMzE3M0w3LjY2Nzk3IDkuNzMyMjZDNy40MDM4MiA5LjYxOTAxIDcuMTAxODcgOS43NTExMSA3LjEwMTg3IDkuOTM5ODFWMTQuMjQyNEM3LjEwOTMxIDE0LjI5NjEgNy4xMzA2MiAxNC4zNDcgNy4xNjM3MSAxNC4zOUM3LjE5NjggMTQuNDMzMSA3LjI0MDUyIDE0LjQ2NjcgNy4yOTA1NyAxNC40ODc3TDguOTEzNDcgMTUuMDcyN0M5LjE1ODc3IDE1LjE2NzEgOS40Nzk1NyAxNS4wMzUgOS40Nzk1NyAxNC44Mjc0TDkuNDc5NDIgMTAuNTQzN1pNOS40Nzk0MiAxLjc0OTc2QzkuNDc5NDIgMS42NTU0MSA5LjM4NTA3IDEuNTYxMDYgOS4yNTI5NyAxLjUyMzMxTDcuNjY3OTcgMC45MzgzMTFDNy40MDM4MiAwLjgyNTA2MSA3LjEwMTg3IDAuOTU3MTYxIDcuMTAxODcgMS4xNDU4NlY1LjQ0ODQxQzcuMTA5MzEgNS41MDIxNyA3LjEzMDYyIDUuNTUzMDcgNy4xNjM3MSA1LjU5NjA5QzcuMTk2OCA1LjYzOTEyIDcuMjQwNTIgNS42NzI3OCA3LjI5MDU3IDUuNjkzNzZMOC45MTM0NyA2LjI3ODc2QzkuMTU4NzcgNi4zNzMxMSA5LjQ3OTU3IDYuMjQxMDEgOS40Nzk1NyA2LjAzMzQxTDkuNDc5NDIgMS43NDk3NlpNNS40NzkxNyAxLjQxOTc2QzUuNDc5MTcgMS4zMjUzNiA1LjM4NDgyIDEuMjMxMDEgNS4yNTI3MiAxLjE5MzMxTDMuNjY3NzIgMC42MDgzMTFDMy40MDM1NyAwLjQ5NTA2MSAzLjEwMTYyIDAuNjI3MTYxIDMuMTAxNjIgMC44MTU4NjFWMTQuNTkxNEMzLjEwOTA1IDE0LjY0NTIgMy4xMzAzNiAxNC42OTYxIDMuMTYzNDUgMTQuNzM5MUMzLjE5NjU0IDE0Ljc4MjEgMy4yNDAyNyAxNC44MTU3IDMuMjkwMzIgMTQuODM2N0w0LjkxMzIyIDE1LjQyMTdDNS4xNTg1MiAxNS41MTYxIDUuNDc5MzIgMTUuMzg0IDUuNDc5MzIgMTUuMTc2NEw1LjQ3OTE3IDEuNDE5NzZaIiBmaWxsPSIjMEU2NDc2Ii8+Cjwvc3ZnPgo=") center center / contain no-repeat; background-blend-mode: initial; baseline-shift: initial; block-size: initial; border-block-end: initial; border-block-start: initial; border: none; border-radius: initial; border-collapse: initial; border-inline-end: initial; border-inline-start: initial; bottom: initial; box-shadow: initial; box-sizing: initial; break-after: initial; break-before: initial; break-inside: initial; buffered-rendering: initial; caption-side: initial; caret-color: initial; clear: initial; clip: initial; clip-path: initial; clip-rule: initial; color-interpolation: initial; color-interpolation-filters: initial; color-rendering: initial; columns: initial; column-fill: initial; gap: initial; column-rule: initial; column-span: initial; contain: initial; contain-intrinsic-size: initial; content: initial; content-visibility: initial; counter-increment: initial; counter-reset: initial; counter-set: initial; cursor: initial; cx: initial; cy: initial; d: initial; display: inline; dominant-baseline: initial; empty-cells: initial; fill: initial; fill-opacity: initial; fill-rule: initial; filter: initial; flex: initial; flex-flow: initial; float: initial; flood-color: initial; flood-opacity: initial; grid: initial; grid-area: initial; height: 16px; hyphens: initial; image-orientation: initial; image-rendering: initial; inline-size: initial; isolation: initial; left: 251px; letter-spacing: initial; lighting-color: initial; line-break: initial; list-style: initial; margin-block-end: initial; margin-block-start: initial; margin: initial; margin-inline-end: initial; margin-inline-start: initial; marker: initial; mask: initial; mask-type: initial; max-block-size: initial; max-height: initial; max-inline-size: initial; max-width: initial; min-block-size: initial; min-height: initial; min-inline-size: initial; min-width: 16px; mix-blend-mode: initial; object-fit: initial; object-position: initial; offset: initial; opacity: 1; order: initial; origin-trial-test-property: initial; orphans: initial; outline: initial; outline-offset: initial; overflow-anchor: initial; overflow-wrap: initial; overflow: initial; overscroll-behavior-block: initial; overscroll-behavior-inline: initial; overscroll-behavior: initial; padding-block-end: initial; padding-block-start: initial; padding: initial; padding-inline-end: initial; padding-inline-start: initial; page: initial; page-orientation: initial; paint-order: initial; perspective: initial; perspective-origin: initial; pointer-events: initial; position: absolute; quotes: initial; r: initial; resize: initial; right: initial; ruby-position: initial; rx: initial; ry: initial; scroll-behavior: initial; scroll-margin-block: initial; scroll-margin: initial; scroll-margin-inline: initial; scroll-padding-block: initial; scroll-padding: initial; scroll-padding-inline: initial; scroll-snap-align: initial; scroll-snap-stop: initial; scroll-snap-type: initial; shape-image-threshold: initial; shape-margin: initial; shape-outside: initial; shape-rendering: initial; size: initial; speak: initial; stop-color: initial; stop-opacity: initial; stroke: initial; stroke-dasharray: initial; stroke-dashoffset: initial; stroke-linecap: initial; stroke-linejoin: initial; stroke-miterlimit: initial; stroke-opacity: initial; stroke-width: initial; tab-size: initial; table-layout: initial; text-align: initial; text-align-last: initial; text-anchor: initial; text-combine-upright: initial; text-decoration: initial; text-decoration-skip-ink: initial; text-indent: initial; text-overflow: initial; text-shadow: initial; text-size-adjust: initial; text-transform: initial; text-underline-position: initial; top: 13px; touch-action: initial; transform: initial; transform-box: initial; transform-origin: initial; transform-style: initial; user-select: initial; vector-effect: initial; vertical-align: initial; visibility: visible; -webkit-app-region: initial; border-spacing: initial; -webkit-border-image: initial; -webkit-box-align: initial; -webkit-box-decoration-break: initial; -webkit-box-direction: initial; -webkit-box-flex: initial; -webkit-box-ordinal-group: initial; -webkit-box-orient: initial; -webkit-box-pack: initial; -webkit-box-reflect: initial; -webkit-font-size-delta: initial; -webkit-highlight: initial; -webkit-hyphenate-character: initial; -webkit-line-break: initial; -webkit-line-clamp: initial; -webkit-mask-box-image: initial; -webkit-mask: initial; -webkit-mask-composite: initial; -webkit-perspective-origin-x: initial; -webkit-perspective-origin-y: initial; -webkit-print-color-adjust: initial; -webkit-rtl-ordering: initial; -webkit-ruby-position: initial; -webkit-tap-highlight-color: initial; -webkit-text-combine: initial; -webkit-text-decorations-in-effect: initial; -webkit-text-emphasis: initial; -webkit-text-emphasis-position: initial; -webkit-text-fill-color: initial; -webkit-text-security: initial; -webkit-text-stroke: initial; -webkit-transform-origin-x: initial; -webkit-transform-origin-y: initial; -webkit-transform-origin-z: initial; -webkit-user-drag: initial; -webkit-user-modify: initial; white-space: initial; widows: initial; width: 16px; will-change: initial; word-break: initial; word-spacing: initial; x: initial; y: initial; z-index: auto;"></span>
</div>
<button class="button newsletter__button button--in-input button--icon" data-testid="submit-newsletter-button">
<svg class="icon">
<use xlink:href="https://m2.vechtsportonline.nl/static/version1600075943/frontend/Elgentos/vso/nl_NL//images/icons-sprite.svg#angle-right">
</use>
</svg>
</button>
</div>
</form>
<div class="m-t--1">
<div class="footer__trustedlogos">
<ul class="list footer__trustedlogos--list">
<li class="list__item footer__trustedlogos--item">
<a href="#>" target="_blank" class="link ">
<img class="image footer__trustedlogos--image lazyload" src="https://images.prismic.io/vechtsportonline/1c54b451-0ace-4567-9f07-53ffda3b081b_Thuiswinkel_Waarborg_Kleur_Verticaal.png?auto=compress,format" data-src="https://images.prismic.io/vechtsportonline/1c54b451-0ace-4567-9f07-53ffda3b081b_Thuiswinkel_Waarborg_Kleur_Verticaal.png?auto=compress,format" alt="Thuiswinkel Waarborg" loading="lazy" />
</a>
</li>
<li class="list__item footer__trustedlogos--item">
<a href="#" class="link ">
<img class="image footer__trustedlogos--image lazyload" src="https://images.prismic.io/vechtsportonline/8ed2f5b4-1e26-4e3b-bba6-985c778e44a8_Ecommerce_Europe_Trustmark.png?auto=compress,format" data-src="https://images.prismic.io/vechtsportonline/8ed2f5b4-1e26-4e3b-bba6-985c778e44a8_Ecommerce_Europe_Trustmark.png?auto=compress,format" alt="eCommerce Trustmark" loading="lazy" />
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-xl-12">
<div class="m-t--12">
<div class="footer__paymentlogos">
<ul class="list footer__paymentlogos--list">
<li class="list__item footer__paymentlogos--item">
<a href="#" class="link ">
<img class="image footer__paymentlogos--image lazyload" src="https://images.prismic.io/vechtsportonline/82b0d09b-f7a2-419d-87b6-4508f69e2868_afterpay.svg?auto=compress,format" data-src="https://images.prismic.io/vechtsportonline/82b0d09b-f7a2-419d-87b6-4508f69e2868_afterpay.svg?auto=compress,format" alt="Afterpay" loading="lazy">
</a>
</li>
<li class="list__item footer__paymentlogos--item">
<a href="#" class="link ">
<img class="image footer__paymentlogos--image lazyload" src="https://images.prismic.io/vechtsportonline/12f61279-baa1-4c03-bb82-b78185a44cf1_ideal.svg?auto=compress,format" data-src="https://images.prismic.io/vechtsportonline/12f61279-baa1-4c03-bb82-b78185a44cf1_ideal.svg?auto=compress,format" alt="iDeal" loading="lazy">
</a>
</li>
<li class="list__item footer__paymentlogos--item">
<a href="#" class="link ">
<img class="image footer__paymentlogos--image lazyload" src="https://images.prismic.io/vechtsportonline/6afc1ec0-ca86-4109-9849-0a7b3f71a0e1_paypal.svg?auto=compress,format" data-src="https://images.prismic.io/vechtsportonline/6afc1ec0-ca86-4109-9849-0a7b3f71a0e1_paypal.svg?auto=compress,format" alt="PayPal" loading="lazy">
</a>
</li>
<li class="list__item footer__paymentlogos--item">
<a href="#" class="link ">
<img class="image footer__paymentlogos--image lazyload" src="https://images.prismic.io/vechtsportonline/f9e5733b-0c4f-4285-b198-aa75512b77e6_maestro-2.svg?auto=compress,format" data-src="https://images.prismic.io/vechtsportonline/f9e5733b-0c4f-4285-b198-aa75512b77e6_maestro-2.svg?auto=compress,format" alt="Maestro" loading="lazy">
</a>
</li>
<li class="list__item footer__paymentlogos--item">
<a href="#" class="link ">
<img class="image footer__paymentlogos--image lazyload" src="https://images.prismic.io/vechtsportonline/e407fd5d-a15e-43b8-a960-7ccce7d0f453_mastercard-4.svg?auto=compress,format" data-src="https://images.prismic.io/vechtsportonline/e407fd5d-a15e-43b8-a960-7ccce7d0f453_mastercard-4.svg?auto=compress,format" alt="Mastercard" loading="lazy">
</a>
</li>
<li class="list__item footer__paymentlogos--item">
<a href="#" class="link ">
<img class="image footer__paymentlogos--image lazyload" src="https://images.prismic.io/vechtsportonline/20e84741-c887-40ca-a94d-998cb682a31b_visa.svg?auto=compress,format" data-src="https://images.prismic.io/vechtsportonline/20e84741-c887-40ca-a94d-998cb682a31b_visa.svg?auto=compress,format" alt="Visa" loading="lazy">
</a>
</li>
<li class="list__item footer__paymentlogos--item">
<a href="#" class="link ">
<img class="image footer__paymentlogos--image lazyload" src="https://images.prismic.io/vechtsportonline/a5c7e872-d39d-4d26-b8c8-c575fc7f9474_mollie.svg?auto=compress,format" data-src="https://images.prismic.io/vechtsportonline/a5c7e872-d39d-4d26-b8c8-c575fc7f9474_mollie.svg?auto=compress,format" alt="Mollie" loading="lazy">
</a>
</li>
<li class="list__item footer__paymentlogos--item">
<a href="#link" class="link ">
<img class="image footer__paymentlogos--image lazyload" src="https://images.prismic.io/vechtsportonline/e5f3b2a0-6257-45a5-84f4-635a5ccf182b_american-express-1.svg?auto=compress,format" data-src="https://images.prismic.io/vechtsportonline/e5f3b2a0-6257-45a5-84f4-635a5ccf182b_american-express-1.svg?auto=compress,format" alt="American Express" loading="lazy">
</a>
</li>
<li class="list__item footer__paymentlogos--item">
<a href="#" class="link ">
<img class="image footer__paymentlogos--image lazyload" src="https://images.prismic.io/vechtsportonline/d614f6d8-cff4-4b54-8042-bfd1bef8d258_bancontact-mister-cash.svg?auto=compress,format" data-src="https://images.prismic.io/vechtsportonline/d614f6d8-cff4-4b54-8042-bfd1bef8d258_bancontact-mister-cash.svg?auto=compress,format" alt="Bancontant Mister Cash" loading="lazy">
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="footer__absolute-footer">
<span class="colon colon--after">Copyright © 2020 Vechtsportonline.nl </span>
<span class="colon colon--after"> <a class="link" href="https://m2.vechtsportonline.nl/algemene-voorwaarden">Algemene voorwaarden</a></span>
<span class="colon colon--after"> <a class="link" href="https://m2.vechtsportonline.nl/disclaimer">Disclaimer</a> </span>
<span class="colon colon--after"> <a class="link" href="https://m2.vechtsportonline.nl/privacy-veiligheid">
Privacy Policy </a></span> </div>
</footer>
<div class="page-wrapper">
{{ render '@header--category-page' }}
<main class="container">
<div class="catalog-list__wrapper">
<div class="catalog-list__filters">
{{ render '@filters' }}
</div>
<div class="catalog-list__toolbar">
{{ render '@toolbar' }}
</div>
<div class="catalog-list__grid">
<div class="catalog-grid">
{{ render '@catalog-grid-item' gridItem merge=true }}
{{ render '@catalog-grid-item' gridItem merge=true }}
{{ render '@catalog-grid-item' gridItem merge=true }}
{{ render '@catalog-grid-item' gridItem merge=true }}
{{ render '@catalog-grid-item' gridItem merge=true }}
{{ render '@catalog-grid-item' gridItem merge=true }}
{{ render '@catalog-grid-item' gridItem merge=true }}
{{ render '@catalog-grid-item' gridItem merge=true }}
{{ render '@catalog-grid-item' gridItem merge=true }}
{{ render '@catalog-grid-item' gridItem merge=true }}
{{ render '@catalog-grid-item' gridItem merge=true }}
{{ render '@catalog-grid-item' gridItem merge=true }}
</div>
<div class="catalog-list__pager">
{{ render '@toolbar--bottom' }}
{{ render '@pager' }}
</div>
</div>
</div>
</main>
</div>
{{ render '@category-footer' }}
{{ render '@footer' }}
{
"gridItem": {
"tag": "div"
}
}
$catalog-grid__gap : 20px !default;
$catalog-grid__row-gap : 4px !default;
$catalog-grid__margin : 0 !default;
$catalog-grid__border : 1px solid $gray-light !default;
.catalog-list__wrapper {
display: grid;
grid-gap: 14px;
grid-template-areas:
"catalog-list-filters catalog-list-filters"
"catalog-list-toolbar catalog-list-toolbar"
"catalog-list-grid catalog-list-grid";
grid-template-columns: minmax(auto, 100%);
align-items: flex-end;
@include mq($screen-m) {
grid-template-areas:
"catalog-list-filters catalog-list-toolbar"
"catalog-list-grid catalog-list-grid";
grid-template-columns: minmax(auto, 65%) minmax(auto, 35%);
}
@include mq($screen-l) {
grid-template-areas:
"catalog-list-toolbar catalog-list-toolbar"
"catalog-list-filters catalog-list-grid";
grid-template-columns: minmax(auto, 30%) minmax(auto, 70%);
grid-gap: $catalog-grid__gap;
align-items: flex-start;
}
@include mq($screen-xl) {
grid-template-columns: minmax(auto, 20%) minmax(auto, 80%);
}
& .catalog-list__filters {
grid-area: catalog-list-filters;
}
& .catalog-list__toolbar {
grid-area: catalog-list-toolbar;
}
& .catalog-list__grid {
grid-area: catalog-list-grid;
}
& .catalog-list__pager {
display: flex;
flex-direction: column;
margin: 20px 0;
@include mq($screen-m) {
flex-direction: row;
}
& .pager {
display: flex;
justify-content: center;
flex-basis: 100%;
margin: 20px 0;
@include mq($screen-m) {
justify-content: flex-end;
flex-basis: 30%;
margin: 0;
}
}
}
}
.catalog-grid,
.ais-hits {
display: grid;
grid-template-columns: 1fr;
grid-column-gap: $catalog-grid__gap;
grid-row-gap: $catalog-grid__row-gap;
margin: $catalog-grid__margin;
padding: 0;
list-style: none;
@include mq($screen-s) {
grid-template-columns: 1fr 1fr;
}
@include mq($screen-l) {
grid-template-columns: 1fr 1fr 1fr;
}
@include isIE() {
display: flex;
flex-wrap: wrap;
}
}
@include mq($screen-m) {
.page-layout-1column {
.catalog-list {
&__wrapper {
display: flex;
flex-direction: column;
}
&__toolbar {
display: none;
}
&__grid {
width: 100%;
.filters {
display: none;
}
.catalog-grid {
grid-template-columns: 1fr 1fr;
width: calc(100% - 10px);
margin-block-start: 0;
padding-inline-start: 0;
.category-item-info {
display: grid;
margin-block-start: 0;
padding-inline-start: 0;
grid-template-columns: 37% 63%;
height: 100%;
align-items: end;
}
}
}
}
}
}
There are no notes for this item.