:root {
  --icons-bgcolor: rgba(0, 0, 0, 0.8);
  --pgslider-hover-opacity: 1;
  --pgslider-disabled-opacity: 0;

  --icon-color: #fff;
  --icons-top: 20px;
  --icons-bgcolor: rgba(0, 0, 0, 0.8);
  --icon-prev-right-position: 70px;
  --icon-prev-left-position: auto;
  --icon-next-right-position: 20px;
  --icon-next-left-position: auto;
}

.wp-block-product-gallery.has-carousel {
  --gap: 13px; /* Flex gap */

  --desktop-num-slides: 4; /* Number of slides to show on desktop */
  --tablet-num-slides: 3; /* Number of slides to show on tablet */
  --mobile-num-slides: 1; /* Number of slides to show on mobile */
  --bleed-fraction: 0.28; /* Fraction of additional slide visible (70% bleed) */

  /* Desktop default */
  --slide-width: calc((100% - (var(--desktop-num-slides) - 1) * var(--gap)) / (var(--desktop-num-slides) + var(--bleed-fraction)));
}

.wp-block-product-gallery.has-carousel {
  position: relative;

  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.wp-block-product-gallery.has-carousel .slider-wrapper {
  position: relative;
}

.wp-block-product-gallery.has-carousel.active {
  cursor: grabbing;
}

.wp-block-product-gallery.has-carousel .slider-track {
  display: flex;
  gap: var(--gap);
  transform: translateX(0);
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.wp-block-product-gallery.has-carousel .product {
  flex: 0 0 var(--slide-width);

  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  margin-bottom: 0;
}

/* Fixed position arrows */
.wp-block-product-gallery.has-carousel .prev,
.wp-block-product-gallery.has-carousel .next {
  position: absolute;
  top: var(--icons-top, 20px);
  background-color: var(--icons-bgcolor);
  border: none;
  width: var(--icon-np-size, 40px);
  height: var(--icon-np-size, 40px);
  border-radius: 50%;
  cursor: pointer;
  transition: opacity 0.3s ease;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wp-block-product-gallery.has-carousel .prev {
  right: var(--icon-prev-right-position, 70px);
  left: var(--icon-prev-left-position, auto);
}

.wp-block-product-gallery.has-carousel .next {
  right: var(--icon-next-right-position, 20px);
  left: var(--icon-next-left-position, auto);
}

/* Show arrows on hover over the entire gallery, but hide disabled ones */
.wp-block-product-gallery.has-carousel:hover .prev:not(.disabled),
.wp-block-product-gallery.has-carousel:hover .next:not(.disabled) {
  opacity: var(--pgslider-hover-opacity) !important;
}

/* Keep disabled arrows hidden even on hover */
.wp-block-product-gallery.has-carousel .prev.disabled,
.wp-block-product-gallery.has-carousel .next.disabled {
  opacity: var(--pgslider-disabled-opacity) !important;
}

/* Tablet: 768px - 1079px */
@media (max-width: 1079px) {
  .wp-block-product-gallery.has-carousel {
    --slide-width: calc((100% - (var(--tablet-num-slides) - 1) * var(--gap)) / (var(--tablet-num-slides) + var(--bleed-fraction)));
  }
}

/* Mobile: below 768px */
@media (max-width: 767px) {
  .wp-block-product-gallery.has-carousel {
    --slide-width: calc((100% - (var(--mobile-num-slides) - 1) * var(--gap)) / (var(--mobile-num-slides) + var(--bleed-fraction)));
  }

  .wp-block-product-gallery.has-carousel .prev,
  .wp-block-product-gallery.has-carousel .next {
    opacity: 0;
    display: none;
  }
}

/* Large desktop adjustment */
@media (max-width: 1440px) {
  .wp-block-product-gallery.has-carousel {
    --desktop-num-slides: 3;
  }
}