<style>
    .smarthint .slick-prev {
        display: block;
        background: rgba(0, 0, 0, 0) url(https://www.sexshophotpepper.com.br/catalog/view/theme/hotpepper-2015/assets/dist/img/bkg_prevous.png) no-repeat scroll 0 0;
        height: 26px !important;
        width: 36px !important;
        display: inline-block;
        float: right;
        margin-top: -34px !important;
        position: relative;
        margin-right: 29px;
        top: 0;
    }

    .smarthint .slick-next {
        display: block;
        background: rgba(0, 0, 0, 0) url(https://www.sexshophotpepper.com.br/catalog/view/theme/hotpepper-2015/assets/dist/img/bkg_next.png) no-repeat scroll 0 0;
        height: 26px !important;
        width: 36px !important;
        float: right;
        margin-top: -34px !important;
        position: absolute;
        margin-right: 18px;
        top: 0;
    }

    .smarthint .product-related {
        margin-left: auto;
        margin-right: auto;
    }


    .smarthint .slick-prev,
    .smarthint .slick-next {
        -webkit-transition: all .5s cubic-bezier(.215, .61, .355, 1);
        -moz-transition: all .5s cubic-bezier(.215, .61, .355, 1);
        -o-transition: all .5s cubic-bezier(.215, .61, .355, 1);
        transition: all .5s cubic-bezier(.215, .61, .355, 1);
    }

    .smarthint .slick-prev:hover,
    .smarthint .slick-next:hover {
        background-position: bottom left;
    }

    .smarthint .slick-prev:before,
    .smarthint .slick-next:before {
        content: "" !important;
    }

    .smarthint .product-related {
        margin-right: 0;
        margin-left: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .smarthint .product-layout.product-grid {
        padding: 7.5px;
    }

    @media (min-width: 992px) {
        .smarthint .container {
            width: 100%;
        }
    }

    @media (min-width: 1024px) {
        .smarthint .product-grid .product-wrapper {
            height: auto;
            min-height: 412px;
        }
    }
</style>

<div id="product-related" class="container product-related mt30">
    <div class="box-title">
        <h3>{{BoxTitle}}</h3>
    </div>

    <div class="owl-theme slick-it" style="opacity: 1; display: block;">
        {{#Products}}
        <div class="item">
            <div class="product-layout product-grid">
                <div class="product-wrapper">
                    <a href="{{Link}}">
                        <div class="product-thumb">
                            <div class="product-thumb__primary">
                                <img src="{{ImageLink}}" alt="{{Title}}" title="{{Title}}" class="img-responsive">
                            </div>
                            <div class="product-detail button-group hidden-xs hidden-sm hidden-md">
                                <div class="product-detail__group-buttons">
                                    <button class="product-detail-button product-detail-button--cart" type="button"
                                        data-toggle="tooltip" title="Comprar" onclick="cart.add('{{ProductId}}');">
                                        <i class="fa fa-shopping-cart"></i>
                                    </button>
                                    <button class="product-detail-button product-detail-button--wishlist" type="button"
                                        data-toggle="tooltip" title="Adicionar à lista de desejos"
                                        onclick="wishlist.add('{{ProductId}}');">
                                        <i class="fa fa-heart"></i>
                                    </button>
                                    <button class="product-detail-button product-detail-button--compare" type="button"
                                        data-toggle="tooltip" title="Comparar este produto"
                                        onclick="compare.add('{{ProductId}}');">
                                        <i class="fa fa-balance-scale"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </a>
                    <button class="product-detail-button--quick-view hidden-xs hidden-sm hidden-md"
                        href="index.php?route=product/preview&amp;product_id={{ProductId}}" data-toggle="modal"
                        data-target="#ajaxModal">
                        <a>Espiar</a>
                    </button>
                    {{#HasDiscount}}
                    <div class="product-sale">-{{Discount}}%</div>
                    {{/HasDiscount}}
                    <h4 class="product-name">
                        <a href="{{Link}}">{{Title}}</a>
                    </h4>

                    {{#HasSalePrice}}
                    <p class="product-price">
                        <span class="product-price--old">De R$ {{PriceInteger}},{{PriceDecimal}}</span>
                        <span class="product-price--new"></span>
                    </p>
                    {{/HasSalePrice}}
                    <div class="flex_parcelas_pricing">
                        <span class="price-avista">Por
                            {{#HasSalePrice}}
                            <strong> R$ {{SalePriceInteger}},{{SalePriceDecimal}}</strong>
                            {{/HasSalePrice}}
                            {{^HasSalePrice}}
                            <strong> R$ {{PriceInteger}},{{PriceDecimal}}</strong>
                            {{/HasSalePrice}}
                            <small> </small>
                        </span>
                        {{#HasInstallment}}
                        <span class="price-parcelado">ou
                            <strong>{{Installment}}x de R$
                                {{InstallmentAmountInteger}},{{InstallmentAmountDecimal}}</strong>
                            <small> no cartão</small>
                        </span>
                        {{/HasInstallment}}
                        {{^HasInstallment}}
                        <span class="price-parcelado">
                            <strong></strong>
                            <small></small>
                        </span>
                        {{/HasInstallment}}
                    </div>
                    <p></p>
                    <div class="rating">
                        <span class="fa fa-stack">
                            <i class="fa fa-star-o fa-stack-1x"></i>
                        </span>
                        <span class="fa fa-stack">
                            <i class="fa fa-star-o fa-stack-1x"></i>
                        </span>
                        <span class="fa fa-stack">
                            <i class="fa fa-star-o fa-stack-1x"></i>
                        </span>
                        <span class="fa fa-stack">
                            <i class="fa fa-star-o fa-stack-1x"></i>
                        </span>
                        <span class="fa fa-stack">
                            <i class="fa fa-star-o fa-stack-1x"></i>
                        </span>
                    </div>
                    <div class="product-detail product-detail--list product-detail--small button-group hidden-lg">

                        <button class="product-detail-button product-detail-button--cart" type="button" title="Comprar"
                            onclick="cart.add('{{ProductId}}');">
                            <i class="fa fa-shopping-cart"></i> Comprar </button>
                        <button class="product-detail-button product-detail-button--quickview"
                            href="index.php?route=product/preview&amp;product_id={{ProductId}}" data-toggle="modal"
                            data-target="#ajaxModal" title="Espiar">
                            <a>
                                <i class="fa fa-binoculars"></i>
                            </a>
                        </button>
                        <button class="product-detail-button product-detail-button--wishlist" type="button"
                            title="Adicionar à lista de desejos" onclick="wishlist.add('{{ProductId}}');">
                            <i class="fa fa-heart"></i>
                        </button>
                        <button class="product-detail-button product-detail-button--compare" type="button"
                            title="Comparar este produto" onclick="compare.add('{{ProductId}}');">
                            <i class="fa fa-balance-scale"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        {{/Products}}
    </div>
</div>