/** Shopify CDN: Minification failed

Line 149:9 Expected identifier but found "addEventListener("
Line 340:46 Unterminated string token
Line 380:1 Expected "}" to go with "{"

**/
.card-selector-shell {
  padding-top: 24px;
  padding-bottom: 24px;
}

.card-selector-shell__inner {
  max-width: 980px;
  margin: 0 auto;
}

.card-selector-header h1 {
  margin-bottom: 12px;
}

.card-selector-intro {
  margin-bottom: 20px;
  line-height: 1.6;
}

.card-selector-placeholder {
  background: #fff;
  border: 1px solid rgba(18,18,18,.08);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 14px rgba(0,0,0,.04);
}

.cs-debug p {
  margin: 0 0 8px;
}
.cs-search {
  margin-bottom: 20px;
}

.cs-search__input {
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(18,18,18,.12);
  border-radius: 10px;
  padding: 12px 14px;
  font: inherit;
  background: #fff;
}

.cs-search-results {
  margin-bottom: 20px;
}

.cs-results-title {
  font-weight: 600;
  margin-bottom: 12px;
}

.cs-accordion-list {
  display: grid;
  gap: 14px;
}

.cs-accordion {
  background: #fff;
  border: 1px solid rgba(18,18,18,.08);
  border-radius: 12px;
  overflow: hidden;
}

.cs-accordion__summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  list-style: none;
  padding: 16px 18px;
  font-weight: 600;
}

.cs-accordion__summary::-webkit-details-marker {
  display: none;
}

.cs-accordion__count {
  font-size: 1.3rem;
  opacity: .7;
}

.cs-accordion__content {
  padding: 0 18px 18px;
}

.cs-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

@media screen and (min-width: 750px) {
  .cs-card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.cs-card {
  background: #fff;
  border: 1px solid rgba(18,18,18,.08);
  border-radius: 12px;
  overflow: hidden;
}

.cs-card__media {
  aspect-ratio: 1 / 1;
  background: #f7f7f7;
}

.cs-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cs-card__media-placeholder {
  width: 100%;
  height: 100%;
  background: #f1f1f1;
}

.cs-card__body {
  padding: 12px;
}

.cs-card__title {
  margin: 0;
  font-size: 1.4rem;
  line-height: 1.4;
}

.cs-empty {
  background: #fff;
  border: 1px solid rgba(18,18,18,.08);
  border-radius: 12px;
  padding: 16px;
}
document.addEventListener('DOMContentLoaded', () => {
  const root = document.getElementById('card-selector-root');
  if (!root) return;

  const categoriesNode = document.getElementById('card-selector-categories');
  const cardsNode = document.getElementById('card-selector-cards');

  const categories = categoriesNode ? JSON.parse(categoriesNode.textContent) : [];
  const cards = cardsNode ? JSON.parse(cardsNode.textContent) : [];

  const state = {
    configHandle: root.dataset.selectorConfigHandle || '',
    pageUrl: root.dataset.selectorPageUrl || '',
    supportProductId: root.dataset.supportProductId || '',
    packProductId: root.dataset.packProductId || '',
    createProductId: root.dataset.createProductId || '',
    packSize: Number(root.dataset.packSize || 5),
    categories,
    cards,
    quantities: {}
  };

  const placeholder = root.querySelector('.card-selector-placeholder');
  if (!placeholder) return;

  render();

  function render() {
    placeholder.innerHTML = `
      <div class="cs-search">
        <input type="search" id="cs-search-input" class="cs-search__input" placeholder="Rechercher une carte">
      </div>

      <div id="cs-selection-summary" class="cs-selection-summary"></div>

      <div id="cs-search-results" class="cs-search-results" hidden></div>

      <div class="cs-accordion-list">
        ${state.categories.map((category) => {
          const categoryCards = getCardsByCategory(category.slug);
          return `
            <details class="cs-accordion" data-category="${escapeHtml(category.slug)}">
              <summary class="cs-accordion__summary">
                <span>${escapeHtml(category.name)}</span>
                <span class="cs-accordion__count">${categoryCards.length}</span>
              </summary>
              <div class="cs-accordion__content">
                <div class="cs-card-grid">
                  ${categoryCards.map(card => renderCard(card)).join('')}
                </div>
              </div>
            </details>
          `;
        }).join('')}
      </div>
    `;

    bindSearch();
    bindQuantityButtons();
    updateSummary();
  }

  function renderSearchResults(matches) {
    const searchResults = document.getElementById('cs-search-results');
    const accordionList = placeholder.querySelector('.cs-accordion-list');

    if (!matches.length) {
      accordionList.hidden = true;
      searchResults.hidden = false;
      searchResults.innerHTML = `<div class="cs-empty">Aucune carte trouvée.</div>`;
      bindQuantityButtons();
      return;
    }

    accordionList.hidden = true;
    searchResults.hidden = false;
    searchResults.innerHTML = `
      <div class="cs-results-title">Résultats</div>
      <div class="cs-card-grid">
        ${matches.map(card => renderCard(card)).join('')}
      </div>
    `;
    bindQuantityButtons();
  }

  function renderCard(card) {
    const qty = Number(state.quantities[card.code] || 0);

    return `
      <article class="cs-card" data-card-code="${escapeHtml(card.code)}">
        <div class="cs-card__media">
          ${card.image ? `<img src="${escapeHtml(card.image)}" alt="${escapeHtml(card.name)}" loading="lazy">` : `<div class="cs-card__media-placeholder"></div>`}
        </div>
        <div class="cs-card__body">
          <h3 class="cs-card__title">${escapeHtml(card.name)}</h3>
          <div class="cs-qty">
            <button type="button" class="cs-qty__btn" data-action="decrease" data-card-code="${escapeHtml(card.code)}">-</button>
            <span class="cs-qty__value" data-card-code="${escapeHtml(card.code)}">${qty}</span>
            <button type="button" class="cs-qty__btn" data-action="increase" data-card-code="${escapeHtml(card.code)}">+</button>
          </div>
        </div>
      </article>
    `;
  }

  function bindSearch() {
    const searchInput = document.getElementById('cs-search-input');
    const searchResults = document.getElementById('cs-search-results');
    const accordionList = placeholder.querySelector('.cs-accordion-list');

    if (!searchInput) return;

    searchInput.addEventListener('input', () => {
      const term = searchInput.value.trim().toLowerCase();

      if (!term) {
        searchResults.hidden = true;
        searchResults.innerHTML = '';
        accordionList.hidden = false;
        bindQuantityButtons();
        return;
      }

      const matches = state.cards.filter(card =>
        (card.name || '').toLowerCase().includes(term)
      );

      renderSearchResults(matches);
    });
  }

  function bindQuantityButtons() {
    placeholder.querySelectorAll('.cs-qty__btn').forEach(button => {
      button.addEventListener('click', () => {
        const code = button.dataset.cardCode;
        const action = button.dataset.action;
        const current = Number(state.quantities[code] || 0);

        if (action === 'increase') {
          state.quantities[code] = current + 1;
        }

        if (action === 'decrease') {
          state.quantities[code] = Math.max(0, current - 1);
        }

        syncQuantities(code);
        updateSummary();
      });
    });
  }

  function syncQuantities(code) {
    const qty = Number(state.quantities[code] || 0);
    placeholder.querySelectorAll(`.cs-qty__value[data-card-code="${cssEscape(code)}"]`).forEach(node => {
      node.textContent = qty;
    });
  }

  function updateSummary() {
    const summary = document.getElementById('cs-selection-summary');
    if (!summary) return;

    const totalCards = Object.values(state.quantities).reduce((sum, qty) => sum + Number(qty || 0), 0);
    const packCount = totalCards > 0 ? Math.ceil(totalCards / state.packSize) : 0;

    summary.innerHTML = `
      <div class="cs-summary-box">
        <div class="cs-summary-box__line"><strong>Cartes sélectionnées :</strong> ${totalCards}</div>
        <div class="cs-summary-box__line"><strong>Packs nécessaires :</strong> ${packCount}</div>
      </div>
    `;
  }

  function getCardsByCategory(slug) {
    return state.cards.filter(card => Array.isArray(card.categories) && card.categories.includes(slug));
  }

  function escapeHtml(value) {
    return String(value || '')
      .replaceAll('&', '&amp;')
      .replaceAll('<', '&lt;')
      .replaceAll('>', '&gt;')
      .replaceAll('"', '&quot;')
      .replaceAll("'", '&#039;');
  }

  function cssEscape(value) {
    if (window.CSS && typeof window.CSS.escape === 'function') {
      return window.CSS.escape(value);
    }
    return String(value).replace(/"/g, '\\"');
  }
});
.cs-card {
  background: #fff;
  border: 1px solid rgba(18,18,18,.08);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.cs-card.is-selected {
  border-color: #d96c3e;
  box-shadow: 0 0 0 2px rgba(217,108,62,.12);
}

.cs-card__select {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.cs-card__select:focus-visible {
  outline: 2px solid #d96c3e;
  outline-offset: -2px;
}

.cs-qty {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 12px 12px;
}

.cs-qty.is-hidden {
  display: none;
}