.zk-archive-colors { margin: 1rem 0 1.35rem; padding: .9rem 1rem; border: 1px solid #efdfd7; border-radius: 16px; background: #fffaf7; }
.zk-archive-colors__heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem .8rem; margin-bottom: .7rem; }
.zk-archive-colors__heading h2 { margin: 0; font-size: .95rem; }
.zk-archive-colors__heading > span { font-size: .73rem; color: #876b61; }
.zk-archive-colors__list { display: flex; gap: .45rem; overflow-x: auto; margin: 0; padding: .2rem .2rem .45rem; list-style: none; scrollbar-width: thin; }
.zk-archive-colors__list > li { flex: 0 0 auto; margin: 0; padding: 0; }
.zk-archive-colors .zk-colorway { text-decoration: none; background: #fff; white-space: nowrap; font-size: .74rem; padding: .45rem .65rem; }
.zk-archive-colors .zk-colorway:hover { border-color: #c34c68; color: #412b25; background: #fff2f3; }
.zk-archive-colors .zk-colorway.is-active { border-color: #be4563; background: #fbe9ed; box-shadow: inset 0 0 0 1px #be4563; }
.zk-archive-colors__count { color: #876b61; font-size: .65rem; font-weight: 400; }
@media (min-width: 600px) { .zk-archive-colors__list { flex-wrap: wrap; overflow: visible; padding-bottom: .2rem; } }