{% if j3 is not defined %}
  <style>
    body {
      display: none !important;
    }
  </style>
  <script>
    window.location = 'index.php?route=opencartvip/startup/error';
  </script>
{% endif %}
<!DOCTYPE html>
<html dir="{{ direction }}" lang="{{ lang }}" class="{{ j3.document.getClasses() | join(' ') }}" data-jv="{{ constant('OPENCARTVIP_VERSION') }}" data-ov="{{ constant('VERSION') }}">
<head typeof="og:website">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>{{ title }}</title>
<base href="{{ base }}" />
<link rel="preconnect" href="https://fonts.googleapis.com/" crossorigin>
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
{% if description %}
<meta name="description" content="{{ description }}" />
{% endif %}
{% if keywords %}
<meta name="keywords" content="{{ keywords }}" />
{% endif %}
{% if not j3.document.isPopup() %}
{% for key, tag in j3.loadController('opencartvip/seo/meta_tags') %}
<meta {{ tag.type }}="{{ key }}" content="{{ tag.content }}"/>
{% endfor %}
{% endif %}
<script>window['Opencartvip'] = {{ j3.document.getJs() | json_encode }};</script>
{% if not j3.document.isPopup() %}
<script>{{ j3.loadController('opencartvip/mql') }}</script>
{% endif %}
{% if j3.document.hasFonts() %}
{% if j3.settings.get('performanceAsyncFontsStatus') %}
<script>WebFontConfig = { google: { families: {{ j3.document.getFonts(true) }} } };</script>
{% else %}
<link href="https://fonts.googleapis.com/css?family={{ j3.document.getFonts(false) }}" type="text/css" rel="stylesheet"/>
{% endif %}
{% endif %}
{% for style in j3.document.getStyles(styles) %}
{% if style.content %}
<style>{{ style.content }}</style>
{% else %}
<link href="{{ j3.document.staticUrl(style.href, false) }}" type="text/css" rel="{{ style.rel }}" media="all" />
{% endif %}
{% endfor %}

        {{mlseo_meta}}
      
{% for link in links %}
<link href="{{ link.href }}" rel="{{ link.rel }}" />
{% endfor %}
{% for analytic in analytics %}
{{ analytic }}
{% endfor %}
<style>
{{ j3.document.getCss() }}
</style>
{% if j3.settings.get('customCSS') %}
<style>{{ j3.settings.get('customCSS') }}</style>
{% endif %}
{% for script in j3.document.getScripts('header', scripts) %}
<script src="{{ j3.document.staticUrl(script, false) }}" {% if j3.settings.get('performanceJSDefer') %} defer {% endif %}></script>
{% endfor %}
{% if j3.settings.get('customCodeHeader') %}
{{ j3.settings.get('customCodeHeader') }}
{% endif %}

<!--BOF Product Series-->
			<style>	
				.pds a, .pds a:hover, .pds a:visited
				{
					text-decoration: none;
				}
			
				.pds a.preview
				{
					display: inline-block;
				}
				
				.pds a.preview.pds-current, .pds a.pds-current
				{
					border-bottom: 3px solid orange;
				}
				
				#preview{
					position: absolute;
					border: 1px solid #DBDEE1;
					background: #F8F8F8;
					padding: 5px;
					display: none;
					color: #333;
					z-index: 1000000;
				}
			</style>
			<script type="text/javascript" src="catalog/view/javascript/imagepreview/imagepreview.js"></script>
			<script type="text/javascript">
				$(document).ready(function(){
					pdsListRollover();
				});
				
				function pdsListRollover()
				{
					$('.pds a.pds-thumb-rollover').hover(function(){
						//on hover
						$this = $(this);
						var hoverImage = $this.attr('rel');
						$this.parents('.product-thumb').find('.image a img').attr('src', hoverImage);
					}, function(){
						//on unhover
						$this = $(this);
						var masterImage = $this.attr('master-image');
						$this.parents('.product-thumb').find('.image a img').attr('src', masterImage);
					});
				}
			</script>
			<!--EOF Product Series-->

				<script type="text/javascript">
					function increment(obj){
						/*UpdateQty(quantity.find('.input-number'),!0);*/
						UpdateQty(obj.find('.input-number'), obj,!0);
					}
					function descrement(obj){
						/*UpdateQty(quantity.find('.input-number'),!1);*/
						UpdateQty(obj.find('.input-number'), obj,!1);
					}
					function UpdateQty(t,c,u){
						var min_quantity = c.find('.minus').attr('min');
						var max_quantity = c.find('.plus').attr('max');
						var quantity = getQuantity(t, min_quantity); //parseInt(t.val());
							{% if idquantity.min_quantity %}
								quantity += 1*((u?min_quantity: (quantity>min_quantity)?-min_quantity : 0));
							{% else %}
								quantity += 1*((u?1:-1));
							{% endif %}
						t.attr("value",quantity.toString()).val(quantity.toString());
					}
					function getQuantity(t, min_quantity) {
						var n = parseInt(t.val()); 
						return ("NaN" == typeof n || min_quantity > n) && (n = min_quantity), n
					}
					
					/*function UpdateQty(t,n){var i=getQuantity(t);i+=1*(n?1:-1),1>i&&(i=1),t.attr("value",i.toString()).val(i.toString())}
					function getQuantity(t){var n=parseInt(t.val());return("NaN"==typeof n||1>n)&&(n=1),n}
					function quantity_inc(t){UpdateQty(t.find(".product-quantity"),!0)}
					function quantity_dec(t){UpdateQty(t.find(".product-quantity"),!1)}*/
				</script>
			

			<style type="text/css">
			.popup .inova{display:none;}
.inova{margin-top:-15px;
position: fixed;  bottom: 50px; left: 5px;
z-index:99999;text-decoration:none;


}
.inova a{-webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
.inova a.whatsapp:hover{background:#39599f !important;}
.inova .fa {
    width: 23px;
    height: 21px;
    text-align: center;
    margin: 0 2px;
    display: inline-block;
    font-size: 20px;
    color: #fff;
    border-radius: 2px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.inova .btn {
    font-size: 10px;
    color: rgba(255, 255, 255, 1);
    font-weight: 400;
    text-transform: uppercase;
    background: rgba(235, 88, 127, 1);
    border-width: 2px;
    padding: 9px;
    padding-right: 9px;
    padding-left: 5px;
}
.botao-wpp {
  text-decoration: none;
  color: #eee;
  display: inline-block;
  background-color: #25d366;
  font-weight: bold;
  padding: 1rem 2rem;
  border-radius: 3px;
}

.botao-wpp:hover {
  background-color: darken(#25d366, 5%);
}

.botao-wpp:focus {
  background-color: darken(#25d366, 15%);
}


</style>
  
</head>
<body class="{{ class }}" {% if j3.document.isMobile() %}ontouchstart{% endif %}>

        {% if out_of_stock_show %}
        <style type="text/css">
        .out_of_stock_label{
            color: #FFF;
            word-wrap: break-word;
            float: left;
            font-size: 12px;
            line-height: 22px;
            text-align: center;
            position: absolute;
            left: 24px;
            top: 10px;
            background: #ff9638;
            padding: 0px 7px;
            border-radius: 5px;
            z-index: 1;
        }
        [onclick^=notify_when_available]{
            background: #eee !important;
            color: #888 !important;
            border: 1px solid #ccc;
        }
        [onclick^=notify_when_available] i:before{
            content: "\f0e0" !important;
        }
        .not_available_product img {
          -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
        }
        </style>
        {% endif %}
        {% if out_of_stock_notify %}
        <script type="text/javascript">
        function notify_when_available(product_id){
            $('#notify_when_available').modal('show');
            $('#notify_product_id').val(product_id);
        }
        $(document).ready(function(e){
            $('#notify_submit').click(function(e){
                $.ajax({
                    url: 'index.php?route=extension/module/notify_when_available/add_notify_request',
                    type: 'post',
                    dataType: 'json',
                    data: $("#notify_when_available form").serialize(),
                    beforeSend: function() {
                        $('#notify_submit').button('loading');
                    },
                    complete: function() {
                        $('#notify_submit').button('reset');
                    },
                    success: function(json) {
                        $('.alert-dismissible').remove();

                        if (json['error']) {
                            $('#notify_when_available form').prepend('<div class="alert alert-danger alert-dismissible"><i class="fa fa-exclamation-circle"></i> ' + json['error'] + '</div>');
                        }

                        if (json['success']) {
                            $('#notify_when_available form').prepend('<div class="alert alert-success alert-dismissible"><i class="fa fa-check-circle"></i> ' + json['success'] + '</div>');
                            $('#notify_when_available input').val('');
                            $('#notify_when_available textarea').val('');
                            setTimeout(function(e){
                                $('#notify_when_available').modal('hide');
                            },1200);
                        }
                    }
                });
            });
        });
        </script>
        <div id="notify_when_available" class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title">{{notify_heading}}</h4>
                    </div>
                    <div class="modal-body">
                        <form id="notify_when_available" onclick="return false;">
                        <input type="hidden" name="notify_product_id" value="" id="notify_product_id">
                        <div class="form-group">
                            <label>{{entry_name_notify}}</label>
                            <input type="text" name="notify_name" class="butonlar" id="notify_name" class="form-control" value="{{notify_name}}">
                        </div>
                        <div class="form-group">
                            <label>{{entry_email_notify}}</label>
                            <input type="text" name="notify_email" class="butonlar" id="notify_email" class="form-control" value="{{notify_email}}">
                        </div>
                        <div class="form-group">
                            <label>{{entry_message_notify}}</label>
                            <textarea name="notify_message" id="notify_message" class="form-control"></textarea>
                        </div>
                        <div class="form-group">
                            <button type="button" id="notify_submit" data-loading-text="{{ text_loading }}" class="btn btn-primary">{{button_notify_send}}</button>
                        </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}
       

{% if j3.settings.get('oldBrowserStatus') %}
<div class="old-browser">
  <div class="ob-content">
    <h2 class="ob-title">{{ j3.settings.get('oldBrowserTitle') }}</h2>
    <span class="ob-text">{{ j3.settings.get('oldBrowserText') }}</span>
    <div class="ob-links">
      <a href="https://www.google.com/chrome/" target="_blank" rel="nofollow">
        <img src="{{ j3.settings.get('oldBrowserChrome') }}" alt="Chrome" />
        <span class="ob-name">Chrome</span>
      </a>
      <a href="https://www.mozilla.org/firefox/new/" target="_blank" rel="nofollow">
        <img src="{{ j3.settings.get('oldBrowserFirefox') }}" alt="Firefox" />
        <span class="ob-name">Firefox</span>
      </a>
      <a href="https://www.microsoft.com/en-us/windows/microsoft-edge" target="_blank" rel="nofollow">
        <img src="{{ j3.settings.get('oldBrowserEdge') }}" alt="edge" />
        <span class="ob-name">Microsoft Edge</span>
      </a>
      <a href="https://www.opera.com/" target="_blank" rel="nofollow">
        <img src="{{ j3.settings.get('oldBrowserOpera') }}" alt="opera" />
        <span class="ob-name">Opera</span>
      </a>
      <a href="https://www.apple.com/lae/safari/" target="_blank" rel="nofollow">
        <img src="{{ j3.settings.get('oldBrowserSafari') }}" alt="safari" />
        <span class="ob-name">Safari on Mac</span>
      </a>
    </div>
  </div>
</div>
{% endif %}

{% if not j3.document.isPopup() %}
<div class="mobile-container mobile-main-menu-container">
  <div class="mobile-wrapper-header">
    <span>{{ j3.settings.get('headerMobileMenuTitle') }}</span>
    {% if j3.settings.get('mobileLangPosition') == 'menu' %}
      <div class="language-currency top-menu">
        <div class="mobile-currency-wrapper">
            {{ j3.document.hasClass('mobile-header-active') ? currency : '' }}
        </div>
        <div class="mobile-language-wrapper">
            {{ j3.document.hasClass('mobile-header-active') ? language : '' }}
        </div>
      </div>
    {% endif %}
    <a class="x"></a>
  </div>
  <div class="mobile-main-menu-wrapper">
    {{ j3.document.isPhone() or (j3.document.isTablet() and j3.settings.get('mobileHeaderOn') == 'tablet') ? j3.settings.get('mobile_main_menu') : '' }}
  </div>
</div>

<div class="mobile-container mobile-filter-container">
  <div class="mobile-wrapper-header"></div>
  <div class="mobile-filter-wrapper"></div>
</div>

<div class="mobile-container mobile-cart-content-container">
  <div class="mobile-wrapper-header">
    <span>{{ j3.settings.get('headerMobileCartTitle') }}</span>
    <a class="x"></a>
  </div>
  <div class="mobile-cart-content-wrapper cart-content"></div>
</div>
{% endif %}

{{ j3.loadController('opencartvip/layout', 'popup') }}

<div class="site-wrapper">

  {{ j3.loadController('opencartvip/layout', 'header_notice') }}

  {% if not j3.document.isPopup() %}
  <header class="header-{{ j3.settings.get('headerType') }}">
    {% if not j3.document.hasClass('mobile-header-active') and j3.settings.get('headerType') %}
      {% include 'opencartvip/template/opencartvip/headers/desktop/' ~ j3.settings.get('headerType') ~ '.twig' %}
    {% endif %}
    {% if j3.settings.get('mobileHeaderType') %}
      {% include 'opencartvip/template/opencartvip/headers/mobile/header_mobile_' ~ j3.settings.get('mobileHeaderType') ~ '.twig' %}
    {% endif %}
  </header>
  {% endif %}

  {{ j3.loadController('opencartvip/layout', 'fullscreen_slider') }}
