/**
 * Site header (GWT_Header): logo / search / cart bar, the theme's main menu
 * below it (wide screens keep the theme + Customizer menu styling; 1000px and
 * narrower get a centred burger menu), optional sticky mode.
 *
 * Selectors are prefixed with `body.gwt-has-header` / `#site-navigation`
 * where they have to beat the Customizer CSS, which prints after this file.
 */

/* -------------------------------------------------------------------------
 * Things the new header replaces
 * ---------------------------------------------------------------------- */

body.gwt-has-header #site-navigation .wpmenucartli,
body.gwt-has-header .top-header .cart-contents,
body.gwt-has-header .top-header .widget_shopping_cart {
	display: none !important;
}

/* Separate rule: browsers without :has() would drop the whole list above. */
body.gwt-has-header .top-header .site-header-cart > li:has(> .cart-contents) {
	display: none !important;
}

/* -------------------------------------------------------------------------
 * Header bar
 * ---------------------------------------------------------------------- */

.gwt-header {
	position: relative;
	z-index: 1000;
}

.gwt-header__inner {
	display: flow-root; /* contains the theme's floated nav */
	background: #ffffff;
}

@media (max-width: 1232px) {
	body.gwt-has-header .gwt-header__bar-wrap .store-container {
		padding: 0 16px;
	}
}

.gwt-header__bar {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	grid-template-areas: "logo search cart";
	align-items: center;
	gap: 16px 40px;
	padding: 20px 0;
	transition: padding 0.2s ease;
}

.gwt-header__logo {
	grid-area: logo;
	line-height: 0;
}

.gwt-header__logo a {
	display: inline-block;
}

body.gwt-has-header .gwt-header__logo img {
	display: block;
	width: auto;
	height: 46px;
	max-width: none;
	transition: height 0.2s ease;
}

.gwt-header__site-name {
	font-family: 'Clash Display', 'Open Sans', sans-serif;
	font-size: 28px;
	font-weight: 600;
	line-height: 1.2;
	color: #7D1512;
	text-decoration: none;
}

/* Search ----------------------------------------------------------------- */

.gwt-search {
	grid-area: search;
	position: relative;
	margin: 0;
}

body.gwt-has-header .gwt-search__input {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	width: 100%;
	height: 52px;
	margin: 0;
	padding: 0 18px 0 50px;
	border: 1px solid #DDD5C6;
	border-radius: 10px;
	background: #ffffff;
	box-shadow: none;
	color: #2B2723;
	font-size: 16px;
	line-height: 50px;
	transition: border-color 0.15s ease, height 0.2s ease;
}

body.gwt-has-header .gwt-search__input:focus {
	border-color: #2B2723;
	outline: none;
}

.gwt-search__input::placeholder {
	color: #8A8178;
	opacity: 1;
}

.gwt-search__input::-webkit-search-cancel-button {
	cursor: pointer;
}

body.gwt-has-header .gwt-search__submit {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 4px;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	box-shadow: none;
	color: #6F665D;
	cursor: pointer;
}

body.gwt-has-header .gwt-search__submit:hover,
body.gwt-has-header .gwt-search__submit:focus-visible {
	color: #2B2723;
	background: transparent;
}

/* Suggestions ------------------------------------------------------------ */

.gwt-search__results {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 100000;
	max-height: min(70vh, 560px);
	overflow-y: auto;
	padding: 6px 0;
	border: 1px solid #DDD5C6;
	border-radius: 10px;
	background: #ffffff;
	box-shadow: 0 12px 32px rgba(43, 39, 35, 0.16);
	text-align: left;
}

.gwt-search__results[hidden] {
	display: none;
}

.gwt-search__group-label {
	margin: 0;
	padding: 10px 16px 4px;
	color: #8A8178;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

body.gwt-has-header .gwt-search__option {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 16px;
	color: #2B2723;
	font-size: 15px;
	line-height: 1.3;
	text-decoration: none;
}

body.gwt-has-header .gwt-search__option:hover,
body.gwt-has-header .gwt-search__option.is-active {
	background: #F5F1EA;
	color: #2B2723;
}

/* Not <mark>: the site's CSS hides those. */
body.gwt-has-header .gwt-search__match {
	display: inline;
	color: inherit;
	font-weight: 600;
}

.gwt-search__thumb {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	border-radius: 6px;
	background: #F5F1EA;
	object-fit: contain;
}

.gwt-search__name {
	flex: 1 1 auto;
	min-width: 0;
}

.gwt-search__meta {
	display: block;
	margin-top: 2px;
	color: #8A8178;
	font-size: 12px;
}

.gwt-search__price {
	flex: 0 0 auto;
	color: #2B2723;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
}

.gwt-search__price del {
	margin-right: 4px;
	color: #8A8178;
	font-weight: 400;
}

.gwt-search__price ins {
	text-decoration: none;
}

body.gwt-has-header .gwt-search__option--all {
	margin-top: 6px;
	padding-top: 12px;
	padding-bottom: 10px;
	border-top: 1px solid #EEE8DD;
	color: #7D1512;
	font-weight: 600;
}

.gwt-search__empty {
	margin: 0;
	padding: 12px 16px 6px;
	color: #6F665D;
	font-size: 14px;
}

/* Cart / app button ------------------------------------------------------ */

.gwt-header__cart {
	grid-area: cart;
	justify-self: end;
}

body.gwt-has-header .gwt-header__button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 52px;
	padding: 0 22px;
	border-radius: 10px;
	background: #8FAE1E;
	box-shadow: none;
	color: #ffffff;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s ease;
}

body.gwt-has-header .gwt-header__button:hover,
body.gwt-has-header .gwt-header__button:focus-visible {
	background: #7C9A19;
	color: #ffffff;
}

.gwt-header__button svg {
	flex: 0 0 auto;
}

.gwt-header__cart-total .woocommerce-Price-amount {
	color: inherit;
}

.gwt-header__app-label--short {
	display: none;
}

/* -------------------------------------------------------------------------
 * Main menu: burger version (1000px and narrower)
 * ---------------------------------------------------------------------- */

.gwt-nav__toggle,
.gwt-nav__sub-toggle {
	display: none;
}

@media (max-width: 1000px) {
	body.gwt-has-header #site-navigation.gwt-nav {
		padding: 0;
		text-align: center;
	}

	body.gwt-has-header #site-navigation.gwt-nav .store-container {
		padding: 0;
	}

	body.gwt-has-header #site-navigation .gwt-nav__toggle {
		display: inline-flex;
		align-items: center;
		gap: 12px;
		margin: 0;
		padding: 14px 24px;
		border: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		color: #ffffff;
		font-size: 14px;
		font-weight: 500;
		letter-spacing: 0.08em;
		line-height: 1;
		text-transform: uppercase;
		cursor: pointer;
	}

	.gwt-nav__burger {
		position: relative;
		display: block;
		width: 22px;
		height: 16px;
	}

	.gwt-nav__burger span,
	.gwt-nav__burger::before,
	.gwt-nav__burger::after {
		content: "";
		position: absolute;
		left: 0;
		width: 100%;
		height: 2px;
		border-radius: 2px;
		background: currentColor;
		transition: transform 0.2s ease, opacity 0.2s ease;
	}

	.gwt-nav__burger::before {
		top: 0;
	}

	.gwt-nav__burger span {
		top: 7px;
	}

	.gwt-nav__burger::after {
		top: 14px;
	}

	.gwt-nav--open .gwt-nav__burger::before {
		transform: translateY(7px) rotate(45deg);
	}

	.gwt-nav--open .gwt-nav__burger span {
		opacity: 0;
	}

	.gwt-nav--open .gwt-nav__burger::after {
		transform: translateY(-7px) rotate(-45deg);
	}

	/* The list: closed until the toggle opens it; in the flow, full width. */
	body.gwt-has-header #site-navigation.gwt-nav #primary-menu {
		display: none;
		position: static;
		float: none;
		width: 100%;
		margin: 0;
		padding: 0;
		border: 0;
		border-top: 1px solid rgba(255, 255, 255, 0.15);
		background: #B42B2E;
		text-align: center;
	}

	body.gwt-has-header #site-navigation.gwt-nav.gwt-nav--open #primary-menu {
		display: block;
	}

	body.gwt-has-header #site-navigation.gwt-nav #primary-menu li {
		position: relative;
		float: none;
		width: 100%;
		margin: 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	}

	body.gwt-has-header #site-navigation.gwt-nav #primary-menu li:last-child {
		border-bottom: 0;
	}

	body.gwt-has-header #site-navigation.gwt-nav #primary-menu li a {
		display: block;
		width: auto !important;
		margin: 0;
		padding: 15px 56px !important;
		text-align: center;
	}

	/* The theme's FontAwesome chevrons: the sub-toggle button replaces them. */
	body.gwt-has-header #site-navigation.gwt-nav #primary-menu li.menu-item-has-children > a::before {
		display: none;
	}

	/* Sub-menus: accordions. */
	body.gwt-has-header #site-navigation.gwt-nav #primary-menu ul {
		display: none;
		position: static;
		float: none;
		width: 100%;
		margin: 0;
		padding: 0;
		border: 0;
		border-top: 1px solid rgba(255, 255, 255, 0.12);
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transition: none;
	}

	body.gwt-has-header #site-navigation.gwt-nav #primary-menu li.gwt-nav__item--open > ul {
		display: block;
	}

	body.gwt-has-header #site-navigation.gwt-nav #primary-menu ul a {
		background-color: #9E2427 !important;
		font-size: 13px;
	}

	body.gwt-has-header #site-navigation.gwt-nav #primary-menu ul ul a {
		background-color: #86201F !important;
	}

	body.gwt-has-header #site-navigation.gwt-nav #primary-menu li a:hover,
	body.gwt-has-header #site-navigation.gwt-nav #primary-menu li a:focus-visible {
		background-color: #7C9A19 !important;
	}

	body.gwt-has-header #site-navigation .gwt-nav__sub-toggle {
		position: absolute;
		top: 0;
		right: 0;
		z-index: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 52px;
		height: 48px;
		margin: 0;
		padding: 0;
		border: 0;
		border-left: 1px solid rgba(255, 255, 255, 0.12);
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		color: #ffffff;
		cursor: pointer;
	}

	.gwt-nav__sub-toggle svg {
		transition: transform 0.2s ease;
	}

	.gwt-nav__sub-toggle[aria-expanded="true"] svg {
		transform: rotate(180deg);
	}
}

/* -------------------------------------------------------------------------
 * Narrow screens: logo + cart on one row, search full width below
 * ---------------------------------------------------------------------- */

@media (max-width: 768px) {
	.gwt-header__bar {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"logo cart"
			"search search";
		gap: 12px 16px;
		padding: 12px 0;
	}

	body.gwt-has-header .gwt-header__logo img {
		height: 32px;
		max-width: 100%;
		object-fit: contain;
		object-position: left center;
	}

	body.gwt-has-header .gwt-header__button {
		min-height: 42px;
		padding: 0 14px;
		font-size: 14px;
		gap: 6px;
	}

	body.gwt-has-header .gwt-search__input {
		height: 46px;
		line-height: 44px;
	}

	.gwt-header__app-label--long {
		display: none;
	}

	.gwt-header__app-label--short {
		display: inline;
	}
}

@media (max-width: 400px) {
	body.gwt-has-header .gwt-header__logo img {
		height: 26px;
	}

	body.gwt-has-header .gwt-header__button {
		padding: 0 10px;
		font-size: 13px;
	}

	body.gwt-has-header .gwt-header__button svg {
		display: none;
	}
}

/* -------------------------------------------------------------------------
 * Sticky mode (header.js adds body.gwt-header-stuck once scrolled past the
 * header; .gwt-header keeps its height as a placeholder meanwhile)
 * ---------------------------------------------------------------------- */

body.gwt-header-stuck .gwt-header__inner {
	position: fixed;
	top: 0; /* header.js sets the admin bar offset inline */
	left: 0;
	right: 0;
	z-index: 9990;
	box-shadow: 0 6px 18px -6px rgba(43, 39, 35, 0.5);
}

body.gwt-header-stuck .gwt-header__bar {
	padding: 10px 0;
}

body.gwt-header-stuck.gwt-has-header .gwt-header__logo img {
	height: 34px;
}

body.gwt-header-stuck.gwt-has-header .gwt-search__input {
	height: 44px;
	line-height: 42px;
}

body.gwt-header-stuck.gwt-has-header .gwt-header__button {
	min-height: 44px;
}

/* An open burger menu scrolls inside the fixed header. */
body.gwt-header-stuck.gwt-has-header #site-navigation.gwt-nav.gwt-nav--open #primary-menu {
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}

@media (max-width: 768px) {
	body.gwt-header-stuck .gwt-header__bar {
		padding: 8px 0;
		gap: 8px 16px;
	}

	body.gwt-header-stuck.gwt-has-header .gwt-header__logo img {
		height: 26px;
	}

	body.gwt-header-stuck.gwt-has-header .gwt-search__input {
		height: 40px;
		line-height: 38px;
	}

	body.gwt-header-stuck.gwt-has-header .gwt-header__button {
		min-height: 38px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gwt-header__bar,
	body.gwt-has-header .gwt-header__logo img,
	body.gwt-has-header .gwt-search__input,
	.gwt-nav__burger span,
	.gwt-nav__burger::before,
	.gwt-nav__burger::after,
	.gwt-nav__sub-toggle svg {
		transition: none;
	}
}