/* ==========================================================================
   header.css — Global top utility bar (site-nav) + body base
   Loaded by frontend/views/default/store/top.html
   Overrides legacy css/header.css and css/shop.css with modern styles.
   All selectors use !important to override legacy (0,3,1+).
   ========================================================================== */

:root {
	--gi-bg:            #f7f7f8;
	--gi-surface:       #ffffff;
	--gi-line:          #ececef;
	--gi-line-strong:   #d9d9de;

	--gi-text-1:        #1a1a1a;
	--gi-text-2:        #555560;
	--gi-text-3:        #8a8a93;

	--gi-accent:        #28A271;
	--gi-accent-soft:   #ebf9f3;
	--gi-accent-deep:   #28A271;

	--gi-fs-xs:         12px;
	--gi-fs-sm:         13px;
	--gi-fs-base:       14px;

	--gi-r-1:           4px;
	--gi-r-2:           8px;
	--gi-r-3:           12px;
	--gi-r-4:           16px;

	--gi-ease:          cubic-bezier(0.2, 0, 0, 1);
}

/* ==========================================================================
   1. Page body base (avoid pure white — slight warm tint)
   ========================================================================== */
body {
	background: #fafafa !important;
	color: var(--gi-text-1) !important;
	font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", Arial, sans-serif !important;
}

/* ==========================================================================
   2. Top utility bar (#site-nav)
   ========================================================================== */
#site-nav {
	background: #2c2c2c !important;                           /* 深色顶部，与白色主 header 形成对比 */
	background: linear-gradient(180deg, #3a3a3a 0%, #2c2c2c 100%) !important;
	border-bottom: 1px solid #1a1a1a !important;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) !important;
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	font-size: var(--gi-fs-xs) !important;
	color: rgba(255, 255, 255, 0.85) !important;
	position: relative !important;       /* 关键：让 #site-nav 自身建立层叠上下文 */
	z-index: 1000 !important;             /* 高于主 header */
}
#site-nav a {
	color: rgba(255, 255, 255, 0.85) !important;
	text-decoration: none !important;
	transition: color .15s var(--gi-ease) !important;
}
#site-nav a:hover {
	color: #fff !important;
	text-decoration: none !important;
}
#site-nav .shoptop {
	max-width: 1240px !important;
	margin: 0 auto !important;
	padding: 0 16px !important;
	height: 32px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
}
#site-nav .w,
#site-nav .w-full { width: auto !important; }
#site-nav .w { max-width: 1240px !important; }

/* Left: login info */
#site-nav .login_info {
	float: none !important;
	display: flex !important;
	align-items: center !important;
	gap: 4px !important;
	color: rgba(255, 255, 255, 0.65) !important;
	font-size: var(--gi-fs-xs) !important;
	line-height: 1 !important;
}
#site-nav .login_info a {
	padding: 0 8px !important;
	color: rgba(255, 255, 255, 0.85) !important;
	position: relative !important;
}
#site-nav .login_info a:not(:last-child)::after {
	content: "" !important;
	position: absolute !important;
	right: 0 !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	width: 1px !important;
	height: 12px !important;
	background: rgba(255, 255, 255, 0.15) !important;
}
#site-nav .login_info a:hover {
	color: var(--gi-accent) !important;
}
#site-nav .login_info span {
	color: var(--gi-accent) !important;
	font-weight: 500 !important;
}
#site-nav .login_info .ml5 { margin-left: 5px !important; }

/* Right: quick menu */
#site-nav .quick-menu {
	float: none !important;
	display: flex !important;
	align-items: stretch !important;
	gap: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	background: transparent !important;
	background-image: none !important;
}
#site-nav .quick-menu .item {
	float: none !important;
	display: flex !important;
	align-items: center !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	position: relative !important;
}
#site-nav .quick-menu .home { display: none !important; }   /* "返回首页" 隐藏 — 已在 logo 处体现 */
#site-nav .quick-menu .menu {
	position: relative !important;        /* 关键：让 .menu-bd 相对 .menu 定位 */
	display: flex !important;
	align-items: center !important;
}
#site-nav .quick-menu .menu-hd {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 0 14px !important;
	height: 32px !important;
	color: rgba(255, 255, 255, 0.85) !important;
	font-size: var(--gi-fs-xs) !important;
	text-decoration: none !important;
	background: transparent !important;
	border: 0 !important;
	cursor: pointer !important;
	transition: color .15s var(--gi-ease), background .15s var(--gi-ease) !important;
}
#site-nav .quick-menu .menu-hd:hover {
	color: #fff !important;
	background: rgba(255, 255, 255, 0.08) !important;
}

/* Dropdown arrow (replace empty <b></b> with SVG chevron) */
#site-nav .quick-menu .menu-hd b {
	/* 重置 legacy global.css L290 的 position: absolute; top: 3px; right: 0;
	   那是导致图标飘到文字上方的根因 */
	position: static !important;
	top: auto !important;
	right: auto !important;
	overflow: visible !important;
	display: inline-block !important;
	width: 10px !important;
	height: 10px !important;
	background: currentColor !important;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat center / contain !important;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat center / contain !important;
	opacity: 0.7 !important;
	margin: 0 !important;
	transition: transform .2s var(--gi-ease) !important;
	vertical-align: middle !important;
	flex: 0 0 auto !important;
}
#site-nav .quick-menu .item:hover .menu-hd b {
	transform: rotate(180deg) !important;
}

/* Dropdown panels (menu-bd) */
#site-nav .quick-menu .menu-bd {
	display: none !important;
	position: absolute !important;
	top: 100% !important;
	right: 0 !important;
	min-width: 200px !important;
	background: #fff !important;
	border: 1px solid var(--gi-line) !important;
	border-radius: 0 0 var(--gi-radius-sm) var(--gi-radius-sm) !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
	padding: 8px 0 !important;
	margin: 0 !important;
	z-index: 1100 !important;             /* 高于 #site-nav 的 1000 */
	color: var(--gi-text-1) !important;
}
#site-nav .quick-menu .item:hover .menu-bd,
#site-nav .quick-menu .menu:hover .menu-bd {
	display: block !important;
}
#site-nav .quick-menu .menu-bd a {
	color: var(--gi-text-2) !important;
	padding: 8px 16px !important;
	display: flex !important;
	align-items: center !important;
	font-size: var(--gi-fs-sm) !important;
	transition: color .15s var(--gi-ease), background .15s var(--gi-ease) !important;
}
#site-nav .quick-menu .menu-bd a:hover {
	color: var(--gi-accent) !important;
	background: var(--gi-accent-soft) !important;
}
#site-nav .quick-menu .menu-bd .login-status {
	padding: 8px 16px !important;
	color: var(--gi-text-2) !important;
	font-size: var(--gi-fs-sm) !important;
	border-bottom: 1px solid var(--gi-line) !important;
	margin-bottom: 8px !important;
}
#site-nav .quick-menu .member-nav-list {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 0 !important;
	padding: 0 !important;
	margin: 0 0 8px 0 !important;
}
#site-nav .quick-menu .member-nav-list ul {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
#site-nav .quick-menu .member-nav-list li {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

/* Browse history thumbnails (view-list) */
#site-nav .view-list {
	padding: 8px 16px !important;
	border-top: 1px solid var(--gi-line) !important;
	margin-top: 8px !important;
}
#site-nav .view-list p {
	margin: 0 0 8px 0 !important;
	padding: 0 !important;
	color: var(--gi-text-3) !important;
	font-size: var(--gi-fs-xs) !important;
}
#site-nav .view-list ul {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 6px !important;
}
#site-nav .view-list li {
	margin: 0 !important;
	padding: 0 !important;
}
#site-nav .view-list a {
	padding: 0 !important;
	display: block !important;
	width: 100% !important;
	aspect-ratio: 1 / 1 !important;
	border: 1px solid var(--gi-line) !important;
	border-radius: var(--gi-r-1) !important;
	overflow: hidden !important;
	background: var(--gi-bg) !important;
}
#site-nav .view-list a:hover {
	background: var(--gi-accent-soft) !important;
	border-color: var(--gi-accent) !important;
}
#site-nav .view-list img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
}

/* Cart list inside dropdown (eject-box) */
#site-nav .cart-list {
	padding: 0 !important;
	margin: 0 !important;
}
#site-nav .eject-box {
	min-width: 240px !important;
	padding: 0 !important;
}

/* Eject-box left/right site nav padding10 */
#site-nav .menu-bd.padding10 {
	padding: 10px !important;
	/*display: grid !important;*/
	grid-template-columns: 1fr 1fr !important;
	gap: 4px 12px !important;
}
#site-nav .menu-bd.padding10 a {
	padding: 6px 8px !important;
}

/* Center/utility helper text */
#site-nav .center { text-align: center !important; }
#site-nav .w-full { width: 100% !important; }
#site-nav .mt5 { margin-top: 5px !important; }

/* Remove legacy "返回首页" hover arrow that breaks flow */
#site-nav .clearfix::after { display: none !important; }

/* ==========================================================================
   3. Mobile responsive
   ========================================================================== */
@media (max-width: 768px) {
	#site-nav { display: none !important; }                  /* 移动端隐藏顶部 utility 栏 */
}

#site-nav .favorite .menu-bd{height: auto;}