/* The mark, shown at the sizes it is used. */
.mark-show { margin: clamp(36px, 5vw, 56px) auto 0; max-width: 640px; text-align: left; }
.tab-mock {
  display: flex; align-items: center; gap: 10px; max-width: 420px; padding: 11px 16px;
  background: var(--surface); border: 1px solid var(--divider); border-bottom-color: var(--a700);
  font: 400 12.5px/1 var(--body); color: var(--text-2); box-shadow: inset 0 1px 0 rgba(244, 238, 224, .08);
}
.tab-mock img { flex: none; }
.tab-mock span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sizes { list-style: none; margin: 22px 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 28px 34px; align-items: flex-end; }
.sizes li { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.sizes img { background: var(--surface); box-shadow: 4px 4px 10px rgba(0, 0, 0, .55), -3px -3px 8px rgba(227, 220, 203, .05); image-rendering: auto; }
@media (max-width: 600px) { .tab-mock { max-width: 100%; } }