/* ============================================================
 * Novelty Technologies — light two-row header
 *
 * Colour roles: navy = chrome (All-Categories button, cart count),
 * blue = actions (search submit, link hovers, phone chip).
 *
 * Structure:
 *   1. Universal skin  — white bar, search pill, cart, call/account
 *      blocks, All-Categories button, badges. Colours only, every width.
 *   2. Desktop layout  — the two rows via flex + a row-break divider.
 *      >=992px only, so it never fights Shoptimizer's mobile header.
 *   3. Mobile           — let the theme's native mobile header stand;
 *      re-skin it light and make the below-header search sit on the bar.
 * ============================================================ */

/* Brand tokens (--nv-navy / --nv-blue / --nv-ink / --nv-muted / --nv-line)
 * are defined once in catalogue.css, which is enqueued site-wide ahead of
 * this file. Only header-specific tokens live here. */
:root {
	--nv-hdr-bg: #ffffff;
	--nv-search-border: #d8dadf;
	--nv-hover-tint: #eef4fb;  /* menu hover background (blue tint) */
}

/* ============================================================
 * 1. UNIVERSAL SKIN
 * ============================================================ */

.site-header,
.site-header .main-header,
.header-5 .site-header {
	background: var(--nv-hdr-bg) !important;
	border-bottom: 1px solid var(--nv-line) !important;
	box-shadow: none !important;
}
.site-header .main-header a { color: var(--nv-ink); }
.site-header .site-branding .custom-logo,
.site-header .site-branding img { width: auto !important; }

/* ---------- Search pill ---------- */
.site-header .site-search .widget,
.site-header .site-search .widget_product_search { margin: 0; padding: 0; }
.site-header .site-search form.woocommerce-product-search {
	display: flex !important;
	align-items: stretch;
	width: 100%;
	height: 46px;
	border: 1px solid var(--nv-search-border);
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
	position: relative;
}
.site-header .site-search form.woocommerce-product-search:focus-within {
	border-color: var(--nv-blue);
	box-shadow: 0 0 0 3px rgba(0, 113, 188, .18);
}
.site-header .site-search input[type="search"],
.site-header .site-search input.search-field {
	flex: 1 1 auto !important;
	width: auto !important;
	height: 100% !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 14px 0 44px !important;   /* left room for the decorative magnifier */
	border: 0 !important;
	border-radius: 0 !important;
	background: #fff !important;
	color: var(--nv-ink) !important;
	font-size: 15px;
	box-shadow: none !important;
	outline: 0 !important;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa0a8' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: 15px center !important;
	background-size: 18px !important;
}
.site-header .site-search input[type="search"]::placeholder { color: #9aa0a8; }
.site-header .site-search form.woocommerce-product-search button,
.site-header .site-search form.woocommerce-product-search button[type="submit"] {
	flex: 0 0 54px !important;
	width: 54px !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background-color: var(--nv-blue) !important;
	color: #fff !important;
	font-size: 0 !important;
	line-height: 0 !important;
	text-indent: -9999px;
	white-space: nowrap;
	overflow: hidden;
	cursor: pointer;
	position: static !important;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 22px !important;
}
.site-header .site-search form.woocommerce-product-search button:hover {
	background-color: var(--nv-blue-dark) !important;
}
/* Neutralise any theme search-icon pseudo-element that would overlap the field */
.site-header .site-search:before,
.site-header .site-search form.woocommerce-product-search:before { content: none !important; }

/* ---------- Call / Account blocks ---------- */
.nv-hdr-info {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	white-space: nowrap;
}
.nv-hdr-ic {
	width: 44px;
	height: 44px;
	flex: 0 0 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f3f4f6;
}
.nv-hdr-ic svg { width: 22px; height: 22px; }
.nv-hdr-call .nv-hdr-ic { background: var(--nv-blue-soft); color: var(--nv-blue); }
.nv-hdr-account .nv-hdr-ic { background: #f3f4f6; color: var(--nv-ink); }
.nv-hdr-tx { display: flex; flex-direction: column; line-height: 1.2; }
.nv-hdr-tx .nv-l1 { font-size: 12px; color: var(--nv-muted); font-weight: 400; }
.nv-hdr-tx .nv-l2 { font-size: 15px; color: var(--nv-ink); font-weight: 700; }
.nv-hdr-info:hover .nv-l2 { color: var(--nv-blue); }

/* ---------- Cart (icon + "My Cart" + count badge) ---------- */
.site-header .site-header-cart,
.header-5 .site-header .site-header-cart { background: transparent !important; }
.site-header .shoptimizer-cart { background: transparent !important; }
.site-header a.cart-contents {
	position: relative;
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	height: auto !important;
	line-height: 1.1 !important;
	padding: 6px 4px !important;
	color: var(--nv-ink) !important;
	font-weight: 600;
	font-size: 14px;
}
.site-header a.cart-contents .amount { display: none !important; }
.site-header a.cart-contents:before {
	content: "";
	width: 30px;
	height: 30px;
	flex: 0 0 30px;
	background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.4'/%3E%3Ccircle cx='18' cy='20' r='1.4'/%3E%3Cpath d='M2.5 3.5h2.2l2.3 12.2h11l2-8.5H6.2'/%3E%3C/svg%3E") no-repeat center / 26px;
}
.site-header a.cart-contents:after { content: "My Cart"; color: var(--nv-ink); font-weight: 600; }
.site-header a.cart-contents .count {
	position: absolute;
	top: -3px;
	left: 20px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border: 0 !important;
	border-radius: 9px;
	background-color: var(--nv-navy) !important;
	color: #fff !important;
	font-size: 11px;
	font-weight: 700;
	line-height: 17px;
	text-align: center;
}
.site-header a.cart-contents .count:after { content: none !important; }
.site-header a.cart-contents:hover:after { color: var(--nv-blue); }

/* ---------- All Categories button + dropdown ---------- */
.nv-allcats { position: relative; }
.nv-allcats-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--nv-navy);
	color: #fff !important;
	text-decoration: none;
	font-weight: 700;
	font-size: 15px;
	padding: 12px 18px;
	border-radius: 8px;
	line-height: 1;
}
.nv-allcats-btn .nv-ic { width: 18px; height: 18px; }
.nv-allcats-btn .nv-chev { transition: transform .15s ease; }
.nv-allcats:hover .nv-allcats-btn,
.nv-allcats:focus-within .nv-allcats-btn { background: var(--nv-navy-dark); }
.nv-allcats:hover .nv-chev,
.nv-allcats:focus-within .nv-chev { transform: rotate(180deg); }
.nv-allcats-menu {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 60;
	min-width: 260px;
	margin: 0;
	padding: 6px 0;
	list-style: none;
	background: #fff;
	border: 1px solid var(--nv-line);
	border-radius: 8px;
	box-shadow: 0 12px 30px rgba(15, 23, 42, .14);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
}
.nv-allcats:hover .nv-allcats-menu,
.nv-allcats:focus-within .nv-allcats-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.nv-allcats-menu li { margin: 0; padding: 0; }
.nv-allcats-menu a {
	display: block;
	padding: 9px 18px;
	font-size: 14px;
	color: var(--nv-ink) !important;
	text-decoration: none;
}
.nv-allcats-menu a:hover { background: var(--nv-hover-tint); color: var(--nv-blue) !important; }

/* ---------- Delivery badges ---------- */
.nv-hdr-badges { display: flex; align-items: center; gap: 10px; }
.nv-badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: #f6f7f8;
	border: 1px solid var(--nv-line);
	border-radius: 22px;
	padding: 8px 14px;
	font-size: 13px;
	font-weight: 600;
	color: var(--nv-ink);
	white-space: nowrap;
}
.nv-badge .nv-ic { width: 17px; height: 17px; color: var(--nv-blue); }

/* ============================================================
 * 2. DESKTOP LAYOUT (two rows via flex) — >=992px
 * ============================================================ */
@media (min-width: 992px) {

	/* The "Main" menu is on both primary & secondary locations, so the theme
	 * prints the nav twice: once inside .main-header (.secondary-navigation,
	 * which we use as the row-2 links) and again below in .col-full-nav. Hide
	 * the second copy on desktop only — on mobile it powers the burger drawer. */
	.col-full-nav,
	.shoptimizer-primary-navigation { display: none !important; }

	/* Desktop never shows the mobile controls. */
	.site-header .menu-toggle,
	.site-header .mobile-search-toggle,
	.site-header .shoptimizer-myaccount { display: none !important; }

	.site-header .main-header {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 14px;
		padding: 14px 16px !important;
		max-width: 1500px;
	}
	/* Row break + hairline divider between the two rows */
	.site-header .main-header::after {
		content: "";
		flex-basis: 100%;
		height: 1px;
		background: var(--nv-line);
		margin: 4px 0;
		order: 6;
	}

	/* Row 1 */
	.site-header .site-branding {
		order: 1;
		flex: 0 0 auto;
		height: auto !important;
		margin: 0;
		padding: 0;
		display: flex;
		align-items: center;
	}
	.site-header .site-branding .custom-logo,
	.site-header .site-branding img { max-height: 54px !important; }

	.site-header .site-search {
		order: 2;
		flex: 1 1 340px;
		min-width: 260px;
		margin: 0;
		padding: 0 !important;
		max-width: none;
	}

	.nv-hdr-call { order: 3; }
	.nv-hdr-account { order: 4; }

	.site-header .site-header-cart,
	.header-5 .site-header .site-header-cart {
		order: 5;
		flex: 0 0 auto;
		height: auto !important;
		margin: 0;
		padding: 0;
		display: flex !important;
		align-items: center !important;
	}

	/* Row 2 */
	.nv-allcats { order: 7; flex: 0 0 auto; }

	.site-header .secondary-navigation {
		order: 8;
		flex: 1 1 auto;
		width: auto;
		margin: 0;
		padding: 0;
		background: transparent !important;
		float: none !important;
	}
	.site-header .secondary-navigation .menu-main-container { width: 100%; }
	.site-header .secondary-navigation ul.menu {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 2px;
		margin: 0;
		padding: 0;
		list-style: none;
		float: none !important;
	}
	.site-header .secondary-navigation ul.menu > li { margin: 0; padding: 0; float: none !important; }
	.site-header .secondary-navigation ul.menu > li > a {
		display: block;
		padding: 10px 12px;
		font-size: 15px;
		font-weight: 600;
		color: var(--nv-ink) !important;
		text-decoration: none;
		border-radius: 6px;
		line-height: 1.2;
	}
	.site-header .secondary-navigation ul.menu > li > a:hover {
		color: var(--nv-blue) !important;
		background: var(--nv-hover-tint);
	}

	.nv-hdr-badges { order: 9; flex: 0 0 auto; }

	/* Sticky header keeps the white skin */
	.is_stuck .site-header,
	.is_stuck .main-header { background: var(--nv-hdr-bg) !important; }
}

/* ============================================================
 * 3. MOBILE (<992px) — keep the theme's native mobile header,
 *    just apply the light skin.
 * ============================================================ */
@media (max-width: 991px) {

	.site-header,
	.site-header .main-header { background: #fff !important; }

	/* Desktop-only pieces don't belong on the mobile bar */
	.nv-hdr-info,
	.nv-allcats,
	.nv-hdr-badges,
	.site-header .secondary-navigation { display: none !important; }

	/* Logo: theme mobile sizing, just capped */
	.site-header .site-branding .custom-logo,
	.site-header .site-branding img { max-height: 34px !important; }

	/* Hamburger: dark bars + label on the white bar */
	.site-header .menu-toggle,
	.site-header .site-branding button.menu-toggle,
	.site-header .site-branding button.menu-toggle:hover {
		background-color: transparent !important;
		box-shadow: none !important;
	}
	.site-header .menu-toggle .bar,
	.site-header .menu-toggle:hover .bar { background-color: var(--nv-ink) !important; }
	.site-header .menu-toggle .bar-text,
	.site-header .menu-toggle:hover .bar-text { color: var(--nv-ink) !important; }

	/* Mobile top-bar icons (search toggle, account) dark on white */
	.site-header .mobile-search-toggle svg,
	.site-header .shoptimizer-myaccount svg { stroke: var(--nv-ink); }

	/* Cart: icon only (drop the "My Cart" label to save room) */
	.site-header a.cart-contents:after { content: none !important; }

	/* Below-header search sits on the white bar */
	.m-search-bh .site-header .site-search,
	.m-search-toggled .site-header .site-search {
		background: #fff !important;
		box-shadow: none !important;
		padding: 0 12px 10px !important;
	}
	.site-header .site-search form.woocommerce-product-search { height: 44px; }
}