/* 1) Keep inside container */
.svpg-wrap { width: 100%; max-width: 100%; overflow: hidden; }
.svpg-grid { width: 100%; max-width: 100%; }

/* 2) Cards */
.svpg-item { background:#fff; border-radius: 10px; overflow:hidden; box-shadow: 0 6px 20px rgba(0,0,0,.06); }
.svpg-thumb { display:block; overflow:hidden; background:#f3f3f3; }
.svpg-thumb img { width:100%; height:auto; display:block; }
.svpg-title { margin:0; padding: 10px; text-align:center; font-size: 14px; line-height: 1.25; }
.svpg-title a { text-decoration:none; color: inherit; }

/* 3) Normal grid respects EXACT column count */
.svpg-grid {
  display: grid;
  gap: var(--svpg-gap, 18px);
  grid-template-columns: repeat(var(--svpg-cols, 4), minmax(0, 1fr));
}

/* Mobile safety */
@media (max-width: 767px){
  .svpg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px){
  .svpg-grid { grid-template-columns: 1fr; }
}

/* 4) Masonry layout (keeps SAME columns as setting) */
.svpg-grid.svpg-masonry {
  display: block;
  position: relative;
}

/* Masonry sizer + items use exact column width calculation */
.svpg-grid.svpg-masonry .svpg-sizer,
.svpg-grid.svpg-masonry .svpg-item {
  width: calc((100% - (var(--svpg-cols, 4) - 1) * var(--svpg-gap, 18px)) / var(--svpg-cols, 4));
  box-sizing: border-box;
}

/* Masonry gutter element for Masonry's gutterSizer */
.svpg-grid.svpg-masonry .svpg-gutter { width: var(--svpg-gap, 18px); height: 0; }

/* Remove margin-bottom to avoid extra space; Masonry gutter handles spacing */
.svpg-grid.svpg-masonry .svpg-item { margin: 0; }

/* 5) Load more row centered on its own line */
.svpg-loadmore-row{
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.svpg-loadmore-btn{
  padding: 12px 20px;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}
.svpg-loadmore-btn[disabled]{ opacity: .6; cursor:not-allowed; }