/* Site-wide header — loaded on every page (see functions.php), unlike
   templates.css which only loads on our own /templates/ page templates. */

/* Green scrolling announcement banner, above the header itself. Same
   continuous-marquee technique as the homepage product carousel: content
   rendered twice back to back, animated translateX(0) -> translateX(-50%)
   on an infinite loop, so the wrap-around is invisible and it never snaps
   back — just runs one direction forever. */
.tpl-topbanner {
	overflow: hidden;
	background: #6d902b;
	color: #ffffff;
}

.tpl-topbanner-track {
	display: flex;
	width: max-content;
	animation: tpl-topbanner-scroll 60s linear infinite;
}

.tpl-topbanner-set {
	display: flex;
	align-items: center;
	white-space: nowrap;
	flex-shrink: 0;
}

.tpl-topbanner-set span {
	padding: 10px 0;
	margin-right: 140px;
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	font-weight: 400;
}

.tpl-topbanner-set img {
	width: 22px;
	height: 22px;
	margin-right: 140px;
	flex-shrink: 0;
}

@keyframes tpl-topbanner-scroll {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

@media (max-width: 767px) {
	.tpl-topbanner-set span {
		font-size: 12px;
		margin-right: 24px;
	}

	.tpl-topbanner-set img {
		width: 16px;
		height: 16px;
		margin-right: 24px;
	}
}

/* Header bar: logo left, everything else (menu, account, cart, search)
   grouped and pushed to the right, search flush against the right edge. */
.tpl-header {
	background: #ffffff;
	border-bottom: 1px solid #e8ece6;
}

.tpl-header-inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: 22px 32px;
	display: flex;
	align-items: center;
	gap: 24px;
}

.tpl-header-branding {
	flex-shrink: 0;
}

.tpl-header-logo {
	display: block;
}

.tpl-header-logo img {
	display: block;
	max-height: 24px;
	width: auto;
}

.tpl-header-right {
	display: flex;
	align-items: center;
	gap: 24px;
	margin-left: auto;
}

/* Desktop: the collapsible wrapper is invisible to layout (display:contents)
   — nav and search become direct flex items of .tpl-header-right again,
   positioned via explicit order so nav stays first and search stays last
   (flush right), exactly like before. Only the mobile breakpoint below
   turns the wrapper into an actual collapsible dropdown panel. */
.tpl-header-collapsible {
	display: contents;
}

.tpl-header-nav {
	order: 1;
}

.tpl-header-icon:nth-of-type(1) {
	order: 2;
}

.tpl-header-icon:nth-of-type(2) {
	order: 3;
}

.tpl-header-collapsible .tpl-search-box {
	order: 4;
}

.tpl-header-toggle {
	order: 5;
}

.tpl-header-menu {
	display: flex;
	align-items: center;
	gap: 40px;
	list-style: none;
	margin: 0 16px 0 0;
	padding: 0;
}

.tpl-header-menu a {
	color: #333333;
	text-decoration: none;
	font-family: 'Roboto', sans-serif;
	font-size: 15px;
	font-weight: 500;
}

.tpl-header-menu a:hover {
	color: #6d902b;
}

.tpl-header-icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	color: #333333;
	font-size: 18px;
	flex-shrink: 0;
}

.tpl-header-icon:hover {
	color: #6d902b;
}

.tpl-header-cart-count {
	position: absolute;
	top: -8px;
	right: -10px;
	min-width: 16px;
	height: 16px;
	padding: 0 3px;
	border-radius: 50%;
	background: #6d902b;
	color: #ffffff;
	font-size: 10px;
	line-height: 16px;
	text-align: center;
}

/* Search box (also reused standalone on the Suche page via the same
   [display_search_form] shortcode) — pill input + circular submit button,
   same visual pattern as the Prography project, in Chicco Fresh's own
   green instead of its orange. */
.tpl-search-box {
	display: flex;
	align-items: center;
	align-self: center;
	background: none;
	border: none;
	box-shadow: none;
	border-radius: 0;
	padding: 0 4px 0 16px;
	margin-bottom: 0;
	flex-shrink: 0;
}

.tpl-search-input {
	appearance: none;
	background: transparent !important;
	border: 1px solid rgba(0, 0, 0, 0.2) !important;
	outline: none;
	box-shadow: none !important;
	width: 140px;
	height: 30px;
	padding: 0 8px !important;
	margin: 0;
	line-height: 30px;
	box-sizing: border-box;
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	color: #333333;
}

.tpl-search-input::placeholder {
	color: #999999;
}

.tpl-search-input::-webkit-search-decoration,
.tpl-search-input::-webkit-search-cancel-button,
.tpl-search-input::-webkit-search-results-button,
.tpl-search-input::-webkit-search-results-decoration {
	appearance: none;
}

.tpl-search-submit {
	appearance: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 0;
	background: #6d902b;
	color: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.2) !important;
	box-shadow: none !important;
	font-size: 12px;
	cursor: pointer;
	flex-shrink: 0;
}

.tpl-search-submit:hover {
	background: #5a7623;
}

/* Mobile: hamburger toggle collapses the nav menu (with the search box
   now inside it) into a dropdown panel — same pattern as the Prography
   project's mobile menu: three bars that morph into an X via
   aria-expanded, panel pinned below the header full-width with a
   slide + fade transition, closed by JS on outside click. */
.tpl-header-toggle {
	appearance: none;
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 32px;
	height: 32px;
	border: none !important;
	border-radius: 0 !important;
	background: none !important;
	padding: 0;
	cursor: pointer;
}

.tpl-header-toggle span {
	display: block;
	width: 22px;
	height: 2px;
	margin: 0 auto;
	background: #333333;
	border-radius: 2px;
	transition: transform 0.25s, opacity 0.25s;
}

.tpl-header-toggle[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.tpl-header-toggle[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}

.tpl-header-toggle[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 1024px) {
	/* Icon row stays on the branding's line, right-aligned: account, cart,
	   then the hamburger toggle rightmost. The collapsible wrapper (nav +
	   search together) switches from invisible (display:contents, desktop)
	   to being the actual dropdown panel, pulled onto its own full-width
	   line below via flex-wrap. */
	.tpl-header-toggle {
		display: flex;
	}

	.tpl-header {
		position: relative;
	}

	.tpl-header-right {
		margin-left: 0;
		flex-basis: 100%;
		flex-wrap: wrap;
		justify-content: flex-end;
	}

	.tpl-header-collapsible {
		display: block;
		flex-basis: 100%;
		order: 10;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 199;
		max-height: 80vh;
		overflow: auto;
		background: #ffffff;
		border-top: 1px solid #e8ece6;
		box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
		padding: 0 32px 24px;
		transform: translateX(100%);
		opacity: 0;
		visibility: hidden;
		transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s;
	}

	.tpl-header-collapsible.tpl-header-nav-open {
		transform: translateX(0);
		opacity: 1;
		visibility: visible;
	}

	.tpl-header-menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.tpl-header-menu li {
		border-bottom: 1px solid #e8ece6;
	}

	.tpl-header-menu a {
		display: block;
		padding: 14px 0;
	}

	/* Search sits below the nav links inside the collapsible panel on
	   mobile — full width there instead of the small header-row pill. */
	.tpl-header-collapsible .tpl-search-box {
		width: 100%;
		padding: 20px 0 0;
	}

	.tpl-header-collapsible .tpl-search-input {
		width: 100%;
		flex: 1;
	}

	.tpl-header-logo img {
		max-height: 18px;
	}
}