<!DOCTYPE html>
<html dir="<?php echo $direction; ?>" lang="<?php echo $code; ?>">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <?php if ($description) { ?>
      <meta name="description" content="<?php echo $description; ?>" />
    <?php } ?>
    <?php if ($keywords) { ?>
      <meta name="keywords" content="<?php echo $keywords; ?>" />
    <?php } ?>
    <?php if (!isset($this->request->get['route']) || (isset($this->request->get['route']) && ($this->request->get['route']=='common/home')) ) { ?>
      <meta property="og:url"         content="<?php echo $base; ?>" />
      <meta property="og:type"        content="website" />
      <meta property="og:locale"      content="<?php echo $lang; ?>" />
      <meta property="og:title"       content="<?php echo $title; ?>" />
      <meta property="og:description" content="<?php echo $description; ?>" />
        <?php if(isset($logo['jpg']) && ($logo['jpg']!='')){ ?>
          <meta property="og:image"       content="<?php echo $logo['jpg']; ?>" />
        <?php } ?>
    <?php } ?>
    <meta name="theme-color" content="<?php echo $this->config->get('wg24_btn_1bg_col')?>">
    <meta name="apple-mobile-web-app-status-bar-style" content="<?php echo $this->config->get('wg24_btn_1bg_col')?>">
    <meta name="msapplication-navbutton-color" content="<?php echo $this->config->get('wg24_btn_1bg_col')?>">
    <title><?php echo $title; ?></title>

    <base id="base-urls" href="<?php echo $base ?>" data-base-url-loja="<?php echo $base ?>">

    <?php if (isset($font_awesome_files)) { ?>
      <link rel="preload" href="<?php echo $font_awesome_files['fa-brands-400'] ?>" as="font" type="font/woff2" crossorigin>
      <link rel="preload" href="<?php echo $font_awesome_files['fa-regular-400'] ?>" as="font" type="font/woff2" crossorigin>
      <link rel="preload" href="<?php echo $font_awesome_files['fa-solid-900'] ?>" as="font" type="font/woff2" crossorigin>
    <?php } ?>

    <style>
      @font-face {
        font-family: 'Font Awesome 6 Brands';
        font-style: normal;
        font-weight: normal;
        font-display: auto;
        src: url("./catalog/view/theme/vista/plugins/fontawesome/webfonts/fa-brands-400.eot");
        src: url("./catalog/view/theme/vista/plugins/fontawesome/webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("<?php echo $font_awesome_files['fa-brands-400'] ?>") format("woff2"), url("./catalog/view/theme/vista/plugins/fontawesome/webfonts/fa-brands-400.woff") format("woff"), url("./catalog/view/theme/vista/plugins/fontawesome/webfonts/fa-brands-400.ttf") format("truetype");
        font-display: swap;
      }

      @font-face {
        font-family: 'Font Awesome 6 Free';
        font-style: normal;
        font-weight: 400;
        font-display: auto;
        src: url("./catalog/view/theme/vista/plugins/fontawesome/webfonts/fa-regular-400.eot");
        src: url("./catalog/view/theme/vista/plugins/fontawesome/webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("<?php echo $font_awesome_files['fa-regular-400'] ?>") format("woff2"), url("./catalog/view/theme/vista/plugins/fontawesome/webfonts/fa-regular-400.woff") format("woff"), url("./catalog/view/theme/vista/plugins/fontawesome/webfonts/fa-regular-400.ttf") format("truetype");
        font-display: swap;
      }

      @font-face {
        font-family: 'Font Awesome 6 Free';
        font-style: normal;
        font-weight: 900;
        font-display: auto;
        src: url("./catalog/view/theme/vista/plugins/fontawesome/webfonts/fa-solid-900.eot");
        src: url("./catalog/view/theme/vista/plugins/fontawesome/webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("<?php echo $font_awesome_files['fa-solid-900'] ?>") format("woff2"), url("./catalog/view/theme/vista/plugins/fontawesome/webfonts/fa-solid-900.woff") format("woff"), url("./catalog/view/theme/vista/plugins/fontawesome/webfonts/fa-solid-900.ttf") format("truetype");
        font-display: swap;
      }

      .product-title-with-lines::before,
      .product-title-with-lines::after {
        background: <?php echo $this->config->get('product_list_title_line_color');?>;
      }

      <?php if($this->config->get('menu_border_radius')) { ?>
        .submenu.js-submenu,
        .submenu__content.js-submenu__content.submenu__content--departments{
          border-radius: <?php echo $this->config->get('menu_border_radius');?>;
        }
      <?php } ?>

    </style>

    <script>
      Object.freeze(console);
      var promotions = <?php echo json_encode($promotion_list) ?>;
      var columnLarge = <?php echo $this->config->get('wg24_productbox_size')?>
    </script>

    <?php if ($icon) { ?>
      <link href="<?php echo $icon; ?>" rel="icon" />
    <?php } ?>
    <?php foreach ($links as $link) { ?>
      <link href="<?php echo $link['href']; ?>" rel="<?php echo $link['rel']; ?>" />
    <?php } ?>

    <?php foreach ($propertys as $property) { ?>
      <meta property="<?php echo $property['property']; ?>" content="<?php echo $property['content']; ?>" />
    <?php } ?>

    <meta name="robots" content="INDEX,FOLLOW">

    <style>
      /*=============================== HEADER ===============================*/
      .header__logo * {
        max-width: 100%;
        height: auto;
      }
      .admin-logged-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .admin-logged-bar > * {
        flex-grow: 1;
      }

      /*=================================== MENU =============================*/
      .menu {
        height: 44px;
      }
      .menu * {
        opacity: 0;
      }

      /*============================= Plugin Slider - INICIO =============================*/
      .carousel-container,
      .carousel-wrapper,
      .carousel-list,
      .item-column {
        margin: 0;
        padding: 0;
        outline: 0;

        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
      }
      .carousel-full {
        width: calc(100vw - 6.5rem);
        margin-left: 50%;
        -webkit-transform: translate(-50%);
        -moz-transform: translate(-50%);
        -ms-transform: translate(-50%);
        transform: translate(-50%);
      }
      .carousel-container {
        position: relative;
        margin: 0 auto;
      }
      .store-rating {
        margin-top: 60px;
      }
      .carousel-container:active {
        cursor: move;
      }
      .carousel .carousel-container {
        border: none;
      }
      .carousel-wrapper {
        position: relative;
        overflow: hidden;
        width: calc(100% + 16px);
        margin: -8px;
      }
      @media screen and (max-width: 480px) {
        .carousel-wrapper {
          width: calc(100% + 8px);
          margin: -4px;
        }
      }
      @media (-moz-touch-enabled: 1), (pointer: coarse) {
        .carousel-wrapper {
          overflow-x: scroll;
        }
      }
      .slide-home .carousel-wrapper {
        width: calc(100% + 4px);
        margin: 0 -2px;
      }
      .slide-home .item-column {
        padding: 0
      }
      .carousel-list:after {
        content: "";
        display: block;
        clear: both;
      }
      .carousel-list {
        width: 100%;

        position: relative;
        left: 0;
        list-style: none;

        display: -webkit-box;
        display:    -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display:         flex;
        display: flex;
        -ms-flex: 0 1 auto;
        -webkit-box-flex: 0;
        flex: 0 1 auto;
        -ms-flex-direction: row;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        flex-direction: row;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -ms-flex-flow: row nowrap;
            flex-flow: row nowrap;
        -ms-flex-wrap: nowrap;
      }
      .carousel-list .item-column {
        overflow: hidden;
        position: relative;

        /* não retirar */
        min-width: 238px;
        max-width: 300px;
      }

      /* Controles - INICIO */
      .carousel-container .indicators-container {
        width: 100%;
        height: 2.25rem;

        text-align: center;

        position: absolute;
        z-index: 1;
        left: 0;
        bottom: 0;
      }
      .carousel-container .indicators {
        cursor: pointer;
        padding: .875rem;
        display: inline-block;
      }
      .carousel-container .indicators .indicators-content {
        height: 8px;
        width: 8px;
        border-radius: 50%;
        background-color: #fff;
        transition: .15s linear;
        box-shadow:
          0px 3px 1px -2px rgba(0, 0, 0, 0.2),
          0px 2px 2px 0px rgba(0, 0, 0, 0.14),
          0px 1px 5px 0px rgba(0,0,0,.12);
      }
      .carousel-container .indicators.active .indicators-content {
        background-color: #000;
      }

      .carousel-container .time-line {
        background-color: #DDD;
        width: 100%;
      }
      .carousel-container .time-line .time-line-current-time {
        background-color: #000;
        height: 1px;
        width: 100%;
      }

      .text-price{
        color: <?php echo $this->config->get('wg24_l_linkc') ?>;
      }

      .carousel-container .control {
        background: <?php echo $this->config->get('wg24_home_sbtn_bgcol')?>;
        color: <?php echo $this->config->get('wg24_home_btn_hbr_txclr')?>;

        width: 2.25rem;
        height: 2.25rem;
        border-radius: .25rem;
        cursor: pointer;
        opacity: 0;

        font-size: 1.25rem;
        line-height: 2.25rem;
        text-align: center;
        text-decoration: none;

        z-index: 1;
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
        -moz-transform: translate(0, -50%);
        -webkit-transform: translate(0, -50%);

        transition: .3s ease-in-out;
        -webkit-transition: .3s ease-in-out;
        -moz-transition: .3s ease-in-out;
        -o-transition: .3s ease-in-out;

        box-shadow:
          0px 3px 5px -1px rgba(0, 0, 0, 0.2),
          0px 6px 10px 0px rgba(0, 0, 0, 0.14),
          0px 1px 18px 0px rgba(0,0,0,.12);
      }
      .carousel-container .control i {
        position: absolute;
        bottom: 50%;
        right: 50%;
        -webkit-transform: translate(50%, 50%);
        -ms-transform: translate(50%, 50%);
        transform: translate(50%, 50%);
      }
      .carousel-container .control:hover {
        background: <?php echo $this->config->get('wg24_home_sbtn_hbr_bgclr')?>;

        box-shadow:
          0px 5px 5px -3px rgba(0, 0, 0, 0.2),
          0px 8px 10px 1px rgba(0, 0, 0, 0.14),
          0px 3px 14px 2px rgba(0,0,0,.12);
      }
      .carousel-container .control img {
        display: block;
        margin: 6px;
      }
      .carousel-container .control.prev {
        left: .5rem;
      }
      .carousel-container .control.next {
        right: .5rem;
      }
      .carousel-container:hover .control {
        opacity: 1;
      }
      .carousel-container:hover .control.prev {
        left: 0;
      }
      .carousel-container:hover .control.next {
        right: 0;
      }

      /* Controles - FINAL */
      .item-column > picture img, .item-column > a > picture img,
      .item-column > img, .item-column > a > img {
        width: 100%;
      }
      .carousel .item-column {
        text-align: center;
      }
      .carousel .item-column > img,
      .carousel .item-column > picture > img,
      .carousel .item-column > a > img,
      .carousel .item-column > a > picture > img{
        width: auto;
        max-width: 100%;
      }
      @media screen and (min-width: 560px) {
        .img-full-responsive .item-column > picture img,
        .img-full-responsive .item-column > a > picture img,
        .img-full-responsive .item-column > img,
        .img-full-responsive .item-column > a > img {
          width: 100%;
          position: absolute;
          left: 50%;
          min-width: 1920px;
          -webkit-transform: translate(-50%,0);
            -moz-transform: translate(-50%,0);
              -ms-transform: translate(-50%,0);
                  transform: translate(-50%,0);
        }
      }
      @media screen and (max-width: 1140px) and (min-width: 560px) {
        .img-full-responsive .item-column > picture img,
        .img-full-responsive .item-column > a > picture img,
        .img-full-responsive .item-column > img,
        .img-full-responsive .item-column > a > img {
          min-width: initial;
          width: calc(168.42105263157896vw);
          transform: translate(calc(-34.21052631578948vw - 5px),0);
          position: initial;
          left: initial;
        }
      }
      @media screen and (max-width: 1140px) {
        .img-full-responsive .item-column.banner-html {
          height: initial!important;
        }
      }
      .slide-image,
      .slide-image .item-column {
        border: none;
      }
      /*PRODUTO*/
      .thumb {
        box-sizing: border-box;
      }
      .more-views .item-column {
        padding: 4px;
        border-right: none;
      }
      .more-views.carousel-container{
        border: none;
      }
      .more-views .thumb {
        max-height: 100%;
        max-width: 100%;
        border: none;
        padding: 0;
      }
      .more-views .elevatezoom-gallery {
        border: 1px solid #EEE;
        display: flex;
        padding: 5px;
        height: 100%;
        align-items: center;
        justify-content: center;
      }
      .more-views  .video:before {
        content: '';
        width: 36px;
        height: 26px;
        background: #F00;
        border-radius: 7px;
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      .more-views  .video:after {
        content: '';
        width: 0;
        height: 0;
        border: 6px solid transparent;
        border-left-width: 12px;
        border-left-color: #FFF;
        margin-left: 4px;
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      /*============================= Plugin Slider - FINAL =============================*/

      /*================================== INICIO - Banner html =================================*/
      .banner-html * {
        box-sizing: border-box!important;
      }
      .banner-html .container-banner-html {
          height: 100%;
          max-width: 1140px;
          margin: 0 auto;
      }
      .img-loading {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -10px;
        margin-left: -10px;
        max-width: 20px!important;
        max-height: 20px!important;
        min-width: 20px!important;
        min-height: 20px!important;
        width: 20px!important;
        height: 20px!important;
      }

      .btn-banner {
        background-color: <?php echo $this->config->get('wg24_btnsearch_color')?>!important;
        color: <?php echo $this->config->get('wg24_link_hover_color_stick')?>!important;
      }

      .banner-html .banner-product-details .banner-html-product-title{
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }

      @media screen and (max-width: 480px) {
        .banner-html .btn-banner {
          display: none;
        }
      }

      @media screen and (min-width: 560px) {
        .banner-html .container-banner-html {
          display: -webkit-box;
          display:    -moz-box;
          display: -ms-flexbox;
          display: -webkit-flex;
          display:         flex;
          display: flex;
          -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
          -ms-flex-flow: row nowrap;
              flex-flow: row nowrap;
          -ms-flex-wrap: nowrap;
        }
        .banner-html .banner-product-image,
        .banner-html .banner-product-details {
          text-align: center;
          /* float: left; */
          position: relative;
          height: 100%;
        }
        .banner-html .banner-product-details {
          width: 50%;
        }
        .banner-html .banner-product-image {
          width: 48%;
          margin-right: 2%;
        }
        .banner-html .banner-product-image img{
          max-height: 100%;
          width: auto;
          max-width: 60%;
          max-height: 96%;
          position: absolute;
          top: 50%;
          left: 50%;
          -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
              -ms-transform: translate(-50%, -50%);
                  transform: translate(-50%, -50%);
        }
        .banner-html .banner-product-details .prod_image_detail {
          width: 100%!important;
          position: absolute;
          top: 50%;
          -webkit-transform: translate(0,-50%);
            -moz-transform: translate(0,-50%);
              -ms-transform: translate(0,-50%);
                  transform: translate(0,-50%);
        }
        .banner-html .banner-product-details .price-box,
        .banner-html .banner-product-details .actions {
          float: left;
          width: 49%!important;
        }
        .banner-html .banner-product-details .price-box{ margin-right: 2%; }
        .banner-html .banner-product-details .banner-html-product-title {
          width: 80%;
          max-width: 90%;
          margin: 0 auto;
          word-wrap: break-word;
        }
        .item-column.banner-html .banner-product-image {
          position: relative;
        }
        .banner-html-price {
          font-size: 2.6vw;
          font-weight: bold;
          margin-bottom: 20px;
          margin-top: 10px;
          -webkit-filter: brightness(75%);
                  filter: brightness(75%);
        }
        .banner-html > img.img-principal,
        .banner-html > a > img.img-principal {
          display: block;
        }
        .banner-html .normal-price {
          text-decoration: line-through;
        }
        .banner-html .normal-price-container {
          font-size: 70%;
          display: block;
          -webkit-filter: brightness(60%);
                  filter: brightness(60%);
        }
        .banner-html .prefix-price{
          font-size: 80%;
        }
        .banner-html .sale-off-label {
          border-radius: 50%;
          height: 60px;
          width: 60px;
          line-height: 60px;
          font-weight: bolder;
          text-align: center;
          position: absolute;
          top: 15px;
          background: #DD4B39;
          color: #FFF;
          z-index: 1;
        }

        .item-column.banner-html .banner-product-image {
          position: relative;
        }
      }
      /*============================ FINAL - Banner html ===========================*/
      /*============================= INICIO - Modelo-1 ============================*/
      @media screen and (min-width: 560px) {
        .banner-html.model-1 .sale-off-label {
          right: -48px!important;
        }
        .banner-html.model-1 .banner-product-image:before,/* background da imagem do produto */
        .banner-html.model-1 .banner-product-details:before,/* background das informacoes do produto */
        .banner-html.model-1 .banner-product-image:after {/* faixa a esqueda da imagem do produto */
          content: "";
          display: block;
          position: absolute;
          left: 50%;
          -webkit-transform: skewX(-32deg) translate(-50%,0);
            -moz-transform: skewX(-32deg) translate(-50%,0);
              -ms-transform: skewX(-32deg) translate(-50%,0);
                  transform: skewX(-32deg) translate(-50%,0);
        }
        .banner-html.model-1 .banner-product-image:before {/* background da imagem do produto */
          background: #FFF;
          height: 100%;
          top: 0;
          width: 100%;
        }
        .banner-html.model-1 .banner-product-details:before,/* background das informacoes do produto */
        .banner-html.model-1 .banner-product-image:after {/* faixa a esqueda da imagem do produto */
          height: 100%;
          width: 108%;
          top: 0;
        }
        .banner-html.model-1 .banner-product-image:after {/* faixa a esqueda da imagem do produto */
          left: -55%;
          background-image: url(catalog/view/theme/vista/image/padrao-bola.png);
        }
        .item-column.banner-html.model-1 {
          background-image: url(catalog/view/theme/vista/image/padrao-bola.png);
        }
      }
      @media screen and (max-width: 559px) {
        .banner-html.model-1 .banner-product-image:before {
          bottom: -10%;
          content: "";
          display: block;
          position: absolute;
          width: 100%;
          height: 140%;
          left: 0;
          transform: skewY(-8deg);
          background-color: #FFF;
        }

        .banner-html.model-1 .banner-product-image a {
          position: relative;
        }

        .banner-html.model-1 .banner-product-details:before {
          bottom: -42%;
          content: "";
          display: block;
          position: absolute;
          width: 100%;
          height: 50%;
          left: 0!important;
          transform: skewY(-8deg);
          background-image: url(catalog/view/theme/vista/image/padrao-bola.png);
        }
      }

      /*============================= FINAL - Modelo-1 =============================*/
      /*============================= INICIO - Modelo-2 ============================*/
      @media screen and (min-width: 560px) {
        .banner-html.model-2 .sale-off-label {
          right: 15px!important;
        }
        .item-column.banner-html.model-2 {
          background-image: url(catalog/view/theme/vista/image/padrao-quadriculado.png);
        }
        .banner-html.model-2 .banner-product-image:before {
          content: "";
          display: block;
          height: 52.6vw;
          width: 52.6vw;
          max-width: 600px;
          max-height: 600px;
          top: 50%;
          left: 58%;
          border-radius: 50%;
          position: absolute;
          -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
              -ms-transform: translate(-50%, -50%);
                  transform: translate(-50%, -50%);
          background: #FFF;
        }
        .banner-html.model-2 .banner-product-image img {
          left: 58%;
        }
      }

      @media screen and (max-width: 559px) {
        .banner-html.model-2 .container-banner-html {
          background-image: url(catalog/view/theme/vista/image/padrao-quadriculado.png);
        }

        .banner-html.model-2 .banner-product-image:before {
          content: "";
          display: block;
          position: absolute;
          width: 217%;
          height: 356%;
          left: -60%;
          bottom: -17%;
          border-radius: 50%;
          background-color: #FFF;
        }

        .banner-html.model-2 .banner-product-image a {
          position: relative;
        }
      }
      /*============================= FINAL - Modelo-2 =============================*/
      /*============================= INICIO - Modelo-3 ============================*/
      @media screen and (min-width: 560px) {
        .banner-html.model-3 .banner-product-details .banner-html-product-title {
          border-top: 5px solid transparent;
          border-bottom: 5px solid transparent;
          margin-bottom: 15px;
        }
        .banner-html.model-3 .sale-off-label {
          right: 15px!important;
        }
        .banner-html.model-3 .banner-product-image {
          width: 50%;
          margin-right: 0;
        }
        .banner-html.model-3 .banner-product-image:before {/* background da imagem do produto */
          content: "";
          display: block;
          position: absolute;
          height: 100%;
          width: 100%;
          left: -100%;
        }
        .banner-html.model-3 .banner-html-price {
          -webkit-filter: brightness(100%);
                  filter: brightness(100%);
        }
      }
      @media screen and (max-width: 559px) {
        .banner-html.model-3 .banner-product-details .banner-html-product-title {
          border-top: 5px solid transparent;
          border-bottom: 5px solid transparent;
          margin-bottom: 15px;
        }
      }
      /*============================= FINAL - Modelo-3 =============================*/
      /*============================= INICIO - Modelo-4 ============================*/
      @media screen and (min-width: 560px) {
        .banner-html.model-4 .banner-product-image {
          width: 50%;
          margin-right: 0;
          background-color: #fff;
        }
        .banner-html.model-4 .banner-product-image::before {
          content: '';
          position: absolute;
          width: 50%;
          right: -55%;
          top: 50%;
          border: 500px solid transparent;
          border-right-color: rgba(0,0,0,.1);
          -webkit-transform: translate(50%,-50%);
          transform: translate(50%,-50%);
          z-index: 1;
        }
        .banner-html.model-4 .banner-product-image a {
          display: block;
          width: 100%;
          height: 100%;
          position: relative;
          z-index: 1;
        }
        .banner-html.model-4 .banner-product-image a::before {
          content: '';
          position: absolute;
          width: 3.5vw;
          height: 3.5vw;
          left: 15%;
          top: 15%;
          background-color: transparent;
          z-index: 1;
        }
        .banner-html.model-4 .banner-product-image a::after {
          content: '';
          position: absolute;
          width: 3.5vw;
          height: 3.5vw;
          right: 15%;
          bottom: 15%;
          background-color: transparent;
          z-index: 1;
        }
        .banner-html.model-4 .sale-off-label {
          left: calc(100% - 30px);
          top: calc(50% - 30px);
        }
        .banner-html.model-4 .banner-product-details {
          width: 50%;
        }
        .banner-html.model-4 .banner-product-details::before {
          content: '';
          position: absolute;
          right: 60%;
          top: 50%;
          border: 500px solid transparent;
          border-right-color: rgba(0,0,0,.1);
          -webkit-transform: translate(50%,-50%);
          transform: translate(50%,-50%);
        }
        .banner-html.model-4 .banner-product-details::after {
          content: '';
          position: absolute;
          right: 40%;
          top: 50%;
          border: 500px solid transparent;
          border-right-color: rgba(0,0,0,.1);
          -webkit-transform: translate(50%,-50%);
          transform: translate(50%,-50%);
        }
        .banner-html.model-4 .prod_image_detail {
          z-index: 1;
        }
        .banner-html.model-4 .banner-html-price {
          margin-bottom: 10px;
        }
        .banner-html.model-4 .banner-html-product-title {
          /* font-weight: bold; */
          position: relative;
          color: #fff;
        }
        .banner-html.model-4 .banner-html-price,
        .banner-html.model-4 .promotional-price-container,
        .banner-html.model-4 .normal-price-container {
          color: #fff;
          -webkit-filter: brightness(100%);
          filter: brightness(100%);
        }
        .banner-html.model-4 .normal-price {
          font-size: 16px;
          font-weight: normal;
          text-decoration: none;
        }
        .banner-html.model-4 .normal-price::before {
          content: 'De ';
        }
        .banner-html.model-4 .normal-price::after {
          content: ' por';
        }
        .banner-html.model-4 .prefix-price {
          display: none;
        }
        .banner-html.model-4 .promotional-price {
          font-weight: bold;
        }
      }

      @media screen and (max-width: 559px) {
        .banner-html.model-4 .banner-product-image:before {
          bottom: -10%;
          content: "";
          display: block;
          position: absolute;
          width: 100%;
          height: 140%;
          left: 0;
          background-color: #FFF;
        }

        .banner-html.model-4 .banner-product-image a {
          display: block;
          height: 100%;
          width: 100%;
          position: relative;
        }

        .banner-html.model-4 .banner-product-image a::before {
          content: '';
          position: absolute;
          width: 3.5vw;
          height: 3.5vw;
          left: 24px;
          top: 24px;
          background-color: transparent;
          z-index: 1;
        }

        .banner-html.model-4 .banner-product-image a::after {
          content: '';
          position: absolute;
          width: 3.5vw;
          height: 3.5vw;
          bottom: 24px;
          right: 24px;
          background-color: transparent;
          z-index: 1;
        }

        .banner-html.model-4 .banner-product-details {
          overflow: hidden;
        }

        .banner-html.model-4 .banner-product-details:before {
          content: '';
          display: block;
          position: absolute;
          border: 400px solid transparent;
          border-right-color: rgba(0,0,0,.1);
          width: 0;
          height: 0;
          bottom: 50%;
          right: 0;
          transform: translate(0, 50%);
        }

        .banner-html.model-4 .banner-product-details:after {
          content: '';
          display: block;
          position: absolute;
          border: 300px solid transparent;
          border-right-color: rgba(0,0,0,.1);
          width: 0;
          height: 0;
          bottom: 50%;
          right: 0;
          transform: translate(0, 50%);
        }

        .banner-html.model-4 .prod_image_detail .inner {
          position: relative;
          z-index: 1;
        }

        .banner-html.model-4 .prod_image_detail:after {
          content: '';
          display: block;
          position: absolute;
          border: 200px solid transparent;
          border-right-color: rgba(0,0,0,.1);
          width: 0;
          height: 0;
          bottom: 50%;
          right: 0;
          transform: translate(0, 50%);
        }

      }
      /*============================= FINAL - Modelo-4 ============================*/

      @media screen and (min-width:1140px) {
        .banner-html .banner-product-details .price-box{
          margin-right: 2%;
        }
        .banner-html-price {
          font-size: 50px;
        }
      }

      @media screen and (max-width: 559px) {
        .banner-html-price {
          font-size: 34px;
        }

        .container-banner-html img {
          max-height: 100%;
          height: 100vw;
          margin: 0 auto;
        }

        .banner-product-image,
        .banner-product-details {
          position: relative;
          height: 50%;
        }

        .banner-product-details {
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .banner-product-details .inner a, .banner-product-details .inner > div {
          margin: 6px;
        }
      }
    </style>

    <?php foreach ($styles as $style) { ?>
      <link href="<?php echo $style['href']; ?>" rel="<?php echo $style['rel']; ?>" media="none" onload="this.media='all'">
      <noscript>
        <link href="<?php echo $style['href']; ?>" rel="<?php echo $style['rel']; ?>">
      </noscript>
    <?php } ?>

    <script src="<?php echo $lab; ?>"></script>
    <script>
      $LAB.setGlobalDefaults({AlwaysPreserveOrder:true});
      var base =  document.querySelector('base');
      if (base && base.href) {
        $LAB.setGlobalDefaults({AlwaysPreserveOrder:true, BasePath: base.href });
      }

      // CustomEvent polyfill
      (function () {
        if (typeof window.CustomEvent === "function") return false;

        function CustomEvent(event, params) {
          params = params || { bubbles: false, cancelable: false, detail: undefined };
          var evt = document.createEvent('CustomEvent');
          evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
          return evt;
        }

        CustomEvent.prototype = window.Event.prototype;
        window.CustomEvent = CustomEvent;
      })();

      // Dispara os eventos
      function triggerEvent(eventName) {
        var EVENT = new CustomEvent(eventName);
        window.dispatchEvent(EVENT);
      }

      /* Trabalha em conjunto com o arquivo 'dispatch-event-load-scripts.js' */
      window.scriptsLoaded = false;
      window.windowLoaded = false;
      window.documentReaded = false;

      // Indica se a janela foi carregada
      window.addEventListener('load', function () {
        window.windowLoaded = true;
        triggerEvent('window');
      });

      // Indica se o documento foi lido
      if (document.addEventListener) {
        document.addEventListener('DOMContentLoaded', function(){
          triggerEvent('document');
          window.documentReaded = true;
        });
      } else {
        document.attachEvent('onreadystatechange', function(){
          if (document.readyState=='complete') {
            triggerEvent('document');
            window.documentReaded = true;
          }
        });
      }

      // Mostra os eventos no console
      // window.addEventListener('scripts_document', function () {
      //   console.log('scripts_document');
      // });
      // window.addEventListener('scripts_window', function () {
      //   console.log('scripts_window');
      // });
      // window.addEventListener('scripts', function () {
      //   console.log('scripts');
      // });

      // Executa a função se o evento já foi disparado
      // ou atribui a função para ser executada no disparo do evento
      window.waitEvent = function(event, func) {
        switch (event) {
          case 'scripts':
            if (window.scriptsLoaded) {
              func();
            } else {
              window.addEventListener('scripts', function () {
                func();
              });
            }
            break;
          case 'document':
            if (window.documentReaded) {
              func();
            } else {
              window.addEventListener('document', function () {
                func();
              });
            }
            break;
          case 'scripts_document':
            if (window.documentReaded && window.scriptsLoaded) {
              func();
            } else {
              window.addEventListener('scripts_document', function () {
                func();
              });
            }
            break;
          case 'window':
            if (window.windowLoaded) {
              func();
            } else {
              window.addEventListener('window', function () {
                func();
              });
            }
            break;
          case 'scripts_window':
            if (window.windowLoaded && window.scriptsLoaded) {
              func();
            } else {
              window.addEventListener('scripts_window', function () {
                func();
              });
            }
            break;
          default:
            console.error('FUTURA - Evento inválido');
            break;
        }
      }

      var scripts = <?php echo json_encode($scripts) ?>;
      if (scripts) {
        for (var key in scripts) {
          if (scripts.hasOwnProperty(key)) {
            $LAB.setOptions({AllowDuplicates:true}).script(scripts[key]).wait();
          }
        }
      }
    </script>

    <script type="application/ld+json">
    {
      "@context": "http://schema.org",
      "@type": "WebSite",
      "url": "<?php echo $base; ?>",
      "potentialAction": {
        "@type": "SearchAction",
        "target": "<?php echo $base; ?>index.php?route=product/search&search={query}",
        "query-input": "required name=query"
      }
    }
    </script>

    <?php if(isset($wg24_l_add_custom_jss)){ ?>
      <script type="text/javascript">
        <?php echo html_entity_decode($wg24_l_add_custom_jss[$default_lang]); ?>
      </script>
    <?php } ?>


    <script type="text/javascript">
      window.waitEvent('scripts', function() {
        //validação para os campos que não podem aceitar numeros não parar de funcionar
        if($('.numeric').length > 0) $('.numeric').numeric();
        if($('.validaemail').length > 0) $('.validaemail').validaemail();
      });
    </script>

    <?php
      $fontsArray = array();
      if($this->config->get('wg24_body_font_source')=="google") {
        $fontName = $this->config->get("wg24_body_fontto_google");
        array_push($fontsArray, str_replace(' ', '+', substr($fontName, 0, (strrpos($fontName, ',')) ? strrpos($fontName, ',') : strlen($fontName))).':400,700');
      }
      if($this->config->get('wg24_header_font_source')=="google"){
        $fontName = $this->config->get("wg24_header_fontto_google");
        array_push($fontsArray, str_replace(' ', '+', substr($fontName, 0, (strrpos($fontName, ',')) ? strrpos($fontName, ',') : strlen($fontName))).':400,700');
      }

      $fontsArray = array_unique($fontsArray);
    ?>

    <?php if(!empty($fontsArray)) { ?>
        <link href="https://fonts.googleapis.com/css?family=<?php echo implode('|', $fontsArray) ?>" rel="stylesheet" media="none" onload="this.media='all'">
        <noscript>
          <link href="https://fonts.googleapis.com/css?family=<?php echo implode('|', $fontsArray) ?>" rel="stylesheet">
        </noscript>
    <?php } ?>

    <script type="text/javascript">
      // variavel que armazena as classes dos módulos de produtos para
      // usar no scripts-async.js
      var productModules = [];
    </script>

    <style type="text/css">
      body,
      input,
      textarea,
      select,
      button {
        font-family: <?php if($this->config->get('wg24_body_font_source') == "google") {
          echo str_replace('+', ' ', $this->config->get('wg24_body_fontto_google')).', sans-serif';
        } else {
          echo str_replace('+', ' ', $this->config->get('wg24_body_fontto_system'));
        } ?>;
      }

      [class*="heading-"],
      [class^="heading-"] {
        font-family: <?php if($this->config->get('wg24_header_font_source') == "google") {
          echo str_replace('+', ' ', $this->config->get('wg24_header_fontto_google')).', sans-serif';
        } else {
          echo str_replace('+', ' ', $this->config->get('wg24_header_fontto_system'));
        } ?>;
        text-transform: <?php echo $this->config->get('wg24_heading_transfrom')?>;
        color:<?php echo $this->config->get('wg24_l_header_color')?>;
        font-weight: normal;
      }

      .heading-product-list-title{
        color:<?php echo $this->config->get('product_list_title_color')?>;  
      }

      .heading-product-list-subtitle{
        color:<?php echo $this->config->get('product_list_subtitle_color')?>;
      }


      <?php if(isset($wg24_l_add_custom_css)){
        echo html_entity_decode($wg24_l_add_custom_css[$default_lang]);
      } ?>

      .btn-base-context:hover > i{
        color: <?php echo $this->config->get('wg24_l_hcolor')?>;
      }

      <?php if($this->config->get('config_rating_status')=="0") { ?>
        .inner .ratings .rating-box { display:none !important; }
      <?php } ?>

      body {
        color:<?php echo $this->config->get('wg24_l_body_fc'); ?>;
        <?php if($this->config->get('wg24_backgroun_image_show')=="enable") { ?>
          <?php if($this->config->get('wg24_body_cus_pattan')) { ?>
            background: url("<?php  echo  $base.'image/'.$this->config->get('wg24_body_cus_pattan')?>") <?php echo $this->config->get('wg24_bg_repeat')?> <?php echo $this->config->get('wg24_bg_attachment')?> <?php echo $this->config->get('wg24_bg_positin')?> <?php echo $this->config->get('wg24_l_bodyb')?>;
          <?php } else { ?>
            background: url("catalog/view/theme/vista/image/theme_patterns/<?php echo $this->config->get('we24_default_parttern')?>.png") <?php echo $this->config->get('wg24_bg_repeat')?> <?php echo $this->config->get('wg24_bg_attachment')?> <?php echo $this->config->get('wg24_bg_positin')?> <?php echo $this->config->get('wg24_l_bodyb')?>;
          <?php } ?>
        <?php } ?>
        background-color:<?php echo $this->config->get('wg24_l_bodyb')?>;
      }

      .heading-1 {
        font-size: <?php echo $font_size['title_product']['mobile']['font_size'] ?>;
        line-height: <?php echo $font_size['title_product']['mobile']['line_height'] ?>;
      }
      .heading-2 {
        font-size: <?php echo $font_size['title_page']['mobile']['font_size'] ?>;
        line-height: <?php echo $font_size['title_page']['mobile']['line_height'] ?>;
      }
      .heading-3 {
        font-size: <?php echo $font_size['title_aside']['mobile']['font_size'] ?>;
        line-height: <?php echo $font_size['title_aside']['mobile']['line_height'] ?>;
      }
      /* 768px */
      @media only screen and (min-width: 48em) {
        .heading-1 {
          font-size: <?php echo $font_size['title_product']['tablet']['font_size'] ?>;
          line-height: <?php echo $font_size['title_product']['tablet']['line_height'] ?>;
        }
        .heading-2 {
          font-size: <?php echo $font_size['title_page']['tablet']['font_size'] ?>;
          line-height: <?php echo $font_size['title_page']['tablet']['line_height'] ?>;
        }
        .heading-3 {
          font-size: <?php echo $font_size['title_aside']['tablet']['font_size'] ?>;
          line-height: <?php echo $font_size['title_aside']['tablet']['line_height'] ?>;
        }
      }
      /* 992px */
      @media only screen and (min-width: 62em) {
        .heading-1 {
          font-size: <?php echo $font_size['title_product']['desktop']['font_size'] ?>;
          line-height: <?php echo $font_size['title_product']['desktop']['line_height'] ?>;
        }
        .heading-2 {
          font-size: <?php echo $font_size['title_page']['desktop']['font_size'] ?>;
          line-height: <?php echo $font_size['title_page']['desktop']['line_height'] ?>;
        }
        .heading-3 {
          font-size: <?php echo $font_size['title_aside']['desktop']['font_size'] ?>;
          line-height: <?php echo $font_size['title_aside']['desktop']['line_height'] ?>;
        }
      }

    </style>

      <style type="text/css">
        a {
          color:<?php echo $this->config->get('wg24_l_linkc'); ?>;
        }
        a:hover {
          color: <?php echo $this->config->get('wg24_l_hcolor')?>;
        }

        /*****   header    *****/
        .header__top {
          background-color: <?php echo $this->config->get('wg24_header_bgcolor')?>;
          border-top: 2px solid <?php echo $this->config->get('wg24_l_body_tbc')?>;
        }
        .header__top-text {
          color:<?php echo $this->config->get('wg24_header_menulcolor')?>;
        }
        a.header__top-text:hover {
          color:<?php echo $this->config->get('wg24_header_menulhcolor')?>;
        }
        .header__main {
          background-color: <?php echo $this->config->get('wg24_header_bg_color'); ?>;
          border-top: 1px solid <?php echo $this->config->get('wg24_heade_m_lin_bg_c')?>;
          border-bottom: 1px solid <?php echo $this->config->get('wg24_color_border_background')?>;
        }
        .header__main-text {
          color: <?php echo $this->config->get('wg24_link_color_stick')?>!important;
        }
        .header__main-text:hover {
          color: <?php echo $this->config->get('wg24_m_color_background')?>!important;
        }


        /* COMECO - DataPicker Lista de Presentes - por Henrique R. Pohl */
        .ui-widget-header {
          background:<?php echo $this->config->get('wg24_top_cart_bgcol')?>;
          border: <?php echo $this->config->get('wg24_top_cart_bgcol')?>;
          color: <?php echo $this->config->get('wg24_topcart_te_colo')?>;
        }
        .ui-widget-header .ui-icon {
          background-image: none !important;
        }

        .ui-datepicker .ui-datepicker-prev,
        .ui-datepicker .ui-datepicker-next {
          cursor: pointer;
          position: absolute;
          top: 1px;
        }

        .ui-datepicker .ui-datepicker-next {
          right: 1px;
        }

        .ui-datepicker .ui-datepicker-prev {
          left: 1px;
        }

        .ui-datepicker .ui-datepicker-prev::before,
        .ui-datepicker .ui-datepicker-next::before {
          font-size: 18px;
          font-style: normal;
          position: relative;
          font-family: 'Font Awesome 5 Free';
          color: <?php echo $this->config->get('wg24_topcart_te_colo')?>;
        }

        .ui-datepicker .ui-datepicker-prev:before {
          content: "\f053";
          top: 6px;
          left: 8px;
        }

        .ui-datepicker .ui-datepicker-next:before {
          content: "\f054";
          top: 6px;
          right: -2px;
        }

        .ui-datepicker select.ui-datepicker-month,
        .ui-datepicker select.ui-datepicker-year {
          width: 47%;
          margin: 0 2px 0 2px;
          height: 26px;
          padding: 2px 0 0 0;
        }

        .ui-state-hover,
        .ui-widget-content .ui-state-hover,
        .ui-widget-header .ui-state-hover,
        .ui-state-focus,
        .ui-widget-content .ui-state-focus,
        .ui-widget-header .ui-state-focus {
          border: none;
          background: none;
        }

        /* FIM - DataPicker Lista de Presentes - por Henrique R. Pohl */

        /***  extra border color  *****/
        #shopping-cart-table a.remove-item:hover,
        #shopping-cart-table button.whish-cart:hover {
          color:<?php echo $this->config->get('wg24_top_cart_bgcol')?>;
        }

        #content > .giftlist-info > table > tbody > tr > td > a:hover,
        #tab-produtos > table > tbody > tr > td > a:hover{
          background-color: transparent !important;
          color: <?php echo $this->config->get('wg24_top_cart_bgcol')?> !important;
        }
        /*****************   main menu  ******/
        .categories-sidebar-home .first-level-link {
          background-color:<?php echo $this->config->get('wg24_mm_bgcol_center') != '' ? $this->config->get('wg24_mm_bgcol_center') : $this->config->get('wg24_mm_bgcol')?>;
        }

        .fa-plus-square,
        .categories-sidebar-home .first-level-item a {
          color: <?php echo $this->config->get('wg24_menum_lcolor')?>;
        }

        /********************  Home bottom features-box   ************************************/
        .our-features-box{  background: <?php echo $this->config->get('wg24_home_fboxbg_col')?>; }
        .store-img-box .feature-box {
          background: <?php echo $this->config->get('wg24_mm_bgcol_center') != '' ? $this->config->get('wg24_mm_bgcol_center') : $this->config->get('wg24_mm_bgcol')?>;
          border-bottom: 6px solid <?php echo $this->config->get('wg24_top_cart_bgcol')?>;
        }
        .store-img-box .feature-box {
          background-color:<?php echo $this->config->get('wg24_mm_bgcol_center') != '' ? $this->config->get('wg24_mm_bgcol_center') : $this->config->get('wg24_mm_bgcol')?>;
          color: <?php echo $this->config->get('wg24_menum_lcolor')?> !important;
        }
        .store-img-box .feature-box span {
          color: <?php echo $this->config->get('wg24_hom_fe_boxdes_col')?>;
        }

        .paper {
          <?php if (!empty($this->config->get('wg24_product_bx_bgclr'))) { ?>
            background-color: <?php echo $this->config->get('wg24_product_bx_bgclr'); ?>;
          <?php } ?>

          <?php if (!empty($this->config->get('wg24_product_bx_bdrclr'))) { ?>
            border: 1px solid <?php echo $this->config->get('wg24_product_bx_bdrclr') ?>;
          <?php } ?>

          <?php if ($this->config->get('wg24_productbox_border')) { ?>
            box-shadow:
              0px 2px 1px -1px rgba(0, 0, 0, 0.2),
              0px 1px 1px 0px rgba(0, 0, 0, 0.14),
              0px 1px 3px 0px rgba(0,0,0,.12);
            -webkit-box-shadow:
              0px 2px 1px -1px rgba(0, 0, 0, 0.2),
              0px 1px 1px 0px rgba(0, 0, 0, 0.14),
              0px 1px 3px 0px rgba(0,0,0,.12);
          <?php } ?>
        }

        /*****************   product box   **************************/
        .itembox-sale-label,
        .itembox-sale-label-title,
        .productaside-sale-label {
          background:<?php echo $this->config->get('wg24_product_box_sicon_bgcolor')?>;
          color: <?php echo $this->config->get('wg24_product_box_sale_nicontcolor')?>;
        }

        .itembox-title,
        .itembox-description,
        .productaside-title {
          color: <?php echo $this->config->get('wg24_product_box_n_col')?> !important;
        }
        .itembox-title:hover {
          color:<?php echo $this->config->get('wg24_product_box_nhov_col')?> !important;
        }

        .regular-price .price,
        .inner .price-box,
        .price-box .price {
          color: <?php echo $this->config->get('wg24_product_box_price_col')?> !important;
          font-weight: bold;
        }
        .old-price .price,
        .price-percent-reduction {
          color: <?php echo $this->config->get('wg24_product_box_oldprce_col')?> !important;
          font-weight: normal !important;
          font-size: 16px;
        }

        .itembox-regular-price,
        .itembox-single-price,
        .productaside-price {
          color: <?php echo $this->config->get('wg24_product_box_price_col')?>;
        }
        .itembox-old-price,
        .productaside-old-price {
          color: <?php echo $this->config->get('wg24_product_box_oldprce_col')?>;
        }
        .promotion-cronometer {
          color: <?php echo $this->config->get('wg24_btn_1bg_col')?>;
        }

        /**************   button color  *************************/

        .aba-mobile.active,
        .fancybox-close,
        .radio-entry:checked + .radio-text::before,
        .checkbox-entry:checked + .checkbox-text::before,
        .btn-default:not(.btn-outline):not(.btn-white),
        a.btn-default:not(.btn-outline):not(.btn-white) {
          background-color:<?php echo $this->config->get('wg24_btn_1bg_col')?>;
          color: <?php echo $this->config->get('wg24_btn_text_col')?>;
        }
        .itembox-btn.js-btn-qtd,
        .btn-cart-notification::after {
          color: <?php echo $this->config->get('wg24_l_linkc')?>;
        }


        /*
         *
         * Como nomear as classes de cor:
         * Usar o prefixo "cc" que significa "Config Color"
         * Indicar, abreviado e em inglês, o lugar que a classe vai ser usada. Ex.: Menu lateral = Side Menu = .cc-sm-bg
         * Indicar o que vai ser colorido:
         * Fundo = bg
         * Borda = bd
         * Título = tt
         * Texto = tx
         * Link = lk
         * Icone = ic
         * Botão = bt
         * Checkbox = ck
         *
         *
         */

        /*================== Menu Lateral (Side Menu = sm) ===================*/
        .cc-sm-bg { /* Cor de fundo */
          background: <?php echo $this->config->get('wg24_bg_color_menu_lateral')?>;
        }
        .cc-sm-bd { /* Cor da borda */
          border-color: <?php echo $this->config->get('wg24_border_color_menu_lateral') ? $this->config->get('wg24_border_color_menu_lateral') : $this->config->get('wg24_bg_color_menu_lateral'); ?>!important;
        }
        .cc-sm-tx {
          color: <?php echo $this->config->get('wg24_link_color_menu_lateral') ?>!important;
        }
        .cc-sm-tx:hover {
          opacity: 0.5;
        }
        .cc-sm-tt,
        .cc-sm-tt:hover { /* Cor dos títulos */
          color: <?php echo $this->config->get('wg24_title_color_menu_lateral') ? $this->config->get('wg24_title_color_menu_lateral') : $this->config->get('wg24_link_color_menu_lateral') ?>;
        }
        .cc-sm-ck::before { /* Mesma cor do textos */
          border-color: <?php echo $this->config->get('wg24_link_color_menu_lateral')?>;
        }
        .checkbox-entry:checked + .cc-sm-ck::before { /* Cor do checkbox quando estiver checked */
          background: <?php echo $this->config->get('wg24_icon_checked_color_menu_lateral')?>!important;
        }
        .cc-sm-bt { /* Cor dos botões */
          background: <?php echo $this->config->get('wg24_button_color_menu_lateral') ?>!important;
          color: <?php echo $this->config->get('wg24_button_text_color_menu_lateral') ?>!important;
        }

        /*==== Menu de Filtros Selecionados (Selected Filters Menu = sfm) ====*/
        .cc-sfm-bg {
          background: <?php echo $this->config->get('wg24_bg_color_menu_lateral_selecionado') ?>;
        }

        <?php if ($this->config->get('wg24_mm_bgcol') != ''): ?>
          .store-rating::before { /* Cor de fundo */
            background-color:<?php echo $this->config->get('wg24_mm_bgcol')?>;
          }
        <?php endif; ?>
        <?php if ($this->config->get('wg24_mm_bgcol_center') != ''): ?>
          .store-rating::before { /* Cor de fundo central */
            background-color:<?php echo $this->config->get('wg24_mm_bgcol_center')?>;
          }
        <?php endif; ?>

        /*================ Menu Principal (Primary Menu = pm) ================*/
        .menu { /* Cor de fundo */
          background-color: <?php echo $this->config->get('wg24_mm_bgcol')?>;
        }
        .menu__mobile {
          background-color:<?php echo $this->config->get('wg24_mm_bgcol_center')?>;
          color: <?php echo $this->config->get('wg24_menum_lcolor')?>;
        }

        @media only screen and (min-width: 768px) {
          .menu__wrapper {
            background-color:<?php echo $this->config->get('wg24_mm_bgcol_center')?>;
          }
          .menu__wrapper--divided .menu__container,
          .menu__wrapper--divided .menu__item:not(:last-child) { /* Cor da borda */
            border-right: 1px solid <?php echo $this->config->get('wg24_mainm_brcol')?>;
          }
          .menu__content { /* Cor dos itens */
            color: <?php echo $this->config->get('wg24_menum_lcolor')?>;
          }
          .menu__item:hover .menu__content {
            background-color: <?php echo $this->config->get('menu_selector_indicator') == Type_SelectionIndicators::Underline ? 'none' : $this->config->get('wg24_menu_hbgcolor') ?>;
            color: <?php echo $this->config->get('menu_selector_indicator') == Type_SelectionIndicators::Underline ? $this->config->get('wg24_menum_lcolor') : $this->config->get('wg24_mainm_lhcolor') ?>;
            border-radius: .25rem;
          }
          .submenu__item:hover .submenu__text,
          .submenu__item:hover .submenu__icon {
            color: <?php echo $this->config->get('wg24_l_hcolor')?>;
          }
        }

        /*======================== Ações Promocionais ========================*/
        .special-action.style-0::before { /* Usa as cores do menu */
          background: <?php echo $this->config->get('wg24_mm_bgcol_center') != '' ? $this->config->get('wg24_mm_bgcol_center') : $this->config->get('wg24_mm_bgcol')?>;
        }
        .special-action.style-0 .product-title h2 {
          color: <?php echo $this->config->get('wg24_menum_lcolor')?>;
        }

        /* COMECO - Cor da borda produto atacado Henrique R. Pohl */
        .prod_image_detail .actions input.input-text {
            border-color: <?php echo $this->config->get('wg24_btn_1bg_col')?>;
        }
        /* FIM - Cor da borda produto atacado Henrique R. Pohl */

        .header__search-btn {
          background-color:<?php echo (($this->config->get('searchbar_button_background') == null
            || $this->config->get('searchbar_button_background') == Type_SearchBarButtonBackground::Padrao) ?
            $this->config->get('wg24_header_btsearch') : '#ffffff') ; ?> !important;
          color:<?php echo (($this->config->get('searchbar_button_background') == null
          || $this->config->get('searchbar_button_background') == Type_SearchBarButtonBackground::Padrao) ?
            $this->config->get('wg24_icon_btnsearch_color') : '#000000') ; ?> !important;
          border-radius:<?php echo (($this->config->get('searchbar_form') == null
          || $this->config->get('searchbar_form') == Type_SearchBarForm::Retangular) ?
            '0.25rem' : '30px') ; ?> ;
        }

        .header__search-field {
          border-radius:<?php echo (($this->config->get('searchbar_form') == null
          || $this->config->get('searchbar_form') == Type_SearchBarForm::Retangular) ?
            '0.25rem' : '30px') ; ?> ;
        }

        .sidebar a { color: #666; }
        .sidebar a:hover { color: #666; }

        /******************  footer *****************************/
        .footer {
          background: <?php echo $this->config->get('wg24_footer_bg_col'); ?>;
          border-top: 1px <?php echo $this->config->get('wg24_fot_line'); ?> solid;
        }

        .footer-title {
          color: <?php echo $this->config->get('wg24_fotheadin_col')?>;
        }

        .footer-column-one {
          color: <?php echo $this->config->get('wg24_fotaout_des_col')?>;
        }

        .footer a {
          color: <?php echo $this->config->get('wg24_fotlin_col')?>;
          word-wrap: break-word;
        }
        .contact-icon {
          color:<?php echo $this->config->get('wg24_fotlinicon_col')? $this->config->get('wg24_fotlinicon_col') : $this->config->get('wg24_menum_lcolor')?>;
          background-color:<?php echo $this->config->get('wg24_fotlinicon_h_col') ? $this->config->get('wg24_fotlinicon_h_col') : $this->config->get('wg24_mm_bgcol')?>;
        }
        .footer a:hover {
          color:<?php echo $this->config->get('wg24_fotlin_h_col')?>;
        }

        <?php if ($this->config->get('wg24_bg_social') || $this->config->get('wg24_col_social')) { ?>
          .footer-social a {
            <?php if ($this->config->get('wg24_bg_social')) { ?>
              background-color: <?php echo $this->config->get('wg24_bg_social') ?>;
            <?php } ?>
          }
        <?php } ?>
        <?php if ($this->config->get('wg24_col_social')) { ?>
          .footer-social i {
            color: <?php echo $this->config->get('wg24_col_social') ?>;
          }
        <?php } ?>
        <?php if ($this->config->get('wg24_bg_hover_social')) { ?>
          .footer-social a:hover {
            background-color: <?php echo $this->config->get('wg24_bg_hover_social') ?>!important;
          }
        <?php } ?>

        .footer-bottom {
          background-color: <?php echo $this->config->get('wg24_fot_bbg_col') ?>;
        }
        .footer-bottom span,
        .footer-bottom a {
          color: <?php echo $this->config->get('wg24_fot_powerred_col') ?>;
        }
        .footer-bottom a:hover {
          color:<?php echo $this->config->get('wg24_fot_powerred_hover_col') ?>;
        }


  			.true_estoque {
  				background: <?php echo $this->config->get('wg24_btn_1bg_col')?> !important;
  			}
  			.number_selected {
  				background-color: #323c46 !important;
  				color: #fff !important;
  			}

        <?php if ($this->config->get('wg24_finalizar_carrinho') || $this->config->get('wg24_finalizar_carrinho_texto')) { ?>
          .btn-proceed-checkout {
            <?php
              if ($this->config->get('wg24_finalizar_carrinho')) echo 'background-color: '.$this->config->get('wg24_finalizar_carrinho').'!important;';
              if ($this->config->get('wg24_finalizar_carrinho')) echo 'color: '.$this->config->get('wg24_finalizar_carrinho_texto').'!important;';
            ?>
          }
        <?php } ?>

        .category-style-home .aside-category-first-level-children {
          background-color: <?php echo $this->config->get('wg24_button_color_menu_lateral') ?>;
          color: <?php echo $this->config->get('wg24_button_text_color_menu_lateral') ?>!important;
        }
      </style>

    <?php
      if ($this->config->get('wg24_seo_fer_facebook_status')=='enable'){
        if (!$this->config->get('wg24_seo_fer_facebook_pixel')==''){
          echo html_entity_decode($this->config->get('wg24_seo_fer_facebook_pixel'), ENT_QUOTES, 'UTF-8');
        }
      }
    ?>

    <?php echo $scripts_top; ?>

    <style>
      .container-fluid *,
      .container *,
      .row * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
      }

      .container-fluid,
      .container {
        margin-right: auto;
        margin-left: auto;
      }

      .container-fluid {
        width: calc(100% - 1rem);
        max-width: 1140px;
      }
      @media only screen and (min-width: 30em) {
        .container-fluid {
          width: calc(100% - 3rem);
        }
      }
      .row {
        box-sizing: border-box;
        display: -webkit-box;
        display:    -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display:         flex;
        display: flex;
        -ms-flex: 0 1 auto;
        -webkit-box-flex: 0;
        flex: 0 1 auto;
        -ms-flex-direction: row;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        flex-direction: row;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
        -ms-flex-wrap: wrap;
        margin: -1rem;
      }

      .nowrap-xs {
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -ms-flex-flow: row nowrap;
            flex-flow: row nowrap;
        -ms-flex-wrap: nowrap;
      }

      .row.reverse {
        -ms-flex-direction: row-reverse;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        flex-direction: row-reverse;
      }

      .col.reverse {
        -ms-flex-direction: column-reverse;
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        flex-direction: column-reverse;
      }

      .row.no-space-auto > [class^="col-"],
      .row.no-space-auto > [class*="col-"] {
        padding: 0;
      }

      .row.x-small-space-auto > [class^="col-"],
      .row.x-small-space-auto > [class*="col-"] {
        padding: .25rem;
      }

      .row.small-space-auto > [class^="col-"],
      .row.small-space-auto > [class*="col-"] {
        padding: .5rem;
      }

      .row.medium-space-auto > [class^="col-"],
      .row.medium-space-auto > [class*="col-"] {
        padding: 1rem;
      }

      .row.large-space-auto > [class^="col-"],
      .row.large-space-auto > [class*="col-"] {
        padding: 1.5rem;
      }

      .row.x-large-space-auto > [class^="col-"],
      .row.x-large-space-auto > [class*="col-"] {
        padding: 2rem;
      }

      .row.no-space-auto {
        margin: 0;
      }

      .row.x-small-space-auto {
        margin: -.25rem;
      }

      .row.small-space-auto {
        margin: -.5rem;
      }

      .row.medium-space-auto {
        margin: -1rem;
      }

      .row.large-space-auto {
        margin: -1.5rem;
      }

      .row.x-large-space-auto {
        margin: -2rem;
      }

      .col-xs,
      .col-xs-1,
      .col-xs-2,
      .col-xs-3,
      .col-xs-4,
      .col-xs-5,
      .col-xs-6,
      .col-xs-7,
      .col-xs-8,
      .col-xs-9,
      .col-xs-10,
      .col-xs-11,
      .col-xs-12,
      .col-xs-width-auto {
        box-sizing: border-box;
        -ms-flex: 0 0 auto;
        -webkit-box-flex: 0;
        flex: 0 0 auto;
        padding: 1rem;
      }

      .row.no-space-xs > [class^="col-"],
      .row.no-space-xs > [class*="col-"] {
        padding: 0;
      }

      .row.x-small-space-xs > [class^="col-"],
      .row.x-small-space-xs > [class*="col-"] {
        padding: .25rem;
      }

      .row.small-space-xs > [class^="col-"],
      .row.small-space-xs > [class*="col-"] {
        padding: .5rem;
      }

      .row.medium-space-xs > [class^="col-"],
      .row.medium-space-xs > [class*="col-"] {
        padding: 1rem;
      }

      .row.large-space-xs > [class^="col-"],
      .row.large-space-xs > [class*="col-"] {
        padding: 1.5rem;
      }

      .row.x-large-space-xs > [class^="col-"],
      .row.x-large-space-xs > [class*="col-"] {
        padding: 2rem;
      }

      .row.no-space-xs {
        margin: 0;
      }

      .row.x-small-space-xs {
        margin: -.25rem;
      }

      .row.small-space-xs {
        margin: -.5rem;
      }

      .row.medium-space-xs {
        margin: -1rem;
      }

      .row.large-space-xs {
        margin: -1.5rem;
      }

      .row.x-large-space-xs {
        margin: -2rem;
      }

      .col-xs {
        -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
        -webkit-box-flex: 1;
        flex-grow: 1;
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        max-width: 100%;
      }

      .col-xs-1 {
        -ms-flex-preferred-size: 8.333%;
        flex-basis: 8.333%;
        max-width: 8.333%;
      }

      .col-xs-2 {
        -ms-flex-preferred-size: 16.667%;
        flex-basis: 16.667%;
        max-width: 16.667%;
      }

      .col-xs-3 {
        -ms-flex-preferred-size: 25%;
        flex-basis: 25%;
        max-width: 25%;
      }

      .col-xs-4 {
        -ms-flex-preferred-size: 33.333%;
        flex-basis: 33.333%;
        max-width: 33.333%;
      }

      .col-xs-5 {
        -ms-flex-preferred-size: 41.667%;
        flex-basis: 41.667%;
        max-width: 41.667%;
      }

      .col-xs-6 {
        -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
        max-width: 50%;
      }

      .col-xs-7 {
        -ms-flex-preferred-size: 58.333%;
        flex-basis: 58.333%;
        max-width: 58.333%;
      }

      .col-xs-8 {
        -ms-flex-preferred-size: 66.667%;
        flex-basis: 66.667%;
        max-width: 66.667%;
      }

      .col-xs-9 {
        -ms-flex-preferred-size: 75%;
        flex-basis: 75%;
        max-width: 75%;
      }

      .col-xs-10 {
        -ms-flex-preferred-size: 83.333%;
        flex-basis: 83.333%;
        max-width: 83.333%;
      }

      .col-xs-11 {
        -ms-flex-preferred-size: 91.667%;
        flex-basis: 91.667%;
        max-width: 91.667%;
      }

      .col-xs-12 {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        max-width: 100%;
      }

      .col-xs-width-auto {
        -webkit-flex-grow: 0;
        -ms-flex-positive: 0;
        -webkit-box-flex: 0;
        flex-grow: 0;
        -ms-flex-preferred-size: auto;
        flex-basis: auto;
        max-width: auto;
      }

      .col-xs-offset-0 {
        margin-left: 0;
      }

      .col-xs-offset-1 {
        margin-left: 8.333%;
      }

      .col-xs-offset-2 {
        margin-left: 16.667%;
      }

      .col-xs-offset-3 {
        margin-left: 25%;
      }

      .col-xs-offset-4 {
        margin-left: 33.333%;
      }

      .col-xs-offset-5 {
        margin-left: 41.667%;
      }

      .col-xs-offset-6 {
        margin-left: 50%;
      }

      .col-xs-offset-7 {
        margin-left: 58.333%;
      }

      .col-xs-offset-8 {
        margin-left: 66.667%;
      }

      .col-xs-offset-9 {
        margin-left: 75%;
      }

      .col-xs-offset-10 {
        margin-left: 83.333%;
      }

      .col-xs-offset-11 {
        margin-left: 91.667%;
      }

      .start-xs {
        -ms-flex-pack: start;
        -webkit-box-pack: start;
        justify-content: flex-start;
      }

      .center-xs {
        -ms-flex-pack: center;
        -webkit-box-pack: center;
        justify-content: center;
      }

      .end-xs {
        -ms-flex-pack: end;
        -webkit-box-pack: end;
        justify-content: flex-end;
      }

      .top-xs {
        -ms-flex-align: start;
        -webkit-box-align: start;
        align-items: flex-start;
      }

      .middle-xs {
        -ms-flex-align: center;
        -webkit-box-align: center;
        align-items: center;
      }

      .bottom-xs {
        -ms-flex-align: end;
        -webkit-box-align: end;
        align-items: flex-end;
      }

      .around-xs {
        -ms-flex-pack: distribute;
        justify-content: space-around;
      }

      .between-xs {
        -ms-flex-pack: justify;
        -webkit-box-pack: justify;
        justify-content: space-between;
      }

      .vertical-between-xs {
        -webkit-align-content: space-between;
        align-content: space-between;
      }

      .stretch-xs .content-box {
        height: 100%;
      }

      .first-xs {
        -ms-flex-order: -1;
        -webkit-box-ordinal-group: 0;
        order: -1;
      }

      .last-xs {
        -ms-flex-order: 1;
        -webkit-box-ordinal-group: 2;
        order: 1;
      }

      /* colunas com a mesma largura e quebras predefinidas */
      .col-auto-1,
      .col-auto-2,
      .col-auto-3,
      .col-auto-4,
      .col-auto-5,
      .col-auto-6 {
        box-sizing: border-box;
        -ms-flex: 0 0 auto;
        -webkit-box-flex: 0;
        flex: 0 0 auto;
        padding: 1rem;
      }

      .col-auto-1,
      .col-auto-2,
      .col-auto-3,
      .col-auto-4,
      .col-auto-5,
      .col-auto-6 {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        max-width: 100%;

      }

      /* 480px */
      @media only screen and (min-width: 30em) {
        .container {
          width: 29rem;
        }

        .col-ms,
        .col-ms-1,
        .col-ms-2,
        .col-ms-3,
        .col-ms-4,
        .col-ms-5,
        .col-ms-6,
        .col-ms-7,
        .col-ms-8,
        .col-ms-9,
        .col-ms-10,
        .col-ms-11,
        .col-ms-12,
        .col-ms-width-auto {
          box-sizing: border-box;
          -ms-flex: 0 0 auto;
          -webkit-box-flex: 0;
          flex: 0 0 auto;
          padding: 1rem;
        }

        .row.no-space-ms > [class^="col-"],
        .row.no-space-ms > [class*="col-"] {
          padding: 0;
        }

        .row.x-small-space-ms > [class^="col-"],
        .row.x-small-space-ms > [class*="col-"] {
          padding: .25rem;
        }

        .row.small-space-ms > [class^="col-"],
        .row.small-space-ms > [class*="col-"] {
          padding: .5rem;
        }

        .row.medium-space-ms > [class^="col-"],
        .row.medium-space-ms > [class*="col-"] {
          padding: 1rem;
        }

        .row.large-space-ms > [class^="col-"],
        .row.large-space-ms > [class*="col-"] {
          padding: 1.5rem;
        }

        .row.x-large-space-ms > [class^="col-"],
        .row.x-large-space-ms > [class*="col-"] {
          padding: 2rem;
        }

        .row.no-space-ms {
          margin: 0;
        }

        .row.x-small-space-ms {
          margin: -.25rem;
        }

        .row.small-space-ms {
          margin: -.5rem;
        }

        .row.medium-space-ms {
          margin: -1rem;
        }

        .row.large-space-ms {
          margin: -1.5rem;
        }

        .row.x-large-space-ms {
          margin: -2rem;
        }

        .col-ms {
          -webkit-flex-grow: 1;
          -ms-flex-positive: 1;
          -webkit-box-flex: 1;
          flex-grow: 1;
          -ms-flex-preferred-size: 0;
          flex-basis: 0;
          max-width: 100%;
        }

        .col-ms-1 {
          -ms-flex-preferred-size: 8.333%;
          flex-basis: 8.333%;
          max-width: 8.333%;
        }

        .col-ms-2 {
          -ms-flex-preferred-size: 16.667%;
          flex-basis: 16.667%;
          max-width: 16.667%;
        }

        .col-ms-3 {
          -ms-flex-preferred-size: 25%;
          flex-basis: 25%;
          max-width: 25%;
        }

        .col-ms-4 {
          -ms-flex-preferred-size: 33.333%;
          flex-basis: 33.333%;
          max-width: 33.333%;
        }

        .col-ms-5 {
          -ms-flex-preferred-size: 41.667%;
          flex-basis: 41.667%;
          max-width: 41.667%;
        }

        .col-ms-6 {
          -ms-flex-preferred-size: 50%;
          flex-basis: 50%;
          max-width: 50%;
        }

        .col-ms-7 {
          -ms-flex-preferred-size: 58.333%;
          flex-basis: 58.333%;
          max-width: 58.333%;
        }

        .col-ms-8 {
          -ms-flex-preferred-size: 66.667%;
          flex-basis: 66.667%;
          max-width: 66.667%;
        }

        .col-ms-9 {
          -ms-flex-preferred-size: 75%;
          flex-basis: 75%;
          max-width: 75%;
        }

        .col-ms-10 {
          -ms-flex-preferred-size: 83.333%;
          flex-basis: 83.333%;
          max-width: 83.333%;
        }

        .col-ms-11 {
          -ms-flex-preferred-size: 91.667%;
          flex-basis: 91.667%;
          max-width: 91.667%;
        }

        .col-ms-12 {
          -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
          max-width: 100%;
        }

        .col-ms-width-auto {
          -webkit-flex-grow: 0;
          -ms-flex-positive: 0;
          -webkit-box-flex: 0;
          flex-grow: 0;
          -ms-flex-preferred-size: auto;
          flex-basis: auto;
          max-width: auto;
        }

        .col-ms-offset-0 {
          margin-left: 0;
        }

        .col-ms-offset-1 {
          margin-left: 8.333%;
        }

        .col-ms-offset-2 {
          margin-left: 16.667%;
        }

        .col-ms-offset-3 {
          margin-left: 25%;
        }

        .col-ms-offset-4 {
          margin-left: 33.333%;
        }

        .col-ms-offset-5 {
          margin-left: 41.667%;
        }

        .col-ms-offset-6 {
          margin-left: 50%;
        }

        .col-ms-offset-7 {
          margin-left: 58.333%;
        }

        .col-ms-offset-8 {
          margin-left: 66.667%;
        }

        .col-ms-offset-9 {
          margin-left: 75%;
        }

        .col-ms-offset-10 {
          margin-left: 83.333%;
        }

        .col-ms-offset-11 {
          margin-left: 91.667%;
        }

        .start-ms {
          -ms-flex-pack: start;
          -webkit-box-pack: start;
          justify-content: flex-start;
        }

        .center-ms {
          -ms-flex-pack: center;
          -webkit-box-pack: center;
          justify-content: center;
        }

        .end-ms {
          -ms-flex-pack: end;
          -webkit-box-pack: end;
          justify-content: flex-end;
        }

        .top-ms {
          -ms-flex-align: start;
          -webkit-box-align: start;
          align-items: flex-start;
        }

        .middle-ms {
          -ms-flex-align: center;
          -webkit-box-align: center;
          align-items: center;
        }

        .bottom-ms {
          -ms-flex-align: end;
          -webkit-box-align: end;
          align-items: flex-end;
        }

        .around-ms {
          -ms-flex-pack: distribute;
          justify-content: space-around;
        }

        .between-ms {
          -ms-flex-pack: justify;
          -webkit-box-pack: justify;
          justify-content: space-between;
        }

        .vertical-between-ms {
          -webkit-align-content: space-between;
          align-content: space-between;
        }

        .stretch-ms .content-box {
          height: 100%;
        }

        .first-ms {
          -ms-flex-order: -1;
          -webkit-box-ordinal-group: 0;
          order: -1;
        }

        .last-ms {
          -ms-flex-order: 1;
          -webkit-box-ordinal-group: 2;
          order: 1;
        }

        /* colunas com a mesma largura e quebras predefinidas */
        .col-auto-1,
        .col-auto-2,
        .col-auto-3,
        .col-auto-4 {
          -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
          max-width: 100%;
        }
        .col-auto-5,
        .col-auto-6 {
          -ms-flex-preferred-size: 50%;
          flex-basis: 50%;
          max-width: 50%;
        }
      }
      /* 768px */
      @media only screen and (min-width: 48em) {
        .container {
          width: 46rem;
        }

        .col-sm,
        .col-sm-1,
        .col-sm-2,
        .col-sm-3,
        .col-sm-4,
        .col-sm-5,
        .col-sm-6,
        .col-sm-7,
        .col-sm-8,
        .col-sm-9,
        .col-sm-10,
        .col-sm-11,
        .col-sm-12,
        .col-sm-width-auto {
          box-sizing: border-box;
          -ms-flex: 0 0 auto;
          -webkit-box-flex: 0;
          flex: 0 0 auto;
          padding: 1rem;
        }

        .row.no-space-sm > [class^="col-"],
        .row.no-space-sm > [class*="col-"] {
          padding: 0;
        }

        .row.x-small-space-sm > [class^="col-"],
        .row.x-small-space-sm > [class*="col-"] {
          padding: .25rem;
        }

        .row.small-space-sm > [class^="col-"],
        .row.small-space-sm > [class*="col-"] {
          padding: .5rem;
        }

        .row.medium-space-sm > [class^="col-"],
        .row.medium-space-sm > [class*="col-"] {
          padding: 1rem;
        }

        .row.large-space-sm > [class^="col-"],
        .row.large-space-sm > [class*="col-"] {
          padding: 1.5rem;
        }

        .row.x-large-space-sm > [class^="col-"],
        .row.x-large-space-sm > [class*="col-"] {
          padding: 2rem;
        }

        .row.no-space-sm {
          margin: 0;
        }

        .row.x-small-space-sm {
          margin: -.25rem;
        }

        .row.small-space-sm {
          margin: -.5rem;
        }

        .row.medium-space-sm {
          margin: -1rem;
        }

        .row.large-space-sm {
          margin: -1.5rem;
        }

        .row.x-large-space-sm {
          margin: -2rem;
        }

        .col-sm {
          -webkit-flex-grow: 1;
          -ms-flex-positive: 1;
          -webkit-box-flex: 1;
          flex-grow: 1;
          -ms-flex-preferred-size: 0;
          flex-basis: 0;
          max-width: 100%;
        }

        .col-sm-1 {
          -ms-flex-preferred-size: 8.333%;
          flex-basis: 8.333%;
          max-width: 8.333%;
        }

        .col-sm-2 {
          -ms-flex-preferred-size: 16.667%;
          flex-basis: 16.667%;
          max-width: 16.667%;
        }

        .col-sm-3 {
          -ms-flex-preferred-size: 25%;
          flex-basis: 25%;
          max-width: 25%;
        }

        .col-sm-4 {
          -ms-flex-preferred-size: 33.333%;
          flex-basis: 33.333%;
          max-width: 33.333%;
        }

        .col-sm-5 {
          -ms-flex-preferred-size: 41.667%;
          flex-basis: 41.667%;
          max-width: 41.667%;
        }

        .col-sm-6 {
          -ms-flex-preferred-size: 50%;
          flex-basis: 50%;
          max-width: 50%;
        }

        .col-sm-7 {
          -ms-flex-preferred-size: 58.333%;
          flex-basis: 58.333%;
          max-width: 58.333%;
        }

        .col-sm-8 {
          -ms-flex-preferred-size: 66.667%;
          flex-basis: 66.667%;
          max-width: 66.667%;
        }

        .col-sm-9 {
          -ms-flex-preferred-size: 75%;
          flex-basis: 75%;
          max-width: 75%;
        }

        .col-sm-10 {
          -ms-flex-preferred-size: 83.333%;
          flex-basis: 83.333%;
          max-width: 83.333%;
        }

        .col-sm-11 {
          -ms-flex-preferred-size: 91.667%;
          flex-basis: 91.667%;
          max-width: 91.667%;
        }

        .col-sm-12 {
          -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
          max-width: 100%;
        }

        .col-sm-width-auto {
          -webkit-flex-grow: 0;
          -ms-flex-positive: 0;
          -webkit-box-flex: 0;
          flex-grow: 0;
          -ms-flex-preferred-size: auto;
          flex-basis: auto;
          max-width: auto;
        }

        .col-sm-offset-0 {
          margin-left: 0;
        }

        .col-sm-offset-1 {
          margin-left: 8.333%;
        }

        .col-sm-offset-2 {
          margin-left: 16.667%;
        }

        .col-sm-offset-3 {
          margin-left: 25%;
        }

        .col-sm-offset-4 {
          margin-left: 33.333%;
        }

        .col-sm-offset-5 {
          margin-left: 41.667%;
        }

        .col-sm-offset-6 {
          margin-left: 50%;
        }

        .col-sm-offset-7 {
          margin-left: 58.333%;
        }

        .col-sm-offset-8 {
          margin-left: 66.667%;
        }

        .col-sm-offset-9 {
          margin-left: 75%;
        }

        .col-sm-offset-10 {
          margin-left: 83.333%;
        }

        .col-sm-offset-11 {
          margin-left: 91.667%;
        }

        .start-sm {
          -ms-flex-pack: start;
          -webkit-box-pack: start;
          justify-content: flex-start;
        }

        .center-sm {
          -ms-flex-pack: center;
          -webkit-box-pack: center;
          justify-content: center;
        }

        .end-sm {
          -ms-flex-pack: end;
          -webkit-box-pack: end;
          justify-content: flex-end;
        }

        .top-sm {
          -ms-flex-align: start;
          -webkit-box-align: start;
          align-items: flex-start;
        }

        .middle-sm {
          -ms-flex-align: center;
          -webkit-box-align: center;
          align-items: center;
        }

        .bottom-sm {
          -ms-flex-align: end;
          -webkit-box-align: end;
          align-items: flex-end;
        }

        .around-sm {
          -ms-flex-pack: distribute;
          justify-content: space-around;
        }

        .between-sm {
          -ms-flex-pack: justify;
          -webkit-box-pack: justify;
          justify-content: space-between;
        }

        .vertical-between-sm {
          -webkit-align-content: space-between;
          align-content: space-between;
        }

        .stretch-sm .content-box {
          height: 100%;
        }

        .first-sm {
          -ms-flex-order: -1;
          -webkit-box-ordinal-group: 0;
          order: -1;
        }

        .last-sm {
          -ms-flex-order: 1;
          -webkit-box-ordinal-group: 2;
          order: 1;
        }

        /* colunas com a mesma largura e quebras predefinidas */
        .col-auto-1 {
          -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
          max-width: 100%;
        }

        .col-auto-2,
        .col-auto-3,
        .col-auto-4 {
          -ms-flex-preferred-size: 50%;
          flex-basis: 50%;
          max-width: 50%;
        }

        .col-auto-5,
        .col-auto-6 {
          -ms-flex-preferred-size: 25%;
          flex-basis: 25%;
          max-width: 25%;
        }
      }
      /* 992px */
      @media only screen and (min-width: 62em) {
        .container {
          width: 61rem;
        }

        .col-md,
        .col-md-1,
        .col-md-2,
        .col-md-3,
        .col-md-4,
        .col-md-5,
        .col-md-6,
        .col-md-7,
        .col-md-8,
        .col-md-9,
        .col-md-10,
        .col-md-11,
        .col-md-12,
        .col-md-width-auto {
          box-sizing: border-box;
          -ms-flex: 0 0 auto;
          -webkit-box-flex: 0;
          flex: 0 0 auto;
          padding: 1rem;
        }

        .row.no-space-md > [class^="col-"],
        .row.no-space-md > [class*="col-"] {
          padding: 0;
        }

        .row.x-small-space-md > [class^="col-"],
        .row.x-small-space-md > [class*="col-"] {
          padding: .25rem;
        }

        .row.small-space-md > [class^="col-"],
        .row.small-space-md > [class*="col-"] {
          padding: .5rem;
        }

        .row.medium-space-md > [class^="col-"],
        .row.medium-space-md > [class*="col-"] {
          padding: 1rem;
        }

        .row.large-space-md > [class^="col-"],
        .row.large-space-md > [class*="col-"] {
          padding: 1.5rem;
        }

        .row.x-large-space-md > [class^="col-"],
        .row.x-large-space-md > [class*="col-"] {
          padding: 2rem;
        }

        .row.no-space-md {
          margin: 0;
        }

        .row.x-small-space-md {
          margin: -.25rem;
        }

        .row.small-space-md {
          margin: -.5rem;
        }

        .row.medium-space-md {
          margin: -1rem;
        }

        .row.large-space-md {
          margin: -1.5rem;
        }

        .row.x-large-space-md {
          margin: -2rem;
        }

        .col-md {
          -webkit-flex-grow: 1;
          -ms-flex-positive: 1;
          -webkit-box-flex: 1;
          flex-grow: 1;
          -ms-flex-preferred-size: 0;
          flex-basis: 0;
          max-width: 100%;
        }

        .col-md-1 {
          -ms-flex-preferred-size: 8.333%;
          flex-basis: 8.333%;
          max-width: 8.333%;
        }

        .col-md-2 {
          -ms-flex-preferred-size: 16.667%;
          flex-basis: 16.667%;
          max-width: 16.667%;
        }

        .col-md-3 {
          -ms-flex-preferred-size: 25%;
          flex-basis: 25%;
          max-width: 25%;
        }

        .col-md-4 {
          -ms-flex-preferred-size: 33.333%;
          flex-basis: 33.333%;
          max-width: 33.333%;
        }

        .col-md-5 {
          -ms-flex-preferred-size: 41.667%;
          flex-basis: 41.667%;
          max-width: 41.667%;
        }

        .col-md-6 {
          -ms-flex-preferred-size: 50%;
          flex-basis: 50%;
          max-width: 50%;
        }

        .col-md-7 {
          -ms-flex-preferred-size: 58.333%;
          flex-basis: 58.333%;
          max-width: 58.333%;
        }

        .col-md-8 {
          -ms-flex-preferred-size: 66.667%;
          flex-basis: 66.667%;
          max-width: 66.667%;
        }

        .col-md-9 {
          -ms-flex-preferred-size: 75%;
          flex-basis: 75%;
          max-width: 75%;
        }

        .col-md-10 {
          -ms-flex-preferred-size: 83.333%;
          flex-basis: 83.333%;
          max-width: 83.333%;
        }

        .col-md-11 {
          -ms-flex-preferred-size: 91.667%;
          flex-basis: 91.667%;
          max-width: 91.667%;
        }

        .col-md-12 {
          -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
          max-width: 100%;
        }

        .col-md-width-auto {
          -webkit-flex-grow: 0;
          -ms-flex-positive: 0;
          -webkit-box-flex: 0;
          flex-grow: 0;
          -ms-flex-preferred-size: auto;
          flex-basis: auto;
          max-width: auto;
        }

        .col-md-offset-0 {
          margin-left: 0;
        }

        .col-md-offset-1 {
          margin-left: 8.333%;
        }

        .col-md-offset-2 {
          margin-left: 16.667%;
        }

        .col-md-offset-3 {
          margin-left: 25%;
        }

        .col-md-offset-4 {
          margin-left: 33.333%;
        }

        .col-md-offset-5 {
          margin-left: 41.667%;
        }

        .col-md-offset-6 {
          margin-left: 50%;
        }

        .col-md-offset-7 {
          margin-left: 58.333%;
        }

        .col-md-offset-8 {
          margin-left: 66.667%;
        }

        .col-md-offset-9 {
          margin-left: 75%;
        }

        .col-md-offset-10 {
          margin-left: 83.333%;
        }

        .col-md-offset-11 {
          margin-left: 91.667%;
        }

        .start-md {
          -ms-flex-pack: start;
          -webkit-box-pack: start;
          justify-content: flex-start;
        }

        .center-md {
          -ms-flex-pack: center;
          -webkit-box-pack: center;
          justify-content: center;
        }

        .end-md {
          -ms-flex-pack: end;
          -webkit-box-pack: end;
          justify-content: flex-end;
        }

        .top-md {
          -ms-flex-align: start;
          -webkit-box-align: start;
          align-items: flex-start;
        }

        .middle-md {
          -ms-flex-align: center;
          -webkit-box-align: center;
          align-items: center;
        }

        .bottom-md {
          -ms-flex-align: end;
          -webkit-box-align: end;
          align-items: flex-end;
        }

        .around-md {
          -ms-flex-pack: distribute;
          justify-content: space-around;
        }

        .between-md {
          -ms-flex-pack: justify;
          -webkit-box-pack: justify;
          justify-content: space-between;
        }

        .vertical-between-md {
          -webkit-align-content: space-between;
          align-content: space-between;
        }

        .stretch-md .content-box {
          height: 100%;
        }

        .first-md {
          -ms-flex-order: -1;
          -webkit-box-ordinal-group: 0;
          order: -1;
        }

        .last-md {
          -ms-flex-order: 1;
          -webkit-box-ordinal-group: 2;
          order: 1;
        }

        /* colunas com a mesma largura e quebras predefinidas */
        .col-auto-1 {
          -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
          max-width: 100%;
        }

        .col-auto-2 {
          -ms-flex-preferred-size: 50%;
          flex-basis: 50%;
          max-width: 50%;
        }

        .col-auto-3 {
          -ms-flex-preferred-size: 33.333%;
          flex-basis: 33.333%;
          max-width: 33.333%;
        }

        .col-auto-4,
        .col-auto-5,
        .col-auto-6 {
          -ms-flex-preferred-size: 25%;
          flex-basis: 25%;
          max-width: 25%;
        }
      }
      /* 1200px */
      @media only screen and (min-width: 75em) {
        .container {
          width: 71rem;
        }

        .col-lg,
        .col-lg-1,
        .col-lg-2,
        .col-lg-3,
        .col-lg-4,
        .col-lg-5,
        .col-lg-6,
        .col-lg-7,
        .col-lg-8,
        .col-lg-9,
        .col-lg-10,
        .col-lg-11,
        .col-lg-12,
        .col-lg-width-auto {
          box-sizing: border-box;
          -ms-flex: 0 0 auto;
          -webkit-box-flex: 0;
          flex: 0 0 auto;
          padding: 1rem;
        }

        .row.no-space-lg > [class^="col-"],
        .row.no-space-lg > [class*="col-"] {
          padding: 0;
        }

        .row.x-small-space-lg > [class^="col-"],
        .row.x-small-space-lg > [class*="col-"] {
          padding: .25rem;
        }

        .row.small-space-lg > [class^="col-"],
        .row.small-space-lg > [class*="col-"] {
          padding: .5rem;
        }

        .row.medium-space-lg > [class^="col-"],
        .row.medium-space-lg > [class*="col-"] {
          padding: 1rem;
        }

        .row.large-space-lg > [class^="col-"],
        .row.large-space-lg > [class*="col-"] {
          padding: 1.5rem;
        }

        .row.x-large-space-lg > [class^="col-"],
        .row.x-large-space-lg > [class*="col-"] {
          padding: 2rem;
        }

        .row.no-space-lg {
          margin: 0;
        }

        .row.x-small-space-lg {
          margin: -.25rem;
        }

        .row.small-space-lg {
          margin: -.5rem;
        }

        .row.medium-space-lg {
          margin: -1rem;
        }

        .row.large-space-lg {
          margin: -1.5rem;
        }

        .row.x-large-space-lg {
          margin: -2rem;
        }

        .col-lg {
          -webkit-flex-grow: 1;
          -ms-flex-positive: 1;
          -webkit-box-flex: 1;
          flex-grow: 1;
          -ms-flex-preferred-size: 0;
          flex-basis: 0;
          max-width: 100%;
        }

        .col-lg-1 {
          -ms-flex-preferred-size: 8.333%;
          flex-basis: 8.333%;
          max-width: 8.333%;
        }

        .col-lg-2 {
          -ms-flex-preferred-size: 16.667%;
          flex-basis: 16.667%;
          max-width: 16.667%;
        }

        .col-lg-3 {
          -ms-flex-preferred-size: 25%;
          flex-basis: 25%;
          max-width: 25%;
        }

        .col-lg-4 {
          -ms-flex-preferred-size: 33.333%;
          flex-basis: 33.333%;
          max-width: 33.333%;
        }

        .col-lg-5 {
          -ms-flex-preferred-size: 41.667%;
          flex-basis: 41.667%;
          max-width: 41.667%;
        }

        .col-lg-6 {
          -ms-flex-preferred-size: 50%;
          flex-basis: 50%;
          max-width: 50%;
        }

        .col-lg-7 {
          -ms-flex-preferred-size: 58.333%;
          flex-basis: 58.333%;
          max-width: 58.333%;
        }

        .col-lg-8 {
          -ms-flex-preferred-size: 66.667%;
          flex-basis: 66.667%;
          max-width: 66.667%;
        }

        .col-lg-9 {
          -ms-flex-preferred-size: 75%;
          flex-basis: 75%;
          max-width: 75%;
        }

        .col-lg-10 {
          -ms-flex-preferred-size: 83.333%;
          flex-basis: 83.333%;
          max-width: 83.333%;
        }

        .col-lg-11 {
          -ms-flex-preferred-size: 91.667%;
          flex-basis: 91.667%;
          max-width: 91.667%;
        }

        .col-lg-12 {
          -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
          max-width: 100%;
        }

        .col-lg-width-auto {
          -webkit-flex-grow: 0;
          -ms-flex-positive: 0;
          -webkit-box-flex: 0;
          flex-grow: 0;
          -ms-flex-preferred-size: auto;
          flex-basis: auto;
          max-width: auto;
        }

        .col-lg-offset-0 {
          margin-left: 0;
        }

        .col-lg-offset-1 {
          margin-left: 8.333%;
        }

        .col-lg-offset-2 {
          margin-left: 16.667%;
        }

        .col-lg-offset-3 {
          margin-left: 25%;
        }

        .col-lg-offset-4 {
          margin-left: 33.333%;
        }

        .col-lg-offset-5 {
          margin-left: 41.667%;
        }

        .col-lg-offset-6 {
          margin-left: 50%;
        }

        .col-lg-offset-7 {
          margin-left: 58.333%;
        }

        .col-lg-offset-8 {
          margin-left: 66.667%;
        }

        .col-lg-offset-9 {
          margin-left: 75%;
        }

        .col-lg-offset-10 {
          margin-left: 83.333%;
        }

        .col-lg-offset-11 {
          margin-left: 91.667%;
        }

        .start-lg {
          -ms-flex-pack: start;
          -webkit-box-pack: start;
          justify-content: flex-start;
        }

        .center-lg {
          -ms-flex-pack: center;
          -webkit-box-pack: center;
          justify-content: center;
        }

        .end-lg {
          -ms-flex-pack: end;
          -webkit-box-pack: end;
          justify-content: flex-end;
        }

        .top-lg {
          -ms-flex-align: start;
          -webkit-box-align: start;
          align-items: flex-start;
        }

        .middle-lg {
          -ms-flex-align: center;
          -webkit-box-align: center;
          align-items: center;
        }

        .bottom-lg {
          -ms-flex-align: end;
          -webkit-box-align: end;
          align-items: flex-end;
        }

        .around-lg {
          -ms-flex-pack: distribute;
          justify-content: space-around;
        }

        .between-lg {
          -ms-flex-pack: justify;
          -webkit-box-pack: justify;
          justify-content: space-between;
        }

        .vertical-between-lg {
          -webkit-align-content: space-between;
          align-content: space-between;
        }

        .stretch-lg .content-box {
          height: 100%;
        }

        .first-lg {
          -ms-flex-order: -1;
          -webkit-box-ordinal-group: 0;
          order: -1;
        }

        .last-lg {
          -ms-flex-order: 1;
          -webkit-box-ordinal-group: 2;
          order: 1;
        }

        /* colunas com a mesma largura e quebras predefinidas */
        .col-auto-1 {
          -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
          max-width: 100%;
        }

        .col-auto-2 {
          -ms-flex-preferred-size: 50%;
          flex-basis: 50%;
          max-width: 50%;
        }

        .col-auto-3 {
          -ms-flex-preferred-size: 33.333%;
          flex-basis: 33.333%;
          max-width: 33.333%;
        }

        .col-auto-4 {
          -ms-flex-preferred-size: 25%;
          flex-basis: 25%;
          max-width: 25%;
        }

        .col-auto-5 {
          -ms-flex-preferred-size: 20%;
          flex-basis: 20%;
          max-width: 20%;
        }

        .col-auto-6 {
          -ms-flex-preferred-size: 16.667%;
          flex-basis: 16.667%;
          max-width: 16.667%;
        }
      }
      .hidden {
        display: none !important;
      }
      .hidden-xs-up {
        display: none !important;
      }

      @media (max-width: 479px) {
        .hidden-ms-down {
          display: none !important;
        }
      }

      @media (min-width: 480px) {
        .hidden-ms-up {
          display: none !important;
        }
      }

      @media (max-width: 767px) {
        .hidden-sm-down {
          display: none !important;
        }
      }

      @media (min-width: 768px) {
        .hidden-sm-up {
          display: none !important;
        }
      }

      @media (max-width: 991px) {
        .hidden-md-down {
          display: none !important;
        }
      }

      @media (min-width: 992px) {
        .hidden-md-up {
          display: none !important;
        }
      }

      @media (max-width: 1199px) {
        .hidden-lg-down {
          display: none !important;
        }
      }

      @media (min-width: 1200px) {
        .hidden-lg-up {
          display: none !important;
        }
      }
    </style>

  </head>
  <body itemscope itemtype="http://schema.org/WebPage">
    <div class="js-content-aviseme"></div>
    <div class="notifications js-notifications"></div>

    <div id="main-hidden-overflow" class="hidden-overflow">

      <?php if (isset($fc_facebook['status'])) { ?>
        <div class="aside-content <?php echo $fc_facebook['position']; ?> hidden-sm-down js-aside-content"
          style="display:none;">
          <div class="aside-content-icon facebook">
            <i class="fab fa-facebook-f"></i>
          </div>
          <div class="aside-content-container">
            <iframe
              src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2F<?php echo $fc_facebook['page']; ?>&tabs=timeline&width=340&height=480&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId"
              width="340" height="480" style="border:none;overflow:hidden;display:none;" scrolling="no" frameborder="0"
              allowTransparency="true" allow="encrypted-media" onload="this.style.display = 'block'"></iframe>
          </div>
        </div>
      <?php } ?>

      <?php if (isset($fc_exit_popup['status'])) { ?>
        <div class="container-fluid hidden js-exit-popup-container">
          <div class="overlay overlay-black-3" style="z-index: 111;">
            <div class="full-width full-height flex center-xs middle-xs padding-medium">
              <div class="background-white padding-x-large exit-popup-control js-exit-popup-content" style="max-width:60%;position:relative;overflow:hidden;">
                <button class="btn-default btn-white btn-small-square abs js-close" style="top:.25rem;right:.25rem;background-color:rgba(0,0,0,.3);color:#fff;">
                  <i class="fas fa-times"></i>
                </button>
                <span class="heading-2"><?php echo $fc_exit_popup['message'] ?></span>
                <?php echo $module_exit_popup;  ?>
              </div>
            </div>
          </div>
        </div>
      <?php } ?>

      <?php
        $this->language->load('common/extra_oc_lang');
      ?>

      <?php if ($admin_user_logged) { ?>
        <div class="background-white js-log-in-bar">
          <div class="container-fluid">
            <div class="admin-logged-bar row no-space-xs middle-xs between-xs">
              <div class="col-xs-12 col-sm-width-auto">
                <div class="content-box padding-small flex middle-xs center-xs">
                  <img src="catalog/view/theme/vista/image/logo-24.png" width="24" height="24" alt="Futura Sistemas" class="visible-block">
                  <span class="text-small text-gray text-uppercase left-padding-medium left-margin-medium left-border-gray"><?php echo $store_name ?></span>
                </div>
              </div>
              <div class="col-xs-12 col-sm-width-auto">
                <div class="content-box padding-small flex middle-xs center-xs">
                  <a href="admin/index.php?token=<?php echo $admin_token ?>" class="text-medium text-primary" target="_blank"><?php echo $text_go_admin_area ?></a>
                </div>
              </div>
              <div class="col-xs-12 col-sm-width-auto">
                <div class="content-box padding-small flex middle-xs center-xs">
                  <span class="text-small text-gray text-uppercase"><?php echo $admin_user_name ?></span>
                  <a class="text-medium text-primary left-padding-medium left-margin-medium left-border-gray js-log-in-bar-exit" href="#"><?php echo $text_exit ?></a>
                </div>
              </div>
            </div>
          </div>
        </div>
      <?php } ?>

      <?php if (isset($url_app_download) && !empty($url_app_download) && !isset($close)) { ?>
        <div class="row no-space-xs between-xs middle-xs background-white">
          <i class="fas fa-times text-large text-gray padding-medium js-close-smart-install-banner"></i>
          <a href="<?php echo $url_app_download; ?>" class="col-xs">
            <div class="row no-space-xs between-xs middle-xs vertical-padding-medium">
              <img src="<?php echo $icon_app; ?>" alt="" width="64" height="64">
              <div class="col-xs left-padding-medium">
                <span class="text-medium text-bold text-dark visible-block"><?php echo $name; ?></span>
                <span class="text-x-small text-gray visible-block"><?php echo $dev; ?></span>
                <span class="text-x-small text-gray visible-block"><?php echo $download; ?></span>
              </div>
              <div class="padding-medium">
                <span class="text-small text-dark right-margin-x-small"><?php echo $see; ?></span>
                <i class="fas fa-angle-right text-small text-dark"></i>
              </div>
            </div>
          </a>
        </div>
      <?php } ?>

      <?php echo $header_top; ?>
      <?php echo $nav; ?>

    <?php if($validaOfAge){ ?>
      <script type="text/javascript">
      window.waitEvent('scripts_window', function() {

          var HTML="";
          HTML+= ' <style>';
          HTML+= '#formIdadeMinima{ padding:10px; }';
          HTML+= '.logo-idade-minima { display: block; margin:0 auto 30px auto; }';
          HTML+= '#formIdadeMinima img { max-width:100%; }';
          HTML+= '.frase-idade-minima{ font-size: 26px; text-align:center; width:100%; }';

          HTML+= '.btn-idade-minima {border:0; background-color: <?php echo $this->config->get('wg24_top_cart_bgcol')?>; color: <?php echo $this->config->get('wg24_topcart_te_colo')?>; font-size:24px; margin-top:20px; padding:10px 20px 10px 20px; box-sizing:border-box; cursor: pointer; border-radius: 8px;  }';
          HTML+= '.btn-idade-minima:hover {background-color:<?php echo $this->config->get('wg24_l_hcolor')?>; -webkit-transition: background 1000ms ease; -moz-transition: background 1000ms ease; -ms-transition: background 1000ms ease; -o-transition: background 1000ms ease; transition: background 1000ms ease;';
          HTML+= ' </style>' ;

          HTML+=' <div id="formIdadeMinima"><img class="logo-idade-minima" src="<?php echo $logoofage; ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>">';
          HTML+='<div class="frase-idade-minima"><span><?php echo $text_message_ofage; ?></span></div>';
          HTML+='<div style="min-width: 190px; width:60%; margin: 0 auto;">';
          HTML+='<button type="button" onclick="linkSim();" style="float: left;" value="1" class="btn-idade-minima" title="<?php echo $text_yes; ?>"><span><?php echo $text_yes; ?></span></button>';
          HTML+='<button type="button" onclick="linkNo();" style="float: right;" value="0" class="btn-idade-minima" title="<?php echo $text_no; ?>"><span><?php echo $text_no; ?></span></button>';
          HTML+='</div>';

          HTML+=' </div>';

          $.fancybox({
            maxWidth	: 400,
            maxHeight	: 400,
      		  width		: '90%',
      		  height		: '90%',
            fitToView   : false,
      		  autoSize	: false,
            content     : HTML,
            closeBtn : false,
            helpers : {
              overlay : {
                closeClick: false,
                opacity : 0,
                css : {
                  'background' : 'rgba(0, 0, 0, 0.92)',
                  'overflow' : 'hidden',
                  }
              }
          },
            keys : {
              close  : null
            }
          });

      });

      function linkNo(){
        location = '<?php echo $link_no; ?>';
      }

      function linkSim(){
        jQuery.cookie('ofage', true);
        $.fancybox.close();
      }

      </script>
      <?php } ?>

      <script type="text/javascript">
      </script>
      <?php if ($error) { ?>
        <div class="warning">
          <span><?php echo $error_warning; ?>
            <i class="btn-close fas fa-times" aria-hidden="true"></i>
          </span>
        </div>
      <?php } ?>

      <?php if ($customer_interests_remember) { ?>
        <div class="overlay overlay-black-3" style="z-index: 99999;">
          <div class="center-middle-fixed background-light padding-large rel" style="max-height: 80%; max-width: 80%; overflow: auto;">
            <a href="index.php?route=account/interests/remember&remember=1" class="padding-small margin-medium js-remember" style="position: absolute; top: 0; right: 0;"><i class="fas fa-times"></i></a>
            <form action="index.php?route=account/interests/insert&modal=true" method="post" class="interests-form">
              <h1 class="js-title-interests">
                Defina suas áreas de interesse
              </h1>
              <hr class="vertical-margin-large">
              <?php echo $interests_categories ?>
              <hr class="vertical-margin-large">
              <div class="flex between-xs middle-xs">
                <div>
                  <a href="index.php?route=account/interests/remember&remember=1" class="js-remember">Lembre-me depois</a>
                  <span> | </span>
                  <a href="index.php?route=account/interests/remember&remember=0" class="js-remember">Não me lembre mais</a>
                </div>
                <div>
                  <button type="submit" class="btn-default btn-medium btn-success btn-interests js-btn-interests">
                    <span>Salvar</span>
                  </button>
                </div>
              </div>
            </form>
          </div>
        </div>
        <script>
        window.waitEvent('scripts_document', function(){
          function removeInterestsPopUp(result) {
            if (result == '1') {
              $('.overlay').remove();
            } else {
              $('.text-error').remove();
              $('.js-title-interests').after('<span class="text-error border-error padding-small full-width visible-block text-center" style="box-sizing: border-box;">Erro ao salvar áreas de interesse!</span>')
            }
          }

          $('.interests-form').on('submit', function(e){
            e.preventDefault();

            $.ajax({
              method: $(this).attr('method'),
              url: $(this).attr('action'),
              data: $(this).serialize()
            })
            .done(function(result) {
              removeInterestsPopUp(result);
            })
            .fail(function() {
              console.log( "error" );
            });
          });

          $('.js-remember').on('click', function(e){
            e.preventDefault();

            $.ajax({
              method: 'get',
              url: $(this).attr('href'),
            })
            .done(function(result) {
              removeInterestsPopUp(result);
            })
            .fail(function() {
              console.log( "error" );
            });
          });
        });
        </script>
      <?php } ?>
<script>
  window.waitEvent('scripts', function() {
    var typesFromPHP = <?php echo isset($types) ? json_encode($types) : json_encode(array()); ?>;
    for (let i = 0; i < typesFromPHP.length; i++) {
      new Type(typesFromPHP[i]);
    }

  });
</script>