/* Star Carousel */
.star-carousel{
  --sc-h: 300px;
  --sc-gap: 10px;
  --sc-cols: 5;
  --sc-arrow-space: 280px;
  --sc-arrow-size: 86px;
  --sc-bar-gap: 30px;
  --sc-track-h: 6px;
  --sc-fill-h: 10px;
  --sc-track: #1F3633;
  --sc-fill: #AAB89F;
  --sc-arrow: rgba(255,255,255,.85);
  position: relative;
}

.star-carousel__viewport{
  position: relative;
  padding-right: var(--sc-arrow-space);
}

.star-carousel__track{
  display: flex;
  align-items: stretch;
  gap: var(--sc-gap);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
}
.star-carousel__track::-webkit-scrollbar{ display:none; }
.star-carousel__track.is-dragging{
  cursor: grabbing;
}

.star-carousel__slide{
  flex: 0 0 calc((100% - ((var(--sc-cols) - 1) * var(--sc-gap))) / var(--sc-cols));
  height: var(--sc-h);
  min-width: 0;
  margin: 0;
  scroll-snap-align: start;
}

.star-carousel__link{
  display: block;
  width: 100%;
  height: 100%;
}

.star-carousel__slide img{
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
}

.star-carousel__link{
  position: relative;
  overflow: hidden;
}

.star-carousel__link::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.14);
  opacity: 0;
  transition: opacity 180ms ease;
  pointer-events: none;
}

.star-carousel__link:hover::after,
.star-carousel__link:focus-visible::after{
  opacity: 1;
}

.star-carousel__next{
  width: var(--sc-arrow-size);
  height: var(--sc-arrow-size);
  border-radius: 999px;
  border: 2px solid var(--sc-arrow);
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  display: grid;
  place-items: center;
  z-index: 5;
  cursor: pointer;
  padding: 0;
  outline: none;
  box-shadow: none;
  line-height: 0;
  -webkit-tap-highlight-color: transparent;
  border-color: #1F3633;
  transition: background 160ms ease, border-color 160ms ease;
}

.star-carousel__next:active{
  transform: none;
}

.star-carousel__next:hover,
.star-carousel__next:focus,
.star-carousel__next:focus-visible{
  background: #1F3633;
  border-color: #1F3633;
  box-shadow: none;
  outline: none;
}

.star-carousel__next--desktop{
  display: grid !important;
  position: absolute !important;
  top: 50% !important;
  right: calc((var(--sc-arrow-space) - var(--sc-arrow-size)) / 2) !important;
  left: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: translateY(-50%) !important;
}

.star-carousel__next--desktop:active{
  transform: translateY(-50%) !important;
}

.star-carousel__next--mobile{
  display: none !important;
  position: static !important;
  margin: 0 !important;
  transform: none !important;
  width: 34px;
  height: 34px;
  border-width: 1.5px;
  flex: 0 0 auto;
}

.star-carousel__chev{
  width: 14px;
  height: 14px;
  border-right: 2px solid var(--sc-arrow);
  border-bottom: 2px solid var(--sc-arrow);
  transform: rotate(-45deg);
  margin-left: -3px;
}

.star-carousel__bar{
  margin-top: var(--sc-bar-gap);
  padding-right: var(--sc-arrow-space);
  display: flex;
  align-items: center;
  gap: 14px;
}

.star-carousel__bar-track{
  width: 100%;
  flex: 1 1 auto;
  height: var(--sc-track-h);
  background: var(--sc-track);
  border-radius: 999px;
  position: relative;
}

.star-carousel__bar-fill{
  position: absolute;
  left: 0;
  top: calc((var(--sc-track-h) - var(--sc-fill-h)) / 2);
  height: var(--sc-fill-h);
  width: 0%;
  background: var(--sc-fill);
  border-radius: 999px;
  transition: width 120ms linear;
}

.star-carousel__lightbox{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.85);
  z-index: 99999;
  padding: 30px;
}
.star-carousel__lightbox.is-open{ display:flex; }

.star-carousel__lb-img{
  max-width: 96vw;
  max-height: 90vh;
  object-fit: contain;
}

.star-carousel__lb-close{
  position: absolute;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.7);
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.star-carousel__lb-close:hover,
.star-carousel__lb-close:focus,
.star-carousel__lb-close:focus-visible{
  background: #1F3633;
  border-color: #1F3633;
  box-shadow: none;
  outline: none;
}
.star-carousel__lb-close::before,
.star-carousel__lb-close::after{
  content:"";
  position:absolute;
  inset: 50% auto auto 50%;
  width: 18px;
  height: 2px;
  background: rgba(255,255,255,.8);
  transform-origin: center;
}
.star-carousel__lb-close::before{ transform: translate(-50%,-50%) rotate(45deg); }
.star-carousel__lb-close::after{ transform: translate(-50%,-50%) rotate(-45deg); }

@media (max-width: 900px){
  .star-carousel{
    --sc-cols: 3;
    --sc-arrow-space: 0px;
    --sc-arrow-size: 54px;
    --sc-gap: 14px;
  }

  .star-carousel__viewport{
    padding-right: 0;
  }

  .star-carousel__viewport > .star-carousel__next:not(.star-carousel__next--mobile){
    display: none !important;
  }

  .star-carousel__next--desktop{
    display: none !important;
  }

  .star-carousel__next--mobile{
    display: grid !important;
    position: static !important;
    transform: none !important;
    width: 38px;
    height: 38px;
    border-width: 1.5px;
    flex: 0 0 auto;
    right: auto !important;
    top: auto !important;
  }

  .star-carousel__bar{
    padding-right: 0;
  }
}

@media (max-width: 480px){
  .star-carousel{
    --sc-cols: 2;
    --sc-gap: 12px;
    --sc-arrow-space: 0px;
    --sc-arrow-size: 44px;
    --sc-bar-gap: 16px;
    --sc-track-h: 5px;
    --sc-fill-h: 8px;
  }

  .star-carousel__next{
    display: none !important;
  }

  .star-carousel__next--mobile{
    display: grid !important;
    width: 32px;
    height: 32px;
  }

  .star-carousel__chev{
    width: 10px;
    height: 10px;
    border-right-width: 1.5px;
    border-bottom-width: 1.5px;
  }
}

.star-carousel__next--mobile{
  display: none;
}