/* 站点轮播 slider（2026-10-31，Swiper 14.3.0）—— 前台站点、站点设计器、小程序设计器画布共用
   颜色/尺寸变量由组件自己的 <style>（SliderService::css / tplHelper.js _slCss）按组件设置写入：
   --sl-page 分页器颜色 / --sl-page-on 当前项 / --sl-nav 箭头颜色 / --sl-nav-bg 箭头底色 / --sl-mask 遮罩色 / --sl-mask-o 遮罩透明度
   --sl-cw 大图文字最大宽度 / --sl-scale 居中放大两侧缩放 / --sl-logo-w Logo 宽度
   .is-ready = 脚本初始化完成；之前（或没开 JS）按第一屏静态显示，不会整列竖着排开。
   .is-mp    = 小程序设计器画布里按小程序原生 swiper 的能力预览（没有左右箭头）。 */

.dn-slider { position: relative; }
.dn-slider-bg { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 0; }
.dn-slider-body { position: relative; z-index: 1; }
.dn-slider-main { position: relative; }

/* ── 初始化前的兜底布局（swiper.min.css 加载前也成立）── */
.dn-slider .swiper { position: relative; overflow: hidden; }
.dn-slider .swiper-wrapper { display: flex; box-sizing: content-box; }
.dn-slider .swiper-slide { position: relative; flex-shrink: 0; width: 100%; box-sizing: border-box; }
.dn-slider:not(.is-ready) .dn-slider-pagination,
.dn-slider:not(.is-ready) .dn-slider-prev,
.dn-slider:not(.is-ready) .dn-slider-next { visibility: hidden; }
.dn-slider.is-single .dn-slider-pagination,
.dn-slider.is-single .dn-slider-prev,
.dn-slider.is-single .dn-slider-next { display: none; }

/* ── 媒体 ── */
.dn-slider-media { display: block; width: 100%; height: 100%; object-fit: cover; }
.dn-slider-fit--contain .dn-slider-media { object-fit: contain; }
.dn-slider-pic { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.dn-slider--hero .dn-slider-slide > .dn-slider-media,
.dn-slider--gallery .dn-slider-slide > .dn-slider-media { position: absolute; left: 0; top: 0; }
.dn-slider--hero .dn-slider-slide { overflow: hidden; background: #f2f3f5; }
/* 大图/缩略图主图：图片绝对定位铺满，高度由容器决定（组件设置的高度/比例写在组件自己的 <style> 里）；没设高度时给个保底（用 height 不用 min-height：子级 height:100% 在 min-height 下算不出来） */
.dn-slider--hero .dn-slider-main > .swiper,
.dn-slider--gallery .dn-slider-main > .swiper { height: 200px; }
.dn-slider--hero .dn-slider-main .swiper-slide,
.dn-slider--gallery .dn-slider-main .swiper-slide { height: 100%; }

/* ── 全宽大图：遮罩 / 整图链接 / 叠加文字 ── */
.dn-slider-mask { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; background: var(--sl-mask, #000); opacity: var(--sl-mask-o, .3); pointer-events: none; }
.dn-slider-cover { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 3; }
.dn-slider-content { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 4; display: flex; flex-direction: column; box-sizing: border-box; padding: 6% 8%; pointer-events: none; color: #fff; }
.dn-slider-inner { max-width: var(--sl-cw, 640px); pointer-events: auto; }
.dn-slider--hero .dn-slider-title { margin: 0 0 .4em; font-size: 36px; font-weight: 700; line-height: 1.25; text-shadow: 0 1px 6px rgba(0,0,0,.25); }
.dn-slider--hero .dn-slider-subtitle { margin: 0 0 .5em; font-size: 16px; color: rgba(255,255,255,.92); }
.dn-slider--hero .dn-slider-desc { margin: 0 0 1em; font-size: 15px; line-height: 1.7; color: rgba(255,255,255,.9); }
/* 九宫格位置：l/c/r = 水平，t/c/b = 垂直 */
.dn-slider-pos--lt { justify-content: flex-start; align-items: flex-start; text-align: left; }
.dn-slider-pos--lc { justify-content: center;     align-items: flex-start; text-align: left; }
.dn-slider-pos--lb { justify-content: flex-end;   align-items: flex-start; text-align: left; }
.dn-slider-pos--ct { justify-content: flex-start; align-items: center; text-align: center; }
.dn-slider-pos--cc { justify-content: center;     align-items: center; text-align: center; }
.dn-slider-pos--cb { justify-content: flex-end;   align-items: center; text-align: center; }
.dn-slider-pos--rt { justify-content: flex-start; align-items: flex-end; text-align: right; }
.dn-slider-pos--rc { justify-content: center;     align-items: flex-end; text-align: right; }
.dn-slider-pos--rb { justify-content: flex-end;   align-items: flex-end; text-align: right; }

/* 文字入场动画：只在初始化完成后生效（没开 JS 时文字照常显示） */
.dn-slider.is-ready.dn-slider-anim--fade-up .dn-slider-inner > *,
.dn-slider.is-ready.dn-slider-anim--fade-left .dn-slider-inner > *,
.dn-slider.is-ready.dn-slider-anim--zoom .dn-slider-inner > * { opacity: 0; transition: opacity .6s ease, transform .6s ease; }
.dn-slider.is-ready.dn-slider-anim--fade-up .dn-slider-inner > * { transform: translateY(24px); }
.dn-slider.is-ready.dn-slider-anim--fade-left .dn-slider-inner > * { transform: translateX(-32px); }
.dn-slider.is-ready.dn-slider-anim--zoom .dn-slider-inner > * { transform: scale(.92); }
.dn-slider.is-ready .swiper-slide-active .dn-slider-inner > * { opacity: 1; transform: none; }
.dn-slider.is-ready .swiper-slide-active .dn-slider-inner > *:nth-child(2) { transition-delay: .12s; }
.dn-slider.is-ready .swiper-slide-active .dn-slider-inner > *:nth-child(3) { transition-delay: .24s; }
.dn-slider.is-ready .swiper-slide-active .dn-slider-inner > *:nth-child(4) { transition-delay: .36s; }

.dn-slider-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.dn-slider-content .dn-slider-btns { justify-content: inherit; }
.dn-slider-pos--ct .dn-slider-btns, .dn-slider-pos--cc .dn-slider-btns, .dn-slider-pos--cb .dn-slider-btns { justify-content: center; }
.dn-slider-pos--rt .dn-slider-btns, .dn-slider-pos--rc .dn-slider-btns, .dn-slider-pos--rb .dn-slider-btns { justify-content: flex-end; }
/* 第二个按钮默认是"空心"：只在按钮设置（returnBtnStyle 行内样式）没给对应属性时才生效，面板一设就听面板的。
   不能用 !important（之前那样会把面板的背景色/边框/文字色全部压掉）；选择器多加一层 .dn-slider-btns 是为了压过 returnBtnClass 给的 bg-primary 色板 class */
.dn-slider-btns .dn-slider-btn2:not([style*="background"]) { background: transparent; }
.dn-slider-btns .dn-slider-btn2:not([style*="border:"]) { border: 1px solid currentColor; }
.dn-slider-btns .dn-slider-btn2:not([style*="color:"]) { color: inherit; }

/* ── 卡片 / 居中放大 ── */
/* 卡片不给默认圆角：圆角/边框/阴影全部由卡片设置（tpl_card）决定，设成 0 就是直角 */
.dn-slider-card { height: 100%; display: flex; flex-direction: column; background: #fff; overflow: hidden; color: #303133; }
/* 图片框不给底色：图片设了圆角/透明背景时四角露出卡片背景（原来是 #f2f3f5 灰白块） */
.dn-slider-cardimg { display: block; position: relative; height: 200px; overflow: hidden; box-sizing: border-box; }
.dn-slider-cardimg .dn-slider-media { position: absolute; left: 0; top: 0; transition: transform .4s ease; }
.dn-slider-card:hover .dn-slider-cardimg .dn-slider-media { transform: scale(1.04); }
.dn-slider-cardbody { flex: 1; padding: 12px 14px 16px; }
.dn-slider-card .dn-slider-title { margin: 0 0 6px; font-size: 16px; font-weight: 600; line-height: 1.4; }
.dn-slider-card .dn-slider-title a { color: inherit; text-decoration: none; }
/* 大图版式标题里也包了 <a>：文字设置的颜色/字号写在标题标签上，链接必须继承，否则会被站点主题的全局 a 颜色顶掉 */
.dn-slider-title a { color: inherit; font: inherit; text-decoration: none; }
.dn-slider-card .dn-slider-subtitle { font-size: 13px; color: #909399; margin-bottom: 4px; }
.dn-slider-card .dn-slider-desc { font-size: 13px; color: #606266; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dn-slider-price { margin-top: 8px; }
.dn-slider-price-now { color: #f5222d; font-weight: 600; font-size: 16px; }
.dn-slider-price-old { color: #c0c4cc; font-size: 12px; margin-left: 6px; }
/* 现价/市场价固定 inline-block：returnTitleStyle 默认会输出 display:block（会把两个价格拆成两行），这里压住；
   inline-block 下文字设置里的上下边距、内边距、背景、圆角、单行省略都能正常生效 */
.dn-slider-price-now, .dn-slider-price-old { display: inline-block !important; vertical-align: baseline; max-width: 100%; }
.dn-slider-card .dn-slider-btns { margin-top: 10px; }
.dn-slider--center .swiper-slide { transform: scale(var(--sl-scale, .85)); opacity: .6; transition: transform .4s ease, opacity .4s ease; }
.dn-slider--center .swiper-slide-active { transform: none; opacity: 1; }
.dn-slider--card .swiper-slide, .dn-slider--center .swiper-slide, .dn-slider--text .swiper-slide { height: auto; }
.dn-slider--card .swiper-wrapper, .dn-slider--center .swiper-wrapper, .dn-slider--text .swiper-wrapper { align-items: stretch; }
.dn-slider--card .dn-slider-main > .swiper,
.dn-slider--center .dn-slider-main > .swiper,
.dn-slider--text .dn-slider-main > .swiper { padding-bottom: 2px; }
/* 循环+整屏翻页补空位时 Swiper 插入的空白格 */
.dn-slider .swiper-slide-blank { visibility: hidden; }

/* ── 卡片设置（tpl_card）：每一屏的条目容器，所有版式都套 ── */
.dn-slider-item { position: relative; height: 100%; box-sizing: border-box; overflow: hidden; }
.dn-slider--hero .dn-slider-item, .dn-slider--gallery .dn-slider-item { position: absolute; left: 0; top: 0; width: 100%; }
.dn-slider--hero .dn-slider-item > .dn-slider-media, .dn-slider--gallery .dn-slider-item > .dn-slider-media { position: absolute; left: 0; top: 0; }
/* 单条背景（数据条目开了"背景设置"时，叠在图片上、文字下） */
.dn-slider-slidebg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }

/* ── 缩略图联动 ── */
.dn-slider--gallery .dn-slider-slide { background: #f2f3f5; overflow: hidden; }
.dn-slider-galleryimg { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.dn-slider-caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 10px 14px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.5)); }
.dn-slider-thumbs { margin-top: 10px; }
.dn-slider-thumb { height: 100%; cursor: pointer; opacity: .5; border-radius: 4px; overflow: hidden; transition: opacity .2s; box-sizing: border-box; }
.dn-slider-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dn-slider-thumb.swiper-slide-thumb-active, .dn-slider-thumb:hover { opacity: 1; }
.dn-slider-thumb.swiper-slide-thumb-active { box-shadow: inset 0 0 0 2px var(--sl-page-on, #409eff); }
.dn-slider-body--left { display: flex; flex-direction: row-reverse; gap: 10px; }
.dn-slider-body--left .dn-slider-main { flex: 1; min-width: 0; }
.dn-slider-body--left .dn-slider-thumbs { margin-top: 0; flex-shrink: 0; align-self: stretch; height: auto; }
.dn-slider-body--left .dn-slider-thumb { height: auto; }
@media (max-width: 767px) {
	.dn-slider-body--left { flex-direction: column; }
	.dn-slider-body--left .dn-slider-thumbs { width: auto !important; height: 64px; margin-top: 10px; }
}

/* ── 走马灯（匀速）：dnslider.js 复制一份内容，wrapper 平移 -50% 循环；鼠标移入暂停 ── */
.dn-slider--ticker .swiper-wrapper { gap: 0; }
.dn-slider--ticker .dn-slider-main .swiper-slide { width: var(--sl-logo-w, 160px); height: 60px; margin-right: var(--sl-gap, 40px); }
.dn-slider.is-ticker .swiper-wrapper { width: max-content; animation: dn-slider-ticker 30s linear infinite; }
.dn-slider.is-ticker:hover .swiper-wrapper { animation-play-state: paused; }
.dn-slider.is-mp.is-ticker:hover .swiper-wrapper { animation-play-state: running; }
@keyframes dn-slider-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.dn-slider-logo { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; box-sizing: border-box; padding: 6px 12px; border: 1px solid #ebeef5; border-radius: 6px; background: #fff; text-decoration: none; }
.dn-slider-logo img { max-width: 100%; max-height: 100%; object-fit: contain; filter: grayscale(1); opacity: .75; transition: filter .3s, opacity .3s; }
.dn-slider-logo:hover img { filter: none; opacity: 1; }
.dn-slider-logo-text { color: #909399; font-weight: 600; white-space: nowrap; }

/* ── 文字 / 评价 ── */
.dn-slider-quote { height: 100%; box-sizing: border-box; padding: 20px; background: #fff; border: 1px solid #ebeef5; color: #303133; }
.dn-slider-quote .dn-slider-desc { font-size: 14px; line-height: 1.8; margin-bottom: 14px; }
.dn-slider-author { display: flex; align-items: center; gap: 10px; }
.dn-slider-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.dn-slider-quote .dn-slider-title { font-size: 14px; font-weight: 600; }
.dn-slider-quote .dn-slider-subtitle { font-size: 12px; color: #909399; }
.dn-slider-stars { position: relative; display: inline-block; font-size: 14px; line-height: 1; margin-bottom: 10px; color: #e4e7ed; letter-spacing: 2px; }
.dn-slider-stars::before { content: "★★★★★"; }
.dn-slider-stars::after { content: "★★★★★"; position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; color: #f7ba2a; width: calc(var(--r, 5) / 5 * 100%); }

/* ── 左右按钮 ── */
.dn-slider .swiper-button-prev, .dn-slider .swiper-button-next, .dn-slider-arrow {
	width: 40px; height: 40px; margin-top: -20px; border-radius: 50%;
	background: var(--sl-nav-bg, rgba(0,0,0,.35)); background-image: none;
	display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10;
	transition: opacity .25s, background-color .25s;
}
.dn-slider .swiper-button-prev::after, .dn-slider .swiper-button-next::after, .dn-slider-arrow::after {
	content: ""; width: 10px; height: 10px; border-top: 2px solid var(--sl-nav, #fff); border-left: 2px solid var(--sl-nav, #fff);
}
.dn-slider .dn-slider-prev::after { transform: translateX(2px) rotate(-45deg); }
.dn-slider .dn-slider-next::after { transform: translateX(-2px) rotate(135deg); }
.dn-slider .swiper-button-disabled { opacity: .35; cursor: default; }
.dn-slider-arrow { position: absolute; top: 50%; }
.dn-slider-nav--outside .dn-slider-main { padding: 0 52px; }
.dn-slider-nav--outside .dn-slider-arrow.dn-slider-prev { left: 0; }
.dn-slider-nav--outside .dn-slider-arrow.dn-slider-next { right: 0; }
.dn-slider-nav--outside .dn-slider-arrow { background: var(--sl-nav-bg, #fff); box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.dn-slider-nav--outside .dn-slider-arrow::after { border-color: var(--sl-nav, #606266); }
.dn-slider-nav--hover .swiper-button-prev, .dn-slider-nav--hover .swiper-button-next { opacity: 0; }
.dn-slider-nav--hover:hover .swiper-button-prev, .dn-slider-nav--hover:hover .swiper-button-next { opacity: 1; }
.dn-slider-nav--hover:hover .swiper-button-disabled { opacity: .35; }
/* 小程序画布：小程序原生 swiper 没有左右箭头 */
.dn-slider.is-mp .dn-slider-prev, .dn-slider.is-mp .dn-slider-next { display: none; }
.dn-slider.is-mp.dn-slider-nav--outside .dn-slider-main { padding: 0; }
@media (max-width: 767px) {
	.dn-slider-nav--hover .swiper-button-prev, .dn-slider-nav--hover .swiper-button-next { display: none; }
	.dn-slider-nav--outside .dn-slider-main { padding: 0; }
	.dn-slider-nav--outside .dn-slider-arrow { display: none; }
}

/* ── 分页器 ── */
.dn-slider .swiper-pagination-bullet { background: var(--sl-page, #fff); opacity: .5; }
.dn-slider .swiper-pagination-bullet-active { background: var(--sl-page-on, var(--sl-page, #fff)); opacity: 1; }
.dn-slider-page--line .swiper-pagination-bullet { width: 24px; height: 3px; border-radius: 2px; }
.dn-slider .swiper-pagination-fraction { color: var(--sl-page, #fff); font-size: 14px; }
.dn-slider .swiper-pagination-progressbar { background: rgba(0,0,0,.1); }
.dn-slider .swiper-pagination-progressbar .swiper-pagination-progressbar-fill,
.dn-slider .swiper-pagination-progressbar > span { background: var(--sl-page-on, #409eff); }
/* 分页器左/右对齐（默认居中；对应老 banner 的指示点位置 下左/下中/下右） */
.dn-slider-pagealign--left .swiper-pagination-bullets.swiper-pagination-horizontal,
.dn-slider-pagealign--left .swiper-pagination-fraction { text-align: left; padding: 0 16px; box-sizing: border-box; }
.dn-slider-pagealign--right .swiper-pagination-bullets.swiper-pagination-horizontal,
.dn-slider-pagealign--right .swiper-pagination-fraction { text-align: right; padding: 0 16px; box-sizing: border-box; }
/* 分页器放在轮播下方（卡片类常用，深色圆点） */
.dn-slider-page-out .dn-slider-main > .dn-slider-pagination { position: static; margin-top: 14px; text-align: center; }
.dn-slider-page-out .dn-slider-main > .dn-slider-pagination.swiper-pagination-progressbar { position: relative; height: 3px; }