/**
 * Header (step 22/3): replaces Elementor Pro's sticky container, Nav Menu and Menu Cart.
 * Values measured on the Pro header (2026-10-01): Mohave, #272727 / #BDAF82, breakpoint tablet_extra = 1200px.
 */

/* Inline SVG icons (inc/header-parts.php, marsi_icon()) in place of the eicons font glyphs: 1em box like the glyph.
   The offsets put the drawing where the font drew it (pixel-compared at 2x, 2026-10-02). */
.marsi-icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	fill: currentColor;
	transform: translateY(.023em);
}

.marsi-minicart__close .marsi-icon {
	vertical-align: -.05em;
	transform: translate(-.025em, .048em);
}


/* ---------- Sticky header (was Pro "sticky: top") ---------- */
.marsi-location-header {
	position: sticky;
	top: 0;
	z-index: 99;
}

.admin-bar .marsi-location-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .marsi-location-header {
		top: 46px;
	}
}

/* The dropdown is positioned against the full-width header row, not the menu column. */
.marsi-location-header .elementor-element-12f7b9a,
.marsi-location-header .elementor-element-54a9f697 {
	position: static;
}

.marsi-location-header .elementor-element-48da4a6e {
	position: relative;
}

/* ---------- Menu ---------- */
.marsi-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.marsi-nav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0 25px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.marsi-nav__list > li {
	margin: 0;
	padding: 0;
}

.marsi-nav__list > li > a {
	display: flex;
	align-items: center;
	padding: 0;
	font-family: "Mohave", sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 20px;
	text-transform: uppercase;
	text-decoration: none;
	color: #272727;
	transition: color 0.4s;
}

.marsi-nav__list > li > a:hover,
.marsi-nav__list > li > a:focus-visible,
.marsi-nav__list > li.current-menu-item > a,
.marsi-nav__list > li.current_page_item > a,
.marsi-nav__list > li.current-menu-ancestor > a {
	color: #bdaf82;
}

.marsi-nav__toggle {
	display: none;
}

@media (max-width: 1200px) {
	.marsi-nav {
		justify-content: flex-end;
	}

	.marsi-nav__toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 33px;
		height: 33px;
		margin: 0;
		padding: 5.5px;
		font-size: 22px;
		line-height: 1;
		color: #272727;
		background: transparent;
		border: 0;
		border-radius: 0;
		cursor: pointer;
	}

	.marsi-nav__toggle:hover,
	.marsi-nav__toggle:focus-visible {
		color: #aca298;
		background: transparent;
	}

	.marsi-nav__icon-close,
	.marsi-nav.is-open .marsi-nav__icon-open {
		display: none;
	}

	.marsi-nav.is-open .marsi-nav__icon-close {
		display: inline-block;
	}

	/* Top edge as Pro drew it: toggle bottom (47px) + dropdown top distance (10px default, 29px tablet, 0 mobile). */
	.marsi-nav__list {
		position: absolute;
		top: 57px;
		left: 0;
		right: 0;
		z-index: 2;
		display: block;
		max-height: 0;
		overflow: hidden;
		background: #fff;
		transition: max-height 0.3s;
	}

	.marsi-nav.is-open .marsi-nav__list {
		max-height: calc(100vh - 76px);
	}

	/* Scrollable only after the opening animation, so no scrollbar flashes while it grows. */
	.marsi-nav.is-open.is-scrollable .marsi-nav__list {
		overflow-y: auto;
	}

	.marsi-nav__list > li {
		border-bottom: 1px solid #272727;
	}

	.marsi-nav__list > li > a {
		padding: 10px 20px;
		font-weight: 400;
	}
}

@media (max-width: 1024px) {
	.marsi-nav__list {
		top: 76px;
	}

	.marsi-nav__list > li > a {
		padding: 20px;
	}
}

@media (max-width: 767px) {
	.marsi-nav__list {
		top: 47px;
	}
}

/* ---------- Cart button ---------- */
.marsi-cart__toggle {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 12px 24px;
	font-size: 15px;
	line-height: 15px;
	color: #272727;
	background: transparent;
	border: 0;
	border-radius: 0;
	cursor: pointer;
}

.marsi-cart__toggle:hover,
.marsi-cart__toggle:focus-visible {
	color: #bdaf82;
	background: transparent;
}

.marsi-cart__icon {
	position: relative;
	display: inline-flex;
	font-size: 15px;
}

.marsi-cart__count {
	position: absolute;
	top: -7px;
	left: 6px;
	min-width: 16px;
	height: 16px;
	padding: 0 3px;
	box-sizing: border-box;
	font-family: -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 10px;
	font-weight: 400;
	line-height: 16px;
	text-align: center;
	color: #fff;
	background: #d9534f;
	border-radius: 100px;
}

/* ---------- Off-canvas mini cart ---------- */
.marsi-minicart {
	position: fixed;
	inset: 0;
	z-index: 9998;
	visibility: hidden;
	background-color: rgba(0, 0, 0, 0);
	transition: background-color 0.4s, visibility 0s linear 0.4s;
}

.marsi-minicart.is-open {
	visibility: visible;
	background-color: rgba(0, 0, 0, 0.25);
	transition: background-color 0.4s;
}

.marsi-minicart__overlay {
	position: absolute;
	inset: 0;
}

.marsi-minicart__panel {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	width: 350px;
	max-width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: 20px 30px;
	overflow-y: auto;
	font-size: 14px;
	line-height: 21px;
	color: #333;
	background: #fff;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
	transform: translateX(100%);
	transition: transform 0.3s;
}

.marsi-minicart.is-open .marsi-minicart__panel {
	transform: none;
}

.marsi-minicart__close {
	align-self: flex-end;
	width: 25px;
	height: 24px;
	margin: 0 0 20px;
	padding: 0;
	font-size: 20px;
	line-height: 1;
	color: #272727;
	background: transparent;
	border: 0;
	cursor: pointer;
}

.marsi-minicart__close:hover,
.marsi-minicart__close:focus-visible {
	color: #bdaf82;
	background: transparent;
}

.marsi-minicart__item {
	position: relative;
	display: grid;
	grid-template-columns: 28% auto;
	grid-template-rows: auto auto;
	padding: 20px 30px 20px 0;
	border-bottom: 1px solid #d5d8dc;
}

.marsi-minicart__item:first-child {
	padding-top: 0;
}

.marsi-minicart__item:last-child {
	border-bottom: 0;
}

.marsi-minicart__image {
	grid-row: 1 / 3;
}

.marsi-minicart__image img {
	display: block;
	width: 100%;
	height: auto;
}

.marsi-minicart__name {
	grid-column: 2;
	padding-inline-start: 20px;
	line-height: 24px;
}

.marsi-minicart__name a {
	font-family: "Mohave", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	text-decoration: none;
	color: #272727;
	transition: color 0.3s;
}

.marsi-minicart__name a:hover {
	color: #bdaf82;
}

.marsi-minicart__qty {
	grid-column: 2;
	align-self: end;
	padding-inline-start: 20px;
	font-size: 14px;
	font-weight: 300;
	line-height: 24px;
	color: #d5d8dc;
}

.marsi-minicart__remove {
	position: absolute;
	right: 0;
	bottom: 20px;
	width: 22px;
	height: 22px;
	box-sizing: border-box;
	border: 1px solid #272727;
	border-radius: 50%;
	transition: border-color 0.3s;
}

.marsi-minicart__remove::before,
.marsi-minicart__remove::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 1px;
	background: #272727;
	transition: background 0.3s;
}

.marsi-minicart__remove::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.marsi-minicart__remove::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.marsi-minicart__remove:hover {
	border-color: #bdaf82;
}

.marsi-minicart__remove:hover::before,
.marsi-minicart__remove:hover::after {
	background: #bdaf82;
}

.marsi-minicart__buttons {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-top: 20px;
}

.marsi-minicart__button {
	display: block;
	padding: 15px;
	font-family: "Mohave", sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 16px;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	color: #272727;
	background: transparent;
	border: 1px solid #272727;
	border-radius: 100px;
	transition: color 0.3s, border-color 0.3s;
}

.marsi-minicart__button:hover,
.marsi-minicart__button:focus-visible {
	color: #bdaf82;
	border-color: #bdaf82;
}

.marsi-minicart__empty {
	margin: 0;
	font-family: "Mohave", sans-serif;
	font-size: 16px;
	text-align: center;
	color: #272727;
}