/**
 * polaris/tabs 样式 —— 前台 + 编辑器共用。
 *
 * 所有可定制项通过 CSS 自定义属性暴露；
 * 块属性写入 inline style 覆盖对应变量，改设计系统 token 即可全局换肤。
 */

/* ═══════════════════════════════════════════
   变量定义（可被 inline style 覆盖）
═══════════════════════════════════════════ */
.polaris-tabs {
	--polaris-tabs-border:      var( --wp--preset--color--border-subtle, var( --wp--preset--color--border, rgba( 0, 0, 0, 0.12 ) ) );
	--polaris-tabs-accent:      var( --wp--preset--color--primary, #2563eb );
	--polaris-tabs-muted:       var( --wp--preset--color--ink-65,  rgba( 0, 0, 0, 0.65 ) );

	/* 以下变量可由块属性 inline style 逐一覆盖 */
	--polaris-tab-color:        var( --polaris-tabs-muted );
	--polaris-tab-hover-color:  var( --wp--preset--color--ink-85, rgba( 0, 0, 0, 0.85 ) );
	--polaris-tab-active-color: var( --polaris-tabs-accent );
	--polaris-indicator-color:  var( --polaris-tabs-accent );
	--polaris-tab-pad-top:      var( --wp--preset--spacing--sm, 0.75rem );
	--polaris-tab-pad-bottom:   var( --wp--preset--spacing--sm, 0.75rem );
	--polaris-tab-pad-left:     0.25rem;
	--polaris-tab-pad-right:    0.25rem;
}

/* ═══════════════════════════════════════════
   导航(tablist)
═══════════════════════════════════════════ */
.polaris-tabs__nav {
	display: flex;
	flex-wrap: wrap;
	gap: var( --polaris-tabs-gap, 0 );
	border-bottom: 1px solid var( --polaris-tabs-border );
	/* 分隔线与标签的距离:线画在 nav 的边上,所以用 nav 的内边距把它推开。
	   回退值必须带单位(0px),下面垂直布局那条要塞进 calc() —— calc 里长度不能和无单位 0 相加。 */
	padding-bottom: var( --polaris-tabs-divider-gap, 0px );
	/* 标签排版默认值:放在 nav 上,原生排版(skipSerialization)的 inline style
	   会直接覆盖这里;按钮 font:inherit 继承,所以排版只作用于标签、不波及内容。 */
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
}

/*
 * Tab 按钮 —— 两行纵向 flex。
 *
 * 第 1 行(.polaris-tabs__tab-main):左图标 + 标题 + 右图标,始终是一个整体;
 * 第 2 行(.polaris-tabs__tab-sub-row):副标题,「对齐标题」时前面放一个**隐藏的图标副本**
 * 当占位,所以缩进和图标实际宽度永远一致(SVG、图片、任意比例都对得上),关掉占位就自然
 * 和图标左对齐。
 *
 * 两行都是收缩到内容宽度,横向位置统一由 align-items 决定 —— 这样无论标签被拉多宽、
 * 副标题比标题长多少,图标都紧贴标题,不会被拉开。
 */
.polaris-tabs__tab {
	appearance: none;
	position: relative;
	display: flex;
	flex-direction: column;
	/* 纵向 flex:交叉轴=横向(文字位置的水平分量),主轴=纵向(垂直分量) */
	align-items: var( --polaris-tab-justify, start );
	justify-content: var( --polaris-tab-align, center );
	row-gap: var( --polaris-tab-sub-gap, 0.15em );
	text-align: var( --polaris-tab-text-align, start );
	/* 默认沿用改造前的表现:完全透明、直角 */
	background-color: var( --polaris-tab-bg, transparent );
	border: 0;
	border-radius:
		var( --polaris-tab-radius-tl, 0 )
		var( --polaris-tab-radius-tr, 0 )
		var( --polaris-tab-radius-br, 0 )
		var( --polaris-tab-radius-bl, 0 );
	padding: var( --polaris-tab-pad-top ) var( --polaris-tab-pad-right ) var( --polaris-tab-pad-bottom ) var( --polaris-tab-pad-left );
	font: inherit;
	color: var( --polaris-tab-color );
	cursor: pointer;
	transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
	white-space: normal;
	/* 宽度不足时自动换行，不把标签顶出导航条 */
	max-width: 100%;
}
.polaris-tabs__tab-main,
.polaris-tabs__tab-sub-row {
	display: flex;
	max-width: 100%;
	min-width: 0;
	column-gap: var( --polaris-tab-icon-gap, 0.375em );
}
.polaris-tabs__tab-main {
	align-items: center;
}
.polaris-tabs__tab-sub-row {
	align-items: flex-start;
}

.polaris-tabs__tab:hover:not( :disabled ):not( .is-disabled ):not( .is-active ) {
	color: var( --polaris-tab-hover-color );
	/* 未单独设悬停背景时回落到基础背景 —— 只改文字色的老用法不会突然多出一块底色 */
	background-color: var( --polaris-tab-hover-bg, var( --polaris-tab-bg, transparent ) );
}

.polaris-tabs__tab.is-active {
	color: var( --polaris-tab-active-color );
	background-color: var( --polaris-tab-active-bg, var( --polaris-tab-bg, transparent ) );
}

/* 焦点环跟随标签自身的圆角(outline 会自动贴合 border-radius),不再写死 2px */
.polaris-tabs__tab:focus-visible {
	outline: 2px solid var( --polaris-tabs-accent );
	outline-offset: 2px;
}

.polaris-tabs__tab-label {
	display: inline-block;
	min-width: 0;
	max-width: 100%;
	white-space: normal;
	overflow-wrap: break-word;
	word-break: break-word;
}

/* ── 副标题 ── */
.polaris-tabs__tab-subtitle {
	min-width: 0;
	white-space: normal;
	font-size: 0.8125em;
	font-weight: 400;
	line-height: 1.35;
}
/* 「对齐标题」的缩进占位:图标的隐藏副本,宽度天然等于图标本身。
   高度压成 0 —— 只借它的宽度,不让它把副标题那一行撑高。 */
.polaris-tabs__tab-icon--spacer {
	visibility: hidden;
	height: 0;
	overflow: hidden;
}
/* 限制行数:超出部分截断并显示「…」 */
.polaris-tabs__tab-subtitle.is-clamped {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var( --polaris-tab-sub-lines, 2 );
	line-clamp: var( --polaris-tab-sub-lines, 2 );
	overflow: hidden;
}

/* ═══════════════════════════════════════════
   激活指示杠 —— 伪元素,位置可选上/下/左/右
   (以前是按钮的 border,和「分隔线」抢同一条边;改成伪元素后两者互不干扰)
═══════════════════════════════════════════ */
.polaris-tabs__tab::after {
	content: "";
	position: absolute;
	background-color: transparent;
	pointer-events: none;
	transition: background-color 0.15s ease;
}
.polaris-tabs__tab.is-active::after {
	background-color: var( --polaris-indicator-color );
}
/*
 * 三个可调项:
 *   --polaris-indicator-size    粗细(横杠是高、竖杠是宽),默认 2px
 *   --polaris-indicator-length  长度,默认撑满标签那条边;收窄后自动居中(margin auto)
 *   --polaris-indicator-gap     与标签的间距,靠标签让出真实空间(margin)+ 杠同步外移实现,
 *                               见下方「与标签的间距」。
 *
 * 杠贴边的基准是 --polaris-indicator-offset:水平在下 / 垂直在右这两种默认位置是 -1px,
 * 刚好压住那条 1px 的分隔线,不留缝;其余位置贴着标签边缘。
 */
/*
 * 居中一律用 left/top:50% + translate,不用 auto 外边距。
 *
 * 绝对定位元素同时给了两侧偏移又给了尺寸时属于「过约束」,横竖两个方向的解法在
 * CSS 规范里是不对称的:块方向(§10.6.4)允许两个 auto 外边距取相等的**负值**,
 * 所以竖杠超过 100% 仍是居中的;而行方向(§10.3.7)明确规定「若会变成负值,
 * 就把 margin-left 置 0 再解方程」,于是横杠一超过 100% 就贴到左边去了。
 * translate 走的是自身尺寸的百分比,正负都对称,两个方向表现一致。
 */
.polaris-tabs.is-indicator-bottom .polaris-tabs__tab::after,
.polaris-tabs.is-indicator-top .polaris-tabs__tab::after {
	left: 50%;
	transform: translateX( -50% );
	width: var( --polaris-indicator-length, 100% );
	height: var( --polaris-indicator-size, 2px );
}
.polaris-tabs.is-indicator-bottom .polaris-tabs__tab::after {
	bottom: calc( var( --polaris-indicator-offset, 0px ) - var( --polaris-indicator-gap, 0px ) );
}
.polaris-tabs.is-indicator-top .polaris-tabs__tab::after {
	top: calc( var( --polaris-indicator-offset, 0px ) - var( --polaris-indicator-gap, 0px ) );
}
.polaris-tabs.is-indicator-left .polaris-tabs__tab::after,
.polaris-tabs.is-indicator-right .polaris-tabs__tab::after {
	top: 50%;
	transform: translateY( -50% );
	height: var( --polaris-indicator-length, 100% );
	width: var( --polaris-indicator-size, 2px );
}
.polaris-tabs.is-indicator-left .polaris-tabs__tab::after {
	left: calc( var( --polaris-indicator-offset, 0px ) - var( --polaris-indicator-gap, 0px ) );
}
.polaris-tabs.is-indicator-right .polaris-tabs__tab::after {
	right: calc( var( --polaris-indicator-offset, 0px ) - var( --polaris-indicator-gap, 0px ) );
}
.polaris-tabs.is-indicator-none .polaris-tabs__tab::after {
	content: none;
}
/* 默认贴住分隔线(水平=nav 底线,垂直=nav 右侧线),两条线之间不留缝 */
.polaris-tabs:not( .is-orientation-vertical ).is-indicator-bottom,
.polaris-tabs.is-orientation-vertical.is-indicator-right {
	--polaris-indicator-offset: -1px;
}

/*
 * 「与标签的间距」= 标签盒子在杠那一侧让出的真实空间(margin),杠再往外挪同样的距离。
 *
 * 关键是它占的是**真实布局空间**,不是把背景往回缩 —— 所以标签的内边距、背景、圆角
 * 一点不受影响,杠和分隔线的相对关系也不变(下方那条线跟着导航条一起下移),
 * 只是标签和「杠+分隔线」之间多出了这段留白。
 */
.polaris-tabs.is-indicator-bottom .polaris-tabs__tab {
	margin-bottom: var( --polaris-indicator-gap, 0px );
}
.polaris-tabs.is-indicator-top .polaris-tabs__tab {
	margin-top: var( --polaris-indicator-gap, 0px );
}
.polaris-tabs.is-indicator-left .polaris-tabs__tab {
	margin-left: var( --polaris-indicator-gap, 0px );
}
.polaris-tabs.is-indicator-right .polaris-tabs__tab {
	margin-right: var( --polaris-indicator-gap, 0px );
}

/* 图标(emoji 文本 / 图标库 SVG / 自定义 SVG / 图片);默认与标题文字同大小 */
.polaris-tabs__tab-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	font-style: normal;
	line-height: 1;
	/* 「图标大小」写在 inline style 的 font-size 上,内部 svg / img 按 1em 跟随 */
	font-size: 1em;
}
.polaris-tabs__tab-icon svg {
	width: auto;
	height: 1em;
}
/* 图标库图标是描边式;强制 fill:none 覆盖编辑器/主题的全局 svg{fill:currentColor},
   否则封闭路径会被填成实心黑块。自定义 SVG 不套这条,保留作者自己的填色。 */
.polaris-tabs__tab-icon.is-library svg {
	width: 1em;
	fill: none !important;
	stroke: currentColor;
}
/*
 * 自定义 SVG 的护栏:根节点写了 fill="none" 就守住它。
 * presentation attribute 打不过 CSS,编辑器/主题里那条全局 svg{fill:currentColor}
 * 会把线框图标(Figma 导出的根节点都是 fill="none")整个填成实心色块 —— 这里用一条
 * 更高权重的规则挡回去。显式写了自己填色的子元素不受影响,照常显示。
 */
.polaris-tabs__tab-icon svg[fill="none"],
.polaris-icon-picker__preview svg[fill="none"] {
	fill: none;
}

/*
 * 自定义 SVG 着色 —— 填充和描边分开,各自只作用在「本来就用这种画法」的部分。
 *
 * 关键在于别碰 fill="none":Figma 导出的线框图标根节点写的就是 <svg fill="none">,
 * 里面的 path 只有 stroke、没有 fill 属性,靠继承拿到 none。CSS 声明优先级高于
 * presentation attribute,一旦无差别地给根节点写 fill,这些 path 全被填成实心 ——
 * 整个图标就变成一个色块。所以:
 *   填充:根节点没声明 fill="none" 才染(没写 fill 的元素默认是黑色实心,该染);
 *         子元素只染显式写了非 none 填充的。
 *   描边:只染本来就有 stroke 的(根节点或子元素),不给纯填充图标平白加一圈描边。
 */
.polaris-tabs__tab-icon.is-fill-tinted svg:not( [fill="none"] ),
.polaris-tabs__tab-icon.is-fill-tinted svg [fill]:not( [fill="none"] ) {
	fill: var( --polaris-icon-fill, currentColor );
}
.polaris-tabs__tab-icon.is-stroke-tinted svg[stroke]:not( [stroke="none"] ),
.polaris-tabs__tab-icon.is-stroke-tinted svg [stroke]:not( [stroke="none"] ) {
	stroke: var( --polaris-icon-stroke, currentColor );
}
.polaris-tabs__tab-icon img {
	display: block;
	width: auto;
	height: 1em;
	max-width: none;
}

/* 禁用 */
.polaris-tabs__tab.is-disabled,
.polaris-tabs__tab:disabled {
	opacity: 0.38;
	cursor: not-allowed;
	pointer-events: none;
}

/* ═══════════════════════════════════════════
   Nav 对齐修饰类
═══════════════════════════════════════════ */
/* —— 水平布局:主轴=横向,用 justify-content —— */
.polaris-tabs:not( .is-orientation-vertical ).is-nav-align-center .polaris-tabs__nav {
	justify-content: center;
}
.polaris-tabs:not( .is-orientation-vertical ).is-nav-align-end .polaris-tabs__nav {
	justify-content: flex-end;
}
.polaris-tabs:not( .is-orientation-vertical ).is-nav-align-stretch .polaris-tabs__nav {
	gap: 0;
}
.polaris-tabs:not( .is-orientation-vertical ).is-nav-align-stretch .polaris-tabs__tab {
	flex: 1;
	/* 按钮是纵向 flex:横向居中用 align-items(不是 justify-content) */
	align-items: center;
	text-align: center;
	padding-inline: 0.5rem;
}

/* ═══════════════════════════════════════════
   溢出方式 —— 标签放不下时怎么办
   换行(默认):水平排不下折到下一行(靠 .polaris-tabs__nav 的 flex-wrap:wrap)
   滚动:不折行,超出部分在导航条内部滚动
═══════════════════════════════════════════ */
.polaris-tabs.is-overflow-scroll .polaris-tabs__nav {
	flex-wrap: nowrap;
	scrollbar-width: thin;
}
/*
 * 垂直布局的「换行」:垂直 nav 平时是 nowrap(纵向排列不该乱折),但组件设了固定高度时
 * 排不下就会直接溢出到组件外 —— 换行模式下放开 wrap,让它折成下一列。
 * 高度不固定时容器高度由内容决定,不存在「排不下」,这条不会有任何影响。
 */
.polaris-tabs.is-orientation-vertical.is-overflow-wrap .polaris-tabs__nav {
	flex-wrap: wrap;
	align-content: flex-start;
}
/*
 * 隐藏滚动条(默认):三套写法覆盖 Firefox / 旧 Edge / WebKit。
 * 滚动能力本身不受影响 —— 触屏滑动、触控板、Shift+滚轮、方向键切换都照常,
 * 键盘切到看不见的标签时 view.js 会把它滚进视野。
 */
.polaris-tabs.is-scrollbar-hidden .polaris-tabs__nav {
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.polaris-tabs.is-scrollbar-hidden .polaris-tabs__nav::-webkit-scrollbar {
	display: none;
}
.polaris-tabs.is-overflow-scroll:not( .is-orientation-vertical ) .polaris-tabs__nav {
	overflow-x: auto;
}
.polaris-tabs.is-overflow-scroll.is-orientation-vertical .polaris-tabs__nav {
	overflow-y: auto;
}
/* 滚动模式下标签不许被压缩,否则只会被挤扁、根本滚不起来 */
.polaris-tabs.is-overflow-scroll:not( .is-orientation-vertical ) .polaris-tabs__tab {
	flex: 0 0 auto;
	max-width: none;
}
/*
 * overflow 是在 padding box 处裁剪的,而默认指示杠压在分隔线上(offset -1px),
 * 那 1px 落在 border 区域会被裁掉 —— 滚动模式下把它收回标签边缘内。
 */
.polaris-tabs.is-overflow-scroll:not( .is-orientation-vertical ).is-indicator-bottom,
.polaris-tabs.is-overflow-scroll.is-orientation-vertical.is-indicator-right {
	--polaris-indicator-offset: 0px;
}

/* —— 垂直布局:主轴=纵向,justify-content 控顶部/居中/底部,撑满=tab flex:1 —— */
.polaris-tabs.is-orientation-vertical.is-nav-align-center .polaris-tabs__nav {
	justify-content: center;
}
.polaris-tabs.is-orientation-vertical.is-nav-align-end .polaris-tabs__nav {
	justify-content: flex-end;
}
.polaris-tabs.is-orientation-vertical.is-nav-align-stretch .polaris-tabs__nav {
	gap: 0;
}
.polaris-tabs.is-orientation-vertical.is-nav-align-stretch .polaris-tabs__tab {
	flex: 1;
}

/* ═══════════════════════════════════════════
   TAB 宽度
═══════════════════════════════════════════ */
/* 固定宽度(对齐交给「标签文字位置」的变量,不强制居中) */
.polaris-tabs.is-tabwidth-fixed .polaris-tabs__tab {
	width: var( --polaris-tab-width, auto );
	flex: 0 0 auto;
}
/* 最小/最大宽度 */
.polaris-tabs.is-tabwidth-minmax .polaris-tabs__tab {
	min-width: var( --polaris-tab-min-width, 0 );
	max-width: var( --polaris-tab-max-width, none );
}
/*
 * 垂直布局:宽度落在 nav 上,标签再撑满 nav。
 *
 * 直接给标签设宽度时,百分比是相对 nav 的宽度算的,而 nav 自身宽度又是由标签内容
 * 撑出来的(shrink-to-fit)—— 结果 % 几乎没有意义。改成把宽度写到 nav 上:nav 是
 * .polaris-tabs(flex 容器)的直接子项,flex-basis / width 的百分比按整个选项卡组件
 * 的宽度解析,「50%」才真是组件的一半。
 */
.polaris-tabs.is-orientation-vertical.is-tabwidth-fixed .polaris-tabs__nav {
	flex: 0 0 var( --polaris-tab-width, auto );
	width: var( --polaris-tab-width, auto );
	max-width: 100%;
}
/* width:auto + 交叉轴默认 stretch = 填满 nav 并**扣掉自身外边距**;
   写死 100% 的话,加上「提示器与标签的间距」那个 margin 就会溢出 nav。 */
.polaris-tabs.is-orientation-vertical.is-tabwidth-fixed .polaris-tabs__tab {
	width: auto;
}
.polaris-tabs.is-orientation-vertical.is-tabwidth-minmax .polaris-tabs__nav {
	min-width: var( --polaris-tab-min-width, 0 );
	max-width: var( --polaris-tab-max-width, none );
}
.polaris-tabs.is-orientation-vertical.is-tabwidth-minmax .polaris-tabs__tab {
	width: auto;
	min-width: 0;
	max-width: none;
}

/* ═══════════════════════════════════════════
   选项卡(组件)高度 —— 作用于整个 .polaris-tabs
   水平:含导航栏高度;垂直:nav 与内容区等高
═══════════════════════════════════════════ */
/* 固定高度:组件固定高,内容区滚动 */
.polaris-tabs.is-tabheight-fixed {
	height: var( --polaris-tab-height, auto );
}
/* 水平固定:组件改纵向 flex(导航在上),内容区填满剩余并滚动 */
.polaris-tabs:not( .is-orientation-vertical ).is-tabheight-fixed {
	display: flex;
	flex-direction: column;
}
.polaris-tabs.is-tabheight-fixed .polaris-tabs__panels {
	flex: 1 1 auto;
	min-height: 0;
	overflow: auto;
}
/* 按最高内容:内容区预留最高面板高度(切换不跳动)—— 所有面板网格叠放 */
.polaris-tabs.is-tabheight-tallest .polaris-tabs__panels {
	display: grid;
}
.polaris-tabs.is-tabheight-tallest .polaris-tabs__panel {
	grid-column: 1;
	grid-row: 1;
}
.polaris-tabs.is-tabheight-tallest .polaris-tabs__panel[hidden] {
	display: block;
	visibility: hidden;
	pointer-events: none;
}

/* ═══════════════════════════════════════════
   分隔线修饰类
═══════════════════════════════════════════ */
/* —— 水平布局:线是 nav 的 border-bottom —— */
.polaris-tabs:not( .is-orientation-vertical ).is-divider-tabs .polaris-tabs__nav {
	width: fit-content;
	max-width: 100%;
}
.polaris-tabs:not( .is-orientation-vertical ).is-divider-tabs.is-nav-align-center .polaris-tabs__nav {
	margin-inline: auto;
}
.polaris-tabs:not( .is-orientation-vertical ).is-divider-tabs.is-nav-align-end .polaris-tabs__nav {
	margin-inline-start: auto;
}
.polaris-tabs:not( .is-orientation-vertical ).is-divider-tabs.is-nav-align-stretch .polaris-tabs__nav {
	width: 100%;
	max-width: none;
}
.polaris-tabs:not( .is-orientation-vertical ).is-divider-none .polaris-tabs__nav {
	border-bottom-color: transparent;
}

/* —— 垂直布局:nav 满高;线按模式画在 nav(全高)或每个 tab(跟随标签) —— */
/* 与容器同宽:线在 nav,贯穿整个容器高度 */
.polaris-tabs.is-orientation-vertical.is-divider-full .polaris-tabs__nav {
	border-inline-end: 1px solid var( --polaris-tabs-border );
}
/* 与 Tabs 同宽:线跟随每个标签(激活指示杠是伪元素,不再和这条线抢同一条边) */
.polaris-tabs.is-orientation-vertical.is-divider-tabs .polaris-tabs__tab {
	border-inline-end: 1px solid var( --polaris-tabs-border );
}
/* 这种模式下线长在标签自己身上,nav 的内边距推不动它 —— 间距叠加到标签的行末内边距上 */
.polaris-tabs.is-orientation-vertical.is-divider-tabs .polaris-tabs__nav {
	padding-inline-end: 0;
}
.polaris-tabs.is-orientation-vertical.is-divider-tabs .polaris-tabs__tab {
	padding-inline-end: calc( var( --polaris-tab-pad-right ) + var( --polaris-tabs-divider-gap, 0px ) );
}
/* 不显示:nav / tab 都无线(激活指示保留) */

/* ═══════════════════════════════════════════
   面板(tabpanel)
═══════════════════════════════════════════ */
/* 内容区不强加内边距：留白交给区块自身 spacing / 主题。 */
.polaris-tabs__panel {
	padding-top: 0;
}

/* 水平布局:标签栏与内容区的距离(垂直布局走容器的 flex gap,见下方) */
.polaris-tabs:not( .is-orientation-vertical ) .polaris-tabs__panels {
	margin-top: var( --polaris-tabs-block-gap, 0 );
}

.polaris-tabs__panel[hidden] {
	display: none;
}

/* ═══════════════════════════════════════════
   垂直布局
═══════════════════════════════════════════ */
.polaris-tabs.is-orientation-vertical {
	display: flex;
	/* 标签栏与内容区的距离:默认贴合(0),由「区块间距」设置调节 */
	gap: var( --polaris-tabs-block-gap, 0 );
	/* nav 拉伸到与内容等高,顶部/居中/底部对齐才有作用空间 */
	align-items: stretch;
}

.polaris-tabs.is-orientation-vertical .polaris-tabs__nav {
	flex-direction: column;
	flex-wrap: nowrap;
	flex: 0 0 auto;
	gap: var( --polaris-tabs-gap, 0 );
	border-bottom: 0;
	/* 竖排时线在 nav 的行末侧,分隔线间距改推那一侧 */
	padding-bottom: 0;
	padding-inline-end: var( --polaris-tabs-divider-gap, 0px );
	/* 竖直分隔线由 .is-divider-* 规则按模式决定,这里不预设 */
}

.polaris-tabs.is-orientation-vertical .polaris-tabs__tab {
	padding: var( --polaris-tab-pad-top ) var( --polaris-tab-pad-right ) var( --polaris-tab-pad-bottom ) var( --polaris-tab-pad-left );
	/* 文字对齐交给变量(默认 start),让「标签文字位置」生效 */
	text-align: var( --polaris-tab-text-align, start );
}

.polaris-tabs.is-orientation-vertical .polaris-tabs__panels {
	flex: 1 1 auto;
	min-width: 0;
}

.polaris-tabs.is-orientation-vertical .polaris-tabs__panel {
	padding-top: 0;
}

/* ═══════════════════════════════════════════
   编辑器专属
═══════════════════════════════════════════ */

/* 预览导航：与前台完全一致，不加任何编辑器专属底色/内边距，
   否则垂直布局下水平内边距会让分隔线与激活指示杠错位。 */

/* 编辑器内子块：去除所有编辑器卡片样式，和前台保持一致 */
.polaris-tabs.is-editor .polaris-tab.is-editor {
	all: unset;
	display: block;
}

/* 禁用 badge（仅在编辑器显示） */
.polaris-tabs__tab-disabled-badge {
	display: inline-flex;
	align-items: center;
	margin-inline-start: 0.375em;
	vertical-align: middle;
	padding: 0 0.375em;
	font-size: 0.7em;
	font-weight: 500;
	line-height: 1.6;
	border-radius: 999px;
	background: rgba( 0, 0, 0, 0.08 );
	color: var( --polaris-tabs-muted );
}

/* Inspector：图标库选择器 */
.polaris-icon-picker {
	margin-bottom: 16px;
}
.polaris-icon-picker__label {
	display: block;
	margin-bottom: 8px;
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
	color: #1e1e1e;
}
.polaris-icon-picker__row {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.polaris-icon-picker__preview {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 1px solid rgba( 0, 0, 0, 0.12 );
	border-radius: 4px;
	font-size: 18px;
	line-height: 1;
}
.polaris-icon-picker__preview svg {
	width: auto;
	max-width: 20px;
	height: 20px;
}
/* 缩略图的着色规则和标签里的图标共用一套(选择器同样绕开 fill="none") */
.polaris-icon-picker__preview.is-fill-tinted svg:not( [fill="none"] ),
.polaris-icon-picker__preview.is-fill-tinted svg [fill]:not( [fill="none"] ) {
	fill: var( --polaris-icon-fill, currentColor );
}
.polaris-icon-picker__preview.is-stroke-tinted svg[stroke]:not( [stroke="none"] ),
.polaris-icon-picker__preview.is-stroke-tinted svg [stroke]:not( [stroke="none"] ) {
	stroke: var( --polaris-icon-stroke, currentColor );
}
/* 图标库图标是描边式(自定义 SVG 保留作者填色,所以按类名区分) */
.polaris-icon-picker__preview.is-library svg {
	width: 20px;
	fill: none !important;
	stroke: currentColor;
}
.polaris-icon-picker__preview img {
	max-width: 24px;
	max-height: 24px;
}
/* SVG 代码框:等宽字体,方便粘贴/核对 */
.polaris-icon-picker__code textarea {
	font-family: Menlo, Consolas, monospace;
	font-size: 11px;
	line-height: 1.5;
}
/* 隐藏的本地 SVG 文件选择器(点按钮时代为触发) */
.polaris-icon-picker__file {
	display: none;
}
.polaris-icon-picker__note {
	margin: 4px 0 0;
	font-size: 12px;
	color: rgba( 0, 0, 0, 0.6 );
}

/* 图标库弹窗:超大尺寸(对齐系统默认图标库的大弹窗观感) */
.components-modal__frame.polaris-icon-library {
	width: min( 1040px, 94vw );
	max-width: 1040px;
}
.polaris-icon-library .components-modal__content {
	display: flex;
	flex-direction: column;
}
/* 图标库弹窗:网格 */
.polaris-icon-library .polaris-icon-library__grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 64px, 1fr ) );
	gap: 6px;
	margin-top: 12px;
	flex: 1 1 auto;
	max-height: 64vh;
	min-height: 320px;
	overflow-y: auto;
	align-content: start;
}
.polaris-icon-library__item.components-button {
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid transparent;
	border-radius: 4px;
}
.polaris-icon-library__svg {
	display: inline-flex;
}
.polaris-icon-library__svg svg {
	width: 28px;
	height: 28px;
	fill: none !important;
	stroke: currentColor;
}
.polaris-icon-library__item.components-button:hover {
	background: rgba( 0, 0, 0, 0.04 );
}
.polaris-icon-library__item.is-selected {
	border-color: var( --wp--preset--color--primary, #2563eb );
	background: rgba( 37, 99, 235, 0.08 );
}
/* 单个图标懒加载时的占位,保持格子尺寸不塌 */
.polaris-icon-library__svg.is-loading {
	width: 28px;
	height: 28px;
}
/* 弹窗提示文字 + 加载状态 */
.polaris-icon-library__hint {
	margin: 10px 0 4px;
	font-size: 12px;
	color: rgba( 0, 0, 0, 0.55 );
}
.polaris-icon-library__status {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 120px;
}

/* Inspector：副标题的字号 + 行高并排 */
.polaris-tab-sub-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-bottom: 16px;
}
.polaris-tab-sub-grid > * {
	min-width: 0;
}

/* Inspector：9 宫格文字对齐 */
.polaris-inspector-matrix {
	margin: 8px 0 16px;
}
.polaris-inspector-matrix__label {
	display: block;
	margin-bottom: 8px;
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
	color: #1e1e1e;
}

/* Inspector：内边距双列 */
.polaris-inspector-dims {
	display: flex;
	gap: 0.75rem;
}
.polaris-inspector-dims > * {
	flex: 1;
	min-width: 0;
}

/* Inspector：响应式设备卡片切换器（与“溢出方式”ToggleGroupControl 风格一致） */
.polaris-responsive-switch {
	margin-top: 8px;
	margin-bottom: 16px;
}

/* Inspector：自建四边内边距控件 */
.polaris-pad-control {
	margin-bottom: 16px;
}
.polaris-pad-control__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
}
.polaris-pad-control__actions {
	display: flex;
	align-items: center;
	gap: 2px;
}
/* 链接/断链是描边 SVG:强制 fill:none 避免被填成实心(重置是字体图标,不受影响) */
.polaris-pad-control__actions .components-button svg {
	fill: none !important;
	stroke: currentColor;
}
.polaris-pad-control__label {
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
	color: #1e1e1e;
}
/* 解除链接后 4 个输入,每行 2 个 */
.polaris-pad-control__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

/* Inspector：提示文字 */
.polaris-inspector-hint {
	margin: 0 0 0.75rem;
	font-size: 0.75rem;
	color: rgba( 0, 0, 0, 0.6 );
}

/* Inspector：Tab 管理行(改名 + 右侧:上/下移排序 + 设默认) */
.polaris-inspector-tab-row {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.25rem 0;
}
.polaris-inspector-tab-row__input {
	flex: 1;
	min-width: 0;
}
/* 去掉 TextControl 内层 BaseControl 的残留下边距,确保与右侧图标同一水平线 */
.polaris-inspector-tab-row__input .components-base-control__field {
	margin-bottom: 0;
}
.polaris-inspector-tab-row__actions {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	gap: 2px;
}
.polaris-inspector-tab-row__actions .components-button svg {
	width: 14px;
	height: 14px;
	display: block;
}
.polaris-inspector-tab-row__actions .components-button:not(.polaris-inspector-tab-row__default.is-default) svg {
	fill: none;
	stroke: currentColor;
}
/* 默认 Tab 的星标:只上色,不要按下态的深色底 */
.polaris-inspector-tab-row__default.is-default,
.polaris-inspector-tab-row__default.is-default:hover {
	color: #f0b429;
	background: transparent;
	box-shadow: none;
}

/* ═══════════════════════════════════════════
   垂直选项卡：响应式适配（平板电脑 & 移动端）
   1. 无 (保持默认双列)
   2. 换行平铺 (display: contents + order 交替)
   3. 隐藏标签并平铺 (仅内容 100% 展开)
   4. 隐藏内容 (仅标签 100% 展开)
═══════════════════════════════════════════ */

/* ─── 平板端断点 (<= 1024px) ─── */
@media ( max-width: 1024px ) {
	/* 1. 换行平铺 (Tablet) */
	.polaris-tabs.is-orientation-vertical.is-responsive-tablet-tile {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		height: auto !important;
		min-height: 0 !important;
		gap: 0 !important;
		--polaris-tabs-responsive-group-gap: var( --polaris-tabs-tablet-gap, 1rem );
		--polaris-tabs-responsive-tab-content-gap: var( --polaris-tabs-tablet-tab-content-gap, 0 );
	}
	.polaris-tabs.is-orientation-vertical.is-responsive-tablet-tile .polaris-tabs__nav,
	.polaris-tabs.is-orientation-vertical.is-responsive-tablet-tile .polaris-tabs__panels {
		display: contents !important;
	}
	.polaris-tabs.is-orientation-vertical.is-responsive-tablet-tile .polaris-tabs__tab {
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 auto !important;
		border-inline-end: 0 !important;
		padding-inline-end: var( --polaris-tab-pad-right ) !important;
		margin-bottom: var( --polaris-tabs-responsive-tab-content-gap ) !important;
		white-space: normal !important;
		color: var( --polaris-tab-active-color ) !important;
		background-color: var( --polaris-tab-active-bg, var( --polaris-tab-bg, transparent ) ) !important;
		pointer-events: none !important;
		cursor: default !important;
	}
	.polaris-tabs.is-orientation-vertical.is-responsive-tablet-tile .polaris-tabs__tab::after {
		background-color: var( --polaris-indicator-color ) !important;
	}
	.polaris-tabs.is-orientation-vertical.is-responsive-tablet-tile .polaris-tabs__panel,
	.polaris-tabs.is-orientation-vertical.is-responsive-tablet-tile .polaris-tabs__panel[hidden],
	.polaris-tabs.is-orientation-vertical.is-responsive-tablet-tile .polaris-tabs__panels > .wp-block {
		display: block !important;
		visibility: visible !important;
		pointer-events: auto !important;
		width: 100% !important;
		max-width: 100% !important;
		grid-column: auto !important;
		grid-row: auto !important;
		margin-bottom: var( --polaris-tabs-responsive-group-gap ) !important;
	}
	.polaris-tabs.is-orientation-vertical.is-responsive-tablet-tile .polaris-tabs__panel:last-child,
	.polaris-tabs.is-orientation-vertical.is-responsive-tablet-tile .polaris-tabs__panels > .wp-block:last-child {
		margin-bottom: 0 !important;
	}

	/* 2. 隐藏标签并平铺 (Tablet) */
	.polaris-tabs.is-orientation-vertical.is-responsive-tablet-content-only {
		display: block !important;
		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		gap: 0 !important;
		--polaris-tabs-responsive-group-gap: var( --polaris-tabs-tablet-gap, 1rem );
	}
	.polaris-tabs.is-orientation-vertical.is-responsive-tablet-content-only .polaris-tabs__nav {
		display: none !important;
	}
	.polaris-tabs.is-orientation-vertical.is-responsive-tablet-content-only .polaris-tabs__panels {
		display: flex !important;
		flex-direction: column !important;
		width: 100% !important;
		height: auto !important;
		gap: var( --polaris-tabs-responsive-group-gap ) !important;
		margin-top: 0 !important;
	}
	.polaris-tabs.is-orientation-vertical.is-responsive-tablet-content-only .polaris-tabs__panel,
	.polaris-tabs.is-orientation-vertical.is-responsive-tablet-content-only .polaris-tabs__panel[hidden],
	.polaris-tabs.is-orientation-vertical.is-responsive-tablet-content-only .polaris-tabs__panels > .wp-block {
		display: block !important;
		visibility: visible !important;
		pointer-events: auto !important;
		width: 100% !important;
		max-width: 100% !important;
		grid-column: auto !important;
		grid-row: auto !important;
	}

	/* 3. 隐藏内容 (Tablet) */
	.polaris-tabs.is-orientation-vertical.is-responsive-tablet-nav-only {
		display: block !important;
		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		gap: 0 !important;
	}
	.polaris-tabs.is-orientation-vertical.is-responsive-tablet-nav-only .polaris-tabs__panels {
		display: none !important;
	}
	.polaris-tabs.is-orientation-vertical.is-responsive-tablet-nav-only .polaris-tabs__nav {
		width: 100% !important;
		max-width: 100% !important;
		flex: 1 1 100% !important;
		border-inline-end: 0 !important;
		padding-inline-end: 0 !important;
	}
	.polaris-tabs.is-orientation-vertical.is-responsive-tablet-nav-only .polaris-tabs__tab {
		width: 100% !important;
		max-width: 100% !important;
		border-inline-end: 0 !important;
	}

	/* ─── 换行平铺：交替顺序映射表 (1-20 组) ─── */
	.polaris-tabs.is-orientation-vertical.is-responsive-tablet-tile .polaris-tabs__nav > :nth-child(1),
	.polaris-tabs.is-orientation-vertical.is-responsive-mobile-tile .polaris-tabs__nav > :nth-child(1) { order: 1 !important; }
	.polaris-tabs.is-orientation-vertical.is-responsive-tablet-tile .polaris-tabs__panels > :nth-child(1),
	.polaris-tabs.is-orientation-vertical.is-responsive-mobile-tile .polaris-tabs__panels > :nth-child(1) { order: 2 !important; }

	.polaris-tabs.is-orientation-vertical.is-responsive-tablet-tile .polaris-tabs__nav > :nth-child(2),
	.polaris-tabs.is-orientation-vertical.is-responsive-mobile-tile .polaris-tabs__nav > :nth-child(2) { order: 3 !important; }
	.polaris-tabs.is-orientation-vertical.is-responsive-tablet-tile .polaris-tabs__panels > :nth-child(2),
	.polaris-tabs.is-orientation-vertical.is-responsive-mobile-tile .polaris-tabs__panels > :nth-child(2) { order: 4 !important; }

	.polaris-tabs.is-orientation-vertical.is-responsive-tablet-tile .polaris-tabs__nav > :nth-child(3),
	.polaris-tabs.is-orientation-vertical.is-responsive-mobile-tile .polaris-tabs__nav > :nth-child(3) { order: 5 !important; }
	.polaris-tabs.is-orientation-vertical.is-responsive-tablet-tile .polaris-tabs__panels > :nth-child(3),
	.polaris-tabs.is-orientation-vertical.is-responsive-mobile-tile .polaris-tabs__panels > :nth-child(3) { order: 6 !important; }

	.polaris-tabs.is-orientation-vertical.is-responsive-tablet-tile .polaris-tabs__nav > :nth-child(4),
	.polaris-tabs.is-orientation-vertical.is-responsive-mobile-tile .polaris-tabs__nav > :nth-child(4) { order: 7 !important; }
	.polaris-tabs.is-orientation-vertical.is-responsive-tablet-tile .polaris-tabs__panels > :nth-child(4),
	.polaris-tabs.is-orientation-vertical.is-responsive-mobile-tile .polaris-tabs__panels > :nth-child(4) { order: 8 !important; }

	.polaris-tabs.is-orientation-vertical.is-responsive-tablet-tile .polaris-tabs__nav > :nth-child(5),
	.polaris-tabs.is-orientation-vertical.is-responsive-mobile-tile .polaris-tabs__nav > :nth-child(5) { order: 9 !important; }
	.polaris-tabs.is-orientation-vertical.is-responsive-tablet-tile .polaris-tabs__panels > :nth-child(5),
	.polaris-tabs.is-orientation-vertical.is-responsive-mobile-tile .polaris-tabs__panels > :nth-child(5) { order: 10 !important; }

	.polaris-tabs.is-orientation-vertical.is-responsive-tablet-tile .polaris-tabs__nav > :nth-child(6),
	.polaris-tabs.is-orientation-vertical.is-responsive-mobile-tile .polaris-tabs__nav > :nth-child(6) { order: 11 !important; }
	.polaris-tabs.is-orientation-vertical.is-responsive-tablet-tile .polaris-tabs__panels > :nth-child(6),
	.polaris-tabs.is-orientation-vertical.is-responsive-mobile-tile .polaris-tabs__panels > :nth-child(6) { order: 12 !important; }

	.polaris-tabs.is-orientation-vertical.is-responsive-tablet-tile .polaris-tabs__nav > :nth-child(7),
	.polaris-tabs.is-orientation-vertical.is-responsive-mobile-tile .polaris-tabs__nav > :nth-child(7) { order: 13 !important; }
	.polaris-tabs.is-orientation-vertical.is-responsive-tablet-tile .polaris-tabs__panels > :nth-child(7),
	.polaris-tabs.is-orientation-vertical.is-responsive-mobile-tile .polaris-tabs__panels > :nth-child(7) { order: 14 !important; }

	.polaris-tabs.is-orientation-vertical.is-responsive-tablet-tile .polaris-tabs__nav > :nth-child(8),
	.polaris-tabs.is-orientation-vertical.is-responsive-mobile-tile .polaris-tabs__nav > :nth-child(8) { order: 15 !important; }
	.polaris-tabs.is-orientation-vertical.is-responsive-tablet-tile .polaris-tabs__panels > :nth-child(8),
	.polaris-tabs.is-orientation-vertical.is-responsive-mobile-tile .polaris-tabs__panels > :nth-child(8) { order: 16 !important; }

	.polaris-tabs.is-orientation-vertical.is-responsive-tablet-tile .polaris-tabs__nav > :nth-child(9),
	.polaris-tabs.is-orientation-vertical.is-responsive-mobile-tile .polaris-tabs__nav > :nth-child(9) { order: 17 !important; }
	.polaris-tabs.is-orientation-vertical.is-responsive-tablet-tile .polaris-tabs__panels > :nth-child(9),
	.polaris-tabs.is-orientation-vertical.is-responsive-mobile-tile .polaris-tabs__panels > :nth-child(9) { order: 18 !important; }

	.polaris-tabs.is-orientation-vertical.is-responsive-tablet-tile .polaris-tabs__nav > :nth-child(10),
	.polaris-tabs.is-orientation-vertical.is-responsive-mobile-tile .polaris-tabs__nav > :nth-child(10) { order: 19 !important; }
	.polaris-tabs.is-orientation-vertical.is-responsive-tablet-tile .polaris-tabs__panels > :nth-child(10),
	.polaris-tabs.is-orientation-vertical.is-responsive-mobile-tile .polaris-tabs__panels > :nth-child(10) { order: 20 !important; }

	.polaris-tabs.is-orientation-vertical.is-responsive-tablet-tile .polaris-tabs__nav > :nth-child(11),
	.polaris-tabs.is-orientation-vertical.is-responsive-mobile-tile .polaris-tabs__nav > :nth-child(11) { order: 21 !important; }
	.polaris-tabs.is-orientation-vertical.is-responsive-tablet-tile .polaris-tabs__panels > :nth-child(11),
	.polaris-tabs.is-orientation-vertical.is-responsive-mobile-tile .polaris-tabs__panels > :nth-child(11) { order: 22 !important; }

	.polaris-tabs.is-orientation-vertical.is-responsive-tablet-tile .polaris-tabs__nav > :nth-child(12),
	.polaris-tabs.is-orientation-vertical.is-responsive-mobile-tile .polaris-tabs__nav > :nth-child(12) { order: 23 !important; }
	.polaris-tabs.is-orientation-vertical.is-responsive-tablet-tile .polaris-tabs__panels > :nth-child(12),
	.polaris-tabs.is-orientation-vertical.is-responsive-mobile-tile .polaris-tabs__panels > :nth-child(12) { order: 24 !important; }

	.polaris-tabs.is-orientation-vertical.is-responsive-tablet-tile .polaris-tabs__nav > :nth-child(13),
	.polaris-tabs.is-orientation-vertical.is-responsive-mobile-tile .polaris-tabs__nav > :nth-child(13) { order: 25 !important; }
	.polaris-tabs.is-orientation-vertical.is-responsive-tablet-tile .polaris-tabs__panels > :nth-child(13),
	.polaris-tabs.is-orientation-vertical.is-responsive-mobile-tile .polaris-tabs__panels > :nth-child(13) { order: 26 !important; }

	.polaris-tabs.is-orientation-vertical.is-responsive-tablet-tile .polaris-tabs__nav > :nth-child(14),
	.polaris-tabs.is-orientation-vertical.is-responsive-mobile-tile .polaris-tabs__nav > :nth-child(14) { order: 27 !important; }
	.polaris-tabs.is-orientation-vertical.is-responsive-tablet-tile .polaris-tabs__panels > :nth-child(14),
	.polaris-tabs.is-orientation-vertical.is-responsive-mobile-tile .polaris-tabs__panels > :nth-child(14) { order: 28 !important; }

	.polaris-tabs.is-orientation-vertical.is-responsive-tablet-tile .polaris-tabs__nav > :nth-child(15),
	.polaris-tabs.is-orientation-vertical.is-responsive-mobile-tile .polaris-tabs__nav > :nth-child(15) { order: 29 !important; }
	.polaris-tabs.is-orientation-vertical.is-responsive-tablet-tile .polaris-tabs__panels > :nth-child(15),
	.polaris-tabs.is-orientation-vertical.is-responsive-mobile-tile .polaris-tabs__panels > :nth-child(15) { order: 30 !important; }

	.polaris-tabs.is-orientation-vertical.is-responsive-tablet-tile .polaris-tabs__nav > :nth-child(16),
	.polaris-tabs.is-orientation-vertical.is-responsive-mobile-tile .polaris-tabs__nav > :nth-child(16) { order: 31 !important; }
	.polaris-tabs.is-orientation-vertical.is-responsive-tablet-tile .polaris-tabs__panels > :nth-child(16),
	.polaris-tabs.is-orientation-vertical.is-responsive-mobile-tile .polaris-tabs__panels > :nth-child(16) { order: 32 !important; }

	.polaris-tabs.is-orientation-vertical.is-responsive-tablet-tile .polaris-tabs__nav > :nth-child(17),
	.polaris-tabs.is-orientation-vertical.is-responsive-mobile-tile .polaris-tabs__nav > :nth-child(17) { order: 33 !important; }
	.polaris-tabs.is-orientation-vertical.is-responsive-tablet-tile .polaris-tabs__panels > :nth-child(17),
	.polaris-tabs.is-orientation-vertical.is-responsive-mobile-tile .polaris-tabs__panels > :nth-child(17) { order: 34 !important; }

	.polaris-tabs.is-orientation-vertical.is-responsive-tablet-tile .polaris-tabs__nav > :nth-child(18),
	.polaris-tabs.is-orientation-vertical.is-responsive-mobile-tile .polaris-tabs__nav > :nth-child(18) { order: 35 !important; }
	.polaris-tabs.is-orientation-vertical.is-responsive-tablet-tile .polaris-tabs__panels > :nth-child(18),
	.polaris-tabs.is-orientation-vertical.is-responsive-mobile-tile .polaris-tabs__panels > :nth-child(18) { order: 36 !important; }

	.polaris-tabs.is-orientation-vertical.is-responsive-tablet-tile .polaris-tabs__nav > :nth-child(19),
	.polaris-tabs.is-orientation-vertical.is-responsive-mobile-tile .polaris-tabs__nav > :nth-child(19) { order: 37 !important; }
	.polaris-tabs.is-orientation-vertical.is-responsive-tablet-tile .polaris-tabs__panels > :nth-child(19),
	.polaris-tabs.is-orientation-vertical.is-responsive-mobile-tile .polaris-tabs__panels > :nth-child(19) { order: 38 !important; }

	.polaris-tabs.is-orientation-vertical.is-responsive-tablet-tile .polaris-tabs__nav > :nth-child(20),
	.polaris-tabs.is-orientation-vertical.is-responsive-mobile-tile .polaris-tabs__nav > :nth-child(20) { order: 39 !important; }
	.polaris-tabs.is-orientation-vertical.is-responsive-tablet-tile .polaris-tabs__panels > :nth-child(20),
	.polaris-tabs.is-orientation-vertical.is-responsive-mobile-tile .polaris-tabs__panels > :nth-child(20) { order: 40 !important; }
}

/* ─── 移动端断点 (<= 767px) ─── */
@media ( max-width: 767px ) {
	/* 1. 换行平铺 (Mobile) */
	.polaris-tabs.is-orientation-vertical.is-responsive-mobile-tile {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		height: auto !important;
		min-height: 0 !important;
		gap: 0 !important;
		--polaris-tabs-responsive-group-gap: var( --polaris-tabs-mobile-gap, var( --polaris-tabs-tablet-gap, 1rem ) );
		--polaris-tabs-responsive-tab-content-gap: var( --polaris-tabs-mobile-tab-content-gap, var( --polaris-tabs-tablet-tab-content-gap, 0 ) );
	}
	.polaris-tabs.is-orientation-vertical.is-responsive-mobile-tile .polaris-tabs__nav,
	.polaris-tabs.is-orientation-vertical.is-responsive-mobile-tile .polaris-tabs__panels {
		display: contents !important;
	}
	.polaris-tabs.is-orientation-vertical.is-responsive-mobile-tile .polaris-tabs__tab {
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 auto !important;
		border-inline-end: 0 !important;
		padding-inline-end: var( --polaris-tab-pad-right ) !important;
		margin-bottom: var( --polaris-tabs-responsive-tab-content-gap ) !important;
		white-space: normal !important;
		color: var( --polaris-tab-active-color ) !important;
		background-color: var( --polaris-tab-active-bg, var( --polaris-tab-bg, transparent ) ) !important;
		pointer-events: none !important;
		cursor: default !important;
	}
	.polaris-tabs.is-orientation-vertical.is-responsive-mobile-tile .polaris-tabs__tab::after {
		background-color: var( --polaris-indicator-color ) !important;
	}
	.polaris-tabs.is-orientation-vertical.is-responsive-mobile-tile .polaris-tabs__panel,
	.polaris-tabs.is-orientation-vertical.is-responsive-mobile-tile .polaris-tabs__panel[hidden],
	.polaris-tabs.is-orientation-vertical.is-responsive-mobile-tile .polaris-tabs__panels > .wp-block {
		display: block !important;
		visibility: visible !important;
		pointer-events: auto !important;
		width: 100% !important;
		max-width: 100% !important;
		grid-column: auto !important;
		grid-row: auto !important;
		margin-bottom: var( --polaris-tabs-responsive-group-gap ) !important;
	}
	.polaris-tabs.is-orientation-vertical.is-responsive-mobile-tile .polaris-tabs__panel:last-child,
	.polaris-tabs.is-orientation-vertical.is-responsive-mobile-tile .polaris-tabs__panels > .wp-block:last-child {
		margin-bottom: 0 !important;
	}

	/* 2. 隐藏标签并平铺 (Mobile) */
	.polaris-tabs.is-orientation-vertical.is-responsive-mobile-content-only {
		display: block !important;
		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		gap: 0 !important;
		--polaris-tabs-responsive-group-gap: var( --polaris-tabs-mobile-gap, var( --polaris-tabs-tablet-gap, 1rem ) );
	}
	.polaris-tabs.is-orientation-vertical.is-responsive-mobile-content-only .polaris-tabs__nav {
		display: none !important;
	}
	.polaris-tabs.is-orientation-vertical.is-responsive-mobile-content-only .polaris-tabs__panels {
		display: flex !important;
		flex-direction: column !important;
		width: 100% !important;
		height: auto !important;
		gap: var( --polaris-tabs-responsive-group-gap ) !important;
		margin-top: 0 !important;
	}
	.polaris-tabs.is-orientation-vertical.is-responsive-mobile-content-only .polaris-tabs__panel,
	.polaris-tabs.is-orientation-vertical.is-responsive-mobile-content-only .polaris-tabs__panel[hidden],
	.polaris-tabs.is-orientation-vertical.is-responsive-mobile-content-only .polaris-tabs__panels > .wp-block {
		display: block !important;
		visibility: visible !important;
		pointer-events: auto !important;
		width: 100% !important;
		max-width: 100% !important;
		grid-column: auto !important;
		grid-row: auto !important;
	}

	/* 3. 隐藏内容 (Mobile) */
	.polaris-tabs.is-orientation-vertical.is-responsive-mobile-nav-only {
		display: block !important;
		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		gap: 0 !important;
	}
	.polaris-tabs.is-orientation-vertical.is-responsive-mobile-nav-only .polaris-tabs__panels {
		display: none !important;
	}
	.polaris-tabs.is-orientation-vertical.is-responsive-mobile-nav-only .polaris-tabs__nav {
		width: 100% !important;
		max-width: 100% !important;
		flex: 1 1 100% !important;
		border-inline-end: 0 !important;
		padding-inline-end: 0 !important;
	}
	.polaris-tabs.is-orientation-vertical.is-responsive-mobile-nav-only .polaris-tabs__tab {
		width: 100% !important;
		max-width: 100% !important;
		border-inline-end: 0 !important;
	}
}

/* ═══════════════════════════════════════════
   RTL 支持与反转 (dir="rtl")
   当整个站点处于 RTL 或组件配置了 dir="rtl" 时：
   1. 垂直布局：标签栏位于右侧、内容区位于左侧；
   2. 指示杠：左右互换，自动对准面向内容区的左侧边框；
   3. 内边距：左右水平互换；
   4. 圆角：左上与右上互换、左下与右下互换；
   5. 文字对齐：left/right 镜像反转；
   6. 分隔线：tabs 模式下的内边距计算适配 RTL。
═══════════════════════════════════════════ */

[dir="rtl"] .polaris-tabs,
.polaris-tabs[dir="rtl"] {
	direction: rtl;
}

/* 内边距：左右内边距水平对调 */
[dir="rtl"] .polaris-tabs .polaris-tabs__tab,
.polaris-tabs[dir="rtl"] .polaris-tabs__tab {
	padding-left: var( --polaris-tab-pad-right );
	padding-right: var( --polaris-tab-pad-left );
}

/* 圆角：水平角对称互换 (TL ↔ TR, BL ↔ BR) */
[dir="rtl"] .polaris-tabs .polaris-tabs__tab,
.polaris-tabs[dir="rtl"] .polaris-tabs__tab {
	border-radius:
		var( --polaris-tab-radius-tr, 0 )
		var( --polaris-tab-radius-tl, 0 )
		var( --polaris-tab-radius-bl, 0 )
		var( --polaris-tab-radius-br, 0 );
}

/* 指示杠位置镜像：原在右侧的翻到左侧，原在左侧的翻到右侧 */
[dir="rtl"] .polaris-tabs.is-indicator-right .polaris-tabs__tab::after,
.polaris-tabs[dir="rtl"].is-indicator-right .polaris-tabs__tab::after {
	right: auto;
	left: calc( var( --polaris-indicator-offset, 0px ) - var( --polaris-indicator-gap, 0px ) );
}
[dir="rtl"] .polaris-tabs.is-indicator-left .polaris-tabs__tab::after,
.polaris-tabs[dir="rtl"].is-indicator-left .polaris-tabs__tab::after {
	left: auto;
	right: calc( var( --polaris-indicator-offset, 0px ) - var( --polaris-indicator-gap, 0px ) );
}

/* 垂直滚动溢出下的指示杠偏移重置 */
[dir="rtl"] .polaris-tabs.is-overflow-scroll.is-orientation-vertical.is-indicator-right,
.polaris-tabs[dir="rtl"].is-overflow-scroll.is-orientation-vertical.is-indicator-right,
[dir="rtl"] .polaris-tabs.is-overflow-scroll.is-orientation-vertical.is-indicator-left,
.polaris-tabs[dir="rtl"].is-overflow-scroll.is-orientation-vertical.is-indicator-left {
	--polaris-indicator-offset: 0px;
}

/* 垂直布局 + 仅与标签同宽分隔线(is-divider-tabs): RTL 下 border-inline-end 是左侧，累加 pad-left */
[dir="rtl"] .polaris-tabs.is-orientation-vertical.is-divider-tabs .polaris-tabs__tab,
.polaris-tabs[dir="rtl"].is-orientation-vertical.is-divider-tabs .polaris-tabs__tab {
	padding-inline-end: calc( var( --polaris-tab-pad-left ) + var( --polaris-tabs-divider-gap, 0px ) );
}

/* 响应式换行平铺：RTL 下重置的内边距对齐 */
@media ( max-width: 1024px ) {
	[dir="rtl"] .polaris-tabs.is-orientation-vertical.is-responsive-tablet-tile .polaris-tabs__tab,
	.polaris-tabs[dir="rtl"].is-orientation-vertical.is-responsive-tablet-tile .polaris-tabs__tab {
		padding-inline-end: var( --polaris-tab-pad-left ) !important;
	}
}
@media ( max-width: 767px ) {
	[dir="rtl"] .polaris-tabs.is-orientation-vertical.is-responsive-mobile-tile .polaris-tabs__tab,
	.polaris-tabs[dir="rtl"].is-orientation-vertical.is-responsive-mobile-tile .polaris-tabs__tab {
		padding-inline-end: var( --polaris-tab-pad-left ) !important;
	}
}