/* ════════════════════════════════════════════════════════════
   XREAL Hero Slider — 前端样式
   克隆 xreal.com 首页：80% slide 居中露边 + 16/9 圆角卡 + 遮罩 + 双 CTA
   性能：仅 transform 动画

   ── 主题隔离（1.1.0）────────────────────────────────────────
   1) 所有几何量（模块上下间距、滑块宽）集中在 .xhs 上的 CSS 变量里，
      布局与控件层共用同一来源 → 主题改根字号/容器宽不会让箭头、指示器相对卡片漂移。
      模块上下间距默认 0（卡片贴边、模块无空隙），需要留白时用「模块上/下间距」控件。
   2) 箭头与指示器放进 .xhs__ui 控件层：该层与卡片同框（只扣掉模块
      上下间距），因此箭头贴卡片左右边缘、指示器贴卡片下边缘，
      与滑块宽度/露边/视口宽度无关。
   3) 控件层内的 button 几何属性（position/inset/transform/display/
      margin/padding/border/尺寸/最小尺寸/圆角/底色）带 !important：
      主题的全局按钮规则（如 Woodmart 的
      :is(.btn,.button,button,[type=submit],[type=button])
      {position:relative;display:inline-flex;min-height:42px} 与插件
      .xhs__arrow 同为 (0,1,0) 权重但源序更后，会把 position:absolute
      改写成 relative，使箭头掉进文档流堆在左下角）无法再改写布局。
      可被 Elementor 控件调节的量一律经 CSS 变量消费（--xhs-arrow-*、
      --xhs-dots-*），因此 !important 不会锁死编辑器里的可调项。
   ════════════════════════════════════════════════════════════ */

/* ── 0. 变量层（布局 + 控件层共用的唯一几何来源） ───────────── */
.xhs {
  /* 上下间距默认 0：卡片贴模块边缘，模块无空隙（原 0.5rem/2rem 上下内边距
     + 轨道 1rem 上下内边距会在卡片上下各留 21px / 42px 空隙；下方那 2rem
     是早期指示器按框架底部定位时预留的，指示器迁入 .xhs__ui 后已无用途）。
     需要留白时用控件「模块上/下间距」（响应式）或 Elementor 自身的内外边距。 */
  --xhs-pad-top: 0px;
  --xhs-pad-bottom: 0px;
  --xhs-arrow-inset: 16px;      /* 箭头距卡片左右边缘 */
  --xhs-dots-inset: 20px;       /* 指示器距卡片下边缘 */
  --xhs-peek: 80px;             /* 模块宽度模式「滑块宽 + 两侧露边」时的单侧露边宽度 */
  position: relative;
  overflow: hidden;
  padding: var(--xhs-pad-top) 0 var(--xhs-pad-bottom);
  user-select: none;
  isolation: isolate;           /* 独立层叠上下文：主题 z-index/混合模式不外溢 */
}

/* ── 模块宽度模式（控件的 class，默认不加 = 撑满容器 + 露边自适应） ──
   「滑块宽度」控件只决定卡片宽度；露边设计下模块必然比卡片宽（否则露不出邻居）。
   若要“设定值 = 实际宽度”，用下面两个模式把模块宽度也钉住：
   注意 max-width 不写 !important —— 保留用户在 Elementor/主题侧覆盖的余地。 */
.xhs--w-tight {                       /* 模块 = 滑块宽（两侧不露边） */
  max-width: var(--xhs-slide-w, 1100px);
  margin-left: auto;
  margin-right: auto;
}
.xhs--w-tight .xhs__track { padding-left: 0; padding-right: 0; }
.xhs--w-peek {                        /* 模块 = 滑块宽 + 两侧露边宽度 */
  max-width: calc(var(--xhs-slide-w, 1100px) + var(--xhs-peek, 80px) * 2);
  margin-left: auto;
  margin-right: auto;
}

/* 对称居中：左右 padding = (容器宽 - 滑块宽)/2 → 激活滑块横向居中、两侧露边相等。
   padding 的 % 相对容器宽（与 var 同基准），由此内容盒宽恰好 = 滑块宽，
   flex-basis 恒为 100%（相对内容盒）即可命中任意单位（px/%/vw/rem/em）的滑块宽。
   ⚠ 用 max(0px, …) 显式钳非负：滑块宽 ≥ 容器宽时内边距归 0、卡片收缩为容器宽。
   旧写法 calc 结果为负会让整条 padding 声明判无效（整条丢弃），同样是归 0 但属于
   静默兜底；显式钳制后行为可预期。
   ⚠ 注意：若滑块宽的单位丢失（如 1600 无单位）或为 %，calc 可能整体无效 —— 此时
   内边距同样归 0、卡片撑满容器，表现为「实际比设定宽」。宽度控件请务必带单位（px/%…）。
   上下内边距为 0：垂直留白统一由框架的 --xhs-pad-top / --xhs-pad-bottom 控制（单一来源）。 */
.xhs__track {
  display: flex;
  gap: 0;
  padding: 0 max(0px, calc((100% - var(--xhs-slide-w, 1100px)) / 2));
  will-change: transform;
  cursor: grab;
  touch-action: pan-y;
}
.xhs__track.is-dragging { cursor: grabbing; }

.xhs__slide {
  flex: 0 0 100%;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  aspect-ratio: 16 / 9;
  background: #0B1220;
}
.xhs__media { position: absolute; inset: 0; background-size: cover; background-position: center; }
.xhs__body {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 2rem; gap: 1rem;
  background: rgba(0, 0, 0, 0.3);
}
.xhs__title { margin: 0; font-size: clamp(1.6rem, 4vw, 3rem); font-weight: 700; letter-spacing: -0.02em; color: #fff; }
.xhs__desc { margin: 0; max-width: 34em; font-size: clamp(0.95rem, 1.4vw, 1.2rem); color: rgba(255, 255, 255, 0.82); line-height: 1.55; }
.xhs__cta { display: flex; gap: 16px; margin-top: 30px; }
.xhs__btn {
  padding: 12px 28px; border-radius: 999px; font-size: 0.95rem; font-weight: 600;
  text-decoration: none; transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.xhs__btn--solid { background: #fff; color: #111; }
.xhs__btn--solid:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(255, 255, 255, 0.25); }
.xhs__btn--ghost { border: 1.5px solid rgba(255, 255, 255, 0.6); color: #fff; background: transparent; }
.xhs__btn--ghost:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-2px); }
.xhs__hint { display: none; }
.xhs:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.4); outline-offset: 4px; }

/* ── 1. 控件层：与卡片同框（框架内边距 + 轨道内边距同一表达式扣除） ──
   卡片盒 = 框架内容盒去掉轨道上下内边距；水平方向 = 滑块宽（超容器时由
   max-width 收成容器宽，与轨道内负 padding 归零后的卡片宽度一致）。
   该层只是一层定位参考：pointer-events:none，不挡轨道拖拽。 */
.xhs__ui {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: var(--xhs-pad-top) !important;
  bottom: var(--xhs-pad-bottom) !important;
  width: var(--xhs-slide-w, 100%) !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-sizing: border-box !important;
  transform: translateX(-50%) !important;
  pointer-events: none;
  z-index: 4;
}
.xhs__ui > * { pointer-events: auto; }

/* ── 2. 指示器（激活卡片底部圆点——由控件层定位，永远贴卡片下边缘） ── */
.xhs__dots {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  bottom: var(--xhs-dots-inset, 20px) !important;
  top: auto !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  box-sizing: border-box !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 6px 10px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(0, 0, 0, 0.35) !important;
  line-height: 0 !important;
  text-align: left !important;
  z-index: 4;
}
.xhs__dots button {
  position: static !important;          /* 抵消主题 button{position:relative;top:…} 造成的位移 */
  display: block !important;
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  width: var(--xhs-dots-size, 10px) !important;
  height: var(--xhs-dots-size, 10px) !important;
  min-width: 0 !important;
  min-height: 0 !important;             /* 抵消主题 button{min-height:42px} 撑高 */
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background-color: var(--xhs-dots-color, rgba(255, 255, 255, 0.4)) !important;
  background-image: none !important;
  box-shadow: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: 0 !important;
  color: transparent !important;
  cursor: pointer !important;
  transform: var(--xhs-dot-scale, none) !important;
  transition: background-color 0.3s ease, transform 0.3s ease;
}
.xhs__dots button:hover { --xhs-dot-scale: scale(1.25); }
.xhs__dots button.is-active {
  --xhs-dot-scale: scale(1.15);
  background-color: var(--xhs-dots-active-color, #FFFFFF) !important;
}

/* ── 3. 左右箭头导航（贴卡片左右边缘，垂直居中于卡片） ── */
.xhs__arrow {
  position: absolute !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  width: var(--xhs-arrow-size, 44px) !important;
  height: var(--xhs-arrow-size, 44px) !important;
  min-width: 0 !important;
  min-height: 0 !important;             /* 抵消主题 button{min-height:42px} 撑高 */
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: var(--xhs-arrow-radius, 50%) !important;
  background-color: var(--xhs-arrow-bg, rgba(0, 0, 0, 0.35)) !important;
  background-image: none !important;
  box-shadow: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: 0 !important;
  text-align: center !important;
  vertical-align: middle !important;
  color: #fff !important;
  cursor: pointer !important;
  z-index: 6;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.xhs__arrow svg {
  display: block !important;
  fill: var(--xhs-arrow-color, currentColor) !important;
  width: 50% !important;
  height: 50% !important;
  max-width: none !important;
  pointer-events: none;
}
.xhs__arrow:hover { background-color: var(--xhs-arrow-bg-hover, rgba(0, 0, 0, 0.6)) !important; }
.xhs__arrow:hover svg { fill: var(--xhs-arrow-color-hover, var(--xhs-arrow-color, currentColor)) !important; }
.xhs__arrow--prev { left: var(--xhs-arrow-inset, 16px) !important; right: auto !important; }
.xhs__arrow--next { right: var(--xhs-arrow-inset, 16px) !important; left: auto !important; }

/* ── 4. 断点 ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .xhs {
    --xhs-arrow-inset: 10px;
    --xhs-dots-inset: 16px;
  }
  .xhs__track { padding: 0 max(0px, calc((100% - var(--xhs-slide-w, 330px)) / 2)); gap: 14px; }
  .xhs__dots { padding: 5px 8px !important; gap: 6px !important; }
  .xhs__arrow { width: var(--xhs-arrow-size, 38px) !important; height: var(--xhs-arrow-size, 38px) !important; }
  .xhs__cta { flex-direction: column; gap: 10px; margin-top: 20px; }
  .xhs__btn { padding: 10px 22px; }
  .xhs__hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .xhs__track { transition: none; }
}