[data-modulotemplate="1008"] *{
  box-sizing: border-box;
}

/* ===============================
   THEME TOKENS (CMS STYLE)
   =============================== */
    [data-modulotemplate="1008"]{
      /* Superfici */
      --cms-surface: #ffffff;
      --cms-surface-2: #f6f8fb;
      --cms-overlay: rgba(61, 0, 36, 0.92);

      /* Colori */
      --cms-border: rgba(15,23,42,0.12);
      --cms-border-strong: rgba(15,23,42,0.22);
      --cms-accent: #3b82f6;
      --cms-accent-soft: rgba(59,130,246,0.28);

      /* Testi */
      --cms-text-dark: #0f172a;
      --cms-text-light: rgba(255,255,255,0.92);

      /* Controlli */
      --cms-control-bg: rgba(255,255,255,0.10);
      --cms-control-bg-hover: rgba(255,255,255,0.18);
      --cms-control-border: rgba(255,255,255,0.18);

      /* Ombre */
      --cms-shadow-soft: 0 8px 22px rgba(15,23,42,0.08);
      --cms-shadow-strong: 0 14px 40px rgba(0,0,0,0.45);

      /* Motion */
      --cms-ease: cubic-bezier(.2,.8,.2,1);
    }

    /* ===============================
      THUMB GALLERY
      =============================== */
    
    [data-modulotemplate="1008"] > div{
      background-color: var(--cms-surface);
    }

    [data-modulotemplate="1008"] .thumbnail-gallery{
      width:100%;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin: 0 auto;
      padding: 0;
    }

    [data-modulotemplate="1008"] .thumbnail-gallery.is-fullwidth{
      padding-left: 20px;
      padding-right: 20px;
    }


    [data-modulotemplate="1008"] .thumbnail-item{
      position: relative;
      width: 100%;
      aspect-ratio: 1 / 1;
      background-color: var(--cms-surface-2);
      border: 1px solid var(--cms-border);
      border-radius: 12px;
      overflow: hidden;
      cursor: pointer;
      box-shadow: var(--cms-shadow-soft);
      transition:
        transform 180ms var(--cms-ease),
        box-shadow 180ms var(--cms-ease),
        border-color 180ms var(--cms-ease);
    }

    /* fallback quadrato */
    [data-modulotemplate="1008"] .thumbnail-item::before{
      content:"";
      display:block;
      padding-top:100%;
    }

    /* ring CMS */
    [data-modulotemplate="1008"] .thumbnail-item::after{
      content:"";
      position:absolute;
      inset:0;
      border-radius:12px;
      box-shadow:0 0 0 0 var(--cms-accent-soft);
      opacity:0;
      transition: box-shadow 180ms var(--cms-ease), opacity 180ms var(--cms-ease);
      pointer-events:none;
    }

    [data-modulotemplate="1008"] .thumbnail-item:hover{
      transform: translateY(-2px);
      border-color: var(--cms-border-strong);
      box-shadow: 0 14px 34px rgba(15,23,42,0.14);
    }

    [data-modulotemplate="1008"] .thumbnail-item:hover::after{
      opacity:1;
      box-shadow:0 0 0 3px var(--cms-accent-soft);
    }

    [data-modulotemplate="1008"] .thumbnail-item img{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:cover;
      transition: transform 220ms var(--cms-ease);
    }

    [data-modulotemplate="1008"] .thumbnail-item:hover img{
      transform: scale(1.05);
    }

    /* ===============================
      LIGHTBOX OVERLAY
      =============================== */
    [data-modulotemplate="1008"] .lightbox-overlay{
      position: fixed;
      inset: 0;
      background-color: var(--cms-overlay);
      backdrop-filter: blur(6px);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 100000000;
    }

    [data-modulotemplate="1008"] .lightbox-overlay.is-open{
      display:flex;
      animation: overlayFadeIn 160ms ease-out;
    }

    @keyframes overlayFadeIn{
      from{opacity:0}
      to{opacity:1}
    }

    [data-modulotemplate="1008"] .lightbox-stage{
      position: relative;
      width: min(1100px, 92vw);
      height: min(650px, 78vh);
      display:flex;
      align-items:center;
      justify-content:center;
      padding:10px;
    }

    /* ===============================
      IMAGE
      =============================== */
    [data-modulotemplate="1008"] .lightbox-image{
      max-width:100%;
      max-height:100%;
      border-radius:14px;
      border:1px solid rgba(255,255,255,0.08);
      box-shadow: var(--cms-shadow-strong);
      opacity:1;
      transition: opacity 360ms ease, transform 200ms ease;
    }

    [data-modulotemplate="1008"] .lightbox-image.is-loading{
      filter: blur(0.4px);
    }

    [data-modulotemplate="1008"] .lightbox-image.is-fading-out{
      opacity:0;
    }

    /* ===============================
      LOADING
      =============================== */
      /*
    [data-modulotemplate="1008"] .lightbox-loading{
      position:absolute;
      inset:0;
      display:none;
      align-items:center;
      justify-content:center;
      pointer-events:none;
      z-index:2;
    }

    [data-modulotemplate="1008"] .lightbox-loading.is-visible{
      display:flex;
    }

    [data-modulotemplate="1008"] .lightbox-spinner{
      width:44px;
      height:44px;
      border:3px solid rgba(255,255,255,0.18);
      border-top:3px solid var(--cms-accent);
      border-radius:50%;
      animation: spin 0.9s linear infinite;
    }

    @keyframes spin{
      from{transform:rotate(0deg)}
      to{transform:rotate(360deg)}
    }
    */

    /* ===============================
      LOADING
    =============================== */
    [data-modulotemplate="1008"] .lightbox-loading{
      position:absolute;
      inset:0;
      display:none;
      align-items:center;
      justify-content:center;
      pointer-events:none;
      z-index:3;              /* sopra l'immagine */
      opacity:0;
      transition: opacity 160ms var(--cms-ease);
    }

    /* visibile */
    [data-modulotemplate="1008"] .lightbox-loading.is-visible{
      display:flex;
      opacity:1;
    }

    /* (opzionale) velo leggero per staccare lo spinner dallo sfondo */
    [data-modulotemplate="1008"] .lightbox-loading.is-visible::before{
      content:"";
      position:absolute;
      inset:0;
      background: rgba(0,0,0,0.08);
      border-radius:14px;     /* coerente con l'immagine */
    }

    /* spinner */
    [data-modulotemplate="1008"] .lightbox-spinner{
      width:44px;
      height:44px;
      border:3px solid rgba(255,255,255,0.18);
      border-top:3px solid var(--cms-accent);
      border-radius:50%;
      animation: spin 0.9s linear infinite;
      position:relative;      /* sopra il ::before */
      z-index:1;
    }

    @keyframes spin{
      from{transform:rotate(0deg)}
      to{transform:rotate(360deg)}
    }

    /* ===============================
      CONTROLLI
      =============================== */
    [data-modulotemplate="1008"] .lightbox-close,
    [data-modulotemplate="1008"] .lightbox-arrow{
      position: fixed;
      background-color: var(--cms-control-bg);
      backdrop-filter: blur(4px);
      color: var(--cms-text-light);
      border:1px solid var(--cms-control-border);
      cursor:pointer;
      user-select:none;
      box-shadow: 0 10px 26px rgba(0,0,0,0.25);
      transition:
        background-color 160ms var(--cms-ease),
        transform 160ms var(--cms-ease),
        border-color 160ms var(--cms-ease);
      z-index:10001;
    }

    [data-modulotemplate="1008"] .lightbox-close{
      top: calc(20px + env(safe-area-inset-top));
      right: calc(20px + env(safe-area-inset-right));
      width:42px;
      height:42px;
      font-size:28px;
      display:flex;
      align-items:center;
      justify-content:center;
      border-radius:50%;
    }

    [data-modulotemplate="1008"] .lightbox-prev{
      top:50%;
      left: calc(20px + env(safe-area-inset-left));
      transform: translateY(-50%);
      width:54px;
      height:54px;
      font-size: 14px;
      display:flex;
      align-items:center;
      justify-content:center;
      border-radius:12px;
    }

    [data-modulotemplate="1008"] .lightbox-next{
      top:50%;
      right: calc(20px + env(safe-area-inset-right));
      transform: translateY(-50%);
      width:54px;
      height:54px;
      font-size: 14px;
      display:flex;
      align-items:center;
      justify-content:center;
      border-radius:12px;
    }

    [data-modulotemplate="1008"] .lightbox-close:hover{
      background-color: var(--cms-control-bg-hover);
      transform: translateY(-1px);
    }

    [data-modulotemplate="1008"] .lightbox-arrow:hover{
      background-color: var(--cms-control-bg-hover);
      /*transform: translateY(-1px);*/
    }

    [data-modulotemplate="1008"] .lightbox-icon{
      width:18px;
      height:18px;
      display:block;
    }

    /* reset button */
    [data-modulotemplate="1008"] .lightbox-arrow{
      appearance:none;
      -webkit-appearance:none;
      padding:0;
    }

    /* fix hover: mantieni il centraggio verticale */
    [data-modulotemplate="1008"] .lightbox-prev:hover{
      transform: translateY(-50%) translateY(-1px);
    }
    [data-modulotemplate="1008"] .lightbox-next:hover{
      transform: translateY(-50%) translateY(-1px);
    }


    /* ===============================
      RESPONSIVE
      =============================== */
    @media (max-width:860px){
      [data-modulotemplate="1008"] .thumbnail-gallery{
        grid-template-columns: repeat(2,1fr);
        padding:0 20px;
      }
    }

    @media (max-width:520px){
      [data-modulotemplate="1008"] .thumbnail-gallery{
        grid-template-columns:1fr;
        padding:0 20px;
      }
    }

    @media (max-width:480px) and (orientation: portrait){
      [data-modulotemplate="1008"] .lightbox-prev{
        left: calc(10px + env(safe-area-inset-left));
      }
      [data-modulotemplate="1008"] .lightbox-next{
        right: calc(10px + env(safe-area-inset-right));
      }
    }