<div class="page-wrapper">
    <a href="#maincontent" class="skip-nav">
        Skip to content
    </a>
    <script src="/components/raw/skip-nav/skip-nav.js" defer></script>

    <div class="marketing-bar marketing-bar--closed" data-type="marketing-bar">
        <div class="container marketing-bar__container">
            <div class="marketing-bar__text">
                Subscribe and get 10$ for Shopping! Lorem ipsum text in marketing bar.
            </div>
            <button class="button button--icon button--rotate-icon marketing-bar__close" type="button" aria-label="Close marketing bar">
                <svg class="icon button__icon marketing-bar__close-icon" role="img">
                    <title>Close</title>
                    <use xlink:href="/images/icons-sprite.svg#close"></use>
                </svg>

            </button>

        </div>
    </div>
    <script src="/components/raw/marketing-bar/marketing-bar.js"></script>

    <div class="contact-bar ">
        <div class="contact-bar__container container">
            <ul class="list contact-bar__list contact-bar__list--icons">
                <li class="list-item contact-bar__item">
                    <a href="#" class="
                            contact-bar__link
                            
                        ">
                        <span class="
                            icon
                            contact-bar__icon
                        " aria-label="">
                            <svg class="icon " role="img">
                                <use xlink:href="/images/icons-sprite.svg#undefined"></use>
                            </svg>

                        </span>
                        <span class="
                                button__text
                                contact-bar__text
                            ">
                            Account
                        </span>
                    </a>
                </li>
                <li class="list-item contact-bar__item">
                    <a href="#" class="
                            contact-bar__link
                            
                        ">
                        <span class="
                            icon
                            contact-bar__icon
                        " aria-label="">
                            <svg class="icon " role="img">
                                <use xlink:href="/images/icons-sprite.svg#undefined"></use>
                            </svg>

                        </span>
                        <span class="
                                button__text
                                contact-bar__text
                            ">
                            Klantenservice
                        </span>
                    </a>
                </li>
                <li class="list-item contact-bar__item">
                    <a href="#" class="
                            contact-bar__link
                            
                        ">
                        <span class="
                            icon
                            contact-bar__icon
                        " aria-label="">
                            <svg class="icon " role="img">
                                <use xlink:href="/images/icons-sprite.svg#undefined"></use>
                            </svg>

                        </span>
                        <span class="
                                button__text
                                contact-bar__text
                            ">
                            Groothandel
                        </span>
                    </a>
                </li>
            </ul>
            <ul class="list contact-bar__list contact-bar__list--icons">
                <li class="list-item contact-bar__item">
                    <a href="tel:+31858772604" class="
                        contact-bar__link
                        
                    ">
                        <span class="
                            icon
                            contact-bar__icon
                        " aria-label="">
                            <svg class="icon " role="img">
                                <title>Phone</title>
                                <use xlink:href="/images/icons-sprite.svg#phone"></use>
                            </svg>

                        </span>
                        <span class="
                            button__text
                            contact-bar__text
                        ">
                            T: 085 - 877 26 04
                        </span>
                    </a>
                </li>
                <li class="contact-bar__item">
                    <a href="mailto:info@kappersmagazijn.nl" class="
                        contact-bar__link
                        
                    ">
                        <span class="
                            icon
                            contact-bar__icon
                        " aria-label="">
                            <svg class="icon " role="img">
                                <title>Email</title>
                                <use xlink:href="/images/icons-sprite.svg#envelope"></use>
                            </svg>

                        </span>
                        <span class="
                            button__text
                            contact-bar__text
                        ">
                            E-mail
                        </span>
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <header class="header ">
        <div class="container">
            <div class="header__wrapper">
                <a class="logo header__logo" href="#" aria-label="Homepage">
                    <img class="logo__image " src="/images/logo/logo.svg" alt="Kappersmagazijn Logo">
                </a>

                <div class="side-menu ">
                    <button class="button button--icon modal-trigger side-menu__trigger" type="button" data-modal-trigger="side-menu" aria-label="Open menu">
                        <svg class="icon side-menu__trigger-icon" role="presentation" focusable="false">
                            <title>Mobile-menu</title>
                            <use xlink:href="/images/icons-sprite.svg#mobile-menu"></use>
                        </svg>

                    </button>

                    <div role="dialog" aria-hidden="true" id="side-menu" data-modal="side-menu" class="modal modal--tertiary side-menu__modal">
                        <div role="document" class="modal__container side-menu__container" tabindex="0">
                            <div class="modal__content side-menu__content">

                                <div class="modal__middle side-menu__content-middle">

                                    <div id="dropdown-default" class="dropdown-list dropdown-list--with-nested">
                                        <ul class="dropdown-list__list">
                                            <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                                                <button class="dropdown-list__label " aria-expanded="false" aria-controls="dropdown-1">
                                                    dropdown title

                                                    <svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
                                                        <title>Arrow Down</title>
                                                        <use xlink:href="/images/icons-sprite.svg#angle-down"></use>
                                                    </svg>

                                                </button>

                                                <div id="dropdown-1" class="dropdown-list__content " aria-hidden="true">
                                                    <div id="" class="dropdown-list dropdown-list--inner">
                                                        <ul class="dropdown-list__list">
                                                            <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                                                                <a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-1-1">
                                                                    Item name

                                                                    <svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
                                                                        <title>Arrow Down</title>
                                                                        <use xlink:href="/images/icons-sprite.svg#angle-down"></use>
                                                                    </svg>

                                                                </a>

                                                                <div id="dropdown-1-1" class="dropdown-list__content " aria-hidden="true">
                                                                    <div id="" class="dropdown-list dropdown-list--inner">
                                                                        <ul class="dropdown-list__list">
                                                                            <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                                                                                <a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-1-2">
                                                                                    sublist item name

                                                                                    <svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
                                                                                        <title>Arrow Down</title>
                                                                                        <use xlink:href="/images/icons-sprite.svg#angle-down"></use>
                                                                                    </svg>

                                                                                </a>

                                                                                <div id="dropdown-1-2" class="dropdown-list__content " aria-hidden="true">
                                                                                    <div id="" class="dropdown-list dropdown-list--inner">
                                                                                        <ul class="dropdown-list__list">
                                                                                            <li class="
                    dropdown-list__item
                ">
                                                                                                <a class="dropdown-list__label " href="#">
                                                                                                    sub sublist item name

                                                                                                </a>

                                                                                            </li>
                                                                                            <li class="
                    dropdown-list__item
                ">
                                                                                                <a class="dropdown-list__label " href="#">
                                                                                                    sub sublist item name

                                                                                                </a>

                                                                                            </li>
                                                                                        </ul>
                                                                                    </div>

                                                                                </div>
                                                                            </li>
                                                                            <li class="
                    dropdown-list__item
                ">
                                                                                <a class="dropdown-list__label " href="#">
                                                                                    sublist item name

                                                                                </a>

                                                                            </li>
                                                                            <li class="
                    dropdown-list__item
                ">
                                                                                <a class="dropdown-list__label " href="#">
                                                                                    sublist item name

                                                                                </a>

                                                                            </li>
                                                                        </ul>
                                                                    </div>

                                                                </div>
                                                            </li>
                                                            <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                                                                <a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-2-2">
                                                                    Item name

                                                                    <svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
                                                                        <title>Arrow Down</title>
                                                                        <use xlink:href="/images/icons-sprite.svg#angle-down"></use>
                                                                    </svg>

                                                                </a>

                                                                <div id="dropdown-2-2" class="dropdown-list__content " aria-hidden="true">
                                                                    <div id="" class="dropdown-list dropdown-list--inner">
                                                                        <ul class="dropdown-list__list">
                                                                            <li class="
                    dropdown-list__item
                ">
                                                                                <a class="dropdown-list__label " href="#">
                                                                                    sublist item name

                                                                                </a>

                                                                            </li>
                                                                            <li class="
                    dropdown-list__item
                ">
                                                                                <a class="dropdown-list__label " href="#">
                                                                                    sublist item name

                                                                                </a>

                                                                            </li>
                                                                            <li class="
                    dropdown-list__item
                ">
                                                                                <a class="dropdown-list__label " href="#">
                                                                                    sublist item name

                                                                                </a>

                                                                            </li>
                                                                        </ul>
                                                                    </div>

                                                                </div>
                                                            </li>
                                                            <li class="
                    dropdown-list__item
                ">
                                                                <a class="dropdown-list__label " href="#">
                                                                    Item name

                                                                </a>

                                                            </li>
                                                            <li class="
                    dropdown-list__item
                ">
                                                                <a class="dropdown-list__label " href="#">
                                                                    Item name

                                                                </a>

                                                            </li>
                                                        </ul>
                                                    </div>

                                                </div>
                                            </li>
                                            <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                                                <a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-2">
                                                    dropdown title

                                                    <svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
                                                        <title>Arrow Down</title>
                                                        <use xlink:href="/images/icons-sprite.svg#angle-down"></use>
                                                    </svg>

                                                </a>

                                                <div id="dropdown-2" class="dropdown-list__content " aria-hidden="true">
                                                    <div id="" class="dropdown-list dropdown-list--inner">
                                                        <ul class="dropdown-list__list">
                                                            <li class="
                    dropdown-list__item
                ">
                                                                <a class="dropdown-list__label " href="#">
                                                                    Item name

                                                                </a>

                                                            </li>
                                                            <li class="
                    dropdown-list__item
                ">
                                                                <a class="dropdown-list__label " href="#">
                                                                    Item name

                                                                </a>

                                                            </li>
                                                        </ul>
                                                    </div>

                                                </div>
                                            </li>
                                            <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                                                <a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-3">
                                                    dropdown title

                                                    <svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
                                                        <title>Arrow Down</title>
                                                        <use xlink:href="/images/icons-sprite.svg#angle-down"></use>
                                                    </svg>

                                                </a>

                                                <div id="dropdown-3" class="dropdown-list__content " aria-hidden="true">
                                                    <div id="" class="dropdown-list dropdown-list--inner">
                                                        <ul class="dropdown-list__list">
                                                            <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                                                                <a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-3-1">
                                                                    Item name

                                                                    <svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
                                                                        <title>Arrow Down</title>
                                                                        <use xlink:href="/images/icons-sprite.svg#angle-down"></use>
                                                                    </svg>

                                                                </a>

                                                                <div id="dropdown-3-1" class="dropdown-list__content " aria-hidden="true">
                                                                    <div id="" class="dropdown-list dropdown-list--inner">
                                                                        <ul class="dropdown-list__list">
                                                                            <li class="
                    dropdown-list__item
                ">
                                                                                <a class="dropdown-list__label " href="#">
                                                                                    sublist item name

                                                                                </a>

                                                                            </li>
                                                                            <li class="
                    dropdown-list__item
                ">
                                                                                <a class="dropdown-list__label " href="#">
                                                                                    sublist item name

                                                                                </a>

                                                                            </li>
                                                                        </ul>
                                                                    </div>

                                                                </div>
                                                            </li>
                                                            <li class="
                    dropdown-list__item
                ">
                                                                <a class="dropdown-list__label " href="#">
                                                                    Item name

                                                                </a>

                                                            </li>
                                                            <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                                                                <a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-3-2">
                                                                    Item name

                                                                    <svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
                                                                        <title>Arrow Down</title>
                                                                        <use xlink:href="/images/icons-sprite.svg#angle-down"></use>
                                                                    </svg>

                                                                </a>

                                                                <div id="dropdown-3-2" class="dropdown-list__content " aria-hidden="true">
                                                                    <div id="" class="dropdown-list dropdown-list--inner">
                                                                        <ul class="dropdown-list__list">
                                                                            <li class="
                    dropdown-list__item
                ">
                                                                                <a class="dropdown-list__label " href="#">
                                                                                    sublist item name

                                                                                </a>

                                                                            </li>
                                                                            <li class="
                    dropdown-list__item
                ">
                                                                                <a class="dropdown-list__label " href="#">
                                                                                    sublist item name

                                                                                </a>

                                                                            </li>
                                                                            <li class="
                    dropdown-list__item
                ">
                                                                                <a class="dropdown-list__label " href="#">
                                                                                    sublist item name

                                                                                </a>

                                                                            </li>
                                                                            <li class="
                    dropdown-list__item
                ">
                                                                                <a class="dropdown-list__label " href="#">
                                                                                    sublist item name

                                                                                </a>

                                                                            </li>
                                                                            <li class="
                    dropdown-list__item
                ">
                                                                                <a class="dropdown-list__label " href="#">
                                                                                    sublist item name

                                                                                </a>

                                                                            </li>
                                                                            <li class="
                    dropdown-list__item
                ">
                                                                                <a class="dropdown-list__label " href="#">
                                                                                    sublist item name

                                                                                </a>

                                                                            </li>
                                                                        </ul>
                                                                    </div>

                                                                </div>
                                                            </li>
                                                            <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                                                                <a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-3-3">
                                                                    Item name

                                                                    <svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
                                                                        <title>Arrow Down</title>
                                                                        <use xlink:href="/images/icons-sprite.svg#angle-down"></use>
                                                                    </svg>

                                                                </a>

                                                                <div id="dropdown-3-3" class="dropdown-list__content " aria-hidden="true">
                                                                    <div id="" class="dropdown-list dropdown-list--inner">
                                                                        <ul class="dropdown-list__list">
                                                                            <li class="
                    dropdown-list__item
                ">
                                                                                <a class="dropdown-list__label " href="#">
                                                                                    sublist item name

                                                                                </a>

                                                                            </li>
                                                                        </ul>
                                                                    </div>

                                                                </div>
                                                            </li>
                                                            <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                                                                <a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-3-4">
                                                                    item name

                                                                    <svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
                                                                        <title>Arrow Down</title>
                                                                        <use xlink:href="/images/icons-sprite.svg#angle-down"></use>
                                                                    </svg>

                                                                </a>

                                                                <div id="dropdown-3-4" class="dropdown-list__content " aria-hidden="true">
                                                                    <div id="" class="dropdown-list dropdown-list--inner">
                                                                        <ul class="dropdown-list__list">
                                                                            <li class="
                    dropdown-list__item
                ">
                                                                                <a class="dropdown-list__label " href="#">
                                                                                    sublist item name

                                                                                </a>

                                                                            </li>
                                                                        </ul>
                                                                    </div>

                                                                </div>
                                                            </li>
                                                        </ul>
                                                    </div>

                                                </div>
                                            </li>
                                        </ul>
                                    </div>

                                    <script type="text/javascript">
                                        new DropdownList(document.getElementById('dropdown-default'));
                                    </script>

                                </div>

                                <div class="modal__bottom side-menu__content-bottom">
                                    <div class="modal__bottom-actions side-menu__bottom-actions">
                                        <div class="
                                    modal__bottom-action
                                    side-menu__bottom-action
                                ">
                                            <div class="contact-bar contact-bar--vertical">
                                                <div class="contact-bar__container ">
                                                    <ul class="list contact-bar__list contact-bar__list--icons">
                                                        <li class="list-item contact-bar__item">
                                                            <a href="#" class="
                            contact-bar__link
                            
                        ">
                                                                <span class="
                            icon
                            contact-bar__icon
                        " aria-label="">
                                                                    <svg class="icon " role="img">
                                                                        <use xlink:href="/images/icons-sprite.svg#undefined"></use>
                                                                    </svg>

                                                                </span>
                                                                <span class="
                                button__text
                                contact-bar__text
                            ">
                                                                    Account
                                                                </span>
                                                            </a>
                                                        </li>
                                                        <li class="list-item contact-bar__item">
                                                            <a href="#" class="
                            contact-bar__link
                            
                        ">
                                                                <span class="
                            icon
                            contact-bar__icon
                        " aria-label="">
                                                                    <svg class="icon " role="img">
                                                                        <use xlink:href="/images/icons-sprite.svg#undefined"></use>
                                                                    </svg>

                                                                </span>
                                                                <span class="
                                button__text
                                contact-bar__text
                            ">
                                                                    Klantenservice
                                                                </span>
                                                            </a>
                                                        </li>
                                                        <li class="list-item contact-bar__item">
                                                            <a href="#" class="
                            contact-bar__link
                            
                        ">
                                                                <span class="
                            icon
                            contact-bar__icon
                        " aria-label="">
                                                                    <svg class="icon " role="img">
                                                                        <use xlink:href="/images/icons-sprite.svg#undefined"></use>
                                                                    </svg>

                                                                </span>
                                                                <span class="
                                button__text
                                contact-bar__text
                            ">
                                                                    Groothandel
                                                                </span>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                    <ul class="list contact-bar__list contact-bar__list--icons">
                                                        <li class="list-item contact-bar__item">
                                                            <a href="tel:+31858772604" class="
                        contact-bar__link
                        
                    ">
                                                                <span class="
                            icon
                            contact-bar__icon
                        " aria-label="">
                                                                    <svg class="icon " role="img">
                                                                        <title>Phone</title>
                                                                        <use xlink:href="/images/icons-sprite.svg#phone"></use>
                                                                    </svg>

                                                                </span>
                                                                <span class="
                            button__text
                            contact-bar__text
                        ">
                                                                    T: 085 - 877 26 04
                                                                </span>
                                                            </a>
                                                        </li>
                                                        <li class="contact-bar__item">
                                                            <a href="mailto:info@kappersmagazijn.nl" class="
                        contact-bar__link
                        
                    ">
                                                                <span class="
                            icon
                            contact-bar__icon
                        " aria-label="">
                                                                    <svg class="icon " role="img">
                                                                        <title>Email</title>
                                                                        <use xlink:href="/images/icons-sprite.svg#envelope"></use>
                                                                    </svg>

                                                                </span>
                                                                <span class="
                            button__text
                            contact-bar__text
                        ">
                                                                    E-mail
                                                                </span>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>

                            <button class="button button--icon button--rotate-icon modal__close-button side-menu__close-button" type="button" aria-label="click to close the modal">
                                <svg class="icon button__icon modal__close-button-icon" role="presentation" focusable="false">
                                    <title>Close</title>
                                    <use xlink:href="/images/icons-sprite.svg#close"></use>
                                </svg>

                            </button>

                        </div>
                    </div>
                    <script type="text/javascript">
                        new Modal(document.querySelector('[data-modal-trigger="side-menu"]'));
                    </script>

                </div>

                <div class="header__buttons">
                    <div class="header__icon">
                        <a class="
                                    header-button
                                    button
                                    button--icon
                                    button--icon-light
                                    button--icon-fill margin-right-xs
                                " href="#" aria-label="Account">
                            <svg class="icon header-button__icon" role="presentation" focusable="false">
                                <title>Account</title>
                                <use xlink:href="/images/icons-sprite.svg#new-user"></use>
                            </svg>

                            <span class="header-button__label">Aanmelden</span>
                        </a>
                    </div>
                    <div class="header__icon">
                        <a class="
                                    header-button
                                    button
                                    button--icon
                                    button--icon-light
                                    button--icon-fill margin-right-xs
                                " href="#" aria-label="Wishlist">
                            <svg class="icon header-button__icon" role="presentation" focusable="false">
                                <title>Heart</title>
                                <use xlink:href="/images/icons-sprite.svg#new-heart"></use>
                            </svg>

                            <span class="header-button__label">Verlanglijstje</span>
                        </a>
                    </div>

                    <div class="header__minicart">
                        <button type="button" class="
                                    header-button
                                    button
                                    button--icon
                                    button--icon-light
                                    modal-trigger
                                    margin-left-xs
                                " aria-label="Shopping cart dropdown trigger" data-modal-trigger="modal-minicart">
                            <svg class="icon header-button__icon" role="presentation" focusable="false">
                                <title>Winkelwagen</title>
                                <use xlink:href="/images/icons-sprite.svg#new-cart"></use>
                            </svg>

                            <span class="header-button__counter">
                                <span class="header-button__counter-dot">2</span>
                            </span>
                            <span class="header-button__label">Winkelwagen</span>
                        </button>
                    </div>

                    <div role="dialog" aria-hidden="true" id="modal-minicart" data-modal="modal-minicart" class="modal modal--secondary" aria-labelledby="minicart-title" aria-describedby="minicart-products">
                        <div role="document" class="modal__container " tabindex="0">
                            <div class="modal__content modal__content--block">

                                <div class="minicart-content ">
                                    <div class="minicart-content__top" id="minicart-title">
                                        <h2 class="minicart-content__heading">
                                            Shopping cart
                                        </h2>

                                        <div class="minicart-content__counter">
                                            2 items
                                        </div>
                                    </div>
                                    <div class="minicart-content__middle" id="minicart-products">
                                        <div class="minicart-content__products-list">
                                            <div class="minicart-product">
                                                <div class="minicart-product__image">
                                                    <div class="lazyload-wrapper ">
                                                        <img class="image lazyload " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw&#x3D;&#x3D;" data-src="/images/product/minicart-product-64x96.jpeg" alt="product name goes here">
                                                    </div>

                                                </div>
                                                <div class="minicart-product__data">
                                                    <div class="minicart-product__info">
                                                        <div class="minicart-product__name-wrapper">
                                                            <h3 class="minicart-product__name">
                                                                <a class="
                            link
                            link--invert
                            minicart-product__link
                        " href="#">
                                                                    Some product name
                                                                </a>
                                                            </h3>
                                                            <div class="minicart-product__price margin-bottom-xs">
                                                                <div class="price  ">
                                                                    <span class="price__value price__value--old ">
                                                                        <del aria-label="Price reduced from: $249.95">
                                                                            $
                                                                            249.95

                                                                        </del>
                                                                    </span>
                                                                    <span class="price__value price__value--special ">
                                                                        <ins aria-label="On sale at: $159.95">

                                                                            $

                                                                            159.95

                                                                        </ins>
                                                                    </span>
                                                                </div>

                                                            </div>
                                                        </div>
                                                        <dl class="list list--description minicart-product__attributes-list" title="Alpaca description list">
                                                            <dt class="list__label">
                                                                Lorem ipsum
                                                            </dt>
                                                            <dd class="list__value">
                                                                Lorem ipsum Value
                                                            </dd>
                                                            <dt class="list__label">
                                                                Lorem ipsum
                                                            </dt>
                                                            <dd class="list__value">
                                                                Lorem ipsum Value
                                                            </dd>
                                                        </dl>

                                                    </div>

                                                    <div class="minicart-product__bottom">
                                                        <div class="minicart-product__qty">
                                                            <div class="input input--inline minicart-product__input margin-bottom-0 margin-right-m">
                                                                <label class="
            label
            input__label
            minicart-product__label
        " for="mini-qty-1">
                                                                    Qty:
                                                                </label>
                                                                <input class="input__field minicart-product__field" id="mini-qty-1" name="mini-qty" type="text" placeholder="32" aria-label="Change the quantity" min="1">
                                                            </div>

                                                            <button class="button button--secondary minicart-product__update" type="button">
                                                                Update
                                                            </button>

                                                        </div>

                                                        <div class="minicart-product__actions">
                                                            <a class="button button--icon " href="#" aria-label="edit product in your shopping cart">
                                                                <svg class="icon button__icon" role="presentation" focusable="false">
                                                                    <title>Edit pencil</title>
                                                                    <use xlink:href="/images/icons-sprite.svg#edit"></use>
                                                                </svg>

                                                            </a>

                                                            <a class="button button--icon " href="#" aria-label="remove this product from your shopping cart">
                                                                <svg class="icon button__icon" role="presentation" focusable="false">
                                                                    <title>Trash bin</title>
                                                                    <use xlink:href="/images/icons-sprite.svg#remove"></use>
                                                                </svg>

                                                            </a>

                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="minicart-product">
                                                <div class="minicart-product__image">
                                                    <div class="lazyload-wrapper ">
                                                        <img class="image lazyload " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw&#x3D;&#x3D;" data-src="/images/product/minicart-product-64x96.jpeg" alt="product name goes here">
                                                    </div>

                                                </div>
                                                <div class="minicart-product__data">
                                                    <div class="minicart-product__info">
                                                        <div class="minicart-product__name-wrapper">
                                                            <h3 class="minicart-product__name">
                                                                <a class="
                            link
                            link--invert
                            minicart-product__link
                        " href="#">
                                                                    Some product 2 name
                                                                </a>
                                                            </h3>
                                                            <div class="minicart-product__price margin-bottom-xs">
                                                                <div class="price  ">
                                                                    <span class="price__value price__value--old ">
                                                                        <del aria-label="Price reduced from: $249.95">
                                                                            $
                                                                            249.95

                                                                        </del>
                                                                    </span>
                                                                    <span class="price__value price__value--special ">
                                                                        <ins aria-label="On sale at: $159.95">

                                                                            $

                                                                            159.95

                                                                        </ins>
                                                                    </span>
                                                                </div>

                                                            </div>
                                                        </div>
                                                        <dl class="list list--description minicart-product__attributes-list" title="Alpaca description list">
                                                            <dt class="list__label">
                                                                Lorem ipsum
                                                            </dt>
                                                            <dd class="list__value">
                                                                Lorem ipsum Value
                                                            </dd>
                                                            <dt class="list__label">
                                                                Lorem ipsum
                                                            </dt>
                                                            <dd class="list__value">
                                                                Lorem ipsum Value
                                                            </dd>
                                                        </dl>

                                                    </div>

                                                    <div class="minicart-product__bottom">
                                                        <div class="minicart-product__qty">
                                                            <div class="input input--inline minicart-product__input margin-bottom-0 margin-right-m">
                                                                <label class="
            label
            input__label
            minicart-product__label
        " for="mini-qty-2">
                                                                    Qty:
                                                                </label>
                                                                <input class="input__field minicart-product__field" id="mini-qty-2" name="mini-qty" type="text" placeholder="32" aria-label="Change the quantity" min="1">
                                                            </div>

                                                            <button class="button button--secondary minicart-product__update" type="button">
                                                                Update
                                                            </button>

                                                        </div>

                                                        <div class="minicart-product__actions">
                                                            <a class="button button--icon " href="#" aria-label="edit product in your shopping cart">
                                                                <svg class="icon button__icon" role="presentation" focusable="false">
                                                                    <title>Edit pencil</title>
                                                                    <use xlink:href="/images/icons-sprite.svg#edit"></use>
                                                                </svg>

                                                            </a>

                                                            <a class="button button--icon " href="#" aria-label="remove this product from your shopping cart">
                                                                <svg class="icon button__icon" role="presentation" focusable="false">
                                                                    <title>Trash bin</title>
                                                                    <use xlink:href="/images/icons-sprite.svg#remove"></use>
                                                                </svg>

                                                            </a>

                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                    <div class="minicart-content__bottom">
                                        <div class="minicart-content__summary">
                                            <div class="minicart-content__summary-label">
                                                Cart Subtotal
                                            </div>
                                            <div class="minicart-content__summary-value">
                                                $ 200.00
                                            </div>
                                        </div>
                                        <div class="minicart-content__actions">
                                            <a href="/edit" class="
                    button
                    button--secondary
                    minicart-content__edit
                    minicart-content__action-button
                ">
                                                View and edit cart
                                            </a>
                                            <button class="button minicart-content__action-button minicart-content__checkout" type="button">
                                                Go to Checkout
                                            </button>

                                        </div>
                                    </div>
                                </div>

                            </div>

                            <button class="button button--icon button--rotate-icon modal__close-button" type="button" aria-label="click to close the modal">
                                <svg class="icon button__icon modal__close-button-icon" role="presentation" focusable="false">
                                    <title>Close</title>
                                    <use xlink:href="/images/icons-sprite.svg#close"></use>
                                </svg>

                            </button>

                        </div>
                    </div>
                    <script type="text/javascript">
                        new Modal(document.querySelector('[data-modal-trigger="modal-minicart"]'));
                    </script>

                </div>

                <div class="header__search-wrapper">
                    <form class="search-form">
                        <div class="search-form__wrapper">
                            <div class="input search-form__input-wrapper margin-0">
                                <label class="
            label
            input__label
                label--hidden
            
        " for="search">
                                    Search products
                                </label>
                                <input class="input__field search-form__input border-color-light" id="search" name="search" type="search" placeholder="Zoeken in de winkel...">
                            </div>

                            <button class="button button--icon button--icon search-form__button" type="button" aria-label="Search">
                                <svg class="icon button__icon" role="presentation" focusable="false">
                                    <title>Search</title>
                                    <use xlink:href="/images/icons-sprite.svg#search"></use>
                                </svg>

                            </button>

                        </div>
                    </form>
                </div>
            </div>
        </div>
    </header>

    <div class="mega-menu ">
        <ul class="mega-menu__list container ">
            <li class="mega-menu__item mega-menu__item--parent mega-menu__item--secondary">
                <a href="/nieuw" class="mega-menu__link">
                    Nieuw
                </a>

                <ul class="list mega-menu__inner-list mega-menu__inner-list--level1">
                    <li class="list__item mega-menu__inner-item">
                        <a href="#" class="
                        link
                        mega-menu__inner-link
                    ">
                            Bekijk alle
                        </a>
                    </li>
                    <li class="list__item mega-menu__inner-item">
                        <a href="#" class="
                        link
                        mega-menu__inner-link
                    ">
                            Kisten
                        </a>
                    </li>
                    <li class="list__item mega-menu__inner-item">
                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                            Kisten
                        </a>
                    </li>
                    <li class="list__item mega-menu__inner-item">
                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                            Kisten
                        </a>
                    </li>
                    <li class="list__item mega-menu__inner-item">
                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                            Kisten
                        </a>
                    </li>
                    <li class="list__item mega-menu__inner-item">
                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                            Kisten
                        </a>
                    </li>
                    <li class="list__item mega-menu__inner-item">
                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                            Terug in voorraad
                        </a>
                    </li>
                    <li class="list__item mega-menu__inner-item">
                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                            Trending nu
                        </a>
                    </li>
                </ul>

            </li>
            <li class="mega-menu__item mega-menu__item--parent mega-menu__item--rows">
                <a href="/fruitkisten" class="mega-menu__link">
                    Fruitkisten
                </a>

                <ul class="list mega-menu__inner-list mega-menu__inner-list--level1">
                    <li class="list__item mega-menu__inner-item mega-menu__inner-item--inline mega-menu__column-hidden">
                        <a href="#" class="
                        link
                        mega-menu__inner-link
                    ">
                            Row one
                        </a>
                        <ul class="list mega-menu__inner-list">
                            <li class="list__item mega-menu__inner-item">
                                <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                    columns one item
                                </a>
                            </li>
                            <li class="list__item mega-menu__inner-item">
                                <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                    columns one item 2
                                </a>
                            </li>
                        </ul>

                    </li>
                    <li class="list__item mega-menu__inner-item mega-menu__column-hidden mega-menu__inner-item--images">
                        <a href="#" class="
                        link
                        mega-menu__inner-link
                    ">
                            Row two
                        </a>
                        <ul class="list mega-menu__inner-list">
                            <li class="list__item mega-menu__inner-item">
                                <a href="" class="
                    link
                    mega-menu__inner-link
                ">
                                    <div class="lazyload-wrapper ">
                                        <img class="image lazyload " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw&#x3D;&#x3D;" data-src="/images/product/cart-product-160_160.jpg" alt="brand name alt text">
                                    </div>

                                    Summer
                                </a>
                            </li>
                            <li class="list__item mega-menu__inner-item">
                                <a href="" class="
                    link
                    mega-menu__inner-link
                ">
                                    <div class="lazyload-wrapper ">
                                        <img class="image lazyload " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw&#x3D;&#x3D;" data-src="/images/product/cart-product-160_160.jpg" alt="brand name alt text">
                                    </div>

                                    Spring
                                </a>
                            </li>
                            <li class="list__item mega-menu__inner-item">
                                <a href="" class="
                    link
                    mega-menu__inner-link
                ">
                                    <div class="lazyload-wrapper ">
                                        <img class="image lazyload " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw&#x3D;&#x3D;" data-src="/images/product/cart-product-160_160.jpg" alt="brand name alt text">
                                    </div>

                                    Autumn
                                </a>
                            </li>
                            <li class="list__item mega-menu__inner-item">
                                <a href="" class="
                    link
                    mega-menu__inner-link
                ">
                                    <div class="lazyload-wrapper ">
                                        <img class="image lazyload " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw&#x3D;&#x3D;" data-src="/images/product/cart-product-160_160.jpg" alt="brand name alt text">
                                    </div>

                                    Winter
                                </a>
                            </li>
                            <li class="list__item mega-menu__inner-item">
                                <a href="" class="
                    link
                    mega-menu__inner-link
                ">
                                    <div class="lazyload-wrapper ">
                                        <img class="image lazyload " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw&#x3D;&#x3D;" data-src="/images/product/cart-product-160_160.jpg" alt="brand name alt text">
                                    </div>

                                    View all
                                </a>
                            </li>
                            <li class="list__item mega-menu__inner-item">
                                <a href="" class="
                    link
                    mega-menu__inner-link
                ">
                                    <div class="lazyload-wrapper ">
                                        <img class="image lazyload " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw&#x3D;&#x3D;" data-src="/images/product/cart-product-160_160.jpg" alt="brand name alt text">
                                    </div>

                                    lorem ipsum
                                </a>
                            </li>
                        </ul>

                    </li>
                    <li class="list__item mega-menu__inner-item mega-menu__column-hidden mega-menu__inner-item--columns">
                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                            Row three
                        </a>
                        <ul class="list mega-menu__inner-list">
                            <li class="list__item mega-menu__inner-item mega-menu__column-hidden">
                                <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                    row 3 c 1
                                </a>
                                <ul class="list mega-menu__inner-list">
                                    <li class="list__item mega-menu__inner-item mega-menu__inner-item--children">
                                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                            Men
                                        </a>
                                        <ul class="list mega-menu__inner-list">
                                            <li class="list__item mega-menu__inner-item">
                                                <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                                    Elegant
                                                </a>
                                            </li>
                                            <li class="list__item mega-menu__inner-item">
                                                <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                                    Casual
                                                </a>
                                            </li>
                                            <li class="list__item mega-menu__inner-item">
                                                <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                                    Active
                                                </a>
                                            </li>
                                        </ul>

                                    </li>
                                    <li class="list__item mega-menu__inner-item">
                                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                            Wallets
                                        </a>
                                    </li>
                                </ul>

                            </li>
                            <li class="list__item mega-menu__inner-item mega-menu__column-hidden">
                                <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                    row 3 column 2
                                </a>
                                <ul class="list mega-menu__inner-list">
                                    <li class="list__item mega-menu__inner-item mega-menu__inner-item--children">
                                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                            Women
                                        </a>
                                        <ul class="list mega-menu__inner-list">
                                            <li class="list__item mega-menu__inner-item">
                                                <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                                    Elegant
                                                </a>
                                            </li>
                                            <li class="list__item mega-menu__inner-item">
                                                <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                                    Casual
                                                </a>
                                            </li>
                                            <li class="list__item mega-menu__inner-item">
                                                <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                                    Active
                                                </a>
                                            </li>
                                        </ul>

                                    </li>
                                    <li class="list__item mega-menu__inner-item">
                                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                            Bags
                                        </a>
                                    </li>
                                </ul>

                            </li>
                            <li class="list__item mega-menu__inner-item mega-menu__column-hidden">
                                <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                    row 3 column 3
                                </a>
                                <ul class="list mega-menu__inner-list">
                                    <li class="list__item mega-menu__inner-item mega-menu__inner-item--children">
                                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                            Kids
                                        </a>
                                        <ul class="list mega-menu__inner-list">
                                            <li class="list__item mega-menu__inner-item">
                                                <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                                    Pijamas
                                                </a>
                                            </li>
                                            <li class="list__item mega-menu__inner-item">
                                                <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                                    School Days
                                                </a>
                                            </li>
                                            <li class="list__item mega-menu__inner-item mega-menu__inner-item--children">
                                                <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                                    Kids Fance Dress
                                                </a>
                                                <ul class="list mega-menu__inner-list">
                                                    <li class="list__item mega-menu__inner-item">
                                                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                                            Hats
                                                        </a>
                                                    </li>
                                                    <li class="list__item mega-menu__inner-item">
                                                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                                            Special Ocassions
                                                        </a>
                                                    </li>
                                                </ul>

                                            </li>
                                        </ul>

                                    </li>
                                </ul>

                            </li>
                            <li class="list__item mega-menu__inner-item mega-menu__column-hidden">
                                <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                    row 3 column 4
                                </a>
                                <ul class="list mega-menu__inner-list">
                                    <li class="list__item mega-menu__inner-item">
                                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                            Jackets
                                        </a>
                                    </li>
                                    <li class="list__item mega-menu__inner-item">
                                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                            Shirts
                                        </a>
                                    </li>
                                    <li class="list__item mega-menu__inner-item">
                                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                            Dresses
                                        </a>
                                    </li>
                                    <li class="list__item mega-menu__inner-item">
                                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                            Trousers
                                        </a>
                                    </li>
                                    <li class="list__item mega-menu__inner-item">
                                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                            Hats
                                        </a>
                                    </li>
                                </ul>

                            </li>
                        </ul>

                    </li>
                </ul>

            </li>
            <li class="mega-menu__item ">
                <a href="/meubels" class="mega-menu__link">
                    Meubels
                </a>

            </li>
            <li class="mega-menu__item ">
                <a href="/woonaccessoires" class="mega-menu__link">
                    Woonaccessoires
                </a>

            </li>
            <li class="mega-menu__item ">
                <a href="/partijverkoop" class="mega-menu__link">
                    Partijverkoop
                </a>

            </li>
            <li class="mega-menu__item mega-menu__item--parent mega-menu__item--rows">
                <a href="/maatwerk" class="mega-menu__link">
                    Maatwerk
                </a>

                <ul class="list mega-menu__inner-list mega-menu__inner-list--level1">
                    <li class="list__item mega-menu__inner-item mega-menu__inner-item--columns mega-menu__column-hidden">
                        <a href="#" class="
                        link
                        mega-menu__inner-link
                    ">
                            Row one
                        </a>
                        <ul class="list mega-menu__inner-list">
                            <li class="list__item mega-menu__inner-item mega-menu__column-hidden">
                                <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                    row 3 c 1
                                </a>
                                <ul class="list mega-menu__inner-list">
                                    <li class="list__item mega-menu__inner-item mega-menu__inner-item--children">
                                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                            Men
                                        </a>
                                        <ul class="list mega-menu__inner-list">
                                            <li class="list__item mega-menu__inner-item">
                                                <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                                    Elegant
                                                </a>
                                            </li>
                                            <li class="list__item mega-menu__inner-item">
                                                <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                                    Casual
                                                </a>
                                            </li>
                                            <li class="list__item mega-menu__inner-item">
                                                <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                                    Active
                                                </a>
                                            </li>
                                        </ul>

                                    </li>
                                    <li class="list__item mega-menu__inner-item">
                                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                            Wallets
                                        </a>
                                    </li>
                                </ul>

                            </li>
                            <li class="list__item mega-menu__inner-item mega-menu__column-hidden">
                                <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                    row 3 column 2
                                </a>
                                <ul class="list mega-menu__inner-list">
                                    <li class="list__item mega-menu__inner-item mega-menu__inner-item--children">
                                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                            Women
                                        </a>
                                        <ul class="list mega-menu__inner-list">
                                            <li class="list__item mega-menu__inner-item">
                                                <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                                    Elegant
                                                </a>
                                            </li>
                                            <li class="list__item mega-menu__inner-item">
                                                <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                                    Casual
                                                </a>
                                            </li>
                                            <li class="list__item mega-menu__inner-item">
                                                <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                                    Active
                                                </a>
                                            </li>
                                        </ul>

                                    </li>
                                    <li class="list__item mega-menu__inner-item">
                                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                            Bags
                                        </a>
                                    </li>
                                </ul>

                            </li>
                            <li class="list__item mega-menu__inner-item mega-menu__column-hidden">
                                <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                    row 3 column 3
                                </a>
                                <ul class="list mega-menu__inner-list">
                                    <li class="list__item mega-menu__inner-item mega-menu__inner-item--children">
                                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                            Kids
                                        </a>
                                        <ul class="list mega-menu__inner-list">
                                            <li class="list__item mega-menu__inner-item">
                                                <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                                    Pijamas
                                                </a>
                                            </li>
                                            <li class="list__item mega-menu__inner-item">
                                                <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                                    School Days
                                                </a>
                                            </li>
                                            <li class="list__item mega-menu__inner-item">
                                                <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                                    Fance Dress
                                                </a>
                                            </li>
                                            <li class="list__item mega-menu__inner-item">
                                                <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                                    Special Occasion
                                                </a>
                                            </li>
                                        </ul>

                                    </li>
                                </ul>

                            </li>
                            <li class="list__item mega-menu__inner-item mega-menu__column-hidden">
                                <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                    row 3 column 4
                                </a>
                                <ul class="list mega-menu__inner-list">
                                    <li class="list__item mega-menu__inner-item">
                                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                            Jackets
                                        </a>
                                    </li>
                                    <li class="list__item mega-menu__inner-item">
                                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                            Shirts
                                        </a>
                                    </li>
                                    <li class="list__item mega-menu__inner-item">
                                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                            Dresses
                                        </a>
                                    </li>
                                    <li class="list__item mega-menu__inner-item">
                                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                            Trousers
                                        </a>
                                    </li>
                                    <li class="list__item mega-menu__inner-item">
                                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                            Hats
                                        </a>
                                    </li>
                                </ul>

                            </li>
                        </ul>

                    </li>
                </ul>

            </li>
            <li class="mega-menu__item mega-menu__item--parent mega-menu__item--secondary">
                <a href="/brands" class="mega-menu__link">
                    Inspiratie
                </a>

                <ul class="list mega-menu__inner-list mega-menu__inner-list--level1">
                    <li class="list__item mega-menu__inner-item">
                        <a href="#" class="
                        link
                        mega-menu__inner-link
                    ">
                            View all
                        </a>
                    </li>
                    <li class="list__item mega-menu__inner-item">
                        <a href="#" class="
                        link
                        mega-menu__inner-link
                    ">
                            Clothing
                        </a>
                    </li>
                    <li class="list__item mega-menu__inner-item">
                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                            Shoes
                        </a>
                    </li>
                    <li class="list__item mega-menu__inner-item">
                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                            Accessories
                        </a>
                    </li>
                    <li class="list__item mega-menu__inner-item">
                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                            Face + Body
                        </a>
                    </li>
                    <li class="list__item mega-menu__inner-item">
                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                            Living + Gifts
                        </a>
                    </li>
                    <li class="list__item mega-menu__inner-item">
                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                            Back in stock
                        </a>
                    </li>
                    <li class="list__item mega-menu__inner-item">
                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                            Trending now
                        </a>
                    </li>
                </ul>

            </li>
        </ul>
    </div>
    <script src="/components/raw/mega-menu/mega-menu.js"></script>

    <main id="maincontent" class="
            dashboard
            container
            margin-vc-m
        ">
        <nav class="breadcrumbs " aria-label="" role="navigation">
            <ol class="breadcrumbs__list ">
                <li class="breadcrumbs__item">
                    <a href="#" class="breadcrumbs__link">
                        Home
                    </a>
                </li>
                <li class="breadcrumbs__item" aria-current="true">
                    Wishlist
                </li>
            </ol>
        </nav>

        <div class="row">
            <div class="
                    col-xs-12
                    col-lg-3
                    dashboard__sidebar margin-top-sl
                ">
                <div class="dashboard-nav">
                    <div class="dashboard-nav__mobile">
                        Account Dashboard
                    </div>

                    <div class="dashboard-nav__content">
                        <ul class="list ">
                            <li class="list__item dashboard-nav__item current">
                                <a href="#" class="
                        link
                        dashboard-nav__link
                    ">
                                    Account Dashboard
                                </a>
                            </li>
                            <li class="list__item dashboard-nav__item">
                                <a href="#" class="
                        link
                        dashboard-nav__link
                    ">
                                    Account Information
                                </a>
                            </li>
                            <li class="list__item dashboard-nav__item">
                                <a href="#" class="
                        link
                        dashboard-nav__link
                    ">
                                    Address Book
                                </a>
                            </li>
                            <li class="list__item dashboard-nav__item">
                                <a href="#" class="
                        link
                        dashboard-nav__link
                    ">
                                    Downloadable Products
                                </a>
                            </li>
                            <li class="list__item dashboard-nav__item ">
                                <a href="#" class="
                        link
                        dashboard-nav__link
                    ">
                                    My Orders
                                </a>
                            </li>
                            <li class="list__item dashboard-nav__item ">
                                <a href="#" class="
                        link
                        dashboard-nav__link
                    ">
                                    My Credit Cards
                                </a>
                            </li>
                            <li class="list__item dashboard-nav__item">
                                <a href="#" class="
                        link
                        dashboard-nav__link
                    ">
                                    Newsletter Subscriptions
                                </a>
                            </li>
                            <li class="list__item dashboard-nav__item">
                                <a href="#" class="
                        link
                        dashboard-nav__link
                    ">
                                    Billing Agreements
                                </a>
                            </li>
                            <li class="list__item dashboard-nav__item">
                                <a href="#" class="
                        link
                        dashboard-nav__link
                    ">
                                    My Product Reviews
                                </a>
                            </li>
                            <li class="list__item dashboard-nav__item ">
                                <a href="#" class="
                        link
                        dashboard-nav__link
                    ">
                                    My Wishlist
                                </a>
                            </li>
                        </ul>

                    </div>
                    <div class="dashboard-nav__actions">
                        <a class="button button--secondary dashboard-nav__button" title="Sign out">
                            Sign out
                        </a>

                    </div>

                    <div class="dashboard-nav__section margin-top-xl">
                        <div class="sidebar-block">
                            <div class="sidebar-block__heading ">
                                <h2 class="sidebar-block__title dashboard-nav__title">
                                    Compare Products
                                </h2>

                                <span class="sidebar-block__counter">
                                    3 items
                                </span>
                            </div>
                            <ol class="list sidebar-block__list">
                                <li class="sidebar-block__item">
                                    <button class="button button--icon sidebar-block__remove margin-right-xs" aria-label="Remove product from compare" title="Remove product from compare">
                                        <svg class="icon icon sidebar-block__remove-icon" role="img">
                                            <title>Close</title>
                                            <use xlink:href="/images/icons-sprite.svg#close"></use>
                                        </svg>

                                    </button>

                                    <a class="link sidebar-block__link" href="#" title="Chaz Kangeroo Hoodie">
                                        Chaz Kangeroo Hoodie
                                    </a>

                                </li>
                                <li class="sidebar-block__item">
                                    <button class="button button--icon sidebar-block__remove margin-right-xs" aria-label="Remove product from compare" title="Remove product from compare">
                                        <svg class="icon icon sidebar-block__remove-icon" role="img">
                                            <title>Close</title>
                                            <use xlink:href="/images/icons-sprite.svg#close"></use>
                                        </svg>

                                    </button>

                                    <a class="link sidebar-block__link" href="#" title="Bruno Compete Hoodie">
                                        Bruno Compete Hoodie
                                    </a>

                                </li>
                                <li class="sidebar-block__item">
                                    <button class="button button--icon sidebar-block__remove margin-right-xs" aria-label="Remove product from compare" title="Remove product from compare">
                                        <svg class="icon icon sidebar-block__remove-icon" role="img">
                                            <title>Close</title>
                                            <use xlink:href="/images/icons-sprite.svg#close"></use>
                                        </svg>

                                    </button>

                                    <a class="link sidebar-block__link" href="#" title="Hero Hoodie">
                                        Hero Hoodie
                                    </a>

                                </li>
                            </ol>
                            <div class="sidebar-block__actions">
                                <a class="link sidebar-block__action" href="#" title="Compare">
                                    Compare
                                </a>

                                <button class="button button--link sidebar-block__action" type="button">
                                    Clear all
                                </button>

                            </div>
                        </div>

                    </div>

                    <div class="dashboard-nav__section">
                        <div class="sidebar-block">
                            <div class="sidebar-block__heading ">
                                <h2 class="sidebar-block__title dashboard-nav__title">
                                    My Wish List
                                </h2>

                                <span class="sidebar-block__counter">
                                    3 items
                                </span>
                            </div>
                            <ol class="list sidebar-block__list">
                                <li class="margin-bottom-m">
                                    <div class="sidebar-block__item">
                                        <div class="sidebar-block__product-image">
                                            <a href="#">
                                                <div class="lazyload-wrapper ">
                                                    <img class="image lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII&#x3D;" data-src="/images/banner/banner-480_480.png" alt="image alt text">
                                                </div>

                                            </a>
                                        </div>
                                        <div class="sidebar-block__product-info">
                                            <a href="#" class="link sidebar-block__link">
                                                Chaz Kangeroo Hoodie
                                            </a>
                                            <div class="price ">
                                                <span class="price__value ">
                                                    $
                                                    159.95

                                                </span>
                                            </div>

                                        </div>
                                    </div>
                                    <div class="sidebar-block__actions">
                                        <button class="button button--link sidebar-block__action" type="button">
                                            Add to Cart
                                        </button>

                                        <button class="button button--link sidebar-block__action" type="button">
                                            Remove this item
                                        </button>

                                    </div>
                                </li>
                                <li class="margin-bottom-m">
                                    <div class="sidebar-block__item">
                                        <div class="sidebar-block__product-image">
                                            <a href="#">
                                                <div class="lazyload-wrapper ">
                                                    <img class="image lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII&#x3D;" data-src="/images/banner/banner-480_480.png" alt="image alt text">
                                                </div>

                                            </a>
                                        </div>
                                        <div class="sidebar-block__product-info">
                                            <a href="#" class="link sidebar-block__link">
                                                Bruno Compete Hoodie
                                            </a>
                                            <div class="price ">
                                                <span class="price__value ">
                                                    $
                                                    159.95

                                                </span>
                                            </div>

                                        </div>
                                    </div>
                                    <div class="sidebar-block__actions">
                                        <button class="button button--link sidebar-block__action" type="button">
                                            Add to Cart
                                        </button>

                                        <button class="button button--link sidebar-block__action" type="button">
                                            Remove this item
                                        </button>

                                    </div>
                                </li>
                                <li class="margin-bottom-m">
                                    <div class="sidebar-block__item">
                                        <div class="sidebar-block__product-image">
                                            <a href="#">
                                                <div class="lazyload-wrapper ">
                                                    <img class="image lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII&#x3D;" data-src="/images/banner/banner-480_480.png" alt="image alt text">
                                                </div>

                                            </a>
                                        </div>
                                        <div class="sidebar-block__product-info">
                                            <a href="#" class="link sidebar-block__link">
                                                Hero Hoodie
                                            </a>
                                            <div class="price ">
                                                <span class="price__value ">
                                                    $
                                                    159.95

                                                </span>
                                            </div>

                                        </div>
                                    </div>
                                    <div class="sidebar-block__actions">
                                        <button class="button button--link sidebar-block__action" type="button">
                                            Add to Cart
                                        </button>

                                        <button class="button button--link sidebar-block__action" type="button">
                                            Remove this item
                                        </button>

                                    </div>
                                </li>
                            </ol>
                            <a class="button button--secondary button--fluid" href="#">
                                Go to Wish List
                            </a>

                        </div>

                    </div>
                </div>

                <script src="/components/raw/dashboard-nav/../dashboard-nav/nav.js"></script>

            </div>
            <div class="
                    col-xs-12
                    col-lg-9
                    wishlist
                    dashboard__content margin-top-sl
                ">
                <h1 class="heading dashboard__content-heading">
                    My Wish List
                </h1>

                <div class="toolbar ">

                    <div class="toolbar__amount toolbar__amount--visible">
                        <span class="toolbar__amount-content">
                            Items 1-9 of
                            12
                        </span>
                    </div>

                    <div class="select toolbar__limiter margin-0">
                        <label class="
            label
            toolbar__limiter-label margin-right-s margin-bottom-0
        " for="limiter">
                            Show
                        </label>
                        <select id="limiter" class="select__field toolbar__limiter-select" name="limiter">
                            <option class="" value="12">
                                12
                            </option>
                            <option class="" value="24">
                                24
                            </option>
                            <option class="" value="36" disabled>
                                36
                            </option>
                        </select>
                    </div>

                    <script src="/components/raw/select/select.js"></script>

                    <nav class="pager toolbar__pager" role="navigation" aria-label="Pagination navigation">
                        <ul class="pager__list">
                            <li class="pager__item">
                                <a href="#" class="
                    pager__link
                    pager__link--prev
                    button button--icon
                " aria-label="Link to previous page, disabled" disabled tabindex="-1">
                                    <svg class="icon pager__link-prev" role="presentation" focusable="false">
                                        <use xlink:href="/images/icons-sprite.svg#arrow-left"></use>
                                    </svg>

                                </a>
                            </li>

                            <li class="pager__item pager__item--current" aria-current="page" aria-label="Page 1, current page">
                                1
                            </li>
                            <li class="pager__item">
                                <a href="#" class="pager__link link" aria-label="Link to page 2">
                                    2
                                </a>
                            </li>
                            <li class="pager__item">
                                <a href="#" class="pager__link link" aria-label="Link to page 3">
                                    3
                                </a>
                            </li>
                            <li class="pager__item">
                                <a href="#" class="pager__link link" aria-label="Link to page 4">
                                    4
                                </a>
                            </li>
                            <li class="pager__item">
                                <a href="#" class="pager__link link" aria-label="Link to page 5">
                                    5
                                </a>
                            </li>

                            <li class="pager__item">
                                <a href="#" class="
                    pager__link
                    pager__link--next
                    button button--icon
                " aria-label="Link to next page">
                                    <svg class="icon pager__link-next" role="presentation" focusable="false">
                                        <use xlink:href="/images/icons-sprite.svg#arrow-right"></use>
                                    </svg>

                                </a>
                            </li>
                        </ul>
                    </nav>

                </div>

                <div class="
                        products-grid
                        wishlist
                        row
                        wishlist__grid
                    ">
                    <div class="wishlist__item col-xs-12 col-sm-6 col-md-4 margin-bottom-sm">
                        <a href="#" aria-label="Chaz Kangeroo Hoodie product with long name more than 3 lines Chaz Kangeroo Hoodie" class="wishlist__link">
                            <div class="lazyload-wrapper ">
                                <img class="image lazyload " src="" data-src="/images/catalog-grid-item/product-color-swatch-image-1-32_40.jpg" alt="">
                            </div>

                        </a>

                        <div class="wishlist__item-content margin-hz-xs">
                            <div class="wishlist__rating-wrapper">
                                <div class="rating rating--secondary" aria-label="Average rating: 72%" title="Average rating: 72%" tabindex="0">
                                    <div class="rating__star " role="presentation" style="width: 72%">
                                        <span class="
                rating__indicator
                
            "></span>
                                    </div>
                                </div>

                            </div>

                            <div class="wishlist__item-name padding-0">
                                <a class="link wishlist__item-name-link" href="#" title="Chaz Kangeroo Hoodie product with long name more than 3 lines Chaz Kangeroo Hoodie">
                                    Chaz Kangeroo Hoodie product with long name more than 3 lines Chaz Kangeroo Hoodie
                                </a>

                            </div>

                            <div class="price price-box ">
                                <span class="price__value price__value--old ">
                                    <del aria-label="Price reduced from: $249.95">
                                        $
                                        249.95

                                    </del>
                                </span>
                                <span class="price__value price__value--special ">
                                    <ins aria-label="On sale at: $159.95">

                                        $

                                        159.95

                                    </ins>
                                </span>
                            </div>

                        </div>

                        <div class="wishlist__item-inner">
                            <div class="input margin-0 wishlist__comment">
                                <label class="
            label
            input__label
                label--hidden
            
        " for="comment">
                                    Comment
                                </label>

                                <textarea class="input__field input__field--textarea " id="comment" name="comment" placeholder="Comment"></textarea>
                            </div>

                            <div class="wishlist__qty">
                                <label class="wishlist__label" for="qty-product-1">
                                    Quantity:
                                </label>

                                <div class="quantity-update ">
                                    <button class="button button--icon quantity-update__button quantity-update__button--minus quantity-update__button--disabled" type="button" aria-label="Decrease the quantity">
                                        <svg class="icon button__icon quantity-update__icon" role="presentation" focusable="false">
                                            <title>Minus mark</title>
                                            <use xlink:href="/images/icons-sprite.svg#minus"></use>
                                        </svg>

                                    </button>

                                    <input class="quantity-update__input wishlist__field-qty" type="number" id="qty-product-1" min="1" value="1" />

                                    <button class="button button--icon quantity-update__button quantity-update__button--plus" type="button" aria-label="Increase the quantity">
                                        <svg class="icon button__icon quantity-update__icon" role="presentation" focusable="false">
                                            <title>Plus mark</title>
                                            <use xlink:href="/images/icons-sprite.svg#plus"></use>
                                        </svg>

                                    </button>

                                </div>

                                <script src="/components/raw/quantity-update/../quantity-update/quantity-update.js"></script>

                            </div>
                            <div class="wishlist__item-actions">
                                <a class="button button--icon " href="#" aria-label="Edit product parameters">
                                    <svg class="icon " role="presentation" focusable="false">
                                        <title>Edit</title>
                                        <use xlink:href="/images/icons-sprite.svg#edit"></use>
                                    </svg>

                                </a>

                                <button class="button button--icon " type="button" aria-label="Remove product from wishlist">
                                    <svg class="icon " role="presentation" focusable="false">
                                        <title>Remove</title>
                                        <use xlink:href="/images/icons-sprite.svg#remove"></use>
                                    </svg>

                                </button>

                            </div>

                            <div class="wishlist__item-actions wishlist__item-actions--to-cart">
                                <button class="button wishlist__button padding-hz-sm">
                                    Add to Cart
                                </button>

                            </div>
                        </div>
                    </div>
                    <div class="wishlist__item col-xs-12 col-sm-6 col-md-4 margin-bottom-sm">
                        <a href="#" aria-label="Bruno Compete Hoodie" class="wishlist__link">
                            <div class="lazyload-wrapper ">
                                <img class="image lazyload " src="" data-src="/images/catalog-grid-item/product-color-swatch-image-1-32_40.jpg" alt="">
                            </div>

                        </a>

                        <div class="wishlist__item-content margin-hz-xs">
                            <div class="wishlist__rating-wrapper">
                                <div class="rating rating--secondary" aria-label="Average rating: 72%" title="Average rating: 72%" tabindex="0">
                                    <div class="rating__star " role="presentation" style="width: 72%">
                                        <span class="
                rating__indicator
                
            "></span>
                                    </div>
                                </div>

                            </div>

                            <div class="wishlist__item-name padding-0">
                                <a class="link wishlist__item-name-link" href="#" title="Bruno Compete Hoodie">
                                    Bruno Compete Hoodie
                                </a>

                            </div>

                            <div class="price price-box">
                                <span class="price__value price-as-configured margin-0">
                                    $
                                    159.95

                                </span>
                            </div>

                        </div>

                        <div class="wishlist__item-inner">
                            <div class="input margin-0 wishlist__comment">
                                <label class="
            label
            input__label
                label--hidden
            
        " for="comment2">
                                    Comment
                                </label>

                                <textarea class="input__field input__field--textarea " id="comment2" name="comment" placeholder="Comment"></textarea>
                            </div>

                            <div class="wishlist__qty quantity-update--wishlist">
                                <label class="wishlist__label" for="qty-product-2">
                                    Quantity:
                                </label>

                                <div class="quantity-update ">
                                    <button class="button button--icon quantity-update__button quantity-update__button--minus quantity-update__button--disabled" type="button" aria-label="Decrease the quantity">
                                        <svg class="icon button__icon quantity-update__icon" role="presentation" focusable="false">
                                            <title>Minus mark</title>
                                            <use xlink:href="/images/icons-sprite.svg#minus"></use>
                                        </svg>

                                    </button>

                                    <input class="quantity-update__input wishlist__field-qty" type="number" id="qty-product-2" min="1" value="1" />

                                    <button class="button button--icon quantity-update__button quantity-update__button--plus" type="button" aria-label="Increase the quantity">
                                        <svg class="icon button__icon quantity-update__icon" role="presentation" focusable="false">
                                            <title>Plus mark</title>
                                            <use xlink:href="/images/icons-sprite.svg#plus"></use>
                                        </svg>

                                    </button>

                                </div>

                                <script src="/components/raw/quantity-update/../quantity-update/quantity-update.js"></script>

                            </div>
                            <div class="wishlist__item-actions">
                                <a class="button button--icon " href="#" aria-label="Edit product parameters">
                                    <svg class="icon " role="presentation" focusable="false">
                                        <title>Edit</title>
                                        <use xlink:href="/images/icons-sprite.svg#edit"></use>
                                    </svg>

                                </a>

                                <button class="button button--icon " href="#" aria-label="Remove product from wishlist">
                                    <svg class="icon " role="presentation" focusable="false">
                                        <title>Remove</title>
                                        <use xlink:href="/images/icons-sprite.svg#remove"></use>
                                    </svg>

                                </button>

                            </div>

                            <div class="wishlist__item-actions wishlist__item-actions--to-cart">
                                <button class="button wishlist__button">
                                    Add to Cart
                                </button>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="actions-group ">
                    <div class="actions-group__handler">
                        <button class="button actions-group__button" type="button" aria-label="button">
                            Update Wish List
                        </button>

                        <button class="button button--secondary actions-group__button" type="button" aria-label="button">
                            Share Wish List
                        </button>

                        <button class="button button--secondary actions-group__button" type="button" aria-label="button">
                            Add All to Cart
                        </button>

                    </div>
                    <div class="actions-group__handler">
                        <a class="link actions-group__link" href="#" title="Back to My Account">
                            Back
                        </a>

                    </div>
                </div>

            </div>
        </div>
    </main>
</div>

<footer>
    <div class="footer-top margin-top-xl">
        <div class="container newsletter__footer ">
            <div class="row">
                <div class="newsletter__content col-xs-12 col-md-6">
                    <div class="newsletter__footer--heading ">
                        <h2 class="newsletter__footer--title">
                            Wil je 10% korting op je volgende bestelling?
                        </h2>
                        <p class="newsletter__footer--subtitle">
                            Meld je nu aan voor de nieuwsbrief van Kappersmagazijn en ontvang 10% korting op je volgende aankoop.
                        </p>
                    </div>
                    <form class="newsletter__form newsletter__footer--form">
                        <div class="newsletter__footer--fields">
                            <div class="control">
                                <label for="newsletter">
                                    <span class="label">Abonneer u op onze nieuwsbrief</span>
                                    <div class="input newsletter__input">
                                        <label class="
            label
            input__label
                label--hidden
            newsletter__label
        " for="newsletterEmail">
                                            Email for newsletter subscription
                                        </label>
                                        <input class="input__field newsletter__field" id="newsletterEmail" name="newsletterEamil" type="" placeholder="Enter your email">
                                    </div>

                                </label>
                                <div class="newsletter__footer--agreements">
                                    <div class="checkbox newsletter__footer--checkbox">
                                        <input type="checkbox" id="newsletter" name="" class="checkbox__field ">
                                        <svg class="
            checkbox__icon
            checkbox__icon--checked
            
        " role="presentation">
                                            <use xlink:href="/images/icons-sprite.svg#checked"></use>
                                        </svg>
                                        <svg class="
            checkbox__icon
            checkbox__icon--unchecked
            
        " role="presentation">
                                            <use xlink:href="/images/icons-sprite.svg#unchecked"></use>
                                        </svg>
                                        <label for="newsletter" class="checkbox__label ">
                                            <span class="checkbox__text">
                                                <a href="#" title="Privacy Policy">Privacy Policy</a>
                                            </span>
                                        </label>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <div class="newsletter__footer--button">
                            <button class="button button--secondary newsletter__button">
                                Sign Up
                            </button>

                        </div>
                    </form>
                </div>
                <div class="newsletter__image col-xs-12 col-md-6">
                    <div class="lazyload-wrapper ">
                        <img class="image lazyload " src="" data-src="https://www.kappersmagazijn.nl/media/blocks/footer/footer_nieuwsbrief.jpg" alt="">
                    </div>

                </div>
            </div>
        </div>

    </div>

    <div class="footer-center">

        <div class="contact-bar__footer container">
            <div class="row">

                <div class="col-sm-3 flex--row">
                    <div class="contact-bar__footer--icon"><svg class="icon " role="img">
                            <use xlink:href="/images/icons-sprite.svg#phone"></use>
                        </svg>
                    </div>
                    <div class="contact-bar__footer--content flex--column">
                        <span class="contact-bar__footer--title">Bel gratis 0348 - 437811</span>
                        <span class="contact-bar__footer--description">Op werkdagen van 9:00 - 17:00 uur</span>
                    </div>
                </div>
                <div class="col-sm-3 flex--row">
                    <div class="contact-bar__footer--icon"><svg class="icon " role="img">
                            <use xlink:href="/images/icons-sprite.svg#envelope"></use>
                        </svg>
                    </div>
                    <div class="contact-bar__footer--content flex--column">
                        <span class="contact-bar__footer--title">Stuur een mail</span>
                        <span class="contact-bar__footer--description">Antwoord binnen 24 uur</span>
                    </div>
                </div>
                <div class="col-sm-3 flex--row">
                    <div class="contact-bar__footer--icon"><svg class="icon " role="img">
                            <use xlink:href="/images/icons-sprite.svg#facebook-logo"></use>
                        </svg>
                    </div>
                    <div class="contact-bar__footer--content flex--column">
                        <span class="contact-bar__footer--title">Via Facebook</span>
                        <span class="contact-bar__footer--description">Antwoord binnen 24 uur</span>
                    </div>
                </div>
                <div class="col-sm-3 flex--row">
                    <div class="contact-bar__footer--icon"><svg class="icon " role="img">
                            <use xlink:href="/images/icons-sprite.svg#chat"></use>
                        </svg>
                    </div>
                    <div class="contact-bar__footer--content flex--column">
                        <span class="contact-bar__footer--title">Via de Chat</span>
                        <span class="contact-bar__footer--description">Op werkdagen van 9:00 - 17:00 uur</span>
                    </div>
                </div>

            </div>
        </div>

    </div>
    <div class="footer margin-top-xl">
        <div class="footer__handler container">
            <button class="button button--icon footer__scroll-top" type="button" aria-label="scroll to top">
                <svg class="icon " role="presentation" focusable="false">
                    <title>Scroll to top</title>
                    <use xlink:href="/images/icons-sprite.svg#arrow-up"></use>
                </svg>

            </button>

            <section class="footer__links">
                <div id="dropdown-footer" class="dropdown-list dropdown-list--with-breakpoint">
                    <ul class="dropdown-list__list">
                        <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                            <button class="dropdown-list__label " aria-expanded="false" aria-controls="dropdown-customers" aria-controls="dropdown-customers">
                                Customers

                                <svg class="icon dropdown-list__icon dropdown-list__icon--inner" role="presentation" focusable="false">
                                    <title>Arrow down</title>
                                    <use xlink:href="/images/icons-sprite.svg#angle-down"></use>
                                </svg>

                            </button>

                            <div id="dropdown-customers" class="dropdown-list__content " aria-hidden="true">
                                <ul class="
        list
        list__columns
        footer__links-list
    ">
                                    <li class="
                list__item
                list__column
                list__column--hidden
            ">
                                        <a href="" class="
                    link
                    
                ">
                                            Column 1
                                        </a>
                                        <ul class="list">
                                            <li class="
                            list__item
                            list__column-item
                            
                        ">
                                                <a href="#" class="
                                link
                                footer__link
                            " title="Sign in">
                                                    Login to My Account
                                                </a>
                                            </li>
                                            <li class="
                            list__item
                            list__column-item
                            
                        ">
                                                <a href="#" class="
                                link
                                footer__link
                            " title="Sign up">
                                                    Create an Account
                                                </a>
                                            </li>
                                            <li class="
                            list__item
                            list__column-item
                            
                        ">
                                                <a href="#" class="
                                link
                                footer__link
                            " title="My Orders">
                                                    My Orders
                                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="
                list__item
                list__column
                list__column--hidden
            ">
                                        <a href="" class="
                    link
                    
                ">
                                            Column 2
                                        </a>
                                        <ul class="list">
                                            <li class="
                            list__item
                            list__column-item
                            
                        ">
                                                <a href="#" class="
                                link
                                footer__link
                            " title="My Cart">
                                                    My Cart
                                                </a>
                                            </li>
                                            <li class="
                            list__item
                            list__column-item
                            
                        ">
                                                <a href="#" class="
                                link
                                footer__link
                            " title="Checkout">
                                                    Checkout
                                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>

                            </div>
                        </li>
                        <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                            <button class="dropdown-list__label " aria-expanded="false" aria-controls="dropdown-information" aria-controls="dropdown-information">
                                Information

                                <svg class="icon dropdown-list__icon dropdown-list__icon--inner" role="img">
                                    <title>Arrow down</title>
                                    <use xlink:href="/images/icons-sprite.svg#angle-down"></use>
                                </svg>

                            </button>

                            <div id="dropdown-information" class="dropdown-list__content " aria-hidden="true">
                                <ul class="
        list
        list__columns
        footer__links-list
    ">
                                    <li class="
                list__item
                list__column
                list__column--hidden
            ">
                                        <a href="" class="
                    link
                    
                ">
                                            Column 1
                                        </a>
                                        <ul class="list">
                                            <li class="
                            list__item
                            list__column-item
                            
                        ">
                                                <a href="#" class="
                                link
                                footer__link
                            " title="Hours">
                                                    Hours
                                                </a>
                                            </li>
                                            <li class="
                            list__item
                            list__column-item
                            
                        ">
                                                <a href="#" class="
                                link
                                footer__link
                            " title="About Us">
                                                    About Us
                                                </a>
                                            </li>
                                            <li class="
                            list__item
                            list__column-item
                            
                        ">
                                                <a href="#" class="
                                link
                                footer__link
                            " title="Contact Us">
                                                    Contact Us
                                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="
                list__item
                list__column
                list__column--hidden
            ">
                                        <a href="" class="
                    link
                    
                ">
                                            Column 2
                                        </a>
                                        <ul class="list">
                                            <li class="
                            list__item
                            list__column-item
                            
                        ">
                                                <a href="#" class="
                                link
                                footer__link
                            " title="Job Openings">
                                                    Job Openings
                                                </a>
                                            </li>
                                            <li class="
                            list__item
                            list__column-item
                            
                        ">
                                                <a href="#" class="
                                link
                                footer__link
                            " title="Returns">
                                                    Returns
                                                </a>
                                            </li>
                                            <li class="
                            list__item
                            list__column-item
                            
                        ">
                                                <a href="#" class="
                                link
                                footer__link
                            " title="Shipping">
                                                    Shipping
                                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="
                list__item
                list__column
                list__column--hidden
            ">
                                        <a href="" class="
                    link
                    
                ">
                                            Column 3
                                        </a>
                                        <ul class="list">
                                            <li class="
                            list__item
                            list__column-item
                            
                        ">
                                                <a href="#" class="
                                link
                                footer__link
                            " title="Privacy Policy">
                                                    Privacy Policy
                                                </a>
                                            </li>
                                            <li class="
                            list__item
                            list__column-item
                            
                        ">
                                                <a href="#" class="
                                link
                                footer__link
                            " title="Terms & Conditions">
                                                    Terms &amp; Conditions
                                                </a>
                                            </li>
                                            <li class="
                            list__item
                            list__column-item
                            
                        ">
                                                <a href="#" class="
                                link
                                footer__link
                            " title="Site Map">
                                                    Site Map
                                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="
                list__item
                list__column
                list__column--hidden
            ">
                                        <a href="" class="
                    link
                    
                ">
                                            Column 4
                                        </a>
                                        <ul class="list">
                                            <li class="
                            list__item
                            list__column-item
                            
                        ">
                                                <a href="#" class="
                                link
                                footer__link
                            " title="Reviews">
                                                    Reviews
                                                </a>
                                            </li>
                                            <li class="
                            list__item
                            list__column-item
                            
                        ">
                                                <a href="#" class="
                                link
                                footer__link
                            " title="Email Us!">
                                                    Email Us!
                                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>

                            </div>
                        </li>
                    </ul>
                </div>

                <script type="text/javascript">
                    new DropdownList(document.getElementById('dropdown-footer'));
                </script>

            </section>

            <div class="footer__social-handler ">
                <h3 class="footer__social-list-title">
                    Let&#x27;s get social!
                </h3>

                <ul class="list list--with-icon list--horizontal footer__social-list">
                    <li class="list__item ">
                        <a href="#" class="list__icon-link button button--icon button--icon-border" aria-label="Go to Our Facebook Page">
                            <svg class="icon footer__social-icon" role="img">
                                <title>Facebook logo</title>
                                <use xlink:href="/images/icons-sprite.svg#facebook"></use>
                            </svg>

                        </a>
                    </li>
                    <li class="list__item ">
                        <a href="#" class="list__icon-link button button--icon button--icon-border" aria-label="Check Our on Twitter">
                            <svg class="icon footer__social-icon" role="img">
                                <title>Twitter logo</title>
                                <use xlink:href="/images/icons-sprite.svg#twitter"></use>
                            </svg>

                        </a>
                    </li>
                </ul>

            </div>
            <div class="footer__payments">
                <ul class="footer__payments-list list list--horizontal ">
                    <li class="list__item">
                        <svg class="icon footer__payments-list-icon" role="img">
                            <title>AfterPay</title>
                            <use xlink:href="/images/icons-sprite.svg#afterpay"></use>
                        </svg>

                    </li>
                    <li class="list__item">
                        <svg class="icon footer__payments-list-icon" role="img">
                            <title>iDEAL</title>
                            <use xlink:href="/images/icons-sprite.svg#ideal"></use>
                        </svg>

                    </li>
                    <li class="list__item">
                        <svg class="icon footer__payments-list-icon footer__payments-list-icon--paypal" role="img">
                            <title>PayPal</title>
                            <use xlink:href="/images/icons-sprite.svg#paypal"></use>
                        </svg>

                    </li>
                    <li class="list__item">
                        <svg class="icon footer__payments-list-icon" role="img">
                            <title>American Express</title>
                            <use xlink:href="/images/icons-sprite.svg#american-express"></use>
                        </svg>

                    </li>
                    <li class="list__item">
                        <svg class="icon footer__payments-list-icon footer__payments-list-icon--visa" role="img">
                            <title>Visa</title>
                            <use xlink:href="/images/icons-sprite.svg#visa"></use>
                        </svg>

                    </li>
                </ul>
            </div>
        </div>

        <section class="footer__bottom-bar ">
            <div class="footer__bottom-bar-handler container">
                <div class="footer__copyright">
                    <small>
                        Copyright © 2019 Alpaca
                    </small>
                </div>

                <div class="footer__switchers">
                    <div id="language-dropdown" class="dropdown-list dropdown-list--detailed-content footer__dropdown-switcher">
                        <ul class="dropdown-list__list">
                            <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                                <a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-detailed-content1">
                                    German

                                    <svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
                                        <title>Arrow Down</title>
                                        <use xlink:href="/images/icons-sprite.svg#angle-down"></use>
                                    </svg>

                                </a>

                                <div id="dropdown-detailed-content1" class="dropdown-list__content " aria-hidden="true">
                                    <ul class="list ">
                                        <li class="list__item ">
                                            Lorem ipsum

                                        </li>
                                        <li class="list__item ">
                                            Lorem ipsum

                                        </li>
                                        <li class="list__item ">
                                            Lorem ipsum

                                        </li>
                                        <li class="list__item ">
                                            Lorem ipsum

                                        </li>
                                        <li class="list__item ">
                                            Lorem ipsum

                                        </li>
                                    </ul>

                                </div>
                            </li>
                        </ul>
                    </div>

                    <script type="text/javascript">
                        new DropdownList(document.getElementById('language-dropdown'));
                    </script>

                    <div id="currency-dropdown" class="dropdown-list dropdown-list--detailed-content footer__dropdown-switcher margin-right-xs">
                        <ul class="dropdown-list__list">
                            <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                                <a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-detailed-content2">
                                    USD - US Dollar

                                    <svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
                                        <title>Arrow Down</title>
                                        <use xlink:href="/images/icons-sprite.svg#angle-down"></use>
                                    </svg>

                                </a>

                                <div id="dropdown-detailed-content2" class="dropdown-list__content " aria-hidden="true">
                                    <ul class="list ">
                                        <li class="list__item ">
                                            Lorem ipsum

                                        </li>
                                        <li class="list__item ">
                                            Lorem ipsum

                                        </li>
                                        <li class="list__item ">
                                            Lorem ipsum

                                        </li>
                                        <li class="list__item ">
                                            Lorem ipsum

                                        </li>
                                        <li class="list__item ">
                                            Lorem ipsum

                                        </li>
                                    </ul>

                                </div>
                            </li>
                        </ul>
                    </div>

                    <script type="text/javascript">
                        new DropdownList(document.getElementById('currency-dropdown'));
                    </script>

                </div>
            </div>
        </section>

        <div class="cookie-message cookie-message" data-type="cookie" tabindex="0" aria-label="Cookie policy message">
            <div class="cookie-message__container">
                <p class="cookie-message__text">
                    <a href="#" class="link--invert">Example link</a> Find out more about their purpose and settings in your browser. By browsing the site you are agreeing to use cookies according to your browser settings.
                </p>

                <button class="
                button
                button--icon
                cookie-message__close
                cookie-message__button
                button--rotate-icon
            " type="button" aria-label="Close cookie message">
                    <svg class="icon button__icon cookie-message__button-icon" role="presentation" focusable="false">
                        <title>Close</title>
                        <use xlink:href="/images/icons-sprite.svg#close"></use>
                    </svg>

                </button>
            </div>
        </div>
        <script src="/components/raw/cookie-message/cookie-message.js"></script>

    </div>
</footer>

<script src="/components/raw/footer/footer.js"></script>
<div class="page-wrapper">
    {{ render '@header' }}

    <main
        id="maincontent"
        class="
            dashboard
            container
            {{ class }}
        "
    >
        {{ render '@breadcrumbs' breadcrumbs }}
        <div class="row">
            <div
                class="
                    col-xs-12
                    col-lg-3
                    {{ sidebarClass }}
                "
            >
                {{ render '@dashboard-nav' }}
            </div>
            <div
                class="
                    col-xs-12
                    col-lg-9
                    wishlist
                    {{ contentClass }}
                "
            >
                {{ render '@heading' heading }}
                {{#if toolbar}}
                    {{ render '@toolbar' toolbar merge=true }}
                {{/if}}
                <div
                    class="
                        products-grid
                        wishlist
                        row
                        wishlist__grid
                    "
                >
                    {{#each wishlistItems}}
                        <div class="wishlist__item {{ product.class }}">
                            <a
                                href="#"
                                aria-label="{{ product.name.text }}"
                                class="wishlist__link"
                            >
                                {{ render '@image' product.image }}
                            </a>

                            {{#if selectAll}}
                                <div class="wishlist__select {{ this.itemSelectClass }}">
                                    {{ render '@checkbox' this.checkbox }}
                                </div>
                            {{/if}}

                            <div class="wishlist__item-content {{ this.itemContentClass }}">
                                <div class="wishlist__rating-wrapper">
                                    {{ render '@rating--secondary' }}
                                </div>

                                <div class="wishlist__item-name {{ this.itemNameClass }}">
                                    {{ render '@link' product.name }}
                                </div>

                                {{#if product.price}}
                                    {{ render '@price' product.price merge=true }}
                                {{else}}
                                    {{ render '@price--with-special-price' product.priceSpecial merge=true }}
                                {{/if}}
                            </div>

                            <div class="wishlist__item-inner">
								{{ render '@input--textarea' textarea }}
                                <div class="{{ qty.class }}">
                                    {{ render '@label' qty.label }}
                                    {{ render '@quantity-update' qty.field merge=true }}
                                </div>
                                <div class="wishlist__item-actions">
                                    {{ render '@button--icon' editIcon }}
                                    {{ render '@button--icon' removeIcon }}
                                </div>

                                <div class="wishlist__item-actions wishlist__item-actions--to-cart">
                                    {{ render '@button' addToCart }}
                                </div>
                            </div>
                        </div>
                    {{/each}}
                </div>
                {{ render '@actions-group' actions }}
            </div>
        </div>
    </main>
</div>

{{ render '@footer' }}
{
  "class": "margin-vc-m",
  "sidebarClass": "dashboard__sidebar margin-top-sl",
  "contentClass": "dashboard__content margin-top-sl",
  "actionsGroupClass": "wishlist__actions",
  "breadcrumbs": {
    "categories": [
      {
        "name": "Home",
        "href": "#",
        "linkClass": "breadcrumbs__link"
      },
      {
        "name": "Wishlist",
        "href": "#",
        "linkClass": "breadcrumbs__link"
      }
    ]
  },
  "toolbar": {
    "showMode": false,
    "showSorter": false,
    "showAmount": true,
    "showLimit": true,
    "showPager": true,
    "amount": {
      "class": "toolbar__amount--visible"
    },
    "limiter": {
      "class": "toolbar__limiter--relative"
    }
  },
  "heading": {
    "tag": "h1",
    "class": "heading dashboard__content-heading",
    "text": "My Wish List"
  },
  "wishlistItems": [
    {
      "product": {
        "class": "col-xs-12 col-sm-6 col-md-4 margin-bottom-sm",
        "image": {
          "dataSrc": "/images/catalog-grid-item/product-color-swatch-image-1-32_40.jpg"
        },
        "name": {
          "href": "#",
          "class": "wishlist__item-name-link",
          "text": "Chaz Kangeroo Hoodie product with long name more than 3 lines Chaz Kangeroo Hoodie"
        },
        "priceSpecial": {
          "class": "price-box"
        }
      },
      "textarea": {
        "class": "margin-0 wishlist__comment",
        "field": {
          "id": "comment",
          "name": "comment",
          "placeholder": "Comment"
        },
        "label": {
          "text": "Comment",
          "hidden": true
        }
      },
      "qty": {
        "class": "wishlist__qty",
        "label": {
          "class": "wishlist__label",
          "text": "Quantity:",
          "for": "qty-product-1"
        },
        "field": {
          "label": true,
          "input": {
            "id": "qty-product-1",
            "class": "wishlist__field-qty"
          }
        }
      },
      "editIcon": {
        "tag": "a",
        "attributes": "href=\"#\" aria-label=\"Edit product parameters\"",
        "class": "",
        "icon": {
          "id": "edit",
          "title": "Edit",
          "class": "",
          "hidden": true
        }
      },
      "removeIcon": {
        "tag": "button",
        "attributes": "type=\"button\" aria-label=\"Remove product from wishlist\"",
        "class": "",
        "icon": {
          "id": "remove",
          "title": "Remove",
          "class": "",
          "hidden": true
        }
      },
      "addToCart": {
        "tag": "button",
        "text": "Add to Cart",
        "class": "wishlist__button padding-hz-sm"
      },
      "checkbox": {
        "id": "",
        "name": "product-item-checkbox",
        "label": {
          "text": "Select Product"
        },
        "iconChecked": {
          "class": ""
        },
        "iconUnchecked": {
          "class": ""
        },
        "input": {
          "class": ""
        }
      },
      "itemContentClass": "margin-hz-xs",
      "itemSelectClass": "margin-hz-xs",
      "itemNameClass": "padding-0"
    },
    {
      "product": {
        "class": "col-xs-12 col-sm-6 col-md-4 margin-bottom-sm",
        "image": {
          "dataSrc": "/images/catalog-grid-item/product-color-swatch-image-1-32_40.jpg"
        },
        "name": {
          "href": "#",
          "class": "wishlist__item-name-link",
          "text": "Bruno Compete Hoodie"
        },
        "price": {
          "class": "price-box",
          "regularPriceClass": "price-as-configured margin-0"
        }
      },
      "textarea": {
        "class": "margin-0 wishlist__comment",
        "field": {
          "id": "comment2",
          "name": "comment",
          "placeholder": "Comment"
        },
        "label": {
          "text": "Comment",
          "hidden": true
        }
      },
      "qty": {
        "class": "wishlist__qty quantity-update--wishlist",
        "label": {
          "class": "wishlist__label",
          "text": "Quantity:",
          "for": "qty-product-2"
        },
        "field": {
          "label": true,
          "input": {
            "id": "qty-product-2",
            "class": "wishlist__field-qty"
          }
        }
      },
      "editIcon": {
        "tag": "a",
        "attributes": "href=\"#\" aria-label=\"Edit product parameters\"",
        "class": "",
        "icon": {
          "id": "edit",
          "title": "Edit",
          "class": "",
          "hidden": true
        }
      },
      "removeIcon": {
        "tag": "button",
        "attributes": "href=\"#\" aria-label=\"Remove product from wishlist\"",
        "class": "",
        "icon": {
          "id": "remove",
          "title": "Remove",
          "class": "",
          "hidden": true
        }
      },
      "addToCart": {
        "tag": "button",
        "text": "Add to Cart",
        "class": "wishlist__button"
      },
      "checkbox": {
        "id": "",
        "name": "product-item-checkbox",
        "label": {
          "text": "Select Product"
        },
        "iconChecked": {
          "class": ""
        },
        "iconUnchecked": {
          "class": ""
        },
        "input": {
          "class": ""
        }
      },
      "itemContentClass": "margin-hz-xs",
      "itemSelectClass": "margin-hz-xs",
      "itemNameClass": "padding-0"
    }
  ],
  "actions": {
    "sides": [
      {
        "action": [
          {
            "button": {
              "text": "Update Wish List",
              "class": "actions-group__button"
            }
          },
          {
            "button": {
              "text": "Share Wish List",
              "class": "button--secondary actions-group__button"
            }
          },
          {
            "button": {
              "text": "Add All to Cart",
              "class": "button--secondary actions-group__button"
            }
          }
        ]
      },
      {
        "action": [
          {
            "link": {
              "text": "Back",
              "title": "Back to My Account",
              "class": "actions-group__link"
            }
          }
        ]
      }
    ]
  }
}
  • Content:
    $wishlist-management__item-font-size          : $font-size-base !default;
    $wishlist-management__item-font-weight--active: $font-weight-bold !default;
    
    $wishlist-management__list-flex\@medium       : 1 0 50% !default;
    
    $wishlist__grid-padding                       : $spacer--medium 0 $spacer--large 0 !default;
    
    $wishlist__rating-wrapper-min-height          : 16px !default;
    
    $wishlist__item-padding                       : 0 $spacer--medium !default;
    $wishlist__item-stock-info-width              : 100% !default;
    $wishlist__item-stock-info-order              : 3 !default;
    
    $wishlist__price-padding                      : 0 !default;
    $wishlist__price-padding\@medium              : 0 0 $spacer !default;
    $wishlist__price-font-weight                  : $font-weight-bold !default;
    
    $wishlist__name-margin                        : $spacer--medium 0 !default;
    $wishlist__name-margin\@large                 : $spacer 0 !default;
    $wishlist__name-height                        : 48px !default;
    $wishlist__name-link-color                    : $gray-darkest !default;
    $wishlist__name-link-font-size                : $font-size-base !default;
    $wishlist__name-link-font-size\@medium        : $font-size-medium !default;
    $wishlist__name-link-font-weight              : $font-weight-normal !default;
    $wishlist__name-line-clamp                    : 2 !default;
    $wishlist__name-link-line-height              : 1.7 !default;
    $wishlist__name-link-line-height\@medium      : 1.5 !default;
    
    $wishlist__item-inner-border                  : $border-base !default;
    $wishlist__item-inner-border-width            : 0 0 $border-width-base 0 !default;
    $wishlist__inner-padding                      : $spacer 0 !default;
    $wishlist__inner-padding\@medium              : 0 !default;
    
    $wishlist__label-margin                       : 0 0 $spacer !default;
    $wishlist__label-padding                      : 0 $spacer 0 0 !default;
    
    $wishlist__qty-margin                         : $spacer 0 !default;
    $wishlist__qty-margin\@medium                 : $spacer--medium 0 !default;
    $wishlist__field-qty-text-align               : center !default;
    $wishlist__field-qty-max-width                : 100% !default;
    $wishlist__field-qty-max-width                : 80px !default;
    $wishlist__field-qty-max-width\@xl            : 166px !default;
    
    $wishlist__quantity-button-width              : 48px !default;
    $wishlist__quantity-button-height             : 48px !default;
    $wishlist__quantity-button-icon-fill          : $gray-dark !default;
    $wishlist__quantity-button-icon-fill--active  : $white !default;
    $wishlist__quantity-input-color               : $gray-dark !default;
    
    $wishlist__comment-width                      : 100% !default;
    
    $wishlist__item-actions-margin                : $spacer 0 !default;
    $wishlist__item-actions-margin\@medium        : $spacer 0 $spacer--medium !default;
    $wishlist__item-actions-order                 : 2 !default;
    $wishlist__item-actions-order--to-cart        : 3 !default;
    $wishlist__item-actions-width--to-cart        : 100% !default;
    
    $wishlist__to-cart-flex-basis                 : 100% !default;
    $wishlist__to-cart-margin                     : 0 !default;
    
    $wishlist__button-width                       : 100% !default;
    
    $wishlist__actions-padding                    : $spacer--semi-medium 0 0 !default;
    $wishlist__actions-border                     : $border-base !default;
    $wishlist__actions-border-width               : $border-width-base 0 0 !default;
    $wishlist__buttons-icon-fill                  : $gray-dark !default;
    $wishlist__buttons-icon-fill--active          : $white !default;
    $wishlist__buttons-link-font-size             : $font-size-medium !default;
    $wishlist__buttons-link-line-height           : 2 !default;
    $wishlist__buttons-link-letter-spacing        : 1px !default;
    $wishlist__actions-button-padding             : 0 $spacer--medium !default;
    $wishlist__actions-button-padding\@xl         : 0 $spacer--large !default;
    
  • URL: /components/raw/wishlist/_wishlist-variables.scss
  • Filesystem Path: build/components/Templates/dashboard/wishlist/_wishlist-variables.scss
  • Size: 3.9 KB
  • Content:
    @import 'wishlist-variables';
    
    .wishlist {
        &__grid {
            justify-content: flex-start;
            padding: $wishlist__grid-padding;
        }
    
        &__item {
            display: flex;
            flex-flow: column nowrap;
            justify-content: flex-start;
    
            .price-box {
                padding: $wishlist__price-padding;
                font-weight: $wishlist__price-font-weight;
    
                @include mq($screen-m) {
                    padding: $wishlist__price-padding\@medium;
                }
            }
    
            .product-item-tooltip {
                display: none;
            }
        }
    
        &__item-name {
            display: block;
            margin: $wishlist__name-margin;
            height: $wishlist__name-height;
            display: -webkit-box; // sass-lint:disable-line no-vendor-prefixes
            -webkit-line-clamp: $wishlist__name-line-clamp; //sass-lint:disable-line no-vendor-prefixes
            -webkit-box-orient: vertical; // sass-lint:disable-line no-vendor-prefixes
            overflow: hidden;
            text-transform: none;
    
            @include mq($screen-l) {
                margin: $wishlist__name-margin\@large;
            }
        }
    
        &__item-name-link {
            display: block;
            color: $wishlist__name-link-color;
            font-size: $wishlist__name-link-font-size;
            font-weight: $wishlist__name-link-font-weight;
            line-height: $wishlist__name-link-line-height;
    
            @include mq($screen-m) {
                font-size: $wishlist__name-link-font-size\@medium;
                line-height: $wishlist__name-link-line-height\@medium;
            }
        }
    
        &__item-inner {
            display: flex;
            flex-wrap: wrap;
            flex-direction: row;
            align-items: flex-end;
            justify-content: space-between;
            padding: $wishlist__inner-padding;
            border: $wishlist__item-inner-border;
            border-width: $wishlist__item-inner-border-width;
    
            @include mq($screen-m) {
                padding: $wishlist__inner-padding\@medium;
            }
        }
    
        &__comment {
            width: $wishlist__comment-width;
        }
    
        &__item-actions {
            display: flex;
            justify-content: space-evenly;
            order: $wishlist__item-actions-order;
            margin: $wishlist__item-actions-margin;
    
            @include mq($screen-m) {
                margin: $wishlist__item-actions-margin\@medium;
            }
    
            &--to-cart {
                width: $wishlist__item-actions-width--to-cart;
                order: $wishlist__item-actions-order--to-cart;
                margin: $wishlist__to-cart-margin;
    
                @include mq($screen-m) {
                    margin: $wishlist__item-actions-margin;
                }
            }
    
            .button {
                &:hover,
                &:active {
                    .icon {
                        fill: $wishlist__buttons-icon-fill--active;
                    }
                }
                .icon {
                    fill: $wishlist__buttons-icon-fill;
                }
            }
        }
    
        &__item-stock-info {
            width: $wishlist__item-stock-info-width;
            order: $wishlist__item-stock-info-order;
        }
    
        &__link {
            display: block;
        }
    
        &__label {
            margin: $wishlist__label-margin;
            padding: $wishlist__label-padding;
        }
    
        &__qty {
            display: flex;
            margin: $wishlist__qty-margin;
            flex-direction: column;
            align-items: flex-start;
            max-width: $wishlist__field-qty-max-width;
    
            @include mq($screen-m) {
                margin: $wishlist__qty-margin\@medium;
            }
    
            @include mq($screen-xl) {
                max-width: $wishlist__field-qty-max-width\@xl;
            }
    
            .quantity-update {
                border: 0;
    
                &__button {
                    width: $wishlist__quantity-button-width;
                    height: $wishlist__quantity-button-height;
                    display: none;
    
                    @include mq($max-content-width) {
                        display: flex;
                    }
    
                    &:hover,
                    &:focus {
                        .icon {
                            fill: $wishlist__quantity-button-icon-fill--active;
                        }
                    }
    
                    .icon {
                        fill: $wishlist__quantity-button-icon-fill;
                    }
                }
    
                &__input {
                    height: $wishlist__quantity-button-height;
                    border-width: 1px;
                    color: $wishlist__quantity-input-color;
                }
            }
        }
    
        &__field-qty {
            text-align: $wishlist__field-qty-text-align;
            min-width: 0;
        }
    
        &__button {
            width: $wishlist__button-width;
        }
    
        &__actions {
            padding: $wishlist__actions-padding;
            border: $wishlist__actions-border;
            border-width: $wishlist__actions-border-width;
    
            @include mq($screen-m) {
                align-items: flex-start;
            }
    
            .button {
                padding: $wishlist__actions-button-padding;
    
                @include mq($screen-m) {
                    padding: $wishlist__actions-button-padding\@xl;
                }
            }
    
            .link {
                text-decoration: underline;
                font-size: $wishlist__buttons-link-font-size;
                line-height: $wishlist__buttons-link-line-height;
                letter-spacing: $wishlist__buttons-link-letter-spacing;
            }
        }
    
        &__rating-wrapper {
            min-height: $wishlist__rating-wrapper-min-height;
        }
    
        .wishlist-management {
            &__group {
                @include mq($screen-m) {
                    display: flex;
                    flex-wrap: wrap;
                }
            }
    
            &__list {
                @include mq($screen-m) {
                    flex: $wishlist-management__list-flex\@medium;
                }
            }
    
            &__item {
                font-size: $wishlist-management__item-font-size;
                cursor: pointer;
    
                &--active {
                    a {
                        font-weight: $wishlist-management__item-font-weight--active;
                        text-decoration: underline;
                    }
                }
            }
        }
    
        // Disable spin buttons in number input type
        input[type="number"]::-webkit-outer-spin-button, // sass-lint:disable-line no-vendor-prefixes
        input[type="number"]::-webkit-inner-spin-button { // sass-lint:disable-line no-vendor-prefixes
            -webkit-appearance: none; // sass-lint:disable-line no-vendor-prefixes
            margin: 0;
        }
    
        input[type="number"] { // sass-lint:disable-line no-vendor-prefixes
            -moz-appearance: textfield; // sass-lint:disable-line no-vendor-prefixes
        }
    }
    
  • URL: /components/raw/wishlist/_wishlist.scss
  • Filesystem Path: build/components/Templates/dashboard/wishlist/_wishlist.scss
  • Size: 6.5 KB

There are no notes for this item.