.eco-collection-circles {
  width: 100%;
  box-sizing: border-box;
  margin-top: var(--eco-collection-margin-top, 0);
  margin-bottom: var(--eco-collection-margin-bottom, 0);
  padding: var(--eco-collection-padding-top, 20px) var(--eco-collection-padding-x, 24px) var(--eco-collection-padding-bottom, 18px);
  border: var(--eco-collection-outer-border-width, 1px) solid var(--eco-collection-outer-border-color, #1f3b57);
  border-radius: var(--eco-collection-outer-radius, 0);
  background: var(--eco-collection-bg, #fff);
  content-visibility: auto;
  contain-intrinsic-size: 190px;
}

.eco-collection-circles--boxed {
  max-width: var(--eco-collection-max-width, 1200px);
}

.eco-collection-circles--wide .eco-collection-circles__inner,
.eco-collection-circles--boxed .eco-collection-circles__inner,
.eco-collection-circles--full .eco-collection-circles__inner {
  max-width: var(--eco-collection-max-width, 1200px);
}

.eco-collection-circles.eco-align-left,
.eco-collection-circles.eco-align-left .eco-collection-circles__inner {
  margin-left: 0;
  margin-right: auto;
}

.eco-collection-circles.eco-align-center,
.eco-collection-circles.eco-align-center .eco-collection-circles__inner {
  margin-left: auto;
  margin-right: auto;
}

.eco-collection-circles.eco-align-right,
.eco-collection-circles.eco-align-right .eco-collection-circles__inner {
  margin-left: auto;
  margin-right: 0;
}

.eco-collection-circles__inner {
  width: 100%;
  contain: layout paint;
}

.eco-collection-circles__heading {
  margin: 0 0 18px;
  color: #1f2937;
  font-family: inherit;
  font-size: var(--eco-collection-heading-size, 18px);
  line-height: 1.25;
  font-weight: var(--eco-collection-heading-weight, 500);
}

.eco-text-left {
  text-align: left;
}

.eco-text-center {
  text-align: center;
}

.eco-text-right {
  text-align: right;
}

.eco-collection-circles__row {
  display: flex;
  align-items: flex-start;
  gap: var(--eco-collection-gap, 26px);
  --eco-collection-item-min: var(--eco-collection-image-size, 84px);
  --eco-collection-item-size: max(
    var(--eco-collection-item-min),
    calc((100% - ((var(--eco-collection-items-per-row, 9) - 1) * var(--eco-collection-gap, 26px))) / var(--eco-collection-items-per-row, 9))
  );
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.eco-collection-circles__row::-webkit-scrollbar {
  display: none;
}

.eco-items-left {
  justify-content: flex-start;
}

.eco-items-center {
  justify-content: center;
}

.eco-items-right {
  justify-content: flex-end;
}

.eco-collection-circles__item {
  width: var(--eco-collection-item-size);
  flex: 0 0 var(--eco-collection-item-size);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: inherit;
  text-align: center;
  text-decoration: none;
  scroll-snap-align: start;
}

.eco-collection-circles__image {
  width: var(--eco-collection-image-size, 84px);
  height: var(--eco-collection-image-size, 84px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: var(--eco-collection-border-width, 1px) solid var(--eco-collection-border-color, #e8e2d4);
  border-radius: 999px;
  background: radial-gradient(circle at 30% 20%, #fff 0, #f8f3e7 58%, #ede4d2 100%);
  color: #9a7b4f;
  font-size: calc(var(--eco-collection-image-size, 84px) * 0.34);
  font-weight: 900;
  box-shadow: 0 4px 12px rgba(17, 24, 39, 0.07);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.eco-collection-circles__item:hover .eco-collection-circles__image {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(17, 24, 39, 0.1);
}

.eco-collection-circles__image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.eco-collection-circles__label {
  width: max-content;
  max-width: calc(var(--eco-collection-image-size, 84px) + 20px);
  color: var(--eco-collection-label-color, #111827);
  font-size: var(--eco-collection-label-size, 11px);
  line-height: 1.15;
  font-weight: var(--eco-collection-label-weight, 800);
  word-break: normal;
}

.eco-collection-circles__nav {
  display: none;
}

.eco-collection-circles__nav-button {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(31, 59, 87, 0.42);
  box-shadow: none;
  backdrop-filter: none;
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
  transition: opacity 0.18s ease, transform 0.18s ease, color 0.18s ease;
}

.eco-collection-circles__nav-button:active {
  transform: scale(0.96);
}

.eco-collection-editor-item {
  margin: 0 0 16px;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
}

.eco-collection-editor-item .block-editor-url-input input {
  width: 100%;
}

@media (max-width: 767px) {
  .eco-collection-circles {
    position: relative;
    width: 100%;
    max-width: none;
    padding-left: clamp(6px, 2.5vw, 10px);
    padding-right: clamp(6px, 2.5vw, 10px);
  }

  .eco-collection-circles--full,
  .eco-collection-circles--wide {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  .eco-collection-circles--full .eco-collection-circles__inner,
  .eco-collection-circles--wide .eco-collection-circles__inner {
    max-width: none;
  }

  .eco-collection-circles__inner {
    position: relative;
  }

  .eco-collection-circles__heading {
    font-size: min(var(--eco-collection-heading-size, 18px), 18px);
  }

  .eco-collection-circles__nav {
    position: absolute;
    top: calc(var(--eco-collection-heading-size, 18px) * 1.25 + 18px + (var(--eco-collection-image-size, 84px) / 2) - 17px);
    left: 0;
    right: 0;
    z-index: 3;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
  }

  .eco-collection-circles__nav-button {
    pointer-events: auto;
    opacity: 0.62;
  }

  .eco-collection-circles__nav-button:hover,
  .eco-collection-circles__nav-button:focus-visible {
    opacity: 0.9;
    color: rgba(31, 59, 87, 0.72);
    background: transparent;
  }

  .eco-collection-circles__row {
    width: 100%;
    min-width: 0;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 34px;
    --eco-collection-item-size: max(
      var(--eco-collection-image-size, 84px),
      calc((100% - ((min(var(--eco-collection-items-per-row, 9), 4) - 1) * var(--eco-collection-gap, 26px))) / min(var(--eco-collection-items-per-row, 9), 4))
    );
  }
}