/* =====================================================================
   HTX 首页主图轮播 · 图文叠加层
   设计基调：简约高级的法式/欧美 B2B 面料展厅
   - 底层：产品主图铺满通栏，完整不切割
   - 上层：悬浮文案层（absolute），不撑开图片区域
   - 控件：极简圆点 + 边角小型播放/暂停
   ===================================================================== */
.htx-hero{position:relative}

/* ---------- 底层：图片铺满通栏 ---------- */
/* 主题结构：外层 flex 左右两栏（左：装饰小图，右：轮播 lg:w-3/4 max-w-1000px）
   目标：轮播在桌面端通栏铺满整个首屏宽度 —— 让右栏占满整行、左栏作为浮层装饰 */
.htx-hero .ref-home-hero{
	width:100%!important;
	max-width:none!important;
	flex:1 1 100%!important;
}
.htx-hero .ref-hero-mask{
	width:100%;
	height:auto;
	aspect-ratio:auto;
	overflow:hidden;
	position:relative;
	border-radius:0!important;
}
/* 强制解除主题的切角（clip-path 路径 + 圆角变量）——通栏时不需要切角，
   目标是"画面完整无切割"。用高特异性选择器覆盖主题规则。 */
.htx-hero .ref-hero-mask{
	clip-path:none!important;
	-webkit-clip-path:none!important;
}
.htx-hero .ref-hero-mask,
.htx-hero .ref-hero-slides,
.htx-hero .ref-hero-slide,
.htx-hero .ref-hero-image{
	--dual-cr:0!important;
	--notch-w:0!important;
	--notch-h:0!important;
	border-radius:0!important;
}
.htx-hero .ref-hero-mask::before,
.htx-hero .ref-hero-mask::after,
.htx-hero .ref-hero-slide::before,
.htx-hero .ref-hero-slide::after{display:none!important}

/* 外层两栏：桌面端让轮播栏占满整行，左侧装饰图浮于其上 */
@media (min-width:1024px){
	.htx-hero-wrap{
		flex-direction:column!important;
		align-items:stretch!important;
		position:relative;
	}
	.htx-hero-wrap > .htx-hero{
		width:100%!important;
		max-width:none!important;
		flex:0 0 100%!important;
		order:2;
	}
	/* 装饰小图在大图通栏模式下收起（原本是左栏的补充装饰，通栏后与文案层冲突）
	   其链接能力由「Explore Collection」角标承担 */
	.htx-hero-deco{
		display:none!important;
	}
}
/* 幻灯片容器需让出点击：不能盖在 slide 内容之上（否则链接点不到） */
.htx-hero .ref-hero-slides{position:absolute;inset:0;display:block}
.htx-hero .ref-hero-slide{pointer-events:auto}
.htx-hero .ref-hero-slide{
	position:absolute;
	inset:0;
	display:block;
	opacity:0;
	visibility:hidden;
	transition:opacity .7s cubic-bezier(.4,0,.2,1);
	pointer-events:auto;
	z-index:1;
}
.htx-hero .ref-hero-slide.is-active{opacity:1;visibility:visible;z-index:2}
.htx-hero .ref-hero-image{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center center;
	display:block;
	z-index:0;
}
/* 链接层必须盖在图片之上（图片默认 z-index:auto=0），否则点不到 */
.htx-hero .ref-hero-slide a.htx-hero-link{
	position:absolute;
	inset:0;
	display:block;
	z-index:3;
}
.htx-hero .ref-hero-slide a.htx-hero-link:focus-visible{outline:2px solid #AC7900;outline-offset:-4px}

/* ---------- 文字层：悬浮于图片之上 ---------- */
/* 文案层左下留出控件位置（圆点+播放），右留给 CTA 角标 */
.htx-hero .htx-hero-copy{
	position:absolute;
	z-index:4;
	pointer-events:none;
	max-width:min(560px,46%);
	color:#fff;
	text-shadow:0 1px 24px rgba(0,0,0,.34);
}
.htx-hero .htx-hero-copy[data-pos="left"]{left:clamp(20px,4.2vw,72px);bottom:clamp(56px,7vw,92px)}
.htx-hero .htx-hero-copy[data-pos="center"]{left:50%;transform:translateX(-50%);bottom:clamp(56px,7vw,92px);text-align:center}
.htx-hero .htx-hero-copy[data-pos="right"]{right:clamp(20px,4.2vw,72px);bottom:clamp(56px,7vw,92px);text-align:right}

/* 顶部标签行 */
.htx-hero .htx-hero-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.htx-hero .htx-hero-copy[data-pos="center"] .htx-hero-tags{justify-content:center}
.htx-hero .htx-hero-copy[data-pos="right"] .htx-hero-tags{justify-content:flex-end}
.htx-hero .htx-hero-tag{
	display:inline-flex;align-items:center;
	font:600 10.5px/1 -apple-system,"Segoe UI",Roboto,Arial,sans-serif;
	letter-spacing:1.6px;text-transform:uppercase;
	padding:7px 13px;border-radius:100px;
	border:1px solid rgba(255,255,255,.55);
	background:rgba(15,16,15,.22);
	backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
	color:#fff;
}
.htx-hero .htx-hero-tag.is-gold{
	background:rgba(172,121,0,.92);
	border-color:rgba(255,255,255,.5);
	color:#fff8e8;
}
.htx-hero .htx-hero-tag.is-outline{background:rgba(255,255,255,.16)}

/* 品类 + 地区风格 */
.htx-hero .htx-hero-kicker{
	font:600 12px/1.4 -apple-system,"Segoe UI",Roboto,Arial,sans-serif;
	letter-spacing:3.4px;text-transform:uppercase;
	color:rgba(255,255,255,.9);
	margin-bottom:10px;
}
.htx-hero .htx-hero-kicker .htx-hero-sep{display:inline-block;width:26px;height:1px;background:rgba(255,255,255,.55);vertical-align:middle;margin:0 12px}

/* 主标题 */
.htx-hero .htx-hero-title{
	font-family:'Herokid','Herokid-Condensed','Arial Narrow',serif;
	font-weight:700;
	font-size:clamp(26px,3.4vw,50px);
	line-height:1.06;
	letter-spacing:.3px;
	text-transform:none;
	margin:0 0 12px;
	color:#fff;
}

/* 适用成衣品类 */
.htx-hero .htx-hero-garment{
	font:400 13.5px/1.5 -apple-system,"Segoe UI",Roboto,Arial,sans-serif;
	letter-spacing:.4px;
	color:rgba(255,255,255,.92);
	margin:0 0 10px;
}
.htx-hero .htx-hero-garment .htx-hero-label{
	font-weight:700;letter-spacing:1.6px;text-transform:uppercase;font-size:10.5px;
	color:rgba(255,255,255,.68);margin-right:9px;
}

/* 细装饰线 */
.htx-hero .htx-hero-rule{
	width:54px;height:1px;background:rgba(255,255,255,.62);margin:0 0 12px;
}
.htx-hero .htx-hero-copy[data-pos="center"] .htx-hero-rule{margin-left:auto;margin-right:auto}
.htx-hero .htx-hero-copy[data-pos="right"] .htx-hero-rule{margin-left:auto}

/* 备注 */
.htx-hero .htx-hero-note{
	font:400 13px/1.6 -apple-system,"Segoe UI",Roboto,Arial,sans-serif;
	color:rgba(255,255,255,.82);
	max-width:42ch;margin:0;
}
.htx-hero .htx-hero-copy[data-pos="center"] .htx-hero-note{margin-left:auto;margin-right:auto}
.htx-hero .htx-hero-copy[data-pos="right"] .htx-hero-note{margin-left:auto}

/* ---------- 控件：极简圆点 + 边角播放 ---------- */
/* 圆点与播放键放左下角，避让右下角的 Explore Collection 角标 */
.htx-hero .ref-hero-controls{
	position:absolute;
	z-index:5;
	left:clamp(14px,2vw,28px);
	right:auto;
	top:auto;bottom:clamp(12px,1.6vw,22px);
	background:none;backdrop-filter:none;-webkit-backdrop-filter:none;
	box-shadow:none;padding:0;width:auto;max-width:none;border-radius:0;
	display:flex;align-items:center;gap:10px;
}
.htx-hero .ref-hero-dots{display:flex;gap:7px;align-items:center}
.htx-hero .ref-hero-dots button{
	width:7px;height:7px;padding:0;border-radius:50%;
	background:rgba(255,255,255,.5);
	border:1px solid rgba(255,255,255,.75);
	cursor:pointer;transition:.25s;opacity:1;
}
.htx-hero .ref-hero-dots button:hover{background:rgba(255,255,255,.85);transform:scale(1.15)}
.htx-hero .ref-hero-dots button[aria-pressed="true"]{
	background:#fff;border-color:#fff;width:20px;border-radius:100px;
}
.htx-hero .ref-hero-play{
	width:30px;height:30px;padding:0;border-radius:50%;
	background:rgba(15,16,15,.28);
	border:1px solid rgba(255,255,255,.4);
	color:#fff;cursor:pointer;
	display:flex;align-items:center;justify-content:center;
	transition:.2s;
	backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.htx-hero .ref-hero-play:hover{background:rgba(15,16,15,.5)}
.htx-hero .ref-hero-play svg{width:13px;height:13px}

/* 原有 CTA 角标：缩小并避让文字层 */
.htx-hero .ref-hero-cta{
	width:138px!important;height:88px!important;
	border-radius:24px!important;padding:7px!important;
	right:clamp(12px,1.4vw,20px)!important;
	bottom:clamp(10px,1.4vw,18px)!important;
}
.htx-hero .ref-hero-cta > div{border-radius:17px!important;padding:0 12px!important}
.htx-hero .ref-hero-cta p{font-size:15px!important}

/* ---------- 移动端 ---------- */
@media (max-width:1023px){
	.htx-hero .ref-hero-mask{height:260px!important}
	.htx-hero .htx-hero-copy{
		max-width:none;left:18px!important;right:18px!important;
		transform:none!important;text-align:left!important;
		bottom:50px!important;
	}
	.htx-hero .htx-hero-copy[data-pos="center"] .htx-hero-tags,
	.htx-hero .htx-hero-copy[data-pos="right"] .htx-hero-tags{justify-content:flex-start}
	.htx-hero .htx-hero-copy[data-pos="center"] .htx-hero-rule,
	.htx-hero .htx-hero-copy[data-pos="right"] .htx-hero-rule{margin-left:0}
	.htx-hero .htx-hero-copy[data-pos="center"] .htx-hero-note,
	.htx-hero .htx-hero-copy[data-pos="right"] .htx-hero-note{margin-left:0}
	.htx-hero .htx-hero-title{font-size:23px;margin-bottom:8px}
	.htx-hero .htx-hero-kicker{font-size:10.5px;letter-spacing:2.4px;margin-bottom:7px}
	.htx-hero .htx-hero-kicker .htx-hero-sep{width:16px;margin:0 8px}
	.htx-hero .htx-hero-garment{font-size:12px;margin-bottom:8px}
	.htx-hero .htx-hero-note{display:none}
	.htx-hero .htx-hero-rule{margin-bottom:9px}
	.htx-hero .ref-hero-controls{bottom:10px;left:14px;right:auto}
	.htx-hero .ref-hero-cta{width:120px!important;height:74px!important;border-radius:20px!important}
	.htx-hero .ref-hero-cta p{font-size:13px!important}
}

@media (max-width:640px){
	.htx-hero .ref-hero-mask{height:300px!important}
	.htx-hero .htx-hero-copy{bottom:56px!important}
	.htx-hero .htx-hero-tag{font-size:9.5px;padding:6px 11px;letter-spacing:1.2px}
}

@media (prefers-reduced-motion:reduce){
	.htx-hero .ref-hero-slide{transition:none}
}

/* ------------------------------------------------------------------
 * 禁用原生拖拽（关键修复）
 * 轮播图片被包在 <a> 链接里，浏览器会对链接内容启动 HTML5 原生拖拽，
 * 一旦触发 dragstart，浏览器会立即掐断 pointermove / pointerup 事件流
 * （实测：pointermove 停在第 2 次、pointerup 完全不派发），
 * 导致：① 轮播左右滑动失效；② 图片点击偶发不跳转。
 * 这里彻底禁用原生拖拽，让轮播手势与链接点击都能正常收到指针事件。
 * ------------------------------------------------------------------ */
.htx-hero .ref-hero-slide,
.htx-hero .ref-hero-slide *{
	-webkit-user-drag:none;
	-moz-user-drag:none;
	-o-user-drag:none;
	user-drag:none;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
	-webkit-touch-callout:none;
}
.htx-hero .ref-hero-slide img,
.htx-hero .ref-hero-slide a,
.htx-hero .ref-hero-slide a img{
	draggable:false;
	-webkit-user-drag:none;
	user-drag:none;
}