/*
 * Header (assets/php/header.php), modelled on the mara-m.gr header.
 *
 * Max Mega Menu switches to its mobile menu at 768px, so that is this file's
 * breakpoint too. Its generated CSS styles the menu with two-id selectors
 * (#mega-menu-wrap-primary #mega-menu-primary ...), hence the !important on the
 * menu rules. The English menu is #mega-menu-primary___en, so everything targets
 * classes, never those ids.
 */

.wecom-new-header {
	--hdr-text: #222;
	--hdr-muted: #6b6b6b;
	--hdr-line: #ececec;
	--hdr-soft: #f4f4f4;
	--hdr-dark: #1f1c18;
	--hdr-sale: #b3261e;
	--hdr-top-h: 36px;
	--hdr-main-h: 84px;
	--hdr-nav-h: 48px;
}

/* Storefront's own header is emptied in PHP; drop its box too. */
.wecom-new-header #masthead {
	display: none !important;
}

/* overflow-x:hidden on body/#page turns them into scroll containers and breaks sticky. */
body.wecom-new-header,
.wecom-new-header #page {
	overflow-x: clip !important;
	overflow-y: visible !important;
}

.wecom-hdr .wecom-icon {
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.wecom-hdr__inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 32px;
	box-sizing: border-box;
}

.wecom-hdr {
	position: relative;
	z-index: 1000;
	background: #fff;
	color: var(--hdr-text);
	font-family: inherit;
}

/* The whole header is sticky, offset so only the menu row stays visible. */
@media (min-width: 769px) {
	.wecom-hdr {
		position: sticky;
		top: calc(-1 * (var(--hdr-top-h) + var(--hdr-main-h)));
		box-shadow: 0 1px 0 var(--hdr-line);
	}

	.admin-bar .wecom-hdr {
		top: calc(32px - (var(--hdr-top-h) + var(--hdr-main-h)));
	}
}

.wecom-hdr a {
	color: inherit;
	text-decoration: none;
}

/* ---- Top bar ---- */

.wecom-hdr__top {
	background: var(--hdr-dark);
	color: #f1ece2;
	font-size: 12.5px;
	letter-spacing: 0.01em;
}

.wecom-hdr__top .wecom-hdr__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 16px;
	height: var(--hdr-top-h);
}

.wecom-hdr__top .wecom-icon {
	width: 16px;
	height: 16px;
	margin-right: 6px;
	vertical-align: -3px;
	stroke-width: 1.7;
}

.wecom-hdr__promo {
	font-weight: 600;
	color: #fff;
}

.wecom-hdr__promo-short {
	display: none;
}

.wecom-hdr__links {
	justify-self: end;
	display: flex;
	align-items: center;
	gap: 16px;
}

.wecom-hdr__links a {
	opacity: 0.85;
}

.wecom-hdr__links a:hover {
	opacity: 1;
	color: #fff;
}

/* ---- Main row: logo | search | actions ---- */

.wecom-hdr__main .wecom-hdr__inner {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	grid-template-areas: "logo search actions";
	align-items: center;
	column-gap: 40px;
	height: var(--hdr-main-h);
}

.wecom-hdr__left {
	display: none;
}

.wecom-hdr__logo {
	grid-area: logo;
	line-height: 0;
}

.wecom-hdr__logo img {
	width: auto !important;
	height: 52px;
	max-height: none;
}

.wecom-hdr__search {
	grid-area: search;
	width: 100%;
	max-width: 640px;
	justify-self: center;
}

.wecom-hdr__search .dgwt-wcas-search-wrapp {
	max-width: none !important;
	min-width: 0 !important;
}

.wecom-hdr__search .dgwt-wcas-sf-wrapp {
	padding: 0 !important;
	background: transparent !important;
}

.wecom-hdr__search .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input {
	height: 48px !important;
	padding: 0 60px 0 22px !important;
	border: 1px solid transparent !important;
	border-radius: 999px !important;
	background: #f2f2f2 !important;
	box-shadow: none !important;
	color: #222 !important;
	font-size: 15px !important;
	transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.wecom-hdr__search .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input::placeholder {
	color: #8a8a8a !important;
	opacity: 1;
}

.wecom-hdr__search .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input:hover {
	background: #ececec !important;
}

.wecom-hdr__search .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input:focus {
	border-color: #222 !important;
	background: #fff !important;
	box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.06) !important;
}

/* The magnifier becomes a round dark search button on the right. */
.wecom-hdr__search .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp .dgwt-wcas-search-submit {
	position: absolute !important;
	top: 50% !important;
	left: auto !important;
	right: 5px !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 38px !important;
	height: 38px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 50% !important;
	background: #222 !important;
	opacity: 1 !important;
	transform: translateY(-50%);
	transition: background-color 0.15s;
}

.wecom-hdr__search .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp .dgwt-wcas-search-submit:hover {
	background: #000 !important;
}

.wecom-hdr__search .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp .dgwt-wcas-search-submit::before,
.wecom-hdr__search .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp .dgwt-wcas-search-submit::after {
	display: none !important;
}

.wecom-hdr__search .dgwt-wcas-search-submit svg {
	position: static !important;
	width: 17px !important;
	height: 17px !important;
	margin: 0 !important;
}

.wecom-hdr__search .dgwt-wcas-search-submit svg path {
	fill: #fff !important;
}

/* Loading spinner sits left of the button instead of on top of it. */
.wecom-hdr__search .dgwt-wcas-preloader {
	right: 48px !important;
	height: 48px !important;
}

.wecom-hdr__search .dgwt-wcas-voice-search {
	display: none !important;
}

/* Suggestions dropdown (FiboSearch appends it to <body>). */
.wecom-new-header .dgwt-wcas-suggestions-wrapp {
	margin-top: 6px !important;
	border: 1px solid var(--hdr-line) !important;
	border-radius: 14px !important;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12) !important;
	overflow: hidden;
}

.wecom-hdr__actions {
	grid-area: actions;
	display: flex;
	align-items: center;
	gap: 6px;
}

.wecom-hdr__action {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--hdr-text) !important;
	cursor: pointer;
	transition: background-color 0.15s;
}

a.wecom-hdr__action:hover,
button.wecom-hdr__action:hover,
button.wecom-hdr__action:focus {
	background: var(--hdr-soft);
}

.wecom-hdr__phone {
	gap: 10px;
	padding: 0 14px 0 10px;
	margin-right: 6px;
}

.wecom-hdr__phone-text {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
	text-align: left;
}

.wecom-hdr__phone-text small {
	font-size: 11px;
	color: var(--hdr-muted);
}

.wecom-hdr__phone-text strong {
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
}

.wecom-hdr__search-mobile {
	display: none !important;
}

.wecom-hdr-cart-count {
	position: absolute;
	top: 3px;
	right: 1px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: #222;
	color: #fff;
	box-shadow: 0 0 0 2px #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	box-sizing: border-box;
}

.wecom-hdr-cart-count.is-empty {
	display: none;
}

/* ---- Menu row ---- */

.wecom-hdr__nav {
	border-top: 1px solid var(--hdr-line);
	background: #fff;
}

.wecom-new-header .wecom-hdr__nav .mega-menu-wrap {
	background: transparent !important;
}

@media (min-width: 769px) {
	.wecom-new-header .wecom-hdr__nav .max-mega-menu {
		display: flex !important;
		flex-wrap: wrap;
		justify-content: center;
		gap: 4px;
	}

	.wecom-new-header .wecom-hdr__nav .max-mega-menu > li.mega-menu-item > a.mega-menu-link {
		height: var(--hdr-nav-h) !important;
		line-height: var(--hdr-nav-h) !important;
		padding: 0 16px !important;
		background: transparent !important;
		color: var(--hdr-text) !important;
		font-size: 14px !important;
		font-weight: 600 !important;
		letter-spacing: 0.05em !important;
		box-shadow: inset 0 -2px 0 transparent;
		transition: box-shadow 0.15s;
	}

	.wecom-new-header .wecom-hdr__nav .max-mega-menu > li.mega-menu-item > a.mega-menu-link:hover,
	.wecom-new-header .wecom-hdr__nav .max-mega-menu > li.mega-menu-item.mega-toggle-on > a.mega-menu-link,
	.wecom-new-header .wecom-hdr__nav .max-mega-menu > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
	.wecom-new-header .wecom-hdr__nav .max-mega-menu > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link {
		box-shadow: inset 0 -2px 0 var(--hdr-text);
	}

	/* OUTLET: red text instead of a coloured block. */
	.wecom-new-header .wecom-hdr__nav .max-mega-menu > li.mega-menu-item > a.mega-menu-link[href*="outlet"] {
		color: var(--hdr-sale) !important;
	}

	.wecom-new-header .wecom-hdr__nav .max-mega-menu > li.mega-menu-item > a.mega-menu-link[href*="outlet"]:hover {
		box-shadow: inset 0 -2px 0 var(--hdr-sale);
	}

	.wecom-new-header .wecom-hdr__nav .max-mega-menu li.mega-menu-flyout ul.mega-sub-menu {
		min-width: 240px;
		padding: 8px 0 !important;
		border: 1px solid var(--hdr-line) !important;
		border-radius: 0 0 10px 10px !important;
		background: #fff !important;
		box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1) !important;
	}

	.wecom-new-header .wecom-hdr__nav .max-mega-menu li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link {
		padding: 10px 18px !important;
		background: transparent !important;
		color: var(--hdr-text) !important;
		font-size: 14px !important;
		font-weight: 400 !important;
		line-height: 1.3 !important;
		text-transform: none !important;
	}

	.wecom-new-header .wecom-hdr__nav .max-mega-menu li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:hover {
		background: var(--hdr-soft) !important;
	}
}

/* Tablet: everything still fits on one line, just tighter. */
@media (min-width: 769px) and (max-width: 1100px) {
	.wecom-hdr__inner {
		padding: 0 20px;
	}

	.wecom-hdr__main .wecom-hdr__inner {
		column-gap: 20px;
	}

	.wecom-hdr__hours {
		display: none;
	}

	.wecom-hdr__top .wecom-hdr__inner {
		grid-template-columns: 1fr auto;
	}

	.wecom-hdr__phone-text {
		display: none;
	}

	.wecom-hdr__phone {
		padding: 0;
		margin-right: 0;
	}

	.wecom-new-header .wecom-hdr__nav .max-mega-menu > li.mega-menu-item > a.mega-menu-link {
		padding: 0 9px !important;
		font-size: 12.5px !important;
		letter-spacing: 0.02em !important;
	}
}

/* ---- Mobile: ☰ 📞 | logo | 🔍 🛍 ---- */

@media (max-width: 768px) {
	.wecom-new-header {
		--hdr-main-h: 64px;
	}

	.wecom-hdr {
		position: sticky;
		top: 0;
		box-shadow: 0 1px 0 var(--hdr-line);
	}

	.admin-bar .wecom-hdr {
		top: 0;
	}

	.wecom-hdr__inner {
		padding: 0 16px;
	}

	.wecom-hdr__top .wecom-hdr__inner {
		grid-template-columns: 1fr;
		justify-items: center;
		height: 32px;
	}

	.wecom-hdr__hours,
	.wecom-hdr__links {
		display: none !important;
	}

	.wecom-hdr__promo {
		max-width: 100%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 12px;
	}

	.wecom-hdr__promo-long {
		display: none;
	}

	.wecom-hdr__promo-short {
		display: inline;
	}

	.wecom-hdr__main .wecom-hdr__inner {
		grid-template-columns: 1fr auto 1fr;
		grid-template-areas: "left logo actions";
		column-gap: 8px;
	}

	.wecom-hdr__left {
		grid-area: left;
		display: flex;
		align-items: center;
		justify-self: start;
		margin-left: -10px;
	}

	.wecom-hdr__burger .wecom-icon {
		width: 26px;
		height: 26px;
	}

	.wecom-hdr__logo img {
		height: 38px;
	}

	.wecom-hdr__search,
	.wecom-hdr__phone,
	.wecom-hdr__account {
		display: none !important;
	}

	.wecom-hdr__actions {
		justify-self: end;
		gap: 0;
		margin-right: -8px;
	}

	.wecom-hdr__search-mobile {
		display: inline-flex !important;
	}

	.wecom-hdr__search-mobile .dgwt-wcas-search-wrapp {
		min-width: 0 !important;
		width: 44px !important;
		margin: 0 !important;
	}

	.wecom-hdr__search-mobile .dgwt-wcas-search-icon {
		width: 22px !important;
		height: 22px !important;
		margin: 0 auto;
	}

	.wecom-hdr__search-mobile .dgwt-wcas-search-icon path {
		fill: var(--hdr-text) !important;
	}

	/*
	 * The menu row disappears; Max Mega Menu's off-canvas <ul> is position:fixed,
	 * so it still slides in. Its toggle bar is collapsed rather than hidden: the
	 * dark overlay is the toggle's own ::after, which display:none would remove.
	 */
	.wecom-hdr__nav {
		height: 0;
		border: 0;
	}

	.wecom-hdr__nav .wecom-hdr__inner {
		padding: 0;
	}

	.wecom-new-header .wecom-hdr__nav .mega-menu-toggle {
		height: 0 !important;
		min-height: 0 !important;
		padding: 0 !important;
		overflow: hidden;
		border: 0 !important;
		background: transparent !important;
	}

	.wecom-new-header .wecom-hdr__nav .max-mega-menu > li.mega-menu-item > a.mega-menu-link[href*="outlet"] {
		color: var(--hdr-sale) !important;
	}
}

/*
 * Form controls use the site font. Storefront gives button, input, select and
 * textarea their own family (Source Sans Pro), which was the only reason its
 * Google Fonts stylesheet loaded; assets/php/fonts.php no longer loads it.
 */
body button,
body input,
body select,
body textarea {
	font-family: inherit;
}

/*
 * ---- Mobile drawer ----
 *
 * Max Mega Menu's off-canvas <ul>, restyled, plus the contact panel that
 * wecom_new_header_menu_items() appends as its last <li>. The plugin resets every
 * ul, li, a and div inside the menu with two-id selectors, hence !important.
 */

.wecom-drawer {
	display: none !important;
}

@media (max-width: 768px) {
	.wecom-new-header .wecom-hdr__nav .max-mega-menu {
		width: min(88vw, 380px) !important;
		padding: 0 !important;
		background: #fff !important;
		overflow-y: auto !important;
		overscroll-behavior: contain;
		box-shadow: 0 0 40px rgba(0, 0, 0, 0.25);
	}

	/* The plugin pins its close button at the old 300px edge; put it in the logo row. */
	.wecom-new-header .wecom-hdr__nav button.mega-close {
		left: calc(min(88vw, 380px) - 56px) !important;
		right: auto !important;
		top: 17px !important;
		width: 40px !important;
		height: 40px !important;
		border-radius: 50% !important;
		background: var(--hdr-soft) !important;
	}

	.wecom-new-header .wecom-hdr__nav button.mega-close::before {
		color: var(--hdr-text) !important;
	}

	/* Logo row (a menu item that is hidden on desktop). */
	.wecom-new-header .wecom-hdr__nav .max-mega-menu > li.mega-hide-on-desktop {
		padding: 20px 76px 20px 20px !important;
		border-bottom: 1px solid var(--hdr-line) !important;
	}

	.wecom-new-header .wecom-hdr__nav .max-mega-menu > li.mega-hide-on-desktop > a.mega-menu-link {
		display: inline-block !important;
		height: auto !important;
		padding: 0 !important;
		line-height: 0 !important;
		background: transparent !important;
	}

	.wecom-new-header .wecom-hdr__nav .max-mega-menu > li.mega-hide-on-desktop img {
		width: auto !important;
		height: 34px !important;
	}

	/* Top-level rows. */
	.wecom-new-header .wecom-hdr__nav .max-mega-menu > li.mega-menu-item:not(.mega-hide-on-desktop) {
		border-bottom: 1px solid var(--hdr-line) !important;
	}

	.wecom-new-header .wecom-hdr__nav .max-mega-menu > li.mega-menu-item > a.mega-menu-link {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		height: auto !important;
		min-height: 54px !important;
		padding: 0 20px !important;
		background: transparent !important;
		color: var(--hdr-text) !important;
		font-size: 15px !important;
		font-weight: 600 !important;
		letter-spacing: 0.04em !important;
		line-height: 1.3 !important;
	}

	.wecom-new-header .wecom-hdr__nav .max-mega-menu > li.mega-menu-item.mega-toggle-on > a.mega-menu-link {
		background: var(--hdr-soft) !important;
	}

	.wecom-new-header .wecom-hdr__nav .max-mega-menu > li.mega-menu-item > a.mega-menu-link > span.mega-indicator {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 28px !important;
		height: 28px !important;
		margin: 0 -6px 0 12px !important;
		border-radius: 50%;
		background: var(--hdr-soft) !important;
		color: var(--hdr-text) !important;
		transition: transform 0.2s;
	}

	.wecom-new-header .wecom-hdr__nav .max-mega-menu > li.mega-menu-item.mega-toggle-on > a.mega-menu-link > span.mega-indicator {
		background: #fff !important;
		transform: rotate(180deg);
	}

	.wecom-new-header .wecom-hdr__nav .max-mega-menu > li.mega-menu-item > a.mega-menu-link > span.mega-indicator::after {
		margin: 0 !important;
		transform: none !important;
		color: inherit !important;
	}

	/* Sub-menus. */
	.wecom-new-header .wecom-hdr__nav .max-mega-menu > li.mega-menu-item > ul.mega-sub-menu {
		padding: 4px 0 10px !important;
		background: var(--hdr-soft) !important;
	}

	.wecom-new-header .wecom-hdr__nav .max-mega-menu > li.mega-menu-item ul.mega-sub-menu li.mega-menu-item a.mega-menu-link {
		display: block !important;
		padding: 11px 20px 11px 34px !important;
		background: transparent !important;
		color: #444 !important;
		font-size: 14px !important;
		font-weight: 400 !important;
		line-height: 1.35 !important;
		text-transform: none !important;
	}

	.wecom-new-header .wecom-hdr__nav .max-mega-menu > li.mega-menu-item ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:hover,
	.wecom-new-header .wecom-hdr__nav .max-mega-menu > li.mega-menu-item ul.mega-sub-menu li.mega-current-menu-item > a.mega-menu-link {
		color: #000 !important;
		font-weight: 600 !important;
	}

	/* ---- Contact panel ---- */

	.wecom-new-header .wecom-hdr__nav .max-mega-menu > li.wecom-drawer {
		display: block !important;
		padding: 22px 20px calc(28px + env(safe-area-inset-bottom)) !important;
		color: var(--hdr-text) !important;
		text-align: left !important;
		font-size: 14px !important;
		line-height: 1.4 !important;
	}

	.wecom-drawer .wecom-icon {
		width: 20px;
		height: 20px;
		flex: 0 0 auto;
		fill: none;
		stroke: currentColor;
		stroke-width: 1.8;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	.wecom-new-header .wecom-drawer a.wecom-drawer__call {
		display: flex !important;
		align-items: center;
		gap: 14px;
		padding: 12px 18px !important;
		border-radius: 14px !important;
		background: var(--hdr-dark) !important;
		color: #fff !important;
	}

	.wecom-drawer__call .wecom-icon {
		box-sizing: content-box;
		width: 22px;
		height: 22px;
		padding: 9px;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.12);
	}

	.wecom-drawer__call span {
		display: flex;
		flex-direction: column;
	}

	.wecom-drawer__call small {
		font-size: 12px;
		opacity: 0.75;
	}

	.wecom-drawer__call strong {
		font-size: 19px;
		font-weight: 700;
		letter-spacing: 0.02em;
		white-space: nowrap;
	}

	.wecom-new-header .wecom-drawer ul.wecom-drawer__info {
		display: block !important;
		margin: 18px 0 0 !important;
		padding: 0 !important;
	}

	.wecom-new-header .wecom-drawer ul.wecom-drawer__info > li {
		display: flex !important;
		align-items: flex-start;
		gap: 12px;
		padding: 10px 0 !important;
		color: var(--hdr-text) !important;
		font-size: 14px !important;
		line-height: 1.4 !important;
	}

	.wecom-drawer__info .wecom-icon {
		margin-top: 1px;
		color: var(--hdr-muted);
	}

	.wecom-drawer__info small {
		display: block;
		margin-bottom: 1px;
		color: var(--hdr-muted);
		font-size: 12px;
	}

	.wecom-new-header .wecom-drawer__info a {
		display: inline !important;
		margin-left: 6px !important;
		color: var(--hdr-text) !important;
		font-size: 14px !important;
		font-weight: 600 !important;
		text-decoration: underline !important;
		text-underline-offset: 3px;
	}

	.wecom-new-header .wecom-drawer div.wecom-drawer__links {
		display: flex !important;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		margin-top: 14px !important;
		padding-top: 18px !important;
		border-top: 1px solid var(--hdr-line) !important;
	}

	.wecom-new-header .wecom-drawer__links a {
		display: inline-flex !important;
		align-items: center;
		gap: 8px;
		padding: 0 !important;
		color: var(--hdr-text) !important;
		font-size: 14px !important;
		font-weight: 600 !important;
	}

	.wecom-drawer__lang {
		display: inline-flex;
		align-items: center;
		gap: 8px;
	}

	.wecom-new-header .wecom-drawer__lang a {
		padding: 6px 12px !important;
		border: 1px solid var(--hdr-line) !important;
		border-radius: 999px !important;
		font-size: 13px !important;
	}
}