/**
 * Shop header menu — chữ dùng biến màu Elementor; không nền bar/panel (trong suốt).
 * !important: ưu tiên trên style Elementor/theme.
 */

/* Khóa scroll khi panel mở */
html.shop-header-menu-lock body {
	overflow: hidden !important;
}

.shop-header-menu {
	position: relative !important;
	width: 100% !important;
}

/* Thanh menu ngang */
.shop-header-menu__bar {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	justify-content: center !important;
	gap: clamp(1rem, 4vw, 2.5rem) !important;
	background: none !important;
	border-radius: 0 !important;
}

.shop-header-menu__trigger,
.shop-header-menu__link-flat {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.25rem !important;
	padding: 0 !important;
	margin: 0 !important;
	background: none !important;
	border: none !important;
	cursor: pointer !important;
	font-family: var(--e-global-typography-primary-font-family, inherit) !important;
	font-weight: 400 !important;
	font-size: 14px !important;
	letter-spacing: var(--e-global-typography-primary-letter-spacing, 0.06em) !important;
	text-transform: uppercase !important;
	color: var(--e-global-color-primary, #1a1a1a) !important;
	text-decoration: none !important;
	transition: opacity 0.2s ease !important;
}

.shop-header-menu__link-flat:hover,
.shop-header-menu__link-flat:focus,
.shop-header-menu__trigger:hover,
.shop-header-menu__trigger:focus {
	opacity: 0.75 !important;
	outline: none !important;
}

.shop-header-menu__plus {
	font-weight: 400 !important;
	font-size: 1.5em !important;
	line-height: 1 !important;
}

/* Overlay */
.shop-header-menu__overlay {
	position: fixed !important;
	inset: 0 !important;
	z-index: 9998 !important;
	background: rgba(0, 0, 0, 0.35) !important;
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
	transition: opacity 0.25s ease, visibility 0.25s ease !important;
}

.shop-header-menu__overlay.is-visible {
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
}

/* Panel trái */
.shop-header-menu__panel {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	z-index: 9999 !important;
	width: min(100%, 22rem) !important;
	height: 100% !important;
	max-height: 100vh !important;
	background: none !important;
	box-shadow: none !important;
	transform: translateX(-100%) !important;
	transition: transform 0.3s ease !important;
	overflow-y: auto !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

.shop-header-menu__panel.is-active {
	transform: translateX(0) !important;
	visibility: visible !important;
	pointer-events: auto !important;
}

.shop-header-menu__panel-inner {
	position: relative !important;
	padding: 3rem 1.75rem 2rem !important;
	min-height: 100% !important;
	background: var(--color-background, #beb1a1) !important;
}



.shop-header-menu__close {
	position: absolute !important;
	top: 1rem !important;
	right: 1rem !important;
	width: 2.25rem !important;
	height: 2.25rem !important;
	padding: 0 !important;
	border: none !important;
	background: transparent !important;
	font-size: 1.75rem !important;
	line-height: 1 !important;
	cursor: pointer !important;
	color: var(--e-global-color-primary, #1a1a1a) !important;
	opacity: 0.85 !important;
}

.shop-header-menu__close:hover {
	opacity: 1 !important;
}

.shop-header-menu__list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.shop-header-menu__list li {
	margin: 0 !important;
	padding: 0 !important;
	border-bottom: 1px solid var(--color-border, #0303031a) !important;
}

.shop-header-menu__list a {
	display: block !important;
	padding: 1rem 0 !important;
	font-family: var(--e-global-typography-text-font-family, inherit) !important;
	font-size: var(--e-global-typography-text-font-size, 1rem) !important;
	font-weight: var(--e-global-typography-text-font-weight, 400) !important;
	color: var(--e-global-color-primary, #1a1a1a) !important;
	text-decoration: none !important;
	transition: opacity 0.2s ease !important;
}

.shop-header-menu__drill-row {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 0.75rem !important;
}

.shop-header-menu__drill-link {
	display: block !important;
	flex: 1 1 auto !important;
	min-width: 0 !important;
	padding: 1rem 0 !important;
	color: var(--e-global-color-primary, #1a1a1a) !important;
	text-decoration: none !important;
}

.shop-header-menu__drill-link:hover,
.shop-header-menu__drill-link:focus {
	opacity: 0.75 !important;
	outline: none !important;
}

.shop-header-menu__drill-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 auto !important;
	width: 2rem !important;
	height: 2rem !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	background: transparent !important;
	cursor: pointer !important;
	color: var(--e-global-color-primary, #1a1a1a) !important;
}

.shop-header-menu__drill-btn:hover,
.shop-header-menu__drill-btn:focus {
	opacity: 0.75 !important;
	outline: none !important;
}

.shop-header-menu__desktop-detail-body .shop-header-menu__list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.shop-header-menu__desktop-back-btn {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 0.75rem !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	background: transparent !important;
	cursor: pointer !important;
	color: var(--e-global-color-primary, #1a1a1a) !important;
	text-align: left !important;
}

.shop-header-menu__desktop-back-btn:hover,
.shop-header-menu__desktop-back-btn:focus {
	opacity: 0.75 !important;
	outline: none !important;
}

.shop-header-menu__list a:hover,
.shop-header-menu__list a:focus {
	opacity: 0.7 !important;
}

.shop-header-menu__empty {
	padding: 1rem 0 !important;
	color: var(--e-global-color-text, #555) !important;
	font-size: 0.9rem !important;
}

.shop-header-menu__notice {
	margin: 0 !important;
	padding: 0.5rem !important;
	font-size: 0.875rem !important;
	color: var(--e-global-color-text, #666) !important;
}

/* Hamburger + mobile sheet — ẩn trên desktop */
.shop-header-menu__hamburger,
.shop-header-menu__mobile-sheet {
	display: none !important;
}

@media (max-width: 1023px) {
	.shop-header-menu {
		display: flex !important;
		justify-content: flex-end !important;
		align-items: center !important;
		width: 100% !important;
	}

	.shop-header-menu__bar,
	.shop-header-menu__overlay {
		display: none !important;
	}

	.shop-header-menu__hamburger {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 2.5rem !important;
		height: 2.5rem !important;
		padding: 0 !important;
		margin: 0 !important;
		border: none !important;
		background: transparent !important;
		cursor: pointer !important;
		color: var(--e-global-color-primary, #1a1a1a) !important;
	}

	.shop-header-menu__hamburger-box {
		display: flex !important;
		flex-direction: column !important;
		justify-content: center !important;
		gap: 5px !important;
		width: 22px !important;
	}

	.shop-header-menu__hamburger-line {
		display: block !important;
		height: 2px !important;
		width: 100% !important;
		background: currentColor !important;
		border-radius: 1px !important;
	}

	.shop-header-menu__hamburger:hover,
	.shop-header-menu__hamburger:focus {
		opacity: 0.8 !important;
		outline: none !important;
	}

	.shop-header-menu__mobile-sheet {
		display: flex !important;
		flex-direction: column !important;
		position: fixed !important;
		inset: 0 !important;
		/* Cao hơn sticky/header Elementor để offcanvas luôn nổi */
		z-index: 2147483000 !important;
		margin: 0 !important;
		padding: 0 !important;
		box-sizing: border-box !important;
		background: var(--color-background, #fceaea) !important;
		overflow: auto !important;
		-webkit-overflow-scrolling: touch !important;
	}

	.shop-header-menu__mobile-sheet[hidden] {
		display: none !important;
	}

	.shop-header-menu__mobile-close {
		position: absolute !important;
		top: 1rem !important;
		right: 1rem !important;
		z-index: 2 !important;
		width: 2.5rem !important;
		height: 2.5rem !important;
		padding: 0 !important;
		border: none !important;
		background: transparent !important;
		font-size: 1.75rem !important;
		line-height: 1 !important;
		cursor: pointer !important;
		color: var(--e-global-color-primary, #1a1a1a) !important;
		opacity: 0.9 !important;
	}

	.shop-header-menu__mobile-close:hover,
	.shop-header-menu__mobile-close:focus {
		opacity: 1 !important;
		outline: none !important;
	}

	.shop-header-menu__mobile-root {
		flex: 1 1 auto !important;
		padding: 4rem 1.5rem 2rem !important;
	}

	.shop-header-menu__mobile-list {
		list-style: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.shop-header-menu__mobile-list > li {
		margin: 0 !important;
		padding: 0 !important;
		border-bottom: 1px solid rgba(3, 3, 3, 0.12) !important;
	}

	.shop-header-menu__mobile-row {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		width: 100% !important;
		gap: 1rem !important;
		padding: 1.15rem 0 !important;
		margin: 0 !important;
		border: none !important;
		background: transparent !important;
		cursor: pointer !important;
		font-family: var(--e-global-typography-text-font-family, system-ui, sans-serif) !important;
		font-size: 15px !important;
		font-weight: 400 !important;
		letter-spacing: 0.06em !important;
		text-transform: uppercase !important;
		color: var(--e-global-color-primary, #1a1a1a) !important;
		text-align: left !important;
		text-decoration: none !important;
		box-sizing: border-box !important;
	}

	.shop-header-menu__mobile-row--link {
		cursor: pointer !important;
	}

	.shop-header-menu__mobile-row-chevron {
		font-size: 1.35rem !important;
		font-weight: 400 !important;
		line-height: 1 !important;
		opacity: 0.85 !important;
	}

	.shop-header-menu__mobile-detail {
		flex: 1 1 auto !important;
		display: flex !important;
		flex-direction: column !important;
		min-height: 0 !important;
		padding: 4rem 1.5rem 2rem !important;
	}

	.shop-header-menu__mobile-detail[hidden] {
		display: none !important;
	}

	.shop-header-menu__mobile-detail-head {
		display: flex !important;
		align-items: center !important;
		gap: 0.75rem !important;
		margin-bottom: 1.25rem !important;
		padding-bottom: 0.5rem !important;
		border-bottom: 1px solid rgba(3, 3, 3, 0.12) !important;
	}

	.shop-header-menu__mobile-back {
		flex-shrink: 0 !important;
		width: 2.5rem !important;
		height: 2.5rem !important;
		padding: 0 !important;
		border: none !important;
		background: transparent !important;
		font-size: 1.5rem !important;
		line-height: 1 !important;
		cursor: pointer !important;
		color: var(--e-global-color-primary, #1a1a1a) !important;
	}

	.shop-header-menu__mobile-back:hover,
	.shop-header-menu__mobile-back:focus {
		opacity: 0.75 !important;
		outline: none !important;
	}

	.shop-header-menu__mobile-detail-title {
		font-family: var(--e-global-typography-text-font-family, system-ui, sans-serif) !important;
		font-size: 15px !important;
		font-weight: 500 !important;
		letter-spacing: 0.06em !important;
		text-transform: uppercase !important;
		color: var(--e-global-color-primary, #1a1a1a) !important;
	}

	.shop-header-menu__mobile-detail-body .shop-header-menu__list {
		list-style: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.shop-header-menu__mobile-detail-body .shop-header-menu__list li {
		margin: 0 !important;
		padding: 0 !important;
		border-bottom: 1px solid rgba(3, 3, 3, 0.1) !important;
	}

	.shop-header-menu__mobile-detail-body .shop-header-menu__list a {
		display: block !important;
		padding: 1.1rem 0 !important;
		font-size: 16px !important;
		font-weight: 400 !important;
		text-transform: none !important;
		letter-spacing: normal !important;
		color: var(--e-global-color-primary, #1a1a1a) !important;
		text-decoration: none !important;
	}

	.shop-header-menu__mobile-detail-body .shop-header-menu__empty {
		padding: 1rem 0 !important;
		font-size: 0.95rem !important;
	}
}