/* Selvacrafts header (.sc-header) — child-owned, uses global tokens.
 * Markup: templates/headers/selvacrafts-header.php */

.ts-header.sc-header {
	--ts-hd-cart-count-bg: var(--accent);
	--ts-hd-cart-count-color: #ffffff;
	--ts-menu-color: var(--ink);
	--ts-menu-hover: var(--accent);
	background: var(--bg);
	border-bottom: 1px solid var(--line);
	/*box-shadow: 0 10px 26px rgba(64, 41, 92, 0.06);*/
	position: relative;
	z-index: 50;
}

.sc-header .sc-header-shell,
.sc-header .sc-header-main {
	background: #ffffff;
}

.sc-header .sc-header-main>.container {
	align-items: center;
	display: flex;
	gap: 24px;
	justify-content: space-between;
	min-height: 78px;
	position: relative;
}

.sc-header .sc-logo-wrapper {
	left: 50%;
	position: absolute;
	transform: translateX(-50%);
	pointer-events: none;
}

.sc-header .sc-logo-wrapper .logo,
.sc-header .sc-logo-wrapper .logo a {
	pointer-events: auto;
}

.sc-header .sc-header-left,
.sc-header .sc-header-right,
.sc-header .sc-utility-links {
	align-items: center;
	display: flex;
}

.sc-header .sc-header-left {
	justify-content: flex-start;
	min-width: 0;
}

.sc-header .sc-header-right {
	gap: 10px;
	justify-content: flex-end;
	min-width: 0;
}

.sc-header .sc-utility-links {
	gap: 22px;
	margin-right: 4px;
}

.sc-header .sc-utility-links .sc-secondary-menu ul.menu,
.sc-header .sc-utility-links nav.sc-secondary-menu ul {
	align-items: center;
	display: flex;
	gap: 22px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sc-header .sc-utility-links .sc-secondary-menu li {
	margin: 0;
}

.sc-header .sc-primary-menu nav>ul.menu {
	align-items: center;
	display: flex;
	gap: 26px;
	margin: 0;
}

.sc-header .sc-primary-menu nav>ul.menu>li {
	margin: 0;
}

.sc-header .sc-primary-menu nav>ul.menu>li>a,
.sc-header .sc-utility-links a {
	color: var(--ink);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .06em;
	line-height: 1.2;
	padding: 30px 0 27px;
	position: relative;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

.sc-header .sc-primary-menu nav>ul.menu>li.current-menu-item>a,
.sc-header .sc-primary-menu nav>ul.menu>li.current_page_item>a,
.sc-header .sc-primary-menu nav>ul.menu>li:hover>a,
.sc-header .sc-utility-links a:hover {
	color: var(--accent);
}

/* Animated underline.
 * One ::after pseudo per menu link. Width: 0 by default, grows to 100%
 * on hover or when the link is the current page — same animation in both
 * states. Mirrors selvacrafts-theme-1 .nav-link::after. */
.sc-header .sc-primary-menu nav>ul.menu>li>a:after,
.sc-header .sc-utility-links a:after {
	background: var(--accent);
	border-radius: 999px;
	bottom: 20px;
	content: "";
	height: 2px;
	left: 0;
	position: absolute;
	width: 0;
	transition: width .25s ease;
}

.sc-header .sc-primary-menu nav>ul.menu>li:hover>a:after,
.sc-header .sc-primary-menu nav>ul.menu>li.current-menu-item>a:after,
.sc-header .sc-primary-menu nav>ul.menu>li.current_page_item>a:after,
.sc-header .sc-primary-menu nav>ul.menu>li.current-menu-ancestor>a:after,
.sc-header .sc-utility-links a:hover:after,
.sc-header .sc-utility-links li.current-menu-item>a:after {
	width: 100%;
}

/* Suppress any inherited ::before underline emall paints on top-level
 * nav links (parent theme + dynamic_style.php can both add one). */
.sc-header .sc-primary-menu nav>ul.menu>li>a:before,
.sc-header .sc-utility-links a:before {
	content: none !important;
	display: none !important;
	background: none !important;
	border: none !important;
}

/* --- Submenu / mega-menu drop position ---------------------------------
 * emall paints the submenu's white background via an ::after pseudo with
 * top: 25px — so the top 25px of every dropdown was transparent and the
 * page background showed through as a "grey strip" under the header.
 *
 * Two fixes:
 *  1. Snap the ::after to top: 0 so the white panel starts at the
 *     dropdown's top edge (no transparent zone).
 *  2. Tighten the dropdown's own padding so items sit flush near the top
 *     instead of leaving 69px of empty white above them. */
.ts-header.sc-header nav>ul.menu li ul.sub-menu {
	padding-top: 24px;
	padding-bottom: 24px;
}

.ts-header.sc-header nav>ul.menu li ul.sub-menu:after {
	top: 0;
}

/* --- Mini account dropdown form ----------------------------------------
 * emall positions the "Forget Password?" link with
 *   transform: translate(0, -100%); float: right; position: relative;
 *   top: 20px; margin-top: -20px;
 * so it floats to the right of the Remember-Me checkbox row. Any
 * font/line-height shift breaks that and overlaps the LOG IN button.
 * Unwind the float so it flows normally as a block below the button. */
.sc-header .my-account-wrapper .forget-password {
	transform: none;
	float: none;
	position: static;
	top: auto;
	margin-top: 10px;
	display: block;
	line-height: 1.4;
	text-align: left;
}

.sc-header .my-account-wrapper .create-account-wrapper {
	clear: none;
	margin-top: 14px;
}

/* Login-form dropdown: anchor to the right edge of the account icon and
 * give the form room to breathe. Only the not-logged-in variant — the
 * logged-in account menu list keeps emall's narrow 220px panel. */
body:not(.logged-in) .sc-header .my-account-wrapper .dropdown-container {
	left: auto;
	right: -25%;
	margin-left: 0;
	min-width: 350px;
}

.sc-header .sc-logo-wrapper {
	min-width: 180px;
	text-align: center;
}

.sc-header .sc-logo-wrapper .logo a {
	color: var(--accent);
	display: inline-flex;
	font-family: var(--font-display);
	font-size: 30px;
	font-weight: var(--dw);
	letter-spacing: 0;
	line-height: 1;
	text-decoration: none;
}

.sc-header .sc-logo-wrapper .logo img {
	max-height: 64px;
	width: auto;
}

.sc-header .hot-deals,
.sc-header .track-order {
	align-items: center;
	display: flex;
	margin: 0;
	padding: 0;
}

.sc-header .hot-deals i,
.sc-header .track-order i {
	color: var(--gold);
	font-size: 15px;
	margin-right: 7px;
}

.sc-header .search-button.search-icon,
.sc-header .my-account-wrapper,
.sc-header .my-wishlist-wrapper,
.sc-header .shopping-cart-wrapper {
	align-items: center;
	display: inline-flex;
	height: 38px;
	justify-content: center;
	min-width: 34px;
}

.sc-header .search-button.search-icon .icon,
.sc-header .my-wishlist-wrapper .tini-wishlist,
.sc-header .my-account-wrapper .account-control>a,
.sc-header .shopping-cart-wrapper .cart-control {
	align-items: center;
	border-radius: 999px;
	color: var(--ink);
	display: inline-flex;
	height: 36px;
	justify-content: center;
	padding: 0;
	width: 36px;
}

.sc-header .search-button.search-icon .icon:hover,
.sc-header .my-wishlist-wrapper .tini-wishlist:hover,
.sc-header .my-account-wrapper .account-control>a:hover,
.sc-header .shopping-cart-wrapper .cart-control:hover {
	background: var(--accent-tint);
	color: var(--accent);
}

.sc-header .shopping-cart-wrapper .cart-control .cart-number,
.sc-header .my-wishlist-wrapper .tini-wishlist .count-number {
	background: #f44336;
	color: #ffffff;
}

/* Mobile layout — hamburger + centered logo + utilities.
 * Aligned with emall's native phone breakpoint (<=767). At 768-991 the
 * desktop layout shows; emall's <=767 native drawer handles mobile. */
@media only screen and (max-width: 767px) {
	.sc-header .sc-header-main>.container {
		gap: 12px;
		min-height: 66px;
	}

	.sc-header .sc-mobile-toggle {
		align-items: center;
		display: flex !important;
		justify-content: flex-start;
	}

	.sc-header .sc-mobile-toggle .ts-mobile-icon-toggle {
		align-items: center;
		border-radius: 999px;
		color: var(--ink);
		cursor: pointer;
		display: inline-flex;
		height: 38px;
		justify-content: center;
		width: 38px;
	}

	/* Inject the icomoon hamburger glyph (emall only does this <=767). */
	.sc-header .sc-mobile-toggle .ts-mobile-icon-toggle .icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		color: var(--ink);
	}

	.sc-header .sc-mobile-toggle .ts-mobile-icon-toggle .icon:before {
		content: "\e93d";
		font-family: 'icomoon';
		font-weight: normal;
		font-size: 18px;
		line-height: 1;
		color: var(--ink);
	}

	.sc-header .sc-mobile-toggle .ts-mobile-icon-toggle:hover .icon,
	.sc-header .sc-mobile-toggle .ts-mobile-icon-toggle:hover .icon:before {
		color: var(--accent);
	}

	.sc-header .sc-logo-wrapper {
		min-width: 0;
	}

	.sc-header .sc-logo-wrapper .logo a {
		font-size: 24px;
	}

	.sc-header .sc-logo-wrapper .logo img {
		max-height: 56px;
	}

	.sc-header .sc-header-right {
		gap: 6px;
	}

	.sc-header .search-button.search-icon .icon,
	.sc-header .shopping-cart-wrapper .cart-control {
		height: 34px;
		width: 34px;
	}
}


@media only screen and (max-width: 480px) {
	.sc-header .sc-header-main>.container {
		padding-left: 14px;
		padding-right: 14px;
	}
}