/** Shopify CDN: Minification failed

Line 163:24 Unexpected "{"
Line 163:33 Expected ":"
Line 163:40 Unexpected "{"
Line 168:38 Unexpected "{"
Line 168:47 Expected ":"
Line 168:53 Unexpected ","
Line 169:40 Unexpected "{"
Line 169:49 Expected ":"
Line 169:56 Unexpected "{"
Line 175:24 Unexpected "{"
... and 11 more hidden warnings

**/
/* Desktop: thumbnails as a vertical strip beside the main image */
  @media screen and (min-width: 750px) {
    /* image section vs info section width split */
    .product__media-wrapper {
      width: 60% !important;
      max-width: 60% !important;
      flex: 0 0 60% !important;
    }
    .product__info-wrapper {
      width: 40% !important;
      max-width: 40% !important;
      flex: 0 0 40% !important;
      padding-left: 4rem !important;
    }

    /* force the main image to fill the full column width instead of shrinking to fit a height constraint */
.product-media-container.constrain-height.media-fit-contain {
  width: 100% !important;
  height: auto !important;
}
.product-media-container {
  max-width: 100% !important;
  max-height: none !important;
}
    media-gallery {
      display: flex !important;
      flex-direction: row-reverse !important;
      align-items: flex-start !important;
      gap: 1.2rem !important;
    }

    /* main image area takes the remaining space on the right */
    media-gallery [id^="GalleryViewer-"] {
      flex: 1 1 auto !important;
      min-width: 0 !important;
    }

    media-gallery .product__media-list {
      display: flex !important;
      flex-wrap: wrap !important;
      grid-template-columns: unset !important;
      margin: 0 !important;
    }

    /* only the active image/video is shown, full width (this is what makes it look like one big photo instead of a grid) */
    media-gallery .product__media-list .product__media-item:not(.is-active) {
      display: none !important;
    }
    media-gallery .product__media-list .product__media-item.is-active {
      width: 100% !important;
      max-width: 100% !important;
    }

    /* thumbnail column: fixed narrow width, stacked vertically on the left */
    media-gallery [id^="GalleryThumbnails-"] {
      display: flex !important;
      flex-direction: column !important;
      flex: 0 0 12rem !important;
      width: 9rem !important;
      /* height: 100% !important;  */
       min-height: 0 !important; 
      overflow-y: auto !important;
      scrollbar-width: none !important;
    }
    media-gallery [id^="GalleryThumbnails-"]::-webkit-scrollbar {
      display: none !important;
    }

    [id^="GalleryThumbnails-"] .thumbnail-list {
      display: flex !important;
      flex-direction: column !important;
      flex-shrink: 0 !important;
      grid-template-columns: unset !important;
      gap: 1rem !important;
      width: 100% !important;
      padding: 0 !important;
    }
    [id^="GalleryThumbnails-"] .thumbnail-list__item {
      width: 100% !important;
      flex-shrink: 0 !important; 
    }

    /* hide the left/right slider arrows next to the vertical thumbnail column */
    media-gallery [id^="GalleryThumbnails-"] .slider-button {
      display: none !important;
    }
  }

  /* Mobile: proper slider - centered */
  @media screen and (max-width: 749px) {
    .slider-mobile-gutter {
      padding: 0 !important;
    }
    .product__media-list {
      display: flex !important;
      flex-wrap: nowrap !important;
      overflow-x: scroll !important;
      scroll-snap-type: x mandatory !important;
      -webkit-overflow-scrolling: touch !important;
      scrollbar-width: none !important;
      gap: 0 !important;
      grid-template-columns: unset !important;
      margin: 0 !important;
      padding: 0 !important;
      width: 100% !important;
    }
    .product__media-list::-webkit-scrollbar {
      display: none !important;
    }
    .product__media-item {
      flex: 0 0 100% !important;
      width: 100% !important;
      max-width: 100% !important;
      scroll-snap-align: center !important;
      padding: 0 !important;
      margin: 0 !important;
      grid-column: unset !important;
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
    }
.product__media-item img,
.product__media-item video {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;
}

/* Iframe ke liye alag rule */
.product__media-item iframe {
  width: 100% !important;
  display: block !important;
}

/* Gumlet wrapper ko fix karo */
.product__media-item > div[style*="aspect-ratio"] {
  width: 100% !important;
  aspect-ratio: 1/1 !important;
}
    .product__media-wrapper {
      width: 100% !important;
      padding: 0 !important;
      overflow: hidden !important;
    }

    /* ── MOBILE THUMBNAILS FIX ── */
    #GalleryThumbnails-{{ section.id }} {
      display: block !important;
    }
    /* Dawn ke medium-hide / large-up-hide ko mobile pe override karo */
    @media screen and (max-width: 749px) {
      .medium-hide#GalleryThumbnails-{{ section.id }},
      .large-up-hide#GalleryThumbnails-{{ section.id }} {
        display: block !important;
      }
    }

    /* thumbnail list: horizontal scroll row */
    #GalleryThumbnails-{{ section.id }} .thumbnail-list {
      display: flex !important;
      flex-direction: row !important;
      flex-wrap: nowrap !important;
      overflow-x: auto !important;
      gap: 8px !important;
      padding: 8px 4px !important;
      scrollbar-width: none !important;
    }
    #GalleryThumbnails-{{ section.id }} .thumbnail-list::-webkit-scrollbar {
      display: none !important;
    }

    /* har thumbnail ka size */
    #GalleryThumbnails-{{ section.id }} .thumbnail-list__item {
      flex: 0 0 64px !important;
      width: 64px !important;
      height: 64px !important;
    }

    /* thumbnail button aur image */
    #GalleryThumbnails-{{ section.id }} .thumbnail {
      width: 64px !important;
      height: 64px !important;
      padding: 0 !important;
      overflow: hidden !important;
      border-radius: 4px !important;
    }
    #GalleryThumbnails-{{ section.id }} .thumbnail img {
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
    }

    /* thumbnail slider prev/next arrows mobile pe hide karo */
    #GalleryThumbnails-{{ section.id }} .slider-button {
      display: none !important;
    }
  }