/* Le-Biko — Site header: logo, cart, search. */

/* ==========================================================================
   Header
   ========================================================================== */
.lb-header {
	position: sticky; top: 0; z-index: 40;
	background: rgba(255, 255, 255, .97);
	border-bottom: 1px solid var(--lb-line);
}
.lb-header__bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 12px;
	min-height: 64px;
	padding-block: 8px;
}
.lb-header__tools { display: flex; align-items: center; gap: 4px; min-width: 0; }
.lb-header__logo { justify-self: center; }
.lb-header__logo img { width: auto; height: 50px; }
.lb-header__menu { justify-self: end; }

.lb-iconbtn {
	position: relative;
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-width: 40px; height: 40px; padding: 0 6px;
	background: none; border: 0; cursor: pointer; text-decoration: none;
	color: var(--lb-ink);
}
.lb-icon { width: 22px; height: 22px; flex: none; }
.lb-menu-toggle__label { display: none; font-size: 14px; }

.lb-cart-count {
	position: absolute; top: 3px; inset-inline-end: 0;
	min-width: 17px; height: 17px; padding: 0 4px;
	border-radius: 9px;
	background: var(--lb-ink); color: #fff;
	font-size: 10.5px; font-weight: 500; line-height: 17px; text-align: center;
	transition: transform .25s var(--lb-ease);
}
.lb-cart-count[data-count="0"] { display: none; }
.lb-cart-count.is-bumped { transform: scale(1.35); }

.lb-header__menu { display: flex; align-items: center; gap: 2px; }
.lb-search { position: relative; padding-block: 0 12px; }
.lb-search[hidden] { display: none; }
.lb-search input {
	width: 100%; height: 44px;
	padding-inline: 16px 44px;
	border: 1px solid var(--lb-line); border-radius: var(--lb-radius);
	background: #fff;
	font: inherit; font-size: 15px; font-weight: 300; color: var(--lb-ink);
}
.lb-search input::placeholder { color: var(--lb-muted); }
.lb-search input:focus { outline: none; border-color: var(--lb-ink); box-shadow: 0 0 0 1px var(--lb-ink); }
.lb-search__btn {
	position: absolute; inset-inline-end: calc(var(--lb-gutter) + 6px); top: 22px; transform: translateY(-50%);
	width: 34px; height: 34px; display: grid; place-items: center;
	background: none; border: 0; cursor: pointer; color: var(--lb-ink);
}
.lb-search__btn .lb-icon { width: 19px; height: 19px; }