/* Keralcart Site Settings — layout, spacing and hover fixes for the Elementor header (template 2763).
 *
 * Elements (data-id):
 *   9030a0a  old "moving" top bar (now empty)
 *   5b3553a  logo / search / cart-wishlist-WhatsApp row
 *     27805dc > 3a6c8b0 logo     a41eba9 > c74836d search
 *     50b2e56 > ea90ddb > b35bbe1 cart, 55a0906 > 890e942 wishlist, 5c3f604 > a17217e WhatsApp icon
 *   695e77a  green nav row
 *     62067f6 > 82e742b "Browse All Categories"   abbfe23 > f056120 menu   0c68c43 > f317ff9 social icons
 */

:root {
	--kc-hdr-green: #355d3f;
	--kc-hdr-gold: #d9b45b;
	--kc-hdr-wa: #25d366;
	--kc-hdr-max: 1440px;
	--kc-hdr-gutter: 24px;
}

/* 1. The old top bar renders as an empty 20px green band; hide it while it has no content. */
.elementor-2763 .elementor-element.elementor-element-9030a0a:not(:has(*)) {
	display: none !important;
}

/* Mobile/tablet: the search row had margin-top:-29px to tuck under that old band; with the band gone
 * it slid under the contact strip. */
@media (max-width: 1024px) {
	.elementor-2763 .elementor-element.elementor-element-a1b6826 {
		margin-top: 0 !important;
		padding-top: 6px !important;
		padding-bottom: 6px !important;
	}
}

/* 2. Desktop layout: one shared content width (same as the contact strip) for every header row. */
@media (min-width: 1025px) {
	.elementor-2763 .elementor-element.elementor-element-5b3553a > .e-con-inner,
	.elementor-2763 .elementor-element.elementor-element-695e77a > .e-con-inner {
		max-width: var(--kc-hdr-max) !important;
		padding-left: var(--kc-hdr-gutter) !important;
		padding-right: var(--kc-hdr-gutter) !important;
		align-items: center !important;
		justify-content: space-between !important;
		gap: 24px !important;
	}
	/* The outer rows add 10px side padding on top of the inner box; drop it so the edges match the strip. */
	.elementor-2763 .elementor-element.elementor-element-5b3553a,
	.elementor-2763 .elementor-element.elementor-element-695e77a {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	/* The row had margin -26px top / -25px bottom (left over from the old top bar): it slid up under the page
	 * top (cutting the logo) and the nav row covered its bottom. Use real padding instead. */
	.elementor-2763 .elementor-element.elementor-element-5b3553a { margin-top: 0 !important; margin-bottom: 0 !important; }
	.elementor-2763 .elementor-element.elementor-element-5b3553a > .e-con-inner { padding-top: 0 !important; padding-bottom: 0 !important; }
	/* Inline images/icons sat on a 30px text line, adding ~10px under the logo and 2–4px under the icons:
	 * remove that so every item is truly centred and the space above/below the row is equal. */
	.elementor-2763 .elementor-element.elementor-element-3a6c8b0,
	.elementor-2763 .elementor-element.elementor-element-3a6c8b0 a,
	.elementor-2763 .elementor-element.elementor-element-50b2e56,
	.elementor-2763 .elementor-element.elementor-element-50b2e56 .elementor-widget-container,
	.elementor-2763 .elementor-element.elementor-element-a17217e .elementor-icon-wrapper { line-height: 0 !important; }
	.elementor-2763 .elementor-element.elementor-element-3a6c8b0 a { display: block !important; }
	.elementor-2763 .elementor-element.elementor-element-695e77a > .e-con-inner { padding-top: 8px !important; padding-bottom: 8px !important; }

	/* Undo the negative/positive offsets that pushed the logo, Browse button and icon group out of the box. */
	.elementor-2763 .elementor-element.elementor-element-3a6c8b0,
	.elementor-2763 .elementor-element.elementor-element-82e742b,
	.elementor-2763 .elementor-element.elementor-element-50b2e56 {
		margin: 0 !important;
	}

	/* Logo left, search fills the middle, icon group right. */
	.elementor-2763 .elementor-element.elementor-element-27805dc,
	.elementor-2763 .elementor-element.elementor-element-62067f6,
	.elementor-2763 .elementor-element.elementor-element-0c68c43 {
		--width: auto; width: auto !important; flex: 0 0 auto !important; padding: 0 !important;
	}
	.elementor-2763 .elementor-element.elementor-element-a41eba9 {
		--width: auto; width: auto !important; flex: 1 1 auto !important; max-width: 620px; padding: 0 !important;
	}
	.elementor-2763 .elementor-element.elementor-element-c74836d { width: 100% !important; }

	/* Logo: keep its original size (~128x85) and sit flush with the left edge. */
	.elementor-2763 .elementor-element.elementor-element-3a6c8b0 { width: auto !important; text-align: left !important; }
	.elementor-2763 .elementor-element.elementor-element-3a6c8b0 img {
		width: auto !important; max-width: 140px !important; height: auto !important; max-height: 85px !important; display: block;
	}

	/* Menu centred between "Browse All Categories" and the social icons. */
	.elementor-2763 .elementor-element.elementor-element-f056120 { width: 100% !important; }
	.elementor-2763 .elementor-element.elementor-element-f056120 .elementor-nav-menu--main > .elementor-nav-menu {
		justify-content: center !important;
	}
	.elementor-2763 .elementor-element.elementor-element-abbfe23 {
		--width: auto; width: auto !important; flex: 1 1 auto !important; padding: 0 !important;
	}
	.elementor-2763 .elementor-element.elementor-element-0c68c43 { justify-content: flex-end !important; }

	/* Cart / Wishlist / WhatsApp: one aligned row, no fixed or zero widths. */
	.elementor-2763 .elementor-element.elementor-element-50b2e56,
	.elementor-2763 .elementor-element.elementor-element-ea90ddb {
		--width: auto; width: auto !important; flex: 0 0 auto !important; padding: 0 !important;
	}
	.elementor-2763 .elementor-element.elementor-element-ea90ddb {
		display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
		align-items: center !important; justify-content: flex-end !important; gap: 20px !important;
	}
	.elementor-2763 .elementor-element.elementor-element-55a0906,
	.elementor-2763 .elementor-element.elementor-element-5c3f604 {
		--width: auto; width: auto !important; margin: 0 !important; padding: 0 !important;
		display: flex !important; align-items: center !important;
	}
	.elementor-2763 .elementor-element.elementor-element-b35bbe1,
	.elementor-2763 .elementor-element.elementor-element-890e942,
	.elementor-2763 .elementor-element.elementor-element-a17217e {
		width: auto !important; max-width: none !important; margin: 0 !important;
	}
}

/* 3. WhatsApp icon link */
.kc-header-wa {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; border-radius: 50%;
	color: var(--kc-hdr-green); line-height: 0;
	transition: color .2s ease, background-color .2s ease, transform .2s ease;
}
.kc-header-wa .elementor-icon-wrapper,
.kc-header-wa .elementor-icon { display: inline-flex; line-height: 0; }
.kc-header-wa svg { width: 26px !important; height: 26px !important; fill: currentColor !important; }
.kc-header-wa:hover { color: var(--kc-hdr-wa); background: rgba(37, 211, 102, .12); transform: scale(1.08); }
/* Elementor colours the icon via .elementor-element-a17217e .elementor-icon; follow the link colour instead. */
.elementor-2763 .elementor-widget-icon .kc-header-wa .elementor-icon,
.elementor-2763 .elementor-widget-icon .kc-header-wa .elementor-icon svg {
	color: inherit !important; fill: currentColor !important; transition: fill .2s ease, color .2s ease;
}

/* 4. Hover / focus states */
/* Main menu (Home, Shop, Cart, Blog, Contact): gold text + underline on hover and on the current page. */
.elementor-2763 .elementor-element.elementor-element-f056120 .elementor-nav-menu--main .elementor-item {
	position: relative;
	transition: color .2s ease;
}
.elementor-2763 .elementor-element.elementor-element-f056120 .elementor-nav-menu--main .elementor-item::after {
	content: ""; position: absolute; left: 20px; right: 20px; bottom: 6px; height: 2px;
	background: var(--kc-hdr-gold); border-radius: 2px; opacity: 1;
	transform: scaleX(0); transform-origin: center; transition: transform .2s ease;
}
.elementor-2763 .elementor-element.elementor-element-f056120 .elementor-nav-menu--main .elementor-item:hover,
.elementor-2763 .elementor-element.elementor-element-f056120 .elementor-nav-menu--main .elementor-item:focus-visible,
.elementor-2763 .elementor-element.elementor-element-f056120 .elementor-nav-menu--main .elementor-item.elementor-item-active {
	color: var(--kc-hdr-gold) !important;
}
.elementor-2763 .elementor-element.elementor-element-f056120 .elementor-nav-menu--main .elementor-item:hover::after,
.elementor-2763 .elementor-element.elementor-element-f056120 .elementor-nav-menu--main .elementor-item:focus-visible::after,
.elementor-2763 .elementor-element.elementor-element-f056120 .elementor-nav-menu--main .elementor-item.elementor-item-active::after {
	transform: scaleX(1);
}

/* "Browse All Categories": solid white with green label instead of faded grey. */
@media (min-width: 1025px) {
	.elementor-2763 .elementor-element.elementor-element-82e742b .elementor-nav-menu--main > .elementor-nav-menu > li > a {
		transition: background-color .2s ease, color .2s ease;
	}
	.elementor-2763 .elementor-element.elementor-element-82e742b:hover .elementor-nav-menu--main > .elementor-nav-menu > li > a,
	.elementor-2763 .elementor-element.elementor-element-82e742b .elementor-nav-menu--main > .elementor-nav-menu > li > a.highlighted,
	.elementor-2763 .elementor-element.elementor-element-82e742b .elementor-nav-menu--main > .elementor-nav-menu > li > a:focus-visible {
		background-color: #fff !important;
		color: var(--kc-hdr-green) !important;
		opacity: 1 !important;
	}
	.elementor-2763 .elementor-element.elementor-element-82e742b:hover .elementor-nav-menu--main > .elementor-nav-menu > li > a svg,
	.elementor-2763 .elementor-element.elementor-element-82e742b .elementor-nav-menu--main > .elementor-nav-menu > li > a.highlighted svg {
		fill: var(--kc-hdr-green) !important;
	}
}

/* Cart: no box border on hover; icon + label turn brand green. */
.elementor-2763 .elementor-element.elementor-element-b35bbe1 .elementor-menu-cart__toggle .elementor-button {
	transition: color .2s ease;
}
.elementor-2763 .elementor-element.elementor-element-b35bbe1 .elementor-menu-cart__toggle .elementor-button:hover,
.elementor-2763 .elementor-element.elementor-element-b35bbe1 .elementor-menu-cart__toggle .elementor-button:focus-visible {
	border-color: transparent !important;
	background-color: transparent !important;
	color: var(--kc-hdr-green) !important;
}
.elementor-2763 .elementor-element.elementor-element-b35bbe1 .elementor-menu-cart__toggle .elementor-button:hover .elementor-button-icon,
.elementor-2763 .elementor-element.elementor-element-b35bbe1 .elementor-menu-cart__toggle .elementor-button:hover .elementor-button-text {
	color: var(--kc-hdr-green) !important;
}
.elementor-2763 .elementor-element.elementor-element-b35bbe1 .elementor-menu-cart__toggle .elementor-button:hover svg {
	fill: var(--kc-hdr-green) !important;
}

/* Wishlist: green on hover (was a low-contrast orange). */
.elementor-2763 .elementor-element.elementor-element-890e942 a { transition: color .2s ease; }
.elementor-2763 .elementor-element.elementor-element-890e942 a:hover,
.elementor-2763 .elementor-element.elementor-element-890e942 a:hover * {
	color: var(--kc-hdr-green) !important;
}

/* Nav social icons: clear gold circle with green icon on hover. */
.elementor-2763 .elementor-element.elementor-element-f317ff9 .ekit_social_media > li > a {
	transition: background-color .2s ease, color .2s ease;
}
.elementor-2763 .elementor-element.elementor-element-f317ff9 .ekit_social_media > li > a:hover,
.elementor-2763 .elementor-element.elementor-element-f317ff9 .ekit_social_media > li > a:focus-visible {
	background-color: var(--kc-hdr-gold) !important;
	color: var(--kc-hdr-green) !important;
}
.elementor-2763 .elementor-element.elementor-element-f317ff9 .ekit_social_media > li > a:hover svg,
.elementor-2763 .elementor-element.elementor-element-f317ff9 .ekit_social_media > li > a:focus-visible svg {
	fill: var(--kc-hdr-green) !important;
}

/* Keyboard focus rings */
.elementor-2763 .elementor-location-header a:focus-visible,
.elementor-2763 a:focus-visible,
.kc-header-wa:focus-visible {
	outline: 2px solid var(--kc-hdr-gold);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.kc-header-wa,
	.elementor-2763 .elementor-element.elementor-element-f056120 .elementor-nav-menu--main .elementor-item::after { transition: none; }
	.kc-header-wa:hover { transform: none; }
}

/* 5. Cart / Wishlist / WhatsApp: same 28px icons, same badge at each icon's top-right corner. */
:root {
	--kc-hdr-icon: 28px;
	--kc-hdr-badge: 18px;
	--kc-hdr-badge-bg: #e94b35;
	--kc-hdr-label: #44544a;
}

/* Cart (Elementor menu cart): icon box + label */
.elementor-2763 .elementor-element.elementor-element-b35bbe1 .elementor-menu-cart__toggle .elementor-button {
	display: inline-flex !important; align-items: center !important; gap: 8px !important;
	padding: 6px 4px !important; border: 0 !important; background: transparent !important;
	color: var(--kc-hdr-label) !important;
}
.elementor-2763 .elementor-element.elementor-element-b35bbe1 .elementor-menu-cart__toggle .elementor-button::after {
	font-family: inherit !important; font-size: 15px !important; font-weight: 500 !important; line-height: 1 !important; color: inherit !important;
}
.elementor-2763 .elementor-element.elementor-element-b35bbe1 .elementor-menu-cart__toggle .elementor-button-icon {
	position: relative !important;
	display: inline-flex !important; align-items: center; justify-content: center;
	width: var(--kc-hdr-icon) !important; height: var(--kc-hdr-icon) !important;
	font-size: var(--kc-hdr-icon) !important; line-height: 1 !important; margin: 0 !important;
	color: var(--kc-hdr-green) !important;
}
.elementor-2763 .elementor-element.elementor-element-b35bbe1 .elementor-menu-cart__toggle .elementor-button-icon svg,
.elementor-2763 .elementor-element.elementor-element-b35bbe1 .elementor-menu-cart__toggle .elementor-button-icon i {
	width: var(--kc-hdr-icon) !important; height: var(--kc-hdr-icon) !important; font-size: var(--kc-hdr-icon) !important;
	fill: currentColor !important;
}
.elementor-2763 .elementor-element.elementor-element-b35bbe1 .elementor-menu-cart__toggle .elementor-button-icon-qty {
	position: absolute !important;
	top: -6px !important; right: -8px !important; left: auto !important; bottom: auto !important;
	inset-inline-start: auto !important; inset-inline-end: -8px !important;
	display: inline-flex !important; align-items: center; justify-content: center;
	min-width: var(--kc-hdr-badge) !important; height: var(--kc-hdr-badge) !important; padding: 0 4px !important;
	border-radius: 999px !important; border: 2px solid #fff !important; box-sizing: border-box !important;
	background: var(--kc-hdr-badge-bg) !important; color: #fff !important;
	font-size: 10px !important; font-weight: 700 !important; line-height: 1 !important;
	transform: none !important;
}

/* Wishlist (WPC Smart Wishlist shortcode): replace the 35px "♡" text glyph with a 28px outline heart. */
.elementor-2763 .elementor-element.elementor-element-890e942 .woosw-link {
	position: relative !important;
	display: inline-flex !important; align-items: center !important; gap: 8px !important;
	padding: 6px 4px !important; color: var(--kc-hdr-label) !important;
}
.elementor-2763 .elementor-element.elementor-element-890e942 .woosw-link::before {
	content: "" !important;
	display: inline-block !important; flex: 0 0 auto;
	width: var(--kc-hdr-icon) !important; height: var(--kc-hdr-icon) !important;
	font-size: 0 !important; line-height: 0 !important; margin: 0 !important;
	background-color: var(--kc-hdr-green) !important;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.elementor-2763 .elementor-element.elementor-element-890e942 .woosw-link a { color: inherit !important; text-decoration: none !important; }
.elementor-2763 .elementor-element.elementor-element-890e942 .woosw-link-inner {
	position: static !important;
	font-size: 15px !important; font-weight: 500 !important; line-height: 1 !important; color: var(--kc-hdr-label) !important;
}
/* Badge: anchored to .woosw-link (left edge = icon's left edge), so 28px icon -> top-right at left:18px. */
.elementor-2763 .elementor-element.elementor-element-890e942 .woosw-link-inner::after {
	position: absolute !important;
	top: 0 !important; left: 22px !important; right: auto !important; bottom: auto !important;
	display: inline-flex !important; align-items: center; justify-content: center;
	min-width: var(--kc-hdr-badge) !important; width: auto !important; height: var(--kc-hdr-badge) !important; padding: 0 4px !important;
	border-radius: 999px !important; border: 2px solid #fff !important; box-sizing: border-box !important;
	background: var(--kc-hdr-badge-bg) !important; color: #fff !important;
	font-size: 10px !important; font-weight: 700 !important; line-height: 1 !important;
	transform: none !important;
}

/* WhatsApp: same 28px icon in a 40px hit area */
.elementor-2763 .elementor-widget-icon .kc-header-wa svg { width: var(--kc-hdr-icon) !important; height: var(--kc-hdr-icon) !important; }

/* Hover: label + icon turn brand green together */
.elementor-2763 .elementor-element.elementor-element-890e942 .woosw-link:hover .woosw-link-inner { color: var(--kc-hdr-green) !important; }
.elementor-2763 .elementor-element.elementor-element-890e942 .woosw-link:hover::before { background-color: var(--kc-hdr-green-dark, #06442f) !important; }

/* 6. Nav-row social icons: all networks from Settings → Keralcart Site (replaces the ElementsKit list). */
.kc-nav-social {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: nowrap;
	gap: 4px;
}
.kc-nav-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	color: #fff !important;
	text-decoration: none !important;
	transition: background-color .2s ease, color .2s ease;
}
.kc-nav-social a .kc-ico { width: 16px; height: 16px; }
.kc-nav-social a:hover,
.kc-nav-social a:focus-visible {
	background: var(--kc-hdr-gold);
	color: var(--kc-hdr-green) !important;
}
.kc-nav-social a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Mobile header shows the icons on a white bar */
@media (max-width: 1024px) {
	.kc-nav-social a { color: var(--kc-hdr-green) !important; width: 30px; height: 30px; }
}
@media (max-width: 380px) {
	.kc-nav-social .kc-social-threads,
	.kc-nav-social .kc-social-google { display: none; }
}

/* 7. Old scrolling "Made in Small Batches … Contact Us" bar: it is 100vw wide with negative margins,
 * which caused ~8–15px sideways scroll on every page (home.css fixed it only on the home page). */
.elementor-element.elementor-element-980ab68 {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	left: auto !important;
	transform: none !important;
}