/*
 * 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.
 */

/* ------------------------------------------------- main content container */
/*
 * emoza wraps main content in `.container.content-wrapper`, which carries a
 * fixed max-width and side padding. Its own Elementor integration neutralises
 * that — but only when Elementor Pro has registered a `single` or `archive`
 * theme-builder location:
 *
 *     .container.content-wrapper { max-width: 100%; padding: 0; }
 *     @see emoza-woocommerce/inc/plugins/elementor/elementor.php:40
 *
 * The live original gets that for free because it runs Elementor Pro. This
 * build deliberately does not, so the rule never loads and the shop grid ends
 * up narrower than the original with heavy side margins. Applying emoza's own
 * declaration unconditionally restores the original's full-bleed layout.
 */
/*
 * margin:0 as well as padding:0 — emoza gives this wrapper margin-top:80px,
 * which stacks with ul.products' own 25px for a 105px gap under the header.
 * Measured on the original that gap is exactly 25px, because the wrapper does
 * not exist there at all. Neutralising the whole box, not just its width,
 * reproduces that.
 */
.container.content-wrapper {
	max-width: 100%;
	padding: 0;
	margin: 0;
}

/*
 * emoza nests <main> inside `.row.main-row`, a Bootstrap-style row whose
 * -15px side margins exactly cancel main's own 15px padding — netting a zero
 * page gutter (main actually starts at left:-15px). The live original has no
 * row wrapper at all, so main's 15px reads as a real gutter. Zeroing the
 * negative margins reproduces that: grid inset 15px each side, as measured on
 * the original.
 */
.row.main-row {
	margin-left: 0;
	margin-right: 0;
}

/* ------------------------------------------------------------- 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;
	/*
	 * 10px is Elementor's real default container padding, not 0. Containers that
	 * set their own --padding-* in header.css/footer.css still win; the one that
	 * relies on the default is the promo toast, whose measured height on the
	 * original is 36.8px = 16.8px of text + 10px top + 10px bottom.
	 */
	--padding-top: 10px;
	--padding-bottom: 10px;
	--padding-left: 10px;
	--padding-right: 10px;

	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: Elementor splits the padding across the two elements —
 * horizontal on the outer, so its background runs full-bleed, and vertical on
 * the width-constrained inner. Measured on the original's promo toast:
 *
 *   outer .elementor-element-ba58064 : padding 0 / 10px, content 1291 x 36.797
 *   inner .e-con-inner               : padding 10px / 0, margin-inline auto,
 *                                      max-width 1140px, content 1140 x 16.797
 *
 * 16.797 of text + 10 top + 10 bottom = the 36.8px toast height.
 */
.elementor-671 .e-con.e-con-boxed,
.elementor-677 .e-con.e-con-boxed {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-block: 0;
	padding-inline: var(--padding-left) var(--padding-right);
}

.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: var(--padding-top) var(--padding-bottom);
	padding-inline: 0;
	width: 100%;
	max-width: var(--content-width, var(--container-max-width));
	margin-inline: auto;
	box-sizing: border-box;
}

/*
 * Widgets size to their own content; only vertical alignment comes from the
 * container.
 *
 * Deliberately NOT applying --container-widget-width or
 * --container-widget-flex-grow here. Both inherit from the row, where they are
 * 'calc((1 - 1) * 100%)' and '1' — so every widget grew and the logo/cart
 * stretched to 140px each, swallowing the gaps. On the original all three
 * widgets compute flex-grow:0 and take their natural size (logo 172px from its
 * img rule, cart 88px, nav 876px from header.css's own width declaration), and
 * space-between then distributes the slack as even 20px gaps. Elementor only
 * applies the width variable to widgets flagged .elementor-widget__width-initial
 * — which the nav carries and the logo and cart do not.
 */
.elementor-671 .e-con > .elementor-widget,
.elementor-677 .e-con > .elementor-widget {
	max-width: 100%;
	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 */

/*
 * Sticky is applied to <header>, not to #header_pop as the captured Elementor
 * settings imply. A sticky element can only travel within its containing block,
 * and #header_pop's parent is <header>, which is only as tall as the header
 * itself — so it would unstick immediately and scroll away. Elementor Pro dodges
 * this by switching to position:fixed from JS; sticking the header element is the
 * equivalent without any script.
 *
 * The promo toast is deliberately rendered as a sibling *before* <header> rather
 * than inside it (see template-parts/header-insightful.php), so only the nav row
 * is pinned and the toast scrolls away — which is what the original does.
 */
/*
 * display:flow-root establishes a block formatting context so the toast
 * container's own margin-top:8px stays *inside* this wrapper. Without it the
 * margin collapses through, the wrapper starts at y=8 instead of y=0, and the
 * #212121 body shows as a grey strip above the toast. On the original that 8px
 * sits inside <header>, which is painted black — hence the explicit background
 * here, since the toast container itself is transparent.
 */
.insightful-toast-bar {
	position: static;
	display: flow-root;
	background-color: var(--e-global-color-primary);
}

header.elementor-671 {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* Don't slide under the WP admin bar when logged in. */
body.admin-bar header.elementor-671 {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar header.elementor-671 {
		top: 46px;
	}
}

/* ------------------------------------------------------------- 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;
}

/*
 * Padding only — the horizontal margins below are what create the 25px item
 * spacing and must survive. emoza's stylesheet puts 5px of bottom padding on
 * nav <li>s; Elementor Pro's nav CSS zeroes it on the original, so without this
 * the li measures 51px instead of 46px and inflates the whole row to 81px.
 */
.elementor-671 .elementor-nav-menu li {
	position: relative;
	padding: 0;
}

/*
 * 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);
}

/*
 * line-height 1.25 (= 20px at the 16px nav size), not 1.4. With the 13px/13px
 * link padding this yields a 46px content box and a 76px nav row, matching the
 * original exactly; 1.4 made the row 83.4px.
 */
.elementor-671 .elementor-nav-menu a {
	display: flex;
	align-items: center;
	text-decoration: none;
	line-height: 1.25;
}

/*
 * The row sets --container-widget-align-self:stretch, so each widget fills the
 * row's full height. Their *contents* then sit at the top unless centred — which
 * is why the logo and cart rode high compared with the original.
 */
.elementor-671 .elementor-element-5bb20794 > .elementor-widget {
	display: flex;
	align-items: center;
}

.elementor-671 .elementor-element-5bb20794 > .elementor-widget > .elementor-widget-container {
	width: 100%;
}

/*
 * Hold the nav widget at its declared 158px — header.css sets --flex-shrink:0 on it
 * but nothing wires that to the property, so it otherwise collapses onto the toggle.
 * With the nav held at 158 and the cart filling the row to its right (header.css
 * width:100% at <=1024), the logo / burger / cart pack like the original WITHOUT
 * pinning the row to a fixed width. An earlier version DID pin the row to --width
 * (1200px) to match the original's tablet layout to the pixel, but that let the row —
 * and the absolutely-positioned mobile dropdown whose containing block it is —
 * overflow the viewport, so the mobile menu centred its items within 1200px instead
 * of the screen. The boxed row (max-width only, from the generic .e-con-full rule)
 * keeps every container within 100% of its parent.
 */
.elementor-671 .elementor-element-34b4ca15 {
	flex-shrink: 0;
}

/*
 * Vertical padding on the links, measured at 13px/13px on the original. This is
 * Elementor Pro's nav-menu base — header.css only zeroes the horizontal padding,
 * so without this the nav row renders 63px tall instead of 76px.
 */
.elementor-671 .elementor-nav-menu .elementor-item {
	padding-top: 13px;
	padding-bottom: 13px;
}

/*
 * Submenu caret, measured on the original: the .sub-arrow box is 26 x 36 from
 * `padding: 10px 0 10px 10px` around a 16px icon, with `margin: -10px 0` so the
 * vertical padding does not grow the 46px link. The negative margins are load
 * bearing — without them the nav row gets taller.
 *
 * Size matters beyond the arrow itself: the menu is centre-justified, so a
 * caret ~9px too narrow shifted every item ~4px right of the original.
 */
.elementor-671 .elementor-nav-menu .sub-arrow {
	display: flex;
	align-items: center;
	padding: 10px 0 10px 10px;
	margin: -10px 0;
}

.elementor-671 .elementor-nav-menu .sub-arrow svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

/*
 * Submenus: hidden until their parent item is hovered or focused.
 *
 * No list styling — these are <ul>/<li> without the .elementor-nav-menu class,
 * so the reset further up does not reach them and browser bullets show through.
 * Background and link colours come from header.css (#C3B9A5 panel, #FFFFFF
 * links, 20px/11px padding); only structure is set here.
 */
.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;
	list-style: none;
	margin: 0;
	padding: 0;
}

.elementor-671 ul.elementor-nav-menu--dropdown li {
	list-style: none;
}

/*
 * Let the top-level item fill the nav's height so its bottom edge meets the
 * submenu, and bridge the row's bottom padding with a transparent strip inside
 * the submenu. Without both, the pointer crosses dead space on the way down,
 * :hover drops, and the submenu vanishes before it can be clicked.
 */
.elementor-671 .elementor-nav-menu--main > .elementor-nav-menu > li {
	align-self: stretch;
	display: flex;
	align-items: center;
}

.elementor-671 .elementor-nav-menu--main > .elementor-nav-menu > li > ul.elementor-nav-menu--dropdown::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: -24px;
	height: 24px;
}

.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;
}

/*
 * Elementor Pro applies a `.highlighted` class from JavaScript on hover, which
 * header.css styles. Without Pro's script that class never appears, so :hover is
 * mapped to the same treatment, plus the gold used elsewhere in the header.
 */
.elementor-671 .elementor-nav-menu--dropdown a:hover,
.elementor-671 .elementor-nav-menu--dropdown a.highlighted {
	background-color: rgba(0, 0, 0, 0);
	color: #d3b574;
	fill: #d3b574;
}

/* 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;
	/*
	 * Match the original's toggle box. On the original the nav widget's container
	 * is a flex box, so the toggle sizes to its content and margin-left:auto (from
	 * header.css) pushes it to the right; here the container is a block, so without
	 * an explicit content-width the toggle stretches to fill the whole nav slot.
	 * max-content restores the compact box: 5.5px padding around a 22px icon = 33x33.
	 */
	width: max-content;
	padding: 5.5px;
	align-items: center;
	justify-content: center;
	/* the original rounds the white toggle box by 3px */
	border-radius: 3px;
	color: var(--e-global-color-text);
}

.elementor-671 .elementor-menu-toggle svg {
	width: 22px;
	height: 22px;
	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;
}

/*
 * header.css carries `margin-top:20px !important` on the submenu dropdowns — intended
 * for the desktop hover submenu (which has a transparent ::before bridge for it), but
 * it also lands on the FULL mobile dropdown, opening a 20px see-through strip between
 * the sticky nav bar and the menu. It's most obvious once the promo toast has scrolled
 * away and the sticky header pins to the top, since page content then shows through the
 * strip. Zero it for the mobile dropdown only (by #id, to beat the !important); the
 * desktop submenu keeps its gap + hover bridge.
 */
#insightful-mobile-nav {
	margin-top: 0 !important;
}

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

/* Mobile dropdown links are centred like the original's mobile menu — both the
   top-level (.elementor-item) and the submenu (.elementor-sub-item) links, which
   are flex, so justify-content does the centring. */
.elementor-671 nav.elementor-nav-menu--dropdown .elementor-item,
.elementor-671 nav.elementor-nav-menu--dropdown .elementor-sub-item {
	justify-content: center;
	text-align: center;
}

/* The Contact-us caret is in-flow, so it drags the parent label ~13px left of the
   centre the other items sit at. Balance it with left padding equal to the caret's
   box (a 16px icon + 10px left padding = 26px, on top of the link's own 11px) so the
   label itself centres while the caret stays tucked beside it. The #id keeps this
   above header.css's own (0,4,1) padding rule on the dropdown links. */
#insightful-mobile-nav .menu-item-has-children > .elementor-item {
	padding-left: 37px;
}

/*
 * The Contact-us submenu is COLLAPSED by default in the mobile menu — the original
 * shows only the six top-level items until the caret is tapped. The header script
 * adds .insightful-subnav-open to the parent <li> to expand it. Without this the
 * rebuild dumped About / Shipping / Privacy inline, flush with the top-level links,
 * so they read as stray top-level entries.
 */
.elementor-671 nav.elementor-nav-menu--dropdown ul.elementor-nav-menu--dropdown {
	position: static;
	display: none;
	min-width: 0;
}
.elementor-671 nav.elementor-nav-menu--dropdown li.insightful-subnav-open > ul.elementor-nav-menu--dropdown {
	display: flex;
}

@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. */

/*
 * Collapse the cart widget's line-box so the toggle centres in the row. The
 * container inherits a 26.88px line-height and is taller than the 24px toggle,
 * leaving it sitting ~8px above centre against the logo and nav.
 */
/*
 * Cart widget metrics, measured on the original:
 *   widget            88px  (container 68 + 20px margin-right)
 *   toggle_button  68 x 44  (padding 12px 24px around a 20px icon)
 * The 20px margin matters: the row is space-between, so the widget's width
 * decides how the slack is shared. At 44px wide the gaps came out 42px instead
 * of 20px, pushing the nav right and the cart to the viewport edge.
 */
.elementor-671 .elementor-element-9262335 > .elementor-widget-container {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	line-height: 1;
	margin-inline-end: 20px;
}

/*
 * In burger mode (<=1024px) the nav widget shrinks to the toggle, so the row's
 * slack flows to the cart widget, which grows to ~747px. The original keeps the
 * cart icon at the START of that grown box (tucked beside the burger); the
 * desktop-tuned flex-end above would push it to the far edge / off-screen. This
 * override is placed AFTER that rule so it wins at equal specificity. Verified vs
 * the original: cart icon x438 at 1000, x287 at 390.
 */
@media (max-width: 1024px) {
	.elementor-671 .elementor-element-9262335 > .elementor-widget-container {
		justify-content: flex-start;
	}
}

.elementor-671 .elementor-menu-cart__wrapper,
.elementor-671 .elementor-menu-cart__toggle {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	line-height: 1;
}

.elementor-671 .elementor-menu-cart__toggle_button {
	padding: 12px 24px;
}

.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;
}

/* 20px, measured on the original's cart toggle (68px button = 24 + 20 + 24). */
.elementor-671 .elementor-button-icon svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

/*
 * macOS-style notification badge: red pill, white text, overlapping the icon's
 * top-right. Rendered only when the cart is non-empty (see
 * insightful_cart_link_contents), matching the original's
 * elementor-menu-cart--empty-indicator-hide behaviour.
 */
.elementor-671 .elementor-button-icon-qty {
	position: absolute;
	top: -7px;
	inset-inline-end: -9px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9px;
	font-size: 11px;
	font-weight: 600;
	line-height: 18px;
	text-align: center;
	background-color: #ff3b30;
	color: #ffffff;
	box-shadow: 0 0 0 2px 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;
}

/* -------------------------------------------------- floating chat CTA */
/*
 * Replaces the original's Chaty widget. Values mirror its live settings:
 * right position, 25px bottom/side spacing, white pill with #333 text.
 *
 * On the original the store notice is fixed to the bottom and covers this,
 * so the CTA is only reachable after dismissing the banner. That is not
 * reproduced: --insightful-notice-offset is set from the notice's measured
 * height (see footer-insightful.php), lifting the CTA clear of it, and the
 * z-index sits above the notice.
 */
.insightful-chat-cta {
	position: fixed;
	/* Match the original's Chaty widget: 29px in from the right, 25px up — which
	   on the original overlaps the store notice (the CTA is not lifted above it). */
	right: 29px;
	bottom: 25px;
	z-index: 100001;
	display: flex;
	align-items: center;
	gap: 10px;
}

.insightful-chat-cta__label {
	background-color: #ffffff;
	color: #333333;
	font-size: 17px;
	line-height: 1;
	padding: 12px 16px;
	border-radius: 10px;
	white-space: nowrap;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.insightful-chat-cta__button {
	display: flex;
	align-items: center;
	justify-content: center;
	/* Chaty telegram bubble on the original: 54px, #3e99d8 (not Telegram brand blue). */
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background-color: #3e99d8;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
	text-decoration: none;
	flex: 0 0 auto;
}

.insightful-chat-cta__button svg {
	width: 28px;
	height: 28px;
	fill: #ffffff;
	/* nudge for the paper plane's optical centre */
	margin-right: 2px;
}

.insightful-chat-cta__button:hover,
.insightful-chat-cta__button:focus {
	background-color: #3184c1;
}

@media (max-width: 767px) {
	.insightful-chat-cta {
		right: 16px;
		bottom: 16px;
	}
	.insightful-chat-cta__label {
		display: none;
	}
}

/* -------------------------------------------------------- footer columns */
/*
 * footer.css gives each footer column its own --width (40 / 30 / 25 / 35%),
 * which Elementor uses as the flex basis; the four then shrink proportionally
 * to 315 / 236 / 197 / 275px on the original. The generic .e-con rule sets
 * width:100%, so flex split the row into four equal 256px columns instead.
 *
 * Deliberately scoped to this row's *direct* children rather than applying
 * var(--width) on .e-con globally. --width is a custom property and inherits,
 * so a global rule makes nested containers compound their ancestor's percentage
 * and collapses the header and footer entirely — verified the hard way.
 */
.elementor-677 .elementor-element-153b9294 > .e-con {
	width: var(--width, 100%);
}

/* ----------------------------------------------------------- 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;
}