:root {
	--header-height: 116px;
	--header-offset: 0px;
	--catalog-height: 0px;
	scroll-padding-top: calc(var(--header-height) + var(--header-offset) + 12px);
}

html:has(body.admin-bar) { --header-offset: 32px; }
@media (max-width: 782px) {
	html:has(body.admin-bar) { --header-offset: 46px; }
}

.topbar {
	position: sticky;
	top: var(--header-offset);
	z-index: 50;
	grid-template-columns: minmax(0, 440px) minmax(300px, 1fr) auto;
	align-items: start;
	gap: 14px;
	min-height: 86px;
	padding-top: 12px;
	padding-bottom: 12px;
}

.admin-bar .topbar {
	top: var(--header-offset, 32px);
}

.catalog-toolbar {
	position: sticky;
	top: calc(var(--header-height) + var(--header-offset));
	z-index: 40;
}

.admin-bar .catalog-toolbar {
	top: calc(var(--header-height) + var(--header-offset));
}

#product-list { scroll-margin-top: calc(var(--catalog-height) + 12px); }

.header-search {
	width: 100%;
	min-width: 0;
	justify-self: center;
}

.search-keywords {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	padding-top: 7px;
	font-size: 12px;
	line-height: 1.5;
}

.search-keywords > span { flex: 0 0 auto; color: var(--muted); }
.search-keyword-links { display: flex; align-items: center; min-width: 0; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.search-keyword-links a { flex: 0 0 auto; padding: 4px 10px; color: var(--text); white-space: nowrap; }
.search-keyword-links a + a { border-left: 1px solid var(--line); }
.search-keyword-links a:hover, .search-keyword-links a[aria-current] { color: var(--mint); text-decoration: underline; text-underline-offset: 3px; }
.search-keyword-links a:focus-visible { outline: 2px solid var(--mint); outline-offset: -2px; }

.header-service-points {
	align-self: start;
	min-height: 58px;
	border-color: #d8d4ce;
	border-radius: 7px;
	background: #f7f4ef;
}

.service-point {
	gap: 6px;
	min-height: 58px;
	padding: 7px 6px;
	border-right-color: #ded9d1;
}

.service-point-icon {
	flex-basis: 30px;
	width: 30px;
	height: 30px;
	border-color: #f36b36;
	color: #e45c2b;
	font-size: 10px;
}

.service-point-copy strong {
	color: #252525;
	font-size: 12px;
}

.service-point-copy small {
	color: #77736d;
	font-size: 10px;
}

.search-box {
	margin: 0;
	min-height: 58px;
	border: 2px solid #f06a35;
	border-radius: 8px;
	background: #fff;
}

.search-box:focus-within {
	border-color: #f06a35;
	box-shadow: 0 0 0 2px rgba(240, 106, 53, .18);
}

.search-category-wrap {
	border-right-color: #e6e1da;
}

.search-category {
	width: 112px;
	font-size: 14px;
}

.search-box input[type="search"] {
	padding-right: 13px;
	padding-left: 15px;
	color: #242424;
	font-size: 17px;
}

.search-box input::placeholder {
	color: #8e8a85;
}

.search-box button {
	min-width: 112px;
	min-height: 46px;
	margin-right: 4px;
	border-radius: 7px;
	color: #fff;
	background: #f06a35;
	font-size: 17px;
}

.top-actions {
	min-height: 58px;
	align-self: start;
	justify-content: flex-end;
	gap: 7px;
}

.locale-button,
.wishlist-button {
	min-height: 46px;
	padding: 5px 9px;
	border-color: #3d3d3d;
	background: #1a1a1a;
}

.wishlist-icon {
	font-size: 28px;
}

.quiet-button,
.account-button {
	min-height: 46px;
	padding-right: 8px;
	padding-left: 8px;
	font-size: 14px;
}

.bag-button {
	min-height: 46px;
	padding-right: 16px;
	padding-left: 16px;
	border-radius: 7px;
	font-size: 14px;
}

@media (min-width: 1440px) and (max-width: 1799px) {
	.topbar {
		grid-template-columns: 300px minmax(280px, 1fr) auto;
	}
	.service-point-icon { display: none; }
	.service-point-copy { display: grid; }
	.service-point-copy strong { font-size: 12px; }
}

@media (max-width: 1530px) {
	.service-point {
		gap: 5px;
		padding-right: 6px;
		padding-left: 6px;
	}

	.service-point-icon {
		flex-basis: 30px;
		width: 30px;
		height: 30px;
		font-size: 9px;
	}

	.service-point-copy strong {
		font-size: 11px;
	}

	.service-point-copy small {
		font-size: 9px;
	}

	.search-category {
		width: 94px;
	}

	.search-box input[type="search"] {
		font-size: 14px;
	}

	.search-box button {
		min-width: 88px;
		font-size: 14px;
	}

	.quiet-button,
	.account-button {
		font-size: 12px;
	}
}

@media (max-width: 1439px) {
	.topbar {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.header-service-points {
		display: none;
	}
	.header-search { max-width: none; }
}

@media (max-width: 1050px) {
	.wishlist-button {
		display: none;
	}

	.top-actions {
		gap: 4px;
	}
}

@media (max-width: 740px) {
	:root { --header-height: 154px; }
	.topbar {
		top: var(--header-offset);
		grid-template-columns: minmax(0, 1fr) auto;
		min-height: 112px;
		padding-top: 9px;
		padding-bottom: 9px;
	}

	.admin-bar .topbar {
		top: var(--header-offset, 46px);
	}

	.catalog-toolbar {
		top: calc(var(--header-height) + var(--header-offset));
	}

	.admin-bar .catalog-toolbar {
		top: calc(var(--header-height) + var(--header-offset));
	}
	.header-search { grid-column: 1 / -1; grid-row: 2; }
	.top-actions { min-height: 40px; align-self: center; }
	.mobile-brand { align-self: center; }
	.search-keywords { gap: 4px; padding-top: 4px; font-size: 11px; }
	.search-keyword-links a { padding: 6px 9px; }

	.search-box {
		min-height: 48px;
	}

	.search-category {
		width: 72px;
		padding-right: 22px;
		padding-left: 8px;
		font-size: 11px;
	}

	.search-box input[type="search"] {
		padding-right: 8px;
		padding-left: 9px;
		font-size: 12px;
	}

	.search-box button {
		min-width: 66px;
		min-height: 38px;
		font-size: 12px;
	}

	.quiet-button,
	.account-button {
		min-height: 40px;
		padding-right: 5px;
		padding-left: 5px;
		font-size: 11px;
	}

	.bag-button {
		min-height: 40px;
		padding-right: 9px;
		padding-left: 9px;
		font-size: 11px;
	}
}