Home

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

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

            </button>

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

    <div class="contact-bar ">
        <div class="contact-bar__wrapper">
            <div class="contact-bar__container container">
                <ul class="list contact-bar__list">
                    <li class="list-item contact-bar__item">
                        <a href="#" class="
                                contact-bar__link
                                
                            ">
                            <span class="
                                    button__text
                                    contact-bar__text
                                ">
                                Account
                            </span>
                        </a>
                    </li>
                    <li class="list-item contact-bar__item">
                        <a href="#" class="
                                contact-bar__link
                                
                            ">
                            <span class="
                                    button__text
                                    contact-bar__text
                                ">
                                Blog
                            </span>
                        </a>
                    </li>
                    <li class="list-item contact-bar__item">
                        <a href="#" class="
                                contact-bar__link
                                
                            ">
                            <span class="
                                    button__text
                                    contact-bar__text
                                ">
                                Contact
                            </span>
                        </a>
                    </li>
                </ul>
                <ul class="list contact-bar__list contact-bar__list--icons">
                    <li class="list-item contact-bar__item">
                        <a href="tel:8002669590" class="
                            contact-bar__link
                            
                        ">
                            <span class="
                                icon
                                contact-bar__icon
                            " aria-label="">
                                <svg class="icon " role="img">
                                    <title>Phone</title>
                                    <use href="/images/icons-sprite.svg#phone"></use>
                                </svg>

                            </span>
                            <span class="
                                button__text
                                contact-bar__text
                            ">
                                Call us for free 800 - 266 - 9590
                            </span>
                        </a>
                    </li>
                    <li class="contact-bar__item">
                        <a href="mailto:test@test.com" class="
                            contact-bar__link
                            
                        ">
                            <span class="
                                icon
                                contact-bar__icon
                            " aria-label="">
                                <svg class="icon " role="img">
                                    <title>Email</title>
                                    <use href="/images/icons-sprite.svg#envelope"></use>
                                </svg>

                            </span>
                            <span class="
                                button__text
                                contact-bar__text
                            ">
                                Email Us
                            </span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

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

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

                    </button>

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

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

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

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

                                                </button>

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

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

                                                                </a>

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

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

                                                                                </a>

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

                                                                                                </a>

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

                                                                                                </a>

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

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

                                                                                </a>

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

                                                                                </a>

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

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

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

                                                                </a>

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

                                                                                </a>

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

                                                                                </a>

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

                                                                                </a>

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

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

                                                                </a>

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

                                                                </a>

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

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

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

                                                </a>

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

                                                                </a>

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

                                                                </a>

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

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

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

                                                </a>

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

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

                                                                </a>

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

                                                                                </a>

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

                                                                                </a>

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

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

                                                                </a>

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

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

                                                                </a>

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

                                                                                </a>

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

                                                                                </a>

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

                                                                                </a>

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

                                                                                </a>

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

                                                                                </a>

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

                                                                                </a>

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

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

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

                                                                </a>

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

                                                                                </a>

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

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

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

                                                                </a>

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

                                                                                </a>

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

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

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

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

                                </div>

                                <div class="modal__bottom side-menu__content-bottom">
                                    <div class="modal__bottom-actions side-menu__bottom-actions">
                                        <div class="
                                    modal__bottom-action
                                    side-menu__bottom-action
                                ">
                                            <div class="contact-bar contact-bar--vertical">
                                                <div class="contact-bar__wrapper">
                                                    <div class="contact-bar__container ">
                                                        <ul class="list contact-bar__list">
                                                            <li class="list-item contact-bar__item">
                                                                <a href="#" class="
                                contact-bar__link
                                
                            ">
                                                                    <span class="
                                    button__text
                                    contact-bar__text
                                ">
                                                                        Account
                                                                    </span>
                                                                </a>
                                                            </li>
                                                            <li class="list-item contact-bar__item">
                                                                <a href="#" class="
                                contact-bar__link
                                
                            ">
                                                                    <span class="
                                    button__text
                                    contact-bar__text
                                ">
                                                                        Blog
                                                                    </span>
                                                                </a>
                                                            </li>
                                                            <li class="list-item contact-bar__item">
                                                                <a href="#" class="
                                contact-bar__link
                                
                            ">
                                                                    <span class="
                                    button__text
                                    contact-bar__text
                                ">
                                                                        Contact
                                                                    </span>
                                                                </a>
                                                            </li>
                                                        </ul>
                                                        <ul class="list contact-bar__list contact-bar__list--icons">
                                                            <li class="list-item contact-bar__item">
                                                                <a href="tel:8002669590" class="
                            contact-bar__link
                            
                        ">
                                                                    <span class="
                                icon
                                contact-bar__icon
                            " aria-label="">
                                                                        <svg class="icon " role="img">
                                                                            <title>Phone</title>
                                                                            <use href="/images/icons-sprite.svg#phone"></use>
                                                                        </svg>

                                                                    </span>
                                                                    <span class="
                                button__text
                                contact-bar__text
                            ">
                                                                        Call us for free 800 - 266 - 9590
                                                                    </span>
                                                                </a>
                                                            </li>
                                                            <li class="contact-bar__item">
                                                                <a href="mailto:test@test.com" class="
                            contact-bar__link
                            
                        ">
                                                                    <span class="
                                icon
                                contact-bar__icon
                            " aria-label="">
                                                                        <svg class="icon " role="img">
                                                                            <title>Email</title>
                                                                            <use href="/images/icons-sprite.svg#envelope"></use>
                                                                        </svg>

                                                                    </span>
                                                                    <span class="
                                button__text
                                contact-bar__text
                            ">
                                                                        Email Us
                                                                    </span>
                                                                </a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>

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

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

                            </button>

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

                </div>

                <div class="header__brief-info">
                    <div class="brief-info brief-info--link">
                        <ul class="list brief-info__items-container">
                            <li class="brief-info__list-item list__item">
                                <a class="
                        brief-info__link
                        
                    ">
                                    <span class="
                            brief-info__icon-wrapper
                            
                        ">
                                        <svg class="icon brief-info__icon" role="presentation" focusable="false">
                                            <title>Free shipping icon</title>
                                            <use href="/images/icons-sprite.svg#delivery-truck"></use>
                                        </svg>

                                    </span>

                                    <span class="brief-info__title ">
                                        Free Shipping
                                    </span>
                                    <span class="brief-info__subtitle
                                
                            ">
                                        On Hundreds of Products
                                    </span>
                                </a>
                            </li>
                        </ul>
                    </div>

                </div>

                <div class="header__buttons">
                    <a class="
                                header-button
                                button
                                button--icon
                                button--icon-light
                                button--icon-fill
                            " href="#" aria-label="Wishlist">
                        <svg class="icon header-button__icon" role="presentation" focusable="false">
                            <title>Heart</title>
                            <use href="/images/icons-sprite.svg#heart"></use>
                        </svg>

                    </a>

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

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

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

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

                                        <div class="minicart-content__counter">
                                            2 items
                                        </div>
                                    </div>
                                    <div class="minicart-content__middle" id="minicart-products">
                                        <div class="minicart-content__products-list">
                                            <div class="minicart-product">
                                                <div class="minicart-product__image">
                                                    <div class="lazyload-wrapper ">
                                                        <img class="
            image
            lazyload
            
        " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw&#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>

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

                                                            </a>

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

                                                            </a>

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

                                            <div class="minicart-product">
                                                <div class="minicart-product__image">
                                                    <div class="lazyload-wrapper ">
                                                        <img class="
            image
            lazyload
            
        " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw&#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>

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

                                                            </a>

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

                                                            </a>

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

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

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

                            </div>

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

                            </button>

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

                </div>

                <div class="header__search-wrapper">
                    <form class="search-form">
                        <div class="search-form__wrapper">
                            <div class="input search-form__input-wrapper margin-0">
                                <label class="
            label
            input__label
                label--hidden
            
        " for="search">
                                    Search products
                                </label>
                                <input class="input__field search-form__input" id="search" name="search" type="search" placeholder="Search entire store here...">
                            </div>

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

                            </button>

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

    <div class="mega-menu ">
        <ul class="mega-menu__list container ">
            <li class="mega-menu__item mega-menu__item--parent mega-menu__item--secondary">
                <a href="/new-in" class="mega-menu__link">
                    New In
                </a>

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

            </li>
            <li class="mega-menu__item mega-menu__item--parent mega-menu__item--rows">
                <a href="/clothing" class="mega-menu__link">
                    Clothing
                </a>

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

                    </li>
                    <li class="list__item mega-menu__inner-item mega-menu__column-hidden mega-menu__inner-item--images">
                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                            Row two
                        </a>
                        <ul class="list mega-menu__inner-list">
                            <li class="list__item mega-menu__inner-item">
                                <a href="" class="
                    link
                    mega-menu__inner-link
                ">
                                    <div class="lazyload-wrapper ">
                                        <img class="
            image
            lazyload
            
        " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw&#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="/shoes" class="mega-menu__link">
                    Shoes
                </a>

            </li>
            <li class="mega-menu__item ">
                <a href="/furniture" class="mega-menu__link">
                    Furniture
                </a>

            </li>
            <li class="mega-menu__item ">
                <a href="/accessories" class="mega-menu__link">
                    Accessories
                </a>

            </li>
            <li class="mega-menu__item mega-menu__item--parent mega-menu__item--rows">
                <a href="/activewear" class="mega-menu__link">
                    Activewear
                </a>

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

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

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

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

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

                                    </li>
                                </ul>

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

                            </li>
                        </ul>

                    </li>
                </ul>

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

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

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

    <main class="container homepage" id="maincontent">
        <div class="home">
            <section class="section section--secondary">
                <div class="section__content ">
                    <div class="slider slider--loading" data-slider="default" data-mobile-first="true" data-infinite="true" data-center-mode="false" data-dots="false" data-autoplay="false" data-autoplay-speed="3000" data-pause-on-focus="true" data-pause-on-hover="true" data-slides-to-show="1" data-slides-to-scroll="1" data-swipe-to-slide="true" data-element-slides=".slider__slides" data-dots-class="slider__dots" data-loading-class="slider--loading" data-loader-visible-class="loader--visible" data-element-slide=".slider__item" data-element-loader=".loader" data-element-nav-prev=".slider__prev" data-element-nav-next=".slider__next" data-responsive-config="[]">
                        <div class="loader loader--visible" aria-live="polite" aria-label="Do not refresh the page">
                            <div class="loader__icon"></div>
                        </div>

                        <div class="slider__handler">
                            <div class="slider__navigation ">
                                <div class="slider__arrows">
                                    <button class="button button--icon button--icon-border slider__nav-button slider__prev" type="button" aria-label="Previous slide">
                                        <svg class="icon button__icon slider__nav-icon" role="img">
                                            <use href="/images/icons-sprite.svg#arrow-left"></use>
                                        </svg>

                                    </button>

                                    <button class="button button--icon button--icon-border slider__nav-button slider__next" type="button" aria-label="Next slide">
                                        <svg class="icon button__icon slider__nav-icon" role="img">
                                            <use href="/images/icons-sprite.svg#arrow-right"></use>
                                        </svg>

                                    </button>

                                </div>
                            </div>
                            <div class="slider__container">
                                <div class="slider__slides">
                                    <div class="
                            slider__item
                            
                        ">
                                        <picture class="image ">
                                            <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/slider/slider-304_392.jpg" media="(max-width: 480px)" />
                                            <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/slider/slider-752_536.jpg" media="(max-width: 768px)" />
                                            <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/slider/slider-944_536.jpg" media="(max-width: 1024px)" />
                                            <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/slider/slider-1328_536.jpg" media="" />

                                            <img class="lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/slider/slider-304_392.jpg" alt="slider1" />
                                        </picture>

                                    </div>
                                    <div class="
                            slider__item
                            
                        ">
                                        <picture class="image ">
                                            <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/slider/slider-304_392.jpg" media="(max-width: 480px)" />
                                            <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/slider/slider-752_536.jpg" media="(max-width: 768px)" />
                                            <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/slider/slider-944_536.jpg" media="(max-width: 1024px)" />
                                            <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/slider/slider-1328_536.jpg" media="" />

                                            <img class="lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/slider/slider-304_392.jpg" alt="slider1" />
                                        </picture>

                                    </div>
                                    <div class="
                            slider__item
                            
                        ">
                                        <picture class="image ">
                                            <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/slider/slider-304_392.jpg" media="(max-width: 480px)" />
                                            <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/slider/slider-752_536.jpg" media="(max-width: 768px)" />
                                            <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/slider/slider-944_536.jpg" media="(max-width: 1024px)" />
                                            <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/slider/slider-1328_536.jpg" media="" />

                                            <img class="lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/slider/slider-304_392.jpg" alt="slider1" />
                                        </picture>

                                    </div>
                                    <div class="
                            slider__item
                            
                        ">
                                        <picture class="image ">
                                            <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/slider/slider-304_392.jpg" media="(max-width: 480px)" />
                                            <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/slider/slider-752_536.jpg" media="(max-width: 768px)" />
                                            <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/slider/slider-944_536.jpg" media="(max-width: 1024px)" />
                                            <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/slider/slider-1328_536.jpg" media="" />

                                            <img class="lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/slider/slider-304_392.jpg" alt="slider1" />
                                        </picture>

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

                    </div>

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

                </div>
            </section>

            <section class="section display-none-m">
                <div class="section__content ">
                    <div class="brief-info brief-info--dividers">
                        <ul class="list brief-info__items-container">
                            <li class="brief-info__item">
                                <span class="
                            brief-info__icon-wrapper
                            
                        " aria-label="Return policy">
                                    <svg class="icon brief-info__icon" role="presentation" focusable="false">
                                        <title>Return Policy</title>
                                        <use href="/images/icons-sprite.svg#return"></use>
                                    </svg>

                                </span>
                                <div class="brief-info__content">
                                    <h3 class="brief-info__title ">
                                        Lorem Ipsum is simply
                                    </h3>
                                    <p class="brief-info__subtitle
                                    
                                ">
                                        30-day return policy
                                    </p>
                                </div>
                            </li>
                            <li class="brief-info__item">
                                <span class="
                            brief-info__icon-wrapper
                            
                        " aria-label="Lorem Ipsum is simply">
                                    <svg class="icon brief-info__icon" role="presentation" focusable="false">
                                        <title>Big star</title>
                                        <use href="/images/icons-sprite.svg#bigstar"></use>
                                    </svg>

                                </span>
                                <div class="brief-info__content">
                                    <h3 class="brief-info__title ">
                                        Lorem Ipsum is simply
                                    </h3>
                                    <p class="brief-info__subtitle
                                    
                                ">
                                        Now in stock!
                                    </p>
                                </div>
                            </li>
                            <li class="brief-info__item">
                                <span class="
                            brief-info__icon-wrapper
                            
                        " aria-label="Our Customers Are Talking">
                                    <svg class="icon brief-info__icon" role="presentation" focusable="false">
                                        <title>Our Customers Are Talking</title>
                                        <use href="/images/icons-sprite.svg#reviews"></use>
                                    </svg>

                                </span>
                                <div class="brief-info__content">
                                    <h3 class="brief-info__title ">
                                        Our Customers Are Talking
                                    </h3>
                                    <p class="brief-info__subtitle
                                    
                                ">
                                        Check out our reviews!
                                    </p>
                                </div>
                            </li>
                        </ul>
                    </div>

                </div>
            </section>

            <section class="section section--fix-spacer-large">
                <header class="section__heading">
                    <h2 class="heading--first-level margin-0">
                        Shop by category
                    </h2>

                </header>
                <div class="section__content row">
                    <a href="#" class="banner col-xs-6 col-lg-3 margin-bottom-l" aria-label="descriptive text about banner action and / or image">
                        <picture class="image ">
                            <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/home/banners/category-clothing-320_432.jpg" media="(max-width: 1200px)" />
                            <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/home/banners/category-clothing-320_432.jpg" media="" />

                            <img class="lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/home/banners/category-clothing-144_200.jpg" alt="banner-image" />
                        </picture>

                        <div class="banner__content">
                            <p class="banner__text">
                                Clothing
                            </p>
                            <span class="banner__icon">
                                <svg class="icon " role="presentation" focusable="false">
                                    <title>Arrow right icon</title>
                                    <use href="/images/icons-sprite.svg#arrow-right"></use>
                                </svg>

                            </span>
                        </div>
                    </a>

                    <a href="#" class="banner col-xs-6 col-lg-3 margin-bottom-l" aria-label="descriptive text about banner action and / or image">
                        <picture class="image ">
                            <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/home/banners/category-shoes-320_432.jpg" media="(max-width: 1200px)" />
                            <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/home/banners/category-shoes-320_432.jpg" media="" />

                            <img class="lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/home/banners/category-shoes-144_200.jpg" alt="banner-image" />
                        </picture>

                        <div class="banner__content">
                            <p class="banner__text">
                                Shoes
                            </p>
                            <span class="banner__icon">
                                <svg class="icon " role="presentation" focusable="false">
                                    <title>Arrow right icon</title>
                                    <use href="/images/icons-sprite.svg#arrow-right"></use>
                                </svg>

                            </span>
                        </div>
                    </a>

                    <a href="#" class="banner col-xs-6 col-lg-3 margin-bottom-l" aria-label="descriptive text about banner action and / or image">
                        <picture class="image ">
                            <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/home/banners/category-accessories-320_432.jpg" media="(max-width: 1200px)" />
                            <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/home/banners/category-accessories-320_432.jpg" media="" />

                            <img class="lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/home/banners/category-accessories-144_200.jpg" alt="banner-image" />
                        </picture>

                        <div class="banner__content">
                            <p class="banner__text">
                                Accessories
                            </p>
                            <span class="banner__icon">
                                <svg class="icon " role="presentation" focusable="false">
                                    <title>Arrow right icon</title>
                                    <use href="/images/icons-sprite.svg#arrow-right"></use>
                                </svg>

                            </span>
                        </div>
                    </a>

                    <a href="#" class="banner col-xs-6 col-lg-3 margin-bottom-l" aria-label="descriptive text about banner action and / or image">
                        <picture class="image ">
                            <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/home/banners/category-new-in-320_432.jpg" media="(max-width: 1200px)" />
                            <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/home/banners/category-new-in-320_432.jpg" media="" />

                            <img class="lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/home/banners/category-new-in-144_200.jpg" alt="banner-image" />
                        </picture>

                        <div class="banner__content">
                            <p class="banner__text">
                                New In
                            </p>
                            <span class="banner__icon">
                                <svg class="icon " role="presentation" focusable="false">
                                    <title>Arrow right icon</title>
                                    <use href="/images/icons-sprite.svg#arrow-right"></use>
                                </svg>

                            </span>
                        </div>
                    </a>

                </div>
            </section>

            <section class="section section--fix-spacer-medium">
                <div class="section__content row">
                    <a href="#" class="banner col-xs-12 col-lg-6 margin-bottom-m" aria-label="descriptive text about banner action and / or image">
                        <picture class="image ">
                            <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/home/banners/banner-medium-women-now-656_264.jpg" media="(max-width: 768px)" />
                            <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/home/banners/banner-medium-women-now-656_264.jpg" media="" />

                            <img class="lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/home/banners/banner-small-women-now-304_128.jpg" alt="banner-image" />
                        </picture>

                    </a>

                    <a href="#" class="banner col-xs-12 col-lg-6 margin-bottom-m" aria-label="descriptive text about banner action and / or image">
                        <picture class="image ">
                            <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/home/banners/banner-medium-men-now-656_264.jpg" media="(max-width: 768px)" />
                            <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/home/banners/banner-medium-men-now-656_264.jpg" media="" />

                            <img class="lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/home/banners/banner-small-men-now-304_128.jpg" alt="banner-image" />
                        </picture>

                    </a>

                </div>
            </section>

            <section class="section ">
                <div class="section__content section__content--products">
                    <div class="slider slider--products" data-mobile-first="true" data-infinite="false" data-center-mode="false" data-dots="true" data-autoplay="false" data-autoplay-speed="3000" data-pause-on-focus="true" data-pause-on-hover="true" data-slides-to-show="2" data-slides-to-scroll="1" data-swipe-to-slide="true" data-element-slides=".slider__slides" data-dots-class="slider__dots" data-loading-class="slider--loading" data-loader-visible-class="loader--visible" data-element-slide=".slider__item" data-element-loader=".loader" data-element-nav-prev=".slider__prev" data-element-nav-next=".slider__next" data-responsive-config='[{"breakpoint": 767, "settings": {"slidesToShow": 3, "slidesToScroll": 1, "dots": false}}, {"breakpoint": 1023, "settings": {"slidesToShow": 4, "slidesToScroll": 1, "dots": false}}]'>
                        <div class="loader loader--visible" aria-live="polite" aria-label="Do not refresh the page">
                            <div class="loader__icon"></div>
                        </div>

                        <div class="slider__heading ">
                            <h2 class="heading--first-level margin-0">
                                Popular products
                            </h2>

                        </div>

                        <div class="slider__handler">
                            <div class="slider__navigation ">
                                <div class="slider__arrows">
                                    <button class="button button--icon button--icon-border slider__nav-button slider__prev" type="button" aria-label="Previous slide">
                                        <svg class="icon button__icon slider__nav-icon" role="img">
                                            <use href="/images/icons-sprite.svg#arrow-left"></use>
                                        </svg>

                                    </button>

                                    <button class="button button--icon button--icon-border slider__nav-button slider__next" type="button" aria-label="Next slide">
                                        <svg class="icon button__icon slider__nav-icon" role="img">
                                            <use href="/images/icons-sprite.svg#arrow-right"></use>
                                        </svg>

                                    </button>

                                </div>
                            </div>
                            <div class="slider__container">
                                <div class="slider__slides">
                                    <div class="
                            slider__item
                            slider__slide-item
                        ">
                                        <div class="product-grid-item product-grid-item--slider-item" tabindex="0">
                                            <a href="#" class="product-grid-item__link" tabindex="-1">
                                                <div class="badges product-grid-item__badges">
                                                    <div class="badge ">
                                                        -15%
                                                    </div>

                                                    <div class="badge badge--new">
                                                        New
                                                    </div>

                                                </div>

                                                <div class="lazyload-wrapper product-grid-item__image-wrapper">
                                                    <img class="
            image
            lazyload
            
        " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII&#x3D;" data-src="/images/product/product-368_552.jpg" alt="image alt text">
                                                </div>

                                            </a>

                                            <section class="product-grid-item__details">
                                                <div class="rating product-grid-item__rating rating--secondary" aria-label="Average rating: 72%" title="Average rating: 72%" tabindex="0">
                                                    <div class="rating__star " role="presentation" style="width: 72%">
                                                        <span class="
                rating__indicator
                
            "></span>
                                                    </div>
                                                </div>

                                                <h2 class="product-grid-item__name">
                                                    <a href="#" class="product-grid-item__name-link">
                                                        Long product name can have maximum 50 caractere...
                                                    </a>
                                                </h2>
                                                <div class="swatch__container swatch__container--catalog">
                                                    <div class="swatch ">

                                                        <div class="swatch__wrapper" aria-label="Color" tabindex="0" aria-activedescendant="opt-color-red-3" aria-required="true" role="listbox" aria-invalid="false">
                                                            <div class="swatch__option-container " id="opt-color-orange-1" aria-label="Orange" tabindex="0" role="option" aria-selected="false">
                                                                <div class="swatch__option " style="background-color: #ffa500">

                                                                </div>
                                                            </div>
                                                            <div class="swatch__option-container " id="opt-color-green-2" aria-label="Green" tabindex="0" role="option" aria-selected="false">
                                                                <div class="swatch__option " style="background-color: #00ff00">

                                                                </div>
                                                            </div>
                                                            <div class="swatch__option-container selected" id="opt-color-red-3" aria-label="Red" tabindex="0" role="option" aria-selected="true">
                                                                <div class="swatch__option " style="background-color: #ff0000">

                                                                </div>
                                                            </div>
                                                            <div class="swatch__option-container " id="opt-color-black-4" aria-label="White" tabindex="0" role="option" aria-selected="false">
                                                                <div class="swatch__option " style="background-color: #000000">

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

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

                                                </div>

                                                <div class="product-grid-item__details-bottom">
                                                    <div class="product-grid-item__price ">
                                                        <div class="price ">
                                                            <span class="price__value ">
                                                                $
                                                                1 400

                                                            </span>
                                                        </div>

                                                    </div>

                                                    <div class="product-grid-item__actions ">
                                                        <div class="product-grid-item__secondary-action">
                                                            <button class="button button--icon add-to-wishlist" type="button" aria-label="Add to Wish List">
                                                                <svg class="icon button__icon" role="presentation" focusable="false">
                                                                    <title>Heart</title>
                                                                    <use href="/images/icons-sprite.svg#heart"></use>
                                                                </svg>

                                                            </button>

                                                            <button class="button button--icon " type="button" aria-label="Add to compare">
                                                                <svg class="icon button__icon" role="presentation" focusable="false">
                                                                    <title>Compare</title>
                                                                    <use href="/images/icons-sprite.svg#compare"></use>
                                                                </svg>

                                                            </button>

                                                        </div>

                                                        <form action="#" class="product-grid-item__primary-action">
                                                            <button class="button button--add-to button--add-to" type="submit" aria-label="Add to cart">
                                                                <span class="button__text ">
                                                                    Add to cart
                                                                </span>

                                                                <svg class="icon button__icon" role="presentation" focusable="false">
                                                                    <title>Add to cart</title>
                                                                    <use href="/images/icons-sprite.svg#shopping-cart"></use>
                                                                </svg>

                                                            </button>

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

                                    </div>
                                    <div class="
                            slider__item
                            slider__slide-item
                        ">
                                        <div class="product-grid-item product-grid-item--slider-item" tabindex="0">
                                            <a href="#" class="product-grid-item__link" tabindex="-1">
                                                <div class="badges product-grid-item__badges">
                                                    <div class="badge ">
                                                        -15%
                                                    </div>

                                                    <div class="badge badge--new">
                                                        New
                                                    </div>

                                                </div>

                                                <div class="lazyload-wrapper product-grid-item__image-wrapper">
                                                    <img class="
            image
            lazyload
            
        " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII&#x3D;" data-src="/images/product/product-368_552.jpg" alt="image alt text">
                                                </div>

                                            </a>

                                            <section class="product-grid-item__details">
                                                <div class="rating product-grid-item__rating rating--secondary" aria-label="Average rating: 72%" title="Average rating: 72%" tabindex="0">
                                                    <div class="rating__star " role="presentation" style="width: 72%">
                                                        <span class="
                rating__indicator
                
            "></span>
                                                    </div>
                                                </div>

                                                <h2 class="product-grid-item__name">
                                                    <a href="#" class="product-grid-item__name-link">
                                                        Long product name can have maximum 50 caractere...
                                                    </a>
                                                </h2>
                                                <div class="swatch__container swatch__container--catalog">
                                                    <div class="swatch ">

                                                        <div class="swatch__wrapper" aria-label="Color" tabindex="0" aria-activedescendant="opt-color-red-3" aria-required="true" role="listbox" aria-invalid="false">
                                                            <div class="swatch__option-container " id="opt-color-orange-1" aria-label="Orange" tabindex="0" role="option" aria-selected="false">
                                                                <div class="swatch__option " style="background-color: #ffa500">

                                                                </div>
                                                            </div>
                                                            <div class="swatch__option-container " id="opt-color-green-2" aria-label="Green" tabindex="0" role="option" aria-selected="false">
                                                                <div class="swatch__option " style="background-color: #00ff00">

                                                                </div>
                                                            </div>
                                                            <div class="swatch__option-container selected" id="opt-color-red-3" aria-label="Red" tabindex="0" role="option" aria-selected="true">
                                                                <div class="swatch__option " style="background-color: #ff0000">

                                                                </div>
                                                            </div>
                                                            <div class="swatch__option-container " id="opt-color-black-4" aria-label="White" tabindex="0" role="option" aria-selected="false">
                                                                <div class="swatch__option " style="background-color: #000000">

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

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

                                                </div>

                                                <div class="product-grid-item__details-bottom">
                                                    <div class="product-grid-item__price ">
                                                        <div class="price ">
                                                            <span class="price__value ">
                                                                $
                                                                1 400

                                                            </span>
                                                        </div>

                                                    </div>

                                                    <div class="product-grid-item__actions ">
                                                        <div class="product-grid-item__secondary-action">
                                                            <button class="button button--icon add-to-wishlist" type="button" aria-label="Add to Wish List">
                                                                <svg class="icon button__icon" role="presentation" focusable="false">
                                                                    <title>Heart</title>
                                                                    <use href="/images/icons-sprite.svg#heart"></use>
                                                                </svg>

                                                            </button>

                                                            <button class="button button--icon " type="button" aria-label="Add to compare">
                                                                <svg class="icon button__icon" role="presentation" focusable="false">
                                                                    <title>Compare</title>
                                                                    <use href="/images/icons-sprite.svg#compare"></use>
                                                                </svg>

                                                            </button>

                                                        </div>

                                                        <form action="#" class="product-grid-item__primary-action">
                                                            <button class="button button--add-to button--add-to" type="submit" aria-label="Add to cart">
                                                                <span class="button__text ">
                                                                    Add to cart
                                                                </span>

                                                                <svg class="icon button__icon" role="presentation" focusable="false">
                                                                    <title>Add to cart</title>
                                                                    <use href="/images/icons-sprite.svg#shopping-cart"></use>
                                                                </svg>

                                                            </button>

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

                                    </div>
                                    <div class="
                            slider__item
                            slider__slide-item
                        ">
                                        <div class="product-grid-item product-grid-item--slider-item" tabindex="0">
                                            <a href="#" class="product-grid-item__link" tabindex="-1">
                                                <div class="badges product-grid-item__badges">
                                                    <div class="badge ">
                                                        -15%
                                                    </div>

                                                    <div class="badge badge--new">
                                                        New
                                                    </div>

                                                </div>

                                                <div class="lazyload-wrapper product-grid-item__image-wrapper">
                                                    <img class="
            image
            lazyload
            
        " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII&#x3D;" data-src="/images/product/product-368_552.jpg" alt="image alt text">
                                                </div>

                                            </a>

                                            <section class="product-grid-item__details">
                                                <div class="rating product-grid-item__rating rating--secondary" aria-label="Average rating: 72%" title="Average rating: 72%" tabindex="0">
                                                    <div class="rating__star " role="presentation" style="width: 72%">
                                                        <span class="
                rating__indicator
                
            "></span>
                                                    </div>
                                                </div>

                                                <h2 class="product-grid-item__name">
                                                    <a href="#" class="product-grid-item__name-link">
                                                        Some product name Lorem Ipsum Dolor sit
                                                    </a>
                                                </h2>
                                                <div class="swatch__container swatch__container--catalog">
                                                    <div class="swatch ">

                                                        <div class="swatch__wrapper" aria-label="Color" tabindex="0" aria-activedescendant="opt-color-red-3" aria-required="true" role="listbox" aria-invalid="false">
                                                            <div class="swatch__option-container " id="opt-color-orange-1" aria-label="Orange" tabindex="0" role="option" aria-selected="false">
                                                                <div class="swatch__option " style="background-color: #ffa500">

                                                                </div>
                                                            </div>
                                                            <div class="swatch__option-container " id="opt-color-green-2" aria-label="Green" tabindex="0" role="option" aria-selected="false">
                                                                <div class="swatch__option " style="background-color: #00ff00">

                                                                </div>
                                                            </div>
                                                            <div class="swatch__option-container selected" id="opt-color-red-3" aria-label="Red" tabindex="0" role="option" aria-selected="true">
                                                                <div class="swatch__option " style="background-color: #ff0000">

                                                                </div>
                                                            </div>
                                                            <div class="swatch__option-container " id="opt-color-black-4" aria-label="White" tabindex="0" role="option" aria-selected="false">
                                                                <div class="swatch__option " style="background-color: #000000">

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

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

                                                </div>

                                                <div class="product-grid-item__details-bottom">
                                                    <div class="product-grid-item__price ">
                                                        <div class="price ">
                                                            <span class="price__value ">
                                                                $
                                                                1 400

                                                            </span>
                                                        </div>

                                                    </div>

                                                    <div class="product-grid-item__actions ">
                                                        <div class="product-grid-item__secondary-action">
                                                            <button class="button button--icon add-to-wishlist" type="button" aria-label="Add to Wish List">
                                                                <svg class="icon button__icon" role="presentation" focusable="false">
                                                                    <title>Heart</title>
                                                                    <use href="/images/icons-sprite.svg#heart"></use>
                                                                </svg>

                                                            </button>

                                                            <button class="button button--icon " type="button" aria-label="Add to compare">
                                                                <svg class="icon button__icon" role="presentation" focusable="false">
                                                                    <title>Compare</title>
                                                                    <use href="/images/icons-sprite.svg#compare"></use>
                                                                </svg>

                                                            </button>

                                                        </div>

                                                        <form action="#" class="product-grid-item__primary-action">
                                                            <button class="button button--add-to button--add-to" type="submit" aria-label="Add to cart">
                                                                <span class="button__text ">
                                                                    Add to cart
                                                                </span>

                                                                <svg class="icon button__icon" role="presentation" focusable="false">
                                                                    <title>Add to cart</title>
                                                                    <use href="/images/icons-sprite.svg#shopping-cart"></use>
                                                                </svg>

                                                            </button>

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

                                    </div>
                                    <div class="
                            slider__item
                            slider__slide-item
                        ">
                                        <div class="product-grid-item product-grid-item--slider-item" tabindex="0">
                                            <a href="#" class="product-grid-item__link" tabindex="-1">
                                                <div class="badges product-grid-item__badges">
                                                    <div class="badge ">
                                                        -15%
                                                    </div>

                                                    <div class="badge badge--new">
                                                        New
                                                    </div>

                                                </div>

                                                <div class="lazyload-wrapper product-grid-item__image-wrapper">
                                                    <img class="
            image
            lazyload
            
        " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII&#x3D;" data-src="/images/product/product-368_552.jpg" alt="image alt text">
                                                </div>

                                            </a>

                                            <section class="product-grid-item__details">
                                                <div class="rating product-grid-item__rating rating--secondary" aria-label="Average rating: 72%" title="Average rating: 72%" tabindex="0">
                                                    <div class="rating__star " role="presentation" style="width: 72%">
                                                        <span class="
                rating__indicator
                
            "></span>
                                                    </div>
                                                </div>

                                                <h2 class="product-grid-item__name">
                                                    <a href="#" class="product-grid-item__name-link">
                                                        Some product name
                                                    </a>
                                                </h2>
                                                <div class="swatch__container swatch__container--catalog">
                                                    <div class="swatch ">

                                                        <div class="swatch__wrapper" aria-label="Color" tabindex="0" aria-activedescendant="opt-color-red-3" aria-required="true" role="listbox" aria-invalid="false">
                                                            <div class="swatch__option-container " id="opt-color-orange-1" aria-label="Orange" tabindex="0" role="option" aria-selected="false">
                                                                <div class="swatch__option " style="background-color: #ffa500">

                                                                </div>
                                                            </div>
                                                            <div class="swatch__option-container " id="opt-color-green-2" aria-label="Green" tabindex="0" role="option" aria-selected="false">
                                                                <div class="swatch__option " style="background-color: #00ff00">

                                                                </div>
                                                            </div>
                                                            <div class="swatch__option-container selected" id="opt-color-red-3" aria-label="Red" tabindex="0" role="option" aria-selected="true">
                                                                <div class="swatch__option " style="background-color: #ff0000">

                                                                </div>
                                                            </div>
                                                            <div class="swatch__option-container " id="opt-color-black-4" aria-label="White" tabindex="0" role="option" aria-selected="false">
                                                                <div class="swatch__option " style="background-color: #000000">

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

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

                                                </div>

                                                <div class="product-grid-item__details-bottom">
                                                    <div class="product-grid-item__price ">
                                                        <div class="price  ">
                                                            <span class="price__value price__value--old ">
                                                                <del aria-label="Price reduced from: $1000.00">
                                                                    $
                                                                    1000.00

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

                                                                    $

                                                                    899.99

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

                                                    </div>

                                                    <div class="product-grid-item__actions ">
                                                        <div class="product-grid-item__secondary-action">
                                                            <button class="button button--icon add-to-wishlist" type="button" aria-label="Add to Wish List">
                                                                <svg class="icon button__icon" role="presentation" focusable="false">
                                                                    <title>Heart</title>
                                                                    <use href="/images/icons-sprite.svg#heart"></use>
                                                                </svg>

                                                            </button>

                                                            <button class="button button--icon " type="button" aria-label="Add to compare">
                                                                <svg class="icon button__icon" role="presentation" focusable="false">
                                                                    <title>Compare</title>
                                                                    <use href="/images/icons-sprite.svg#compare"></use>
                                                                </svg>

                                                            </button>

                                                        </div>

                                                        <form action="#" class="product-grid-item__primary-action">
                                                            <button class="button button--add-to button--add-to" type="submit" aria-label="Add to cart">
                                                                <span class="button__text ">
                                                                    Add to cart
                                                                </span>

                                                                <svg class="icon button__icon" role="presentation" focusable="false">
                                                                    <title>Add to cart</title>
                                                                    <use href="/images/icons-sprite.svg#shopping-cart"></use>
                                                                </svg>

                                                            </button>

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

                                    </div>
                                    <div class="
                            slider__item
                            slider__slide-item
                        ">
                                        <div class="product-grid-item product-grid-item--slider-item" tabindex="0">
                                            <a href="#" class="product-grid-item__link" tabindex="-1">
                                                <div class="badges product-grid-item__badges">
                                                    <div class="badge ">
                                                        -15%
                                                    </div>

                                                    <div class="badge badge--new">
                                                        New
                                                    </div>

                                                </div>

                                                <div class="lazyload-wrapper product-grid-item__image-wrapper">
                                                    <img class="
            image
            lazyload
            
        " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII&#x3D;" data-src="/images/product/product-368_552.jpg" alt="image alt text">
                                                </div>

                                            </a>

                                            <section class="product-grid-item__details">
                                                <div class="rating product-grid-item__rating rating--secondary" aria-label="Average rating: 72%" title="Average rating: 72%" tabindex="0">
                                                    <div class="rating__star " role="presentation" style="width: 72%">
                                                        <span class="
                rating__indicator
                
            "></span>
                                                    </div>
                                                </div>

                                                <h2 class="product-grid-item__name">
                                                    <a href="#" class="product-grid-item__name-link">
                                                        Long product name can have maximum 50 caractere...
                                                    </a>
                                                </h2>
                                                <div class="swatch__container swatch__container--catalog">
                                                    <div class="swatch ">

                                                        <div class="swatch__wrapper" aria-label="Color" tabindex="0" aria-activedescendant="opt-color-red-3" aria-required="true" role="listbox" aria-invalid="false">
                                                            <div class="swatch__option-container " id="opt-color-orange-1" aria-label="Orange" tabindex="0" role="option" aria-selected="false">
                                                                <div class="swatch__option " style="background-color: #ffa500">

                                                                </div>
                                                            </div>
                                                            <div class="swatch__option-container " id="opt-color-green-2" aria-label="Green" tabindex="0" role="option" aria-selected="false">
                                                                <div class="swatch__option " style="background-color: #00ff00">

                                                                </div>
                                                            </div>
                                                            <div class="swatch__option-container selected" id="opt-color-red-3" aria-label="Red" tabindex="0" role="option" aria-selected="true">
                                                                <div class="swatch__option " style="background-color: #ff0000">

                                                                </div>
                                                            </div>
                                                            <div class="swatch__option-container " id="opt-color-black-4" aria-label="White" tabindex="0" role="option" aria-selected="false">
                                                                <div class="swatch__option " style="background-color: #000000">

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

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

                                                </div>

                                                <div class="product-grid-item__details-bottom">
                                                    <div class="product-grid-item__price ">
                                                        <div class="price ">
                                                            <span class="price__value ">
                                                                $
                                                                1 400

                                                            </span>
                                                        </div>

                                                    </div>

                                                    <div class="product-grid-item__actions ">
                                                        <div class="product-grid-item__secondary-action">
                                                            <button class="button button--icon add-to-wishlist" type="button" aria-label="Add to Wish List">
                                                                <svg class="icon button__icon" role="presentation" focusable="false">
                                                                    <title>Heart</title>
                                                                    <use href="/images/icons-sprite.svg#heart"></use>
                                                                </svg>

                                                            </button>

                                                            <button class="button button--icon " type="button" aria-label="Add to compare">
                                                                <svg class="icon button__icon" role="presentation" focusable="false">
                                                                    <title>Compare</title>
                                                                    <use href="/images/icons-sprite.svg#compare"></use>
                                                                </svg>

                                                            </button>

                                                        </div>

                                                        <form action="#" class="product-grid-item__primary-action">
                                                            <button class="button button--add-to button--add-to" type="submit" aria-label="Add to cart">
                                                                <span class="button__text ">
                                                                    Add to cart
                                                                </span>

                                                                <svg class="icon button__icon" role="presentation" focusable="false">
                                                                    <title>Add to cart</title>
                                                                    <use href="/images/icons-sprite.svg#shopping-cart"></use>
                                                                </svg>

                                                            </button>

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

                                    </div>
                                    <div class="
                            slider__item
                            slider__slide-item
                        ">
                                        <div class="product-grid-item product-grid-item--slider-item" tabindex="0">
                                            <a href="#" class="product-grid-item__link" tabindex="-1">
                                                <div class="badges product-grid-item__badges">
                                                    <div class="badge ">
                                                        -15%
                                                    </div>

                                                    <div class="badge badge--new">
                                                        New
                                                    </div>

                                                </div>

                                                <div class="lazyload-wrapper product-grid-item__image-wrapper">
                                                    <img class="
            image
            lazyload
            
        " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII&#x3D;" data-src="/images/product/product-368_552.jpg" alt="image alt text">
                                                </div>

                                            </a>

                                            <section class="product-grid-item__details">
                                                <div class="rating product-grid-item__rating rating--secondary" aria-label="Average rating: 72%" title="Average rating: 72%" tabindex="0">
                                                    <div class="rating__star " role="presentation" style="width: 72%">
                                                        <span class="
                rating__indicator
                
            "></span>
                                                    </div>
                                                </div>

                                                <h2 class="product-grid-item__name">
                                                    <a href="#" class="product-grid-item__name-link">
                                                        Some product name
                                                    </a>
                                                </h2>
                                                <div class="swatch__container swatch__container--catalog">
                                                    <div class="swatch ">

                                                        <div class="swatch__wrapper" aria-label="Color" tabindex="0" aria-activedescendant="opt-color-red-3" aria-required="true" role="listbox" aria-invalid="false">
                                                            <div class="swatch__option-container " id="opt-color-orange-1" aria-label="Orange" tabindex="0" role="option" aria-selected="false">
                                                                <div class="swatch__option " style="background-color: #ffa500">

                                                                </div>
                                                            </div>
                                                            <div class="swatch__option-container " id="opt-color-green-2" aria-label="Green" tabindex="0" role="option" aria-selected="false">
                                                                <div class="swatch__option " style="background-color: #00ff00">

                                                                </div>
                                                            </div>
                                                            <div class="swatch__option-container selected" id="opt-color-red-3" aria-label="Red" tabindex="0" role="option" aria-selected="true">
                                                                <div class="swatch__option " style="background-color: #ff0000">

                                                                </div>
                                                            </div>
                                                            <div class="swatch__option-container " id="opt-color-black-4" aria-label="White" tabindex="0" role="option" aria-selected="false">
                                                                <div class="swatch__option " style="background-color: #000000">

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

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

                                                </div>

                                                <div class="product-grid-item__details-bottom">
                                                    <div class="product-grid-item__price ">
                                                        <div class="price  ">
                                                            <span class="price__value price__value--old product-grid-item__old-price">
                                                                <del aria-label="Price reduced from: $1000.00">
                                                                    $
                                                                    1000.00

                                                                </del>
                                                            </span>
                                                            <span class="price__value price__value--special product-grid-item__special-price">
                                                                <ins aria-label="On sale at: $899.99">

                                                                    $

                                                                    899.99

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

                                                    </div>

                                                    <div class="product-grid-item__actions ">
                                                        <div class="product-grid-item__secondary-action">
                                                            <button class="button button--icon add-to-wishlist" type="button" aria-label="Add to Wish List">
                                                                <svg class="icon button__icon" role="presentation" focusable="false">
                                                                    <title>Heart</title>
                                                                    <use href="/images/icons-sprite.svg#heart"></use>
                                                                </svg>

                                                            </button>

                                                            <button class="button button--icon " type="button" aria-label="Add to compare">
                                                                <svg class="icon button__icon" role="presentation" focusable="false">
                                                                    <title>Compare</title>
                                                                    <use href="/images/icons-sprite.svg#compare"></use>
                                                                </svg>

                                                            </button>

                                                        </div>

                                                        <form action="#" class="product-grid-item__primary-action">
                                                            <button class="button button--add-to button--add-to" type="submit" aria-label="Add to cart">
                                                                <span class="button__text ">
                                                                    Add to cart
                                                                </span>

                                                                <svg class="icon button__icon" role="presentation" focusable="false">
                                                                    <title>Add to cart</title>
                                                                    <use href="/images/icons-sprite.svg#shopping-cart"></use>
                                                                </svg>

                                                            </button>

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

                                    </div>
                                    <div class="
                            slider__item
                            slider__slide-item
                        ">
                                        <div class="product-grid-item product-grid-item--slider-item" tabindex="0">
                                            <a href="#" class="product-grid-item__link" tabindex="-1">
                                                <div class="badges product-grid-item__badges">
                                                    <div class="badge ">
                                                        -15%
                                                    </div>

                                                    <div class="badge badge--new">
                                                        New
                                                    </div>

                                                </div>

                                                <div class="lazyload-wrapper product-grid-item__image-wrapper">
                                                    <img class="
            image
            lazyload
            
        " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII&#x3D;" data-src="/images/product/product-368_552.jpg" alt="image alt text">
                                                </div>

                                            </a>

                                            <section class="product-grid-item__details">
                                                <div class="rating product-grid-item__rating rating--secondary" aria-label="Average rating: 72%" title="Average rating: 72%" tabindex="0">
                                                    <div class="rating__star " role="presentation" style="width: 72%">
                                                        <span class="
                rating__indicator
                
            "></span>
                                                    </div>
                                                </div>

                                                <h2 class="product-grid-item__name">
                                                    <a href="#" class="product-grid-item__name-link">
                                                        Long product name can have maximum 50 caractere...
                                                    </a>
                                                </h2>
                                                <div class="swatch__container swatch__container--catalog">
                                                    <div class="swatch ">

                                                        <div class="swatch__wrapper" aria-label="Color" tabindex="0" aria-activedescendant="opt-color-red-3" aria-required="true" role="listbox" aria-invalid="false">
                                                            <div class="swatch__option-container " id="opt-color-orange-1" aria-label="Orange" tabindex="0" role="option" aria-selected="false">
                                                                <div class="swatch__option " style="background-color: #ffa500">

                                                                </div>
                                                            </div>
                                                            <div class="swatch__option-container " id="opt-color-green-2" aria-label="Green" tabindex="0" role="option" aria-selected="false">
                                                                <div class="swatch__option " style="background-color: #00ff00">

                                                                </div>
                                                            </div>
                                                            <div class="swatch__option-container selected" id="opt-color-red-3" aria-label="Red" tabindex="0" role="option" aria-selected="true">
                                                                <div class="swatch__option " style="background-color: #ff0000">

                                                                </div>
                                                            </div>
                                                            <div class="swatch__option-container " id="opt-color-black-4" aria-label="White" tabindex="0" role="option" aria-selected="false">
                                                                <div class="swatch__option " style="background-color: #000000">

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

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

                                                </div>

                                                <div class="product-grid-item__details-bottom">
                                                    <div class="product-grid-item__price ">
                                                        <div class="price ">
                                                            <span class="price__value ">
                                                                $
                                                                1 400

                                                            </span>
                                                        </div>

                                                    </div>

                                                    <div class="product-grid-item__actions ">
                                                        <div class="product-grid-item__secondary-action">
                                                            <button class="button button--icon add-to-wishlist" type="button" aria-label="Add to Wish List">
                                                                <svg class="icon button__icon" role="presentation" focusable="false">
                                                                    <title>Heart</title>
                                                                    <use href="/images/icons-sprite.svg#heart"></use>
                                                                </svg>

                                                            </button>

                                                            <button class="button button--icon " type="button" aria-label="Add to compare">
                                                                <svg class="icon button__icon" role="presentation" focusable="false">
                                                                    <title>Compare</title>
                                                                    <use href="/images/icons-sprite.svg#compare"></use>
                                                                </svg>

                                                            </button>

                                                        </div>

                                                        <form action="#" class="product-grid-item__primary-action">
                                                            <button class="button button--add-to button--add-to" type="submit" aria-label="Add to cart">
                                                                <span class="button__text ">
                                                                    Add to cart
                                                                </span>

                                                                <svg class="icon button__icon" role="presentation" focusable="false">
                                                                    <title>Add to cart</title>
                                                                    <use href="/images/icons-sprite.svg#shopping-cart"></use>
                                                                </svg>

                                                            </button>

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

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

                    </div>

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

                </div>
            </section>

            <section class="section ">
                <div class="section__content ">
                    <div class="teaser teaser--secondary">
                        <picture class="image teaser__image">
                            <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/home/teaser/teaser-medium-girl_376-432.jpg" media="(max-width: 768px)" />
                            <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/home/teaser/teaser-medium-girl_472-432.jpg" media="(max-width: 1024px)" />
                            <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/home/teaser/teaser-large-girl_1328-1200.jpg" media="" />

                            <img class="lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/home/teaser/teaser-small-girl_768-768.jpg" alt="Teaser girl image" />
                        </picture>

                        <div class="teaser__content">
                            <div class="teaser__content-block">
                                <div class="content-block ">
                                    <div class="content-block__row row">
                                        <div class="content-block__column col-xs-12">
                                            <h2 class="content-block__heading">
                                                Lorem ipsum
                                            </h2>

                                            <div class="paragraph content-block__description">
                                                <span>
                                                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text
                                                </span>
                                            </div>

                                            <a class="link content-block__link" href="#" title="Title">
                                                Link
                                            </a>

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

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

                </div>
            </section>

            <section class="section ">
                <div class="section__content section__content--products">
                    <div class="slider slider--products" data-mobile-first="true" data-infinite="false" data-center-mode="false" data-dots="true" data-autoplay="false" data-autoplay-speed="3000" data-pause-on-focus="true" data-pause-on-hover="true" data-slides-to-show="2" data-slides-to-scroll="1" data-swipe-to-slide="true" data-element-slides=".slider__slides" data-dots-class="slider__dots" data-loading-class="slider--loading" data-loader-visible-class="loader--visible" data-element-slide=".slider__item" data-element-loader=".loader" data-element-nav-prev=".slider__prev" data-element-nav-next=".slider__next" data-responsive-config='[{"breakpoint": 767, "settings": {"slidesToShow": 3, "slidesToScroll": 1, "dots": false}}, {"breakpoint": 1023, "settings": {"slidesToShow": 4, "slidesToScroll": 1, "dots": false}}]'>
                        <div class="loader loader--visible" aria-live="polite" aria-label="Do not refresh the page">
                            <div class="loader__icon"></div>
                        </div>

                        <div class="slider__heading ">
                            <h2 class="heading--first-level margin-0">
                                New products
                            </h2>

                        </div>

                        <div class="slider__handler">
                            <div class="slider__navigation ">
                                <div class="slider__arrows">
                                    <button class="button button--icon button--icon-border slider__nav-button slider__prev" type="button" aria-label="Previous slide">
                                        <svg class="icon button__icon slider__nav-icon" role="img">
                                            <use href="/images/icons-sprite.svg#arrow-left"></use>
                                        </svg>

                                    </button>

                                    <button class="button button--icon button--icon-border slider__nav-button slider__next" type="button" aria-label="Next slide">
                                        <svg class="icon button__icon slider__nav-icon" role="img">
                                            <use href="/images/icons-sprite.svg#arrow-right"></use>
                                        </svg>

                                    </button>

                                </div>
                            </div>
                            <div class="slider__container">
                                <div class="slider__slides">
                                    <div class="
                            slider__item
                            slider__slide-item
                        ">
                                        <div class="product-grid-item product-grid-item--slider-item" tabindex="0">
                                            <a href="#" class="product-grid-item__link" tabindex="-1">
                                                <div class="badges product-grid-item__badges">
                                                    <div class="badge ">
                                                        -15%
                                                    </div>

                                                    <div class="badge badge--new">
                                                        New
                                                    </div>

                                                </div>

                                                <div class="lazyload-wrapper product-grid-item__image-wrapper">
                                                    <img class="
            image
            lazyload
            
        " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII&#x3D;" data-src="/images/product/product-368_552.jpg" alt="image alt text">
                                                </div>

                                            </a>

                                            <section class="product-grid-item__details">
                                                <div class="rating product-grid-item__rating rating--secondary" aria-label="Average rating: 72%" title="Average rating: 72%" tabindex="0">
                                                    <div class="rating__star " role="presentation" style="width: 72%">
                                                        <span class="
                rating__indicator
                
            "></span>
                                                    </div>
                                                </div>

                                                <h2 class="product-grid-item__name">
                                                    <a href="#" class="product-grid-item__name-link">
                                                        Long product name can have maximum 50 caractere...
                                                    </a>
                                                </h2>
                                                <div class="swatch__container swatch__container--catalog">
                                                    <div class="swatch ">

                                                        <div class="swatch__wrapper" aria-label="Color" tabindex="0" aria-activedescendant="opt-color-red-3" aria-required="true" role="listbox" aria-invalid="false">
                                                            <div class="swatch__option-container " id="opt-color-orange-1" aria-label="Orange" tabindex="0" role="option" aria-selected="false">
                                                                <div class="swatch__option " style="background-color: #ffa500">

                                                                </div>
                                                            </div>
                                                            <div class="swatch__option-container " id="opt-color-green-2" aria-label="Green" tabindex="0" role="option" aria-selected="false">
                                                                <div class="swatch__option " style="background-color: #00ff00">

                                                                </div>
                                                            </div>
                                                            <div class="swatch__option-container selected" id="opt-color-red-3" aria-label="Red" tabindex="0" role="option" aria-selected="true">
                                                                <div class="swatch__option " style="background-color: #ff0000">

                                                                </div>
                                                            </div>
                                                            <div class="swatch__option-container " id="opt-color-black-4" aria-label="White" tabindex="0" role="option" aria-selected="false">
                                                                <div class="swatch__option " style="background-color: #000000">

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

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

                                                </div>

                                                <div class="product-grid-item__details-bottom">
                                                    <div class="product-grid-item__price ">
                                                        <div class="price ">
                                                            <span class="price__value ">
                                                                $
                                                                1 400

                                                            </span>
                                                        </div>

                                                    </div>

                                                    <div class="product-grid-item__actions ">
                                                        <div class="product-grid-item__secondary-action">
                                                            <button class="button button--icon add-to-wishlist" type="button" aria-label="Add to Wish List">
                                                                <svg class="icon button__icon" role="presentation" focusable="false">
                                                                    <title>Heart</title>
                                                                    <use href="/images/icons-sprite.svg#heart"></use>
                                                                </svg>

                                                            </button>

                                                            <button class="button button--icon " type="button" aria-label="Add to compare">
                                                                <svg class="icon button__icon" role="presentation" focusable="false">
                                                                    <title>Compare</title>
                                                                    <use href="/images/icons-sprite.svg#compare"></use>
                                                                </svg>

                                                            </button>

                                                        </div>

                                                        <form action="#" class="product-grid-item__primary-action">
                                                            <button class="button button--add-to button--add-to" type="submit" aria-label="Add to cart">
                                                                <span class="button__text ">
                                                                    Add to cart
                                                                </span>

                                                                <svg class="icon button__icon" role="presentation" focusable="false">
                                                                    <title>Add to cart</title>
                                                                    <use href="/images/icons-sprite.svg#shopping-cart"></use>
                                                                </svg>

                                                            </button>

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

                                    </div>
                                    <div class="
                            slider__item
                            slider__slide-item
                        ">
                                        <div class="product-grid-item product-grid-item--slider-item" tabindex="0">
                                            <a href="#" class="product-grid-item__link" tabindex="-1">
                                                <div class="badges product-grid-item__badges">
                                                    <div class="badge ">
                                                        -15%
                                                    </div>

                                                    <div class="badge badge--new">
                                                        New
                                                    </div>

                                                </div>

                                                <div class="lazyload-wrapper product-grid-item__image-wrapper">
                                                    <img class="
            image
            lazyload
            
        " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII&#x3D;" data-src="/images/product/product-368_552.jpg" alt="image alt text">
                                                </div>

                                            </a>

                                            <section class="product-grid-item__details">
                                                <div class="rating product-grid-item__rating rating--secondary" aria-label="Average rating: 72%" title="Average rating: 72%" tabindex="0">
                                                    <div class="rating__star " role="presentation" style="width: 72%">
                                                        <span class="
                rating__indicator
                
            "></span>
                                                    </div>
                                                </div>

                                                <h2 class="product-grid-item__name">
                                                    <a href="#" class="product-grid-item__name-link">
                                                        Long product name can have maximum 50 caractere...
                                                    </a>
                                                </h2>
                                                <div class="swatch__container swatch__container--catalog">
                                                    <div class="swatch ">

                                                        <div class="swatch__wrapper" aria-label="Color" tabindex="0" aria-activedescendant="opt-color-red-3" aria-required="true" role="listbox" aria-invalid="false">
                                                            <div class="swatch__option-container " id="opt-color-orange-1" aria-label="Orange" tabindex="0" role="option" aria-selected="false">
                                                                <div class="swatch__option " style="background-color: #ffa500">

                                                                </div>
                                                            </div>
                                                            <div class="swatch__option-container " id="opt-color-green-2" aria-label="Green" tabindex="0" role="option" aria-selected="false">
                                                                <div class="swatch__option " style="background-color: #00ff00">

                                                                </div>
                                                            </div>
                                                            <div class="swatch__option-container selected" id="opt-color-red-3" aria-label="Red" tabindex="0" role="option" aria-selected="true">
                                                                <div class="swatch__option " style="background-color: #ff0000">

                                                                </div>
                                                            </div>
                                                            <div class="swatch__option-container " id="opt-color-black-4" aria-label="White" tabindex="0" role="option" aria-selected="false">
                                                                <div class="swatch__option " style="background-color: #000000">

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

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

                                                </div>

                                                <div class="product-grid-item__details-bottom">
                                                    <div class="product-grid-item__price ">
                                                        <div class="price ">
                                                            <span class="price__value ">
                                                                $
                                                                1 400

                                                            </span>
                                                        </div>

                                                    </div>

                                                    <div class="product-grid-item__actions ">
                                                        <div class="product-grid-item__secondary-action">
                                                            <button class="button button--icon add-to-wishlist" type="button" aria-label="Add to Wish List">
                                                                <svg class="icon button__icon" role="presentation" focusable="false">
                                                                    <title>Heart</title>
                                                                    <use href="/images/icons-sprite.svg#heart"></use>
                                                                </svg>

                                                            </button>

                                                            <button class="button button--icon " type="button" aria-label="Add to compare">
                                                                <svg class="icon button__icon" role="presentation" focusable="false">
                                                                    <title>Compare</title>
                                                                    <use href="/images/icons-sprite.svg#compare"></use>
                                                                </svg>

                                                            </button>

                                                        </div>

                                                        <form action="#" class="product-grid-item__primary-action">
                                                            <button class="button button--add-to button--add-to" type="submit" aria-label="Add to cart">
                                                                <span class="button__text ">
                                                                    Add to cart
                                                                </span>

                                                                <svg class="icon button__icon" role="presentation" focusable="false">
                                                                    <title>Add to cart</title>
                                                                    <use href="/images/icons-sprite.svg#shopping-cart"></use>
                                                                </svg>

                                                            </button>

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

                                    </div>
                                    <div class="
                            slider__item
                            slider__slide-item
                        ">
                                        <div class="product-grid-item product-grid-item--slider-item" tabindex="0">
                                            <a href="#" class="product-grid-item__link" tabindex="-1">
                                                <div class="badges product-grid-item__badges">
                                                    <div class="badge ">
                                                        -15%
                                                    </div>

                                                    <div class="badge badge--new">
                                                        New
                                                    </div>

                                                </div>

                                                <div class="lazyload-wrapper product-grid-item__image-wrapper">
                                                    <img class="
            image
            lazyload
            
        " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII&#x3D;" data-src="/images/product/product-368_552.jpg" alt="image alt text">
                                                </div>

                                            </a>

                                            <section class="product-grid-item__details">
                                                <div class="rating product-grid-item__rating rating--secondary" aria-label="Average rating: 72%" title="Average rating: 72%" tabindex="0">
                                                    <div class="rating__star " role="presentation" style="width: 72%">
                                                        <span class="
                rating__indicator
                
            "></span>
                                                    </div>
                                                </div>

                                                <h2 class="product-grid-item__name">
                                                    <a href="#" class="product-grid-item__name-link">
                                                        Some product name Lorem Ipsum Dolor sit
                                                    </a>
                                                </h2>
                                                <div class="swatch__container swatch__container--catalog">
                                                    <div class="swatch ">

                                                        <div class="swatch__wrapper" aria-label="Color" tabindex="0" aria-activedescendant="opt-color-red-3" aria-required="true" role="listbox" aria-invalid="false">
                                                            <div class="swatch__option-container " id="opt-color-orange-1" aria-label="Orange" tabindex="0" role="option" aria-selected="false">
                                                                <div class="swatch__option " style="background-color: #ffa500">

                                                                </div>
                                                            </div>
                                                            <div class="swatch__option-container " id="opt-color-green-2" aria-label="Green" tabindex="0" role="option" aria-selected="false">
                                                                <div class="swatch__option " style="background-color: #00ff00">

                                                                </div>
                                                            </div>
                                                            <div class="swatch__option-container selected" id="opt-color-red-3" aria-label="Red" tabindex="0" role="option" aria-selected="true">
                                                                <div class="swatch__option " style="background-color: #ff0000">

                                                                </div>
                                                            </div>
                                                            <div class="swatch__option-container " id="opt-color-black-4" aria-label="White" tabindex="0" role="option" aria-selected="false">
                                                                <div class="swatch__option " style="background-color: #000000">

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

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

                                                </div>

                                                <div class="product-grid-item__details-bottom">
                                                    <div class="product-grid-item__price ">
                                                        <div class="price ">
                                                            <span class="price__value ">
                                                                $
                                                                1 400

                                                            </span>
                                                        </div>

                                                    </div>

                                                    <div class="product-grid-item__actions ">
                                                        <div class="product-grid-item__secondary-action">
                                                            <button class="button button--icon add-to-wishlist" type="button" aria-label="Add to Wish List">
                                                                <svg class="icon button__icon" role="presentation" focusable="false">
                                                                    <title>Heart</title>
                                                                    <use href="/images/icons-sprite.svg#heart"></use>
                                                                </svg>

                                                            </button>

                                                            <button class="button button--icon " type="button" aria-label="Add to compare">
                                                                <svg class="icon button__icon" role="presentation" focusable="false">
                                                                    <title>Compare</title>
                                                                    <use href="/images/icons-sprite.svg#compare"></use>
                                                                </svg>

                                                            </button>

                                                        </div>

                                                        <form action="#" class="product-grid-item__primary-action">
                                                            <button class="button button--add-to button--add-to" type="submit" aria-label="Add to cart">
                                                                <span class="button__text ">
                                                                    Add to cart
                                                                </span>

                                                                <svg class="icon button__icon" role="presentation" focusable="false">
                                                                    <title>Add to cart</title>
                                                                    <use href="/images/icons-sprite.svg#shopping-cart"></use>
                                                                </svg>

                                                            </button>

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

                                    </div>
                                    <div class="
                            slider__item
                            slider__slide-item
                        ">
                                        <div class="product-grid-item product-grid-item--slider-item" tabindex="0">
                                            <a href="#" class="product-grid-item__link" tabindex="-1">
                                                <div class="badges product-grid-item__badges">
                                                    <div class="badge ">
                                                        -15%
                                                    </div>

                                                    <div class="badge badge--new">
                                                        New
                                                    </div>

                                                </div>

                                                <div class="lazyload-wrapper product-grid-item__image-wrapper">
                                                    <img class="
            image
            lazyload
            
        " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII&#x3D;" data-src="/images/product/product-368_552.jpg" alt="image alt text">
                                                </div>

                                            </a>

                                            <section class="product-grid-item__details">
                                                <div class="rating product-grid-item__rating rating--secondary" aria-label="Average rating: 72%" title="Average rating: 72%" tabindex="0">
                                                    <div class="rating__star " role="presentation" style="width: 72%">
                                                        <span class="
                rating__indicator
                
            "></span>
                                                    </div>
                                                </div>

                                                <h2 class="product-grid-item__name">
                                                    <a href="#" class="product-grid-item__name-link">
                                                        Some product name
                                                    </a>
                                                </h2>
                                                <div class="swatch__container swatch__container--catalog">
                                                    <div class="swatch ">

                                                        <div class="swatch__wrapper" aria-label="Color" tabindex="0" aria-activedescendant="opt-color-red-3" aria-required="true" role="listbox" aria-invalid="false">
                                                            <div class="swatch__option-container " id="opt-color-orange-1" aria-label="Orange" tabindex="0" role="option" aria-selected="false">
                                                                <div class="swatch__option " style="background-color: #ffa500">

                                                                </div>
                                                            </div>
                                                            <div class="swatch__option-container " id="opt-color-green-2" aria-label="Green" tabindex="0" role="option" aria-selected="false">
                                                                <div class="swatch__option " style="background-color: #00ff00">

                                                                </div>
                                                            </div>
                                                            <div class="swatch__option-container selected" id="opt-color-red-3" aria-label="Red" tabindex="0" role="option" aria-selected="true">
                                                                <div class="swatch__option " style="background-color: #ff0000">

                                                                </div>
                                                            </div>
                                                            <div class="swatch__option-container " id="opt-color-black-4" aria-label="White" tabindex="0" role="option" aria-selected="false">
                                                                <div class="swatch__option " style="background-color: #000000">

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

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

                                                </div>

                                                <div class="product-grid-item__details-bottom">
                                                    <div class="product-grid-item__price ">
                                                        <div class="price  ">
                                                            <span class="price__value price__value--old ">
                                                                <del aria-label="Price reduced from: $1000.00">
                                                                    $
                                                                    1000.00

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

                                                                    $

                                                                    899.99

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

                                                    </div>

                                                    <div class="product-grid-item__actions ">
                                                        <div class="product-grid-item__secondary-action">
                                                            <button class="button button--icon add-to-wishlist" type="button" aria-label="Add to Wish List">
                                                                <svg class="icon button__icon" role="presentation" focusable="false">
                                                                    <title>Heart</title>
                                                                    <use href="/images/icons-sprite.svg#heart"></use>
                                                                </svg>

                                                            </button>

                                                            <button class="button button--icon " type="button" aria-label="Add to compare">
                                                                <svg class="icon button__icon" role="presentation" focusable="false">
                                                                    <title>Compare</title>
                                                                    <use href="/images/icons-sprite.svg#compare"></use>
                                                                </svg>

                                                            </button>

                                                        </div>

                                                        <form action="#" class="product-grid-item__primary-action">
                                                            <button class="button button--add-to button--add-to" type="submit" aria-label="Add to cart">
                                                                <span class="button__text ">
                                                                    Add to cart
                                                                </span>

                                                                <svg class="icon button__icon" role="presentation" focusable="false">
                                                                    <title>Add to cart</title>
                                                                    <use href="/images/icons-sprite.svg#shopping-cart"></use>
                                                                </svg>

                                                            </button>

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

                                    </div>
                                    <div class="
                            slider__item
                            slider__slide-item
                        ">
                                        <div class="product-grid-item product-grid-item--slider-item" tabindex="0">
                                            <a href="#" class="product-grid-item__link" tabindex="-1">
                                                <div class="badges product-grid-item__badges">
                                                    <div class="badge ">
                                                        -15%
                                                    </div>

                                                    <div class="badge badge--new">
                                                        New
                                                    </div>

                                                </div>

                                                <div class="lazyload-wrapper product-grid-item__image-wrapper">
                                                    <img class="
            image
            lazyload
            
        " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII&#x3D;" data-src="/images/product/product-368_552.jpg" alt="image alt text">
                                                </div>

                                            </a>

                                            <section class="product-grid-item__details">
                                                <div class="rating product-grid-item__rating rating--secondary" aria-label="Average rating: 72%" title="Average rating: 72%" tabindex="0">
                                                    <div class="rating__star " role="presentation" style="width: 72%">
                                                        <span class="
                rating__indicator
                
            "></span>
                                                    </div>
                                                </div>

                                                <h2 class="product-grid-item__name">
                                                    <a href="#" class="product-grid-item__name-link">
                                                        Long product name can have maximum 50 caractere...
                                                    </a>
                                                </h2>
                                                <div class="swatch__container swatch__container--catalog">
                                                    <div class="swatch ">

                                                        <div class="swatch__wrapper" aria-label="Color" tabindex="0" aria-activedescendant="opt-color-red-3" aria-required="true" role="listbox" aria-invalid="false">
                                                            <div class="swatch__option-container " id="opt-color-orange-1" aria-label="Orange" tabindex="0" role="option" aria-selected="false">
                                                                <div class="swatch__option " style="background-color: #ffa500">

                                                                </div>
                                                            </div>
                                                            <div class="swatch__option-container " id="opt-color-green-2" aria-label="Green" tabindex="0" role="option" aria-selected="false">
                                                                <div class="swatch__option " style="background-color: #00ff00">

                                                                </div>
                                                            </div>
                                                            <div class="swatch__option-container selected" id="opt-color-red-3" aria-label="Red" tabindex="0" role="option" aria-selected="true">
                                                                <div class="swatch__option " style="background-color: #ff0000">

                                                                </div>
                                                            </div>
                                                            <div class="swatch__option-container " id="opt-color-black-4" aria-label="White" tabindex="0" role="option" aria-selected="false">
                                                                <div class="swatch__option " style="background-color: #000000">

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

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

                                                </div>

                                                <div class="product-grid-item__details-bottom">
                                                    <div class="product-grid-item__price ">
                                                        <div class="price ">
                                                            <span class="price__value ">
                                                                $
                                                                1 400

                                                            </span>
                                                        </div>

                                                    </div>

                                                    <div class="product-grid-item__actions ">
                                                        <div class="product-grid-item__secondary-action">
                                                            <button class="button button--icon add-to-wishlist" type="button" aria-label="Add to Wish List">
                                                                <svg class="icon button__icon" role="presentation" focusable="false">
                                                                    <title>Heart</title>
                                                                    <use href="/images/icons-sprite.svg#heart"></use>
                                                                </svg>

                                                            </button>

                                                            <button class="button button--icon " type="button" aria-label="Add to compare">
                                                                <svg class="icon button__icon" role="presentation" focusable="false">
                                                                    <title>Compare</title>
                                                                    <use href="/images/icons-sprite.svg#compare"></use>
                                                                </svg>

                                                            </button>

                                                        </div>

                                                        <form action="#" class="product-grid-item__primary-action">
                                                            <button class="button button--add-to button--add-to" type="submit" aria-label="Add to cart">
                                                                <span class="button__text ">
                                                                    Add to cart
                                                                </span>

                                                                <svg class="icon button__icon" role="presentation" focusable="false">
                                                                    <title>Add to cart</title>
                                                                    <use href="/images/icons-sprite.svg#shopping-cart"></use>
                                                                </svg>

                                                            </button>

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

                                    </div>
                                    <div class="
                            slider__item
                            slider__slide-item
                        ">
                                        <div class="product-grid-item product-grid-item--slider-item" tabindex="0">
                                            <a href="#" class="product-grid-item__link" tabindex="-1">
                                                <div class="badges product-grid-item__badges">
                                                    <div class="badge ">
                                                        -15%
                                                    </div>

                                                    <div class="badge badge--new">
                                                        New
                                                    </div>

                                                </div>

                                                <div class="lazyload-wrapper product-grid-item__image-wrapper">
                                                    <img class="
            image
            lazyload
            
        " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII&#x3D;" data-src="/images/product/product-368_552.jpg" alt="image alt text">
                                                </div>

                                            </a>

                                            <section class="product-grid-item__details">
                                                <div class="rating product-grid-item__rating rating--secondary" aria-label="Average rating: 72%" title="Average rating: 72%" tabindex="0">
                                                    <div class="rating__star " role="presentation" style="width: 72%">
                                                        <span class="
                rating__indicator
                
            "></span>
                                                    </div>
                                                </div>

                                                <h2 class="product-grid-item__name">
                                                    <a href="#" class="product-grid-item__name-link">
                                                        Some product name
                                                    </a>
                                                </h2>
                                                <div class="swatch__container swatch__container--catalog">
                                                    <div class="swatch ">

                                                        <div class="swatch__wrapper" aria-label="Color" tabindex="0" aria-activedescendant="opt-color-red-3" aria-required="true" role="listbox" aria-invalid="false">
                                                            <div class="swatch__option-container " id="opt-color-orange-1" aria-label="Orange" tabindex="0" role="option" aria-selected="false">
                                                                <div class="swatch__option " style="background-color: #ffa500">

                                                                </div>
                                                            </div>
                                                            <div class="swatch__option-container " id="opt-color-green-2" aria-label="Green" tabindex="0" role="option" aria-selected="false">
                                                                <div class="swatch__option " style="background-color: #00ff00">

                                                                </div>
                                                            </div>
                                                            <div class="swatch__option-container selected" id="opt-color-red-3" aria-label="Red" tabindex="0" role="option" aria-selected="true">
                                                                <div class="swatch__option " style="background-color: #ff0000">

                                                                </div>
                                                            </div>
                                                            <div class="swatch__option-container " id="opt-color-black-4" aria-label="White" tabindex="0" role="option" aria-selected="false">
                                                                <div class="swatch__option " style="background-color: #000000">

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

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

                                                </div>

                                                <div class="product-grid-item__details-bottom">
                                                    <div class="product-grid-item__price ">
                                                        <div class="price  ">
                                                            <span class="price__value price__value--old product-grid-item__old-price">
                                                                <del aria-label="Price reduced from: $1000.00">
                                                                    $
                                                                    1000.00

                                                                </del>
                                                            </span>
                                                            <span class="price__value price__value--special product-grid-item__special-price">
                                                                <ins aria-label="On sale at: $899.99">

                                                                    $

                                                                    899.99

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

                                                    </div>

                                                    <div class="product-grid-item__actions ">
                                                        <div class="product-grid-item__secondary-action">
                                                            <button class="button button--icon add-to-wishlist" type="button" aria-label="Add to Wish List">
                                                                <svg class="icon button__icon" role="presentation" focusable="false">
                                                                    <title>Heart</title>
                                                                    <use href="/images/icons-sprite.svg#heart"></use>
                                                                </svg>

                                                            </button>

                                                            <button class="button button--icon " type="button" aria-label="Add to compare">
                                                                <svg class="icon button__icon" role="presentation" focusable="false">
                                                                    <title>Compare</title>
                                                                    <use href="/images/icons-sprite.svg#compare"></use>
                                                                </svg>

                                                            </button>

                                                        </div>

                                                        <form action="#" class="product-grid-item__primary-action">
                                                            <button class="button button--add-to button--add-to" type="submit" aria-label="Add to cart">
                                                                <span class="button__text ">
                                                                    Add to cart
                                                                </span>

                                                                <svg class="icon button__icon" role="presentation" focusable="false">
                                                                    <title>Add to cart</title>
                                                                    <use href="/images/icons-sprite.svg#shopping-cart"></use>
                                                                </svg>

                                                            </button>

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

                                    </div>
                                    <div class="
                            slider__item
                            slider__slide-item
                        ">
                                        <div class="product-grid-item product-grid-item--slider-item" tabindex="0">
                                            <a href="#" class="product-grid-item__link" tabindex="-1">
                                                <div class="badges product-grid-item__badges">
                                                    <div class="badge ">
                                                        -15%
                                                    </div>

                                                    <div class="badge badge--new">
                                                        New
                                                    </div>

                                                </div>

                                                <div class="lazyload-wrapper product-grid-item__image-wrapper">
                                                    <img class="
            image
            lazyload
            
        " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII&#x3D;" data-src="/images/product/product-368_552.jpg" alt="image alt text">
                                                </div>

                                            </a>

                                            <section class="product-grid-item__details">
                                                <div class="rating product-grid-item__rating rating--secondary" aria-label="Average rating: 72%" title="Average rating: 72%" tabindex="0">
                                                    <div class="rating__star " role="presentation" style="width: 72%">
                                                        <span class="
                rating__indicator
                
            "></span>
                                                    </div>
                                                </div>

                                                <h2 class="product-grid-item__name">
                                                    <a href="#" class="product-grid-item__name-link">
                                                        Long product name can have maximum 50 caractere...
                                                    </a>
                                                </h2>
                                                <div class="swatch__container swatch__container--catalog">
                                                    <div class="swatch ">

                                                        <div class="swatch__wrapper" aria-label="Color" tabindex="0" aria-activedescendant="opt-color-red-3" aria-required="true" role="listbox" aria-invalid="false">
                                                            <div class="swatch__option-container " id="opt-color-orange-1" aria-label="Orange" tabindex="0" role="option" aria-selected="false">
                                                                <div class="swatch__option " style="background-color: #ffa500">

                                                                </div>
                                                            </div>
                                                            <div class="swatch__option-container " id="opt-color-green-2" aria-label="Green" tabindex="0" role="option" aria-selected="false">
                                                                <div class="swatch__option " style="background-color: #00ff00">

                                                                </div>
                                                            </div>
                                                            <div class="swatch__option-container selected" id="opt-color-red-3" aria-label="Red" tabindex="0" role="option" aria-selected="true">
                                                                <div class="swatch__option " style="background-color: #ff0000">

                                                                </div>
                                                            </div>
                                                            <div class="swatch__option-container " id="opt-color-black-4" aria-label="White" tabindex="0" role="option" aria-selected="false">
                                                                <div class="swatch__option " style="background-color: #000000">

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

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

                                                </div>

                                                <div class="product-grid-item__details-bottom">
                                                    <div class="product-grid-item__price ">
                                                        <div class="price ">
                                                            <span class="price__value ">
                                                                $
                                                                1 400

                                                            </span>
                                                        </div>

                                                    </div>

                                                    <div class="product-grid-item__actions ">
                                                        <div class="product-grid-item__secondary-action">
                                                            <button class="button button--icon add-to-wishlist" type="button" aria-label="Add to Wish List">
                                                                <svg class="icon button__icon" role="presentation" focusable="false">
                                                                    <title>Heart</title>
                                                                    <use href="/images/icons-sprite.svg#heart"></use>
                                                                </svg>

                                                            </button>

                                                            <button class="button button--icon " type="button" aria-label="Add to compare">
                                                                <svg class="icon button__icon" role="presentation" focusable="false">
                                                                    <title>Compare</title>
                                                                    <use href="/images/icons-sprite.svg#compare"></use>
                                                                </svg>

                                                            </button>

                                                        </div>

                                                        <form action="#" class="product-grid-item__primary-action">
                                                            <button class="button button--add-to button--add-to" type="submit" aria-label="Add to cart">
                                                                <span class="button__text ">
                                                                    Add to cart
                                                                </span>

                                                                <svg class="icon button__icon" role="presentation" focusable="false">
                                                                    <title>Add to cart</title>
                                                                    <use href="/images/icons-sprite.svg#shopping-cart"></use>
                                                                </svg>

                                                            </button>

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

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

                    </div>

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

                </div>
            </section>

            <section class="section ">
                <div class="section__content ">
                    <div class="slider slider--brands" data-mobile-first="true" data-infinite="true" data-center-mode="false" data-dots="false" data-autoplay="false" data-autoplay-speed="3000" data-pause-on-focus="true" data-pause-on-hover="true" data-slides-to-show="3" data-slides-to-scroll="1" data-swipe-to-slide="true" data-element-slides=".slider__slides" data-dots-class="slider__dots" data-loading-class="slider--loading" data-loader-visible-class="loader--visible" data-element-slide=".slider__item" data-element-loader=".loader" data-element-nav-prev=".slider__prev" data-element-nav-next=".slider__next" data-responsive-config='[{"breakpoint": 767, "settings": {"slidesToShow": 4, "slidesToScroll": 1, "dots": false}}, {"breakpoint": 1023, "settings": {"slidesToShow": 6, "slidesToScroll": 1, "dots": false}}]'>
                        <div class="loader loader--visible" aria-live="polite" aria-label="Do not refresh the page">
                            <div class="loader__icon"></div>
                        </div>

                        <div class="slider__heading ">
                            <h2 class="heading--first-level margin-0">
                                Top brands
                            </h2>

                        </div>

                        <div class="slider__handler">
                            <div class="slider__navigation ">
                                <div class="slider__arrows">
                                    <button class="button button--icon button--icon-border slider__nav-button slider__prev" type="button" aria-label="Previous slide">
                                        <svg class="icon button__icon slider__nav-icon" role="img">
                                            <use href="/images/icons-sprite.svg#arrow-left"></use>
                                        </svg>

                                    </button>

                                    <button class="button button--icon button--icon-border slider__nav-button slider__next" type="button" aria-label="Next slide">
                                        <svg class="icon button__icon slider__nav-icon" role="img">
                                            <use href="/images/icons-sprite.svg#arrow-right"></use>
                                        </svg>

                                    </button>

                                </div>
                            </div>
                            <div class="slider__container">
                                <div class="slider__slides">
                                    <div class="
                            slider__item
                            slider__slide-item
                        ">
                                        <picture class="image slider__image">
                                            <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/home/brands/brand-nike_144-144.jpg" media="(max-width: 1024px)" />
                                            <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/home/brands/brand-nike_208-208.jpg" media="" />

                                            <img class="lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/home/brands/brand-nike_208-208.jpg" alt="Brand nike" />
                                        </picture>

                                    </div>
                                    <div class="
                            slider__item
                            slider__slide-item
                        ">
                                        <picture class="image slider__image">
                                            <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/home/brands/brand-adidas_144-144.jpg" media="(max-width: 1024px)" />
                                            <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/home/brands/brand-adidas_208-208.jpg" media="" />

                                            <img class="lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/home/brands/brand-adidas_208-208.jpg" alt="Brand adidas" />
                                        </picture>

                                    </div>
                                    <div class="
                            slider__item
                            slider__slide-item
                        ">
                                        <picture class="image slider__image">
                                            <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/home/brands/brand-nike_144-144.jpg" media="(max-width: 1024px)" />
                                            <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/home/brands/brand-nike_208-208.jpg" media="" />

                                            <img class="lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/home/brands/brand-nike_208-208.jpg" alt="Brand nike" />
                                        </picture>

                                    </div>
                                    <div class="
                            slider__item
                            slider__slide-item
                        ">
                                        <picture class="image slider__image">
                                            <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/home/brands/brand-armani_144-144.jpg" media="(max-width: 1024px)" />
                                            <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/home/brands/brand-armani_208-208.jpg" media="" />

                                            <img class="lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/home/brands/brand-armani_208-208.jpg" alt="Brand armani" />
                                        </picture>

                                    </div>
                                    <div class="
                            slider__item
                            slider__slide-item
                        ">
                                        <picture class="image slider__image">
                                            <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/home/brands/brand-adidas_144-144.jpg" media="(max-width: 1024px)" />
                                            <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/home/brands/brand-adidas_208-208.jpg" media="" />

                                            <img class="lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/home/brands/brand-adidas_208-208.jpg" alt="Brand adidas" />
                                        </picture>

                                    </div>
                                    <div class="
                            slider__item
                            slider__slide-item
                        ">
                                        <picture class="image slider__image">
                                            <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/home/brands/brand-armani_144-144.jpg" media="(max-width: 1024px)" />
                                            <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/home/brands/brand-armani_208-208.jpg" media="" />

                                            <img class="lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/home/brands/brand-armani_208-208.jpg" alt="Brand armani" />
                                        </picture>

                                    </div>
                                    <div class="
                            slider__item
                            slider__slide-item
                        ">
                                        <picture class="image slider__image">
                                            <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/home/brands/brand-adidas_144-144.jpg" media="(max-width: 1024px)" />
                                            <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/home/brands/brand-adidas_208-208.jpg" media="" />

                                            <img class="lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/home/brands/brand-adidas_208-208.jpg" alt="Brand adidas" />
                                        </picture>

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

                        <div class="
                slider__after
                
            ">
                            <a class="link slider__link" href="#" title="See all Brands">
                                See all Brands
                            </a>

                        </div>
                    </div>

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

                </div>
            </section>

            <section class="section ">
                <div class="section__content ">
                    <div class="content-block content-block--secondary">
                        <div class="content-block__row row between-lg evenly-xl">
                            <div class="content-block__column col-xs-12 col-lg-4 col-xl-3">
                                <h2 class="heading--first-level content-block__heading content-block__heading--secondary">
                                    Lorem ipsum is simply
                                </h2>

                            </div>
                            <div class="content-block__column col-xs-12 col-lg-7 col-xl-6">
                                <div class="paragraph content-block__introduction">
                                    <span>
                                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
                                    </span>
                                </div>

                                <div class="paragraph content-block__description">
                                    <span>
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
                                    </span>
                                </div>

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

                </div>
            </section>

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

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

        </button>

        <section class="footer__newsletter">
            <div class="newsletter ">
                <div class="newsletter__heading ">
                    <h2 class="newsletter__title">
                        JOIN OUR EMAIL LIST
                    </h2>
                    <p class="newsletter__subtitle">
                        Sign up for savings and product announcements
                    </p>
                </div>
                <form class="newsletter__form">
                    <div class="newsletter__controls">
                        <div class="input newsletter__input">
                            <label class="
            label
            input__label
                label--hidden
            newsletter__label
        " for="newsletterEmail">
                                Email for newsletter subscription
                            </label>
                            <input class="input__field newsletter__field" id="newsletterEmail" name="newsletterEamil" type="" placeholder="Enter your email">
                        </div>

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

                    </div>
                    <div class="newsletter__agreements">
                        <div class="checkbox newsletter__checkbox">
                            <input type="checkbox" id="newsletter" name="" class="checkbox__field ">
                            <svg class="
            checkbox__icon
            checkbox__icon--checked
            
        " role="presentation">
                                <use href="/images/icons-sprite.svg#checked"></use>
                            </svg>
                            <svg class="
            checkbox__icon
            checkbox__icon--unchecked
            
        " role="presentation">
                                <use href="/images/icons-sprite.svg#unchecked"></use>
                            </svg>
                            <label for="newsletter" class="checkbox__label ">
                                <span class="checkbox__text">
                                    I agree to <a href="#" title="Terms and conditions">Terms & Conditions</a> and I am happy to receive your newsletter with all your promotions.
                                </span>
                            </label>
                        </div>

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

        </section>

        <div class="footer__social-handler ">
            <h3 class="footer__social-list-title">
                Let&#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 href="/images/icons-sprite.svg#facebook"></use>
                        </svg>

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

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

        </div>

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

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

                        </button>

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

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

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

                        </button>

                        <div id="dropdown-information" class="dropdown-list__content " aria-hidden="true">
                            <ul class="
        list
        list__columns
        footer__links-list
    ">
                                <li class="
                list__item
                list__column
                list__column--hidden
            ">
                                    <a href="" class="
                    link
                    
                ">
                                        Column 1
                                    </a>
                                    <ul class="list">
                                        <li class="
                            list__item
                            list__column-item
                            
                        ">
                                            <a href="#" class="
                                link
                                footer__link
                            " title="Hours">
                                                Hours
                                            </a>
                                        </li>
                                        <li class="
                            list__item
                            list__column-item
                            
                        ">
                                            <a href="#" class="
                                link
                                footer__link
                            " title="About Us">
                                                About Us
                                            </a>
                                        </li>
                                        <li class="
                            list__item
                            list__column-item
                            
                        ">
                                            <a href="#" class="
                                link
                                footer__link
                            " title="Contact Us">
                                                Contact Us
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="
                list__item
                list__column
                list__column--hidden
            ">
                                    <a href="" class="
                    link
                    
                ">
                                        Column 2
                                    </a>
                                    <ul class="list">
                                        <li class="
                            list__item
                            list__column-item
                            
                        ">
                                            <a href="#" class="
                                link
                                footer__link
                            " title="Job Openings">
                                                Job Openings
                                            </a>
                                        </li>
                                        <li class="
                            list__item
                            list__column-item
                            
                        ">
                                            <a href="#" class="
                                link
                                footer__link
                            " title="Returns">
                                                Returns
                                            </a>
                                        </li>
                                        <li class="
                            list__item
                            list__column-item
                            
                        ">
                                            <a href="#" class="
                                link
                                footer__link
                            " title="Shipping">
                                                Shipping
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="
                list__item
                list__column
                list__column--hidden
            ">
                                    <a href="" class="
                    link
                    
                ">
                                        Column 3
                                    </a>
                                    <ul class="list">
                                        <li class="
                            list__item
                            list__column-item
                            
                        ">
                                            <a href="#" class="
                                link
                                footer__link
                            " title="Privacy Policy">
                                                Privacy Policy
                                            </a>
                                        </li>
                                        <li class="
                            list__item
                            list__column-item
                            
                        ">
                                            <a href="#" class="
                                link
                                footer__link
                            " title="Terms & Conditions">
                                                Terms &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>

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

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

                </li>
                <li class="list__item">
                    <svg class="icon footer__payments-list-icon" role="img">
                        <title>Master Card</title>
                        <use href="/images/icons-sprite.svg#master-card"></use>
                    </svg>

                </li>
                <li class="list__item">
                    <svg class="icon footer__payments-list-icon" role="img">
                        <title>Discover</title>
                        <use href="/images/icons-sprite.svg#discover"></use>
                    </svg>

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

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

                </li>
            </ul>

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

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

                            </a>

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

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

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

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

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

                                    </li>
                                </ul>

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

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

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

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

                            </a>

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

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

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

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

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

                                    </li>
                                </ul>

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

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

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

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

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

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

</footer>

<script src="/components/raw/footer/footer.js"></script>
<div class="page-wrapper">
    {{ render '@header' }}
    <main
        class="container homepage"
        id="maincontent"
    >
        <div class="home">
            {{#if mainSlider }}
                {{ render '@section' mainSlider }}
            {{/if}}

            {{#if briefInfo }}
                {{ render '@section' briefInfo }}
            {{/if}}

            {{#if categoryBanners }}
                {{ render '@section' categoryBanners }}
            {{/if}}

            {{#if additionalBanners }}
                {{ render '@section' additionalBanners }}
            {{/if}}

            {{#if popularProducts }}
                {{ render '@section' popularProducts }}
            {{/if}}

            {{#if teasers }}
                {{ render '@section' teasers }}
            {{/if}}

            {{#if newProducts }}
                {{ render '@section' newProducts }}
            {{/if}}

            {{#if brands }}
                {{ render '@section' brands }}
            {{/if}}

            {{#if content }}
                {{ render '@section' content }}
            {{/if}}
        </div>
    </main>
</div>

{{ render '@footer' }}
{
  "mainSlider": {
    "class": "section--secondary",
    "heading": false,
    "components": [
      {
        "content": {
          "content": "slider",
          "contentContext": {
            "script": true,
            "heading": false
          }
        }
      }
    ]
  },
  "briefInfo": {
    "class": "display-none-m",
    "heading": false,
    "components": [
      {
        "content": {
          "content": "brief-info--dividers",
          "contentContext": ""
        }
      }
    ]
  },
  "categoryBanners": {
    "class": "section--fix-spacer-large",
    "heading": {
      "content": "heading",
      "contentContext": {
        "tag": "h2",
        "class": "heading--first-level margin-0",
        "text": "Shop by category"
      }
    },
    "contentClass": "row",
    "components": [
      {
        "content": {
          "content": "banner--secondary",
          "contentContext": {
            "text": "Clothing",
            "class": "col-xs-6 col-lg-3 margin-bottom-l",
            "image": {
              "defaultSrc": "/images/home/banners/category-clothing-144_200.jpg",
              "sources": [
                {
                  "src": "/images/home/banners/category-clothing-320_432.jpg",
                  "mediaQuery": "(max-width: 1200px)"
                },
                {
                  "src": "/images/home/banners/category-clothing-320_432.jpg",
                  "mediaQuery": ""
                }
              ]
            }
          }
        }
      },
      {
        "content": {
          "content": "banner--secondary",
          "contentContext": {
            "text": "Shoes",
            "class": "col-xs-6 col-lg-3 margin-bottom-l",
            "image": {
              "defaultSrc": "/images/home/banners/category-shoes-144_200.jpg",
              "sources": [
                {
                  "src": "/images/home/banners/category-shoes-320_432.jpg",
                  "mediaQuery": "(max-width: 1200px)"
                },
                {
                  "src": "/images/home/banners/category-shoes-320_432.jpg",
                  "mediaQuery": ""
                }
              ]
            }
          }
        }
      },
      {
        "content": {
          "content": "banner--secondary",
          "contentContext": {
            "text": "Accessories",
            "class": "col-xs-6 col-lg-3 margin-bottom-l",
            "image": {
              "defaultSrc": "/images/home/banners/category-accessories-144_200.jpg",
              "sources": [
                {
                  "src": "/images/home/banners/category-accessories-320_432.jpg",
                  "mediaQuery": "(max-width: 1200px)"
                },
                {
                  "src": "/images/home/banners/category-accessories-320_432.jpg",
                  "mediaQuery": ""
                }
              ]
            }
          }
        }
      },
      {
        "content": {
          "content": "banner--secondary",
          "contentContext": {
            "text": "New In",
            "class": "col-xs-6 col-lg-3 margin-bottom-l",
            "image": {
              "defaultSrc": "/images/home/banners/category-new-in-144_200.jpg",
              "sources": [
                {
                  "src": "/images/home/banners/category-new-in-320_432.jpg",
                  "mediaQuery": "(max-width: 1200px)"
                },
                {
                  "src": "/images/home/banners/category-new-in-320_432.jpg",
                  "mediaQuery": ""
                }
              ]
            }
          }
        }
      }
    ]
  },
  "additionalBanners": {
    "class": "section--fix-spacer-medium",
    "heading": false,
    "contentClass": "row",
    "components": [
      {
        "content": {
          "content": "banner",
          "contentContext": {
            "class": "col-xs-12 col-lg-6 margin-bottom-m",
            "image": {
              "defaultSrc": "/images/home/banners/banner-small-women-now-304_128.jpg",
              "sources": [
                {
                  "src": "/images/home/banners/banner-medium-women-now-656_264.jpg",
                  "mediaQuery": "(max-width: 768px)"
                },
                {
                  "src": "/images/home/banners/banner-medium-women-now-656_264.jpg",
                  "mediaQuery": ""
                }
              ]
            }
          }
        }
      },
      {
        "content": {
          "content": "banner",
          "contentContext": {
            "class": "col-xs-12 col-lg-6 margin-bottom-m",
            "image": {
              "defaultSrc": "/images/home/banners/banner-small-men-now-304_128.jpg",
              "sources": [
                {
                  "src": "/images/home/banners/banner-medium-men-now-656_264.jpg",
                  "mediaQuery": "(max-width: 768px)"
                },
                {
                  "src": "/images/home/banners/banner-medium-men-now-656_264.jpg",
                  "mediaQuery": ""
                }
              ]
            }
          }
        }
      }
    ]
  },
  "popularProducts": {
    "heading": false,
    "contentClass": "section__content--products",
    "components": [
      {
        "content": {
          "content": "slider--products",
          "contentContext": {
            "script": true,
            "heading": {
              "content": "heading",
              "contentContext": {
                "tag": "h2",
                "class": "heading--first-level margin-0",
                "text": "Popular products"
              }
            }
          }
        }
      }
    ]
  },
  "teasers": {
    "heading": false,
    "contentClass": "",
    "components": [
      {
        "content": {
          "content": "teaser--secondary",
          "contentContext": ""
        }
      }
    ]
  },
  "newProducts": {
    "heading": false,
    "contentClass": "section__content--products",
    "components": [
      {
        "content": {
          "content": "slider--products",
          "contentContext": {
            "script": true,
            "heading": {
              "content": "heading",
              "contentContext": {
                "tag": "h2",
                "class": "heading--first-level margin-0",
                "text": "New products"
              }
            }
          }
        }
      }
    ]
  },
  "brands": {
    "heading": false,
    "contentClass": "",
    "components": [
      {
        "content": {
          "content": "slider--brands",
          "contentContext": {
            "script": true,
            "heading": {
              "content": "heading",
              "contentContext": {
                "tag": "h2",
                "class": "heading--first-level margin-0",
                "text": "Top brands"
              }
            }
          }
        }
      }
    ]
  },
  "content": {
    "heading": false,
    "contentClass": "",
    "components": [
      {
        "content": {
          "content": "content-block--secondary",
          "contentContext": ""
        }
      }
    ]
  }
}
  • Content:
    .home {
        &:not(.breadcrumbs__item) {
            display: flex;
            flex-direction: column;
        }
    
        &__banner {
            margin: 0 0 $spacer--medium;
    
            @include mq($screen-m) {
                margin: 0 0 $spacer--large;
            }
    
            @include mq($screen-l) {
                margin: 0 0 $spacer--medium;
            }
        }
    }
    
  • URL: /components/raw/home/_home.scss
  • Filesystem Path: build/components/Templates/home/_home.scss
  • Size: 332 Bytes

No notes defined.