.shop-by-theme-section {
  --sbt-accent: 45, 79, 53;
  --sbt-section-bg: 255, 255, 255;
  --sbt-muted: rgb(var(--color-text) / 0.55);
  --sbt-columns: 4.2;
  --sbt-gap: 20px;
  --sbt-progress-height: 3px;
  --sbt-progress: 0.2;

  overflow-x: clip;
  background: rgb(var(--sbt-section-bg)) !important;
  background-color: rgb(var(--sbt-section-bg)) !important;
}

.shop-by-theme-section.page-section::before {
  background: rgb(var(--sbt-section-bg)) !important;
  background-color: rgb(var(--sbt-section-bg)) !important;
}

.shop-by-theme__inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
}

.shop-by-theme__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.shop-by-theme__heading-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.shop-by-theme__heading {
  margin: 0;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
  color: rgb(var(--color-text));
  letter-spacing: -0.01em;
}

.shop-by-theme__heading-accent {
  color: rgb(var(--sbt-accent));
}

.shop-by-theme__subtitle {
  margin: 0;
  max-width: 42rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--sbt-muted);
}

.shop-by-theme__arrows {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 10px;
}

.shop-by-theme__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgb(var(--color-text) / 0.35);
  border-radius: 50%;
  background: #fff;
  color: rgb(var(--color-text));
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.shop-by-theme__arrow:not([disabled]):hover {
  border-color: #111;
  background: #111;
  color: #fff;
}

.shop-by-theme__arrow[disabled] {
  opacity: 0.35;
  cursor: default;
}

/* Full-bleed scroller: cards can exit left into the gutter */
.shop-by-theme__scroller {
  width: 100%;
  overflow: hidden;
}

.shop-by-theme__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--sbt-gap) * (var(--sbt-columns) - 1))) / var(--sbt-columns));
  grid-template-columns: none;
  gap: var(--sbt-gap);
  width: 100%;
  margin: 0;
  padding: 0;
  padding-inline-start: var(--page-gutter);
  padding-inline-end: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: var(--page-gutter);
  scroll-padding-inline-end: 0;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.shop-by-theme__track::-webkit-scrollbar {
  display: none;
}

.shop-by-theme__track > li {
  min-width: 0;
  scroll-snap-align: start;
}

.shop-by-theme__card {
  position: relative;
  display: block;
  overflow: hidden;
  height: 100%;
  border-radius: 12px;
  color: #fff;
  text-decoration: none;
  isolation: isolate;
}

.shop-by-theme__card-media {
  width: 100%;
  height: 100%;
}

.shop-by-theme__card-media .media {
  width: 100%;
  height: 100%;
  background: #ddd !important;
}

.shop-by-theme__card-media :is(img, svg) {
  transition: transform 0.45s ease;
}

.shop-by-theme__card-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgb(0 0 0 / 0.55) 0%,
    rgb(0 0 0 / 0.15) 42%,
    rgb(0 0 0 / 0) 70%
  );
  pointer-events: none;
  transition: background 0.3s ease;
}

.shop-by-theme__card-title {
  position: absolute;
  inset-inline-start: 20px;
  inset-inline-end: 20px;
  inset-block-end: 20px;
  z-index: 2;
  margin: 0;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
  text-shadow: 0 1px 8px rgb(0 0 0 / 0.25);
}

/* Design progress: solid muted track + accent fill */
.shop-by-theme__progress {
  position: relative;
  width: 100%;
  height: var(--sbt-progress-height);
  margin: 0;
  overflow: hidden;
  border-radius: 999px;
  background: transparent;
}

.shop-by-theme__progress-track,
.shop-by-theme__progress-bar {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  display: block;
  border-radius: inherit;
}

.shop-by-theme__progress-track {
  inset-inline-end: 0;
  background-color: rgb(var(--color-text) / 0.18);
}

.shop-by-theme__progress-bar {
  width: calc(var(--sbt-progress, 0.2) * 100%);
  max-width: 100%;
  background-color: rgb(var(--sbt-accent));
  transition: width 0.2s ease-out;
}

@media (pointer: fine) {
  .shop-by-theme__card:hover .shop-by-theme__card-media :is(img, svg) {
    transform: scale(1.05);
  }

  .shop-by-theme__card:hover .shop-by-theme__card-overlay {
    background: linear-gradient(
      to top,
      rgb(0 0 0 / 0.62) 0%,
      rgb(0 0 0 / 0.22) 45%,
      rgb(0 0 0 / 0.08) 100%
    );
  }
}

@media (max-width: 1199px) {
  .shop-by-theme-section {
    --sbt-columns: 3.2;
  }
}

@media (max-width: 959px) {
  .shop-by-theme-section {
    --sbt-gap: 12px;
  }

  /* Design: show ~1.4 cards with next card peeking (override inline columns) */
  .shop-by-theme__track {
    --sbt-columns: 1.4;
  }

  .shop-by-theme__inner {
    gap: 24px;
  }

  /* Mobile design: title → subtitle → arrows (own row, right-aligned) */
  .shop-by-theme__header {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .shop-by-theme__heading-group {
    flex: none;
    width: 100%;
  }

  .shop-by-theme__arrows {
    align-self: flex-end;
  }

  .shop-by-theme__card-title {
    inset-inline-start: 14px;
    inset-inline-end: 14px;
    inset-block-end: 14px;
    font-size: 0.9375rem;
  }

  .shop-by-theme__arrow {
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 549px) {
  .shop-by-theme__heading {
    font-size: 1.5rem;
  }

  .shop-by-theme__subtitle {
    font-size: 0.875rem;
  }
}