/**
 * header.css
 * WHAT: Top announcement bar (marquee), header grid (logo | centered search | icons), live-search dropdown, main menu (active color, gradient text, NEW/HOT/SALE badges), left mobile drawer, mobile search popup.
 * NOTE: Breakpoints: 1024px tablet, 720px phone (search moves to the bottom-bar popup, menu becomes the drawer).
 * Loaded by inc/assets.php (order matters: later files may override earlier ones).
 */
.hn-topbar{
	background:var(--green);
	color:#fff;
	font-size:13px;
}
.hn-topbar__in{
	display:flex;
	justify-content:space-between;
	gap:16px;
	padding-block:7px;
}
.hn-topbar span,.hn-topbar a{
	display:inline-flex;
	align-items:center;
	gap:6px;
}
.hn-topbar__links{
	gap:18px!important;
}
.hn-header{
	background:#fff;
	position:sticky;
	top:0;
	z-index:50;
	box-shadow:0 1px 0 var(--line);
}
.hn-logo__txt{
	display:flex;
	flex-direction:column;
	line-height:1;
	font-family:var(--serif);
	color:var(--green-d);
}
.hn-logo__txt strong{
	font-size:28px;
	letter-spacing:.06em;
}
.hn-logo__txt small{
	font:600 11px var(--sans);
	letter-spacing:.3em;
	color:var(--orange);
	margin-top:4px;
}
.hn-logo__txt--light{
	color:#fff;
}
.hn-logo__txt--light small{
	color:#cfe6c0;
}
.custom-logo{
	max-height:56px;
	width:auto;
}
.hn-actions{
	display:flex;
	gap:22px;
	margin-left:auto;
}
.hn-actions a{
	position:relative;
	display:flex;
	flex-direction:column;
	align-items:center;
	font-size:12px;
	gap:2px;
}
.hn-count{
	position:absolute;
	top:-6px;
	right:-2px;
	min-width:18px;
	height:18px;
	border-radius:9px;
	background:var(--orange);
	color:#fff;
	font-size:11px;
	line-height:18px;
	text-align:center;
	padding-inline:4px;
}
.hn-burger{
	display:none;
	background:none;
	border:0;
	padding:6px;
	color:var(--green-d);
	cursor:pointer;
}
.hn-nav{
	border-top:1px solid var(--line);
	background:#fff;
}
.hn-menu{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:4px 26px;
}
.hn-menu a{
	display:block;
	padding:11px 0;
	font-size:14px;
	font-weight:500;
	border-bottom:2px solid transparent;
}
.hn-menu a:hover,.hn-menu .current-menu-item>a{
	color:var(--orange);
	border-color:var(--orange);
}
@media (max-width:1024px){
	.hn-actions span:not(.hn-count){
		display:none;
	}
}
@media (max-width:720px){
	.hn-topbar span:not(:first-child){
		display:none;
	}
	.hn-topbar__in{
		justify-content:center;
	}
	.hn-actions a:nth-child(1){
		display:none;
	}
	.hn-menu{
		flex-direction:column;
		gap:0;
	}
	.hn-menu a{
		padding:12px 0;
		border-bottom:1px solid var(--line);
	}
}
.hn-topbar__in{
	align-items:center;
}
.hn-marquee{
	flex:1;
	min-width:0;
	overflow:hidden;
	-webkit-mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
	mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
}
.hn-marquee__track{
	display:flex;
	width:max-content;
	animation:hn-marq var(--dur,30s) linear infinite;
}
.hn-marquee:hover .hn-marquee__track{
	animation-play-state:paused;
}
.hn-marquee ul{
	display:flex;
	flex:none;
}
.hn-marquee li{
	white-space:nowrap;
	padding-inline:28px;
	position:relative;
}
.hn-marquee li::before{
	content:"\2022";
	position:absolute;
	left:-3px;
	color:var(--green-l2);
}
@keyframes hn-marq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
	.hn-marquee__track{
		animation:none;
	}
	.hn-marquee ul[aria-hidden]{
		display:none;
	}
}
.hn-drawer__head,.hn-drawer__foot{
	display:none;
}
.hn-overlay{
	position:fixed;
	inset:0;
	background:#0009;
	z-index:110;
	animation:hn-fade .25s;
}
.hn-overlay[hidden]{
	display:none;
}
@keyframes hn-fade{from{opacity:0}}
html.hn-lock{
	overflow:hidden;
}
@media (max-width:720px){
	.hn-nav{
		display:block;
		position:fixed;
		inset:0 auto 0 0;
		width:min(84vw,320px);
		height:100dvh;
		overflow-y:auto;
		z-index:120;
		background:#fff;
		transform:translateX(-102%);
		visibility:hidden;
		transition:transform .3s ease,visibility 0s .3s;
		box-shadow:6px 0 24px #0003;
		border:0;
	}
	.hn-nav.is-open{
		transform:none;
		visibility:visible;
		transition:transform .3s ease;
	}
	.hn-drawer__head{
		display:flex;
		justify-content:space-between;
		align-items:center;
		padding:16px 20px;
		background:var(--green-l);
		position:sticky;
		top:0;
		z-index: 10;
	}
	.hn-drawer__close{
		background:none;
		border:0;
		font-size:32px;
		line-height:1;
		cursor:pointer;
		color:var(--green-d);
	}
	.hn-drawer__foot{
		display:flex;
		flex-direction:column;
		gap:2px;
		padding:14px 20px 30px;
		background:var(--cream);
		font-size:14px;
	}
	.hn-drawer__foot a{
		padding:8px 0;
	}
	hn-drawer__social-title strong {
	display: block;
	font-size: 15px;
	margin-bottom: 5px;
}

.hn-drawer__social-title p {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: #666;
}

.hn-drawer__social-links {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 14px;
}

.hn-drawer__social-links a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	color: var(--green);
	background: rgba(0, 0, 0, 0.05);
	transition: .25s ease;
}

.hn-drawer__social-links svg {
	width: 19px;
	height: 19px;
	fill: currentColor;
}

.hn-drawer__social-links a:hover {
	color: #fff;
	background: var(--green);
	transform: translateY(-2px);
}
	.hn-nav .hn-wrap{
		padding-inline:20px;
	}
	.hn-menu a{
		font-size:16px;
	}
}
.hn-header__in{
	display:grid;
	grid-template-columns:1fr minmax(0,620px) 1fr;
	align-items:center;
	gap:20px;
	padding-block:12px;
}
.hn-logo{
	justify-self:start;
}
.hn-actions{
	justify-self:end;
	margin-left:0;
}
.hn-search{
	position:relative;
	display:flex;
	align-items:stretch;
	width:100%;
	height:46px;
	background:#fff;
	border:1.5px solid var(--line);
	border-radius:999px;
}
.hn-search:focus-within{
	border-color:var(--green);
	box-shadow:0 0 0 3px var(--green-l);
}
.hn-search input[type=search]{
	flex:1;
	min-width:0;
	border:0;
	background:none;
	padding:0 20px;
	font:inherit;
	border-radius:999px 0 0 999px;
	-webkit-appearance:none;
}
.hn-search input:focus{
	outline:0;
}
.hn-search button{
	flex:none;
	display:grid;
	place-items:center;
	width:56px;
	border:0;
	background:var(--grad-accent);
	color:#fff;
	cursor:pointer;
	border-radius:0 999px 999px 0;
	padding:0;
}
.hn-search button:hover{
	filter:brightness(1.1);
}
.hn-suggest{
	position:absolute;
	top:calc(100% + 8px);
	left:0;
	right:0;
	z-index:130;
	background:#fff;
	border-radius:14px;
	box-shadow:0 12px 32px #0003;
	max-height:min(70vh,460px);
	overflow-y:auto;
	padding:8px;
	text-align:left;
}
.hn-suggest[hidden]{
	display:none;
}
.hn-suggest__label{
	margin:8px 10px 4px;
	font-size:11px;
	letter-spacing:.12em;
	text-transform:uppercase;
	color:var(--muted);
}
.hn-suggest__item{
	display:flex;
	align-items:center;
	gap:12px;
	padding:8px 10px;
	border-radius:10px;
	color:var(--ink);
}
.hn-suggest__item:hover,.hn-suggest__item.is-active{
	background:var(--green-l);
}
.hn-suggest__item img{
	width:44px;
	height:44px;
	border-radius:8px;
	object-fit:cover;
	flex:none;
}
.hn-suggest__t{
	display:flex;
	flex-direction:column;
	min-width:0;
}
.hn-suggest__t strong{
	font-size:14px;
	font-weight:600;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
.hn-suggest__t small{
	color:var(--orange);
	font-weight:600;
}
.hn-suggest__t small.is-out{
	color:#8a8a8a;
}
.hn-suggest__cat{
	font-weight:600;
	font-size:14px;
}
.hn-suggest__none{
	margin:0;
	padding:14px 10px;
	color:var(--muted);
	font-size:14px;
}
.hn-suggest__all{
	display:block;
	margin-top:6px;
	padding:12px 10px;
	text-align:center;
	font-weight:600;
	color:var(--green);
	border-top:1px solid var(--line);
}
.hn-searchpop{
	position:fixed;
	inset:0;
	z-index:300;
	background:#000a;
	display:flex;
	align-items:flex-start;
	justify-content:center;
	padding:12px;
}
.hn-searchpop[hidden]{
	display:none;
}
.hn-searchpop__box{
	width:100%;
	max-width:560px;
	background:#fff;
	border-radius:16px;
	padding:16px;
	margin-top:8px;
}
.hn-searchpop__bar{
	display:flex;
	justify-content:space-between;
	align-items:center;
	margin-bottom:12px;
}
.hn-searchpop__x{
	background:none;
	border:0;
	font-size:30px;
	line-height:1;
	cursor:pointer;
	color:var(--green-d);
}
.hn-searchpop .hn-search{
	background:var(--cream);
}
.hn-searchpop .hn-suggest{
	position:static;
	box-shadow:none;
	margin-top:10px;
	max-height:52vh;
	padding:0;
}
.hn-searchpop__hint{
	margin:16px 0 8px;
	font-size:12px;
	letter-spacing:.1em;
	text-transform:uppercase;
	color:var(--muted);
}
.hn-chips2{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
}
.hn-chips2 a{
	display:block;
	padding:8px 14px;
	border-radius:999px;
	background:var(--green-l);
	font-size:14px;
	font-weight:500;
}
.hn-chips2 a:hover{
	background:var(--green);
	color:#fff;
}
.hn-menu li{
	position:relative;
}
.hn-menu .current-menu-item>a,.hn-menu .current-menu-ancestor>a,.hn-menu .current-menu-parent>a,.hn-menu >a,.hn-menu .current_page_ancestor>a,.hn-menu .current-cat>a,.hn-menu a[aria-current=page]{
	color:var(--orange);
	border-color:var(--orange);
	font-weight:600;
}

/*.current_page_parent - This class remove from above the active menu*/ 

.hn-menu .hn-grad>a{
	background:linear-gradient(90deg,var(--orange),var(--green-2));
	-webkit-background-clip:text;
	background-clip:text;
	-webkit-text-fill-color:transparent;
	color:transparent;
	font-weight:700;
}
.hn-menu .hn-grad.current-menu-item>a{
	border-color:var(--orange);
}
.hn-menu li[class*=hn-badge-]{
	padding-right:32px;
}
.hn-menu li[class*=hn-badge-]::after{
	position:absolute;
	right:0;
	top:9px;
	font-size:9px;
	font-weight:700;
	letter-spacing:.06em;
	line-height:1;
	color:#fff;
	padding:3px 6px;
	border-radius:999px;
}
.hn-badge-new::after{
	content:"NEW";
	background:linear-gradient(135deg,var(--green),var(--green-2));
}
.hn-badge-hot::after{
	content:"HOT";
	background:var(--grad-accent);
}
.hn-badge-sale::after{
	content:"SALE";
	background:linear-gradient(135deg,#c62828,#ef5350);
}
@media (max-width:1024px){
	.hn-header__in{
		grid-template-columns:auto minmax(0,1fr) auto;
	}
}
@media (max-width:720px){
	.hn-header__in{
		grid-template-columns:auto 1fr auto;
		gap:8px;
	}
	.hn-header__in>.hn-search{
		display:none;
	}
	.hn-burger{
		display:block;
		order:0;
	}
	.hn-logo{
		justify-self:center;
		margin:0;
	}
	.hn-actions{
		justify-self:end;
	}
	.hn-actions a:nth-child(1){
		display:none;
	}
	.hn-searchpop .hn-search{
		display:flex;
	}
	html.hn-drawer-open .hn-header{
		z-index:250;
	}
	.hn-overlay{
		position:fixed;
		inset:0;
		z-index:1;
	}
	.hn-nav{
		display:block;
		position:fixed;
		top:0;
		bottom:0;
		left:0;
		right:auto;
		width:min(84vw,320px);
		height:100dvh;
		overflow-y:auto;
		z-index:2;
		background:#fff;
		transform:translateX(-102%);
		visibility:hidden;
		transition:transform .3s ease,visibility 0s .3s;
		box-shadow:6px 0 24px #0003;
		border:0;
	}
	.hn-nav.is-open{
		transform:none;
		visibility:visible;
		transition:transform .3s ease;
	}
	.hn-menu li{
		display:flex;
		align-items:center;
		justify-content:space-between;
		border-bottom:1px solid var(--line);
	}
	.hn-menu li a{
		flex:1;
		border-bottom:0;
		padding:14px 0;
	}
	.hn-menu li[class*=hn-badge-]{
		padding-right:0;
	}
	.hn-menu li[class*=hn-badge-]::after{
		position:static;
		order:3;
		margin-left:8px;
	}
	.hn-searchpop{
		padding:8px;
	}
}
.hn-count[hidden]{
	display:none;
}
.hn-searchpop .hn-search{
	position:relative;
}
.hn-searchpop .hn-suggest{
	position:absolute;
	top:calc(100% + 8px);
	left:0;
	right:0;
	max-height:55vh;
	box-shadow:0 12px 32px #0003;
	padding:8px;
}
.hn-searchpop__box{
	min-height:200px;
}
.hn-searchpop__box:has(.hn-suggest:not([hidden])) .hn-searchpop__hint,.hn-searchpop__box:has(.hn-suggest:not([hidden])) .hn-chips2{
	visibility:hidden;
}

.hn-account--logged-in {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.hn-account .hn-profile-img {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.hn-account__name {
    display: block;
    max-width: 100px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}