/* ==========================================================================
   Knack Theme: Sticky Header & Navigation
   ========================================================================== */

/* --- Header --- */
.knack-header {
	background: var(--knack-bg);
	border-bottom: 1px solid var(--knack-border-soft);
	height: var(--knack-header-height);
	z-index: var(--knack-z-header);
}

.knack-header--sticky {
	position: sticky;
	top: 0;
	left: 0;
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	background: rgba(255, 255, 255, 0.92);
	transition: left var(--knack-transition-slow);
}

body.aoty-dark-mode .knack-header--sticky {
	background: rgba(17, 17, 17, 0.92);
}

/* --- Header Inner --- */
.knack-header-inner {
	max-width: var(--knack-container-width);
	margin: 0 auto;
	padding: 0 var(--knack-space-lg);
	display: flex;
	align-items: center;
	height: 100%;
	gap: var(--knack-space-xl);
}

/* --- Header Left: Toggle + Branding --- */
.knack-header-left {
	display: flex;
	align-items: center;
	gap: var(--knack-space-md);
	flex-shrink: 0;
}

.knack-branding a {
	display: flex;
	align-items: center;
	color: var(--knack-text);
	text-decoration: none;
}

.knack-site-title {
	font-size: 1.375rem;
	font-weight: 800;
	letter-spacing: -0.025em;
	white-space: nowrap;
}

.knack-branding .custom-logo {
	max-height: 40px;
	width: auto;
}

/* --- Dark / Light Mode Logo Switching ---
   "light" = light-colored logo → shown on dark backgrounds
   "dark"  = dark-colored logo  → shown on light backgrounds */
.knack-branding a.knack-logo--light { display: flex; }
.knack-branding a.knack-logo--dark  { display: none; }

/* In light mode: show dark logo and hide light logo (only when dark logo exists) */
body:not(.aoty-dark-mode) .knack-branding a.knack-logo--dark { display: flex; }
body:not(.aoty-dark-mode) .knack-branding:has(.knack-logo--dark) a.knack-logo--light { display: none; }

/* --- Panel Toggle Button (header hamburger) ---
   Hidden on desktop (panel has its own toggle).
   Shown only on mobile to open the panel overlay. */
.knack-panel-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	background: none;
	border: none;
	border-radius: var(--knack-radius);
	cursor: pointer;
	color: var(--knack-text);
	transition: background var(--knack-transition);
}

.knack-panel-toggle:hover {
	background: var(--knack-bg-secondary);
}

/* Only show on mobile (<=1024px) when side panel is enabled */
@media (max-width: 1024px) {
	.has-side-panel .knack-panel-toggle {
		display: flex;
	}

	/* When the side panel exists, suppress the WP-nav mobile hamburger —
	   the side-panel drawer already covers navigation and showing both
	   creates a "which hamburger?" UX problem. */
	.has-side-panel .knack-mobile-toggle {
		display: none !important;
	}
}

/* --- Hamburger Icon --- */
.knack-hamburger {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	width: 18px;
	height: 18px;
}

.knack-hamburger span {
	display: block;
	width: 100%;
	height: 2px;
	background: currentColor;
	border-radius: 1px;
	transition: all var(--knack-transition);
}

/* --- Desktop Navigation --- */
.knack-header-nav {
	flex: 1;
	min-width: 0;
	overflow: visible;
}

.knack-nav-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: var(--knack-space-xs);
	flex-wrap: nowrap;
}

.knack-nav-menu > li {
	position: relative;
	flex-shrink: 0;
}

/* Items hidden by priority+ nav JS */
.knack-nav-menu > li.knack-nav-hidden {
	display: none;
}

/* --- "More" Overflow Button --- */
.knack-nav-more {
	position: relative;
	flex-shrink: 0;
	display: none; /* shown by JS when needed */
}

.knack-nav-more.knack-nav-more--active {
	display: block;
}

.knack-nav-more-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 8px 16px;
	color: var(--knack-text-secondary);
	font-family: var(--knack-font-body);
	font-size: 0.875rem;
	font-weight: 500;
	border-radius: var(--knack-radius-pill);
	border: none;
	background: none;
	cursor: pointer;
	transition: all var(--knack-transition);
	white-space: nowrap;
}

.knack-nav-more-btn:hover,
.knack-nav-more.focus .knack-nav-more-btn {
	color: var(--knack-text);
	background: var(--knack-bg-secondary);
}

.knack-nav-more-btn .knack-dropdown-arrow {
	transition: transform var(--knack-transition);
}

.knack-nav-more:hover .knack-nav-more-btn .knack-dropdown-arrow,
.knack-nav-more.focus .knack-nav-more-btn .knack-dropdown-arrow {
	transform: rotate(180deg);
}

/* "More" dropdown list */
.knack-nav-more-list {
	position: absolute;
	top: 100%;
	right: 0;
	min-width: 220px;
	max-height: 70vh;
	overflow-y: auto;
	background: var(--knack-surface-raised);
	border: 1px solid var(--knack-border-soft);
	border-radius: var(--knack-radius-2xl);
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
	padding: var(--knack-space-sm) 0;
	z-index: var(--knack-z-dropdown);
	list-style: none;
	margin: 0;

	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;
	pointer-events: none;
}

.knack-nav-more:hover > .knack-nav-more-list,
.knack-nav-more.focus > .knack-nav-more-list {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}

.knack-nav-more-list li {
	margin: 0;
}

.knack-nav-more-list li a {
	display: block;
	padding: var(--knack-space-sm) var(--knack-space-md);
	color: var(--knack-text-secondary);
	font-size: 0.8125rem;
	font-weight: 400;
	transition: all var(--knack-transition);
	white-space: nowrap;
}

.knack-nav-more-list li a:hover {
	color: var(--knack-text);
	background: var(--knack-bg-secondary);
}

.knack-nav-more-list li.current-menu-item > a,
.knack-nav-more-list li.current-menu-ancestor > a {
	color: var(--knack-accent);
	font-weight: 500;
}

.knack-nav-menu > li > a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 8px 16px;
	color: var(--knack-text-secondary);
	font-size: 0.875rem;
	font-weight: 500;
	border-radius: var(--knack-radius-pill);
	transition: all var(--knack-transition);
	white-space: nowrap;
}

.knack-nav-menu > li > a:hover {
	color: var(--knack-text);
	background: var(--knack-bg-secondary);
}

.knack-nav-menu > li.current-menu-item > a,
.knack-nav-menu > li.current-menu-ancestor > a {
	color: var(--knack-accent);
	background: var(--knack-accent-muted);
}

/* --- Dropdown Arrow Indicator --- */
.knack-dropdown-arrow {
	flex-shrink: 0;
	opacity: 0.5;
	transition: transform var(--knack-transition), opacity var(--knack-transition);
}

.knack-nav-menu > li:hover > a .knack-dropdown-arrow,
.knack-nav-menu > li.focus > a .knack-dropdown-arrow {
	opacity: 1;
	transform: rotate(180deg);
}

/* --- Dropdown Submenus --- */
.knack-nav-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: var(--knack-surface-raised);
	border: 1px solid var(--knack-border-soft);
	border-radius: var(--knack-radius-2xl);
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
	padding: var(--knack-space-sm) 0;
	z-index: var(--knack-z-dropdown);
	list-style: none;
	margin: 0;

	/* Animation: hidden by default */
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;
	pointer-events: none;
}

/* Show on hover or focus (with slight delay for hover-out) */
.knack-nav-menu > li:hover > .sub-menu,
.knack-nav-menu > li.focus > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}

/* Nested submenus (depth > 2) fly out to the right */
.knack-nav-menu .sub-menu .sub-menu {
	top: 0;
	left: 100%;
	margin-left: 4px;
}

.knack-nav-menu .sub-menu li {
	position: relative;
}

.knack-nav-menu .sub-menu li a {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: var(--knack-space-sm) var(--knack-space-md);
	color: var(--knack-text-secondary);
	font-size: 0.8125rem;
	font-weight: 400;
	transition: all var(--knack-transition);
	border-radius: 0;
}

.knack-nav-menu .sub-menu li a:hover {
	color: var(--knack-text);
	background: var(--knack-bg-secondary);
}

.knack-nav-menu .sub-menu li.current-menu-item > a {
	color: var(--knack-accent);
	font-weight: 500;
}

/* Nested submenu arrows point right */
.knack-nav-menu .sub-menu .knack-dropdown-arrow {
	margin-left: auto;
	transform: rotate(-90deg);
}

.knack-nav-menu .sub-menu li:hover > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}

/* --- Header Right: Search, Avatar, Mobile Toggle --- */
.knack-header-right {
	display: flex;
	align-items: center;
	gap: var(--knack-space-sm);
	flex-shrink: 0;
}

.knack-search-toggle,
.knack-mobile-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background: none;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	color: var(--knack-text-secondary);
	transition: all var(--knack-transition);
}

.knack-search-toggle:hover,
.knack-mobile-toggle:hover {
	color: var(--knack-text);
	background: var(--knack-bg-secondary);
}

.knack-search-toggle:focus-visible,
.knack-mobile-toggle:focus-visible {
	outline: 2px solid var(--knack-accent);
	outline-offset: 2px;
}

/* Mobile toggle hidden on desktop */
.knack-mobile-toggle {
	display: none;
}

/* --- User Avatar --- */
.knack-user-avatar {
	display: flex;
	align-items: center;
}

.knack-user-avatar img {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--knack-border-soft);
	transition: border-color var(--knack-transition);
}

.knack-user-avatar:hover img {
	border-color: var(--knack-accent);
}

/* --- Search Overlay --- */
.knack-search-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	z-index: var(--knack-z-overlay);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding-top: 100px;
}

.knack-search-overlay[hidden] {
	display: none;
}

.knack-search-overlay-inner {
	background: var(--knack-surface-raised);
	border-radius: var(--knack-radius-xl);
	padding: var(--knack-space-lg) var(--knack-space-xl);
	width: 100%;
	max-width: 600px;
	margin: 0 var(--knack-space-lg);
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
	border: 1px solid var(--knack-border-soft);
}

/* Search overlay header row with title and close button */
.knack-search-overlay-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--knack-space-md);
}

.knack-search-overlay-title {
	font-size: 1rem;
	font-weight: 600;
	color: var(--knack-text);
}

.knack-search-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: var(--knack-bg-secondary);
	border: 1px solid var(--knack-border-soft);
	color: var(--knack-text-muted);
	cursor: pointer;
	border-radius: var(--knack-radius);
	transition: all var(--knack-transition);
	flex-shrink: 0;
	padding: 0;
}

.knack-search-close:hover {
	color: var(--knack-text);
	background: var(--knack-bg-tertiary);
	border-color: var(--knack-border);
}

.knack-search-close:focus-visible {
	outline: 2px solid var(--knack-accent);
	outline-offset: 2px;
}

/* Search form within overlay */
.knack-search-overlay .search-form {
	display: flex;
	gap: var(--knack-space-sm);
}

.knack-search-overlay .search-field {
	flex: 1;
	padding: 12px var(--knack-space-md);
	font-size: 1rem;
	border: 1px solid var(--knack-border);
	border-radius: var(--knack-radius-2xl);
	background: var(--knack-bg);
	color: var(--knack-text);
	outline: none;
	transition: border-color var(--knack-transition), box-shadow var(--knack-transition);
}

.knack-search-overlay .search-field:focus {
	border-color: var(--knack-accent);
	box-shadow: 0 0 0 3px rgba(240, 198, 116, 0.15);
}

.knack-search-overlay .search-submit {
	padding: 12px var(--knack-space-xl);
	background: var(--knack-btn-bg, var(--knack-accent));
	color: var(--knack-btn-text, #000);
	border: none;
	border-radius: var(--knack-radius-2xl);
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	transition: all var(--knack-transition);
	white-space: nowrap;
}

.knack-search-overlay .search-submit:hover {
	background: var(--knack-btn-bg-hover, var(--knack-accent-hover));
	filter: brightness(1.1);
}

/* Keyboard shortcut hints */
.knack-search-shortcut {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: var(--knack-space-md);
	font-size: 0.75rem;
	color: var(--knack-text-muted);
}

.knack-search-shortcut kbd {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 20px;
	padding: 0 5px;
	background: var(--knack-bg-secondary);
	border: 1px solid var(--knack-border-soft);
	border-radius: 4px;
	font-family: var(--knack-font-body);
	font-size: 0.6875rem;
	font-weight: 500;
	color: var(--knack-text-secondary);
	line-height: 1;
}

.knack-search-shortcut-sep {
	opacity: 0.4;
}

/* --- Unified Search (AJAX-powered) --- */
.knack-unified-search-input-wrap {
	position: relative;
	display: flex;
	align-items: center;
}

.knack-unified-search-icon {
	position: absolute;
	left: 14px;
	color: var(--knack-text-muted);
	pointer-events: none;
}

.knack-unified-search-input {
	width: 100%;
	padding: 12px 44px 12px 42px;
	font-size: 1rem;
	border: 1px solid var(--knack-border);
	border-radius: var(--knack-radius-2xl);
	background: var(--knack-bg);
	color: var(--knack-text);
	outline: none;
	transition: border-color var(--knack-transition), box-shadow var(--knack-transition);
	font-family: var(--knack-font-body);
}

.knack-unified-search-input:focus {
	border-color: var(--knack-accent);
	box-shadow: 0 0 0 3px rgba(240, 198, 116, 0.15);
}

.knack-unified-search-input::placeholder {
	color: var(--knack-text-muted);
}

.knack-unified-search-spinner {
	position: absolute;
	right: 14px;
	display: flex;
	animation: ks-spin 1s linear infinite;
	color: var(--knack-text-muted);
}

.knack-unified-search-spinner[hidden] {
	display: none;
}

@keyframes ks-spin {
	to { transform: rotate(360deg); }
}

/* Results container */
.knack-unified-search-results {
	margin-top: var(--knack-space-md);
	max-height: 400px;
	overflow-y: auto;
}

.knack-unified-search-results[hidden] {
	display: none;
}

.knack-unified-search-empty {
	margin-top: var(--knack-space-md);
	text-align: center;
	color: var(--knack-text-muted);
	font-size: 0.875rem;
}

.knack-unified-search-empty[hidden] {
	display: none;
}

/* Result group */
.knack-search-group {
	margin-bottom: var(--knack-space-md);
}

.knack-search-group:last-child {
	margin-bottom: 0;
}

.knack-search-group-title {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--knack-text-muted);
	padding: 0 var(--knack-space-sm);
	margin-bottom: var(--knack-space-xs);
}

.knack-search-group-title svg {
	width: 14px;
	height: 14px;
	opacity: 0.6;
}

/* Result item */
.knack-search-item {
	display: flex;
	align-items: center;
	gap: var(--knack-space-sm);
	padding: 8px var(--knack-space-sm);
	text-decoration: none;
	color: var(--knack-text);
	border-radius: var(--knack-radius);
	transition: background var(--knack-transition);
}

.knack-search-item:hover,
.knack-search-item:focus-visible {
	background: var(--knack-bg-secondary);
	text-decoration: none;
	color: var(--knack-text);
}

.knack-search-item-thumb {
	width: 40px;
	height: 40px;
	border-radius: var(--knack-radius);
	object-fit: cover;
	background: var(--knack-bg-tertiary);
	flex-shrink: 0;
}

.knack-search-item-thumb--avatar {
	border-radius: 50%;
}

.knack-search-item-info {
	flex: 1;
	min-width: 0;
}

.knack-search-item-title {
	font-size: 0.875rem;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.knack-search-item-meta {
	font-size: 0.75rem;
	color: var(--knack-text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* View all link at bottom */
.knack-search-view-all {
	display: block;
	text-align: center;
	padding: var(--knack-space-sm) 0;
	margin-top: var(--knack-space-sm);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--knack-accent);
	text-decoration: none;
	border-top: 1px solid var(--knack-border-soft);
}

.knack-search-view-all:hover {
	text-decoration: underline;
	color: var(--knack-accent-hover);
}

/* Mobile search overlay */
@media (max-width: 600px) {
	.knack-search-overlay {
		padding-top: var(--knack-space-xl);
		align-items: flex-start;
	}

	.knack-search-overlay-inner {
		margin: 0 var(--knack-space-md);
		padding: var(--knack-space-md);
	}

	.knack-search-overlay .search-form {
		flex-direction: column;
	}

	.knack-search-overlay .search-submit {
		width: 100%;
		justify-content: center;
	}
}

/* --- Mobile Nav Drawer --- */
.knack-mobile-nav {
	background: var(--knack-bg);
	border-bottom: 1px solid var(--knack-border-soft);
	padding: var(--knack-space-md) var(--knack-space-lg);
	box-shadow: var(--knack-shadow-md);
	max-height: calc(100vh - var(--knack-header-height));
	overflow-y: auto;
}

.knack-mobile-nav[hidden] {
	display: none;
}

.knack-mobile-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Mobile menu item wrapper (link + toggle side by side) */
.knack-mobile-menu-item-wrap {
	display: flex;
	align-items: center;
}

.knack-mobile-menu-item-wrap > a {
	flex: 1;
	display: flex;
	align-items: center;
	gap: var(--knack-space-sm);
	padding: 10px var(--knack-space-md);
	color: var(--knack-text);
	font-size: 0.9375rem;
	font-weight: 500;
	border-radius: var(--knack-radius);
	transition: background var(--knack-transition);
}

.knack-mobile-menu-item-wrap > a:hover {
	background: var(--knack-bg-secondary);
}

/* Mobile submenu toggle button */
.knack-submenu-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	background: none;
	border: none;
	border-radius: var(--knack-radius);
	cursor: pointer;
	color: var(--knack-text-muted);
	transition: all var(--knack-transition);
	flex-shrink: 0;
}

.knack-submenu-toggle:hover {
	color: var(--knack-text);
	background: var(--knack-bg-secondary);
}

.knack-submenu-toggle .knack-dropdown-arrow {
	transition: transform var(--knack-transition);
}

.knack-submenu-toggle[aria-expanded="true"] .knack-dropdown-arrow {
	transform: rotate(180deg);
}

/* Mobile submenus are hidden by default */
.knack-mobile-menu .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0 0 0 var(--knack-space-lg);
	display: none;
	border-left: 2px solid var(--knack-border-soft);
	margin-left: var(--knack-space-md);
}

.knack-mobile-menu .sub-menu.knack-submenu-open {
	display: block;
}

.knack-mobile-menu .sub-menu .knack-mobile-menu-item-wrap > a {
	font-size: 0.875rem;
	color: var(--knack-text-secondary);
	padding: 8px var(--knack-space-md);
}

.knack-mobile-menu .sub-menu .knack-mobile-menu-item-wrap > a:hover {
	color: var(--knack-text);
}

/* Active item in mobile */
.knack-mobile-menu .current-menu-item > .knack-mobile-menu-item-wrap > a {
	color: var(--knack-accent);
	font-weight: 600;
}

/* --- Login Button --- */
.knack-btn--sm {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--knack-btn-text, #000);
	background: var(--knack-btn-bg, var(--knack-accent));
	border: none;
	border-radius: var(--knack-radius);
	cursor: pointer;
	text-decoration: none;
	transition: all var(--knack-transition);
	white-space: nowrap;
}

.knack-btn--sm:hover {
	background: var(--knack-btn-bg-hover, var(--knack-accent-hover));
	color: var(--knack-btn-text, #000);
	filter: brightness(1.1);
}

/* ==========================================================================
   Cart Dropdown
   ========================================================================== */

.knack-cart-dropdown {
	position: relative;
}

.knack-cart-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 40px;
	height: 40px;
	padding: 0;
	background: none;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	color: var(--knack-text-secondary);
	transition: all var(--knack-transition);
}

.knack-cart-toggle:hover {
	color: var(--knack-text);
	background: var(--knack-bg-secondary);
}

.knack-cart-toggle:focus-visible {
	outline: 2px solid var(--knack-accent);
	outline-offset: 2px;
}

/* Cart badge count */
.knack-cart-count {
	position: absolute;
	top: 0;
	right: -2px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	background: var(--knack-btn-bg, var(--knack-accent));
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	border-radius: 99px;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Cart panel (dropdown) */
.knack-cart-panel {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	width: 320px;
	background: var(--knack-surface-raised);
	border: 1px solid var(--knack-border-soft);
	border-radius: var(--knack-radius-2xl);
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
	z-index: var(--knack-z-dropdown);

	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
	pointer-events: none;
}

.knack-cart-dropdown.is-open .knack-cart-panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}

.knack-cart-panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--knack-space-md);
	border-bottom: 1px solid var(--knack-border-soft);
}

.knack-cart-panel-title {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--knack-text);
}

.knack-cart-panel-count {
	font-size: 0.75rem;
	color: var(--knack-text-muted);
}

/* Cart items scrollable area */
.knack-cart-panel-items {
	max-height: 260px;
	overflow-y: auto;
	padding: var(--knack-space-sm);
}

.knack-cart-item {
	display: flex;
	align-items: center;
	gap: var(--knack-space-sm);
	padding: var(--knack-space-sm);
	border-radius: var(--knack-radius);
	transition: background var(--knack-transition);
}

.knack-cart-item:hover {
	background: var(--knack-bg-tertiary);
}

.knack-cart-item + .knack-cart-item {
	margin-top: 2px;
}

.knack-cart-item-thumb {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: var(--knack-radius);
	overflow: hidden;
	background: var(--knack-bg-secondary);
}

.knack-cart-item-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.knack-cart-item-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.knack-cart-item-name {
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--knack-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.knack-cart-item-qty {
	font-size: 0.75rem;
	color: var(--knack-text-muted);
}

/* Empty cart state */
.knack-cart-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--knack-space-sm);
	padding: var(--knack-space-xl) var(--knack-space-md);
	color: var(--knack-text-muted);
}

.knack-cart-empty svg {
	opacity: 0.4;
}

.knack-cart-empty p {
	margin: 0;
	font-size: 0.8125rem;
}

/* Cart subtotal */
.knack-cart-panel-total {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--knack-space-md);
	border-top: 1px solid var(--knack-border-soft);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--knack-text);
}

/* Cart action buttons */
.knack-cart-panel-actions {
	display: flex;
	gap: var(--knack-space-sm);
	padding: 0 var(--knack-space-md) var(--knack-space-md);
}

.knack-cart-panel-actions .knack-btn {
	flex: 1;
	text-align: center;
	justify-content: center;
}

.knack-cart-panel-actions .knack-btn--secondary {
	background: var(--knack-bg-tertiary);
	color: var(--knack-text);
	border: 1px solid var(--knack-border-soft);
}

.knack-cart-panel-actions .knack-btn--secondary:hover {
	background: var(--knack-bg-secondary);
	border-color: var(--knack-border);
	color: var(--knack-text);
}

/* ==========================================================================
   Notification Dropdown
   ========================================================================== */

.knack-notif-dropdown {
	position: relative;
}

.knack-notif-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 40px;
	height: 40px;
	padding: 0;
	background: none;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	color: var(--knack-text-secondary);
	transition: all var(--knack-transition);
}

.knack-notif-toggle:hover {
	color: var(--knack-text);
	background: var(--knack-bg-secondary);
}

.knack-notif-toggle:focus-visible {
	outline: 2px solid var(--knack-accent);
	outline-offset: 2px;
}

/* Notification badge count */
.knack-notif-count {
	position: absolute;
	top: 0;
	right: -2px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	background: var(--knack-btn-bg, var(--knack-accent));
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	border-radius: 99px;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Notification panel (dropdown) */
.knack-notif-panel {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	width: 360px;
	background: var(--knack-surface-raised);
	border: 1px solid var(--knack-border-soft);
	border-radius: var(--knack-radius-2xl);
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
	z-index: var(--knack-z-dropdown);

	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
	pointer-events: none;
}

.knack-notif-dropdown.is-open .knack-notif-panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}

.knack-notif-panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--knack-space-md);
	border-bottom: 1px solid var(--knack-border-soft);
}

.knack-notif-panel-title {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--knack-text);
}

.knack-notif-mark-all {
	background: none;
	border: none;
	padding: 0;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--knack-accent);
	cursor: pointer;
	transition: color var(--knack-transition);
}

.knack-notif-mark-all:hover {
	color: var(--knack-accent-hover);
	text-decoration: underline;
}

/* Notification items area */
.knack-notif-panel-items {
	max-height: 340px;
	overflow-y: auto;
}

/* Loading state */
.knack-notif-panel-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--knack-space-sm);
	padding: var(--knack-space-xl) var(--knack-space-md);
	color: var(--knack-text-muted);
	font-size: 0.8125rem;
}

.knack-notif-spinner {
	width: 16px;
	height: 16px;
	border: 2px solid var(--knack-border-soft);
	border-top-color: var(--knack-accent);
	border-radius: 50%;
	animation: ks-notif-spin 0.6s linear infinite;
}

@keyframes ks-notif-spin {
	to { transform: rotate(360deg); }
}

/* Empty state */
.knack-notif-panel-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--knack-space-sm);
	padding: var(--knack-space-xl) var(--knack-space-md);
	color: var(--knack-text-muted);
}

.knack-notif-panel-empty svg {
	opacity: 0.4;
}

.knack-notif-panel-empty p {
	margin: 0;
	font-size: 0.8125rem;
}

/* Single notification item in dropdown */
.knack-notif-dd-item {
	display: flex;
	align-items: flex-start;
	gap: var(--knack-space-sm);
	padding: var(--knack-space-sm) var(--knack-space-md);
	text-decoration: none;
	color: var(--knack-text);
	transition: background var(--knack-transition);
	cursor: pointer;
}

.knack-notif-dd-item:hover {
	background: var(--knack-bg-tertiary);
}

.knack-notif-dd-item + .knack-notif-dd-item {
	border-top: 1px solid var(--knack-border-soft);
}

.knack-notif-dd-item--unread {
	background: rgba(240, 198, 116, 0.04);
}

.knack-notif-dd-item--unread:hover {
	background: rgba(240, 198, 116, 0.08);
}

.knack-notif-dd-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	border-radius: var(--knack-radius);
	background: var(--knack-bg-secondary);
	color: var(--knack-text-secondary);
}

.knack-notif-dd-item--unread .knack-notif-dd-icon {
	background: rgba(240, 198, 116, 0.12);
	color: var(--knack-accent);
}

.knack-notif-dd-body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.knack-notif-dd-title {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--knack-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.knack-notif-dd-msg {
	font-size: 0.75rem;
	color: var(--knack-text-secondary);
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.knack-notif-dd-time {
	font-size: 0.6875rem;
	color: var(--knack-text-muted);
	margin-top: 1px;
}

.knack-notif-dd-dot {
	width: 7px;
	height: 7px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--knack-accent);
	margin-top: 4px;
}

/* Panel footer */
.knack-notif-panel-footer {
	padding: var(--knack-space-sm) var(--knack-space-md);
	border-top: 1px solid var(--knack-border-soft);
	text-align: center;
}

.knack-notif-panel-footer a {
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--knack-accent);
	text-decoration: none;
	transition: color var(--knack-transition);
}

.knack-notif-panel-footer a:hover {
	color: var(--knack-accent-hover);
	text-decoration: underline;
}

@media (max-width: 480px) {
	.knack-notif-panel {
		width: calc(100vw - 24px);
		right: -48px;
	}
}

/* ==========================================================================
   Create Dropdown (+ button)
   ========================================================================== */

.knack-create-dropdown {
	position: relative;
}

.knack-create-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 40px;
	height: 40px;
	padding: 0;
	background: none;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	color: var(--knack-text-secondary);
	transition: all var(--knack-transition);
}

.knack-create-toggle:hover {
	color: var(--knack-text);
	background: var(--knack-bg-secondary);
}

.knack-create-toggle:focus-visible {
	outline: 2px solid var(--knack-accent);
	outline-offset: 2px;
}

/* Create panel (dropdown) */
.knack-create-panel {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	width: 240px;
	background: var(--knack-surface-raised);
	border: 1px solid var(--knack-border-soft);
	border-radius: var(--knack-radius-2xl);
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
	z-index: var(--knack-z-dropdown);
	overflow: hidden;

	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
	pointer-events: none;
}

.knack-create-dropdown.is-open .knack-create-panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}

.knack-create-panel-header {
	display: flex;
	align-items: center;
	padding: var(--knack-space-md);
	border-bottom: 1px solid var(--knack-border-soft);
}

.knack-create-panel-title {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--knack-text);
}

/* Create menu links */
.knack-create-panel-menu {
	padding: var(--knack-space-sm) 0;
}

.knack-create-panel-menu a {
	display: flex;
	align-items: center;
	gap: var(--knack-space-sm);
	padding: 8px var(--knack-space-md);
	color: var(--knack-text-secondary);
	font-size: 0.8125rem;
	font-weight: 500;
	text-decoration: none;
	transition: all var(--knack-transition);
}

.knack-create-panel-menu a:hover {
	color: var(--knack-text);
	background: var(--knack-bg-tertiary);
}

.knack-create-panel-menu a svg {
	flex-shrink: 0;
	opacity: 0.6;
}

.knack-create-panel-menu a:hover svg {
	opacity: 1;
}

@media (max-width: 480px) {
	.knack-create-panel {
		position: fixed;
		top: auto;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		border-radius: var(--knack-radius-lg) var(--knack-radius-lg) 0 0;
		max-height: 80vh;
		transform: translateY(100%);
	}

	.knack-create-dropdown.is-open .knack-create-panel {
		transform: translateY(0);
	}
}

/* ==========================================================================
   Profile Dropdown
   ========================================================================== */

.knack-profile-dropdown {
	position: relative;
}

.knack-profile-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
	border-radius: 50%;
	transition: all var(--knack-transition);
}

.knack-profile-toggle img {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid transparent;
	transition: border-color var(--knack-transition);
}

.knack-profile-toggle:hover img,
.knack-profile-dropdown.is-open .knack-profile-toggle img {
	border-color: var(--knack-accent);
}

.knack-profile-toggle:focus-visible {
	outline: 2px solid var(--knack-accent);
	outline-offset: 2px;
}

/* Profile panel (dropdown) */
.knack-profile-panel {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	width: 260px;
	background: var(--knack-surface-raised);
	border: 1px solid var(--knack-border-soft);
	border-radius: var(--knack-radius-2xl);
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
	z-index: var(--knack-z-dropdown);
	overflow: hidden;

	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
	pointer-events: none;
}

.knack-profile-dropdown.is-open .knack-profile-panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}

/* Profile header with avatar and user info */
.knack-profile-panel-header {
	display: flex;
	align-items: center;
	gap: var(--knack-space-sm);
	padding: var(--knack-space-md);
	border-bottom: 1px solid var(--knack-border-soft);
}

.knack-profile-panel-header img {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.knack-profile-panel-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.knack-profile-panel-name {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--knack-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.knack-profile-panel-email {
	font-size: 0.75rem;
	color: var(--knack-text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Profile menu links */
.knack-profile-panel-menu {
	padding: var(--knack-space-sm) 0;
}

.knack-profile-panel-menu a {
	display: flex;
	align-items: center;
	gap: var(--knack-space-sm);
	padding: 8px var(--knack-space-md);
	color: var(--knack-text-secondary);
	font-size: 0.8125rem;
	font-weight: 500;
	text-decoration: none;
	transition: all var(--knack-transition);
}

.knack-profile-panel-menu a:hover {
	color: var(--knack-text);
	background: var(--knack-bg-tertiary);
}

.knack-profile-panel-menu a svg {
	flex-shrink: 0;
	opacity: 0.6;
}

.knack-profile-panel-menu a:hover svg {
	opacity: 1;
}

/* Profile footer (log out) */
.knack-profile-panel-footer {
	padding: var(--knack-space-sm) 0;
	border-top: 1px solid var(--knack-border-soft);
}

.knack-profile-logout {
	display: flex;
	align-items: center;
	gap: var(--knack-space-sm);
	padding: 8px var(--knack-space-md);
	color: var(--knack-text-secondary);
	font-size: 0.8125rem;
	font-weight: 500;
	text-decoration: none;
	transition: all var(--knack-transition);
}

.knack-profile-logout:hover {
	color: #e74c3c;
	background: rgba(231, 76, 60, 0.08);
}

.knack-profile-logout svg {
	flex-shrink: 0;
	opacity: 0.6;
}

.knack-profile-logout:hover svg {
	opacity: 1;
}

/* New-content notification dot in profile dropdown */
.knack-profile-panel-menu a.knack-has-new {
	position: relative;
}

.knack-profile-dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #3b82f6;
	margin-left: auto;
	flex-shrink: 0;
}

/* ==========================================================================
   Cart & Profile Dropdown — Mobile Responsive
   ========================================================================== */

@media (max-width: 480px) {
	.knack-cart-panel {
		position: fixed;
		top: auto;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		border-radius: var(--knack-radius-lg) var(--knack-radius-lg) 0 0;
		max-height: 80vh;
		transform: translateY(100%);
	}

	.knack-cart-dropdown.is-open .knack-cart-panel {
		transform: translateY(0);
	}

	.knack-profile-panel {
		position: fixed;
		top: auto;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		border-radius: var(--knack-radius-lg) var(--knack-radius-lg) 0 0;
		max-height: 80vh;
	}

	.knack-profile-panel {
		transform: translateY(100%);
	}

	.knack-profile-dropdown.is-open .knack-profile-panel {
		transform: translateY(0);
	}
}

/* ==========================================================================
   Dark Mode Toggle (header icon)
   ========================================================================== */

.knack-theme-toggle {
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	width: 40px;
	height: 40px;
	color: var(--knack-text-secondary);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: all var(--knack-transition);
}
.knack-theme-toggle:hover {
	color: var(--knack-text);
	background: var(--knack-bg-secondary);
}
/* In dark mode, show moon icon, hide sun icon */
.knack-theme-icon-dark {
	display: none;
}
.aoty-dark-mode .knack-theme-toggle {
	color: #e0e0e0;
}
.aoty-dark-mode .knack-theme-toggle:hover {
	background: rgba(255, 255, 255, 0.1);
}
.aoty-dark-mode .knack-theme-icon-light {
	display: none !important;
}
.aoty-dark-mode .knack-theme-icon-dark {
	display: block !important;
}

/* Hide the old AOTY floating dark mode toggle (moved to header) */
.aoty-dark-mode-toggle {
	display: none !important;
}