/* Fallback styles (runtime CSS also injected by gallery.js) */

.pro-gallery-parent-container.gallery-slider,
.pro-gallery.inline-styles.slider,
[id^="pro-gallery-container"],
[id^="gallery-horizontal-scroll"] {
  width: 100% !important;
  max-width: 100% !important;
}

.gf-carousel {
  position: relative;
  width: 100%;
  margin: 0 auto;
  background: #121212;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
}

.gf-carousel--home {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  height: calc(100vh - 110px);
  min-height: 420px;
  max-height: 920px;
}

.gf-carousel--page {
  width: min(100%, 1100px);
  max-width: 1100px;
  height: min(68vh, 640px);
  min-height: 360px;
  border-radius: 14px;
}

.gf-carousel__shell {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.gf-carousel__viewport {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: #121212;
}

.gf-carousel__track {
  display: flex;
  height: 100%;
  transition: transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.gf-carousel__slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  background: #121212;
}

.gf-carousel__slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  object-fit: contain;
  object-position: center center;
  display: block;
}

.gf-carousel__thumbs {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  overflow-x: auto;
  background: #0e0e0e;
}

.gf-carousel__thumb {
  flex: 0 0 88px;
  width: 88px;
  height: 64px;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  opacity: 0.72;
  background: #222;
}

.gf-carousel__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gf-carousel__thumb.is-active {
  opacity: 1;
  border-color: #c4a35a;
}