/* ZG CommerceKit Grid Helper Layout Styles - Custom Pattern Override */

/* Desktop Grid Layout (771px+) */
@media (min-width: 771px) {
  /* Override CommerceKit's default grid-1-1-2-2 pattern */
  .cg-layout-grid-1-1-2-2 ul.swiper-wrapper {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px;
  }

  /* Default: all images span 1 column (half width) */
  .cg-layout-grid-1-1-2-2 ul li.swiper-slide {
    grid-column: span 1 !important;
  }

  /* Custom Pattern: 1 full, 2 full, 3-4 half-half, 5-6 half-half, 7-8 half-half, etc. */
  /* Image 1: Full width (span 2) */
  .cg-layout-grid-1-1-2-2 ul li.swiper-slide:nth-child(1) {
    grid-column: span 2 !important;
  }

  /* Image 2: Full width (span 2) */
  .cg-layout-grid-1-1-2-2 ul li.swiper-slide:nth-child(2) {
    grid-column: span 2 !important;
  }

  /* Images 3-4: Half width each (span 1) - already set by default */
  /* Images 5-6: Half width each (span 1) - already set by default */
  /* Images 7-8: Half width each (span 1) - already set by default */
  /* Images 9-10: Half width each (span 1) - already set by default */
  /* And so on... unlimited images follow the same pattern */

  /* Ensure "Load more" button is properly styled */
  .cg-layout-grid-1-1-2-2 .load-more-images {
    grid-column: span 2 !important;
    width: 100% !important;
    margin-top: 10px !important;
  }

  /* Fix navigation thumbnail heights - make them consistent */
  .cg-layout-grid-1-1-2-2 .cg-thumb-swiper .swiper-slide img {
    height: 80px !important;
    object-fit: cover !important;
    object-position: center !important;
  }
}

/* Mobile Layout (770px and below) */
@media (max-width: 770px) {
  /* Override grid layout on mobile to preserve Swiper functionality */
  .cg-layout-grid-1-1-2-2 ul.swiper-wrapper {
    display: flex !important;
    grid-template-columns: none !important;
  }

  .cg-layout-grid-1-1-2-2 ul li.swiper-slide {
    grid-column: unset !important;
  }

  /* Fix mobile navigation thumbnail heights */
  .cg-layout-grid-1-1-2-2 .cg-thumb-swiper .swiper-slide img {
    height: 60px !important;
    object-fit: cover !important;
    object-position: center !important;
  }
}