/* Product page image gallery: desktop shows all product images at once in a
   2-column grid (Thule.com pattern); mobile keeps the existing Journal3
   swiper carousel (1 slide at a time) unchanged.

   Grid cell sizing: product images in this project are already delivered as
   square canvases (see /skripts THULE_IMAGE_GALLERY_TASK.txt), so a plain
   aspect-ratio:1 cell with object-fit:cover renders identically to
   object-fit:contain for today's images - no cropping occurs. This is
   deliberate so a future non-square source image would still be handled
   sanely (cropped to fill the square cell) rather than breaking the grid.

   Odd image count: the single trailing image (or the only image, when there
   is just one) spans both columns and uses object-fit:contain with
   height:auto instead of a forced square, so it is never cropped - see
   .pdp-gallery-cell--full below. See THULE_IMAGE_GALLERY_TASK.txt
   LOOGIKAOTSUSED punkt 2. */

.pdp-gallery-grid {
  display: none;
}

@media (min-width: 992px) {
  /* .swiper.main-image (2 classes) normally sets its own display via JS/CSS
     with specificity 0,2,0 - a plain single-class .pdp-gallery-carousel rule
     loses that fight silently (renders "hidden" in markup but stays
     display:block). Match the same specificity plus !important, matching
     this codebase's own convention for overriding swiper's JS-driven
     display (see .swiper-pagination{display:none !important} in
     style.min.css). */
  .swiper.main-image.pdp-gallery-carousel {
    display: none !important;
  }

  /* The grid replaces Journal3's separate additional-images thumbnail strip
     (all images become equal grid cells instead) - hide it on desktop only,
     it still works normally on mobile. */
  .product-image > .additional-images {
    display: none !important;
  }

  .pdp-gallery-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
  }

  .pdp-gallery-grid .pdp-gallery-cell {
    flex: 0 0 calc(50% - 4px);
    max-width: calc(50% - 4px);
    aspect-ratio: 1 / 1;
    overflow: hidden;
  }

  .pdp-gallery-grid .pdp-gallery-cell[data-gallery] {
    cursor: zoom-in;
  }

  .pdp-gallery-grid .pdp-gallery-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .pdp-gallery-grid .pdp-gallery-cell--full {
    flex: 0 0 100%;
    max-width: 100%;
    aspect-ratio: auto;
  }

  .pdp-gallery-grid .pdp-gallery-cell--full img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }
}