/*
 * The row above the catalogue: search on the left, sorting on the right.
 *
 * The reference puts both on one line with the space between them - search where reading starts,
 * sorting where the eye ends up. On a phone the field takes the width and the sort drops under it,
 * still to the right.
 */

.akem-shop-tools {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--akem-space-3);
	flex-wrap: wrap;
	margin-block-end: var(--akem-space-4);
}

.akem-shop-tools .akem-catalog-search,
.akem-shop-tools .akem-sort {
	margin-block-end: 0;
}

.akem-shop-tools .akem-sort {
	margin-inline-start: auto;
}

.akem-catalog-search {
	display: flex;
	align-items: center;
	gap: var(--akem-space-2);
	margin-block-end: var(--akem-space-4);
}

/* The field is the site's field; this file only says how wide it sits in the row. */
.akem-catalog-search__field {
	--akem-control-h: 44px;
	flex: 0 1 340px;
	font-size: var(--akem-size-small);
}

.akem-catalog-search__submit {
	--akem-control-h: 44px;
}

@media (max-width: 781px) {
	/* The form is a flex item of the row and was sizing to its content, so a field told to grow had
	   nothing to grow into and sat at two thirds of the screen with the sort line empty beside it.
	   The form takes the row, the field takes the form, and sorting drops underneath. */
	.akem-shop-tools .akem-catalog-search {
		flex: 1 1 100%;
	}

	.akem-catalog-search__field {
		flex: 1 1 auto;
	}
}