/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Expected identifier but found "%"
Line 18:0 Unexpected "-"
Line 24:1 Expected identifier but found "%"
Line 26:0 Unexpected "{"
Line 26:1 Expected identifier but found "%"
Line 28:0 Unexpected "{"
Line 28:1 Expected identifier but found "%"
Line 29:9 Unexpected "{"
Line 29:14 Expected ":"
... and 207 more hidden warnings

**/
{% comment %}
Hero Slider – Accessibile
- Titoli con tipografia dedicata (Taviraj 300) per H1/H2/H3
- Padding orizzontale pannello testo configurabile L/R
- Pausa autoplay su hover/focus (selettori)
- Inversione immagine/testo per singola slide (desktop)
- Fix “slide bianca”: item width forzato (flex-basis 100%), caricamento eager prime 2 slide,
  e sovrascrittura hard di eventuali CSS globali che nascondono [aria-hidden="true"].
{% endcomment %}

{% assign uid = section.id | replace: '_', '' | downcase %}

{% style %}
  .hero-{{ uid }}{
    width:100%;
    {% if section.settings.boxed %}
      max-width: {{ section.settings.max_width }}px;
      margin: 0 auto;
      padding: 0 {{ section.settings.container_padding }}px;
    {% endif %}
    position:relative;
    --arrow-bg: {{ section.settings.arrow_bg }};
    --arrow-border: {{ section.settings.arrow_border }};
    --arrow-icon: {{ section.settings.arrow_icon }};
    --dot-color: {{ section.settings.dot_color }};
    --dot-border: {{ section.settings.dot_border }};
    --content-pad-l: {{ section.settings.content_pad_left }}px;
    --content-pad-r: {{ section.settings.content_pad_right }}px;
  }

  .hero-track-{{ uid }}{
    display:flex;
    width:100%;
    overflow:hidden;
    position:relative;
    will-change: transform;
  }

  /* Ogni slide occupa sempre il 100% della larghezza del track */
  .hero-track-{{ uid }} .slide{
    flex: 0 0 100%;
    width: 100%;
    display:grid;
    grid-template-columns:1fr 1fr; /* img | content */
    align-items:stretch;
    background: transparent;
  }

  /* Alcuni temi nascondono [aria-hidden="true"]. Qui evitiamo che spariscano. */
  .hero-{{ uid }} .slide[aria-hidden="true"]{ display: grid !important; visibility: hidden; }
  .hero-{{ uid }} .slide[aria-hidden="false"]{ visibility: visible; }

  /* Colonna immagine */
  .hero-{{ uid }} .slide .col-image{ position:relative; overflow:hidden; }
  .hero-{{ uid }} .slide .col-image img{
    width:100%; height:100%; object-fit:cover; display:block;
  }

  /* Colonna contenuto */
  .hero-{{ uid }} .slide .col-content{
    display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
    /* top/bottom responsivi, left/right da impostazioni */
    padding: clamp(16px, 4vw, 48px) var(--content-pad-r) clamp(16px, 4vw, 48px) var(--content-pad-l);
    background: var(--panel-bg, #f4eef7);
    color: var(--panel-color, #0b56a2);
  }

  /* Tipografia dedicata slider per H1/H2/H3 */
  .hero-{{ uid }} .slide .col-content h1,
  .hero-{{ uid }} .slide .col-content h2,
  .hero-{{ uid }} .slide .col-content h3{
    margin:0 0 12px 0;
    font-family: 'Taviraj', serif;
    font-style: normal;
    font-weight: 300;
  }
  .hero-{{ uid }} .slide .col-content h1{ font-size:48px; line-height:54px; }
  .hero-{{ uid }} .slide .col-content h2{ font-size:40px; line-height:48px; }
  .hero-{{ uid }} .slide .col-content h3{ font-size:32px; line-height:40px; }

  .hero-{{ uid }} .slide .col-content .desc{ margin:0 0 20px 0; }

  .hero-{{ uid }} .btn{
    display:inline-block; width:auto;
    border-radius:999px; padding:12px 24px; text-decoration:none; font-weight:600;
    background: var(--btn-bg, #0b56a2); color: var(--btn-color, #ffffff);
    border:2px solid var(--btn-border, transparent);
  }

  /* Inversione layout (desktop) */
  .hero-{{ uid }} .slide.invert .col-image{ grid-column: 2; }
  .hero-{{ uid }} .slide.invert .col-content{ grid-column: 1; }

  /* Controls */
  .hero-{{ uid }} .nav{ position:absolute; inset:auto 12px 12px auto; display:flex; align-items:center; gap:8px; z-index:2; }
  .hero-{{ uid }} .dots{ display:flex; gap:8px; }
  .hero-{{ uid }} .dot{
    width:10px; height:10px; border-radius:50%;
    background:transparent; border:2px solid var(--dot-border);
  }
  .hero-{{ uid }} .dot[aria-current="true"]{ background: var(--dot-color); }

  .hero-{{ uid }} .arrows{
    position:absolute; top:50%; left:16px; right:16px; transform:translateY(-50%);
    display:flex; justify-content:space-between; align-items:center; pointer-events:none;
  }
  .hero-{{ uid }} .arrow{
    pointer-events:auto; width:16px; height:16px; border-radius:50%;
    display:grid; place-items:center;
    background: var(--arrow-bg); border:1px solid var(--arrow-border); color: var(--arrow-icon);
  }

  @media (max-width:767px){
    .hero-track-{{ uid }} .slide{ grid-template-columns:1fr; }
    .hero-{{ uid }} .arrows{ left:8px; right:8px; top:50%; transform:translateY(-50%); } /* centrate verticalmente */
    .hero-{{ uid }} .nav{ inset:auto 12px 12px auto; }
  }

  .visually-hidden{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

  .shopify-app-block.ranking-app
  .ranking-item
  .ranking-item__price--original-price {
  font-size: 14px;
  line-height: 21px;
  opacity: 1 !important;
}
/* Fallback se inert non è supportato: blocca mouse sugli elementi “inerti” */
.splide__slide[data-inert-fallback="true"] {
  pointer-events: none;
}

{% endstyle %}

<section
  class="hero-{{ uid }}"
  role="region"
  aria-roledescription="carousel"
  aria-label="{{ section.settings.a11y_label | default: 'Hero slider' }}"
  data-autoplay="{{ section.settings.autoplay }}"
  data-interval="{{ section.settings.autoplay_interval | times: 1000 }}"
  data-loop="{{ section.settings.loop }}"
  data-pause-hover="{{ section.settings.pause_on_hover }}"
  data-pause-focus="{{ section.settings.pause_on_focus }}"
  data-uid="{{ uid }}"
>
  <div class="hero-track-{{ uid }}" id="track-{{ uid }}">
    {% assign total = section.blocks | size %}
    {% for block in section.blocks %}
      {% if block.type == 'slide' %}
        {% assign i = forloop.index %}
        {% assign title_tag = block.settings.title_tag | default: 'h2' %}
        {% assign desktop = block.settings.image_desktop %}
        {% assign mobile = block.settings.image_mobile | default: desktop %}
        {% assign alt = block.settings.image_alt | default: block.settings.title %}
        <article
          class="slide{% if block.settings.invert_layout %} invert{% endif %}"
          role="group"
          aria-roledescription="slide"
          aria-label="Slide {{ i }} di {{ total }}"
          aria-hidden="{% if forloop.index0 == 0 %}false{% else %}true{% endif %}"
          data-index="{{ forloop.index0 }}"
          {{ block.shopify_attributes }}
          style="
            --panel-bg: {{ block.settings.panel_bg }};
            --panel-color: {{ block.settings.panel_color }};
            --btn-bg: {{ block.settings.btn_bg }};
            --btn-color: {{ block.settings.btn_color }};
            --btn-border: {{ block.settings.btn_border }};
          "
        >
          <div class="col-image">
            <picture>
              {% if mobile != blank %}
                <source media="(max-width: 767px)" srcset="{{ mobile | image_url: width: 1200 }}">
              {% endif %}
              {% if desktop != blank %}
                <img
                  src="{{ desktop | image_url: width: 2000 }}"
                  alt="{{ alt | escape }}"
                  loading="{% if forloop.index0 <= 1 %}eager{% else %}lazy{% endif %}"
                  decoding="async">
              {% elsif mobile != blank %}
                <img
                  src="{{ mobile | image_url: width: 2000 }}"
                  alt="{{ alt | escape }}"
                  loading="{% if forloop.index0 <= 1 %}eager{% else %}lazy{% endif %}"
                  decoding="async">
              {% else %}
                <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==" alt="">
              {% endif %}
            </picture>
          </div>

          <div class="col-content">
            {% capture heading %}
              <{{ title_tag }} class="title">{{ block.settings.title | escape }}</{{ title_tag }}>
            {% endcapture %}
            {{ heading }}
            {% if block.settings.text != blank %}
              <div class="desc">{{ block.settings.text }}</div>
            {% endif %}
            {% if block.settings.btn_label != blank and block.settings.btn_link != blank %}
              <a class="btn" href="{{ block.settings.btn_link }}" {% if block.settings.btn_new_tab %}target="_blank" rel="noopener noreferrer"{% endif %}>{{ block.settings.btn_label }}</a>
            {% endif %}
          </div>
        </article>
      {% endif %}
    {% endfor %}
  </div>

  {% if section.settings.show_arrows and total > 1 %}
    <div class="arrows" aria-hidden="false">
      <button class="arrow prev" type="button" aria-label="{{ section.settings.prev_label | default: 'Slide precedente' }}">‹</button>
      <button class="arrow next" type="button" aria-label="{{ section.settings.next_label | default: 'Slide successiva' }}">›</button>
    </div>
  {% endif %}

  <div class="nav">
    {% if section.settings.show_dots and total > 1 %}
      <div class="dots" role="tablist" aria-label="{{ section.settings.dots_label | default: 'Seleziona slide' }}">
        {% for block in section.blocks %}
          {% if block.type == 'slide' %}
            <button class="dot" role="tab" aria-controls="track-{{ uid }}" aria-label="Vai alla slide {{ forloop.index }}" aria-current="{% if forloop.index0 == 0 %}true{% else %}false{% endif %}" data-go="{{ forloop.index0 }}"></button>
          {% endif %}
        {% endfor %}
      </div>
    {% endif %}
    {% if section.settings.autoplay and total > 1 %}
      <button class="pause" type="button" aria-pressed="false" aria-label="{{ section.settings.pause_label | default: 'Pausa riproduzione automatica' }}">⏸</button>
    {% endif %}
  </div>

  <div class="visually-hidden" aria-live="polite" aria-atomic="true" id="live-{{ uid }}"></div>
</section>

<script>
(function(){
  const root = document.currentScript.closest('.hero-{{ uid }}') || document.querySelector('.hero-{{ uid }}');
  if(!root) return;

  const track = root.querySelector('#track-{{ uid }}');
  let slides = Array.from(track.querySelectorAll('.slide'));
  let total = slides.length;
  let index = 0;

  const btnPrev = root.querySelector('.arrow.prev');
  const btnNext = root.querySelector('.arrow.next');
  let dots = Array.from(root.querySelectorAll('.dot'));
  const live = root.querySelector('#live-{{ uid }}');

  const autoplay = root.dataset.autoplay === 'true';
  const loop = root.dataset.loop === 'true';
  const interval = parseInt(root.dataset.interval || '6000', 10);
  const pauseHover = root.dataset.pauseHover === 'true';
  const pauseFocus = root.dataset.pauseFocus === 'true';
  let timer = null;
  let paused = false;

  function setTransform(){
    track.style.transform = 'translateX(' + (index * -100) + '%)';
    track.style.transition = 'transform .45s ease';
  }

  function updateA11y(){
    slides.forEach((s,i)=>{
      const active = i === index;
      s.setAttribute('aria-hidden', active ? 'false' : 'true');
      s.querySelectorAll('a, button, input, select, textarea').forEach(el=>{
        if(!active){ el.setAttribute('tabindex','-1'); el.setAttribute('aria-hidden','true'); }
        else { el.removeAttribute('tabindex'); el.removeAttribute('aria-hidden'); }
      });
    });
    dots.forEach((d,i)=>d.setAttribute('aria-current', i===index ? 'true' : 'false'));
    if(live && autoplay && !paused){ live.textContent = 'Slide ' + (index+1) + ' di ' + total; }
  }

  function goTo(i){
    if(total < 1) return;
    if(i < 0) i = loop ? total-1 : 0;
    if(i >= total) i = loop ? 0 : total-1;
    index = i;
    setTransform();
    updateA11y();
  }
  function next(){ goTo(index+1); }
  function prev(){ goTo(index-1); }

  function onDotClick(e){
    const i = parseInt(e.currentTarget.dataset.go,10);
    if(Number.isInteger(i)) goTo(i);
  }

  function start(){ if(!autoplay || paused || total<2) return; stop(); timer = setInterval(next, interval); }
  function stop(){ if(timer){ clearInterval(timer); timer = null; } }
  root._start = start; root._stop = stop; // per cleanup editor

  function bindControls(){
    if(btnPrev) btnPrev.addEventListener('click', prev);
    if(btnNext) btnNext.addEventListener('click', next);
    dots.forEach(d=>d.addEventListener('click', onDotClick));

    root.addEventListener('keydown', (e)=>{
      if(e.key === 'ArrowRight'){ e.preventDefault(); next(); }
      if(e.key === 'ArrowLeft'){ e.preventDefault(); prev(); }
    });

    if(autoplay){
      start();
      if(pauseHover){
        root.addEventListener('mouseenter', ()=>{ paused=true; stop(); });
        root.addEventListener('mouseleave', ()=>{ paused=false; start(); });
      }
      if(pauseFocus){
        root.addEventListener('focusin', ()=>{ paused=true; stop(); });
        root.addEventListener('focusout', ()=>{ paused=false; start(); });
      }
    }

    const pauseBtn = root.querySelector('.pause');
    if(pauseBtn){
      pauseBtn.addEventListener('click', ()=>{
        paused = !paused; pauseBtn.setAttribute('aria-pressed', paused ? 'true' : 'false');
        if(paused) stop(); else start();
      });
    }
  }

  function init(){
    slides = Array.from(track.querySelectorAll('.slide'));
    total = slides.length;
    dots = Array.from(root.querySelectorAll('.dot'));
    index = 0;
    setTransform(); updateA11y(); bindControls();
  }

  // Theme Editor helpers
  document.addEventListener('shopify:block:select', (event)=>{
    const el = event.target;
    if(!root.contains(el)) return;
    const slide = el.closest('.slide');
    if(slide && root.contains(slide)){
      const i = parseInt(slide.getAttribute('data-index'),10);
      if(Number.isInteger(i)) goTo(i);
    }
  });
  document.addEventListener('shopify:section:load', (e)=>{
    const container = e.target;
    if(container && container.querySelector && container.querySelector('.hero-{{ uid }}')){
      if(root._stop) root._stop();
      init();
    }
  });
  document.addEventListener('shopify:section:unload', (e)=>{
    if(e.target && e.target.contains(root)){ if(root._stop) root._stop(); }
  });

  // Swipe touch
  let startX=null;
  track.addEventListener('touchstart', (e)=>{ startX = e.touches[0].clientX; }, {passive:true});
  track.addEventListener('touchend', (e)=>{
    if(startX==null) return;
    const dx = e.changedTouches[0].clientX - startX;
    if(Math.abs(dx) > 40){ if(dx<0) next(); else prev(); }
    startX=null;
  });

  init();
})();
</script>

{% schema %}
{
  "name": "Hero Slider – Accessibile",
  "settings": [
    { "type":"checkbox", "id":"boxed", "label":"Boxed (max-width e padding)", "default": false },
    { "type":"range", "id":"max_width", "min": 1000, "max": 1600, "step": 20, "unit":"px", "label":"Max width (se boxed)", "default": 1400 },
    { "type":"range", "id":"container_padding", "min": 0, "max": 40, "step": 2, "unit":"px", "label":"Padding orizzontale (se boxed)", "default": 0 },

    { "type":"header", "content":"Layout e spazi" },
    { "type":"range", "id":"content_pad_left", "min": 0, "max": 80, "step": 2, "unit":"px", "label":"Padding sinistro pannello testo", "default": 48 },
    { "type":"range", "id":"content_pad_right", "min": 0, "max": 80, "step": 2, "unit":"px", "label":"Padding destro pannello testo", "default": 48 },

    { "type":"header", "content":"Comandi e Accessibilità" },
    { "type":"text", "id":"a11y_label", "label":"Etichetta ARIA del carosello", "default":"Hero slider" },
    { "type":"checkbox", "id":"show_arrows", "label":"Mostra frecce", "default": true },
    { "type":"checkbox", "id":"show_dots", "label":"Mostra indicatori (dots)", "default": true },
    { "type":"checkbox", "id":"autoplay", "label":"Autoplay", "default": false },
    { "type":"range", "id":"autoplay_interval", "min": 3, "max": 12, "step": 1, "unit":"s", "label":"Intervallo autoplay", "default": 6 },
    { "type":"checkbox", "id":"loop", "label":"Loop slides", "default": true },
    { "type":"checkbox", "id":"pause_on_hover", "label":"Pausa su hover", "default": true },
    { "type":"checkbox", "id":"pause_on_focus", "label":"Pausa su focus", "default": true },
    { "type":"text", "id":"prev_label", "label":"Aria label freccia precedente", "default":"Slide precedente" },
    { "type":"text", "id":"next_label", "label":"Aria label freccia successiva", "default":"Slide successiva" },
    { "type":"text", "id":"dots_label", "label":"Aria label dots", "default":"Seleziona slide" },
    { "type":"text", "id":"pause_label", "label":"Aria label pausa", "default":"Pausa riproduzione automatica" },

    { "type":"header", "content":"Colori frecce e dots" },
    { "type":"color", "id":"arrow_bg", "label":"Frecce – Sfondo", "default":"#ffffff" },
    { "type":"color", "id":"arrow_border", "label":"Frecce – Bordo", "default":"#d9d9d9" },
    { "type":"color", "id":"arrow_icon", "label":"Frecce – Icona", "default":"#222222" },
    { "type":"color", "id":"dot_color", "label":"Dots – Riempimento (attivo)", "default":"#0b56a2" },
    { "type":"color", "id":"dot_border", "label":"Dots – Bordo", "default":"#0b56a2" }
  ],
  "blocks": [
    {
      "type": "slide",
      "name": "Slide",
      "limit": 12,
      "settings": [
        { "type": "image_picker", "id": "image_desktop", "label": "Immagine Desktop" },
        { "type": "image_picker", "id": "image_mobile", "label": "Immagine Mobile (opzionale)" },
        { "type": "text", "id": "image_alt", "label": "Alt immagine", "info": "Se vuoto usa il titolo" },

        { "type": "text", "id": "title", "label": "Titolo" },
        { "type": "select", "id": "title_tag", "label": "Tag titolo", "default": "h2", "options": [
          { "value":"h1", "label":"H1" },
          { "value":"h2", "label":"H2" },
          { "value":"h3", "label":"H3" }
        ]},
        { "type": "richtext", "id": "text", "label": "Testo descrittivo (rich text)" },

        { "type": "text", "id": "btn_label", "label": "Etichetta bottone (opzionale)" },
        { "type": "url", "id": "btn_link", "label": "Link bottone (opzionale)" },
        { "type": "checkbox", "id": "btn_new_tab", "label": "Apri in nuova scheda", "default": false },

        { "type": "checkbox", "id": "invert_layout", "label": "Immagine a destra (inverti layout su desktop)", "default": false },

        { "type": "header", "content": "Stili pannello testo" },
        { "type": "color", "id": "panel_bg", "label": "Background pannello", "default": "#f4eef7" },
        { "type": "color", "id": "panel_color", "label": "Colore testo", "default": "#0b56a2" },
        { "type": "color", "id": "btn_bg", "label": "Bottone background", "default": "#0b56a2" },
        { "type": "color", "id": "btn_color", "label": "Bottone testo", "default": "#ffffff" },
        { "type": "color", "id": "btn_border", "label": "Bottone bordo", "default": "transparent" }
      ]
    }
  ],
  "presets": [
    { "name": "Hero Slider – Accessibile", "blocks": [ { "type": "slide" }, { "type": "slide" }, { "type": "slide" } ] }
  ]
}
{% endschema %}