/* Collection palettes are shared by the cards and their product pages. */
:root {
  --progress-botanical: linear-gradient(90deg, #d7fb72 0%, #b4eb91 48%, #75d8bd 100%);
  --progress-iris: linear-gradient(90deg, #b6a0ec 0%, #d4afe5 50%, #efc2d0 100%);
  --progress-sand: linear-gradient(90deg, #eed8a2 0%, #e9bd91 50%, #e9a394 100%);
  --progress-code: linear-gradient(90deg, #95b9f0 0%, #8bcedd 50%, #7de0c4 100%);
}

html[data-theme=light] {
  --progress-botanical: linear-gradient(90deg, #bfe963 0%, #94d58c 48%, #55ba9f 100%);
  --progress-iris: linear-gradient(90deg, #a68bd9 0%, #c497cd 50%, #e5abba 100%);
  --progress-sand: linear-gradient(90deg, #dfc58c 0%, #daa879 50%, #db9484 100%);
  --progress-code: linear-gradient(90deg, #7ba5df 0%, #70bacc 50%, #58c9ab 100%);
}

.progress-track > i {
  background: var(--collection-progress, var(--progress-botanical));
  box-shadow: inset 0 1px 0 #ffffff25;
}

.collection-card a[href="#city"], #page-city {
  --collection-progress: var(--progress-iris);
}
.collection-card a[href="#lines"], .collection-card a[href="#backpack"], #page-lines {
  --collection-progress: var(--progress-sand);
}
.collection-card a[href="#common"], #page-common {
  --collection-progress: var(--progress-code);
}
.card-meter .progress-track {
  height: 5px;
  background: #ffffff30;
}