/* ==========================================================================
   A. 固定页头（渐进增强：`data-cs-hdr` 由 JS 加，没 JS 就完全不生效）
   ========================================================================== */
html[data-cs-hdr="fixed"] .cs-announce{
	position:fixed;top:0;left:0;right:0;z-index:8600;
	max-height:var(--cs-ann-h,39px);overflow:hidden;
	transition:max-height .26s ease,opacity .2s ease;
}
/* 品牌 + 导航行（JS 会给它加 .cs-topbar） */
html[data-cs-hdr="fixed"] header.wp-block-template-part > .cs-topbar{
	position:fixed;top:var(--cs-ann-h,39px);left:0;right:0;z-index:8500;
	background:#fff;
	transition:top .26s ease,box-shadow .2s ease;
}
/* 行高收窄：88px → 72px（内层是内联 style，必须 !important 才压得过）
   ⚠️ 只收 padding，**不动字标尺寸**（字标禁设固定高）。 */
html[data-cs-hdr="fixed"] header.wp-block-template-part > .cs-topbar .wp-block-group.alignwide{
	padding-top:12px!important;padding-bottom:12px!important;
}
/* 给页面留出固定条的高度，避免内容上跳 */
html[data-cs-hdr="fixed"] header.wp-block-template-part{padding-top:var(--cs-hdr-h,127px)}

/* —— 滚动后：公告条收起 → 只剩导航条 ——
   🔴 2026-09-22（用户要求）：**桌面端黑色公告条常驻**，不随滚动收起。
   ⇒ 这一整组「滚动态」规则现在只对窄屏生效（断点取 999px，与 hero 的 1000px 对齐）。
   桌面端滚动后：公告条原地不动、导航行仍钉在它下沿、页头留白不变、
   下拉面板的 top 也仍取全高 —— JS 里 syncNow() 有**同一个断点判断**，两处必须同步改。 */
@media (max-width:999px){
	html[data-cs-hdr="fixed"][data-cs-scrolled="1"] .cs-announce{max-height:0;opacity:0}
	html[data-cs-hdr="fixed"][data-cs-scrolled="1"] header.wp-block-template-part > .cs-topbar{
		top:0;
		box-shadow:0 1px 0 rgba(0,0,0,.09),0 2px 14px rgba(0,0,0,.045);
	}
	html[data-cs-hdr="fixed"][data-cs-scrolled="1"] header.wp-block-template-part{padding-top:var(--cs-hdr-h-min,72px)}
}

/* ==========================================================================
   B. 顶层导航一行
   ========================================================================== */
.cs-mm{position:relative;display:block}
.cs-mm__bar{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0;flex-wrap:wrap;justify-content:flex-end}
.cs-mm__item{margin:0;padding:0}
.cs-mm__link{
	display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border-radius:8px;
	text-decoration:none;color:#1d1d1f;font-size:.9375rem;font-weight:400;line-height:1.2;
	white-space:nowrap;transition:background-color .16s ease,color .16s ease;
}
.cs-mm__link:hover{background:#f5f5f7}
.cs-mm__link:focus-visible{outline:2px solid #8B1A1A;outline-offset:2px}
/* 三大类目加粗 */
.cs-mm__link--line{font-weight:700;letter-spacing:-.01em}
/* 🔴 HuntCards 入口图标（全站唯一带图标的导航项；线稿档，随文字色） */
.cs-mm__ico{flex:0 0 auto;width:17px;height:17px;opacity:.88;transition:opacity .2s ease}
.cs-mm__link:hover .cs-mm__ico{opacity:1}
.cs-mm__item--mega[data-open="1"] > .cs-mm__link{background:#f5f5f7;color:#8B1A1A}
.cs-mm__caret{width:10px;height:6px;opacity:.5;transition:transform .2s ease}
.cs-mm__item--mega[data-open="1"] .cs-mm__caret{transform:rotate(180deg);opacity:.9}

/* ==========================================================================
   C. 下拉面板（极简：类目名 + 小类，无介绍、无眉标、无栏头）
   🔴 `top` 绑 `--cs-hdr-now`（= 当前固定页头高）⇒ 与导航条**零间隙**，
      鼠标从导航条移进面板不会触发 mouseleave。所以不需要「一滚动就收起」。
   ========================================================================== */
.cs-mm__panel{
	position:fixed;top:var(--cs-hdr-now,127px);left:0;right:0;
	background:#fff;border-top:1px solid #e8e8ed;
	box-shadow:0 18px 40px rgba(0,0,0,.10);
	z-index:9000;
	transform:translateY(-10px);opacity:0;visibility:hidden;
	transition:opacity .2s ease,transform .2s ease,visibility .2s ease;
}
.cs-mm__panel[data-open="1"]{opacity:1;visibility:visible;transform:none}
.cs-mm__panel[hidden]{display:none}
/* 面板内容与页面容器**左边距对齐**：站点用 `.alignwide`(1340) + `has-global-padding`(50)，
   ⇒ 面板内层取 `wide-size + 2×50` 并自带同样的 50px 内边距，任意视口下左边缘都对得上
   （实测前：面板左 152px vs 页面左 50px，差 102px）。 */
.cs-mm__panel-in{
	max-width:calc(var(--wp--style--global--wide-size,1340px) + 100px);
	margin:0 auto;padding:22px 50px 26px;
	display:grid;grid-template-columns:210px minmax(0,1fr);gap:40px;align-items:start;
}
.cs-mm__all{display:flex;flex-direction:column;gap:3px;text-decoration:none}
.cs-mm__all-t{font-size:1.0625rem;font-weight:700;letter-spacing:-.01em;color:#1d1d1f;transition:color .16s ease}
.cs-mm__all-s{font-size:.8125rem;font-weight:500;color:#8B1A1A}
.cs-mm__all:hover .cs-mm__all-t{color:#8B1A1A}
.cs-mm__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:2px 28px}
.cs-mm__a{display:block;padding:7px 0;font-size:.9375rem;font-weight:500;color:#1d1d1f;text-decoration:none;transition:color .16s ease}
.cs-mm__a:hover{color:#8B1A1A}
.cs-mm__a:focus-visible{outline:2px solid #8B1A1A;outline-offset:2px}
.cs-mm__a--muted{color:#a1a1a6;font-weight:400;cursor:default}

/* 遮罩：从导航条下沿开始，不压暗导航条本身 */
.cs-mm__backdrop{
	position:fixed;inset:var(--cs-hdr-now,127px) 0 0 0;
	background:rgba(0,0,0,.22);z-index:8990;opacity:0;transition:opacity .2s ease;
}
.cs-mm__backdrop[data-open="1"]{opacity:1}

/* ==========================================================================
   D. 移动端：汉堡 + 全宽手风琴
   ========================================================================== */
.cs-mm__burger{
	display:none;align-items:center;justify-content:center;width:42px;height:42px;
	padding:0;border:1.5px solid #d6d6db;border-radius:9px;background:#fff;cursor:pointer;
}
.cs-mm__burger-i,.cs-mm__burger-i::before,.cs-mm__burger-i::after{
	display:block;width:18px;height:1.8px;background:#1d1d1f;border-radius:2px;content:"";
}
.cs-mm__burger-i{position:relative}
.cs-mm__burger-i::before{position:absolute;top:-6px}
.cs-mm__burger-i::after{position:absolute;top:6px}

@media (max-width:960px){
	.cs-mm{display:flex;justify-content:flex-end}
	.cs-mm__burger{display:inline-flex}
	.cs-mm__bar{
		display:none;position:fixed;top:var(--cs-hdr-now,127px);left:0;right:0;
		flex-direction:column;align-items:stretch;gap:0;flex-wrap:nowrap;
		background:#fff;border-top:1px solid #e8e8ed;
		max-height:calc(100vh - var(--cs-hdr-now,127px));overflow:auto;
		z-index:9000;padding:4px 0 12px;
	}
	.cs-mm[data-mobile-open="1"] .cs-mm__bar{display:flex}
	.cs-mm__link{justify-content:space-between;padding:15px 22px;border-radius:0;font-size:1rem;font-weight:600;gap:10px}
	.cs-mm__item--mega[data-open="1"] > .cs-mm__link{background:#f7f7f9}
	/* 面板在窄屏落回文档流 ⇒ 直接挂在它那一行下面（手风琴） */
	.cs-mm__panel{
		position:static;top:auto;left:auto;right:auto;transform:none;
		opacity:1;visibility:visible;border:0;box-shadow:none;background:#fafafa;
	}
	.cs-mm__panel[hidden]{display:none}
	.cs-mm__panel-in{grid-template-columns:1fr;gap:12px;padding:14px 22px 18px}
	.cs-mm__all{flex-direction:row;align-items:baseline;gap:10px}
	/* 窄屏下类目名就在正上方那一行，面板里再写一遍是冗余 ⇒ 只留 "Shop all →" */
	.cs-mm__all-t{display:none}
	.cs-mm__list{grid-template-columns:1fr}
	.cs-mm__a{padding:10px 0}
	.cs-mm__backdrop{display:none}
}
@media (prefers-reduced-motion:reduce){
	.cs-mm__panel,.cs-mm__backdrop,.cs-mm__caret,.cs-announce,
	html[data-cs-hdr="fixed"] header.wp-block-template-part > .cs-topbar{transition:none}
}