.site-header {
	border-bottom: 1px solid var(--color-border);
	position: relative; /* positioning context for the mega menu panel, regardless of sticky setting */
	background: #fff;
	z-index: 100;
	transition: box-shadow var(--transition-base);
}
.site-header.is-sticky {
	position: sticky;
	top: 0;
}
/* JS (header.js) toggles this class once the page scrolls past 20px --
   previously nothing in the stylesheet reacted to it at all. */
.site-header.is-scrolled {
	box-shadow: var(--shadow-sm);
	border-bottom-color: transparent;
}

/*
 * Zone layout: a 3-column grid (left / center / right) so the center
 * zone is genuinely centered on the header -- not just "next to" the
 * logo -- no matter how wide the left/right zones are.
 */
.site-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	column-gap: var(--gap-lg);
	height: var(--header-height);
}
.site-header__zone { display: flex; align-items: center; gap: var(--gap-md); min-width: 0; }
.site-header__zone--left { justify-content: flex-start; }
.site-header__zone--center { justify-content: center; }
.site-header__zone--right { justify-content: flex-end; }

.site-branding { display: flex; align-items: center; }
.site-branding img { max-height: 40px; width: auto; }
/*
 * Base wordmark styling for the text logo (shown whenever no image logo
 * is set) -- Theme Settings -> Header/Footer Builder -> Logo Style
 * overrides font-size/weight/letter-spacing/color per the admin's choice
 * via the inline CSS in inc/theme-options.php; these are just sane
 * defaults so it still looks intentional if that ever fails to load.
 */
.site-branding .site-title-link {
	font-family: var(--font-heading);
	font-size: 24px;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1;
	color: var(--color-dark);
	white-space: nowrap;
}

.main-navigation { min-width: 0; }
.primary-menu { list-style: none; display: flex; gap: var(--gap-lg); margin: 0; padding: 0; }
.primary-menu > li { position: relative; }
.primary-menu > li > a {
	display: block;
	padding: 8px 0;
	font-weight: 600;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: var(--nav-letter-spacing);
	position: relative;
}
/* Woodmart-style grow-from-center underline on hover, instead of an
   abrupt color swap -- reads as a more premium micro-interaction. */
.primary-menu > li > a::after {
	content: '';
	position: absolute;
	left: 50%;
	right: 50%;
	bottom: 2px;
	height: 2px;
	background: var(--color-primary);
	transition: left var(--transition-fast), right var(--transition-fast);
}
.primary-menu > li > a:hover::after { left: 0; right: 0; }
.primary-menu .sub-menu {
	position: absolute; top: 100%; left: 0; min-width: 200px;
	background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius);
	list-style: none; margin: 0; padding: 8px 0;
	opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity var(--transition-fast), transform var(--transition-fast);
	box-shadow: var(--shadow-md);
	z-index: 10;
}
.primary-menu > li:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.primary-menu .sub-menu a {
	padding: 9px 16px;
	display: block;
	font-size: 13px;
	font-weight: 500;
	text-transform: none;
	letter-spacing: normal;
}
.primary-menu .sub-menu a::after { display: none; }

.site-header__zone .header-icon-btn,
.site-header__zone .account-link {
	display: inline-flex; align-items: center; justify-content: center; position: relative;
	background: none; border: none; cursor: pointer; color: inherit; text-decoration: none;
	width: 40px; height: 40px; border-radius: 50%;
	transition: background var(--transition-fast), color var(--transition-fast);
}
.site-header__zone .header-icon-btn:hover,
.site-header__zone .account-link:hover { background: var(--color-bg-alt); color: var(--color-primary); }
.header-icon-btn .count {
	position: absolute; top: -4px; right: -6px;
	background: var(--color-primary); color: #fff; font-size: 10px; line-height: 1;
	min-width: 15px; height: 15px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center; padding: 2px;
}

.mobile-menu-toggle { display: none; background: none; border: none; cursor: pointer; }

/* Missing no-menu-assigned notice, shown only to logged-in admins via
   arshiya_menu_fallback() in inc/helpers.php -- keeps the site clean for
   real visitors while stopping the site owner from thinking it's a bug. */
.arshiya-no-menu-notice {
	font-size: 12px;
}
.arshiya-no-menu-notice a {
	display: inline-block;
	padding: 6px 12px;
	border: 1px dashed currentColor;
	border-radius: var(--radius);
	background: rgba(127, 127, 127, 0.12);
	opacity: 0.85;
}
.arshiya-no-menu-notice a:hover { opacity: 1; color: var(--color-primary); }

/* Desktop vs mobile header rows -- both render server-side, CSS decides which is visible */
.site-header__inner--mobile { display: none; }

@media (max-width: 900px) {
	.site-header__inner--desktop { display: none; }
	.site-header__inner--mobile { display: grid; height: calc(var(--header-height) - 10px); }

	/*
	 * BUG FIX: .mobile-menu-toggle had `display: none` above with nothing,
	 * anywhere in the stylesheet, ever setting it back to visible -- so the
	 * hamburger button that opens the mobile nav drawer was permanently
	 * invisible and the menu was completely inaccessible on phones/tablets.
	 * Every other mobile-only toggle in this theme (e.g. .filters-toggle-mobile
	 * in shop.css) follows this same "hidden by default, shown here" pattern;
	 * this rule was simply missing.
	 */
	.mobile-menu-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		color: var(--color-dark);
	}
	.mobile-menu-toggle svg { width: 22px; height: 22px; }
}

.arshiya-announcement-bar { text-align: center; font-size: 0.85rem; }
.arshiya-announcement-bar__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px var(--gap-md);
}
.arshiya-announcement-bar__close {
	position: absolute;
	right: var(--gap-md);
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	color: inherit;
	font-size: 1.1rem;
	cursor: pointer;
	line-height: 1;
	opacity: 0.8;
}
.arshiya-announcement-bar__close:hover { opacity: 1; }

.site-topbar { background: var(--color-bg-alt); border-bottom: 1px solid var(--color-border); font-size: 0.8rem; }
.topbar-menu { list-style: none; display: flex; gap: var(--gap-md); margin: 0; padding: 6px 0; }

/* ---- Shared off-canvas drawer chrome (mobile nav / search / wishlist / compare / mini-cart) ---- */
.mini-cart-drawer,
.mobile-nav-drawer,
.side-drawer {
	position: fixed;
	inset: 0;
	z-index: 1000;
	visibility: hidden;
	pointer-events: none;
}
.mini-cart-drawer.is-open,
.mobile-nav-drawer.is-open,
.side-drawer.is-open {
	visibility: visible;
	pointer-events: auto;
}

.mini-cart-drawer__overlay,
.mobile-nav-drawer__overlay,
.side-drawer__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	opacity: 0;
	transition: opacity var(--transition-base);
}
.mini-cart-drawer.is-open .mini-cart-drawer__overlay,
.mobile-nav-drawer.is-open .mobile-nav-drawer__overlay,
.side-drawer.is-open .side-drawer__overlay {
	opacity: 1;
}

.mini-cart-drawer__panel,
.side-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(400px, 90vw);
	background: #fff;
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform var(--transition-base);
	box-shadow: -8px 0 24px rgba(0, 0, 0, 0.15);
}
.mini-cart-drawer.is-open .mini-cart-drawer__panel,
.side-drawer.is-open .side-drawer__panel {
	transform: translateX(0);
}

/* Mobile nav opens from the left, matching most storefront conventions */
.mobile-nav-drawer__panel {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: min(340px, 85vw);
	background: #fff;
	display: flex;
	flex-direction: column;
	transform: translateX(-100%);
	transition: transform var(--transition-base);
	box-shadow: 8px 0 24px rgba(0, 0, 0, 0.15);
}
.mobile-nav-drawer.is-open .mobile-nav-drawer__panel {
	transform: translateX(0);
}

.mini-cart-drawer__header,
.mobile-nav-drawer__header,
.side-drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--gap-md);
	border-bottom: 1px solid var(--color-border);
}
.mini-cart-drawer__header h2,
.side-drawer__header h2,
.mobile-nav-drawer__title { margin: 0; font-size: 1.1rem; }
.mini-cart-drawer__close,
.mobile-nav-drawer__close,
.side-drawer__close {
	background: none;
	border: none;
	font-size: 1.5rem;
	cursor: pointer;
	line-height: 1;
	color: var(--color-text-light);
}
.mini-cart-drawer__close:hover,
.mobile-nav-drawer__close:hover,
.side-drawer__close:hover { color: var(--color-primary); }

.mini-cart-drawer__content,
.side-drawer__content,
.mobile-nav-drawer__content {
	padding: var(--gap-md);
	overflow-y: auto;
	flex: 1;
}
.mini-cart-drawer__content .woocommerce-mini-cart { list-style: none; margin: 0; padding: 0; }
.mini-cart-drawer__content .woocommerce-mini-cart-item {
	display: flex;
	gap: var(--gap-sm);
	padding: var(--gap-sm) 0;
	border-bottom: 1px solid var(--color-border);
}
.mini-cart-drawer__content .woocommerce-mini-cart__total {
	font-weight: 700;
	margin-top: var(--gap-md);
	padding-top: var(--gap-md);
	border-top: 1px solid var(--color-border);
}
.mini-cart-drawer__content .woocommerce-mini-cart__buttons {
	display: flex;
	flex-direction: column;
	gap: var(--gap-sm);
	margin-top: var(--gap-md);
}

/* Mobile nav menu list (accordion-style top level, plain sub-menu indent) */
.mobile-nav-menu { list-style: none; margin: 0; padding: 0; }
.mobile-nav-menu li { border-bottom: 1px solid var(--color-border); }
.mobile-nav-menu a { display: block; padding: 12px 4px; font-weight: 500; }
.mobile-nav-menu .sub-menu { list-style: none; margin: 0 0 8px; padding-left: var(--gap-md); }
.mobile-nav-menu .sub-menu a { padding: 8px 4px; font-weight: 400; color: var(--color-text-light); }

/* Search overlay */
.site-search-overlay {
	position: fixed; inset: 0; z-index: 1000;
	background: rgba(255, 255, 255, 0.98);
	display: flex; align-items: center; justify-content: center;
	opacity: 0; visibility: hidden; pointer-events: none;
	transition: opacity var(--transition-base);
}
.site-search-overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.site-search-overlay__inner { position: relative; width: 100%; max-width: 640px; }
.site-search-overlay__inner form { display: flex; gap: 8px; }
.site-search-overlay__inner input[type="search"],
.site-search-overlay__inner input[type="text"] {
	flex: 1; font-size: 1.25rem; padding: 14px 16px; border: none; border-bottom: 2px solid var(--color-dark);
	background: transparent;
}
.site-search-overlay__inner input[type="search"]:focus,
.site-search-overlay__inner input[type="text"]:focus { outline: none; }
.site-search-overlay__close {
	position: absolute; top: -48px; right: 0;
	background: none; border: none; font-size: 2rem; line-height: 1; cursor: pointer; color: var(--color-text);
}

/* Wishlist / Compare drawer product list */
.side-drawer__content .side-drawer-item {
	display: flex; align-items: center; gap: var(--gap-sm);
	padding: var(--gap-sm) 0; border-bottom: 1px solid var(--color-border);
}
.side-drawer__content .side-drawer-item img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius); }
.side-drawer__content .side-drawer-item__info { flex: 1; min-width: 0; }
.side-drawer__content .side-drawer-item__title { font-size: 0.9rem; font-weight: 500; display: block; }
.side-drawer__content .side-drawer-item__remove { background: none; border: none; color: var(--color-text-light); cursor: pointer; font-size: 1.1rem; }
.side-drawer__content .side-drawer-item__remove:hover { color: var(--color-primary); }
.side-drawer__empty { color: var(--color-text-light); text-align: center; padding: var(--gap-lg) 0; }

.header-icon-btn--custom { display: inline-flex; align-items: center; gap: 6px; }
.header-icon-btn__label { font-size: 0.85rem; font-weight: 500; }