/* ==========================================================================
   AZW5 Navigation CSS
   Structural layout only — AZ utility classes handle colors/spacing/typography
   ========================================================================== */

/* --- CONTAINER ---  no other container needed, header itself is flex, also give var(--content-w, 1160px) to the header as well as the className gp9 */

/* --- TOP BAR --- */
.azw5-topbar {
	position: relative;
	z-index: 1001;
}

/* --- MAIN HEADER --- */
.azw5-header-zone {
	display: flex;
	align-items: center;
}
.azw5-zone-left {
	flex-shrink: 0;
}
.azw5-zone-center {
	flex: 1;
	justify-content: center;
}
.azw5-zone-right {
	flex-shrink: 0;
}

/* --- BRANDING --- */
.azw5-branding {
	text-decoration: none;
	gap: .5em;
}
.azw5-branding img,
.azw5-branding .custom-logo {
	height: 40px;
	width: auto;
}
.azw5-brand-text {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}

/* --- NAV MENU (desktop) --- */
.azw5-nav-list {
	list-style: none;
	padding: 0;
	gap: .2em;
	align-items: center;
}
.azw5-nav-list li {
	position: relative;
}
.submenu li {
	width: 100%;
}
.azw5-nav-list .m_item_a {
	display: flex;
	align-items: center;
	gap: .3em;
	padding: .5em .8em;
	text-decoration: none;
	color: var(--clr1);
	font-weight: 500;
	white-space: nowrap;
	transition: color .2s, background .2s;
	border-radius: .3em;
}
.azw5-nav-list .m_item_a:hover {
	background: rgba(0,0,0,.03);
}
.azw5-nav-list .slctdItm > .m_item_a {
	font-weight: 700;
}

/* Submenu */
.azw5-nav-list .submenu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 200px;
	background: var(--clr2);
	border: 1px solid rgba(0,0,0,.08);
	border-radius: .5em;
	box-shadow: 0 8px 24px rgba(0,0,0,.12);
	list-style: none;
	margin: 0;
	padding: .4em ;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .2s, transform .2s, visibility .2s;
	z-index: 1001;
}
.azw5-nav-list .has_sbmnu:hover > .submenu,
.azw5-nav-list .has_sbmnu.open > .submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.azw5-nav-list .submenu .m_item_a {
	padding: .5em 1.2em;
	border-radius: 0;
	width: 100%;
}
.azw5-nav-list .submenu .submenu {
	top: 0;
	left: 100%;
}
/* Flip submenu if off-screen right */
.azw5-nav-list .submenu.flip {
	left: auto;
	right: 0;
}

/* --- CTA MENU --- */
.azw5-cta-list {
	list-style: none;
	margin: 0;
	padding: 0;
	gap: .5em;
}
.azw5-cta-list .m_item_a {
	padding: .4em 1em;
	border: 1px solid var(--clr3);
	color: var(--clr3);
	border-radius: 2em;
	font-weight: 600;
	font-size: .9em;
	text-decoration: none;
	transition: all .2s;
	white-space: nowrap;
}
.azw5-cta-list .m_item_a:hover {
	background: var(--clr3);
	color: var(--clr2);
}

/* --- CART ICON --- */
.azw5-cart-link {
	position: relative;
	text-decoration: none;
	color: var(--clr1);
}
.azw5-cart-count {
	position: absolute;
	top: -2px;
	right: -4px;
	background: var(--clr3);
	color: var(--clr2);
	font-size: .5em;
	font-weight: 700;
	min-width: 16px;
	height: 16px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 3px;
	line-height: 1;
}

/* --- UTILS --- */
.azw5-utils {
	align-items: center;
}

/* --- MOBILE TOGGLE --- */
.azw5-menu-btn {
	background: none;
	border: none;
	cursor: pointer;
	color: var(--clr1);
	padding: .3em;
	line-height: 1;
}

/* --- MOBILE OVERLAY --- */
.azw5-mobile-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.5);
	z-index: 9998;
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s, visibility .3s;
}
.azw5-mobile-overlay.active {
	opacity: 1;
	visibility: visible;
}

/* --- MOBILE MENU PANEL --- */
.azw5-mobile-menu {
	position: fixed;
	top: 0;
	bottom: 0;
	width: 300px;
	max-width: 85vw;
	background: var(--clr2);
	color: var(--clr1);
	z-index: 9999;
	overflow-y: auto;
	transition: transform .3s ease;
	display: flex;
	flex-direction: column;
}
.azw5-mobile-menu.slide-left {
	left: 0;
	transform: translateX(-100%);
}
.azw5-mobile-menu.slide-right {
	right: 0;
	transform: translateX(100%);
}
.azw5-mobile-menu.full-overlay {
	left: 0;
	right: 0;
	width: 100%;
	max-width: 100%;
	transform: translateY(-100%);
}
.azw5-mobile-menu.active {
	transform: translate(0);
}
.azw5-mobile-header {
	border-bottom: 1px solid rgba(0,0,0,.1);
	flex-shrink: 0;
}
.azw5-mobile-nav-list {
	list-style: none;
	margin: 0;
	padding: .5em 0;
	flex: 1;
	overflow-y: auto;
}
.azw5-mobile-nav-list li {
	border-bottom: 1px solid rgba(0,0,0,.05);
}
.azw5-mobile-nav-list .m_item_a {
	display: block;
	padding: .8em 1em;
	text-decoration: none;
	color: var(--clr1);
	font-weight: 500;
}
.azw5-mobile-nav-list .submenu {
	position: static;
	opacity: 1;
	visibility: visible;
	transform: none;
	box-shadow: none;
	border: none;
	border-radius: 0;
	display: none;
	padding: 0;
	background: none;
}
.azw5-mobile-nav-list .has_sbmnu.open > .submenu {
	display: block;
}
.azw5-mobile-nav-list .submenu .m_item_a {
	padding-left: 2em;
	font-weight: 400;
	font-size: .95em;
}
.azw5-mobile-nav-list .slctdItm > .m_item_a {
	color: var(--clr3);
}
.azw5-mobile-footer {
	border-top: 1px solid rgba(0,0,0,.1);
	flex-shrink: 0;
}

/* --- SEARCH OVERLAY --- */
.azw5-search-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.85);
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s, visibility .3s;
}
.azw5-search-overlay.active {
	opacity: 1;
	visibility: visible;
}
.azw5-search-overlay form {
	width: 90%;
	max-width: 600px;
}
.azw5-search-overlay input[type="search"] {
	width: 100%;
	padding: 1em 1.5em;
	font-size: 1.2em;
	border: none;
	border-radius: 2em;
	background: var(--clr2);
	color: var(--clr1);
	outline: none;
}
.azw5-search-close {
	position: absolute;
	top: 1em;
	right: 1em;
	background: none;
	border: none;
	color: white;
	font-size: 2em;
	cursor: pointer;
}

/* --- FOOTER --- */
.azw5-footer {
	background: var(--clr1);
	color: var(--clr2);
	padding: 3em 1em 1em;
}
.azw5-footer-inner {
	max-width: var(--content-w, 1160px);
	margin: 0 auto;
}
.azw5-footer-nav {
	min-width: 150px;
}
.azw5-footer-nav h4 {
	font-size: 1em;
	font-weight: 700;
	margin-bottom: .8em;
}
.azw5-footer-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.azw5-footer-nav li {
	margin-bottom: .4em;
}
.azw5-footer-nav a {
	color: var(--clr2);
	text-decoration: none;
	opacity: .8;
	transition: opacity .2s, color .2s;
	font-size: .9em;
}
.azw5-footer-nav a:hover {
	opacity: 1;
	color: var(--clr3);
}

/* --- RESPONSIVE --- */
@media (max-width: 992px) {
	.azw5-header-nav {
		display: none;
	}
	.azw5-menu-btn {
		display: flex;
	}
	.azw5-cta-list {
		display: none;
	}
}
@media (min-width: 993px) {
	.azw5-menu-btn {
		display: none;
	}
}
@media (max-width: 480px) {
	.azw5-brand-text .fs9 {
		display: none;
	}
}