/** Shopify CDN: Minification failed

Line 42:18 Unexpected "{"
Line 42:27 Expected ":"
Line 42:33 Unexpected ","
Line 92:4 "column" is not a known CSS property
Line 119:22 Unexpected "{"
Line 119:31 Expected ":"
Line 119:37 Unexpected ","

**/
/* ===========================================================
   SHIPTREND v3 — PRODUCT IMAGE SWIPE GALLERY (MOBILE)
   Full-width swipe like Amazon/Flipkart on mobile
   =========================================================== */

@media (max-width: 767px) {

  /* 1. Stack layout: media wrapper goes full width on top */
  .product.grid {
    display: flex !important;
    flex-direction: column !important;
  }
  .product__media-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .product__info-wrapper {
    width: 100% !important;
    padding: 14px 14px 80px !important;
  }

  /* 2. The media-gallery custom element — no sticky on mobile */
  media-gallery.product__column-sticky {
    position: static !important;
    top: auto !important;
  }

  /* 3. The slider-component wrapper */
  #GalleryViewer-{{ section.id }},
  [id^="GalleryViewer"] {
    overflow: hidden !important;
    position: relative !important;
  }

  /* 4. THE KEY FIX: The product media list
     Override grid, grid--peek, and all other classes
     that prevent full-width display */
  .product__media-list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    /* Scroll snap — enables swipe */
    overflow-x: scroll !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;

    /* Remove scrollbar */
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;

    /* Remove gap/padding that breaks 100% width */
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    column-gap: 0 !important;

    /* Reset grid behavior */
    grid-template-columns: unset !important;
    grid-gap: 0 !important;
  }
  .product__media-list::-webkit-scrollbar { display: none !important; }

  /* 5. Each media item = exactly 100% of the viewport */
  .product__media-item,
  .product__media-list > li,
  .product__media-list > .slider__slide {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    scroll-snap-align: start !important;
    padding: 0 !important;
    margin: 0 !important;

    /* Reset grid__item width */
    grid-column: unset !important;
    column: unset !important;
  }

  /* 6. Media inside each slide — square, fills full width */
  .product__media-item .product-media-container,
  .product__media-item .media {
    position: relative !important;
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    max-height: 100vw !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    background: #F8FAFC !important;
  }
  .product__media-item .media img,
  .product__media-item img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
    opacity: 1 !important;
  }

  /* 7. Hide thumbnails on mobile (set in template: mobile_thumbnails: hide) */
  .thumbnail-slider,
  #GalleryThumbnails-{{ section.id }},
  [id^="GalleryThumbnails"] {
    display: none !important;
  }

  /* 8. Swipe counter (1/3) — style it nicely */
  .slider-buttons {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 0 8px !important;
    gap: 12px !important;
    background: #fff !important;
  }
  /* Hide prev/next arrow buttons — keep only the counter */
  .slider-button {
    display: none !important;
  }
  /* Counter display: "1 / 3" */
  .slider-counter {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #6B7280 !important;
    min-width: auto !important;
    background: #F3F4F6 !important;
    padding: 4px 14px !important;
    border-radius: 100px !important;
  }
  .slider-counter--current {
    font-weight: 700 !important;
    color: #1E3A8A !important;
  }
}

/* ===========================================================
   DOT INDICATORS — Added via JS below
   =========================================================== */
.st-gallery-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 8px 0 4px;
  background: #fff;
}
.st-gallery-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #D1D5DB;
  transition: all 0.25s ease;
  cursor: pointer;
  border: none;
  padding: 0;
  flex-shrink: 0;
}
.st-gallery-dot.active {
  background: #1E3A8A;
  width: 20px;
  border-radius: 3px;
}