@extends('webpages-templates.frontend-public-default', [
    'menu' => 'contact',
  ]
)
@section('view-title', $data->headPageInfo->title)
@section('view-description', $data->headPageInfo->description)
@section('view-keywords', $data->headPageInfo->keywords)
@section('view-robots', $data->headPageInfo->robots)
@section('view-designer', $data->headPageInfo->designer)
@section('view-canonicalURL', $data->headPageInfo->canonicalURL)
@section('view-alternatesURL')
@foreach ($data->headPageInfo->alternatesURL as $langCode => $langURL)
<link rel="alternate" hreflang="{{ $langCode }}" href="{{ $langURL }}"/>
@endforeach
@endsection
@push('styles-head')
<!--<link rel="stylesheet" media="all" type="text/css" href="{{ $data->webpageIdentifier }}.css"/>-->
<style>
  div#page-product-entry{
  background-color: {{ $data->product->main_color ?? 'none' }};
  --unnamed-color-011434: {{ $data->colorDynamics ?? 'none' }};
  --color-ui-elements-webpage-product: {{ $data->colorDynamics ?? 'none' }};
  --color-product-profile-projection-webpage-product: {{ $data->colorDynamics ?? 'none' }};
  }
  menu#website-main-menu-toggler,
  div#website-main-menu{
    --unnamed-color-011434: {{ $data->colorDynamics ?? 'none' }};
  }
</style>
@endpush
@push('scripts-head')
<!--<script type="text/javascript" src="{{ $data->webpageIdentifier }}.js" defer="defer"></script>-->
<script type="text/javascript" src="main.js" defer="defer"></script>
<script>
  window.addEventListener(`load`, (event) => { // DO NOT EDIT! THIS IS AN EXACT COPY OF PRODUCTS.BLADE.PHP, FOR NOW, KEEM THEM THE SAME!
    const carouselId01 = `products-type-01`;
    const carouselProductsType01 = new Swiper(`*[data-carousel-id="${ carouselId01 }"]`, {
    slidesPerView: `auto`,                                      // `auto`
    slidesOffsetBefore: 0,
    spaceBetween: 68,                                           // Distance between slides in px. If you use "margin" css property to the elements which go into Swiper in which you pass "spaceBetween" into, navigation might not work properly!
    centeredSlides: false,                                      //
    direction: `horizontal`,                                    // §[ `horizontal` | `vertical` ]§
    effect: `slide`,                                            // §[ `slide` | `fade` | `flip` | `coverflow` | `cube` | `creative` ]§ = Transition effect.
    speed: 300,                                                 // number = Duration of transition between slides (in ms)
    fadeEffect: {
      crossFade: true                                           // boolean = Enables slides cross fade, in order to avoid seeing content behind or underneath.
    },
    flipEffect: {},                                             //
    coverflowEffect: {},                                        //
    cubeEffect: {},                                             //
    creativeEffect: {},                                         //
    preventClicks: true,                                        // boolean = Set to true to prevent accidental unwanted clicks on links during swiping
    preventClicksPropagation: true,                             // boolean = Set to true to stop clicks event propagation on links during swiping
    initialSlide: 0,                                            // number = Index number of initial slide.
    rewind: true,                                               // USE LOOP OR REWIND! NOT BOTH
    loop: false,                                                // USE LOOP OR REWIND! NOT BOTH
    autoplay: false, /* {
      delay: 3000,                                              // number = Delay between transitions (in ms). If this parameter is not specified, auto play will be disabled
      disableOnInteraction: true,                               // boolean = Set to false and autoplay will not be disabled after user interactions (swipes), it will be restarted every time after interaction.
      pauseOnMouseEnter: false,                                 // boolean = When enabled autoplay will be paused on pointer (mouse) enter over Swiper container.
      reverseDirection:	false,                                  // boolean = Enables autoplay in reverse direction
      stopOnLastSlide: false,                                   // boolean = Enable this parameter and autoplay will be stopped when it reaches last slide (has no effect in loop mode)
      waitForTransition: true,                                  // boolean = When enabled autoplay will wait for wrapper transition to continue. Can be disabled in case of using Virtual Translate when your slider may not have transition
      // If you need to specify different delay for specific slides you can do it by using data-swiper-autoplay (in ms) attribute on slide: <div class="swiper-slide" data-swiper-autoplay="2000">
    }, */
    freeMode: {
      enabled: true,                                            // boolean = To enable/disable, indicated to be used with breakpoints or conditions.
      sticky: false,                                            // boolean = To enable/disable snap to slides positions in free mode
      momentum: true,                                           // boolean = If enabled, then slide will keep moving for a while after you release it
      minimumVelocity: 0.02,                                    // number = Minimum touchmove-velocity required to trigger free mode momentum
      momentumRatio: 1,                                         // number = Higher value produces larger momentum distance after you release slider
      momentumVelocityRatio: 1,                                 // number = Higher value produces larger momentum velocity after you release slider
      momentumBounce: true,                                     // boolean = Set to false if you want to disable momentum bounce in free mode
      momentumBounceRatio: 1,                                   // number = Higher value produces larger momentum bounce effect
    },
    allowTouchMove: true,                                       // boolean = If `false`, then the only way to switch the slide is use of external API functions like slidePrev or slideNext
    grabCursor: true,                                           // boolean = This option may improve a little desktop usability. If true, user will see the "grab" cursor when hover on Swiper.
    navigation: {
      enabled: true,                                            // boolean = To enable/disable, indicated to be used with breakpoints or conditions.
      nextEl: `*[data-carousel-control-next-id="${ carouselId01 }"]`, // string = CSS selector
      prevEl: `*[data-carousel-control-prev-id="${ carouselId01 }"]`, // string = CSS selector
      // [...]
    },
    pagination: {
      enabled: true,                                            // boolean = To enable/disable, indicated to be used with breakpoints or conditions.
      el: `*[data-carousel-pagination-id="${ carouselId01 }"]`, // string = CSS selector or HTML element of the container with pagination.
      type: `bullets`,                                          // §[ `progressbar` | `bullets` | `fraction` | `custom` ]§ = Type of pagination.
      clickable: false,                                         // boolean = If true then clicking on pagination button will cause transition to appropriate slide. Only for bullets pagination type!
      clickableClass: 'swiper-pagination-clickable',            // CSS class name set to pagination when it is clickable.
//      renderBullet: function(index, className) {
////        return `<span class="${ className }">${ index + 1 }</span>`;
//        return `<span class="${ className }"><div>${ index + startingYear }</div><div class="yearLineCall"></div></span>`;
//      }
      // [...]
    },
    scrollbar: {
      enabled: false,                                            // boolean = To enable/disable, indicated to be used with breakpoints or conditions.
      el: `*[data-carousel-scrollbar-id="${ carouselId01 }"]`,  // string = CSS selector or HTML element of the container with scrollbar.
      hide: true,                                               // boolean = Hide scrollbar automatically after user interaction.
      draggable: false,                                         // boolean = Set to true to enable make scrollbar draggable that allows you to control slider position.
      snapOnRelease: false,                                     // boolean = Set to true to snap slider position to slides when you release scrollbar.
      dragSize: `auto`,                                         // §[ `auto` | number ]§ = Size of scrollbar draggable element in px.
      scrollbarDisabledClass: `swiper-scrollbar-disabled`,     // string = CSS class name added on swiper container and scrollbar element when scrollbar is disabled by breakpoint.
      lockClass: `swiper-scrollbar-lock`,                       // string = Scrollbar element additional CSS class when it is disabled.
      dragClass: `swiper-scrollbar-drag`,                       // string = Scrollbar draggable element CSS class.
      horizontalClass: `swiper-scrollbar-horizontal`,           // string = CSS class name set to scrollbar in horizontal Swiper.
      verticalClass: `swiper-scrollbar-vertical`,               // string = CSS class name set to scrollbar in vertical Swiper.
    },
//    on: {                                                       // Register event handlers
//      slideChange: someFunction,
//      reachEnd: someFunction,
//    },
//    breakpoints: {                                              // Responsive breakpoints parameters, which override the defaults
//      320: { // when viewport width is >= 320px
//        slidesPerView: 2,
//        spaceBetween: 20,
//        allowTouchMove: true
//      },
//      480: { // when viewport width is >= 480px
//        slidesPerView: 3,
//        spaceBetween: 30,
//        allowTouchMove: true
//      },
//      768: { // when viewport width is >= 768px
//        slidesPerView: 4,
//        spaceBetween: 40,
//        allowTouchMove: true
//      },
//      1024: { // when viewport width is >= 1024px
//        slidesPerView: 4,
//        spaceBetween: 40,
//        allowTouchMove: false
//      },
//      1280: { // when viewport width is >= 1280px
//        slidesPerView: 4,
//        spaceBetween: 40,
//        allowTouchMove: false
//      },
//      1920: { // when viewport width is >= 1920px
//        slidesPerView: 4,
//        spaceBetween: 40,
//        allowTouchMove: false
//      }
//    }
    });
    const carouselId02 = `products-type-02`;
    const carouselProductsType02 = new Swiper(`*[data-carousel-id="${ carouselId02 }"]`, {
    slidesPerView: `auto`,                                      // `auto`
    slidesOffsetBefore: 0,
    spaceBetween: 60,                                           // Distance between slides in px. If you use "margin" css property to the elements which go into Swiper in which you pass "spaceBetween" into, navigation might not work properly!
    centeredSlides: false,                                      //
    direction: `horizontal`,                                    // §[ `horizontal` | `vertical` ]§
    effect: `slide`,                                            // §[ `slide` | `fade` | `flip` | `coverflow` | `cube` | `creative` ]§ = Transition effect.
    speed: 300,                                                 // number = Duration of transition between slides (in ms)
    fadeEffect: {
      crossFade: true                                           // boolean = Enables slides cross fade, in order to avoid seeing content behind or underneath.
    },
    flipEffect: {},                                             //
    coverflowEffect: {},                                        //
    cubeEffect: {},                                             //
    creativeEffect: {},                                         //
    preventClicks: true,                                        // boolean = Set to true to prevent accidental unwanted clicks on links during swiping
    preventClicksPropagation: true,                             // boolean = Set to true to stop clicks event propagation on links during swiping
    initialSlide: 0,                                            // number = Index number of initial slide.
    rewind: true,                                               // USE LOOP OR REWIND! NOT BOTH
    loop: false,                                                // USE LOOP OR REWIND! NOT BOTH
    autoplay: false, /* {
      delay: 3000,                                              // number = Delay between transitions (in ms). If this parameter is not specified, auto play will be disabled
      disableOnInteraction: true,                               // boolean = Set to false and autoplay will not be disabled after user interactions (swipes), it will be restarted every time after interaction.
      pauseOnMouseEnter: false,                                 // boolean = When enabled autoplay will be paused on pointer (mouse) enter over Swiper container.
      reverseDirection:	false,                                  // boolean = Enables autoplay in reverse direction
      stopOnLastSlide: false,                                   // boolean = Enable this parameter and autoplay will be stopped when it reaches last slide (has no effect in loop mode)
      waitForTransition: true,                                  // boolean = When enabled autoplay will wait for wrapper transition to continue. Can be disabled in case of using Virtual Translate when your slider may not have transition
      // If you need to specify different delay for specific slides you can do it by using data-swiper-autoplay (in ms) attribute on slide: <div class="swiper-slide" data-swiper-autoplay="2000">
    }, */
    freeMode: {
      enabled: true,                                            // boolean = To enable/disable, indicated to be used with breakpoints or conditions.
      sticky: false,                                            // boolean = To enable/disable snap to slides positions in free mode
      momentum: true,                                           // boolean = If enabled, then slide will keep moving for a while after you release it
      minimumVelocity: 0.02,                                    // number = Minimum touchmove-velocity required to trigger free mode momentum
      momentumRatio: 1,                                         // number = Higher value produces larger momentum distance after you release slider
      momentumVelocityRatio: 1,                                 // number = Higher value produces larger momentum velocity after you release slider
      momentumBounce: true,                                     // boolean = Set to false if you want to disable momentum bounce in free mode
      momentumBounceRatio: 1,                                   // number = Higher value produces larger momentum bounce effect
    },
    allowTouchMove: true,                                       // boolean = If `false`, then the only way to switch the slide is use of external API functions like slidePrev or slideNext
    grabCursor: true,                                           // boolean = This option may improve a little desktop usability. If true, user will see the "grab" cursor when hover on Swiper.
    navigation: {
      enabled: true,                                            // boolean = To enable/disable, indicated to be used with breakpoints or conditions.
      nextEl: `*[data-carousel-control-next-id="${ carouselId02 }"]`, // string = CSS selector
      prevEl: `*[data-carousel-control-prev-id="${ carouselId02 }"]`, // string = CSS selector
      // [...]
    },
    pagination: {
      enabled: true,                                            // boolean = To enable/disable, indicated to be used with breakpoints or conditions.
      el: `*[data-carousel-pagination-id="${ carouselId02 }"]`, // string = CSS selector or HTML element of the container with pagination.
      type: `bullets`,                                          // §[ `progressbar` | `bullets` | `fraction` | `custom` ]§ = Type of pagination.
      clickable: false,                                         // boolean = If true then clicking on pagination button will cause transition to appropriate slide. Only for bullets pagination type!
      clickableClass: 'swiper-pagination-clickable',            // CSS class name set to pagination when it is clickable.
//      renderBullet: function(index, className) {
////        return `<span class="${ className }">${ index + 1 }</span>`;
//        return `<span class="${ className }"><div>${ index + startingYear }</div><div class="yearLineCall"></div></span>`;
//      }
      // [...]
    },
    scrollbar: {
      enabled: false,                                            // boolean = To enable/disable, indicated to be used with breakpoints or conditions.
      el: `*[data-carousel-scrollbar-id="${ carouselId02 }"]`,  // string = CSS selector or HTML element of the container with scrollbar.
      hide: true,                                               // boolean = Hide scrollbar automatically after user interaction.
      draggable: false,                                         // boolean = Set to true to enable make scrollbar draggable that allows you to control slider position.
      snapOnRelease: false,                                     // boolean = Set to true to snap slider position to slides when you release scrollbar.
      dragSize: `auto`,                                         // §[ `auto` | number ]§ = Size of scrollbar draggable element in px.
      scrollbarDisabledClass: `swiper-scrollbar-disabled`,     // string = CSS class name added on swiper container and scrollbar element when scrollbar is disabled by breakpoint.
      lockClass: `swiper-scrollbar-lock`,                       // string = Scrollbar element additional CSS class when it is disabled.
      dragClass: `swiper-scrollbar-drag`,                       // string = Scrollbar draggable element CSS class.
      horizontalClass: `swiper-scrollbar-horizontal`,           // string = CSS class name set to scrollbar in horizontal Swiper.
      verticalClass: `swiper-scrollbar-vertical`,               // string = CSS class name set to scrollbar in vertical Swiper.
    },
//    on: {                                                       // Register event handlers
//      slideChange: someFunction,
//      reachEnd: someFunction,
//    },
//    breakpoints: {                                              // Responsive breakpoints parameters, which override the defaults
//      320: { // when viewport width is >= 320px
//        slidesPerView: 2,
//        spaceBetween: 20,
//        allowTouchMove: true
//      },
//      480: { // when viewport width is >= 480px
//        slidesPerView: 3,
//        spaceBetween: 30,
//        allowTouchMove: true
//      },
//      768: { // when viewport width is >= 768px
//        slidesPerView: 4,
//        spaceBetween: 40,
//        allowTouchMove: true
//      },
//      1024: { // when viewport width is >= 1024px
//        slidesPerView: 4,
//        spaceBetween: 40,
//        allowTouchMove: false
//      },
//      1280: { // when viewport width is >= 1280px
//        slidesPerView: 4,
//        spaceBetween: 40,
//        allowTouchMove: false
//      },
//      1920: { // when viewport width is >= 1920px
//        slidesPerView: 4,
//        spaceBetween: 40,
//        allowTouchMove: false
//      }
//    }
    });
  });
</script>
<script async="async">
window.addEventListener(`DOMContentLoaded`, (event) => {
  const webpageMainHeading = document.querySelector(`main h1`);
  const webpageMainHeadingFirstWordLength = webpageMainHeading.textContent.split(" ")[0].length;
  
  if (webpageMainHeadingFirstWordLength > 6) {
    webpageMainHeading.style.fontSize = `clamp(64px, ${ 15.625 + ((6 - webpageMainHeadingFirstWordLength) * 25/1920) }vw, ${ 300 + ((6 - webpageMainHeadingFirstWordLength) * 25)}px)`;
    console.log(`O <h1> foi redimensionado!`);
  }
});
</script>
@endpush
@section('webpage-structure')
<main>
<div id="page-product-entry" class="wrapper">
<h1>{{ $data->product->short_name }}</h1>
<section class="first-presentation">
  <span class="product slogan">{!! $data->product->slogan ?? '' !!}</span>
  {{-- DEV-CONTENT <p>O Buffet Atlas é um convite a criar o seu mundo de conforto. Transite pelas gerações, tempo e espaço a cada novo olhar.</p> DEV-CONTENT --}}
  <p>{{ $data->product->webpage_intro_paragraph }}</p>

  @if ($data->product->main_image != 1)
    <picture class="product main-image" style="background-image: url({{ url('painel/' . $data->product->profile_projection) }})">
      {{-- DEV-CONTENT <img src="/assets/images/dev-products/atlas.910x456.png"> DEV-CONTENT --}}
      <img id="" class="" alt=""
          crossorigin="anonymous" referrerpolicy="strict-origin-when-cross-origin"
          decoding="sync" loading="eager" fetchpriority="high"
          width="" height="" sizes=""
          srcset=""
          src="{{ url('painel/' . $data->product->main_image) }}"/>
    </picture>
  @else
    <picture class="product main-image" style="background-image: url(/volatile/products-profile-projection/{{ $data->product->id }}/{{ $data->product->profile_projection }})">
      {{-- DEV-CONTENT <img src="/assets/images/dev-products/atlas.910x456.png"> DEV-CONTENT --}}
      <img id="" class="" alt=""
          crossorigin="anonymous" referrerpolicy="strict-origin-when-cross-origin"
          decoding="sync" loading="eager" fetchpriority="high"
          width="" height="" sizes=""
          srcset=""
          src="/volatile/products-main-image/{{ $data->product->id }}/imagem-principal.png"/>
    </picture>
  @endif

  <nav class="webpage">
    <a class="" target="_self" rel="" href="{{ route('acquisition.' . app()->getLocale(), []) }}">Comprar</a>
    <a class="" target="_self" rel="" href="#acabamentos">Acabamentos</a>
    <a class="" target="_self" rel="" href="#downloads-e-dados-do-produto">Downloads</a>
    <a class="" target="_self" rel="" href="#notas-do-designer">Notas do Designer</a>
  </nav>
</section>
<section class="product-presentation swiper" data-carousel-id="product-presentation">
  <h2 style="display: none">Conheça o Produto</h2>
  <div class="swiper-wrapper">
      </div>
  <div class="swiper-ui">
    <menu class="swiper-navigation">
      <li class="swiper-button-prev" data-carousel-control-prev-id="product-presentation">
        <svg id="" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 59.95 27.04">
          <defs>
            <style>
              *.cls-1{
                fill: none;
                stroke: #151a31;
              }
            </style>
          </defs>
          <g id="" data-name="">
            <path class="cls-1 is-animated" id="arrow-head-bottom-half" d="m.35 13.45 13.24 13.24"></path>
            <path class="cls-1 is-animated" id="arrow-head-top-half" d="M13.45.35.35 13.45"></path>
            <path class="cls-1 is-animated" id="arrow-body" d="M.35 13.45h59.6"></path>
          </g>
        </svg>
      </li>
      <li class="swiper-button-next" data-carousel-control-next-id="product-presentation">
        <svg id="" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 59.95 27.04">
          <defs>
            <style>
              *.cls-1{
                fill: none;
                stroke: #151a31;
              }
            </style>
          </defs>
          <g id="" data-name="">
            <path class="cls-1 is-animated" id="arrow-head-bottom-half" d="m.35 13.45 13.24 13.24"></path>
            <path class="cls-1 is-animated" id="arrow-head-top-half" d="M13.45.35.35 13.45"></path>
            <path class="cls-1 is-animated" id="arrow-body" d="M.35 13.45h59.6"></path>
          </g>
        </svg>
      </li>
    </menu>
    <div class="swiper-pagination" data-carousel-pagination-id="product-presentation"></div>
<!--    <div class="swiper-scrollbar" data-carousel-scrollbar-id="product-presentation"></div>-->
  </div>
<!-- PORPERLY POSITION THIS! -->
<script>
  window.addEventListener(`load`, (event) => {
    const carouselIdAA = `product-presentation`;
    const carouselProductPresentation = new Swiper(`*[data-carousel-id="${ carouselIdAA }"]`, {
    slidesPerView: `auto`,                                      // `auto`
slidesOffsetBefore: 0,
    spaceBetween: 45,                                           // Distance between slides in px. If you use "margin" css property to the elements which go into Swiper in which you pass "spaceBetween" into, navigation might not work properly!
    centeredSlides: true,                                       // 
    direction: `horizontal`,                                    // §[ `horizontal` | `vertical` ]§
    effect: `slide`,                                            // §[ `slide` | `fade` | `flip` | `coverflow` | `cube` | `creative` ]§ = Transition effect.
    speed: 300,                                                 // number = Duration of transition between slides (in ms)
    fadeEffect: {
      crossFade: true                                           // boolean = Enables slides cross fade, in order to avoid seeing content behind or underneath.
    },
    flipEffect: {},                                             //
    coverflowEffect: {},                                        //
    cubeEffect: {},                                             //
    creativeEffect: {},                                         //
    preventClicks: true,                                        // boolean = Set to true to prevent accidental unwanted clicks on links during swiping
    preventClicksPropagation: true,                             // boolean = Set to true to stop clicks event propagation on links during swiping
    initialSlide: 0,                                            // number = Index number of initial slide.
    rewind: false,                                              // USE LOOP OR REWIND! NOT BOTH
    loop: false,                                                // USE LOOP OR REWIND! NOT BOTH
    autoplay: false, /* {
      delay: 3000,                                              // number = Delay between transitions (in ms). If this parameter is not specified, auto play will be disabled
      disableOnInteraction: true,                               // boolean = Set to false and autoplay will not be disabled after user interactions (swipes), it will be restarted every time after interaction.
      pauseOnMouseEnter: false,                                 // boolean = When enabled autoplay will be paused on pointer (mouse) enter over Swiper container.
      reverseDirection:	false,                                  // boolean = Enables autoplay in reverse direction
      stopOnLastSlide: false,                                   // boolean = Enable this parameter and autoplay will be stopped when it reaches last slide (has no effect in loop mode)
      waitForTransition: true,                                  // boolean = When enabled autoplay will wait for wrapper transition to continue. Can be disabled in case of using Virtual Translate when your slider may not have transition
      // If you need to specify different delay for specific slides you can do it by using data-swiper-autoplay (in ms) attribute on slide: <div class="swiper-slide" data-swiper-autoplay="2000">
    }, */
    freeMode: {
      enabled: true,                                           // boolean = To enable/disable, indicated to be used with breakpoints or conditions.
      sticky: true,                                            // boolean = To enable/disable snap to slides positions in free mode
      momentum: true,                                           // boolean = If enabled, then slide will keep moving for a while after you release it
      minimumVelocity: 0.02,                                    // number = Minimum touchmove-velocity required to trigger free mode momentum
      momentumRatio: 1,                                         // number = Higher value produces larger momentum distance after you release slider
      momentumVelocityRatio: 1,                                 // number = Higher value produces larger momentum velocity after you release slider
      momentumBounce: true,                                     // boolean = Set to false if you want to disable momentum bounce in free mode
      momentumBounceRatio: 1,                                   // number = Higher value produces larger momentum bounce effect
    },
    allowTouchMove: true,                                       // boolean = If `false`, then the only way to switch the slide is use of external API functions like slidePrev or slideNext
    grabCursor: true,                                           // boolean = This option may improve a little desktop usability. If true, user will see the "grab" cursor when hover on Swiper.
    navigation: {
      enabled: true,                                            // boolean = To enable/disable, indicated to be used with breakpoints or conditions.
      nextEl: `*[data-carousel-control-next-id="${ carouselIdAA }"]`, // string = CSS selector
      prevEl: `*[data-carousel-control-prev-id="${ carouselIdAA }"]`, // string = CSS selector
      // [...]
    },
    pagination: {
      enabled: true,                                            // boolean = To enable/disable, indicated to be used with breakpoints or conditions.
      el: `*[data-carousel-pagination-id="${ carouselIdAA }"]`, // string = CSS selector or HTML element of the container with pagination.
      type: `fraction`,                                         // §[ `progressbar` | `bullets` | `fraction` | `custom` ]§ = Type of pagination.
      clickable: false,                                         // boolean = If true then clicking on pagination button will cause transition to appropriate slide. Only for bullets pagination type!
      clickableClass: 'swiper-pagination-clickable',            // CSS class name set to pagination when it is clickable.
//      renderBullet: function(index, className) {
////        return `<span class="${ className }">${ index + 1 }</span>`;
//        return `<span class="${ className }"><div>${ index + startingYear }</div><div class="yearLineCall"></div></span>`;
//      }
      // [...]
      renderFraction: function (currentClass, totalClass) {
        return '<span class="' + currentClass + '"></span>' +
          '<span class="divider"></span>' +
          '<span class="' + totalClass + '"></span>';
      },
      formatFractionCurrent: function (number) {
//        return ('0' + number).slice(-2);
        return ('0' + number);
      },
      formatFractionTotal: function (number) {
//        return ('0' + number).slice(-2);
        return ('0' + number);
      },
    },
    scrollbar: {
      enabled: false,                                            // boolean = To enable/disable, indicated to be used with breakpoints or conditions.
      el: `*[data-carousel-scrollbar-id="${ carouselIdAA }"]`,  // string = CSS selector or HTML element of the container with scrollbar.
      hide: true,                                               // boolean = Hide scrollbar automatically after user interaction.
      draggable: false,                                         // boolean = Set to true to enable make scrollbar draggable that allows you to control slider position.
      snapOnRelease: false,                                     // boolean = Set to true to snap slider position to slides when you release scrollbar.
      dragSize: `auto`,                                         // §[ `auto` | number ]§ = Size of scrollbar draggable element in px.
      scrollbarDisabledClass: `swiper-scrollbar-disabled`,     // string = CSS class name added on swiper container and scrollbar element when scrollbar is disabled by breakpoint.
      lockClass: `swiper-scrollbar-lock`,                       // string = Scrollbar element additional CSS class when it is disabled.
      dragClass: `swiper-scrollbar-drag`,                       // string = Scrollbar draggable element CSS class.
      horizontalClass: `swiper-scrollbar-horizontal`,           // string = CSS class name set to scrollbar in horizontal Swiper.
      verticalClass: `swiper-scrollbar-vertical`,               // string = CSS class name set to scrollbar in vertical Swiper.
    },
//    on: {                                                       // Register event handlers
//      slideChange: removeHeadingFromSection,
//      reachBeginning: showHeadingFromSection,
////      reachEnd: someFunction,
//    },
    breakpoints: {                                              // Responsive breakpoints parameters, which override the defaults
//      320: { // when viewport width is >= 320px
////        slidesPerView: 2,
////        spaceBetween: 20,
////        allowTouchMove: true
//      },
//      480: { // when viewport width is >= 480px
////        slidesPerView: 3,
////        spaceBetween: 30,
////        allowTouchMove: true
//      },
     600: { // when viewport width is >= 768px
        slidesOffsetBefore: 30,
     },
      861: { // when viewport width is >= 1024px
        slidesPerView: 1,
        slidesOffsetBefore: 200,
        freeMode: {
          enabled: true,                                            // boolean = To enable/disable, indicated to be used with breakpoints or conditions.
          sticky: false,                                            // boolean = To enable/disable snap to slides positions in free mode
          momentum: true,                                           // boolean = If enabled, then slide will keep moving for a while after you release it
          minimumVelocity: 0.02,                                    // number = Minimum touchmove-velocity required to trigger free mode momentum
          momentumRatio: 1,                                         // number = Higher value produces larger momentum distance after you release slider
          momentumVelocityRatio: 1,                                 // number = Higher value produces larger momentum velocity after you release slider
          momentumBounce: true,                                     // boolean = Set to false if you want to disable momentum bounce in free mode
          momentumBounceRatio: 1,                                   // number = Higher value produces larger momentum bounce effect
        },
      },
   
//      1920: { // when viewport width is >= 1920px
////        slidesPerView: 4,
////        spaceBetween: 40,
////        allowTouchMove: false
//      }
    },
    });
  });
</script>
</section>
<section id="acabamentos" class="product-finishes">
  <h2>Acabamentos <strong class="product name">{{ $data->product->short_name }}</strong></h2>
  @foreach ($data->productEnabledFinishesCategories as $finishCategorykey => $product_finish_category)
<section class="product-finish-category">
  <h2 class="products-type">{{ $product_finish_category->official_name }}</h2>
  <div class="swiper" data-carousel-id="products-type-01">
    <div class="swiper-wrapper">
      @foreach ($product_finish_category->productFinishes as $finishKey => $finishInfo)
      <div class="product-card swiper-slide">
<picture class="product main-image">
<!--  <img src="/assets/images/dev-products-finishes/{{ $finishInfo->image }}">-->
  <img src="/volatile/products-finishes/{{ $finishInfo->image }}">
</picture>
        <h3 class="product name"></h3>
        <hr/>
        <a class="cta" target="_blank" rel="" href="">Ver detalhes</a>
        {{-- <p class="product slogan"></p> --}}
      </div>
      @endforeach
    </div>
    <menu class="swiper-navigation">
      <li class="swiper-button-prev" data-carousel-control-prev-id="products-type-01">
        <svg id="" data-name="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 59.95 27.04">
          <defs>
            <style>
              *.cls-1{
                fill: none;
                stroke: #151a31;
              }
            </style>
          </defs>
          <g id="" data-name="">
            <path class="cls-1 is-animated" id="arrow-head-bottom-half" d="m.35 13.45 13.24 13.24"></path>
            <path class="cls-1 is-animated" id="arrow-head-top-half" d="M13.45.35.35 13.45"></path>
            <path class="cls-1 is-animated" id="arrow-body" d="M.35 13.45h59.6"></path>
          </g>
        </svg>
      </li>
      <li class="swiper-button-next" data-carousel-control-next-id="products-type-01">
        <svg id="" data-name="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 59.95 27.04">
          <defs>
            <style>
              *.cls-1{
                fill: none;
                stroke: #151a31;
              }
            </style>
          </defs>
          <g id="" data-name="">
            <path class="cls-1 is-animated" id="arrow-head-bottom-half" d="m.35 13.45 13.24 13.24"></path>
            <path class="cls-1 is-animated" id="arrow-head-top-half" d="M13.45.35.35 13.45"></path>
            <path class="cls-1 is-animated" id="arrow-body" d="M.35 13.45h59.6"></path>
          </g>
        </svg>
      </li>
    </menu>
  <!--    <div class="swiper-pagination" data-carousel-pagination-id="products-type-01"></div>-->
  <!--    <div class="swiper-scrollbar" data-carousel-scrollbar-id="products-type-01"></div>-->
    </div>
</section>
  @endforeach

</section>
<section class="CHAMADA-LINHA-ESSENTIAL"></section>
<section id="downloads-e-dados-do-produto" class="product data assets">
  <script>
    function productUnavailableMessage() {
      Swal.fire({
        title: "Material em Desenvolvimento",
        text: "Disponível em breve!",
        icon: "info",
      });
    }
  </script>
<script>
  function setTab(evt, cityName){
    let i, tabcontent, tablinks;

    // Get all elements with class="pageTab" and hide them
    tabcontent = document.getElementsByClassName("pageTab");
    for (i = 0; i < tabcontent.length; i++) {
      tabcontent[i].classList.add(`undisplay`);
    }

    // Get all elements with class="navTab" and remove the class "active"
    tablinks = document.getElementsByClassName("navTab");
    for (i = 0; i < tablinks.length; i++) {
      tablinks[i].className = tablinks[i].className.replace(" active", "");
    }

    // Show the current tab, and add an "active" class to the button that opened the tab
    document.getElementById(cityName).classList.remove(`undisplay`);
    document.getElementById(cityName).style.zIndex = "2";
    evt.currentTarget.className += " active";
    
    // ABOVE, COPIED FROM MARCHER
    // BELOW, NEW FOR UNIVERSUM
    if(cityName == "tab1"){
//      document.querySelector(`picture#illustration-shopkeeper`).classList.remove(`animate__fadeOut`);
//      document.querySelector(`picture#illustration-shopkeeper`).classList.add(`animate__fadeIn`);
//      document.querySelector(`picture#illustration-careers`).classList.remove(`animate__fadeInLeft`);
//      document.querySelector(`picture#illustration-careers`).classList.add(`animate__fadeOutLeft`);
    }
    else if(cityName == "tab2"){
//      document.querySelector(`picture#illustration-shopkeeper`).classList.add(`animate__fadeOut`);
//      document.querySelector(`picture#illustration-shopkeeper`).classList.remove(`animate__fadeIn`);
//      document.querySelector(`picture#illustration-careers`).classList.add(`animate__fadeInLeft`);
//      document.querySelector(`picture#illustration-careers`).classList.remove(`animate__fadeOutLeft`);
    }
  }
</script>
  <div class="product specs">
    <menu class="tabs-control">
      <li><button id="" class="navTab active" data-tab="technicalSpecifications" onclick="setTab(event, 'tab1')">Dimensões</button></li>
      <li><button id="" class="navTab" data-tab="advantages" onclick="setTab(event, 'tab2')">Especificações</button></li>
    </menu>
    <div id="tab1" class="tab pageTab product specs dimensions" data-tab="technicalSpecifications">
          </div>
    <div id="tab2" class="tab pageTab undisplay product specs general" data-tab="advantages">
      <span class="product category">Categoria: {{ $data->product_type[0]->short_name ?? 'Móveis' }}</span>
    </div>
  </div>  
  <div class="product downloads">
    <menu class="tabs-control">
      <li><button id="" class="navTabDISABLED active" data-tab="technicalSpecifications" onclick="setTab(event, 'tab3')">Downloads</button></li>
    </menu>
<!--    <h2>Downloads</h2>-->
    <div id="tab3" class="tab pageTabDISABLED product downloads" data-tab="technicalSpecifications">
      <a class="product download block3d" target="{{ $data->product->block3d_url ? '_blank' : '_self' }}" rel="" href="{{ $data->product->block3d_url ?? 'javascript:productUnavailableMessage()' }}">Bloco 3D</a>
      <a class="product download datasheet" target="{{ $data->product->datasheet_url ? '_blank' : '_self' }}" rel="" href="{{ $data->product->datasheet_url ?? 'javascript:productUnavailableMessage()' }}">Ficha Técnica 2D</a>
      <a class="product download gallery" target="{{ $data->product->gallery_url ? '_blank' : '_self' }}" rel="" href="{{ $data->product->gallery_url ?? 'javascript:productUnavailableMessage()' }}">Galeria de Imagens</a>
    </div>
  </div>
</section>
  

  
<section class="related-products"></section>
    @if( !$data->related_products->isEmpty() )
        <section id="produtos-relacionados" class="products-type"> {{-- class="related-products" --}}
          <h2 class="products-type">Peças Selecionadas para Compor</h2>
          <div class="swiper" data-carousel-id="products-type-01">
            <div class="swiper-wrapper">
                          </div>
            <menu class="swiper-navigation">
              <li class="swiper-button-prev" data-carousel-control-prev-id="products-type-01">
                <svg id="" data-name="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 59.95 27.04">
                  <defs>
                    <style>
                      *.cls-1{
                        fill: none;
                        stroke: #151a31;
                      }
                    </style>
                  </defs>
                  <g id="" data-name="">
                    <path class="cls-1 is-animated" id="arrow-head-bottom-half" d="m.35 13.45 13.24 13.24"></path>
                    <path class="cls-1 is-animated" id="arrow-head-top-half" d="M13.45.35.35 13.45"></path>
                    <path class="cls-1 is-animated" id="arrow-body" d="M.35 13.45h59.6"></path>
                  </g>
                </svg>
              </li>
              <li class="swiper-button-next" data-carousel-control-next-id="products-type-01">
                <svg id="" data-name="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 59.95 27.04">
                  <defs>
                    <style>
                      *.cls-1{
                        fill: none;
                        stroke: #151a31;
                      }
                    </style>
                  </defs>
                  <g id="" data-name="">
                    <path class="cls-1 is-animated" id="arrow-head-bottom-half" d="m.35 13.45 13.24 13.24"></path>
                    <path class="cls-1 is-animated" id="arrow-head-top-half" d="M13.45.35.35 13.45"></path>
                    <path class="cls-1 is-animated" id="arrow-body" d="M.35 13.45h59.6"></path>
                  </g>
                </svg>
              </li>
            </menu>
          <!--    <div class="swiper-pagination" data-carousel-pagination-id="products-type-01"></div>-->
          <!--    <div class="swiper-scrollbar" data-carousel-scrollbar-id="products-type-01"></div>-->
            </div>
        </section>
    @else
      <section id="produtos-relacionados" class="products-type"> {{-- class="related-products" --}}
        <h2 class="products-type">Peças Selecionadas para Compor</h2>
        <div class="swiper" data-carousel-id="products-type-01">
          <div class="swiper-wrapper">
                      </div>
          <menu class="swiper-navigation">
            <li class="swiper-button-prev" data-carousel-control-prev-id="products-type-01">
              <svg id="" data-name="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 59.95 27.04">
                <defs>
                  <style>
                    *.cls-1{
                      fill: none;
                      stroke: #151a31;
                    }
                  </style>
                </defs>
                <g id="" data-name="">
                  <path class="cls-1 is-animated" id="arrow-head-bottom-half" d="m.35 13.45 13.24 13.24"></path>
                  <path class="cls-1 is-animated" id="arrow-head-top-half" d="M13.45.35.35 13.45"></path>
                  <path class="cls-1 is-animated" id="arrow-body" d="M.35 13.45h59.6"></path>
                </g>
              </svg>
            </li>
            <li class="swiper-button-next" data-carousel-control-next-id="products-type-01">
              <svg id="" data-name="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 59.95 27.04">
                <defs>
                  <style>
                    *.cls-1{
                      fill: none;
                      stroke: #151a31;
                    }
                  </style>
                </defs>
                <g id="" data-name="">
                  <path class="cls-1 is-animated" id="arrow-head-bottom-half" d="m.35 13.45 13.24 13.24"></path>
                  <path class="cls-1 is-animated" id="arrow-head-top-half" d="M13.45.35.35 13.45"></path>
                  <path class="cls-1 is-animated" id="arrow-body" d="M.35 13.45h59.6"></path>
                </g>
              </svg>
            </li>
          </menu>
        <!--    <div class="swiper-pagination" data-carousel-pagination-id="products-type-01"></div>-->
        <!--    <div class="swiper-scrollbar" data-carousel-scrollbar-id="products-type-01"></div>-->
          </div>
      </section>
    @endif
@if (!isset($data->product_designer->main_image) && !isset($data->product_designer->product_webpage_note_default) && isset($data->product_designer->official_name))
<section id="notas-do-designer" class="product-designer-notes">
  <style data-note="missing content workaround">
    div#page-product-entry.wrapper > section#notas-do-designer.product-designer-notes{
      grid-template: 
        "gaBigName" auto
        / 1fr;
    }
  </style>
  <div class="product-designer name gigantic">
    <span class="product-designer name">{{ $data->product_designer->official_name }}</span>
  </div>
</section>
@elseif (isset($data->product_designer->official_name))
<section id="notas-do-designer" class="product-designer-notes">
  <h2><strong>Notas</strong> do Designer</h2>
  <div class="product-designer-notes">
    <p>{{ $data->product_designer->official_name }}</p>
    {!! $data->product_designer->product_webpage_note_default ?? '' !!}
  </div>
  <div class="product-designer card">
    <picture id="" class="product-designer">
      <img id="" class="product-designer" alt=""
          crossorigin="anonymous" referrerpolicy="strict-origin-when-cross-origin"
          decoding="auto" loading="lazy" fetchpriority="auto"
          width="600" height="§" sizes=""
          srcset=""
          src="{{ url('painel/' . $data->product_designer->main_image ) }}"/>
    </picture>
    <a class="product-designer name social-network instagram" target="_blank" rel="external" href="{{ 'https://www.instagram.com/' . $data->product_designer->instagram_account . '/' }}">
<!--      <span class="product-designer name">{{ $data->product_designer->short_name }}</span>-->
    <span class="social-network instagram">Instagram</span>
    </a>
    <a class="product-designer products" target="_self" rel="" href="{{ route('product-search.' . app()->getLocale(), ['search' => $data->product_designer->short_name]) }}">Ver peças</a>
  </div>
  <div class="product-designer name gigantic">
    <span class="product-designer name">{{ $data->product_designer->short_name }}</span>
  </div>
</section>
@endif
</div>
</main>
<style>
  @media (max-width: 1300px){
    main div#page-product-entry.wrapper > section.product-finishes *.product-finish-category > * {
        margin-left: 160px !important;
    }
  }
  @media (max-width: 1100px){
      div#page-product-entry.wrapper > section.product-presentation .swiper-ui {
        flex-direction: column !important;
        gap: 20px !important;
    }
    div#page-product-entry.wrapper > section.product-presentation .swiper-ui > menu.swiper-navigation {
        position: relative !important;
        left: auto !important;
    }
    #produtos-relacionados.products-type > * {
        margin-left: 160px !important;
    }
  }
  @media (max-width: 700px){
    main div#page-product-entry.wrapper > section.product-finishes *.product-finish-category > * {
        margin-left: 60px !important;
    }
  }
  @media only screen and (min-width: 480px) and (max-width: 860px){
    div#page-product-entry.wrapper > section.first-presentation {
        grid-template:
        "gaSlogan" auto
        "gaParagraph" auto
        "gaPicture" auto
        "gaNav" auto / 1fr !important;
        place-items: center !important;
        gap: 23px 0 !important;
    }
    div#page-product-entry.wrapper > section.first-presentation > span.product.slogan {
        width: auto !important;
        max-width: 100% !important;
        font-size: 1.75rem !important;
    }
    div#page-product-entry.wrapper > section.first-presentation > p {
        width: auto !important;
        max-width: 100% !important;
    }
    div#page-product-entry.wrapper > section.first-presentation > picture.product.main-image {
        height: auto !important;
        background-size: cover !important;
    }
    div#page-product-entry.wrapper > section.first-presentation > nav.webpage {
        flex-flow: column wrap !important;
        gap: 0 !important;
    }
    div#page-product-entry.wrapper > section.first-presentation > nav.webpage > a {
        display: flex !important;
        flex-flow: row nowrap !important;
        place-content: center !important;
        place-items: center !important;
        gap: normal !important;
        min-height: 50px !important;
    }
    div#page-product-entry.wrapper > section.first-presentation > *:not(picture) {
        padding: 0 18px !important;
    }
    div#page-product-entry.wrapper > section.product-presentation > *.swiper-wrapper *.swiper-slide:nth-child(odd) {
        grid-template:
        "gaMedia" auto
        "gaHeading" auto
        "gaParagraph" auto
        "gaCta" auto / 1fr !important;
        max-width: 90vw !important;
        gap: 20px 0 !important;
        margin-right: 45px !important;
        column-gap: 80px !important;
    }
    div#page-product-entry.wrapper > section.product-presentation > *.swiper-wrapper *.swiper-slide:nth-child(odd) > *.product.media {
        width: inherit !important;
        max-width: inherit !important;
    }
    div#page-product-entry.wrapper > section.product-presentation > *.swiper-wrapper *.swiper-slide > h3 {
        font-size: 1.75rem !important;
    }
    div#page-product-entry.wrapper > section.product-presentation > *.swiper-wrapper *.swiper-slide:nth-child(even) {
        grid-template:
        "gaMedia" auto
        "gaHeading" auto
        "gaParagraph" auto
        "gaCta" auto / 1fr !important;
        max-width: 90vw !important;
        gap: 20px 0 !important;
        margin-right: 45px !important;
        column-gap: 80px !important;
    }
    div#page-product-entry.wrapper > section.product-presentation > *.swiper-wrapper *.swiper-slide:nth-child(even) > *.product.media {
        width: inherit !important;
        max-width: inherit !important;
    }
    div#page-product-entry.wrapper > section.product-presentation > *.swiper-wrapper *.swiper-slide > *.product.media {
        pointer-events: none !important;
    }
    div#page-product-entry.wrapper > section#downloads-e-dados-do-produto {
        grid-template:
        "gaDownloads" minmax(200px, auto)
        "gaSpecs" minmax(200px, auto) / 1fr !important;
        gap: 68px !important;
        padding: 18px !important;
    }
    div#page-product-entry.wrapper > section#downloads-e-dados-do-produto > div.product > menu.tabs-control {
        flex-flow: column nowrap !important;
        place-content: flex-start !important;
        place-items: flex-start !important;
        gap: 0.5em !important;
    }
    div#page-product-entry.wrapper > section#downloads-e-dados-do-produto > div.product > div.product.specs {
        place-content: flex-start !important;
        place-items: flex-start !important;
        text-align: start !important;
    }
    div#page-product-entry.wrapper > section#notas-do-designer.product-designer-notes {
        grid-template:
        "gaHeading" auto
        "gaNotes" auto
        "gaCard" auto
        "gaBigName" auto / 1fr !important;
        gap: 20px !important;
        margin-top: 32px !important;
        padding: 18px !important;
    }
    div#page-product-entry.wrapper > section#notas-do-designer.product-designer-notes > div.product-designer-notes {
        padding-bottom: 0 !important;
    }
    div#page-product-entry.wrapper > section#notas-do-designer.product-designer-notes > div.product-designer.card {
        grid-area: gaCard !important;
        gap: 20px !important;
        margin: 0 !important;
        max-width: 90vw !important;
    }
    div#page-product-entry.wrapper > section#notas-do-designer.product-designer-notes > div.product-designer.card > picture.product-designer {
        max-width: 90vw !important;
        width: 90vw !important;
    }
    div#page-product-entry.wrapper a {
        display: flex !important;
        flex-flow: row nowrap !important;
        place-content: center !important;
        place-items: center !important;
        gap: normal !important;
        min-height: 50px !important;
    }
    #produtos-relacionados.products-type *.swiper > *.swiper-wrapper > *.product-card.swiper-slide {
      flex-direction: column !important;
    }
  }
  @media only screen and (min-width: 320px) and (max-width: 479px) {
      #produtos-relacionados.products-type > * {
          margin-left: 36px !important;
      }
      div#page-product-entry.wrapper a {
          flex-direction: column !important;
      }
  }
</style>
@endsection