/* Basic container styles */
.hoewp-shareness-slider-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  z-index: 1200;
}

.hoewp-shareness-slider {
  display: flex;
  transition: transform 0.5s ease-in-out;
  will-change: transform;
}

/* Each slide */
.htpx-gallery-item {
  flex: 0 0 100%; /* show 1 slide at a time */
  box-sizing: border-box;
  width: 100%;
  position: relative;
}

/* Image container with fixed aspect ratio 1200:630 (~ 1.90476) */
.htpx-gallery-image-container {
  position: relative;
  width: 100%;
  padding-bottom: calc( (630 / 1200) * 100% ); /* ~52.5% */
  overflow: hidden;
}

.htpx-gallery-image-container img {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  height: 100%;
  /* If width is less than container, it covers height, width auto to preserve aspect ratio */
}

/* Share buttons hidden by default */
.htpx-gallery-share-buttons {
  position: relative;
  bottom: 10px;
  right: 10px;
  z-index:9999999;
  background: rgb(var(--c-white));
}

/* On hover / mouseover, show share buttons */
.htpx-gallery-item:hover .htpx-gallery-share-buttons,
.hoewp-share-buttons-visible .htpx-gallery-share-buttons {
  display: block;
}

/* Mobile adjustments */
/* Portrait mobile: show square images (use width), crop height */
@media (max-width: 600px) {
  .htpx-gallery-image-container {
    padding-bottom: 100%; /* 1:1 square */
  }
}