[include_header]

    <!-- #site-wrapper start -->
    <div id="site-wrapper" class="site-wrapper page-shop page-single-product">
        <!-- #header start -->
       
        <!-- #header end -->
        <!-- #page-title start -->
        <div id="page-title" class="page-title py-6" style="margin-top: 100px">
            <div class="container">
                <div class="h-100 ">
                    <ul class="breadcrumb">
                        <li class="breadcrumb-item"><a href="/" class="text-decoration-none">Home</a></li>
                      <li class="breadcrumb-item hide-[product_parent_category_slug]"><a href="/category/[product_parent_category_slug]" class="text-decoration-none">[product_parent_category]</a></li>
                        <li class="breadcrumb-item"><a href="/category/[product_category_slug]" class="text-decoration-none">[product_category]</a></li>
                        <li class="breadcrumb-item"><span>[product_name]</span></li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- #page-title end -->
        <!-- #wrapper-content start -->
        <div id="wrapper-content" class="wrapper-content pt-9 pb-12">
            <div class="container">
                <div class="page-container">
                    <div class="product single-product row">
                        <div class="product-images col-lg-8 d-flex mb-5 mb-lg-0">
                            <div class="slick-slider slider-nav slider-vertical"
                                 data-slick-options='{"slidesToShow": 4,"autoplay":true,"dots":false,"arrows":false,"vertical":true,"verticalSwiping":true,"asNavFor": ".slider-for","focusOnSelect": true,"responsive":[{"breakpoint": 768,"settings": {"vertical":false,"verticalSwiping":true}}]}'>
                               
                           
                              <div class="box"><img src="[product_photo_thumb]" alt="Imagem [product_name]"></div>
                             	[product_images]
                              		<div class="box"><img src="[product_images_thumb]" alt="Imagem [iterator_index]"></div>
                                [/product_images]
                            </div>
                            <div class="slick-slider slider-for slider-vertical"
                                 data-slick-options='{"slidesToShow": 1,"autoplay":false,"dots":false,"arrows":false,"asNavFor": ".slider-nav","vertical":true,"verticalSwiping":true,"responsive":[{"breakpoint": 768,"settings": {"vertical":false,"verticalSwiping":false}}]}'>
                                <div class="box">
                                    <div class="image">
                                        <img src="[product_photo]" alt="Imagem [product_name]">
                                        <div class="image-icon">+</div>
                                    </div>
                                </div>
                              	[product_images]
                                  <div class="box">
                                      <div class="image">
                                          <img src="[product_images_image]" alt="Gallery [iterator_index]">
                                          <div class="image-icon">+</div>
                                      </div>
                                  </div>
                                [/product_images]
                               
                            </div>
                        </div>
                        <div class="product-details col-lg-4">
                            <div class="font-size-h5 text-dark lh-1625">[product_name]</div>
                            <div class="author-rate d-flex mb-3">
                                 <div class="d-flex">
                                    <span class="text-gray d-inline-block mr-1">Vendedor: </span>
                                    <a href="/st/[product_seller_username]" class="link-hover-dark-primary d-inline-block mr-1">[product_seller_name] </a>
                                   
                                </div>
                            </div>
                            <div class="mb-6">
                                <span class="text-danger font-size-h5">[product_price] </span>
                                <span class="font-size-md text-dark text-decoration-line-through">[product_discount_to_show]</span>
                            </div>
                              [product_attributes] 
                                <div class="d-flex mb-8 pb-1">

                                    <span class="text-gray d-inline-block mr-1">[product_attributes_label]: </span>
                                    <a href="#" class="link-hover-dark-primary d-inline-block mr-1">[product_attributes_value] </a>
                                </div>
                              [/product_attributes]
                          
                          

                            [product_custom_fields]
                                 <div class="d-flex hide-last-comma mb-2">
                                    <span class="text-gray d-inline-block mr-1 ">[product_custom_field_label]: </span>
                                    [product_custom_field_values]
										<span href="#" class="link-hover-dark-primary d-inline-block">[product_custom_field_values_value]</span>
										<span class="comma mr-1">, </span>
                                    [/product_custom_field_values]
                                  </div>
                            [/product_custom_fields]
                                
                          
                          
                            <form >
                                <div class="form-add-cart d-flex flex-wrap flex-sm-nowrap mb-6">
                                   [product_has_quantity]
                                    <div class="input-group align-items-center flex-nowrap col-sm-4 px-3">
                                        <a href="#" class="input-group-prepend"><i class="fal fa-minus"></i></a>
                                        <input type="text" name="quantity" class="form-control bg-transparent border-0 text-center iclient-cart-quantity" step="1" min="1" max="1000"
                                               value="[product_default_quantity]">
                                        <a href="#" class="input-group-append text-decoration-none"><i
                                                class="fal fa-plus"></i></a>
                                    </div>
                                  	[/product_has_quantity]
                                    <div class="button-add-cart pl-0 pl-sm-5">
                                      
                                        <a href="/cms/cart/add-product/[product_slug]" class="btn btn-primary text-uppercase btn-block font-size-md rounded-0 iclient-cart">
                                            Adicionar | Escolher
                                        </a>
                                    </div>

                                </div>
                            </form>
                            <div class="border-top mb-6 pt-6">
                                <div class="d-flex">
                                    <span class="text-gray d-inline-block mr-1">Referência: </span>
                                    <span class="text-dark">[product_model]</span>
                                </div>
                            </div>

                            <div class="social-icon light-color">
                                <ul class="list-inline text-left">
                                    <li class="list-inline-item">
                                        <a target="_blank" title="Twitter" href="[product_share_twitter]">
                                            <i class="fab fa-twitter">
                                            </i>
                                            <span>Twitter</span>
                                        </a>
                                    </li>
                                    <li class="list-inline-item">
                                        <a target="_blank" title="Facebook" href="[product_share_facebook]">
                                            <i class="fab fa-facebook-f">
                                            </i>
                                            <span>Facebook</span>
                                        </a>
                                    </li>
                                    <li class="list-inline-item">
                                        <a target="_blank" title="Instagram" href="[product_share_whatsapp]">
                                           <i class="fab fa-whatsapp">
                                            </i>
                                            <span>WhatsApp</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>

                        </div>
                    </div>
                    <div class="mt-13 mb-12">
                        <div class="collapse-tabs">
                            <div class="tabs pb-3 mb-8 border-bottom d-none d-sm-block">
                                <ul class="nav nav-pills tab-style-01 text-capitalize fs-20 justify-content-center"
                                    role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" id="description-tab" data-toggle="tab"
                                           href="#description"
                                           role="tab"
                                           aria-controls="description" aria-selected="true">Descrição</a>
                                    </li>
                                   <!-- <li class="nav-item">
                                        <a class="nav-link" id="addition-info-tab" data-toggle="tab"
                                           href="#addition-info"
                                           role="tab"
                                           aria-controls="addition-info" aria-selected="false">Addition Information</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="custom-tab" data-toggle="tab"
                                           href="#custom"
                                           role="tab"
                                           aria-controls="custom" aria-selected="false">Custom Tab </a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="review-tab" data-toggle="tab"
                                           href="#review"
                                           role="tab"
                                           aria-controls="review" aria-selected="false">Reviews (3)</a>
                                    </li>
									-->
                                </ul>
                            </div>
                            <div class="tab-content pt-2">
                                <div id="collapse-tabs-accordion">
                                    <div class="tab-pane fade show active px-0 px-md-12 mb-4 mb-sm-0" id="description"
                                         role="tabpanel"
                                         aria-labelledby="description-tab">
                                        <div class="card bg-transparent mb-4 mb-sm-0">
                                            <div class="card-header d-block d-sm-none bg-transparent px-0 py-1"
                                                 id="headingDescription">
                                                <h5 class="mb-0">
                                                    <button class="btn font-size-h5 btn-block"
                                                            data-toggle="collapse"
                                                            data-target="#description-collapse"
                                                            aria-expanded="true"
                                                            aria-controls="description-collapse">
                                                        Descrição
                                                    </button>
                                                </h5>
                                            </div>
                                            <div id="description-collapse" class="collapse show collapsible"
                                                 aria-labelledby="headingDescription"
                                                 data-parent="#collapse-tabs-accordion">
                                                <div class="card-body p-sm-0 border-sm-0">
                                                    <div class="lh-lg text-center">
                                                        [product_description]
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                   <!-- <div class="tab-pane fade px-0 px-md-12 mb-4 mb-sm-0" id="addition-info"
                                         role="tabpanel"
                                         aria-labelledby="addition-info-tab">
                                        <div class="card bg-transparent mb-4 mb-sm-0">
                                            <div class="card-header d-block d-sm-none bg-transparent px-0 py-1"
                                                 id="headingAdditonInfo">
                                                <h5 class="mb-0">
                                                    <button class="btn font-size-h5 btn-block collapsed"
                                                            data-toggle="collapse"
                                                            data-target="#addition-info-collapse"
                                                            aria-expanded="true"
                                                            aria-controls="description-collapse">
                                                        Addition Information
                                                    </button>
                                                </h5>
                                            </div>
                                            <div id="addition-info-collapse" class="collapse collapsible"
                                                 aria-labelledby="headingAdditonInfo"
                                                 data-parent="#collapse-tabs-accordion">
                                                <div class="card-body p-sm-0 border-sm-0">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade px-0 px-md-12 mb-4 mb-sm-0" id="custom" role="tabpanel"
                                         aria-labelledby="custom-tab">
                                        <div class="card bg-transparent mb-4 mb-sm-0">
                                            <div class="card-header d-block d-sm-none bg-transparent px-0 py-1"
                                                 id="headingCustom">
                                                <h5 class="mb-0">
                                                    <button class="btn font-size-h5 btn-block collapsed"
                                                            data-toggle="collapse"
                                                            data-target="#custom-collapse"
                                                            aria-expanded="true"
                                                            aria-controls="description-collapse">
                                                        Custom Tab
                                                    </button>
                                                </h5>
                                            </div>
                                            <div id="custom-collapse" class="collapse collapsible"
                                                 aria-labelledby="headingCustom"
                                                 data-parent="#collapse-tabs-accordion">
                                                <div class="card-body p-sm-0 border-sm-0">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade px-0 px-md-12 mb-4 mb-sm-0" id="review" role="tabpanel"
                                         aria-labelledby="review-tab">
                                        <div class="card bg-transparent mb-4 mb-sm-0">
                                            <div class="card-header d-block d-sm-none bg-transparent px-0 py-1"
                                                 id="headingReview">
                                                <h5 class="mb-0">
                                                    <button class="btn font-size-h5 btn-block collapsed"
                                                            data-toggle="collapse"
                                                            data-target="#review-collapse"
                                                            aria-expanded="true"
                                                            aria-controls="description-collapse">
                                                        Reviews (3)
                                                    </button>
                                                </h5>
                                            </div>
                                            <div id="review-collapse" class="collapse collapsible"
                                                 aria-labelledby="headingReview"
                                                 data-parent="#collapse-tabs-accordion">
                                                <div class="card-body p-sm-0 border-sm-0">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
-->
                                </div>
                            </div>
                        </div>
                    </div>
                  [related_products_exists]
                    <div class="relate-products">
                        <h2 class="mb-9 text-left">Produtos Relacionados</h2>
                        <div class="slick-slider"
                             data-slick-options='{"slidesToShow": 4,"autoplay":true,"dots":false,"arrows":true,"responsive":[{"breakpoint": 1000,"settings": {"slidesToShow": 2}},{"breakpoint": 770,"settings": {"slidesToShow": 1,"arrows":false}}]}'>
                           
                     [related_products]
                          	<div class="box">
                                <div class="product card border-0 rounded-0 p-0">
                                  
                                    <div class="position-relative h-100">
                                      
                                        <a href="/pro/[product_related_slug]">
                                            <img src="[product_related_thumb]" alt="[product_related_name]"
                                                 class="card-img-center">
                                        </a>
                                        <div class="justify-content-center ml-auto d-flex">
                                            <a href="[product_favorite_link]" class="item marking iclient-iframe" data-toggle="tooltip"
                                               data-placement="top"
                                               title="Desejo"><i class="fal fa-heart"></i></a>
                                        </div>
                                </div>
                                  
                                    <div class="card-body text-center position-relative">
                                        <a href="/pro/[product_related_slug]"
                                           class="link-hover-secondary-primary font-size-md mb-1">[product_related_name]</a>
                                        <div class="product-meta-wrapper position-relative">
                                            <div class="product-meta position-absolute">
                                                <div class="font-size-md">
                                                    <span class="text-danger"></span>
                                                    <span class="text-dark ">[product_related_price]</span>
                                                </div>
                                            </div>
                                            <div class="add-to-cart position-absolute w-100">
                                                <a href="[product_related_link_cart]"
                                                   class="link-hover-dark-primary font-weight-semibold text-uppercase iclient-cart">Adicionar</a>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                          
                          
[/related_products]
                        </div>
                    </div>
                  [/related_products_exists]
                  
  
                </div>
              
          
              [has_recently_viewed_products]
            <div class="recent-view bg-white pt-7 pb-11 mt-10">
                <div class="container">
                    <div class="mb-8">
                        <h2 class="mb-0">
                            Vistos Recentemente
                        </h2>
                    </div>
                    <div class="row">
                      
                      [recently_viewed_products]
                        <div class="col-lg-4 mb-4 mb-lg-0">
                            <div class="store media align-items-stretch bg-white">
                                <div class="store-image position-relative">
                                    <a href="/pro/[product_slug]">
                                        <img src="[product_photo_crop]" alt="[product_name]">
                                    </a>
                                    <div class="image-content position-absolute d-flex align-items-center">
                                        <div class="content-right ml-auto d-flex">
                                            <a href="[product_favorite_link]" class="item marking iclient-iframe" data-toggle="tooltip"
                                               data-placement="top"
                                               title="Desejo"><i class="fal fa-heart"></i></a>
                                        </div>
                                    </div>
                                </div>
                                <div class="media-body pl-0 pl-sm-3 pt-4 pt-sm-0">
                                    <a href="/pro/[product_slug]"
                                       class="font-size-md font-weight-semibold text-dark d-inline-block mb-2 lh-11"><span
                                            class="letter-spacing-25">[product_name]</span> </a>
                                    
                                    <div>
									<ul class="list-inline store-meta mb-2 lh-1 font-size-sm d-flex align-items-center flex-wrap">
                                        <li class="list-inline-item"> <span class="mr-1">  </span><span
                                                class="text-decoration-none font-weight-semibold">[product_price_to_show]</span></li>
                                    </ul>
                                        <a href="[product_link_cart]" class="text-secondary text-decoration-none address iclient-cart">Adicionar</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                       [/recently_viewed_products]
                    </div>
                  
                  
                  [/has_recently_viewed_products]
                  
                    </div>
            </div>
            </div>
        </div>
        <!-- #wrapper-content end -->

  [include_footer]