:root{
  /* Replace with your Media Library URL of the texture background */
  --cps-gallery-bg: url('https://limestoneateliers.saqibcode.com/wp-content/uploads/2025/11/Gemini_Generated_Image_5si8wn5si8wn5si8.webp');
  --cps-bg-size: cover;       /* or contain */
  --cps-bg-position: center;
  --cps-bg-attachment: scroll; /* or fixed for parallax-like effect */
  --cps-frame-padding: 24px;
  --cps-frame-radius: 0px;
  --cps-accent: #333;
}

.cps-pgs-wrap{
  width: 100%;
}

.cps-pgs-main{
  width: 100%;
  margin-bottom: 14px;
}

.cps-pgs-frame{
  position: relative;
  padding: var(--cps-frame-padding);
  border-radius: var(--cps-frame-radius);
  overflow: hidden;
}

.cps-pgs-frame::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--cps-gallery-bg);
  background-size: var(--cps-bg-size);
  background-position: var(--cps-bg-position);
  background-attachment: var(--cps-bg-attachment);
  z-index: 0;
}

.cps-pgs-frame img{
  position: relative;
  z-index: 1;
  display:block;
  width: 100%;
  height: auto;
  background-color: transparent; /* ensure no white fill behind PNG */
}

.cps-pgs-button{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.7);
  box-shadow: 0 1px 4px rgba(0,0,0,.12);
  cursor: pointer;
  z-index: 5;
}
.cps-pgs-button-prev{ left: 10px; }
.cps-pgs-button-next{ right: 10px; }

/* Swiper core helpers */
.cps-pgs-pagination{ position: relative; margin-top: 8px; }

.cps-pgs-thumbs{ width:100%; }
.cps-pgs-thumbs .swiper-slide{
  width: 84px; height: 84px;
  opacity:.6; cursor:pointer;
}
.cps-pgs-thumbs .swiper-slide-thumb-active{ opacity:1; outline: 2px solid var(--cps-accent); }
.cps-pgs-thumbs img{ width:100%; height:100%; object-fit: contain; background: transparent; }