/*
 * Layout primitives for the hand-coded header and footer.
 *
 * The compiled header.css / footer.css set only custom properties (--display,
 * --flex-direction, --gap, --padding-*, --width and so on). Elementor's own
 * frontend CSS is normally what consumes them. This file implements that consumer
 * side for the subset the header and footer use, plus replacements for the two
 * Elementor Pro widgets this build does without: nav-menu and woocommerce-menu-cart.
 *
 * Scoped to .elementor-671 / .elementor-677 so nothing here can leak into page
 * content rendered by Elementor itself.
 */

/* ------------------------------------------------------------- containers */

.elementor-671 .e-con,
.elementor-677 .e-con {
	--flex-direction: column;
	--justify-content: flex-start;
	--align-items: initial;
	--flex-wrap: nowrap;
	--gap: 0px;
	--margin-top: 0px;
	--margin-bottom: 0px;
	--margin-left: 0px;
	--margin-right: 0px;
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;

	position: relative;
	box-sizing: border-box;
	width: 100%;
	margin-block-start: var(--margin-top);
	margin-block-end: var(--margin-bottom);
	margin-inline-start: var(--margin-left);
	margin-inline-end: var(--margin-right);
	z-index: var(--z-index, auto);
}

/* Full-width containers apply their own flex and padding. */
.elementor-671 .e-con.e-con-full,
.elementor-677 .e-con.e-con-full {
	display: var(--display, flex);
	flex-direction: var(--flex-direction);
	justify-content: var(--justify-content);
	align-items: var(--align-items);
	flex-wrap: var(--flex-wrap);
	gap: var(--gap);
	padding-block-start: var(--padding-top);
	padding-block-end: var(--padding-bottom);
	padding-inline-start: var(--padding-left);
	padding-inline-end: var(--padding-right);
	max-width: var(--width, 100%);
	margin-inline: auto;
}

/* Boxed containers stay full-bleed; the inner element carries flex and padding. */
.elementor-671 .e-con.e-con-boxed,
.elementor-677 .e-con.e-con-boxed {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0;
}

.elementor-671 .e-con-boxed > .e-con-inner,
.elementor-677 .e-con-boxed > .e-con-inner {
	display: var(--display, flex);
	flex-direction: var(--flex-direction);
	justify-content: var(--justify-content);
	align-items: var(--align-items);
	flex-wrap: var(--flex-wrap);
	gap: var(--gap);
	padding-block-start: var(--padding-top);
	padding-block-end: var(--padding-bottom);
	padding-inline-start: var(--padding-left);
	padding-inline-end: var(--padding-right);
	width: 100%;
	max-width: var(--content-width, var(--container-max-width));
	margin-inline: auto;
	box-sizing: border-box;
}

/* Widgets sized by their parent container's widget variables. */
.elementor-671 .e-con > .elementor-widget,
.elementor-677 .e-con > .elementor-widget {
	max-width: 100%;
	width: var(--container-widget-width, 100%);
	flex-grow: var(--container-widget-flex-grow, 0);
	align-self: var(--container-widget-align-self, initial);
	box-sizing: border-box;
}

.elementor-671 .elementor-widget:not(:last-child),
.elementor-677 .elementor-widget:not(:last-child) {
	margin-block-end: 0;
}

.elementor-671 img,
.elementor-677 img {
	max-width: 100%;
	height: auto;
	display: block;
}

.elementor-671 .elementor-heading-title,
.elementor-677 .elementor-heading-title {
	margin: 0;
}

/* --------------------------------------------------------- sticky header */

#header_pop {
	position: sticky;
	top: 0;
}

/* ------------------------------------------------------------- nav menu */
/* Stands in for Elementor Pro's widget-nav-menu CSS. */

.elementor-671 .elementor-nav-menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.elementor-671 .elementor-nav-menu--layout-horizontal > .elementor-nav-menu {
	flex-direction: row;
	justify-content: center;
}

.elementor-671 .elementor-nav-menu li {
	position: relative;
}

/*
 * Horizontal item spacing. header.css sets
 * --e-nav-menu-horizontal-menu-item-margin: calc( 50px / 2 ) on the widget and
 * relies on Elementor to consume it; .elementor-item itself carries zero
 * padding, so without these two rules the menu renders as one run-on string.
 */
.elementor-671 .elementor-nav-menu--main:not(.elementor-nav-menu--layout-vertical) .elementor-nav-menu > li:not(:last-child) {
	margin-inline-end: var(--e-nav-menu-horizontal-menu-item-margin, 0);
}

.elementor-671 .elementor-nav-menu--main:not(.elementor-nav-menu--layout-vertical) .elementor-nav-menu > li:not(:first-child) {
	margin-inline-start: var(--e-nav-menu-horizontal-menu-item-margin, 0);
}

.elementor-671 .elementor-nav-menu a {
	display: flex;
	align-items: center;
	text-decoration: none;
	line-height: 1.4;
}

/* Submenus: hidden until their parent item is hovered or focused. */
.elementor-671 ul.elementor-nav-menu--dropdown {
	position: absolute;
	top: 100%;
	inset-inline-start: 0;
	min-width: 240px;
	flex-direction: column;
	align-items: stretch;
	display: none;
	z-index: 100;
	background-color: var(--e-global-color-primary);
}

.elementor-671 .elementor-nav-menu--main li:hover > ul.elementor-nav-menu--dropdown,
.elementor-671 .elementor-nav-menu--main li:focus-within > ul.elementor-nav-menu--dropdown {
	display: flex;
}

/* Burger toggle: desktop hides it, tablet and below swap to the dropdown nav. */
.elementor-671 .elementor-menu-toggle {
	display: none;
	cursor: pointer;
	border: 0;
	background: transparent;
	padding: 8px;
	align-items: center;
	justify-content: center;
	color: var(--e-global-color-text);
}

.elementor-671 .elementor-menu-toggle svg {
	width: 26px;
	height: 26px;
	fill: currentColor;
}

.elementor-671 .elementor-menu-toggle .elementor-menu-toggle__icon--close,
.elementor-671 .elementor-menu-toggle.elementor-active .elementor-menu-toggle__icon--open {
	display: none;
}

.elementor-671 .elementor-menu-toggle.elementor-active .elementor-menu-toggle__icon--close {
	display: block;
}

.elementor-671 nav.elementor-nav-menu--dropdown {
	display: none;
	position: absolute;
	inset-inline: 0;
	top: 100%;
	background-color: var(--e-global-color-primary);
	z-index: 99;
}

.elementor-671 nav.elementor-nav-menu--dropdown.insightful-nav-open {
	display: block;
}

.elementor-671 nav.elementor-nav-menu--dropdown .elementor-nav-menu {
	flex-direction: column;
	align-items: stretch;
}

.elementor-671 nav.elementor-nav-menu--dropdown ul.elementor-nav-menu--dropdown {
	position: static;
	display: flex;
	min-width: 0;
}

@media (max-width: 1024px) {
	.elementor-671 .elementor-nav-menu--main {
		display: none;
	}
	.elementor-671 .elementor-menu-toggle {
		display: flex;
	}
}

/* ----------------------------------------------------------------- cart */
/* Stands in for Elementor Pro's woocommerce-menu-cart CSS. The captured site
   used a side-cart flyout; this build links straight to the cart page. */

.elementor-671 .elementor-menu-cart__toggle_button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var(--e-global-color-text);
	white-space: nowrap;
}

.elementor-671 .elementor-button-icon {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.elementor-671 .elementor-button-icon svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
}

.elementor-671 .elementor-button-icon-qty {
	position: absolute;
	top: -8px;
	inset-inline-end: -10px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 9px;
	font-size: 11px;
	line-height: 18px;
	text-align: center;
	background-color: var(--e-global-color-accent);
	color: var(--e-global-color-primary);
	box-sizing: border-box;
}

.elementor-671 .elementor-screen-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

/* ----------------------------------------------------------- icon lists */

.elementor-677 .elementor-icon-list-items {
	list-style: none;
	margin: 0;
	padding: 0;
}

.elementor-677 .elementor-icon-list-item {
	display: flex;
}

.elementor-677 .elementor-icon-list-item > a {
	display: flex;
	align-items: center;
	width: 100%;
	text-decoration: none;
}