/** Shopify CDN: Minification failed

Line 19:0 Comments in CSS use "/* ... */" instead of "//"
Line 24:2 Comments in CSS use "/* ... */" instead of "//"
Line 28:2 Comments in CSS use "/* ... */" instead of "//"
Line 47:2 Comments in CSS use "/* ... */" instead of "//"
Line 62:2 Comments in CSS use "/* ... */" instead of "//"
Line 83:6 Comments in CSS use "/* ... */" instead of "//"
Line 95:2 Comments in CSS use "/* ... */" instead of "//"
Line 95:35 Unterminated string token
Line 98:2 Comments in CSS use "/* ... */" instead of "//"
Line 115:2 Comments in CSS use "/* ... */" instead of "//"

**/
/* Test CSS */
body { border-top: 3px solid red !important; }

/* puis le reste de votre CSS... */
// JavaScript pour restructurer les variantes en sections claires
document.addEventListener('DOMContentLoaded', function() {
  const originalSwatches = document.querySelector('.swatch-items-wrapper');
  if (!originalSwatches) return;

  // Créer la nouvelle structure
  const groupedContainer = document.createElement('div');
  groupedContainer.className = 'product-variants-grouped';

  // Définir les groupes
  const groups = {
    vrac: {
      title: 'Vrac',
      description: 'Format économique en vrac',
      variants: []
    },
    pyramides: {
      title: 'Pyramides',
      description: 'Sachets pyramide premium',
      variants: []
    },
    sachets: {
      title: 'Sachets individuels',
      description: 'Pratique et portable',
      variants: []
    }
  };

  // Récupérer toutes les variantes existantes
  const allVariants = originalSwatches.querySelectorAll('.swatch');
  
  allVariants.forEach(variant => {
    const text = variant.textContent.trim();
    
    if (text.includes('Vrac')) {
      groups.vrac.variants.push(variant.cloneNode(true));
    } else if (text.includes('Pyramides')) {
      groups.pyramides.variants.push(variant.cloneNode(true));
    } else if (text.includes('Sachets individuels')) {
      groups.sachets.variants.push(variant.cloneNode(true));
    }
  });

  // Créer les sections HTML
  Object.keys(groups).forEach(groupKey => {
    const group = groups[groupKey];
    if (group.variants.length === 0) return;

    const section = document.createElement('div');
    section.className = `variant-section ${groupKey}`;
    
    section.innerHTML = `
      <div class="variant-section-title">${group.title}</div>
      <div class="variant-section-description">${group.description}</div>
      <div class="variant-options-grid"></div>
    `;

    const grid = section.querySelector('.variant-options-grid');
    
    group.variants.forEach(variant => {
      const btn = document.createElement('div');
      btn.className = 'variant-option-btn';
      btn.innerHTML = variant.innerHTML;
      
      // Copier les événements click
      btn.addEventListener('click', function() {
        variant.click();
        updateSelection();
      });
      
      grid.appendChild(btn);
    });

    groupedContainer.appendChild(section);
  });

  // Remplacer l'affichage original
  originalSwatches.parentNode.insertBefore(groupedContainer, originalSwatches);

  // Fonction pour mettre à jour la sélection visuelle
  function updateSelection() {
    const allBtns = groupedContainer.querySelectorAll('.variant-option-btn');
    const selectedOriginal = originalSwatches.querySelector('.swatch.selected, .swatch input:checked');
    
    allBtns.forEach(btn => btn.classList.remove('selected'));
    
    if (selectedOriginal) {
      const selectedText = selectedOriginal.textContent.trim();
      allBtns.forEach(btn => {
        if (btn.textContent.trim() === selectedText) {
          btn.classList.add('selected');
        }
      });
    }
  }

  // Observer les changements sur les variantes originales
  const observer = new MutationObserver(updateSelection);
  observer.observe(originalSwatches, { 
    childList: true, 
    subtree: true, 
    attributes: true 
  });

  updateSelection();
});