/* ===========================================================================
   AP 左侧品牌导航 (ap-brand-rail)
   配合 mu-plugins/ap-brand-rail.php 使用。变量全部取自 ap-design/tokens.css，
   这里不硬编码任何颜色 / 字号 / 间距（唯一自有变量是栏宽 --ap-br-w）。

   ---------------------------------------------------------------------------
   1.2.0（2026-10-11 第四轮）改了什么
   ---------------------------------------------------------------------------
   用户给了一张工业 B2B 站的左栏参考图，要求：

   a) 页头 + 顶部工具条**恢复通栏**。
      做法：它们的盒子**一个像素都没动**，只用一个 ::before 把底色往左铺满
      184px。这样页头里的 logo / 导航与正文的左右对齐关系完全保持原样，
      不用去碰主题那套 alignfull + has-global-padding 的负边距（碰过一次，
      见 front.css 第 9 节那次横向溢出的教训）。

   b) 左栏**挂到页头下方**（而不是通到页面最顶）。
      顶边 = var(--ap-rail-top)，由 ap-brand-rail.php 里那一小段 JS 实时量
      页头下沿得到。⚠️ 纯 CSS 算不出来：页头是 sticky，顶上的工具条会滚走，
      所以「页头下沿」在滚动过程中会从 141px 变到 86px。
      没有 JS 时退化成这里的静态默认值，照样能用。

   c) 栏顶加搜索框、列表照参考图加细「>」（结构见 PHP）。

   ★ 没变的硬约束（踩过的坑，别再动）：
     - .ap-br__list 绝不能加 overflow —— 会建立裁剪上下文，
       把向右飞出的二级菜单整个裁掉。
     - .ap-br 的 z-index 必须高于吸顶页头（页头 60、工具条 70 → 这里 80）。
     - 浅底上的次要文字一律用 --ink-3，--ink-4 只有 2.99:1 不合格。
   =========================================================================== */

.ap-br {
	position: fixed;
	inset-inline-start: 0;
	/* 顶边贴页头下沿（JS 写 --ap-rail-top）。这里的几个默认值只在**没有 JS** 时
	   生效：它们是实测出来的页头底边（工具条 36 + 页头 86 / 137 / 195）。
	   不 JS 时至少别压住页头 —— 1.2.0 第一版只给了 141px 一个值，
	   在 1024/900/761 下会向上盖住页头。 */
	--ap-rail-top: 141px;
	inset-block-start: var(--ap-rail-top);
	inset-block-end: 0;
	width: var(--ap-br-w, 184px);
	/* ⚠️ 必须高于吸顶页头（front.css 里 header 是 z-index:60，工具条 70）。 */
	z-index: 80;
	display: flex;
	flex-direction: column;
	background: var(--surface, #fff);
	border-inline-end: 1px solid var(--line, #dfe5ea);
	font-family: var(--font-sans);
}
@media (min-width: 761px) and (max-width: 1365px) { .ap-br { --ap-rail-top: 192px; } }
@media (min-width: 761px) and (max-width: 899px) { .ap-br { --ap-rail-top: 250px; } }

/* [hidden] 会被 display 顶掉（.ap-br__flyout a 是 flex），必须兜底 */
.ap-br [hidden] { display: none !important; }

@media (min-width: 761px) {
	/* 正文整体给左栏让位（页头不在其中，它的底色单独铺）。
	   ★ 内边距加在 .wp-site-blocks 而**不是 body** 上：
	     body 运行时被 WooCommerce 的脚本写上内联 style="padding-right:0"
	     （滚动条补偿），内联样式压过样式表 —— 竖排（RTL）时
	     padding-inline-start 正好映射到 padding-right，让位会整个失效、
	     左栏压在商品卡上（2026-10-11 独立复核查出来的）。 */
	body.ap-has-brandrail .wp-site-blocks { padding-inline-start: var(--ap-br-w, 184px); }

	/* ★★ 左栏要「贴着正文」，不能死贴在视口最左缘。
	 ---------------------------------------------------------------------------
	   正文列是 alignwide（主题的 --wp--style--global--wide-size = 1340px），
	   在让位后的区域里**居中**。屏一宽，正文就往中间走，而左栏还钉在 x=0，
	   中间裂开一大块空白：1440 下 32px（正常）、1600 下 38px、
	   **1920 下 198px、2560 下 518px** —— 左栏看起来是「飘在窗口边上」而不是
	   「这条页面的内容导航」。用户 2026-10-11 就是这么反馈的。

	   推导（W=视口宽 R=栏宽 G=--gutter C=宽列上限）：
	     正文列左沿 = R + G + max(0, (W - R - 2G - C) / 2)
	     左栏左沿   = 正文列左沿 - R - G
	                = max(0, (W - R - 2G - C) / 2)     ← R 和 G 正好约掉
	   所以只要求「正文居中后多出来的那点左边距」。1588px 以下算出负数，
	   max() 兜到 0 —— 常见笔记本宽度下行为完全不变。

	   用 100% 而不是 100vw：fixed 元素的百分比相对初始包含块（视口，**不含**
	   滚动条），而 100vw 是含滚动条的，Windows 上会差半个滚动条。

	   C 直接取主题自己的变量，主题改宽列时这里自动跟随，不会悄悄失准。 */
	.ap-br {
		inset-inline-start: max(
			0px,
			calc((100% - var(--ap-br-w, 184px) - 2 * var(--gutter) - var(--wp--style--global--wide-size, 1340px)) / 2)
		);
	}

	/* ---- 页头 / 工具条：底色往左铺满，盒子不动 ---- */
	body.ap-has-brandrail .dk-utilbar::before,
	body.ap-has-brandrail header.wp-block-template-part::before {
		content: "";
		position: absolute;
		inset-block: 0;
		inset-inline-start: calc(-1 * var(--ap-br-w, 184px));
		width: var(--ap-br-w, 184px);
		pointer-events: none;
	}
	body.ap-has-brandrail .dk-utilbar::before {
		background: inherit;
	}
	body.ap-has-brandrail header.wp-block-template-part::before {
		background: inherit;
		/* 跟页头自身一样的收边，横线才不会在 x=184 处断掉 */
		box-shadow: var(--shadow-header);
		border-block-end: 1px solid var(--line);
	}
}

/* ---------------------------------------------------------------------------
   栏顶搜索框（参考图：输入框 + 右侧放大镜）
   --------------------------------------------------------------------------- */
.ap-br__search {
	position: relative;
	padding: var(--sp-4) var(--sp-4) var(--sp-3);
}

.ap-br__input {
	width: 100%;
	min-height: 38px;
	padding-block: 0;
	padding-inline: var(--sp-3) 34px;
	border: 1px solid var(--line-2);
	border-radius: var(--r-1);
	background: var(--surface);
	color: var(--ink);
	font-family: var(--font-sans);
	font-size: var(--fs-ui);
	line-height: 1.4;
	appearance: none;
	-webkit-appearance: none;
}
/* 去掉 WebKit 自带的那套装饰，否则会和右侧图标叠在一起 */
.ap-br__input::-webkit-search-decoration,
.ap-br__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	display: none;
}
.ap-br__input::placeholder { color: var(--ink-3); opacity: 1; }
.ap-br__input:focus {
	outline: none;
	border-color: var(--brand);
	box-shadow: var(--focus-ring);
}

.ap-br__mag,
.ap-br__clear {
	position: absolute;
	inset-block-start: calc(var(--sp-4) + 11px); /* 输入框 38px 高，垂直居中 */
	inset-inline-end: calc(var(--sp-4) + 12px);
	width: 16px;
	height: 16px;
	color: var(--ink-3);
}
.ap-br__mag {
	pointer-events: none;
}
.ap-br__clear {
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}
.ap-br__clear svg { width: 14px; height: 14px; display: block; }
.ap-br__clear:hover { color: var(--ink); }
.ap-br__clear:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-1); }
/* 有内容时「×」顶上，放大镜让位 */
.ap-br__clear:not([hidden]) ~ .ap-br__mag { display: none; }

/* 无障碍：给输入框一个屏读可见的标签，视觉上藏掉 */
.ap-br__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------------------
   栏标题（参考图：一行加粗标题 + 一条细线）
   --------------------------------------------------------------------------- */
.ap-br__head {
	padding: var(--sp-3) var(--sp-4);
	border-block-end: 1px solid var(--line);
}
.ap-br__title {
	display: block;
	font-family: var(--font-cond);
	font-weight: var(--fw-bold);
	font-size: var(--fs-lead);
	line-height: var(--lh-snug);
	color: var(--ink);
}

/* 搜不到时的提示 */
.ap-br__status {
	margin: 0;
	padding: var(--sp-3) var(--sp-4);
	font-size: var(--fs-sm);
	color: var(--ink-3);
}

/* ---------------------------------------------------------------------------
   一级列表
   --------------------------------------------------------------------------- */
.ap-br__list {
	list-style: none;
	margin: 0;
	padding: var(--sp-2) var(--sp-2) var(--sp-3);
	display: flex;
	flex-direction: column;
	gap: 1px;
	/* ⚠️ 这里不能写 overflow-y:auto —— 会建立裁剪上下文，把向右飞出的
	   二级菜单整个裁掉（踩过一次）。整条栏本来就只有 5 行，不需要滚动。 */
}
.ap-br__group { position: relative; }

.ap-br__row {
	width: 100%;
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	min-height: 44px;
	padding: var(--sp-2);
	background: none;
	border: 0;
	border-radius: var(--r-2);
	font: inherit;
	text-align: start;
	cursor: pointer;
	color: var(--ink-2);
	transition: background .16s var(--ease), color .16s var(--ease);
}
.ap-br__row:hover,
.ap-br__group.is-open > .ap-br__row { background: var(--surface-2); color: var(--ink); }
.ap-br__row:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.ap-br__logo {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	display: grid;
	place-items: center;
	color: var(--steel-700);
}
/* logo 只留 viewBox，尺寸交给这里；宽标按高度缩、窄标按宽度封顶，保持比例 */
.ap-br__logo svg {
	display: block;
	max-width: 24px;
	max-height: 18px;
	width: auto;
	height: auto;
}
.ap-br__group.is-open > .ap-br__row .ap-br__logo,
.ap-br__row:hover .ap-br__logo { color: var(--brand); }

.ap-br__names { flex: 1 1 auto; min-width: 0; line-height: 1.15; }
.ap-br__names b {
	display: block;
	font-family: var(--font-cond);
	font-weight: 600;
	/* 参考图里这一列明显大于正文，16px 更好扫 */
	font-size: var(--fs-base);
	color: inherit;
	/* 名字比栏宽时长名字自己截断，别去压右边的「>」 */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* 英文副名：只在中文站出现（PHP 里有判断），非中文站是干净的一行 */
.ap-br__names i {
	display: block;
	font-style: normal;
	font-family: var(--font-cond);
	font-size: var(--fs-2xs);
	letter-spacing: .04em;
	color: var(--ink-3);
	margin-block-start: 1px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 参考图里每行右侧那个细「>」 */
.ap-br__chev {
	flex: 0 0 auto;
	width: 13px;
	height: 13px;
	color: var(--ink-3);
	transition: color .16s var(--ease);
}
.ap-br__row:hover .ap-br__chev,
.ap-br__group.is-open > .ap-br__row .ap-br__chev { color: var(--brand); }

/* ---------------------------------------------------------------------------
   右侧飞出：二级菜单
   --------------------------------------------------------------------------- */
.ap-br__flyout {
	position: absolute;
	/* 左栏右边框 + 4px 间隙 */
	inset-inline-start: calc(100% + var(--sp-3));
	inset-block-start: 0;
	min-width: 248px;
	max-width: 340px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-3);
	box-shadow: var(--shadow-pop);
	padding: var(--sp-2);
	z-index: 51;
	/* ★ 矮视口（1280×720 这类笔记本）下面板会长出屏幕底部，最后几条鼠标键盘都够不到。
	   这里限高并允许自己滚 —— 注意**这个面板自己可以 overflow**，
	   因为里面没有别的东西要飞出去；不能加 overflow 的是 .ap-br__list。
	   --ap-fly-max 由 JS 按「面板顶边到视口底」实时给（见 ap-brand-rail.php）。 */
	max-height: var(--ap-fly-max, calc(100vh - var(--ap-rail-top, 141px) - var(--sp-4)));
	overflow-y: auto;
	overscroll-behavior: contain;
	opacity: 0;
	visibility: hidden;
	transform: translateX(-6px);
	transition: opacity .14s var(--ease), transform .14s var(--ease), visibility .14s;
}
.ap-br__group.is-open > .ap-br__flyout { opacity: 1; visibility: visible; transform: none; }
@media (hover: hover) {
	.ap-br__group:hover > .ap-br__flyout { opacity: 1; visibility: visible; transform: none; }
}
/* 下面装不下就向上翻，贴着该行的底边往上长（JS 按实测高度决定，见 ap-brand-rail.php） */
.ap-br__group--up > .ap-br__flyout { inset-block-start: auto; inset-block-end: 0; }

.ap-br__flyhead {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-3);
	font-family: var(--font-cond);
	font-weight: 600;
	font-size: var(--fs-sm);
	color: var(--ink);
	padding: var(--sp-2) var(--sp-3) var(--sp-1);
	border-block-end: 1px solid var(--line);
	margin-block-end: var(--sp-1);
}
/* 该集团的子品牌条数（原来在行里那个徽标，行里让位给 16px 的品牌名了） */
.ap-br__flycount {
	flex: 0 0 auto;
	font-family: var(--font-mono);
	font-weight: 400;
	font-size: var(--fs-2xs);
	color: var(--ink-3);
}
.ap-br__flyout a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-3);
	padding: var(--sp-2) var(--sp-3);
	border-radius: var(--r-1);
	font-size: var(--fs-sm);
	color: var(--ink-2);
	text-decoration: none;
	transition: background .12s var(--ease), color .12s var(--ease);
}
.ap-br__flyout a:hover,
.ap-br__flyout a:focus-visible { background: var(--brand-tint); color: var(--brand-deep); outline: none; }
.ap-br__flyout a:focus-visible { box-shadow: var(--focus-ring); }
.ap-br__flyout a[aria-current="true"] { font-weight: 600; color: var(--brand-deep); }
/* 不许换行 —— 换行会让右边的等宽短名跑到第二行去，看着像错位。
   不换行时飞出面板按内容自己长（min-width 248 / max-width 340 之间），
   真长到超过 340 就在名字上打省略号。 */
.ap-br__lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ap-br__flyhead > span:first-child { white-space: nowrap; }
.ap-br__tag {
	flex: 0 0 auto;
	font-family: var(--font-mono);
	font-size: var(--fs-2xs);
	color: var(--ink-3);
	white-space: nowrap;
}

/* 一条里并排多个名字的分组（DFSK · 风光 · 小康 · 蓝电） */
.ap-br__sub { margin-block: 2px; }
.ap-br__subhead {
	display: block;
	font-family: var(--font-cond);
	font-size: var(--fs-2xs);
	letter-spacing: .02em;
	color: var(--ink-3);
	padding: var(--sp-2) var(--sp-3) var(--sp-1);
	border-block-start: 1px solid var(--line);
	margin-block-start: var(--sp-1);
}
.ap-br__sub a { padding-inline-start: var(--sp-5); }

.ap-br__foot {
	margin-block-start: auto;
	padding: var(--sp-3) var(--sp-4);
	border-block-start: 1px solid var(--line);
	font-size: var(--fs-2xs);
	line-height: 1.5;
	color: var(--ink-3);
}

/* 矮屏（笔记本横屏 / 分屏）把纵向节奏收一收，保证 5 行 + 搜索框都够得着 */
@media (min-width: 761px) and (max-height: 660px) {
	.ap-br__search { padding-block: var(--sp-3) var(--sp-2); }
	.ap-br__mag, .ap-br__clear { inset-block-start: calc(var(--sp-3) + 11px); }
	.ap-br__head { padding-block: var(--sp-2); }
	.ap-br__row { min-height: 38px; padding-block: 3px; }
	.ap-br__foot { padding-block: var(--sp-2); }
}

/* 1280×720 / 1366×768 这类笔记本：二级菜单本身也要收一点，
   不然最高的那组（东风，11 条链接）会差几十像素装不下，得靠面板内部滚动。
   收紧后它的自然高度从 ~497px 降到 ~410px，在 720px 视口里正好放得下。
   （装不下的极端情况仍有 --ap-fly-max 兜底，见 .ap-br__flyout。） */
@media (min-width: 761px) and (max-height: 820px) {
	.ap-br__flyout a { padding-block: 4px; }
	.ap-br__flyhead { padding-block: var(--sp-1) 0; }
	.ap-br__subhead { padding-block: var(--sp-1) 0; }
}

/* ---------------------------------------------------------------------------
   窄屏：收成左下角按钮，点击滑出抽屉；二级菜单改为行下展开
   --------------------------------------------------------------------------- */
.ap-br__btn { display: none; }
.ap-br__scrim { display: none; }

@media (max-width: 760px) {
	body.ap-has-brandrail .wp-site-blocks { padding-inline-start: 0; }

	.ap-br {
		/* 抽屉是整屏覆盖，不受页头下沿约束 */
		inset-block-start: 0;
		transform: translateX(-100%);
		transition: transform .2s var(--ease);
		box-shadow: var(--shadow-pop);
		width: min(88vw, 320px);
		overflow-y: auto; /* 抽屉在视口外，飞出菜单已改成行下展开，不冲突 */
	}
	.ap-br.is-open { transform: none; }

	.ap-br__btn {
		display: inline-flex;
		align-items: center;
		gap: var(--sp-2);
		position: fixed;
		inset-inline-start: var(--sp-4);
		inset-block-end: var(--sp-4);
		z-index: 70;
		padding: var(--sp-2) var(--sp-3);
		border: 1px solid var(--line-2);
		border-radius: var(--r-2);
		background: var(--surface);
		color: var(--ink);
		font: inherit;
		font-size: var(--fs-ui);
		font-weight: 600;
		cursor: pointer;
		box-shadow: var(--shadow-float);
	}
	.ap-br__btn svg { width: 15px; height: 15px; }

	.ap-br__scrim {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(16, 26, 33, .4);
		z-index: 65;
	}
	.ap-br__scrim[hidden] { display: none; }

	/* 行下展开
	   ★ 必须给 display:none 兜底：position:static 之后这个盒子**即使
	     visibility:hidden 也照样占位**，5 组二级菜单叠起来能把抽屉撑到
	     2000px 以上，表现是「5 行品牌被摊到满屏、后 3 个品牌点不到」。
	     （1.1.0 就有这个毛病，这一轮改样式时才查出来。） */
	.ap-br__flyout {
		display: none;
		position: static;
		min-width: 0;
		max-width: none;
		max-height: none;
		overflow-y: visible;
		box-shadow: none;
		border: 0;
		border-inline-start: 2px solid var(--brand-tint);
		border-radius: 0;
		margin: 0 0 var(--sp-1) var(--sp-6);
		padding: 0;
		transform: none;
	}
	.ap-br__group.is-open > .ap-br__flyout { display: block; }

	.ap-br__flyhead { padding-inline-start: var(--sp-3); }
}

/* 窄窗口但仍有鼠标：悬停也能展开 */
@media (max-width: 760px) and (hover: hover) {
	.ap-br__group:hover > .ap-br__flyout { display: block; }
}

@media (prefers-reduced-motion: reduce) {
	.ap-br, .ap-br__row, .ap-br__flyout, .ap-br__flyout a, .ap-br__chev { transition: none; }
}

/* ---------------------------------------------------------------------------
   打印 —— B2B 买家打报价单 / 清单是常态。
   左栏是 position:fixed，不处理会被打进每一页，还占掉约 23% 的纸宽，
   而且上面那个搜索框在纸上点不动。
   --------------------------------------------------------------------------- */
@media print {
	.ap-br,
	.ap-br__btn,
	.ap-br__scrim { display: none !important; }
	body.ap-has-brandrail .wp-site-blocks { padding-inline-start: 0 !important; }
}

/* ---------------------------------------------------------------------------
   ap-br-footer-bleed —— 页脚通栏（2026-10-12）
   ---------------------------------------------------------------------------
   问题：左栏是 position:fixed、inset-block-end:0，**永远钉在视口底部那一条**；
   而 body.ap-has-brandrail 给 .wp-site-blocks 加了 padding-inline-start:184px，
   页脚也跟着右移。结果滚到页面底部时，页脚深色底从 x=184 才开始，
   左边留一条白栏一直贯到最底 —— 看起来就是「导航条穿到了底部」。
   （页头与工具条早就用 ::before 外扩解决了，页脚当时漏了。）

   做法与页头一致：盒子一个像素都不动，只用 ::before 把底色往左铺满 184px。
   差别只有一处 —— **这里的 ::before 需要 z-index 高于左栏（80）**，
   否则左栏的白底会压在页脚的深色底上，等于白做。

   ★ 只给 ::before 提升层级，**不提升整个页脚**：
     页脚自己的盒子仍在 x≥184，所以左栏的飞出菜单（也开在 x≥184）
     不会被页脚盖住 —— 这是个很容易踩的坑。
   ★ background:inherit —— 底色跟着页脚走，页脚以后换颜色这里不用改。
   --------------------------------------------------------------------------- */
body.ap-has-brandrail footer.wp-block-template-part {
	position: relative;
}
body.ap-has-brandrail footer.wp-block-template-part::before {
	content: "";
	position: absolute;
	z-index: 81;
	inset-block: 0;
	inset-inline-start: calc(-1 * var(--ap-br-w, 184px));
	width: var(--ap-br-w, 184px);
	background: inherit;
	pointer-events: none;
}

/* 打印时左栏本来就不让位（padding 归零），这条外扩只会画到纸外，关掉。 */
@media print {
	body.ap-has-brandrail footer.wp-block-template-part::before {
		display: none;
	}
}
/* ---------------------------------------------------------------------------
   ap-br-away —— 页脚逼近时把左栏收起（2026-10-12）
   ---------------------------------------------------------------------------
   背景：左栏是 position:fixed 且底边贴视口底，页脚（488px 高）滚上来时
   一定会盖住左栏下半段 —— 屏幕越矮盖得越多（实测 1280×720 时 5 个品牌组全被盖）。
   用户 2026-10-12 选择：**宁可让左栏整体收起，也不要半遮半掩。**

   做法：JS 量「品牌列表底边」与「页脚顶边」，一旦页脚要碰到列表，
   就给 body 加 .ap-br-away，左栏向左滑出并淡出；往上滚自动回来。
   translateX 只做水平位移，**垂直几何完全不变** —— 所以判定条件不会来回抖。

   ★ 只在 ≥761px 生效：≤760px 时左栏是左下角的抽屉，
     它自己用 transform 控制开合，这里绝不能插手。
   --------------------------------------------------------------------------- */
@media (min-width: 761px) {
	body.ap-has-brandrail .ap-br {
		transition: transform 0.28s var(--ease, ease), opacity 0.28s var(--ease, ease);
	}
	body.ap-has-brandrail.ap-br-away .ap-br {
		transform: translateX(-100%);
		opacity: 0;
		pointer-events: none;
	}
	/* RTL 下往右滑出 */
	[dir="rtl"] body.ap-has-brandrail.ap-br-away .ap-br {
		transform: translateX(100%);
	}
}

@media (prefers-reduced-motion: reduce) {
	body.ap-has-brandrail .ap-br {
		transition: none !important;
	}
}

/* 关掉 JS 时不会有 .ap-br-away，左栏照旧常驻（只是页脚会盖住下半段）。 */
/* ---------------------------------------------------------------------------
   ap-br-short —— 左栏只占「内容那么高」（2026-10-12，用户要求）
   ---------------------------------------------------------------------------
   原来：inset-block-end: 0 —— 栏目从页头下沿一路撑到视口底部，
   底下是一大段空白白条（免责声明被 margin-top:auto 推在最底下）。
   用户要求：**只做到「长城」下面为止，后面那段不要。**

   做法：把底边从「视口底部」改成「内容自身高度」，
   再配一个 max-height 兜住（视口特别矮时不会顶出屏幕外）。
   · 免责声明在 flex 列里用 margin-top:auto 贴着底 ——
     容器不再有富余高度时，auto 归零，它就自然落在品牌列表下面。
   · 栏目下方露出的是页面底色（--surface-2 浅灰），
     和正文区的底色是同一个，所以不会出现一条突兀的空列。

   ★ 只在 ≥761px 生效：≤760px 左栏是左下角抽屉，它自己的
     `inset-block-end: var(--sp-4)` 不能用这套覆盖。
   --------------------------------------------------------------------------- */
@media (min-width: 761px) {
	body.ap-has-brandrail .ap-br {
		inset-block-end: auto;
		max-height: calc(100vh - var(--ap-rail-top, 141px) - var(--sp-4, 1rem));
	}
}