// Example: Carousel Initialization Hook
initSwiper: (Swiper, templateSettings, container, params) => {
    const carouselContainer = container.querySelector('._gai-crz-cnt');
    if (!carouselContainer) return;
    
    return new Swiper(carouselContainer, {
        slidesPerView: templateSettings.breakpoints.small.cardsPerView,
        spaceBetween: templateSettings.breakpoints.small.gutter
    });
}

// Example: Variant Change Hook
onVariantChange: (args, utils) => {
    const { variant, product, container } = args;
    const priceElement = container.querySelector('._gai-prod-prc');
    if (priceElement && variant.price) {
        priceElement.textContent = utils.formatMoney(variant.price);
    }
}

/* Mobile (default) */
[data-gai-section-id="{{ section_id }}"] ._gai-grid {
  grid-template-columns: repeat({{- settings.breakpoints.small.cards_per_view -}}, 1fr);
  gap: {{ settings.breakpoints.small.gutter }}px;
}

/* Tablet */
@media (min-width: {{ settings.breakpoints.medium.screen_size }}px) {
  /* Tablet-specific styles */
}

/* Desktop */
@media (min-width: {{ settings.breakpoints.large.screen_size }}px) {
  /* Desktop-specific styles */
}