/* FFPG Gallery v5.4.7 */
.ffpg-gallery{ --gap:12px; --thumb-size:96px; --visible:var(--ffpg-visible-desktop, 4); margin:16px 0; font-family:inherit }
@media (max-width:1024px){ .ffpg-gallery{ --visible:var(--ffpg-visible-tablet, 3); } }
@media (max-width:768px){ .ffpg-gallery{ --visible:var(--ffpg-visible-mobile, 3); --thumb-size:84px; } }

.ffpg-layout{ display:flex; flex-direction:column; gap:12px }
.ffpg-orientation-vertical .ffpg-layout{ display:grid; grid-template-columns:minmax(110px, calc(var(--thumb-size) + 48px)) 1fr; grid-template-areas:'thumbs main'; gap:12px; align-items:start }
@media (max-width:768px){ .ffpg-orientation-vertical .ffpg-layout{ display:flex; flex-direction:column } }

.ffpg-main{ width:100%; aspect-ratio:1/1; background:#eef3f7; border-radius:12px; overflow:hidden; display:flex; align-items:center; justify-content:center }
.ffpg-main-img{ width:100%; height:100%; object-fit:cover; cursor:pointer; display:block; transition:transform .25s ease, filter .25s ease }
.ffpg-effect-zoom .ffpg-main-img:hover{ transform:scale(1.04) }
.ffpg-effect-grayscale .ffpg-main-img:hover{ filter:grayscale(1) }
.ffpg-effect-brightness .ffpg-main-img:hover{ filter:brightness(1.1) }

.ffpg-thumbs-wrap{ display:flex; align-items:center; gap:var(--gap) }
.ffpg-orientation-vertical .ffpg-thumbs-wrap{ grid-area: thumbs; flex-direction:column; align-items:center }
.ffpg-thumbs{ width:100%; max-width: calc(var(--visible) * var(--thumb-size) + (var(--visible) - 1) * var(--gap)); overflow:hidden; display:flex; gap:var(--gap); scroll-behavior:smooth }
.ffpg-orientation-vertical .ffpg-thumbs{ max-width:none; width:auto; flex-direction:column; max-height: calc(var(--visible) * var(--thumb-size) + (var(--visible) - 1) * var(--gap)); overflow:hidden }
.ffpg-thumb{ border:2px solid transparent; border-radius:10px; padding:0; background:#fff; width:var(--thumb-size); height:var(--thumb-size); flex:0 0 auto; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:border-color .2s ease }
.ffpg-thumb img{ max-width:100%; max-height:100%; display:block; border-radius:8px }
.ffpg-thumb.is-active{ border-color:var(--ffpg-border-active, #333) }
.ffpg-thumb:hover{ border-color:var(--ffpg-border-hover, #333) }

.ffpg-orientation-vertical .ffpg-main{ grid-area: main; }

.ffpg-nav{ 
  border:1px solid var(--ffpg-nav-border, #444); 
  background:var(--ffpg-nav-bg, transparent); 
  color:var(--ffpg-nav-icon, #fff); 
  border-radius:18px; width:40px; height:40px; 
  display:flex; align-items:center; justify-content:center; cursor:pointer 
}
.ffpg-nav svg{ width:20px; height:20px; display:block }
.ffpg-nav.is-filled{ background:var(--ffpg-nav-bg, #111); }
.ffpg-nav.is-outline{ background:var(--ffpg-nav-bg, transparent); }
.ffpg-nav:hover{ background:var(--ffpg-nav-bg-hover, var(--ffpg-nav-bg, transparent)); }
.ffpg-nav:active{ background:var(--ffpg-nav-bg-active, var(--ffpg-nav-bg-hover, var(--ffpg-nav-bg, transparent))); }
.ffpg-nav:disabled{ opacity:.5; cursor:not-allowed }

.ffpg-lightbox[hidden]{ display:none }
.ffpg-lightbox{ position:fixed; inset:0; z-index:9999 }
.ffpg-lightbox-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.75) }
.ffpg-lightbox-inner{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center }
.ffpg-lightbox-image{ max-width:92vw; max-height:92vh; box-shadow:0 10px 40px rgba(0,0,0,.6); background:#000 }
.ffpg-lightbox-close, .ffpg-lightbox-prev, .ffpg-lightbox-next{ position:absolute; top:50%; transform:translateY(-50%); background:#fff; border:none; width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:24px; cursor:pointer }
.ffpg-lightbox-close{ top:6%; right:4%; transform:none }
.ffpg-lightbox-prev{ left:4% }
.ffpg-lightbox-next{ right:4% }