/* ==========================================================================
   ST Custom Collection List
   Mobile-first: base = mobile, @media (min-width: 960px) = desktop
   ========================================================================== */

.st-custom-collection-list {
  background-color: rgb(var(--color-background));
}

/* Editorial collection titles always read in caps, regardless of what's
   typed into the heading block's text setting. */
.st-custom-collection-list .block-heading {
  text-transform: uppercase;
}

/* ── Carousel track ─────────────────────────────────────────────────────── */

.st-custom-collection-list__carousel {
  position: relative;
  width: 100%;
}

.st-custom-collection-list__track {
  --grid-horizontal-spacing: var(--st-ccl-gap, 12px);
  --grid-vertical-spacing: var(--st-ccl-gap, 12px);
  gap: 25px !important;
  width: calc(100% + var(--page-padding) * 2);
  padding-inline: var(--page-padding);
  margin-inline: calc(-1 * var(--page-padding));
  scroll-padding-inline: var(--page-padding);
}

/* ── Card ───────────────────────────────────────────────────────────────── */

.st-ccl-card {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  color: var(--st-ccl-text-color, #fff);
  text-decoration: none;
  border-radius: var(--st-ccl-radius, 0px);
}

.st-ccl-card__image-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: var(--st-ccl-aspect-ratio, 4 / 3);
  /* Below desktop, a single near-full-width card (mobile_columns ~1) paired with
     aspect-ratio scales height linearly with viewport width — fine on a phone,
     but on a wider "mobile" viewport (tablets, ~700-959px) the card grows far
     taller than intended. Cap it here; desktop lifts the cap since columns
     already keep each card's width — and therefore height — reasonable. */
  max-height: 360px;
  overflow: hidden;
  background-color: rgb(243 243 243 / 100%);
}

.st-ccl-card__image-wrapper img,
.st-ccl-card__image-wrapper svg {
  width: 100%;
  height: 100%;
  object-fit: var(--st-ccl-fit, cover);
}

.st-ccl-card__overlay {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 14px;
  color: var(--st-ccl-text-color, #fff);
  text-align: center;
}

[data-overlay-style="gradient"] .st-ccl-card__overlay {
  padding-block-start: 40px;
  background: linear-gradient(
    to top,
    rgba(var(--st-ccl-overlay-color, 0, 0, 0), 0.7) 0%,
    rgba(var(--st-ccl-overlay-color, 0, 0, 0), 0) 100%
  );
}

[data-overlay-style="solid"] .st-ccl-card__overlay {
  background-color: rgba(var(--st-ccl-overlay-color, 0, 0, 0), 0.45);
}

.st-ccl-card__title {
  display: block;
  font-family: var(--sort-body-font);
  font-size: 40px;
  font-weight: 300;
  line-height: 1.2;
}

.st-ccl-card__description {
  display: block;
  font-family: var(--sort-body-font);
  font-size: 20px;
  font-weight: 300;
  line-height: 1.35;
  opacity: 0.95;
}

.st-ccl-card__arrow {
  margin-inline-start: 4px;
  font-size: 15px;
  line-height: 1;
}

/* ── Arrows ─────────────────────────────────────────────────────────────── */

.st-custom-collection-list__button {
  position: absolute;
  inset-block-start: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: rgb(0 0 0 / 100%);
  background-color: rgb(255 255 255 / 100%);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgb(0 0 0 / 15%);
}

.st-custom-collection-list__button:disabled {
  display: none;
}

.st-custom-collection-list__button--previous {
  inset-inline-start: 0;
  transform: translate(-50%, -50%);
}

.st-custom-collection-list__button--previous svg {
  transform: rotate(180deg);
}

.st-custom-collection-list__button--next {
  inset-inline-end: 0;
  transform: translate(50%, -50%);
}

/* ── Desktop (≥ 960px) ───────────────────────────────────────────────────── */

@media (min-width: 960px) {
  .st-custom-collection-list__track {
    width: 100%;
    padding-inline: 0;
    margin-inline: 0;
  }

  .st-ccl-card__image-wrapper {
    max-height: none;
  }

  .st-ccl-card__overlay {
    padding: 22px 20px;
  }

  [data-overlay-style="gradient"] .st-ccl-card__overlay {
    padding-block-start: 56px;
  }

  .st-custom-collection-list__button {
    width: 48px;
    height: 48px;
  }
}