/* ========================================
   Header shell
======================================== */

.site-header {
	--header-gutter: 24px;
	--header-main-height: 70px;
	--header-nav-height: 60px;
	background-color: var(--body-background-color);
	/* border-bottom: 1px solid var(--separator-color); */
}

/* ========================================
   Top info bar
======================================== */

.site-info-bar {
	/* background-color: #007eb5; */
	background-color: #005c84;
	background-image: var(--gf-gradient);
	color: #fff;
}

.site-info-bar__inner {
	display: flex;
	font-size: var(--text-ui);
	align-items: center;
	justify-content: space-between;
	margin-inline: auto;
	padding-block: 5px;
	min-height: 35px;
}

/* ========================================
   Header main layout
======================================== */

.site-header-main {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"left tools"
		"search search";
	align-items: center;
	row-gap: 12px;
	column-gap: 12px;
	padding-block: 12px;
}

/* ========================================
   Header groups
======================================== */

.site-header-main__left {
	grid-area: left;
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.search-form--main,
.dgwt-wcas-search-wrapp {
	grid-area: search;
	min-width: 0;
}

.tools-menu {
	grid-area: tools;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	margin: 0;
	padding: 0 5px 0 0;
	list-style: none;
}

.custom-logo-link:focus-visible {
	outline-offset: 4px;
}

/* ========================================
   Search form sizing
======================================== */

.search-form--main label {
	display: block;
}

.search-form--main .search-field {
	width: 100%;
}

/* ========================================
   Main search
======================================== */

.search-form--main {
	position: relative;
	width: 100%;
	min-width: 0;
}

.search-field--main,
#site-header-main .dgwt-wcas-search-input {
	width: 100%;
	height: 42px;
	padding-left: 20px;
	padding-right: 41px;
	padding-top: 0;
	padding-bottom: 0;
	border: 1px solid var(--silky-white-40);
	border-radius: 999px;
	background: #fefdfd;
	font-family: inherit;
	font-size: var(--text-ui-l);
}

.search-field--main:focus-visible,
#site-header-main .dgwt-wcas-search-input:focus-visible {
	border-color: #000;
	outline: 2px solid var(--color-focus);
	outline-offset: 1px;
	background: #fff;
}

.search-submit,
#site-header-main .dgwt-wcas-sf-wrapp .dgwt-wcas-search-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 1px;
	bottom: 0;
	right: 1px;
	left: auto;
	width: 40px;
	height: 40px;
	padding: 0;
	background: none;
	border: none;
	border-radius: 50%;
	cursor: pointer;
}

.search-submit:hover,
#site-header-main .dgwt-wcas-sf-wrapp .dgwt-wcas-search-submit:hover {
	background-color: var(--background-hover-color);
}

.search-submit:focus,
.search-submit:focus-visible,
#site-header-main .dgwt-wcas-sf-wrapp .dgwt-wcas-search-submit:focus,
#site-header-main .dgwt-wcas-sf-wrapp .dgwt-wcas-search-submit:focus-visible {
	background-color: var(--background-hover-color);
	outline: 2px solid var(--color-focus);
	outline-offset: -1px;
}

#site-header-main .dgwt-wcas-style-pirx.dgwt-wcas-style-pirx-compact .dgwt-wcas-sf-wrapp {
	background: 0 0;
	padding: 0;
	border-radius: 10px 10px 0 0;
}

.ri-search-line {
	width: 20px;
}

/* ========================================
   Header tools
======================================== */


.tools-menu .menu-item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
}

.tools-menu a {
	text-decoration: none;
}

/* .tools-menu-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
} */

.tools-menu .cart-icon--bc {
	display: block;
	width: 40px;
}

body:not(.logged-in) .tools-account .tools-menu-link::before {
	content: "";
	display: block;
	width: 32px;
	height: 32px;
	background-color: currentColor;
	background: var(--icon-gradient);
	mask-image: url(../../../images/icons/account-arrow-left-outline.svg);
	mask-repeat: no-repeat;
	mask-size: contain;
	mask-position: center;
	-webkit-mask-image: url(../../../images/icons/account-arrow-left-outline.svg);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	-webkit-mask-position: center;
}

/* ========================================
   Mobile tweaks
======================================== */

@media (max-width: 768px) {

	.site-header__logo img,
	.custom-logo {
		max-width: 160px;
		height: auto;
	}
}

@media (max-width: 620px) {
	.site-header__logo img,
	.custom-logo {
		max-width: 130px;
	}
}

/* ========================================
   Desktop layout
======================================== */

@media (min-width: 768px) {
	.site-header-main {
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas: "left search tools";
		/* height: var(--header-main-height); */
		row-gap: 0;
		column-gap: 24px;
		padding-block: 0;
		padding-top: 14px;
	}

	.site-header-main__left {
		gap: 16px;
	}

	.tools-menu-text {
		display: inline;
	}
}

/* ========================================
   Main navigation
   Mobile first base
======================================== */

.main-navigation {
	position: relative;
}

.primary-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ========================================
   Mobile menu toggle
======================================== */

/* Show the mobile toggle button */
.menu-toggle {
	display: inline-flex;
	background-color: var(--nav-background);
	border: none;
	cursor: pointer;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin-left: -8px;
	padding: 0;
	width: 48px;
	height: 48px;
	min-width: 48px;
}

.hamburger-menu-text {
	font-size: 1rem;
	line-height: 1.1;
	text-align: center;
}

#hamburger-icon {
	position: relative;
	width: 28px;
	height: 21px;
	margin: auto;
	transform: rotate(0deg);
	transition: 0.25s ease-in-out;
}

#hamburger-icon span {
	position: absolute;
	left: 0;
	display: block;
	width: 100%;
	height: 3px;
	background-color: #000;
	/* background: var(--icon-gradient); */
	border-radius: 1px;
	opacity: 1;
	transform: rotate(0deg);
	transition: 0.1s ease-in-out;
}

#hamburger-icon span:nth-child(1) {
	top: 0;
	background: linear-gradient(to right, #B17443 0%, #043347 20%);
}

#hamburger-icon span:nth-child(2),
#hamburger-icon span:nth-child(3) {
	top: 9px;
	background: linear-gradient(to right, #B17443 0%, #043347 40%);
}

#hamburger-icon span:nth-child(4) {
	top: 18px;
	background: linear-gradient(to right, #B17443 0%, #043347 80%);
}

.menu-toggle--open #hamburger-icon span:nth-child(1) {
	top: 10px;
	left: 50%;
	width: 0;
}

.menu-toggle--open #hamburger-icon span:nth-child(2) {
	transform: rotate(45deg);
}

.menu-toggle--open #hamburger-icon span:nth-child(3) {
	transform: rotate(-45deg);
}

.menu-toggle--open #hamburger-icon span:nth-child(4) {
	top: 10px;
	left: 50%;
	width: 0;
}

/* ========================================
   Main navigation
   Desktop and larger screens
======================================== */

/* Top level parent link inside the wrapper */
.primary-menu-link {
	display: inline-flex;
	align-items: center;
}

/* Dedicated submenu toggle button */
.menu-item-button {
	background-color: transparent;
	border: 1px solid transparent;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: none;
	border: none;
	color: inherit;
	/* cursor: pointer; */
}

/* Chevron icon container */
.menu-item__chevron {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	/* transition: transform 0.02s ease; */
}

/* Chevron SVG sizing */
.menu-item__chevron svg {
	display: block;
	width: 100%;
	height: 100%;
}

@media (min-width: 768px) {

	.menu-toggle {
		display: none;
	}

	/* .site-header {
		padding-bottom: 15px;
	} */

	.main-navigation {
		display: flex;
		align-items: center;
		justify-content: center;
		/* height: var(--header-nav-height); */
		margin-inline: auto;
		padding-inline: var(--header-gutter);
		padding-top: 11px;
		padding-bottom: 14px;
	}

	/* Top level menu list */
	.primary-menu {
		display: flex;
		align-items: stretch;
		gap: 30px;
	}

	/* Top level menu items */
	.primary-menu>.menu-item {
		position: relative;
		display: flex;
		align-items: stretch;
	}

	/* Top level menu links and buttons share the same box model so plain links
	   (no children) look identical to submenu-trigger buttons. */
	.primary-menu-link {
		display: flex;
		align-items: stretch;
		gap: 3px;
		align-items: center;
		height: 100%;
		color: inherit;
		font-weight: 550;
		text-decoration: none;
		border: 1px solid transparent;
		border-radius: 24px;
		line-height: 1;
		padding-top: 11px;
		padding-bottom: 11px;
		padding-left: 14px;
		padding-right: 12px;
	}

	.current-menu-ancestor .menu-item-button {
		border: 1px solid var(--gray-60);
	}

	.primary-menu-link:hover,
	.is-open .menu-item-button {
		background-color: var(--background-hover-color);
	}

	/* Current top level states */
	.primary-menu>.current-menu-item>.primary-menu-link,
	.primary-menu>.current-menu-ancestor>.primary-menu-link,
	.primary-menu>.current-menu-parent>.primary-menu-link {
		color: #000;
	}

	/* Hover and focus states for top level links */
	.primary-menu>.menu-item:hover>.primary-menu-link,
	.primary-menu>.menu-item:focus-within>.primary-menu-link {
		color: #000;
	}

	.menu-item__label {
		line-height: 1;
	}

	/* Submenu panel */
	.primary-menu .sub-menu {
		position: absolute;
		top: 100%;
		left: 50%;
		z-index: 100;
		min-width: 250px;
		margin: 0;
		padding: 14px;
		list-style: none;
		background-color: #fff;
		border-radius: 16px;
		box-shadow: var(--box-shadow);
		opacity: 0;
		visibility: hidden;
		transform: translateX(-50%) translateY(10px);
		transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
	}

	/* Submenu items */
	.primary-menu .sub-menu li {
		margin-top: 2px;
		margin-bottom: 2px;
		padding: 0;
	}

	/* Submenu links */
	.primary-menu .sub-menu a {
		display: inline-block;
		padding-top: 5px;
		padding-bottom: 5px;
		padding-left: 15px;
		padding-right: 15px;
		border-radius: 40px;
		font-size: var(--text-ui-l);
		font-weight: 500;
		line-height: 1.45;
		text-decoration: none;
		white-space: nowrap;
	}

	/* Submenu hover and focus states */
	.primary-menu .sub-menu a:hover,
	.primary-menu .sub-menu a:focus-visible {
		color: #000;
		background-color: var(--background-hover-color);
	}

	/* Current submenu states */
	.primary-menu .sub-menu .current-menu-item>a,
	.primary-menu .sub-menu .current-menu-ancestor>a,
	.primary-menu .sub-menu .current-menu-parent>a {
		color: #000;
	}

	.primary-menu > .menu-item.is-open > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateX(-50%) translateY(0);
	}

	.primary-menu > .menu-item-has-children.is-open > .menu-item-button .menu-item__chevron {
		transform: rotate(180deg);
	}
}

/* ========================================
   Main navigation
   Mobile skeleton
======================================== */

@media (max-width: 767px) {

	/* Hide the menu by default on mobile */
	.primary-menu {
		display: none;
	}

	/* Show the menu as a vertical stack when mobile nav is open */
	.main-navigation.is-open .primary-menu {
		display: flex;
		flex-direction: column;
		gap: 0;
		width: 100%;
		/* margin-top: 16px; */
		border-top: 1px solid var(--separator-color);
		border-bottom: 1px solid var(--separator-color);
	}

	/* Make each top level item fill the available width */
	.main-navigation.is-open .primary-menu > .menu-item {
		width: 100%;
	}

	.main-navigation.is-open .primary-menu > .menu-item:not(:last-child) {
		border-bottom: 1px solid var(--separator-color);
	}

	.main-navigation.is-open .menu-item--top-level {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}

	/* Style the top level mobile trigger or link as a full width row */
	.main-navigation.is-open .menu-item--top-level > .primary-menu-link {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		min-height: 56px;
		padding-top: 16px;
		padding-bottom: 16px;
		padding-left: 18px;
		padding-right: 18px;
		color: inherit;
		text-decoration: none;
	}

	.main-navigation.is-open .menu-item--top-level > .menu-item-button {
		appearance: none;
		-webkit-appearance: none;
		background: none;
		border: 0;
		border-radius: 0;
		text-align: left;
		font: inherit;
		/* cursor: pointer; */
	}

	/* Reset submenu from desktop dropdown mode */
	.main-navigation.is-open .sub-menu {
		position: static;
		min-width: 0;
		margin: 0;
		padding: 0 0 10px;
		background: none;
		border-radius: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: none;
	}

	/* Hide mobile submenus by default */
	.main-navigation.is-open .menu-item-has-children>.sub-menu {
		display: none;
	}

	/* Show expanded mobile submenu */
	.main-navigation.is-open .menu-item-has-children.is-open>.sub-menu {
		display: block;
	}

	/* Add a little spacing between submenu items */
	.main-navigation.is-open .sub-menu li+li {
		margin-top: 2px;
	}

	/* Mobile submenu links */
	.main-navigation.is-open .sub-menu a {
		display: block;
		padding: 10px 0 10px 22px;
		border-radius: 0;
		font-size: 1rem;
		line-height: 1.4;
		text-decoration: none;
		white-space: normal;
	}

	/* Rotate chevron for expanded mobile parent items */
	.main-navigation.is-open .menu-item-has-children.is-open > .menu-item-button .menu-item__chevron {
		transform: rotate(180deg);
	}

	/* Header stays above the page overlay */
	#masthead {
		position: relative;
		isolation: isolate;
		z-index: 120;
	}

	/* Page overlay behind the header and menu */
	.mega-overlay {
		position: fixed;
		inset: 0;
		background: rgba(15, 23, 42, 0.24);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity 0.22s ease, visibility 0s linear 0.22s;
		z-index: 100;
	}

	/* Active state, will be triggered by a body class later */
	body.has-mobile-menu-open .mega-overlay {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transition: opacity 0.22s ease;
	}

	/* Optional, gives the open header a bit more separation */
	body.has-mobile-menu-open .site-header {
		box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08);
	}
}

@media (min-width: 768px) {
	.mega-overlay {
		display: none;
	}
}

/* ========================================
   Navigation focus states
======================================== */

/* Clear default outline only where we replace it with a custom visible focus style */
.menu-toggle:focus,
.menu-item-button:focus,
.primary-menu-link:focus,
.primary-menu .sub-menu a:focus {
	outline: none;
}

/* Visible keyboard focus */
.menu-toggle:focus-visible,
.menu-item-button:focus-visible,
.primary-menu-link:focus-visible,
.primary-menu .sub-menu a:focus-visible {
	outline: 2px solid var(--color-focus);
}

/* Keep the focus shape cleaner on rounded controls */
.menu-toggle:focus-visible,
.menu-item-button:focus-visible {
	border-radius: 40px;
}

/* Optional: make focused submenu links feel a bit more deliberate */
.primary-menu .sub-menu a:focus-visible {
	color: #000;
}

/*
========================================
Optional edge-case alignment
Enable this only if the first or last
submenu starts overflowing on narrower
desktop screens.
This keeps the default centered dropdown
for all items, and overrides only the
first and last top level items.
========================================
*/
@media (max-width: 1px) {

	/* Align the first submenu to the left edge of its parent item */
	.primary-menu>.menu-item:first-child>.sub-menu {
		left: 0;
		transform: translateX(0) translateY(10px);
	}

	.primary-menu>.menu-item:first-child:hover>.sub-menu,
	.primary-menu>.menu-item:first-child:focus-within>.sub-menu {
		transform: translateX(0) translateY(0);
	}

	/* Align the last submenu to the right edge of its parent item */
	.primary-menu>.menu-item:last-child>.sub-menu {
		left: auto;
		right: 0;
		transform: translateX(0) translateY(10px);
	}

	.primary-menu>.menu-item:last-child:hover>.sub-menu,
	.primary-menu>.menu-item:last-child:focus-within>.sub-menu {
		transform: translateX(0) translateY(0);
	}
}


/* fibosearch */
.dgwt-wcas-suggestion-product {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 76px;
	padding: 10px 14px;
	text-decoration: none;
}

.dgwt-wcas-suggestion-product span.dgwt-wcas-si {
	width: 60px;
	height: 60px;
	min-width: 57px;
	margin: 0;
	overflow: hidden;
}

.dgwt-wcas-suggestion-product span.dgwt-wcas-si img {
	width: 100%;
	object-fit: contain;
	display: block;
	background: #fff;
	border: 1px solid var(--silky-white-20);
	border-radius: 0;
	margin: auto;
	padding: 2px;
	height: auto;
	width: auto;
	max-height: none;
	max-width: 100%;
}

.dgwt-wcas-open-pirx .theme-basecamp .dgwt-wcas-suggestions-wrapp {
	border: 1px solid var(--silky-white-30);
	border-radius: 10px !important;
	margin-top: 5px !important;
}

.dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-selected {
	background-color: #fff;
}

.dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-selected .dgwt-wcas-st-title {
	text-decoration: underline;
}

.dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-selected span.dgwt-wcas-si img {
	border-color: #0172a4;
}

.dgwt-wcas-suggestion-product .dgwt-wcas-content-wrapp {
	min-width: 0;
}

.dgwt-wcas-suggestion-product .dgwt-wcas-st {
	font-weight: 400;
	line-height: 1.3;
}

.dgwt-wcas-suggestion-product .dgwt-wcas-sp {
	margin-top: 4px;
	font-weight: 400;
}

.dgwt-wcas-suggestion-product .dgwt-wcas-st-title {
	font-size: var(--text-ui);
	line-height: .8;
	margin-bottom: 5px;
}

.dgwt-wcas-suggestion-product .dgwt-wcas-sku {
	font-size: var(--text-ui);
}

.dgwt-wcas-suggestion-product .dgwt-wcas-st > span {
	display: block;
}

.dgwt-wcas-suggestion-product .dgwt-wcas-sp {
	color: var(--c-black);
	display: flex;
	gap: 5px;
	font-size: var(--text-ui);
	font-weight: 600;
	line-height: 120%;
	text-align: right;
	padding-left: 0;
}

#site-header-main .dgwt-wcas-style-pirx .dgwt-wcas-preloader {
  margin-right: 10px;
}

.woocommerce .dgwt-wcas-suggestion {
	font-size: inherit;
}

.dgwt-wcas-content-wrapp .dgwt-wcas-st {
	font-size: inherit;
	color: var(--c-black);
}

.dgwt-wcas-st .dgwt-wcas-sd {
	color: #4E5256;
	display: block;
	font-size: var(--text-meta);
	font-size: 14px;
	line-height: 1.3;
	margin-top: 0;
	width: 100%;
	max-width: 1050px;
}