/**
 * Header: Shop Search Field
 *
 * The always-visible product search a directory or storefront bar carries.
 * The resting-glyph layout draws its icon inside the field, so the icon is
 * positioned against the form the layout already makes a containing block.
 * Expanding width and an italic placeholder are options on the block; both
 * name the text field explicitly, because the form also carries the hidden
 * `post_type` input that restricts results to products.
 *
 * The header feature-box pair below shares the same bars: a small icon +
 * label group sitting in a header row, sized down to bar scale.
 *
 * Loaded only where `.header-shop-search` is rendered.
 */

.header-shop-search .position-relative i {
	position: absolute;
	top: 50%;
	left: auto;
	right: 12px;
	transform: translateY(-50%);
}

.header-shop-search .search-expand input[type="text"] {
	max-width: 210px;
	transition: max-width .3s ease;
}

.header-shop-search .search-expand input[type="text"]:focus {
	max-width: 320px;
}

.header-shop-search .search-italic input[type="text"]::-moz-placeholder {
	font-style: italic;
	opacity: .7;
}

.header-shop-search .search-italic input[type="text"]::-webkit-input-placeholder {
	font-style: italic;
	opacity: .7;
}

.header-row .fbox-sm .fbox-icon {
	width: 1.25rem;
	height: 1.25rem;
}

.header-row .fbox-sm .fbox-icon i {
	position: relative;
	top: 1px;
	font-size: 1.25rem;
}

/* The bars that carry this search draw their misc icons one size up from the
   theme default once the row is laid out horizontally, and drop the divider
   the top-links strip normally puts between its items. */
@media (min-width: 992px) {
	.header-misc-icon > a {
		width: 1.5rem;
		height: 1.5rem;
		font-size: 1.5rem;
		line-height: 1.5rem;
	}

	.top-links-item {
		border-left: 0;
	}
}