.my-gallery-wrapper.grid-view {
  display: grid;
  gap: 20px;
}

/* Place filters visually at the top-center of the gallery section */
.my-gallery-wrapper {
  position: relative;
  /* space at top so absolutely positioned filters don't overlap images */
  padding-top: 70px;
}

/* 2 Columns */
.my-gallery-wrapper.grid-view.cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

/* 3 Columns (Your default) */
.my-gallery-wrapper.grid-view.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

/* 4 Columns */
.my-gallery-wrapper.grid-view.cols-4 {
  grid-template-columns: repeat(4, 1fr);
}
/* 5 Columns */
.my-gallery-wrapper.grid-view.cols-5 {
  grid-template-columns: repeat(5, 1fr);
}
/* 6 Columns */
.my-gallery-wrapper.grid-view.cols-6 {
  grid-template-columns: repeat(6, 1fr);
}
/* ...and so on for cols-5, cols-6 */

/* Masonry view using CSS columns */
.my-gallery-wrapper.masonry-view {
  /* fallback masonry layout using CSS columns */
  column-gap: 20px;
  column-count: 3;
}
.my-gallery-wrapper.masonry-view .my-gallery-item {
  display: inline-block; /* required for column layout */
  width: 100%;
  margin: 0 0 20px;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
}

/* Allow masonry column count to be set via classes (e.g. .cols-4)
   This lets admin settings that set `cols-4` apply to masonry as well. */
.my-gallery-wrapper.masonry-view.cols-2 {
  column-count: 2;
}
.my-gallery-wrapper.masonry-view.cols-3 {
  column-count: 3;
}
.my-gallery-wrapper.masonry-view.cols-4 {
  column-count: 4;
}
.my-gallery-wrapper.masonry-view.cols-5 {
  column-count: 5;
}
.my-gallery-wrapper.masonry-view.cols-6 {
  column-count: 6;
}

/* Responsive caps for masonry columns: ensure layout stays readable on smaller screens */
@media (max-width: 1024px) {
  .my-gallery-wrapper.masonry-view.cols-6,
  .my-gallery-wrapper.masonry-view.cols-5,
  .my-gallery-wrapper.masonry-view.cols-4 {
    column-count: 3;
  }
}
@media (max-width: 800px) {
  .my-gallery-wrapper.masonry-view.cols-6,
  .my-gallery-wrapper.masonry-view.cols-5,
  .my-gallery-wrapper.masonry-view.cols-4,
  .my-gallery-wrapper.masonry-view.cols-3 {
    column-count: 2;
  }
  .my-gallery-wrapper.masonry-view.cols-2 {
    column-count: 2;
  }
}
@media (max-width: 480px) {
  .my-gallery-wrapper.masonry-view {
    column-count: 1;
  }
}

/* Ensure images scale within their column and maintain reasonable aspect */
.my-gallery-wrapper .my-gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  max-width: 100%;
  object-fit: cover;
}

@media (max-width: 1024px) {
  .my-gallery-wrapper.masonry-view {
    column-count: 3;
  }
}
@media (max-width: 800px) {
  .my-gallery-wrapper.masonry-view {
    column-count: 2;
  }
}
@media (max-width: 480px) {
  .my-gallery-wrapper.masonry-view {
    column-count: 1;
  }
}

/* Lightbox styles */
.my-gallery-lightbox {
  position: fixed;
  inset: 0;
  display: none;
  /* ensure the flex container spans the full viewport and can center children
     even when admin bars or other page chrome are present */
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  padding: 20px; /* safe breathing room on small screens */
  box-sizing: border-box;
  z-index: 99999;
}
.my-gallery-lightbox.is-open {
  display: flex;
}
.my-gallery-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}
.my-gallery-lightbox__panel {
  position: relative;
  /* ensure the panel respects viewport height so image can scale to fit */
  max-width: 95%;
  /* Allow the panel to use full viewport height but keep some breathing room
     so the fixed controls (close/prev/next) remain visible. We'll constrain
     the inner content separately and let the image size to that content. */
  max-height: 100vh;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.my-gallery-lightbox__content {
  /* stack image and caption vertically. Do NOT allow the content to create
    its own scrollbars — the image should scale to fit the viewport and any
    overflow should be hidden at the panel level. Keep layout centered. */
  display: flex !important;
  flex-direction: column; /* stack image above caption */
  align-items: center;
  justify-content: center;
  height: auto;
  box-sizing: border-box;
  /* allow the content to size naturally; the image has explicit max-* rules
    relative to the viewport so it will never overflow. */
  max-height: none;
  overflow: visible;
}
.my-gallery-lightbox__img {
  display: block;
  /* Explicitly constrain image size to the viewport so it always fits
     without causing scrollbars or cropping. The panel and lightbox use
     overflow:hidden so the visual chrome remains clean. */
  width: auto;
  height: auto;
  max-width: calc(100vw - 160px);
  max-height: calc(100vh - 160px);
  object-fit: contain;
  border-radius: 6px;
  border: 6px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 48px rgba(2, 6, 23, 0.35);
  box-sizing: border-box;
}
.my-gallery-lightbox__caption {
  margin-top: 8px;
  color: #fff;
  text-align: left; /* left align title and meta to match screenshot */
  font-size: 14px;
  line-height: 1.1;
  max-width: 680px; /* avoid extremely wide caption lines on very large screens */
}
.my-gallery-lightbox__caption .my-gallery-lightbox__title {
  font-weight: 700;
  color: #f3f3f3;
  font-size: 15px;
  margin-bottom: 6px;
}
.my-gallery-lightbox__caption .my-gallery-lightbox__meta {
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
}
.my-gallery-lightbox__btn {
  position: absolute;
  background: rgba(255, 255, 255, 0.92);
  border: none;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(2, 6, 23, 0.12);
}
.my-gallery-lightbox__close {
  /* Fix the close control to the viewport top-right so it's always visible
     independent of the panel/image position. Use a high z-index so it
     remains above the lightbox/backdrop and loader. */
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 100001; /* higher than .my-gallery-lightbox (99999) and loader (3) */
  /* Keep its visual shape consistent with other buttons */
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.my-gallery-lightbox__prev,
.my-gallery-lightbox__next {
  /* Make prev/next fixed to the viewport so they remain visible and
     vertically centered even if the panel creates an internal scrollbar
     (some themes or private/incognito modes can cause different layout
     behavior). Keeping them fixed prevents them from being pushed off-screen. */
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100002;
  /* slightly offset from viewport edges */
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.my-gallery-lightbox__prev {
  left: 20px;
}
.my-gallery-lightbox__next {
  right: 20px;
}

/* Make next/prev/close buttons have an 8px corner radius (override the circular default)
   This applies only to these controls so other `.my-gallery-lightbox__btn` buttons remain circular */
.my-gallery-lightbox__close,
.my-gallery-lightbox__prev,
.my-gallery-lightbox__next {
  border-radius: 8px;
}
.my-gallery-lightbox__btn:focus {
  outline: 2px solid #2563eb;
}

/* Loader overlay shown while lightbox image loads */
.my-gallery-lightbox__loader {
  display: none;
  position: absolute;
  inset: 0; /* cover the entire panel */
  z-index: 3;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
}
.my-gallery-lightbox.is-loading .my-gallery-lightbox__loader {
  display: flex;
}
.my-gallery-lightbox__spinner {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 6px solid rgba(255, 255, 255, 0.18);
  border-top-color: #ffffff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  animation: my-gallery-spin 1s linear infinite;
}
@keyframes my-gallery-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 640px) {
  .my-gallery-lightbox__prev {
    left: 8px;
  }
  .my-gallery-lightbox__next {
    right: 8px;
  }
  .my-gallery-lightbox__close {
    top: 8px;
    right: 8px;
  }
  .my-gallery-lightbox__panel {
    max-width: 100%;
  }
}

/* Stronger centering overrides in case theme CSS interferes */
.my-gallery-lightbox.is-open {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.my-gallery-lightbox,
.my-gallery-lightbox__panel {
  /* Prevent internal scrollbars — image will scale to the viewport. */
  overflow: hidden;
}
.my-gallery-lightbox__panel {
  /* ensure the panel itself stays centered inside the flex container */
  margin: 0 auto;
  max-height: none;
}

/* When loader is visible, move the arrow buttons away and soften them so
   they don't overlap the loader. Also disable pointer events while loading. */
.my-gallery-lightbox__btn {
  transition: transform 220ms ease, opacity 200ms ease;
}
.my-gallery-lightbox.is-loading .my-gallery-lightbox__prev {
  /* nudge left while keeping vertical centering */
  transform: translate(-128px, -50%);
  opacity: 0.85;
  pointer-events: none;
}
.my-gallery-lightbox.is-loading .my-gallery-lightbox__next {
  /* nudge right while keeping vertical centering */
  transform: translate(128px, -50%);
  opacity: 0.85;
  pointer-events: none;
}

/* If you prefer the controls hidden entirely during loading, replace the
   rule above with `display: none;` for the selectors under `.is-loading`. */

/* Prevent the page behind the lightbox from scrolling while open. The JS
   adds/removes the `my-gallery-lightbox-open` class on <body> when opening
   or closing the lightbox. */
body.my-gallery-lightbox-open {
  overflow: hidden;
  touch-action: none; /* helps on mobile to prevent swipe/pinch background */
}

/* Gallery item basic styles */
.my-gallery-wrapper .my-gallery-item {
  display: inline-block;
  text-decoration: none;
  color: inherit;
  transition: transform 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
  /* keep overflow hidden so image scale doesn't overflow rounded corners */
  overflow: hidden;
}
.my-gallery-wrapper .my-gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  /* prepare image for smooth zoom on hover */
  transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
  transform-origin: center center;
}

/* Zoom the image on hover while keeping the item container stable.
   Add class `no-zoom` to `.my-gallery-item` to opt out of the effect. */
.my-gallery-wrapper .my-gallery-item:not(.no-zoom):hover img {
  transform: scale(1.08);
}

/* Small lift effect retained on hover for the entire item (optional) */
.my-gallery-wrapper .my-gallery-item:not(.no-zoom):hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.1);
}

/* Disable zoom on touch devices to avoid interfering with scroll/pinch gestures */
@media (hover: none) and (pointer: coarse) {
  .my-gallery-wrapper .my-gallery-item img {
    transition: none;
    transform: none;
  }
  .my-gallery-wrapper .my-gallery-item {
    transform: none;
  }
}

/* Filter buttons */
.my-gallery-filters {
  /* absolutely position the filter bar at the top center of the gallery wrapper */
  position: absolute;

  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 0; /* absolute positioning — remove normal margin */
  background: rgba(255, 255, 255, 0.9);
  padding: 8px 12px;
}
.my-gallery-filters .my-gallery-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: linear-gradient(180deg, #ffffff, #f7f9fc);
  color: #0f172a;
  border-radius: 9px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 4px 14px rgba(2, 6, 23, 0.04);
}
.my-gallery-filters .my-gallery-filter-btn:hover {
  background: #feac65;
  color: #0b1220;
  transform: translateY(-2px);
}
.my-gallery-filters .my-gallery-filter-btn.active {
  background: #5ccaf1;
  color: #ffffff;
  box-shadow: 0 10px 30px rgba(37, 99, 235, 0.16);
  border-color: rgba(37, 99, 235, 0.25);
}

/* small decorative dot before each button — removed visually */
.my-gallery-filters .my-gallery-filter-btn::before {
  /* kept for future use; hide now */
  display: none;
}

/* Responsive adjustments */
@media (max-width: 800px) {
  .my-gallery-wrapper.grid-view.cols-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .my-gallery-wrapper.grid-view.cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .my-gallery-wrapper.grid-view.cols-5 {
    grid-template-columns: repeat(2, 1fr);
  }
  .my-gallery-wrapper.grid-view.cols-6 {
    grid-template-columns: repeat(2, 1fr);
  }
  .my-gallery-filters {
    gap: 6px;
    position: static; /* flow normally on small screens */
    transform: none;
    left: auto;
    top: auto;
    padding: 6px 8px;
    box-shadow: none;
    background: transparent;
    /* center filters at top of the container */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0 auto 12px;
  }
  .my-gallery-filters .my-gallery-filter-btn {
    padding: 6px 10px;
    font-size: 12px;
  }

  /* Ensure filters appear above the grid items and span full width */
  .my-gallery-wrapper .my-gallery-filters {
    /* when the wrapper is a grid, force the filters to span all columns */
    grid-column: 1 / -1;
    justify-self: center;
    /* reduce top padding of the gallery so filters sit closer to content */
  }

  /* make the gallery wrapper less tall on small screens */
  .my-gallery-wrapper {
    padding-top: 28px;
  }
}

/* Styles for filters when moved outside the wrapper by JS */
.my-gallery-filters--external {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 0 12px !important;
  background: transparent !important; /* let themes control background if desired */
}

/* make sure the external filters don't accidentally overlap content */

/* Pagination styled to match the attached design: rounded peach numeric buttons */
.my-gallery-pagination {
  text-align: center;
  margin: 18px 0 6px;
  font-size: 14px;
}
.my-gallery-pagination .my-gallery-pages {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}
.my-gallery-pagination .my-gallery-page-btn,
.my-gallery-pagination .my-gallery-page-current {
  display: inline-block;
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  margin: 0 4px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.02);
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
/* inactive page — soft peach */
.my-gallery-pagination .my-gallery-page-btn {
  background: #fde8c9; /* light peach */
  color: #8a5a2b; /* brownish text for contrast */
  border: 1px solid rgba(0, 0, 0, 0.03);
}
.my-gallery-pagination .my-gallery-page-btn:hover {
  transform: translateY(-2px);
  background: #f6d39b;
  color: #6b3f1a;
}
/* current page — solid peach with white number */
.my-gallery-pagination .my-gallery-page-current {
  background: #f6b26b; /* primary peach */
  color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 6px 18px rgba(246, 178, 107, 0.12);
}
.my-gallery-pagination .dots {
  color: #d19b5f;
  margin: 0 6px;
  display: inline-block;
  vertical-align: middle;
  font-weight: 700;
}
@media (max-width: 480px) {
  .my-gallery-pagination {
    font-size: 13px;
  }
  .my-gallery-pagination .my-gallery-page-btn,
  .my-gallery-pagination .my-gallery-page-current {
    width: 32px;
    height: 32px;
    line-height: 32px;
    border-radius: 6px;
    margin: 0 3px;
  }
}
/* NOTE: Keep `.my-gallery-lightbox__content` as a flex container (defined earlier)a
   so the image can be centered and constrained by max-width/max-height.
   Avoid overriding it to `display:block` which causes sizing/cropping issues. */

/* Root wrapper to ensure gallery and pagination stay together and span full width.
   This avoids the pagination being placed beside the images by surrounding theme layouts. */
.my-gallery-root {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

/* Force pagination to clear any floats/grid in nearby layout and take full width */
.my-gallery-root .my-gallery-pagination {
  clear: both;
  width: 100%;
  box-sizing: border-box;
  margin-top: 18px; /* ensure some spacing from images */
}

/* Ensure the gallery root stacks its children vertically so pagination
   is always rendered after the gallery and not overlapped by tall items. */
.my-gallery-root {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.my-gallery-root .my-gallery-wrapper {
  width: 100%;
  box-sizing: border-box;
}

/* Give pagination its own stacking context so it won't be hidden beneath
   gallery items that may create new stacking contexts. */
.my-gallery-root .my-gallery-pagination {
  position: relative;
  z-index: 2;
  margin-top: 22px;
}

/* When pagination is placed outside the root (sibling in the DOM), ensure
   it sits clearly below the gallery block and spans the content area. */
.my-gallery-root + .my-gallery-pagination {
  clear: both;
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 50px !important;
  text-align: center;
  z-index: 2;
  position: relative;
}

/* Fallback: add bottom spacing to gallery root to ensure gap even if
   pagination is injected inside different containers by plugins/themes. */
.my-gallery-root {
  padding-bottom: 50px !important;
}

/* Ensure individual gallery items don't accidentally sit above pagination */
.my-gallery-wrapper .my-gallery-item {
  position: relative;
  z-index: 1;
}

/* Cleanup: replace temporary debug helpers with safe, stable layout rules.
   Removed dashed outlines and aggressive !important overrides which can
   create stacking-context/positioning issues and cause pagination to appear
   overlapped by gallery items. */
.my-gallery-root {
  /* keep root stacked vertically and allow children to span full width */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  box-sizing: border-box;
  padding-bottom: 50px;
}

.my-gallery-root .my-gallery-wrapper {
  width: 100%;
  box-sizing: border-box;
  /* avoid creating unexpected stacking contexts */
  overflow: visible;
  transform: none;
}

.my-gallery-root .my-gallery-pagination {
  /* Keep pagination in normal flow below the gallery and above page content when needed */
  position: relative;
  z-index: 3;
  clear: both;
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 50px;
}