theme-st-product-carousel {
  display: block;
}

theme-st-product-carousel[hidden] {
  display: none;
}

/* Visually hide the fallback shell while the recommendations fetch is pending,
   without display:none — the block still needs a layout box for its
   IntersectionObserver-based lazy trigger to detect visibility. */
theme-st-product-carousel.st-product-carousel--pending {
  visibility: hidden;
}

.st-product-carousel {
  background-color: var(--st-product-carousel-bg, #000);
  --st-product-card-aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.st-product-carousel__inner--full {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding-inline: 0;
  margin-inline: 0;
}

.st-product-carousel__track {
  --grid-horizontal-spacing: var(--st-product-carousel-gap, 16px);
  --grid-vertical-spacing: var(--st-product-carousel-gap, 16px);
  min-width: 0;
}

.st-product-carousel__carousel {
  display: block;
  max-width: 100%;
  min-width: 0;
}

.st-product-carousel__item {
  background-color: var(--st-product-carousel-card-bg, #fff);
  min-width: 0;
}

.st-product-carousel__item .block-product-card {
  background-color: transparent;
  box-shadow: none;
}

.st-product-carousel__item .block-product-card__image-wrapper {
  background-color: transparent;
}

.st-product-carousel__item .block-product-image__image-wrapper {
  --aspect-ratio: var(--st-product-card-aspect-ratio) !important;
}

.st-product-carousel__button {
  position: absolute;
  inset-block-start: 36%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--st-product-carousel-arrow-size, 48px);
  height: var(--st-product-carousel-arrow-size, 48px);
  border-radius: 999px;
  border: none;
  background-color: transparent;
  color: #000;
  transform: translate(0, -40%);
}

.st-product-carousel__button--previous {
  inset-inline-start: 0;
}

.st-product-carousel__button--next {
  inset-inline-end: 0;
}

.st-product-carousel__button--next svg {
  transform: rotate(180deg);
}

.st-product-carousel__button svg {
  color: #000;
  stroke: currentColor;
}

.st-product-carousel__button img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

@media (max-width: 959px) {
  .st-product-carousel__inner--full {
    padding-left: var(--page-padding);
    padding-right: 0;
  }

  .st-product-carousel__inner--full.st-product-carousel__inner--mobile-full {
    padding-left: 0;
    padding-right: 0;
  }

  .st-product-carousel__inner--mobile-full.page-width {
    max-width: 100%;
    padding-inline: 0;
    margin-inline: 0;
  }

  .st-product-carousel__inner {
    max-width: 100%;
    overflow-x: hidden;
  }

  .st-product-carousel__carousel {
    overflow-x: hidden;
  }

  .st-product-carousel__track {
    width: 100%;
    max-width: 100%;
  }

  .st-product-carousel__button {
    width: var(--st-product-carousel-arrow-size-mobile, 40px);
    height: var(--st-product-carousel-arrow-size-mobile, 40px);
  }
}

@media (min-width: 1280px) {
  .st-product-carousel__inner--full .st-product-carousel__button--previous {
    inset-inline-start: -5vw;
  }
}

@media (min-width: 1536px) {
  .st-product-carousel__inner--full .st-product-carousel__button--previous {
    inset-inline-start: -3vw;
  }
  .st-product-carousel__button--previous {
    inset-inline-start: -5%;
  }
  
  .st-product-carousel__button--next {
    inset-inline-end: 0%;
  }
}

@media (min-width: 2560px) {
  .st-product-carousel__inner--full .st-product-carousel__button--previous {
    inset-inline-start: -1%;
  }
}

.st-product-carousel__dots {
  display: flex;
  justify-content: center;
  margin-top: 16px;
  padding-bottom: 8px;
}

/* When single-column: add page padding to the outer wrapper */
@media (max-width: 959px) {
  .st-product-carousel:has(.st-product-carousel__inner--mobile-full) {
    padding-inline: var(--page-padding);
  }
}

/* Single-column dots: tighter spacing below card content */
@media (max-width: 959px) {
  .st-product-carousel__inner--mobile-full .st-product-carousel__dots {
    margin-top: 12px;
    padding-bottom: 4px;
  }
}

/* Capsule self-centers when used as a block child (max-width: 75% needs auto margins) */
.st-product-carousel .theme-carousel-indicator__capsule {
  margin-inline: auto;
}

/* Indicator color overrides — dark colors regardless of inherited color scheme */
.st-product-carousel .theme-carousel-indicator__dot-item,
.st-product-carousel .theme-carousel-indicator__capsule-item {
  background-color: rgba(0, 0, 0, 0.2);
}

.st-product-carousel .theme-carousel-indicator__dot-item.is-active,
.st-product-carousel .theme-carousel-indicator__capsule-item.is-active {
  background-color: rgb(0, 0, 0);
}

.st-product-carousel .theme-carousel-indicator__progress::before {
  background-color: rgb(0, 0, 0);
}

.st-product-carousel .theme-carousel-indicator__progress::after {
  background-color: rgba(0, 0, 0, 0.2);
}

.st-product-carousel .block-product-title span {
  font-size: 21px;
  font-weight: 500;
}

.st-product-carousel .body-font-bold {
  font-size: 18px;
  font-weight: 300 !important;
}

body[data-page-type] .st-product-carousel .product-price__item {
  font-weight: 300 !important;
}

.st-product-carousel .plugin-color-board {
  display: none;
}

@media (max-width: 959px) {
  .block-group:has(> .st-product-carousel) > .block-heading {
    font-size: 40px;
    padding-inline: var(--page-padding);
  }
}

@media (max-width: 375px) {
  .block-group:has(> .st-product-carousel) > .block-heading {
    font-size: 32px;
  }
}

@media (min-width: 960px) {
  .st-product-carousel .product-price__item {
    font-size: 21px;
  }

  .st-product-carousel .product-price__item {
    font-size: 20px;
  }
}