/** Shopify CDN: Minification failed

Line 129:0 Unexpected "{"
Line 129:1 Expected identifier but found "%"
Line 133:0 Unexpected "{"
Line 133:1 Expected identifier but found "%"
Line 134:0 Unexpected "{"
Line 134:1 Expected identifier but found "%"
Line 136:0 Unexpected "{"
Line 136:1 Expected identifier but found "%"
Line 137:2 Unexpected "{"
Line 137:3 Expected identifier but found "%"
... and 138 more hidden warnings

**/
.accordion summary {
  display: flex;
  position: relative;
  line-height: 1;
  padding: 2rem 0;
}

.accordion .summary__title {
  display: flex;
  flex: 1;
}

.accordion .summary__title + .icon-caret {
  height: 0.6rem;
}

.product__accordion summary .accordion__title-icon {
  display: inline-block;
  position: absolute;
  left: auto;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: rgba(var(--button-color-bg), 1);
  top: 50%;
}

.product__accordion summary .accordion__title-icon::before {
  content: '';
  display: inline-block;
  width: 1rem;
  height: .2rem;
  position: absolute;
  left: auto;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(var(--button-color-text), 1);
}
.product__accordion summary .accordion__title-icon::after {
  content: '';
  display: inline-block;
  width: .2rem;
  height: 1rem;
  position: absolute;
  left: auto;
  right: 1.4rem;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(var(--button-color-text), 1);
  transition: all var(--duration-mid) ease-in-out;
}

.product__accordion details[open] summary .accordion__title-icon::after {
  height: .2rem;
}

.accordion + .accordion {
  margin-top: 0;
  border-top: none;
}

.accordion {
  margin-top: 2.5rem;
  margin-bottom: 0;
  border-bottom: 0.1rem solid rgba(var(--color-base-text), 0.08);
}

.product__accordion:last-of-type details {
  border-bottom: transparent;
}

.accordion__title {
  display: inline-block;
  max-width: calc(100% - 6rem);
  min-height: 1.6rem;
  font-weight: 500;
  margin: 0;
  word-break: break-word;
}

details[open] .accordion__title {
  color: rgb(var(--color-secondary-heading));
}

.accordion .icon-accordion {
  align-self: center;
  fill: rgb(var(--color-base-text));
  height:  2rem;
  margin-right:  1rem;
  width:  2rem;
}

.accordion details[open] > summary .icon-caret {
  transform: rotate(180deg);
}

.accordion__content {
  margin-bottom: 1.5rem;
  word-break: break-word;
  overflow-x: auto;
  padding: 0 0.6rem;
}

.accordion__content img {
  max-width: 100%;
}

.product__accordion .accordion__content {
  overflow: visible;
{% doc %}
  @prompt
    Create a collapsible accordion block for the product page that displays a color image gallery. The block reads from a product metafield with namespace custom and key jersey_and_dw_gallery, which is a metaobject reference to a metaobject definition called "Available Colors". The metaobject has an image list field called gallery. The accordion heading should say "Available Colors". Display the images in a responsive CSS grid inside the accordion, styled to match the existing collapsible row blocks on this product page — same fonts, borders, and toggle arrow behavior. Only render the block if the metafield is assigned and contains images. Use native Liquid and CSS only, no external libraries. Add minimal vanilla JS for a click-to-enlarge lightbox.
{% enddoc %}
{% assign ai_gen_id = block.id | replace: '_', '' | downcase %}
{% assign gallery_metaobject = product.metafields.custom.jersey_and_dw_gallery.value %}

{% if gallery_metaobject and gallery_metaobject.gallery.value.size > 0 %}
  {% style %}
    .ai-color-accordion-{{ ai_gen_id }} {
      width: 100%;
      border-top: 1px solid {{ settings.border_color }};
    }

    .ai-color-accordion__summary-{{ ai_gen_id }} {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 0;
      cursor: pointer;
      list-style: none;
      border-bottom: 1px solid {{ settings.border_color }};
      font-family: {{ settings.type_body_font.family }}, {{ settings.type_body_font.fallback_families }};
      font-weight: {{ settings.type_body_font.weight }};
      font-size: {{ settings.body_font_medium }}px;
      color: {{ settings.colors_text }};
      transition: color 0.2s ease;
    }

    .ai-color-accordion__summary-{{ ai_gen_id }}::-webkit-details-marker {
      display: none;
    }

    .ai-color-accordion__summary-{{ ai_gen_id }}:hover {
      color: {{ settings.colors_heading }};
    }

    .ai-color-accordion__icon-{{ ai_gen_id }} {
      width: 20px;
      height: 20px;
      transition: transform 0.3s ease;
      flex-shrink: 0;
      margin-left: 10px;
    }

    .ai-color-accordion__details-{{ ai_gen_id }}[open] .ai-color-accordion__icon-{{ ai_gen_id }} {
      transform: rotate(180deg);
    }

    .ai-color-accordion__content-{{ ai_gen_id }} {
      padding: 20px 0;
      animation: ai-color-accordion-slideDown-{{ ai_gen_id }} 0.3s ease;
    }

    @keyframes ai-color-accordion-slideDown-{{ ai_gen_id }} {
      from {
        opacity: 0;
        transform: translateY(-10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .ai-color-accordion__grid-{{ ai_gen_id }} {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax({{ block.settings.image_size }}px, 1fr));
      gap: {{ block.settings.grid_gap }}px;
    }

    .ai-color-accordion__image-wrapper-{{ ai_gen_id }} {
      position: relative;
      width: 100%;
      padding-bottom: 100%;
      overflow: hidden;
      border-radius: {{ settings.media_radius }}px;
      cursor: pointer;
      transition: transform 0.2s ease;
    }

    .ai-color-accordion__image-wrapper-{{ ai_gen_id }}:hover {
      transform: scale(1.05);
    }

    .ai-color-accordion__image-{{ ai_gen_id }} {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .ai-color-accordion__lightbox-{{ ai_gen_id }} {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.9);
      z-index: 9999;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }

    .ai-color-accordion__lightbox-{{ ai_gen_id }}.active {
      display: flex;
    }

    .ai-color-accordion__lightbox-content-{{ ai_gen_id }} {
      position: relative;
      max-width: 90%;
      max-height: 90%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .ai-color-accordion__lightbox-image-{{ ai_gen_id }} {
      max-width: 100%;
      max-height: 90vh;
      object-fit: contain;
      border-radius: {{ settings.media_radius }}px;
    }

    .ai-color-accordion__lightbox-close-{{ ai_gen_id }} {
      position: absolute;
      top: -40px;
      right: 0;
      background: none;
      border: none;
      color: #ffffff;
      font-size: 32px;
      cursor: pointer;
      padding: 10px;
      line-height: 1;
      transition: opacity 0.2s ease;
    }

    .ai-color-accordion__lightbox-close-{{ ai_gen_id }}:hover {
      opacity: 0.7;
    }

    .ai-color-accordion__lightbox-nav-{{ ai_gen_id }} {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(255, 255, 255, 0.2);
      border: none;
      color: #ffffff;
      font-size: 32px;
      cursor: pointer;
      padding: 20px 15px;
      line-height: 1;
      transition: background 0.2s ease;
      border-radius: 4px;
    }

    .ai-color-accordion__lightbox-nav-{{ ai_gen_id }}:hover {
      background: rgba(255, 255, 255, 0.3);
    }

    .ai-color-accordion__lightbox-prev-{{ ai_gen_id }} {
      left: 20px;
    }

    .ai-color-accordion__lightbox-next-{{ ai_gen_id }} {
      right: 20px;
    }

    @media screen and (max-width: 749px) {
      .ai-color-accordion__grid-{{ ai_gen_id }} {
        grid-template-columns: repeat(auto-fill, minmax({{ block.settings.mobile_image_size }}px, 1fr));
      }

      .ai-color-accordion__lightbox-nav-{{ ai_gen_id }} {
        padding: 15px 10px;
        font-size: 24px;
      }

      .ai-color-accordion__lightbox-prev-{{ ai_gen_id }} {
        left: 10px;
      }

      .ai-color-accordion__lightbox-next-{{ ai_gen_id }} {
        right: 10px;
      }
    }
  {% endstyle %}

  <color-gallery-accordion-{{ ai_gen_id }}
    class="ai-color-accordion-{{ ai_gen_id }}"
    {{ block.shopify_attributes }}
  >
    <details class="ai-color-accordion__details-{{ ai_gen_id }}">
      <summary class="ai-color-accordion__summary-{{ ai_gen_id }}">
        <span>{{ block.settings.heading }}</span>
        <svg
          class="ai-color-accordion__icon-{{ ai_gen_id }}"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <polyline points="6 9 12 15 18 9"></polyline>
        </svg>
      </summary>

      <div class="ai-color-accordion__content-{{ ai_gen_id }}">
        <div class="ai-color-accordion__grid-{{ ai_gen_id }}">
          {% for image in gallery_metaobject.gallery.value %}
            <div
              class="ai-color-accordion__image-wrapper-{{ ai_gen_id }}"
              data-image-index="{{ forloop.index0 }}"
            >
              <img
                src="{{ image | image_url: width: 400 }}"
                alt="{{ image.alt | escape }}"
                loading="lazy"
                width="400"
                height="400"
                class="ai-color-accordion__image-{{ ai_gen_id }}"
              >
            </div>
          {% endfor %}
        </div>
      </div>
    </details>

    <div class="ai-color-accordion__lightbox-{{ ai_gen_id }}">
      <div class="ai-color-accordion__lightbox-content-{{ ai_gen_id }}">
        <button
          class="ai-color-accordion__lightbox-close-{{ ai_gen_id }}"
          aria-label="Close lightbox"
        >
          ×
        </button>
        <button
          class="ai-color-accordion__lightbox-nav-{{ ai_gen_id }} ai-color-accordion__lightbox-prev-{{ ai_gen_id }}"
          aria-label="Previous image"
        >
          ‹
        </button>
        <img
          src=""
          alt=""
          class="ai-color-accordion__lightbox-image-{{ ai_gen_id }}"
        >
        <button
          class="ai-color-accordion__lightbox-nav-{{ ai_gen_id }} ai-color-accordion__lightbox-next-{{ ai_gen_id }}"
          aria-label="Next image"
        >
          ›
        </button>
      </div>
    </div>
  </color-gallery-accordion-{{ ai_gen_id }}>

  <script>
    (function() {
      class ColorGalleryAccordion{{ ai_gen_id }} extends HTMLElement {
        constructor() {
          super();
          this.images = [
            {% for image in gallery_metaobject.gallery.value %}
              {
                src: "{{ image | image_url: width: 2000 }}",
                alt: "{{ image.alt | escape }}"
              }{% unless forloop.last %},{% endunless %}
            {% endfor %}
          ];
          this.currentIndex = 0;
        }

        connectedCallback() {
          this.imageWrappers = this.querySelectorAll('.ai-color-accordion__image-wrapper-{{ ai_gen_id }}');
          this.lightbox = this.querySelector('.ai-color-accordion__lightbox-{{ ai_gen_id }}');
          this.lightboxImage = this.querySelector('.ai-color-accordion__lightbox-image-{{ ai_gen_id }}');
          this.closeBtn = this.querySelector('.ai-color-accordion__lightbox-close-{{ ai_gen_id }}');
          this.prevBtn = this.querySelector('.ai-color-accordion__lightbox-prev-{{ ai_gen_id }}');
          this.nextBtn = this.querySelector('.ai-color-accordion__lightbox-next-{{ ai_gen_id }}');

          this.setupEventListeners();
        }

        setupEventListeners() {
          this.imageWrappers.forEach((wrapper) => {
            wrapper.addEventListener('click', () => {
              this.currentIndex = parseInt(wrapper.dataset.imageIndex);
              this.openLightbox();
            });
          });

          this.closeBtn.addEventListener('click', () => this.closeLightbox());
          this.prevBtn.addEventListener('click', () => this.navigateImage(-1));
          this.nextBtn.addEventListener('click', () => this.navigateImage(1));

          this.lightbox.addEventListener('click', (e) => {
            if (e.target === this.lightbox) {
              this.closeLightbox();
            }
          });

          document.addEventListener('keydown', (e) => {
            if (!this.lightbox.classList.contains('active')) return;

            if (e.key === 'Escape') {
              this.closeLightbox();
            } else if (e.key === 'ArrowLeft') {
              this.navigateImage(-1);
            } else if (e.key === 'ArrowRight') {
              this.navigateImage(1);
            }
          });
        }

        openLightbox() {
          this.updateLightboxImage();
          this.lightbox.classList.add('active');
          document.body.style.overflow = 'hidden';
        }

        closeLightbox() {
          this.lightbox.classList.remove('active');
          document.body.style.overflow = '';
        }

        navigateImage(direction) {
          this.currentIndex = (this.currentIndex + direction + this.images.length) % this.images.length;
          this.updateLightboxImage();
        }

        updateLightboxImage() {
          const image = this.images[this.currentIndex];
          this.lightboxImage.src = image.src;
          this.lightboxImage.alt = image.alt;
        }
      }

      customElements.define('color-gallery-accordion-{{ ai_gen_id }}', ColorGalleryAccordion{{ ai_gen_id }});
    })();
  </script>
{% endif %}