.storefront-skip-link {
  background: #ffdea2;
  color: #261900;
  left: 1rem;
  padding: 0.75rem 1rem;
  position: fixed;
  top: -4rem;
  z-index: 100;
}

.storefront-skip-link:focus { top: 1rem; }

.sku-tag {
  background-color: #9c3b2e;
  color: #fff;
  transform: rotate(-1.5deg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.pill-available, .pill-on-memo, .pill-sold {
  border-radius: 9999px;
  display: inline-flex;
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1rem;
  padding: 0.35rem 0.75rem;
  text-transform: uppercase;
}

.pill-available { background: #254b45; color: #c7eee1; }
.pill-on-memo { background: #5a4316; color: #ffdea2; }
.pill-sold { background: #39342e; color: #d1c5b4; }
.dot-active { background-color: #8a9a6b; }
.dot-depleted { background-color: #d99e32; }
.dot-closed { background-color: #9c3b2e; }
.lineage-line { background: #4d4639; }
.thumb-active { border-color: #c8a45c; }

@media (prefers-reduced-motion: no-preference) {
  .storefront-card { transition: border-color 500ms, box-shadow 500ms, opacity 500ms, transform 500ms; }
  .storefront-card-image { transition: opacity 500ms, transform 500ms; }
  .storefront-text-hover { transition: color 180ms; }
  .storefront-button { transition: background-color 180ms, color 180ms; }
}