<div class="page-wrapper">
<!-- TrustBox script -->
<script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async></script>
<!-- End TrustBox script -->
<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">
<div class="header__trustpilot desktop">
<div class="trustpilot-header">
<!-- TrustBox widget - Micro Star -->
<div class="trustpilot-widget" data-locale="nl-NL" data-template-id="5419b732fbfb950b10de65e5" data-businessunit-id="4d6fd8cf00006400050edf3a" data-style-height="24px" data-style-width="100%" data-theme="dark" data-font-family="Lato">
<a href="https://nl.trustpilot.com/review/vechtsportonline.nl" target="_blank" rel="noopener">Trustpilot</a>
</div>
<!-- End TrustBox widget -->
</div>
</div>
<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__trustpilot mobile">
<div class="trustpilot-header">
<!-- TrustBox widget - Micro Star -->
<div class="trustpilot-widget" data-locale="nl-NL" data-template-id="5419b732fbfb950b10de65e5" data-businessunit-id="4d6fd8cf00006400050edf3a" data-style-height="24px" data-style-width="100%" data-theme="dark" data-font-family="Lato">
<a href="https://nl.trustpilot.com/review/vechtsportonline.nl" target="_blank" rel="noopener">Trustpilot</a>
</div>
<!-- End TrustBox widget -->
</div>
</div>
</div>
</div>
</header>
<script src="/components/raw/header/../popup/popup.js"></script>
<div class="container">
<h1 class="heading heading--page">
Shopping Cart
</h1>
<div class="row cart">
<div class="col-xs-12 col-lg-8">
<div class="cart-summary__item">
<button class="button button--fluid cart-summary__checkout-button">
Proceed to Checkout
</button>
</div>
<form class="cart__products-list">
<div class="cart-list-item">
<div class="cart-list-item__image">
<div class="lazyload-wrapper ">
<img class="image lazyload " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/images/product/cart-product-160_160.jpg" alt="product name goes here">
</div>
</div>
<div class="cart-list-item__info">
<div class="cart-list-item__data">
<a href="#" class="link link--invert cart-list-item__name">
Some product long name
</a>
<div class="cart-list-item__details">
<div class="cart-list-item__qty">
<div class="input cart-list-item__qty-wrapper">
<span class="form-check" aria-label="form-check-">
<svg class="icon " role="img">
<title>Angle down icon</title>
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</span>
<label class="
label
label--hidden
" for="">
Qty:
</label>
<input class="input__field cart-list-item__qty-input" id="" name="" type="" placeholder="Qty">
</div>
</div>
<div class="cart-list-item__price">
$85.00
</div>
</div>
<dl class="list list--description cart-list-item__attributes">
<dt class="list__label">Size</dt>
<dd class="list__value">XXL</dd>
<dt class="list__label">Color</dt>
<dd class="list__value">Red</dd>
</dl>
</div>
<div class="cart-list-item__actions">
<a class="button button--icon cart-list-item__actions-item" href="#" aria-label="edit product in your shopping cart">
<svg class="icon button__icon" role="img">
<title>Edit pencil</title>
<use xlink:href="/images/icons-sprite.svg#edit"></use>
</svg>
</a>
<button class="button button--icon cart-list-item__actions-item" href="#" aria-label="remove this product from your shopping cart">
<svg class="icon button__icon" role="img">
<title>Trash bin</title>
<use xlink:href="/images/icons-sprite.svg#remove"></use>
</svg>
</button>
</div>
</div>
</div>
<div class="cart-list-item">
<div class="cart-list-item__image">
<div class="lazyload-wrapper ">
<img class="image lazyload " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/images/product/cart-product-160_160.jpg" alt="product name goes here">
</div>
</div>
<div class="cart-list-item__info">
<div class="cart-list-item__data">
<a href="#" class="link link--invert cart-list-item__name">
Some product long name
</a>
<div class="cart-list-item__details">
<div class="cart-list-item__qty">
<div class="input cart-list-item__qty-wrapper">
<span class="form-check" aria-label="form-check-">
<svg class="icon " role="img">
<title>Angle down icon</title>
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</span>
<label class="
label
label--hidden
" for="">
Qty:
</label>
<input class="input__field cart-list-item__qty-input" id="" name="" type="" placeholder="Qty">
</div>
</div>
<div class="cart-list-item__price">
$85.00
</div>
</div>
<dl class="list list--description cart-list-item__attributes">
<dt class="list__label">Size</dt>
<dd class="list__value">XXL</dd>
<dt class="list__label">Color</dt>
<dd class="list__value">Red</dd>
</dl>
</div>
<div class="cart-list-item__actions">
<a class="button button--icon cart-list-item__actions-item" href="#" aria-label="edit product in your shopping cart">
<svg class="icon button__icon" role="img">
<title>Edit pencil</title>
<use xlink:href="/images/icons-sprite.svg#edit"></use>
</svg>
</a>
<button class="button button--icon cart-list-item__actions-item" href="#" aria-label="remove this product from your shopping cart">
<svg class="icon button__icon" role="img">
<title>Trash bin</title>
<use xlink:href="/images/icons-sprite.svg#remove"></use>
</svg>
</button>
</div>
</div>
</div>
<div class="cart-actions">
<a class="button button--secondary button--link cart-actions__button cart-actions__button--continue">
Continue Shipping
</a>
<button class="button button--secondary cart-actions__button">
Update shopping cart
</button>
<button class="button button--secondary cart-actions__button">
Clear shopping cart
</button>
</div>
</form>
<div class="row cart__bottom">
<div class="discount">
<div class="discount__title">
<span class="discount__title-text">
Apply Discount Code
</span>
<svg class="icon discount__title-icon" role="img">
<title>Arrow down</title>
<use xlink:href="/images/icons-sprite.svg#arrow-down"></use>
</svg>
</div>
<div class="discount__content">
<form>
<div class="discount__controls">
<div class="input discount__input">
<span class="form-check" aria-label="form-check-discount-code">
<svg class="icon " role="img">
<title>Angle down icon</title>
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</span>
<label class="
label
label--hidden
" for="discount-code">
</label>
<input class="input__field discount__field" id="discount-code" name="discount-code" type="" placeholder="Enter discount code">
</div>
<button class="button discount__button">
Apply Discount
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-lg-4">
<div class="cart-summary">
<div class="cart-summary__item">
<h2>Summary</h2>
</div>
<div class="cart-summary__item">
<div class="select ">
<label class="label label--hidden" for="expiration_year">
Expiration Year
</label>
<select id="expiration_year" class="select__field credit-card__field " name="expiration_year">
<option value="option1">
Option 1
</option>
<option value="option2">
Option 2
</option>
<option value="option3" disabled>
Option 3
</option>
</select>
</div>
</div>
<div class="cart-summary__item">
<div class="select ">
<label class="label label--hidden" for="expiration_year">
Expiration Year
</label>
<select id="expiration_year" class="select__field credit-card__field " name="expiration_year">
<option value="option1">
Option 1
</option>
<option value="option2">
Option 2
</option>
<option value="option3" disabled>
Option 3
</option>
</select>
</div>
</div>
<div class="cart-summary__item">
<div class="input ">
<span class="form-check" aria-label="form-check-qty1">
<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
bundle-option__label
" for="qty1">
Card Verification Number
</label>
<input class="input__field " id="qty1" name="qty1" type="number" placeholder="" min="0">
</div>
</div>
<div class="cart-summary__item">
<div class="input ">
<span class="form-check" aria-label="form-check-qty1">
<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
bundle-option__label
" for="qty1">
Card Verification Number
</label>
<input class="input__field " id="qty1" name="qty1" type="number" placeholder="" min="0">
</div>
</div>
<div class="cart-summary__item cart-summary__shipping-methods">
<div class="cart-summary__shipping-methods-heading">
</div>
<div class="radio ">
<fieldset class="radio__fieldset" aria-labelledby="">
</fieldset>
</div>
<div class="cart-summary__shipping-methods-heading">
</div>
<div class="radio ">
<fieldset class="radio__fieldset" aria-labelledby="">
</fieldset>
</div>
<div class="cart-summary__shipping-methods-heading">
</div>
<div class="radio ">
<fieldset class="radio__fieldset" aria-labelledby="">
</fieldset>
</div>
<div class="cart-summary__shipping-methods-heading">
</div>
<div class="radio ">
<fieldset class="radio__fieldset" aria-labelledby="">
</fieldset>
</div>
</div>
<div class="cart-summary__item cart-totals">
<div class="row row--no-margins between-xs cart-totals__row">
<div class="cart-totals__row-label">
Subtotal
</div>
<div class="cart-totals__row-value">
$34.00
</div>
</div>
<div class="row row--no-margins between-xs cart-totals__row">
<div class="cart-totals__row-label">
Tax
</div>
<div class="cart-totals__row-value">
$00.00
</div>
</div>
<div class="row row--no-margins between-xs cart-totals__row">
<div class="cart-totals__row-label">
Next long row here
</div>
<div class="cart-totals__row-value">
$00.00
</div>
</div>
<div class="
row
row--no-margins
between-xs
cart-totals__row
cart-totals__row--summary
">
<div class="
cart-totals__row-label
cart-totals__row-label--total
">
Order Total
</div>
<div class="
cart-totals__row-value
cart-totals__row-value--total
">
$34.00
</div>
</div>
</div>
<div class="cart-summary__item">
<button class="button button--fluid cart-summary__checkout-button">
Proceed to Checkout
</button>
</div>
<div class="cart-summary__item">
<a class="cart-summary__multiple-addresses" href="#">
Check Out with Multiple Addresses
</a>
</div>
</div>
</div>
</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' }}
<div class="container">
{{ render '@heading' mainHeading }}
<div class="row cart">
<div class="col-xs-12 col-lg-8">
<div class="cart-summary__item">
{{ render '@button--fluid' buttonCheckout }}
</div>
<form class="cart__products-list">
{{#each productList as |item| }}
{{ render '@cart-list-item' }}
{{/each}}
<div class="cart-actions">
{{ render '@button--link' buttonContinueShipping }}
{{ render '@button--secondary' buttonUpdateCart }}
{{ render '@button' buttonClearCart }}
</div>
</form>
<div class="row cart__bottom">
<div class="discount">
<div class="discount__title">
<span class="discount__title-text">
{{ discount.title }}
</span>
{{ render '@icon' discount.icon }}
</div>
<div class="discount__content">
<form>
<div class="discount__controls">
{{ render '@input' discount.input }}
{{ render '@button' discount.button }}
</div>
</form>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-lg-4">
<div class="cart-summary">
<div class="cart-summary__item">
<h2>Summary</h2>
</div>
<div class="cart-summary__item">
{{ render '@select' }}
</div>
<div class="cart-summary__item">
{{ render '@select' }}
</div>
<div class="cart-summary__item">
{{ render '@input' }}
</div>
<div class="cart-summary__item">
{{ render '@input' }}
</div>
<div class="cart-summary__item cart-summary__shipping-methods">
{{#each shippingMethods as |shippingMethod| }}
<div class="cart-summary__shipping-methods-heading">
{{ shippingMethod.heading }}
</div>
{{ render '@radio' shippingMethod }}
{{/each}}
</div>
<div class="cart-summary__item cart-totals">
<div class="row row--no-margins between-xs cart-totals__row">
<div class="cart-totals__row-label">
Subtotal
</div>
<div class="cart-totals__row-value">
$34.00
</div>
</div>
<div class="row row--no-margins between-xs cart-totals__row">
<div class="cart-totals__row-label">
Tax
</div>
<div class="cart-totals__row-value">
$00.00
</div>
</div>
<div class="row row--no-margins between-xs cart-totals__row">
<div class="cart-totals__row-label">
Next long row here
</div>
<div class="cart-totals__row-value">
$00.00
</div>
</div>
<div
class="
row
row--no-margins
between-xs
cart-totals__row
cart-totals__row--summary
"
>
<div
class="
cart-totals__row-label
cart-totals__row-label--total
"
>
Order Total
</div>
<div
class="
cart-totals__row-value
cart-totals__row-value--total
"
>
$34.00
</div>
</div>
</div>
<div class="cart-summary__item">
{{ render '@button--fluid' buttonCheckout }}
</div>
<div class="cart-summary__item">
<a class="cart-summary__multiple-addresses" href="#">
Check Out with Multiple Addresses
</a>
</div>
</div>
</div>
</div>
</div>
</div>
{{ render '@footer' }}
{
"mainHeading": {
"tag": "h1",
"text": "Shopping Cart",
"class": "heading heading--page"
},
"discount": {
"title": "Apply Discount Code",
"icon": {
"id": "arrow-down",
"title": "Arrow down",
"class": "discount__title-icon"
},
"button": {
"tag": "button",
"text": "Apply Discount",
"class": "discount__button"
},
"input": {
"class": "discount__input",
"label": {
"class": "label--hidden"
},
"field": {
"placeholder": "Enter discount code",
"id": "discount-code",
"name": "discount-code",
"class": "discount__field"
}
}
},
"productList": [
{
"name": "Product name whatever",
"image": {
"src": "/images/product/product-img-230_180.png"
},
"price": "$223.00",
"subtotal": "$1 115.00",
"attributes": {
"listTag": "dl",
"elementTag": "dt",
"valueTag": "dd",
"class": "products-list-item__attributes",
"elements": [
{
"label": "Color",
"value": "Red"
},
{
"label": "Size",
"value": "40/32"
}
]
},
"input": {
"class": "products-list-item__details-qty-wrapper",
"label": {
"class": "label--hidden"
},
"field": {
"attributes": "value=\"5\"",
"id": "qtyValue",
"name": "qtyValue",
"class": "products-list-item__details-qty-input"
}
},
"buttonEdit": {
"tag": "a",
"text": "",
"class": "button--icon products-list-item__actions-button",
"icon": {
"id": "edit",
"title": "Edit pencil",
"class": "button__icon"
}
},
"buttonRemove": {
"tag": "a",
"text": "",
"class": "button--icon products-list-item__actions-button",
"icon": {
"id": "remove",
"title": "Trash bin",
"class": "button__icon"
}
}
},
{
"name": "Product name whatever",
"image": {
"src": "/images/product/product-img-230_180.png"
},
"price": "$195.00",
"subtotal": "$715.00",
"attributes": {
"listTag": "dl",
"elementTag": "dt",
"valueTag": "dd",
"class": "products-list-item__attributes",
"elements": [
{
"label": "Color",
"value": "Red"
},
{
"label": "Size",
"value": "40/32"
}
]
},
"input": {
"class": "products-list-item__details-qty-wrapper",
"label": {
"class": "label--hidden"
},
"field": {
"attributes": "value=\"5\"",
"id": "qtyValue",
"name": "qtyValue",
"class": "products-list-item__details-qty-input"
}
},
"buttonEdit": {
"tag": "a",
"text": "",
"class": "button--icon products-list-item__actions-button",
"icon": {
"id": "edit",
"title": "Edit pencil",
"class": "button__icon"
}
},
"buttonRemove": {
"tag": "a",
"text": "",
"class": "button--icon products-list-item__actions-button",
"icon": {
"id": "remove",
"title": "Trash bin",
"class": "button__icon"
}
}
}
],
"buttonUpdateCart": {
"tag": "button",
"text": "Update shopping cart",
"class": "button--secondary cart-actions__button"
},
"buttonClearCart": {
"tag": "button",
"text": "Clear shopping cart",
"class": "button--secondary cart-actions__button"
},
"buttonContinueShipping": {
"tag": "a",
"text": "Continue Shipping",
"class": "button--secondary button--link cart-actions__button cart-actions__button--continue"
},
"discountForm": {
"class": "form--compact cart__discount",
"input": {
"class": "",
"field": {
"class": "form-compact__input-field cart__discount-field",
"id": "discountCode",
"name": "discountCode",
"placeholder": "Enter discount code"
}
},
"button": {
"tag": "button",
"text": "Apply Discount",
"class": ""
},
"heading": {
"class": ""
}
},
"shippingMethods": {
"name": "shippingMethods",
"legend": "Choose option",
"legendId": "legend-id",
"options": [
{
"id": "id",
"label": "Fixed $5.00"
},
{
"id": "id1",
"label": "Table Rate $15.00"
}
]
},
"buttonCheckout": {
"tag": "button",
"text": "Proceed to Checkout",
"class": "button--fluid cart-summary__checkout-button"
}
}
$cart-actions__margin : 15px !default;
$cart-actions__padding: 10px !default;
.cart-actions {
display: flex;
flex-wrap: wrap;
margin-top: $cart-actions__margin;
&__button {
width: 100%;
margin-bottom: $cart-actions__margin;
@include mq($screen-m) {
width: 190px;
margin: 0 0 $cart-actions__margin $cart-actions__margin;
padding: 0 $cart-actions__padding;
}
&--continue {
@include mq($screen-m) {
margin: 0 auto 0 0;
}
}
}
}
$discount__margin : $spacer--medium !default;
$discount__transition : $transition-base !default;
$discount__icon-width : 18px !default;
$discount__icon-height : 18px !default;
$discount__title-icon-transform : rotate(180deg) !default;
$discount__field-background : $white !default;
$discount__field-padding : 0 $spacer--medium !default;
$discount__field-border-radius : $border-radius !default;
$discount__field-height : 47px !default;
$discount__field-color : $black !default;
$discount__field-color--placeholder : rgba(255, 255, 255, 0.7) !default;
$discount__button-height : 47px !default;
$discount__button-border-radius : $border-radius !default;
$discount__button-padding : 0 21px !default;
// sass-lint:disable no-ids no-important
.discount {
flex-basis: 100%;
margin-bottom: $discount__margin;
padding: 0;
&.active {
.discount__title-icon {
transform: $discount__title-icon-transform;
}
}
&__title {
display: flex;
align-items: center;
padding: $spacer--medium 0;
cursor: pointer;
}
&__title-text {
margin-right: $discount__margin;
font-weight: 500;
}
&__title-icon {
width: $discount__icon-width;
height: $discount__icon-height;
transition: $discount__transition;
}
&__content {
display: none;
}
&__form {
display: block;
}
&__controls {
position: relative;
height: auto;
}
&__input {
margin: 0;
}
&__field {
height: $discount__field-height !important;
padding: $discount__field-padding;
margin: 0;
border: none;
border-radius: $discount__field-border-radius;
color: $discount__field-color;
line-height: $discount__field-height !important;
background: $discount__field-background;
&::placeholder {
color: $discount__field-color--placeholder;
}
}
&__button {
position: absolute;
top: 0;
right: -2px;
height: $discount__button-height !important;
width: auto;
border-radius: $discount__button-border-radius;
padding: $discount__button-padding;
&:hover,
&:focus {
cursor: pointer;
outline: none;
}
}
}
// sass-lint:enable no-ids no-important
$cart__margin : $spacer--large !default;
$cart__border : 1px solid $gray-lighter !default;
$cart__bottom-margin : 0 !default;
$cart__bottom-padding : $spacer 0 0 0 !default;
.checkout-cart-index
.cart {
display: flex;
margin: $spacer--5 0 $spacer--2 0;
&__bottom {
display: flex;
margin: $cart__bottom-margin;
padding: $cart__bottom-padding;
border-top: $cart__border;
}
&__products-list {
margin: 0;
border-top: $cart__border;
}
}
.checkout-cart-index {
.column.main {
.title-wrapper {
flex-direction: row;
background: $gray-lightest;
margin: $spacer--1 $spacer--05 0;
border-radius: 10px 10px 0 0;
padding: 1rem;
@include mq($screen-l) {
margin: $spacer--2 0;
background: transparent;
border-radius: 10px;
}
.heading {
border-bottom: 1px solid;
padding-bottom: 1rem;
margin-bottom: 0;
@include mq($screen-l) {
border: none;
}
}
& + .cart {
margin-top: 0;
display: flex;
flex-direction: column-reverse;
@include mq($screen-l) {
flex-direction: row;
}
}
}
}
}
$cart-summary__padding : 15px !default;
$cart-summary__margin : 15px !default;
$cart-summary__background : $gray-lightest !default;
$cart-summary__shipping-methods-margin : 25px 0 !default;
$cart-summary__shipping-methods-font-size: $font-size-small !default;
$cart-summary__item-padding : 5px !default;
$cart-summary__multiple-addresses-margin : $cart-summary__margin 0 ($cart-summary__margin - 5) !default;
.cart-summary {
padding: $cart-summary__padding;
background-color: $cart-summary__background;
border-radius: 0 0 10px 10px;
margin-top: -1px;
margin-bottom: 1rem;
@include mq($screen-l) {
border-radius: 10px;
margin-bottom: 1rem;
}
&__item {
display: block;
flex: 1 0 100%;
padding: $cart-summary__item-padding;
}
&__shipping-methods {
margin: $cart-summary__shipping-methods-margin;
&-heading {
margin-bottom: 5px;
font-weight: 600;
font-size: $cart-summary__shipping-methods-font-size;
}
}
& .button.checkout {
display: block;
margin-bottom: 0;
width: 100%;
background: $color-button-darker;
&:hover {
background: $color-button-hover;
}
}
&__multiple-addresses {
display: block;
width: 100%;
margin: $cart-summary__multiple-addresses-margin;
text-align: center;
}
& .shipping-estimation__title {
display: flex;
flex-direction: row;
justify-content: space-between;
font-weight: 600;
&-icon {
width: $spacer--1;
height: $spacer--1;
}
}
& .shipping-estimation__title-text {
margin-right: $spacer--2;
}
.paymenticons__cart---list {
display: flex;
flex-flow: row nowrap;
justify-content: space-around;
@include mq($screen-m) {
flex-flow: row wrap;
}
@include mq($screen-l) {
flex-flow: row nowrap;
}
}
.usps {
&__block {
p {
margin: 0;
}
}
}
}
$cart-totals__padding : 15px !default;
$cart-totals__margin : 15px !default;
$cart-totals__border : 1px solid #d9d9d9 !default;
$cart-totals__font-size : $font-size-base !default;
$cart-totals__padding--summary : ($cart-totals__padding - 5) !default;
$cart-totals__font-size--summary: $font-size-base !default;
.cart-totals {
padding-top: $cart-totals__padding;
border-top: $cart-totals__border;
&__row {
padding-bottom: $cart-totals__margin;
font-size: $cart-totals__font-size;
display: flex;
justify-content: space-between;
&--summary {
margin-bottom: $cart-totals__margin;
padding-top: $cart-totals__padding--summary;
border-top: $cart-totals__border;
font-weight: 600;
font-size: $cart-totals__font-size--summary;
}
}
.totals-tax-summary {
display: none;
justify-content: space-between;
}
}
There are no notes for this item.