﻿/* For integrating splide with website */

.product-media { max-width: 1024px; margin: 0 auto; }
.splide__slide img { display:block; width:100%; height:auto; }
  /* Main image action buttons overlay (placeholder container for your Share/Fave buttons) */
  .media-actions {
    position:absolute; top:12px; right:12px; z-index:2;
    display:flex; gap:8px;
  }
  
  /* Desktop: hint that it opens fullscreen */
  @media (min-width:1024px){ #pg-main { cursor: zoom-in; } }

  /* Thumbs styling */
  #pg-thumbs { margin-top: 12px; }
  #pg-thumbs .splide__slide { opacity:.6; cursor:pointer; }
  #pg-thumbs .splide__slide.is-active { opacity:1; outline:2px solid rgba(0,0,0,.15); }

  /* Show/hide bits by breakpoint */
  @media (min-width:1024px){
    #pg-main .splide__pagination { display:none; }   /* dots hidden on desktop */
  }

  /* thumbs hidden on mobile */
  /* @media (max-width:1023px){
    #pg-thumbs { display:none; }                      
  } */
