/**
 * polaris/carousel + polaris/carousel-item 样式 —— 前台 + 编辑器共用。
 *
 * 断点沿用 WP 核心 wp-admin 自身的响应式常量(782px / 600px),不额外发明数值。
 * 无 JS 兜底:.polaris-carousel__track 本身就是 overflow-x:auto + scroll-snap 的
 * 原生横向滚动容器,JS(view.js)只做箭头/圆点/自动播放/键盘这层增强。
 */

/* ═══════════════════════════════════════════
   容器
═══════════════════════════════════════════ */
.polaris-carousel {
	position: relative;
}

/*
 * 视口层:只包住轮播项(track),高度就等于卡片区的高度。
 *
 * 它存在的唯一理由是**给"叠加"类元素一个正确的定位参照** —— 叠加的分页、叠加的导航
 * 都定位到这里,而不是最外层 .polaris-carousel。外层还包含单独一行的分页、上方/下方的
 * 导航,拿它当参照的话"叠加在底部"会叠到那些东西上去,而不是叠在卡片上(实测踩过:
 * 导航放下方 + 分页叠加时,分页正好压在导航上)。
 *
 * track 自己不能当这个参照:它是 overflow-x:auto 的滚动容器,绝对定位的子元素会被它
 * 裁切、并且跟着横向滚动漂移。所以必须在它外面再包一层不滚动的。
 */
.polaris-carousel__viewport {
	position: relative;
}

.polaris-carousel__track {
	position: relative; /* item.offsetLeft 的坐标系锚点,供 view.js 换算 scrollLeft */
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch; /* 默认「跟随最高」;is-height-natural 时改 flex-start */
	gap: var( --polaris-carousel-gap, 1rem );
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	cursor: grab;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.polaris-carousel__track::-webkit-scrollbar {
	display: none;
}
.polaris-carousel__track.is-dragging {
	cursor: grabbing;
	user-select: none;
	scroll-snap-type: none;
}
/* 连续平滑模式:JS 持续写 scrollLeft,禁用 snap 避免浏览器把它拉回吸附点 */
.polaris-carousel.is-playmode-continuous .polaris-carousel__track {
	scroll-snap-type: none;
}
/*
 * JS 用 rAF 逐帧写 scrollLeft 做动画(箭头/圆点/自动播放)期间临时禁用 snap——
 * mandatory snap 会在每次 scrollLeft 变化后试图把位置拉回最近吸附点,和逐帧插值
 * 打架,表现为"闪现"而不是平滑滚动。动画结束后 view.js 会移除这个类恢复 snap。
 */
.polaris-carousel__track.is-snap-disabled {
	scroll-snap-type: none;
}

.polaris-carousel.is-height-natural .polaris-carousel__track {
	align-items: flex-start;
}

/* ═══════════════════════════════════════════
   卡片宽度:按数量 / 按最大宽度(二选一,互斥)
═══════════════════════════════════════════ */
.polaris-carousel__track > .wp-block-polaris-carousel-item {
	/*
	 * 内边距(原生 spacing.padding)默认按 content-box 计算,会加在 flex-basis/width
	 * 算出的宽度之外,导致卡片实际比预期宽、挤乱每屏数量。border-box 让内边距/边框
	 * 都算在这个宽度里面 —— 卡片整体宽度不变,只是内容可用宽度变小,符合直觉。
	 */
	box-sizing: border-box;
	flex-shrink: 0;
	scroll-snap-align: start;
}

.polaris-carousel.is-widthmode-count .polaris-carousel__track > .wp-block-polaris-carousel-item {
	--polaris-carousel-items-current: var( --polaris-carousel-items-desktop, 3 );
	flex-basis: calc(
		( 100% - ( var( --polaris-carousel-items-current ) - 1 ) * var( --polaris-carousel-gap, 1rem ) ) /
		var( --polaris-carousel-items-current )
	);
}
@media ( max-width: 782px ) {
	.polaris-carousel.is-widthmode-count .polaris-carousel__track > .wp-block-polaris-carousel-item {
		--polaris-carousel-items-current: var( --polaris-carousel-items-tablet, 2 );
	}
}
@media ( max-width: 600px ) {
	.polaris-carousel.is-widthmode-count .polaris-carousel__track > .wp-block-polaris-carousel-item {
		--polaris-carousel-items-current: var( --polaris-carousel-items-mobile, 1 );
	}
}

/* ═══════════════════════════════════════════
   滚动区域通栏(is-track-fullwidth)

   只让**滚动容器**(track)突破容器宽度铺到浏览器两侧,外层 .polaris-carousel 和
   视口层都保持原来的宽度 —— 所以分页、导航(含叠加的)仍然对齐 1280 这类内容宽度,
   只有卡片会滚出去。

   手法:左右负外边距把 track 撑到通栏,再用等量的内边距把内容顶回原来的起始位置。
   于是"第一张卡片的起点"依然对齐容器左边,滚动起来却是整个浏览器宽度。
   track 的**内容盒**宽度因此还是原来的容器宽度,上面按数量算 flex-basis 的
   calc(100% ...) 不受影响,卡片尺寸和不通栏时完全一致。

   溢出量优先用 JS 实测(--polaris-carousel-bleed-left/right,见 view.js):
   逐边测量,容器不居中时也不会算错,而且用的是 documentElement.clientWidth
   (不含滚动条),不会把页面撑出一条横向滚动条。
   JS 跑起来之前 / 编辑器里没有 view.js 时,回退到 (100vw - 100%) / 2。
═══════════════════════════════════════════ */
.polaris-carousel.is-track-fullwidth .polaris-carousel__track {
	margin-left: calc( -1 * var( --polaris-carousel-bleed-left, calc( ( 100vw - 100% ) / 2 ) ) );
	margin-right: calc( -1 * var( --polaris-carousel-bleed-right, calc( ( 100vw - 100% ) / 2 ) ) );
	padding-left: var( --polaris-carousel-bleed-left, calc( ( 100vw - 100% ) / 2 ) );
	padding-right: var( --polaris-carousel-bleed-right, calc( ( 100vw - 100% ) / 2 ) );
	/*
	 * scroll-padding 的百分比是相对**滚动口**(已经通栏)算的,和上面 margin/padding
	 * 相对包含块算的不是一个基准,所以这里只认 JS 给的 px 值,没有百分比回退。
	 * 不设的话原生触摸滑动会把卡片吸附到通栏的左边缘,而不是容器起始位置。
	 */
	scroll-padding-left: var( --polaris-carousel-bleed-left, 0px );
	scroll-padding-right: var( --polaris-carousel-bleed-right, 0px );
}

.polaris-carousel.is-widthmode-fixed .polaris-carousel__track > .wp-block-polaris-carousel-item {
	flex: 0 0 auto;
	width: var( --polaris-carousel-item-max-width, 280px );
	max-width: var( --polaris-carousel-item-max-width, 280px );
}

/* ═══════════════════════════════════════════
   导航(polaris/carousel-nav):一个容器 + 两个箭头按钮

   两个正交维度组合出全部摆法:
     位置 is-position-overlay 叠加(绝对定位压在轮播上,不占高度)
          is-position-top / -bottom 上方 / 下方(轮播项之外的正常文档流)
     对齐 is-justify-left / -center / -right / -space-between
          (「撑满」即旧版"贴容器两侧"的行为,也是默认值)

   容器自身不画背景/边框 —— 那些是按钮级的(见 --polaris-carousel-arrow-*),
   容器只负责定位与排布;需要一整条导航底色时用原生「样式 → 颜色」给外层设背景。
═══════════════════════════════════════════ */
.polaris-carousel__nav {
	/* border-box:叠加模式下容器是 left:0/right:0 铺满的,原生「内边距」要算在这个
	   宽度里面才是"把箭头往里收",否则会把容器撑到轮播外面去。 */
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: var( --polaris-carousel-nav-gap, 0.5rem );
	z-index: 3;
}
.polaris-carousel__nav.is-justify-left          { justify-content: flex-start; }
.polaris-carousel__nav.is-justify-center        { justify-content: center; }
.polaris-carousel__nav.is-justify-right         { justify-content: flex-end; }
.polaris-carousel__nav.is-justify-space-between { justify-content: space-between; }

/*
 * 叠加:铺满容器宽度、垂直居中。容器 pointer-events:none,只有按钮吃指针事件 ——
 * 否则中间那条透明带会挡住轮播项的点击/拖拽(尤其「撑满」时它横跨整个轮播)。
 */
.polaris-carousel__nav.is-position-overlay {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	transform: translateY( -50% );
	pointer-events: none;
}
.polaris-carousel__nav.is-position-overlay > .polaris-carousel__nav-btn {
	pointer-events: auto;
}

/* 上方/下方:正常文档流。默认留一点与轮播的距离,用户在「样式 → 尺寸 → 外边距」
   设了外边距的话是内联样式,优先级更高,会直接覆盖这里。 */
.polaris-carousel__nav.is-position-top    { margin-bottom: 0.75rem; }
.polaris-carousel__nav.is-position-bottom { margin-top: 0.75rem; }

/* ── 箭头按钮:全部视觉走 CSS 变量,由 carousel-nav 的 render.php 注入 ── */
.polaris-carousel__nav-btn {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var( --polaris-carousel-arrow-size, auto );
	height: var( --polaris-carousel-arrow-size, auto );
	padding: 0;
	/*
	 * 边框只给基线:粗细 0(默认不冒边框)、实线、颜色跟随箭头(currentColor)。
	 * 具体的粗细 / 圆角 / 颜色是**每侧独立**的,由 carousel-nav 直接内联到各自的按钮上
	 * —— 左右箭头可以设成不一样,所以不走容器上那套两侧共用的 CSS 变量。
	 * 颜色默认 currentColor 而不是 transparent:只调粗细不调颜色时得能立刻看见,
	 * 否则边框占了位却是透明的,按钮悄悄变大、看不出任何边框。
	 */
	border: 0 solid currentColor;
	border-radius: 0;
	background: var( --polaris-carousel-arrow-bg, transparent );
	color: inherit;
	/* 图标默认继承这里的字号(图标的 svg 是 1em 见方);每侧可在自己的设置里单独覆盖 */
	font-size: 1.5rem;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.polaris-carousel__nav-btn:hover {
	background: var( --polaris-carousel-arrow-hover-bg, var( --polaris-carousel-arrow-bg, transparent ) );
}
.polaris-carousel__nav-btn:disabled,
.polaris-carousel__nav-btn.is-disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

/* ── 按钮里的图标:大小跟着字号走(继承按钮,每侧可单独设 font-size) ── */
.polaris-carousel__arrow-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}
.polaris-carousel__arrow-icon svg {
	width: 1em;
	height: 1em;
}
.polaris-carousel__arrow-icon img {
	width: auto;
	height: 1em;
	max-width: 100%;
}
/* 图标库 / 内置箭头是描边式:强制 fill:none,跟着 currentColor 走 */
.polaris-carousel__arrow-icon.is-library svg {
	fill: none !important;
	stroke: currentColor;
}
/*
 * RTL:方向性图标跟着翻面 —— RTL 下「上一项」在右边,箭头也应当指向右边。
 * 只翻 SVG,不翻 <img>:图片图标可能是照片或带文字的图形,镜像会出错。
 * 对称图标(圆点、加号之类)翻了也看不出差别,无害。
 * 旧版箭头内嵌的是原生「图标」区块,一并照顾到。
 */
[dir="rtl"] .polaris-carousel__arrow-icon svg,
[dir="rtl"] .polaris-carousel__arrow svg {
	transform: scaleX( -1 );
}
/* 自定义 SVG:填充 / 描边分别着色,没设的那一项保留 SVG 自带配色(跳过 fill="none") */
.polaris-carousel__arrow-icon.is-fill-tinted svg:not( [fill="none"] ),
.polaris-carousel__arrow-icon.is-fill-tinted svg [fill]:not( [fill="none"] ) {
	fill: var( --polaris-icon-fill, currentColor );
}
.polaris-carousel__arrow-icon.is-stroke-tinted svg[stroke]:not( [stroke="none"] ),
.polaris-carousel__arrow-icon.is-stroke-tinted svg [stroke]:not( [stroke="none"] ) {
	stroke: var( --polaris-icon-stroke, currentColor );
}

/* ═══════════════════════════════════════════
   旧版箭头(polaris/carousel-arrow):只为存量内容保留

   选择器刻意收窄成**直接子元素**(前台是 .polaris-carousel 的子元素,编辑器里
   被 InnerBlocks 塞进了 track),这样新版 .polaris-carousel__nav 里的按钮不会
   被这套绝对定位规则误伤。

   刻意不给自己的背景/圆角/阴影/固定尺寸 —— 那些交给内部嵌套的原生「图标」区块
   自己的颜色/尺寸/边框设置,这里只是个定位壳,否则会盖过/裁切图标自己的配置。

   position/inset 全部 !important:编辑器给每个区块自己的 wrapper 加了
   position:relative(供它自己的选中框/工具条定位用),选择器优先级比这里的
   普通类选择器高,不加 !important 会被盖掉,箭头就会退回 flex 正常流,
   跟在轮播项后面而不是叠在容器两侧。
═══════════════════════════════════════════ */
.polaris-carousel__viewport > .polaris-carousel__arrow,
.polaris-carousel__track > .polaris-carousel__arrow {
	position: absolute !important;
	top: 50% !important;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	transform: translateY( -50% );
	transition: opacity 0.15s ease;
}
/* 用逻辑属性:RTL 下「上一项」自动挪到右边(新版导航靠 flex 行序天然就对,不用管) */
.polaris-carousel__viewport > .polaris-carousel__arrow.is-prev,
.polaris-carousel__track > .polaris-carousel__arrow.is-prev { inset-inline-start: 0.5rem !important; inset-inline-end: auto !important; }
.polaris-carousel__viewport > .polaris-carousel__arrow.is-next,
.polaris-carousel__track > .polaris-carousel__arrow.is-next { inset-inline-end: 0.5rem !important; inset-inline-start: auto !important; }
.polaris-carousel__arrow:disabled,
.polaris-carousel__arrow.is-disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

/* ═══════════════════════════════════════════
   分页:圆点 / 进度条,位置二选一(单独一行 / 叠加在底部)
═══════════════════════════════════════════ */
/*
 * 内边距同时承担「分页离轮播项多远」:单独一行时是**上**内边距(元素紧接在视口层之后),
 * 叠加时是**下**内边距(元素 bottom:0 贴着视口层底边,内边距把圆点往上顶)。
 * 所以默认 8px 而不是 0;外边距默认 0,留给需要额外挪位的场景。
 * box-sizing 必须是 border-box —— 叠加时是 left:0/right:0 铺满的,内边距要算在里面。
 */
.polaris-carousel__pagination {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: var( --polaris-carousel-pagination-padding, 8px );
	margin: var( --polaris-carousel-pagination-margin, 0 );
}
/*
 * 对齐(左/中/右,默认中)。进度条是 flex:1 但带 max-width 上限,撑到上限后仍有剩余空间,
 * 所以 justify-content 对两种样式都有效。
 */
.polaris-carousel.is-pagination-align-left  .polaris-carousel__pagination { justify-content: flex-start; }
.polaris-carousel.is-pagination-align-right .polaris-carousel__pagination { justify-content: flex-end; }
/*
 * 叠加模式:脱离文档流,贴在**视口层**(只包住轮播项的那层)底部居中,不再挤占下方空间。
 * 参照刻意是 .polaris-carousel__viewport 而不是最外层 —— 后者还包含单独一行的分页和
 * 上方/下方的导航,拿它当参照时"叠加在底部"会叠到导航上,而不是叠在卡片上。
 */
.polaris-carousel.is-pagination-position-overlay .polaris-carousel__pagination {
	position: absolute;
	left: 0;
	right: 0;
	/* 贴着视口层底边;离轮播项多远由**下内边距**决定(默认 8px) */
	bottom: 0;
	z-index: 2;
}
/*
 * 叠加时圆点/进度条是白色系(为深色图设计)。浅色图上白配白等于隐形 —— 用户反馈过
 * "进度条叠加时分页消失了",实测元素确实在(617×3、可见),纯粹是看不见。
 * 补一层很淡的深色投影兜底:深色图上几乎察觉不到,浅色图上足够把边缘勾出来。
 */
.polaris-carousel.is-pagination-position-overlay .polaris-carousel__dot,
.polaris-carousel.is-pagination-position-overlay .polaris-carousel__bar {
	box-shadow: 0 0 2px rgba( 0, 0, 0, 0.22 );
}

/* —— 圆点 —— */
.polaris-carousel__dot {
	appearance: none;
	flex: 0 0 auto;
	width: var( --polaris-carousel-dot-size, 0.5rem );
	height: var( --polaris-carousel-dot-size, 0.5rem );
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var( --wp--preset--color--ink-35, rgba( 0, 0, 0, 0.24 ) );
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.polaris-carousel.is-pagination-position-overlay .polaris-carousel__dot {
	background: rgba( 255, 255, 255, 0.5 );
}
/* 当前页只换颜色,不再放大 —— 所有圆点保持同一尺寸(放大会让「圆点大小」设了也不一致) */
.polaris-carousel__dot.is-active {
	background: var( --polaris-carousel-pagination-color, var( --wp--preset--color--primary, #2563eb ) );
}
.polaris-carousel.is-pagination-position-overlay .polaris-carousel__dot.is-active {
	background: var( --polaris-carousel-pagination-color, #fff );
}

/*
 * —— 进度条 —— 每页一条短杠;is-passed = 已过(填满),is-active = 当前页。
 * 只有"间歇自动播放"下才加 is-animating,跑一次 0%→100% 的填充动画(时长 = 停留时长);
 * 其余情况(手动/连续/未开启自动播放)is-active 直接按满显示,不做动画,
 * 免得没有明确"单页时长"概念时动画看起来毫无意义。
 */
.polaris-carousel__bar {
	appearance: none;
	flex: 1;
	max-width: 3.5rem;
	height: var( --polaris-carousel-bar-thickness, 3px );
	padding: 0;
	border: 0;
	border-radius: 2px;
	background: var( --wp--preset--color--ink-15, rgba( 0, 0, 0, 0.12 ) );
	overflow: hidden;
	cursor: pointer;
}
.polaris-carousel.is-pagination-position-overlay .polaris-carousel__bar {
	background: rgba( 255, 255, 255, 0.55 );
}
.polaris-carousel__bar-fill {
	display: block;
	height: 100%;
	width: 0%;
	background: var( --polaris-carousel-pagination-color, var( --wp--preset--color--primary, #2563eb ) );
}
.polaris-carousel.is-pagination-position-overlay .polaris-carousel__bar-fill {
	background: var( --polaris-carousel-pagination-color, #fff );
}
.polaris-carousel__bar.is-passed .polaris-carousel__bar-fill,
.polaris-carousel__bar.is-active .polaris-carousel__bar-fill {
	width: 100%;
}
.polaris-carousel__bar.is-active.is-animating .polaris-carousel__bar-fill {
	width: 0%;
	animation-name: polaris-carousel-bar-fill;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}
.polaris-carousel.is-autoplay-paused .polaris-carousel__bar.is-animating .polaris-carousel__bar-fill {
	animation-play-state: paused;
}
@keyframes polaris-carousel-bar-fill {
	from { width: 0%; }
	to   { width: 100%; }
}

/* ═══════════════════════════════════════════
   轮播项(polaris/carousel-item):纯容器
   不设 height:100%/flex 强制值 —— 让 track 的 align-items:stretch 或
   flex-start(natural 策略)原生决定高度,避免和"跟随最高"打架。
   需要封面图/背景图效果时,直接在里面嵌套核心「封面」/「堆叠」组件即可。
═══════════════════════════════════════════ */
.polaris-carousel-item {
	width: 100%;
}

/* ═══════════════════════════════════════════
   轮播项的背景媒体(图片 / 视频,封面式铺满 + 焦点 + 覆盖)

   结构见 carousel-item/render.php:只有设了背景才会多出 __bg / __content 两层,
   没设背景时卡片的 DOM 和以前完全一样。
═══════════════════════════════════════════ */
.polaris-carousel-item.has-bg-media {
	position: relative;
	/* 裁掉铺满的媒体,让它跟随卡片自己的圆角 */
	overflow: hidden;
}
.polaris-carousel-item__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	/* 不吃指针事件:否则会挡住轮播的拖拽,编辑器里也会挡住内部区块的选中 */
	pointer-events: none;
	/* 视频的封面图走这里(CSS 背景),background-position 由焦点内联决定 */
	background-size: cover;
	background-repeat: no-repeat;
}
.polaris-carousel-item__media,
.polaris-carousel-item__video {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	/* object-position 由焦点内联决定 */
	object-fit: cover;
}
/*
 * 视频默认透明,view.js 确认能播了才加 .is-ready 淡入 —— 中途加载失败/被拦截时,
 * 用户看到的始终是下面那张封面图,不会出现一块黑。
 */
.polaris-carousel-item__video {
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
}
.polaris-carousel-item__video.is-ready {
	opacity: 1;
}
@media ( prefers-reduced-motion: reduce ) {
	.polaris-carousel-item__video {
		transition: none;
	}
}
.polaris-carousel-item__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
	pointer-events: none;
}
/* 内容抬到背景之上:__bg 是定位元素,不抬的话会盖住正常流里的内容 */
.polaris-carousel-item__content {
	position: relative;
	z-index: 1;
}

/*
 * Inspector:背景面板里"焦点选择器往下"的控件补间距。
 * 面板里的原生控件统一传了 __nextHasNoMarginBottom(新版样式,自身不带下外边距),
 * 不补的话文本域、开关会一个个贴在上一个控件屁股后面。
 * 16px 对齐 WP 控件之间的默认外边距。
 */
.polaris-carousel-item-bg__gap {
	margin-top: 16px;
}

/* Inspector:背景媒体的选择缩略图(视频用 <video> 显示首帧,和图片同一个框) */
.polaris-carousel-media__preview {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 48px;
	height: 36px;
	overflow: hidden;
	border: 1px solid rgba( 0, 0, 0, 0.12 );
	border-radius: 4px;
	background: rgba( 0, 0, 0, 0.04 );
}
.polaris-carousel-media__preview img,
.polaris-carousel-media__preview video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ═══════════════════════════════════════════
   编辑器专属
═══════════════════════════════════════════ */
.polaris-carousel.is-editor .polaris-carousel__arrow {
	cursor: default;
}
/*
 * 前台(render.php)把箭头渲染成 track 的同级兄弟,定位锚点是外层 .polaris-carousel;
 * 编辑器受 InnerBlocks 单一挂载区限制,箭头和轮播项一起塞进了 track 内部——track 自己
 * 又是 position:relative + overflow-x:auto 的横向滚动容器,箭头 position:absolute 的
 * 定位锚点就变成了 track 那个很宽的可滚动内容盒,滚动时箭头跟着"漂移"。
 * 这里把编辑器里的 track 降级成 position:static,让箭头的定位锚点上浮到外层
 * .polaris-carousel(仍是 position:relative),和前台表现一致;track 的 position:relative
 * 只给前台 view.js 换算 item.offsetLeft 用,编辑器不跑那段逻辑,降级不影响它。
 */
.polaris-carousel.is-editor .polaris-carousel__track {
	cursor: default;
	position: static;
}

/*
 * 「添加轮播项」按钮 —— 父块 renderAppender 产出的
 * .block-list-appender > button.block-editor-button-block-appender(aria-label「添加 轮播项」)。
 *
 * 症状:选中某个轮播项时,它和该卡片自己的「添加区块」按钮
 * (.block-editor-inserter__toggle)叠在卡片右下角,两个 + 号糊成一团。
 *
 * 原因:Gutenberg 会把这个追加按钮**绝对定位**到容器角上(所以先前只给 flex/align-self
 * 完全不起作用 —— 绝对定位的子元素根本不参与 flex 布局)。这里把它连同内部按钮一起
 * 强行拉回正常流,它就老老实实排在最后一张卡片**后面**(靠 track 的 gap 分隔),
 * 横向滚到头即可看到,和卡片角上的原生按钮再无交集。
 *
 * !important 是必需的:编辑器样式表在区块样式之后加载,不加会被原样盖回去。
 */
.polaris-carousel.is-editor .polaris-carousel__track > .block-list-appender,
.polaris-carousel.is-editor .polaris-carousel__track > .block-list-appender > .block-editor-button-block-appender {
	position: static !important;
	inset: auto !important;
	transform: none !important;
	margin: 0 !important;
}
.polaris-carousel.is-editor .polaris-carousel__track > .block-list-appender {
	/* 不被压缩(轮播项都是 flex-shrink:0,挤不动它就只能自己缩没),且只占按钮那么高 */
	flex: 0 0 auto;
	align-self: center;
	width: auto;
	max-width: none;
	height: auto;
}

/*
 * 编辑器里的导航(polaris/carousel-nav):同上,受 InnerBlocks 单一挂载区限制,
 * 它和轮播项一起被塞进了 track 内部,而前台它是 track 的**兄弟**。所以编辑器里
 * 三种位置一律绝对定位(锚点是 position:relative 的外层 .polaris-carousel),
 * 再靠 .polaris-carousel__viewport 的外边距把"上方/下方"那条空位腾出来 ——
 * 空位高度 --polaris-carousel-nav-reserve 由父块实测导航的外边距盒得到,见 edit.js。
 *
 * 容器保持 pointer-events:none(理由同前台),但按钮吃事件,点按钮即可选中导航块。
 *
 * position 带 !important 的理由和上面旧版箭头那段完全一样:编辑器给每个区块的 wrapper
 * 加了 position:relative(供选中框/工具条定位),不写 !important 有被盖掉的风险,
 * 一旦被盖掉导航就退回 flex 正常流,跟在轮播项后面。
 */
.polaris-carousel.is-editor .polaris-carousel__nav {
	position: absolute !important;
	inset-inline: 0;
	pointer-events: none;
}
.polaris-carousel.is-editor .polaris-carousel__nav > .polaris-carousel__nav-btn,
.polaris-carousel.is-editor .polaris-carousel__nav > .polaris-carousel__nav-placeholder {
	pointer-events: auto;
	cursor: default;
}

/*
 * ── 编辑器专属:非「撑满」时把导航盒收到内容宽度 ──
 *
 * 前台靠"通栏盒 + justify-content"把箭头推到左/中/右,这在页面上看不出盒子多大。
 * 但编辑器会给选中/高亮的区块画一圈 1px 轮廓(inset:0,贴着区块自己的盒子),
 * 通栏盒画出来就是横跨整个轮播的一长条 —— 很容易被当成"导航自己带了边框"
 * (实际导航容器全程没有 border 声明,量过 computed style 是 0)。
 *
 * 所以编辑器里改用"内容宽度 + 贴边定位"来达到同样的视觉位置,选中框就只圈住箭头。
 * 「撑满」不收:箭头本来就该分列容器两端,通栏盒是对的。
 *
 * ⚠️ 这里和前台是**两套定位机制**(前台 justify-content / 编辑器 贴边定位 + transform),
 * 改前台对齐规则时这段要一起改,否则编辑器和前台会对不上。四种对齐的落位已逐一核对过。
 * 贴边一律用逻辑属性(inset-inline-*):前台的 flex-start/flex-end 本来就是跟随书写方向的,
 * 编辑器这边若写死 left/right,RTL 下两边就会一个靠左一个靠右。
 */
.polaris-carousel.is-editor .polaris-carousel__nav:not( .is-justify-space-between ) {
	width: max-content;
	max-width: 100%;
}
.polaris-carousel.is-editor .polaris-carousel__nav.is-justify-left  { inset-inline-end: auto; }
.polaris-carousel.is-editor .polaris-carousel__nav.is-justify-right { inset-inline-start: auto; }
.polaris-carousel.is-editor .polaris-carousel__nav.is-justify-center {
	inset-inline-start: 50%;
	inset-inline-end: auto;
}
/*
 * 居中靠 transform 回退半个自身宽度;叠加时还要保留原来的垂直居中位移。
 * inset-inline-start:50% 在 RTL 下量的是**右**边起 50%,所以回退方向也要反过来 ——
 * 用 --polaris-carousel-x-dir 统一控制正负,RTL 下由下面的 [dir] 规则翻成 1。
 */
.polaris-carousel.is-editor .polaris-carousel__nav.is-justify-center.is-position-overlay {
	transform: translate( calc( var( --polaris-carousel-x-dir, -1 ) * 50% ), -50% );
}
.polaris-carousel.is-editor .polaris-carousel__nav.is-justify-center.is-position-top,
.polaris-carousel.is-editor .polaris-carousel__nav.is-justify-center.is-position-bottom {
	transform: translateX( calc( var( --polaris-carousel-x-dir, -1 ) * 50% ) );
}
[dir="rtl"] .polaris-carousel,
.polaris-carousel[dir="rtl"] {
	--polaris-carousel-x-dir: 1;
}
/* 两侧箭头都隐藏时的编辑器占位(前台不存在这个元素) */
.polaris-carousel__nav-placeholder {
	padding: 0.25rem 0.5rem;
	border: 1px dashed rgba( 0, 0, 0, 0.25 );
	border-radius: 3px;
	font-size: 12px;
	line-height: 1.4;
	color: rgba( 0, 0, 0, 0.55 );
}
/*
 * 刻意**不**清掉外边距:绝对定位下 margin 仍参与偏移,而父块量的是导航的外边距盒
 * (见 edit.js 里那段 useEffect),两者配合下来 —— 上方时导航到轮播的空隙正好等于
 * margin-bottom,下方时等于 margin-top,和前台(正常流)完全一致。
 *
 * 「上方/下方」紧贴**视口层**的外侧摆放(bottom:100% = 视口上沿之上,
 * top:100% = 下沿之下)。参照和叠加模式是同一个 .polaris-carousel__viewport,
 * 所以轮播自己的内边距、单独一行的分页都不会把它带偏。
 */
.polaris-carousel.is-editor .polaris-carousel__nav.is-position-top {
	bottom: 100%;
	top: auto;
	transform: none;
}
.polaris-carousel.is-editor .polaris-carousel__nav.is-position-bottom {
	top: 100%;
	bottom: auto;
	transform: none;
}
/*
 * 空位由**视口层的外边距**腾出,和上面的 bottom/top:100% 刚好互补:
 * 空位高度 = 导航的外边距盒高度(实测,见 edit.js),导航连同自己的外边距正好填满它,
 * 下面单独一行的分页也被一并推开,不会和导航叠在一起。
 *
 * 包裹层必须是 BFC(display:flow-root),否则视口层的上下外边距会**穿透**出去和
 * .polaris-carousel 合并 —— 那样整个轮播往下挪一截,容器内部一点空位都没多出来,
 * 导航照旧压在第一张卡片上(实测踩过)。
 */
.polaris-carousel__editor-flow {
	display: flow-root;
}
.polaris-carousel.is-editor.is-nav-position-top .polaris-carousel__viewport {
	margin-top: var( --polaris-carousel-nav-reserve, 3.5rem );
}
.polaris-carousel.is-editor.is-nav-position-bottom .polaris-carousel__viewport {
	margin-bottom: var( --polaris-carousel-nav-reserve, 3.5rem );
}

/*
 * ── 导航在下方 + 分页单独一行:前台顺序是 轮播项 → 分页 → 导航 ──
 *
 * 上面那套把导航贴在**视口层**下沿(top:100%),那是紧挨着轮播项的位置 —— 正好落在
 * 分页前面,和前台顺序反了。这种组合下改成以**包裹层**为参照贴底(bottom:0),
 * 空位也从视口层的外边距换成包裹层的下内边距,导航就落到分页之后。
 *
 * 换参照的做法是把视口层降级成 position:static,让绝对定位的导航向上找到包裹层。
 * 只在这一种组合下这么做:分页「叠加在底部」时它自己就在视口层里、必须靠视口层定位,
 * 而那种组合下分页不在正常流里,也就不存在"谁排在谁前面"的问题。
 */
.polaris-carousel.is-editor.is-nav-position-bottom.is-pagination-position-inline .polaris-carousel__viewport {
	position: static;
	margin-bottom: 0;
}
.polaris-carousel.is-editor.is-nav-position-bottom.is-pagination-position-inline .polaris-carousel__editor-flow {
	position: relative;
	padding-bottom: var( --polaris-carousel-nav-reserve, 3.5rem );
}
.polaris-carousel.is-editor.is-nav-position-bottom.is-pagination-position-inline .polaris-carousel__nav.is-position-bottom {
	top: auto;
	bottom: 0;
}